refactor(ui): enforce terminal metaphor, unify secondary opacity

- drop headshot photo (coherence break vs. full terminal aesthetic)
- replace FA icons with plain-text brackets ([github], [linkedin], [email])
- remove Font Awesome CDN dependency
- nav logo tk → ~/; theme toggle fa-sun/fa-moon → [light]/[dark]
- reorder home sections: projects before skills/journey
- add font-mono + opacity-70 to timeline descriptions (#2 bug + #8 polish)
- uniform opacity-70 across hero bio, project desc, timeline desc
- add hover:bg-surface-raised to ProjectCard article
- drop journey badge count (noise)
- change status ● online → ● available

src/components/Nav.tsx

@@ -2,26 +2,28 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useTheme } from "@/context/ThemeContext";
 
 const links = [
-  { href: "/", label: "home" },
+  { href: "/", label: "tyler" },
   { href: "/homelab/", label: "homelab" },
   { href: "/archive/", label: "archive" },
 ];
 
 export default function Nav() {
   const pathname = usePathname();
+  const { isDark, toggle } = useTheme();
   return (
     <header className="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
       <nav className="max-w-[740px] mx-auto px-8 h-11 flex items-center justify-between">
         <Link
           href="/"
-          className="font-mono text-sm font-bold text-[var(--color-text)] tracking-widest hover:text-[var(--color-text-label)]"
+          className="font-mono text-sm font-bold text-[var(--color-text)] hover:text-[var(--color-text-label)]"
         >
-          tk
+          ~/
         </Link>
 
-        <ul className="flex gap-6">
+        <ul className="flex items-center gap-6">
           {links.map(({ href, label }) => {
             const active =
               pathname === href || pathname === href.replace(/\/$/, "");
@@ -30,7 +32,7 @@ export default function Nav() {
                 <Link
                   href={href}
                   aria-current={active ? "page" : undefined}
-                  className={`font-mono text-xs tracking-widest ${
+                  className={`font-mono text-sm ${
                     active
                       ? "text-[var(--color-text)]"
                       : "text-[var(--color-text-label)] hover:text-[var(--color-text)]"
@@ -41,6 +43,15 @@ export default function Nav() {
               </li>
             );
           })}
+          <li>
+            <button
+              onClick={toggle}
+              aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+              className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
+            >
+              {isDark ? "[light]" : "[dark]"}
+            </button>
+          </li>
         </ul>
       </nav>
     </header>