added Readme of projects on home page. Images need fixing on Readme

README.md

@@ -4,8 +4,6 @@ Personal website and central hub for my projects, systems, and self-hosted servi
 
 This site is not just a portfolio — it acts as an entry point into a larger ecosystem of applications, infrastructure, and experiments.
 
----
-
 ## Overview
 
 The site is divided into three conceptual layers:
@@ -38,8 +36,6 @@ Dedicated pages for deeper content:
 - About — personal background and context
 - CV — formal resume (if applicable)
 
----
-
 ## Philosophy
 
 This site is intentionally minimal and system-oriented.
@@ -53,8 +49,6 @@ Instead of a traditional portfolio, it focuses on:
 
 It evolves alongside my personal development and technical interests.
 
----
-
 ## Stack
 
 - React
@@ -63,8 +57,6 @@ It evolves alongside my personal development and technical interests.
 - Catppuccin theme
 - Self-hosted backend services (Forgejo, Nextcloud, etc.)
 
----
-
 ## Status
 
 This site is continuously evolving and serves as both a portfolio and experimental environment.

frontend/package.json

@@ -14,8 +14,6 @@
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
         "react-markdown": "^10.1.0",
-        "remark": "^15.0.1",
-        "remark-html": "^16.0.1",
         "tailwindcss": "^4.2.2"
     },
     "devDependencies": {

frontend/src/components/ProjectsReadme.jsx

@@ -1,31 +1,149 @@
 import { useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 
-const fetchREADME = async (url) => {
+const fetchREADME = async (repoUrl) => {
     try {
-        const response = await fetch(url);
+        let rawUrl = repoUrl;
+
+        if (repoUrl.includes("/src/branch/")) {
+            rawUrl = repoUrl.replace("/src/branch/", "/raw/branch/");
+        } else if (
+            repoUrl.includes("github.com") &&
+            !repoUrl.includes("raw.githubusercontent.com")
+        ) {
+            rawUrl = repoUrl
+                .replace("github.com", "raw.githubusercontent.com")
+                .replace("/blob/", "/");
+        }
+
+        const response = await fetch(rawUrl);
         if (!response.ok) throw new Error("Failed to fetch README");
         return await response.text();
     } catch (error) {
         console.error(error);
-        return "Error fetching README.";
+        return "Error fetching README. Make sure the URL points to a raw markdown file.";
     }
 };
 
-export default function ProjectsReadme() {
+export default function ProjectsReadme({
+    repoUrl,
+}) {
     const [readmeContent, setReadmeContent] = useState("");
+    const [isLoading, setIsLoading] = useState(true);
 
     useEffect(() => {
-        fetchREADME(
+        setIsLoading(true);
-            // "https://git.aramjonghu.nl/AramJonghu/aramjonghu-site/src/branch/master/README.md",
+        fetchREADME(repoUrl).then((content) => {
-            "../../../README.md",
+            setReadmeContent(content);
-        ).then((content) => setReadmeContent(content));
+            setIsLoading(false);
-    }, []);
+        });
+    }, [repoUrl]);
 
     return (
-        <div>
+        <div className="w-full max-w-4xl mx-auto p-4 md:p-8 bg-ctp-mantle rounded-xl shadow-sm border border-ctp-text">
-            <h2>README Content</h2>
+            {isLoading ? (
-            <ReactMarkdown>{readmeContent}</ReactMarkdown>
+                <div className="flex flex-col gap-3 animate-pulse w-full">
+                    <div className="h-4 bg-ctp-overlay0 rounded-full w-3/4"></div>
+                    <div className="h-4 bg-ctp-overlay0 rounded-full w-3/4"></div>
+                    <div className="h-4 bg-ctp-overlay0 rounded-full w-3/4"></div>
+                </div>
+            ) : (
+                <div className="text-ctp-text leading-relaxed prose prose-base md:prose-lg dark:prose-invert max-w-none">
+                    <ReactMarkdown
+                        components={{
+                            code({ className, children, ...props }) {
+                                const isCodeBlock =
+                                    className ||
+                                    (typeof children === "string" &&
+                                        children.includes("\n"));
+                                if (isCodeBlock) {
+                                    return (
+                                        <code
+                                            className={`${className || ""} text-sm block overflow-x-auto`}
+                                            {...props}
+                                        >
+                                            {children}
+                                        </code>
+                                    );
+                                }
+                                return (
+                                    <code
+                                        className="bg-ctp-mantle px-1.5 py-0.5 rounded text-sm font-mono"
+                                        {...props}
+                                    >
+                                        {children}
+                                    </code>
+                                );
+                            },
+                            pre({ children, ...props }) {
+                                return (
+                                    <pre
+                                        className="bg-ctp-mantle p-4 rounded-lg overflow-x-auto text-sm my-4"
+                                        {...props}
+                                    >
+                                        {children}
+                                    </pre>
+                                );
+                            },
+                            h1: ({ children }) => (
+                                <h1 className="text-3xl font-bold text-ctp-mauve mt-8 mb-4 border-b pb-2 border-ctp-green">
+                                    {children}
+                                </h1>
+                            ),
+                            h2: ({ children }) => (
+                                <h2 className="text-2xl font-bold text-ctp-lavender mt-8 mb-4 border-b pb-2 border-ctp-green">
+                                    {children}
+                                </h2>
+                            ),
+                            h3: ({ children }) => (
+                                <h3 className="text-xl font-bold text-ctp-lavender mt-5 mb-3 border-ctp-green">
+                                    {children}
+                                </h3>
+                            ),
+                            p: ({ children }) => (
+                                <p className="mb-4 text-ctp-text">{children}</p>
+                            ),
+                            ul: ({ children }) => (
+                                <ul className="list-disc text-ctp-text pl-6 mb-4">
+                                    {children}
+                                </ul>
+                            ),
+                            ol: ({ children }) => (
+                                <ol className="list-decimal text-ctp-text pl-6 mb-4">
+                                    {children}
+                                </ol>
+                            ),
+                            li: ({ children }) => (
+                                <li className="mb-1 text-ctp-text">{children}</li>
+                            ),
+                            a: ({ children, href }) => (
+                                <a
+                                    href={href}
+                                    className="text-ctp-text hover:text-ctp-green hover:underline"
+                                    target="_blank"
+                                    rel="noreferrer"
+                                >
+                                    {children}
+                                </a>
+                            ),
+                            blockquote: ({ children }) => (
+                                <blockquote className="border-l-4 border-ctp-text pl-4 py-1 mb-4 text-cpt-text bg-ctp-mantle rounded-r-lg">
+                                    {children}
+                                </blockquote>
+                            ),
+                            img: ({ src, alt }) => (
+                                <img
+                                    src={src}
+                                    alt={alt}
+                                    className="max-w-full h-auto rounded-lg my-4 shadow-sm"
+                                />
+                            ),
+                        }}
+                    >
+                        {readmeContent}
+                    </ReactMarkdown>
+                </div>
+            )}
         </div>
     );
 }

frontend/src/pages/Home.jsx

@@ -2,22 +2,71 @@ import { useState } from "react";
 import ProjectsReadme from "../components/ProjectsReadme";
 
 export default function Home() {
-    const [active, setActive] = useState("projects");
+    const projectList = [
+        {
+            id: "site",
+            name: "aramjonghu-site",
+            url: "https://git.aramjonghu.nl/AramJonghu/aramjonghu-site/raw/branch/master/README.md",
+        },
+        {
+            id: "game",
+            name: "Game (Gameron the Lost Level)",
+            url: "https://git.aramjonghu.nl/AramJonghu/gameron-the-lost-level/src/branch/master/README.md",
+        },
+        {
+            id: "nvim",
+            name: "Nvim Config",
+            url: "https://git.aramjonghu.nl/AramJonghu/nvim/src/branch/main/README.md",
+        },
+    ];
+
+    const [projIdx, setProjIdx] = useState(0);
+    const prevProject = () =>
+        setProjIdx((i) => (i - 1 + projectList.length) % projectList.length);
+    const nextProject = () => setProjIdx((i) => (i + 1) % projectList.length);
+
+    const [activeTab, setActiveTab] = useState("about");
+
     const sections = [
         {
             id: "projects",
             title: "Projects",
-            content: <ProjectsReadme />,
+            content: (
+                <>
+                    <h1 className="text-center m-6 text-3xl font-bold text-ctp-mauve">
+                        Projects
+                    </h1>
+                    <div className="flex justify-center mb-6">
+                        <button
+                            onClick={prevProject}
+                            className="px-3 py-1 rounded ui-btn text-ctp-text"
+                        >
+                            ◀︎ Prev
+                        </button>
+                        <span className="self-center mx-6 font-medium">
+                            {projectList[projIdx].name} ({projIdx + 1}/
+                            {projectList.length})
+                        </span>
+                        <button
+                            onClick={nextProject}
+                            className="px-3 py-1 rounded ui-btn text-ctp-text"
+                        >
+                            Next ▶︎
+                        </button>
+                    </div>
+                    <ProjectsReadme repoUrl={projectList[projIdx].url} />
+                </>
+            ),
         },
         {
             id: "systems",
             title: "Systems",
-            content: "Systems content",
+            content: <p>Systems content goes here.</p>,
         },
         {
             id: "about",
             title: "About",
-            content: "About content",
+            content: <p>About content goes here.</p>,
         },
     ];
 
@@ -36,13 +85,15 @@ export default function Home() {
                     personal tooling.
                 </p>
                 <div className="mt-10 border rounded p-4">
-                    <div className="flex flex-wrap justify-center gap-12">
+                    <div className="flex flex-wrap justify-center gap-12 mb-6">
                         {sections.map((section) => (
                             <button
                                 key={section.id}
-                                onClick={() => setActive(section.id)}
+                                onClick={() => setActiveTab(section.id)}
                                 className={`ui-btn ${
-                                    active === section.id ? "ui-btn-active" : ""
+                                    activeTab === section.id
+                                        ? "ui-btn-active"
+                                        : ""
                                 }`}
                             >
                                 {section.title}
@@ -54,15 +105,12 @@ export default function Home() {
                             <div
                                 key={section.id}
                                 className={`transition-all duration-300 ${
-                                    active === section.id
+                                    activeTab === section.id
                                         ? "opacity-100 translate-y-0"
                                         : "opacity-0 -translate-y-2 pointer-events-none absolute inset-0"
                                 }`}
                             >
-                                <h2 className="text-2xl font-bold text-ctp-mauve">
+                                {section.content}
-                                    {section.title}
-                                </h2>
-                                <div>{section.content}</div>{" "}
                             </div>
                         ))}
                     </div>