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

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.title}
-                                </h2>
-                                <div>{section.content}</div>{" "}
+                                {section.content}
                             </div>
                         ))}
                     </div>