cleanup: format + minor setup About component

frontend/src/components/About.tsx

@@ -0,0 +1,12 @@
+export default function About() {
+    return (
+        <>
+            <h1 className="text-center m-6 text-3xl font-bold text-ctp-mauve">
+                About
+            </h1>
+            <div className="flex justify-center mb-6">
+                <p className="text-ctp-text"></p>
+            </div>
+        </>
+    );
+}

frontend/src/components/Systems.tsx

@@ -0,0 +1,10 @@
+export default function Systems() {
+    return (
+        <>
+            <h1 className="text-center m-6 text-3xl font-bold text-ctp-mauve">
+                Systems
+            </h1>
+            <div></div>
+        </>
+    );
+}

frontend/src/pages/Home.tsx

@@ -1,5 +1,7 @@
 import { useState, type ReactElement } from "react";
 import ProjectsReadme from "../components/ProjectsReadme";
+import Systems from "../components/Systems";
+import About from "../components/About";
 
 interface ProjectInfo {
     id: string;
@@ -73,12 +75,20 @@ export default function Home(): ReactElement {
         {
             id: "systems",
             title: "Systems",
-            content: <p>Systems content goes here.</p>,
+            content: (
+                <>
+                    <Systems />
+                </>
+            ),
         },
         {
             id: "about",
             title: "About",
-            content: <p>About content goes here.</p>,
+            content: (
+                <>
+                    <About />
+                </>
+            ),
         },
     ];
 

package-lock.json

@@ -1,6 +0,0 @@
-{
-    "name": "aramjonghu-site",
-    "lockfileVersion": 3,
-    "requires": true,
-    "packages": {}
-}