chore: update components folder structure, add constants, update existing layout components, scaffold pages

components/layout/Container.tsx

@@ -1,7 +1,11 @@
-export default function Container({ children }: { children: React.ReactNode }) {
-    return (
-        <div className="p-3 bg-neutral-900 flex-1">
-            {children}
-        </div>
-    )
-}
+export default function Container({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex-1 min-h-0 overflow-y-auto">
+      <div className="mx-auto w-full max-w-2xl px-6 py-16">{children}</div>
+    </div>
+  );
+}

components/layout/Footer.tsx

@@ -1,9 +1,8 @@
-
-
 export default function Footer() {
-    return (
-        <div className="border-t border-neutral-800 text-start p-6">
-            Self-hosted · Traefik · Next.js
-        </div>
-    )
-}
+  return (
+    <footer className="mx-auto w-full max-w-2xl px-6 py-6 flex items-center justify-between border-t border-neutral-800 text-xs text-neutral-500">
+      <span>© 2026 Angel Mankel</span>
+      <span>Self-hosted · Traefik · Next.js</span>
+    </footer>
+  );
+}

components/layout/Header.tsx

@@ -3,16 +3,14 @@ import Nav from "./Nav";
 
 export default function Header() {
   return (
-    <header className="border-b border-neutral-800">
-      <div className="p-6 justify-start flex items-center flex gap-5">
-        <Link
-          href="/"
-          className="text-2xl font-semibold text-neutral-100 hover:text-white"
-        >
-          Angel Mankel
-        </Link>
-        <Nav />
-      </div>
+    <header className="mx-auto w-full max-w-2xl px-6 py-5 flex items-center justify-between">
+      <Link
+        href="/"
+        className="text-sm font-semibold text-neutral-100 hover:text-white"
+      >
+        Angel Mankel
+      </Link>
+      <Nav />
     </header>
   );
 }

components/layout/Nav.tsx

@@ -1,24 +1,36 @@
-import Link from "next/link";
+"use client";
 
+import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 const navLinks = [
-  { href: "/projects", label: "Projects" },
-  { href: "/about", label: "About" },
-  { href: "/uses", label: "Uses" },
+  { href: "/projects", label: "projects" },
+  { href: "/about", label: "about" },
+  { href: "/uses", label: "uses" },
 ];
 
 export default function Nav() {
-    return (
-        <nav className="flex gap-6 font-mono text-xs text-neutral-400">
-          {navLinks.map((link) => (
-            <Link
-              key={link.href}
-              href={link.href}
-              className="hover:text-white"
-            >
-              {link.label}
-            </Link>
-          ))}
-        </nav>
-    )
-}
+  const pathname = usePathname();
+
+  return (
+    <nav className="flex gap-6 text-[13px]">
+      {navLinks.map((link) => {
+        const isActive =
+          pathname === link.href || pathname.startsWith(`${link.href}/`);
+        return (
+          <Link
+            key={link.href}
+            href={link.href}
+            className={
+              isActive
+                ? "text-neutral-100"
+                : "text-neutral-500 hover:text-neutral-100"
+            }
+          >
+            {link.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}

components/layout/SectionLabel.tsx

@@ -0,0 +1,13 @@
+import { IconPointFilled } from '@tabler/icons-react';
+import { colors } from '@/constants/colors';
+
+export default function SectionLabel({ label }: { label: string }) {
+  return (
+    <div>
+        <h2 className="text-sm font-semibold uppercase tracking-wide text-neutral-400 flex gap-1 items-center">
+            <IconPointFilled color={colors.accent}/>
+            {label}
+        </h2>
+    </div>
+  );
+}