Prettier through whole project. Updated home page to include

introduction. Includes container for projects, systems, and about
section with animation.

frontend/src/App.css

@@ -1,2 +1,14 @@
 @import "tailwindcss";
 @import "@catppuccin/tailwindcss/macchiato.css";
+
+.ui-btn {
+    @apply text-ctp-text border border-ctp-text rounded px-3 py-1 cursor-pointer transition-colors;
+}
+
+.ui-btn:hover {
+    @apply bg-ctp-surface0 text-ctp-green border-ctp-green duration-300 ease-in-out;
+}
+
+.ui-btn-active {
+    @apply bg-ctp-surface0 text-ctp-green border-ctp-green;
+}

frontend/src/components/Header.jsx

@@ -9,7 +9,7 @@ export default function Header({ theme }) {
         { label: "Forgejo Git", url: "https://git.aramjonghu.nl" },
         { label: "Stream", url: "https://stream.aramjonghu.nl" },
         { label: "SearXNG", url: "https://xng.aramjonghu.nl" },
-        { label: "zach-dev gitea", url: "https://git.zach-dev.cc"}
+        { label: "Gitea zach-dev", url: "https://git.zach-dev.cc" },
     ];
 
     const goHome = () => {
@@ -30,7 +30,7 @@ export default function Header({ theme }) {
                     <a
                         key={item.label}
                         href={item.url}
-                        className="text-ctp-text hover:text-ctp-green-900 border rounded border-ctp-white-800 hover:border-ctp-green-900 cursor-pointer px-3 py-1 transition-colors"
+                        className="ui-btn ui-btn:hover"
                     >
                         {item.label}
                     </a>
@@ -38,10 +38,7 @@ export default function Header({ theme }) {
             </nav>
 
             <div>
-                <button
-                    className="text-ctp-text hover:text-ctp-green-900 border rounded border-ctp-white-800 hover:border-ctp-green-900 cursor-pointer px-3 py-1"
-                    onClick={toggleTheme}
-                >
+                <button className="ui-btn ui-btn:hover" onClick={toggleTheme}>
                     {currentTheme === "macchiato" ? "🌙 Dark" : "☀️ Light"}
                 </button>
             </div>

frontend/src/components/Layout.jsx

@@ -6,7 +6,7 @@ export default function Layout({ children }) {
     const theme = useTheme();
 
     return (
-        <div className="flex flex-col w-screen min-h-screen bg-ctp-base">
+        <div className="flex flex-col min-h-screen bg-ctp-base">
             <Header theme={theme} />
             <main className="flex-1">{children}</main>
             <Footer />

frontend/src/main.jsx

@@ -1,9 +1,9 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.jsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.jsx";
 
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
+createRoot(document.getElementById("root")).render(
+    <StrictMode>
+        <App />
+    </StrictMode>,
+);

frontend/src/pages/Home.jsx

@@ -1,9 +1,97 @@
-export default function Home({}) {
+import { useState } from "react";
+
+export default function Home() {
+    const [active, setActive] = useState("projects");
+
     return (
-        <>
-            <div className="p-8 text-center">
-                <h1 className="text-ctp-text text-4xl">Under Construction</h1>
+        <div className="text-ctp-text flex flex-col items-center justify-center px-6 py-6">
+            <div className="w-full max-w-6xl text-center">
+                <h1 className="text-4xl font-bold text-ctp-mauve">
+                    Aram Jonghu
+                </h1>
+
+                <p className="mt-4">
+                    Software engineer building systems, services, and
+                    experiments across a self-hosted environment.
+                </p>
+
+                <p className="mt-3">
+                    This site acts as a hub for projects, infrastructure, and
+                    personal tooling.
+                </p>
+
+                <div className="mt-10 border rounded p-4">
+                    <div className="flex flex-wrap justify-center gap-12">
+                        <button
+                            onClick={() => setActive("projects")}
+                            className={`ui-btn ${
+                                active === "projects" ? "ui-btn-active" : ""
+                            }`}
+                        >
+                            Projects
+                        </button>
+
+                        <button
+                            onClick={() => setActive("systems")}
+                            className={`ui-btn ${
+                                active === "systems" ? "ui-btn-active" : ""
+                            }`}
+                        >
+                            Systems
+                        </button>
+
+                        <button
+                            onClick={() => setActive("about")}
+                            className={`ui-btn ${
+                                active === "about" ? "ui-btn-active" : ""
+                            }`}
+                        >
+                            About
+                        </button>
+                    </div>
+
+                    <div className="mt-6 text-left relative min-h-20">
+                        <div
+                            className={`transition-all duration-300 ${
+                                active === "projects"
+                                    ? "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">
+                                Projects
+                            </h2>
+                            <p>Project content</p>
+                        </div>
+
+                        <div
+                            className={`transition-all duration-300 ${
+                                active === "systems"
+                                    ? "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">
+                                Systems
+                            </h2>
+                            <p>Systems content</p>
+                        </div>
+
+                        <div
+                            className={`transition-all duration-300 ${
+                                active === "about"
+                                    ? "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">
+                                About
+                            </h2>
+                            <p>About content</p>
+                        </div>
+                    </div>
+                </div>
             </div>
-        </>
+        </div>
     );
 }