Chore(refactor): refactor project info into separate component

frontend/src/App.tsx

@@ -5,7 +5,7 @@ import Layout from "./components/Layout";
 import Home from "./pages/Home";
 import Stream from "./pages/Stream";
 
-function App(): ReactElement {
+export default function App(): ReactElement {
     const path = window.location.pathname.toLowerCase();
 
     let content: ReactElement = <Home />;
@@ -15,5 +15,3 @@ function App(): ReactElement {
 
     return <Layout>{content}</Layout>;
 }
-
-export default App;

frontend/src/components/ProjectInfo.tsx

@@ -0,0 +1,37 @@
+import { useState, type ReactElement } from "react";
+import MdProcessor from "./MdProcessor";
+import projects from "../content/projects.json";
+
+export default function ProjectInfo(): ReactElement {
+    const [projIdx, setProjIdx] = useState<number>(0);
+    const prevProject = () =>
+        setProjIdx((i) => (i - 1 + projects.length) % projects.length);
+    const nextProject = () => setProjIdx((i) => (i + 1) % projects.length);
+
+    return (
+        <>
+            <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">
+                    {projects[projIdx].name} ({projIdx + 1}/
+                    {projects.length})
+                </span>
+                <button
+                    onClick={nextProject}
+                    className="px-3 py-1 rounded ui-btn text-ctp-text"
+                >
+                    Next ▶︎
+                </button>
+            </div>
+            <MdProcessor repoUrl={projects[projIdx].url} />
+        </>
+    );
+}

frontend/src/content/projects.json

@@ -0,0 +1,22 @@
+[
+    {
+        "id": "site",
+        "name": "aramjonghu-site",
+        "url": "https://git.aramjonghu.dev/AramJonghu/aramjonghu-site/raw/branch/master/README.md"
+    },
+    {
+        "id": "maran freelance portfolio",
+        "name": "maran-site",
+        "url": "https://git.aramjonghu.dev/AramJonghu/maran-site/src/branch/main/README.md"
+    },
+    {
+        "id": "file-organizer",
+        "name": "file-organizer written in zig",
+        "url": "https://git.aramjonghu.dev/AramJonghu/file-organizer/src/branch/main/README.md"
+    },
+    {
+        "id": "nvim",
+        "name": "Nvim Config",
+        "url": "https://git.aramjonghu.dev/AramJonghu/nvim/src/branch/main/README.md"
+    }
+]

frontend/src/pages/Home.tsx

@@ -1,14 +1,8 @@
 import { useState, type ReactElement } from "react";
-import MdProcessor from "../components/MdProcessor";
+import ProjectInfo from "../components/ProjectInfo";
 import CurrentActivity from "../components/CurrentActivity";
 import About from "../components/About";
 
-interface ProjectInfo {
-    id: string;
-    name: string;
-    url: string;
-}
-
 interface Section {
     id: string;
     title: string;
@@ -16,66 +10,13 @@ interface Section {
 }
 
 export default function Home(): ReactElement {
-    const projectList: ProjectInfo[] = [
-        {
-            id: "site",
-            name: "aramjonghu-site",
-            url: "https://git.aramjonghu.dev/AramJonghu/aramjonghu-site/raw/branch/master/README.md",
-        },
-        {
-            id: "maran freelance portfolio",
-            name: "maran-site",
-            url: "https://git.aramjonghu.dev/AramJonghu/maran-site/src/branch/main/README.md",
-        },
-        {
-            id: "file-organizer",
-            name: "file-organizer written in zig",
-            url: "https://git.aramjonghu.dev/AramJonghu/file-organizer/src/branch/main/README.md",
-        },
-        {
-            id: "nvim",
-            name: "Nvim Config",
-            url: "https://git.aramjonghu.dev/AramJonghu/nvim/src/branch/main/README.md",
-        },
-    ];
-
-    const [projIdx, setProjIdx] = useState<number>(0);
-    const prevProject = () =>
-        setProjIdx((i) => (i - 1 + projectList.length) % projectList.length);
-    const nextProject = () => setProjIdx((i) => (i + 1) % projectList.length);
-
     const [activeTab, setActiveTab] = useState<string>("projects");
 
     const sections: Section[] = [
         {
             id: "projects",
             title: "Projects",
-            content: (
+            content: <ProjectInfo />,
-                <>
-                    <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>
-                    <MdProcessor repoUrl={projectList[projIdx].url} />
-                </>
-            ),
         },
         {
             id: "current-activity",