cleanup: format + minor setup About component

.forgejo/workflows/format.yml

@@ -1,25 +1,25 @@
 name: Format frontend with Prettier
 
 on:
-    push:
+  push:
-        branches: ["master"]
+    branches: ["master"]
 
 jobs:
-    format:
+  format:
-        runs-on: alpine
+    runs-on: alpine
-        container: node:26-alpine
+    container: node:26-alpine
 
-        steps:
+    steps:
-            - name: Install dependencies
+      - name: Install dependencies
-              run: apk add --no-cache git
+        run: apk add --no-cache git
 
-            - name: Checkout repo
+      - name: Checkout repo
-              uses: actions/checkout@v4
+        uses: actions/checkout@v4
 
-            - name: Install frontend deps
+      - name: Install frontend deps
-              working-directory: frontend
+        working-directory: frontend
-              run: npm install
+        run: npm install
 
-            - name: Run Prettier check
+      - name: Run Prettier check
-              working-directory: frontend
+        working-directory: frontend
-              run: npx prettier --check .
+        run: npx prettier --check .

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": {}
-}