diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 6d057b4c..717d9d9c 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -42,4 +42,10 @@
       Email
     </a>
   </nav>
+
+  <nav class="flex flex-wrap items-center gap-x-2ch gap-y-half-lh text-[var(--color-text-dim)] mt-half-lh">
+    <a href="#projects" class="underline hover:text-[var(--color-text)]">Projects</a>
+    <a href="#journey" class="underline hover:text-[var(--color-text)]">Journey</a>
+    <a href="#homelab" class="underline hover:text-[var(--color-text)]">Homelab</a>
+  </nav>
 </section>
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index b6b5399b..20a57454 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -1,50 +1,17 @@
----
-const pathname = Astro.url.pathname;
-
-const links = [
-  { href: "/", label: "tyler" },
-  { href: "/homelab/", label: "homelab" },
-  { href: "/projects/", label: "projects" },
-];
----
-
 <header class="sticky top-0 z-50 bg-[var(--color-bg)] border-b border-[var(--color-border)]">
   <nav class="max-w-[740px] mx-auto px-4ch h-11 flex items-center justify-between">
-    <ul class="flex items-center gap-2ch">
-      {links.map(({ href, label }) => {
-        const active = pathname === href || pathname === href.replace(/\/$/, "");
-        return (
-          <li>
-            <a
-              href={href}
-              aria-current={active ? "page" : undefined}
-              class:list={[
-                active
-                  ? "text-[var(--color-text)]"
-                  : "text-[var(--color-text-label)] hover:text-[var(--color-text)]",
-              ]}
-            >
-              {label}
-            </a>
-          </li>
-        );
-      })}
-    </ul>
+    <a href="/" class="font-semibold">Tyler Koenig</a>
 
     <div class="flex items-center gap-2ch">
-      <div role="group" aria-label="Typeface" class="flex items-center gap-[0.5ch] text-[var(--color-text-dim)]">
-        <button data-typeface-btn="sans" class="hover:text-[var(--color-text)] cursor-pointer">sans</button>
-        <span aria-hidden="true">/</span>
-        <button data-typeface-btn="serif" class="hover:text-[var(--color-text)] cursor-pointer">serif</button>
-        <span aria-hidden="true">/</span>
-        <button data-typeface-btn="mono" class="hover:text-[var(--color-text)] cursor-pointer">mono</button>
-      </div>
+      <a href="#projects" class="text-[var(--color-text-label)] hover:text-[var(--color-text)]">projects</a>
+      <a href="#journey" class="text-[var(--color-text-label)] hover:text-[var(--color-text)]">journey</a>
+      <a href="#homelab" class="text-[var(--color-text-label)] hover:text-[var(--color-text)]">homelab</a>
 
       <button
-        data-theme-toggle
-        aria-label="Switch to light mode"
-        class="text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
-      >
+      data-theme-toggle
+      aria-label="Switch to light mode"
+      class="text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
+    >
         light
       </button>
     </div>
@@ -71,31 +38,4 @@ const links = [
   });
 
   updateTheme();
-
-  const tfBtns = document.querySelectorAll("[data-typeface-btn]");
-
-  function updateTypeface() {
-    const current = document.documentElement.dataset.typeface || "sans";
-    tfBtns.forEach((b) => {
-      const val = b.getAttribute("data-typeface-btn");
-      if (val === current) {
-        b.classList.add("font-bold", "text-[var(--color-text)]");
-        b.classList.remove("text-[var(--color-text-dim)]");
-      } else {
-        b.classList.remove("font-bold", "text-[var(--color-text)]");
-        b.classList.add("text-[var(--color-text-dim)]");
-      }
-    });
-  }
-
-  tfBtns.forEach((b) => {
-    b.addEventListener("click", () => {
-      const val = b.getAttribute("data-typeface-btn")!;
-      document.documentElement.dataset.typeface = val;
-      localStorage.setItem("lerko96-typeface", val);
-      updateTypeface();
-    });
-  });
-
-  updateTypeface();
 </script>
diff --git a/src/components/Timeline.astro b/src/components/Timeline.astro
index a04f5f47..ba663309 100644
--- a/src/components/Timeline.astro
+++ b/src/components/Timeline.astro
@@ -14,29 +14,24 @@ const typeLabel: Record<TimelineType, string> = {
 ---
 
 <Widget title="Journey">
-  <ol class="flex flex-col gap-0">
+  <ol class="flex flex-col">
     {timeline.map((entry) => (
-      <li class="pb-2lh last:pb-0">
-        <p class="text-[var(--color-text-dim)] mb-qtr-lh">
+      <li class="grid grid-cols-[10ch_1fr] gap-2ch py-half-lh border-b border-[var(--color-border)] last:border-b-0">
+        <div class="text-[var(--color-text-dim)] pt-[0.1em]">
           {isDate(entry.date)
             ? <time datetime={entry.date}>{entry.date}</time>
             : <span>{entry.date}</span>
           }
-          <span class="mx-[0.5ch]">·</span>
-          <em>{typeLabel[entry.type]}</em>
-        </p>
-
-        <h3 class="font-semibold mb-half-lh">{entry.title}</h3>
-
-        <p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
-          {entry.description}
-        </p>
-
-        {entry.tags && entry.tags.length > 0 && (
-          <p class="text-[var(--color-text-dim)]">
-            {entry.tags.join(" · ")}
+        </div>
+        <div>
+          <h3 class="font-semibold">
+            {entry.title}
+            <span class="font-normal text-[var(--color-text-dim)]"> · {typeLabel[entry.type]}</span>
+          </h3>
+          <p class="text-[var(--color-text-label)] leading-relaxed">
+            {entry.description}
           </p>
-        )}
+        </div>
       </li>
     ))}
   </ol>
diff --git a/src/data/services.ts b/src/data/services.ts
index 9e8d9677..59a140aa 100644
--- a/src/data/services.ts
+++ b/src/data/services.ts
@@ -2,6 +2,7 @@ export type Service = {
   name: string;
   description: string;
   category: "infrastructure" | "security" | "monitoring" | "productivity" | "media";
+  hidden?: boolean;
 };
 
 export const services: Service[] = [
@@ -11,7 +12,7 @@ export const services: Service[] = [
   { name: "Pi-hole", description: "Network-wide DNS + ad blocking", category: "infrastructure" },
   { name: "WireGuard", description: "VPN — full LAN access for remote clients", category: "infrastructure" },
   { name: "mail relay", description: "Outbound SMTP relay for self-hosted service notifications", category: "infrastructure" },
-  { name: "gluetun", description: "VPN container routing download client traffic", category: "infrastructure" },
+  { name: "gluetun", description: "VPN container routing download client traffic", category: "infrastructure", hidden: true },
   { name: "Home Assistant", description: "Smart home automation and device management", category: "infrastructure" },
 
   // Security / Auth
@@ -23,34 +24,36 @@ export const services: Service[] = [
   { name: "Grafana", description: "Dashboards and alerting across all hosts and services", category: "monitoring" },
   { name: "Beszel", description: "Lightweight container and host monitoring", category: "monitoring" },
   { name: "ntfy", description: "Self-hosted push notifications", category: "monitoring" },
+  { name: "Uptime Kuma", description: "Self-hosted monitoring tool (GUI)", category: "monitoring" },
 
   // Productivity
   { name: "Gitea", description: "Personal Git server", category: "productivity" },
   { name: "Outline", description: "Team wiki and knowledge base", category: "productivity" },
-  { name: "Vikunja", description: "Task management", category: "productivity" },
   { name: "Actual Budget", description: "Personal budgeting", category: "productivity" },
-  { name: "Ghostfolio", description: "Investment portfolio tracking", category: "productivity" },
-  { name: "Hoarder", description: "Bookmark manager with tagging", category: "productivity" },
-  { name: "FreshRSS", description: "RSS reader", category: "productivity" },
-  { name: "Memos", description: "Quick notes and journal", category: "productivity" },
-  { name: "Traggo", description: "Time tracking", category: "productivity" },
   { name: "Baikal", description: "CalDAV / CardDAV server", category: "productivity" },
   { name: "Grist", description: "Spreadsheets and structured data", category: "productivity" },
   { name: "Glance", description: "Self-hosted start page with feeds and service status", category: "productivity" },
-  { name: "Filebrowser", description: "Web-based file manager", category: "productivity" },
-
+  { name: "Hoarder", description: "Bookmark manager with tagging", category: "productivity", hidden: true },
+  { name: "FreshRSS", description: "RSS reader", category: "productivity", hidden: true },
+  { name: "Memos", description: "Quick notes and journal", category: "productivity", hidden: true },
+  { name: "Ghostfolio", description: "Investment portfolio tracking", category: "productivity", hidden: true },
+  { name: "Vikunja", description: "Task management", category: "productivity", hidden: true },
+  { name: "Traggo", description: "Time tracking", category: "productivity", hidden: true },
+  { name: "Filebrowser", description: "Web-based file manager", category: "productivity", hidden: true },
+  
   // Media
-  { name: "Plex", description: "Media streaming — movies, TV, music", category: "media" },
-  { name: "Jellyfin", description: "Open-source media streaming", category: "media" },
-  { name: "Sonarr", description: "Automated TV show management", category: "media" },
-  { name: "Radarr", description: "Automated movie management", category: "media" },
-  { name: "Lidarr", description: "Automated music management", category: "media" },
-  { name: "Prowlarr", description: "Indexer manager and proxy for the *arr stack", category: "media" },
-  { name: "Bazarr", description: "Automatic subtitle download and management", category: "media" },
-  { name: "nzbget", description: "Usenet downloader", category: "media" },
-  { name: "qBittorrent", description: "Torrent client with web UI", category: "media" },
+  { name: "Immich", description: "Open-source photo library", category: "media"}, 
   { name: "Kavita", description: "Self-hosted manga and book reader", category: "media" },
-  { name: "Openshelf", description: "Book library with auto-ingest", category: "media" },
+  { name: "Jellyfin", description: "Open-source media streaming", category: "media" },
+  { name: "Prowlarr", description: "Indexer manager and proxy for the *arr stack", category: "media" },
+  { name: "*Arr stack", description: "Automated media management for streaming", category: "media" },
+  { name: "Bazarr", description: "Automatic subtitle download and management", category: "media" },
+  { name: "Lidarr", description: "Automated music management", category: "media", hidden: true },
+  { name: "Radarr", description: "Automated movie management", category: "media", hidden: true },
+  { name: "Plex", description: "Media streaming — movies, TV, music", category: "media", hidden: true },
+  { name: "nzbget", description: "Usenet downloader", category: "media", hidden: true },
+  { name: "qBittorrent", description: "Torrent client with web UI", category: "media", hidden: true },
+  { name: "Openshelf", description: "Book library with auto-ingest", category: "media", hidden: true },
 ];
 
 export const categoryOrder: Service["category"][] = [
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index c615eb4d..f06ffc04 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -25,12 +25,6 @@ const {
         if (dark) document.documentElement.classList.add("dark");
       })();
     </script>
-    <script is:inline>
-      (function () {
-        var tf = localStorage.getItem("lerko96-typeface") || "sans";
-        document.documentElement.dataset.typeface = tf;
-      })();
-    </script>
   </head>
   <body
     class="bg-[var(--color-bg)] text-[var(--color-text)] min-h-screen"
diff --git a/src/pages/archive.astro b/src/pages/archive.astro
index 987bbc6c..285e4ea0 100644
--- a/src/pages/archive.astro
+++ b/src/pages/archive.astro
@@ -2,11 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta http-equiv="refresh" content="0; url=/projects/" />
-    <link rel="canonical" href="/projects/" />
+    <meta http-equiv="refresh" content="0; url=/#projects" />
+    <link rel="canonical" href="/" />
     <title>Redirecting...</title>
   </head>
   <body>
-    <p>This page moved. <a href="/projects/">/projects/</a></p>
+    <p>This page moved. <a href="/#projects">/#projects</a></p>
   </body>
 </html>
diff --git a/src/pages/homelab.astro b/src/pages/homelab.astro
index d28aef6c..8dcb1bc5 100644
--- a/src/pages/homelab.astro
+++ b/src/pages/homelab.astro
@@ -1,202 +1,12 @@
----
-import Base from "@/layouts/Base.astro";
-import Nav from "@/components/Nav.astro";
-import Footer from "@/components/Footer.astro";
-import Widget from "@/components/Widget.astro";
-import { services, categoryOrder, categoryLabels } from "@/data/services";
-
-const glanceStats = [
-  { label: "Hypervisor", value: "Proxmox VE" },
-  { label: "Firewall", value: "pfSense (Netgate 1100)" },
-  { label: "Switching", value: "TP-Link Omada (managed)" },
-  { label: "ISP", value: "AT&T Fiber 1 Gbps" },
-  { label: "VPN", value: "WireGuard (pfSense)" },
-  { label: "Reverse Proxy", value: "Caddy + Cloudflare DNS-01" },
-  { label: "Auth", value: "Authentik SSO" },
-  { label: "DNS", value: "Pi-hole → Unbound → Cloudflare" },
-  { label: "Containers", value: "9 LXC + 2 VMs" },
-];
-
-const vlans = [
-  { id: "MGMT", name: "MGMT", purpose: "Network equipment only" },
-  { id: "LAN", name: "LAN", purpose: "Trusted personal devices" },
-  { id: "Lab", name: "Homelab", purpose: "All self-hosted services" },
-  { id: "Guest", name: "Guests", purpose: "Internet only, RFC1918 blocked" },
-  { id: "IoT", name: "IoT", purpose: "Smart home, isolated" },
-  { id: "WFH", name: "WFH", purpose: "Work devices, no personal access" },
-  { id: "DMZ", name: "DMZ", purpose: "Public-facing, hard-blocked internally" },
-  { id: "VPN", name: "VPN", purpose: "WireGuard clients, LAN-equivalent access" },
-];
-
-const adrs = [
-  {
-    title: "ISP gateway: passthrough mode",
-    decision:
-      "ISP gateway stays in-line in passthrough mode, pfSense gets the public IP directly. Gateway WiFi disabled.",
-    why: "Carrier locks 802.1X auth to their own gateway hardware, and bypassing it is brittle — breaks on firmware updates and only saves a millisecond or two. True bridge mode isn't supported. Passthrough is the cleanest option that keeps pfSense as the actual perimeter.",
-  },
-  {
-    title: "Caddy over NGINX Proxy Manager",
-    decision:
-      "Caddy with DNS-01 challenge via Cloudflare API. All subdomains resolve to Caddy internally via Pi-hole. Caddy terminates TLS and proxies to backends.",
-    why: "Single Caddyfile, automatic certs without ever needing to expose internal services to the internet for an HTTP-01 challenge. NPM has more UI overhead for the same outcome. Traefik is more complex for no benefit at this scale.",
-  },
-  {
-    title: "WireGuard over OpenVPN",
-    decision:
-      "WireGuard on pfSense as the only remote-access path. Clients get the access tier documented in the access model — same as LAN, plus the admin surfaces that aren't reachable any other way.",
-    why: "Faster, simpler config, better battery life on mobile. Throughput on the firewall hardware comfortably exceeds the WAN link. OpenVPN has no advantage here. Tailscale would add an external relay dependency for a problem WireGuard already solves.",
-  },
-  {
-    title: "Pi-hole in Homelab VLAN, not MGMT",
-    decision:
-      "Pi-hole runs in the Homelab VLAN. Firewall allows port 53 inbound from VLANs that need local resolution. MGMT uses pfSense Unbound as its primary resolver instead.",
-    why: "Putting Pi-hole in MGMT would mean opening MGMT to all the VLANs that need DNS — much bigger attack surface for the most sensitive tier. DNS traffic crossing into the Homelab VLAN is the lesser risk, and Homelab is already where service traffic terminates anyway.",
-  },
-  {
-    title: "Netgate 1100 for pfSense",
-    decision:
-      "Netgate 1100 (Marvell ARMADA 3720, dual-core ARM) as the firewall appliance. ~6W idle, line-rate NAT at 1 Gbps, WireGuard at ~100–150 Mbps.",
-    why: "Purpose-built for pfSense. Right-sized for 1 Gbps fiber — NAT saturates the link, WireGuard is fast enough for remote access. A full rack server wastes power for this role. Configs and version tracked in private repo.",
-  },
-  {
-    title: "Shared Postgres + Redis in apps LXC",
-    decision:
-      "One Postgres instance hosting multiple databases. One Redis instance. A single init script provisions schemas on first run.",
-    why: "Avoids ~15 separate DB containers. Big RAM savings. Productivity apps colocate in one LXC anyway, so a shared backing store there is the natural shape.",
-  },
-  {
-    title: "Gitea CI/CD: self-hosted runner, internal pipeline, static deploy",
-    decision:
-      "Self-hosted Gitea Actions runner builds the portfolio on push, then deploys pre-built static files to the public-facing host. Build runs in an isolated container so the runner host stays clean. Public host serves static files only — no build toolchain on it.",
-    why: "Keeps the whole pipeline internal. No external runners, no GitHub Actions. The build/serve split means the public-facing host has the smallest possible footprint — static file server, nothing more.",
-  },
-  {
-    title: "Authentik over Authelia",
-    decision: "Authentik as the SSO provider across all self-hosted services.",
-    why: "Full OIDC provider + forward auth in one. Lets services like Outline, Gitea, and Vikunja use real SSO rather than just a login gate. Authelia is forward-auth only — no OIDC provider capability.",
-  },
-];
----
-
-<Base
-  title="Homelab | Tyler Koenig"
-  description="Production-grade personal homelab: Proxmox, pfSense, 8 VLANs, WireGuard, Caddy, Authentik SSO, and 20+ self-hosted services."
->
-  <Nav slot="nav" />
-
-  <div class="mb-4lh">
-    <h1 class="text-xl font-bold mb-half-lh">Homelab</h1>
-    <p class="text-[var(--color-text-label)] leading-relaxed max-w-2xl">
-      Personal infrastructure environment for learning, self-hosting, and
-      operational practice. Running 24/7 on production-grade hardware with
-      real network segmentation, SSO, monitoring, and IaC-style
-      documentation.
-    </p>
-  </div>
-
-  <Widget title="Overview" badge={glanceStats.length} as="section">
-    <dl class="flex flex-col">
-      {glanceStats.map(({ label, value }) => (
-        <div class="flex gap-2ch py-qtr-lh">
-          <dt class="text-[var(--color-text-dim)] w-[16ch] shrink-0">{label}</dt>
-          <dd>{value}</dd>
-        </div>
-      ))}
-    </dl>
-  </Widget>
-
-  <Widget
-    title="Network"
-    meta="8 segments, default deny"
-    as="section"
-  >
-    <div class="overflow-x-auto">
-      <table class="w-full border-collapse">
-        <thead>
-          <tr class="border-b border-[var(--color-border)]">
-            <th class="text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch]">
-              Segment
-            </th>
-            <th class="text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch]">
-              Name
-            </th>
-            <th class="text-[var(--color-text-dim)] text-left py-qtr-lh">
-              Purpose
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {vlans.map((v) => (
-            <tr class="border-b border-[var(--color-border)]">
-              <td class="py-half-lh pr-[3ch]">{v.id}</td>
-              <td class="py-half-lh pr-[3ch]">{v.name}</td>
-              <td class="text-[var(--color-text-label)] py-half-lh">{v.purpose}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  </Widget>
-
-  <Widget title="Services" badge={services.length} as="section">
-    <div class="flex flex-col gap-2lh">
-      {categoryOrder.map((cat) => {
-        const catServices = services.filter((s) => s.category === cat);
-        return (
-          <div>
-            <h3 class="text-[var(--color-text-dim)] font-semibold mb-half-lh">
-              {categoryLabels[cat]}
-            </h3>
-            <ul class="flex flex-col">
-              {catServices.map((svc) => (
-                <li class="py-qtr-lh">
-                  <span class="font-semibold">{svc.name}</span>
-                  <span class="text-[var(--color-text-label)]"> — {svc.description}</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-        );
-      })}
-    </div>
-  </Widget>
-
-  <Widget
-    title="ADRs"
-    meta="why things are configured the way they are"
-    badge={adrs.length}
-    as="section"
-  >
-    <div class="flex flex-col gap-2lh">
-      {adrs.map((adr) => (
-        <div>
-          <h3 class="font-semibold mb-half-lh">{adr.title}</h3>
-          <p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
-            <strong>Decision:</strong> {adr.decision}
-          </p>
-          <p class="text-[var(--color-text-label)] leading-relaxed">
-            <strong>Why:</strong> {adr.why}
-          </p>
-        </div>
-      ))}
-    </div>
-  </Widget>
-
-  <section class="mb-4lh">
-    <h2 class="text-lg font-semibold mb-half-lh">Docs</h2>
-    <p class="text-[var(--color-text-label)] mb-half-lh">
-      VLAN maps, runbooks, service registry, config exports, and setup guides.
-    </p>
-    <a
-      href="https://gitea.lerkolabs.com/lerko/homelab"
-      target="_blank"
-      rel="noopener noreferrer"
-      class="underline hover:text-[var(--color-text-label)]"
-    >
-      gitea.lerkolabs.com/lerko/homelab
-    </a>
-  </section>
-
-  <Footer slot="footer" />
-</Base>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="refresh" content="0; url=/#homelab" />
+    <link rel="canonical" href="/" />
+    <title>Redirecting...</title>
+  </head>
+  <body>
+    <p>This page moved. <a href="/#homelab">/#homelab</a></p>
+  </body>
+</html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c0ca2ca0..3a688a28 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,11 +4,217 @@ import Nav from "@/components/Nav.astro";
 import Footer from "@/components/Footer.astro";
 import Hero from "@/components/Hero.astro";
 import Timeline from "@/components/Timeline.astro";
+import Widget from "@/components/Widget.astro";
+import ProjectCard from "@/components/ProjectCard.astro";
+import { featuredProjects } from "@/data/projects";
+import { services, categoryOrder, categoryLabels } from "@/data/services";
+
+const glanceStats = [
+  { label: "Hypervisor", value: "Proxmox VE" },
+  { label: "Firewall", value: "pfSense (Netgate 1100)" },
+  { label: "Switching", value: "TP-Link Omada (managed)" },
+  { label: "ISP", value: "AT&T Fiber 1 Gbps" },
+  { label: "VPN", value: "WireGuard (pfSense)" },
+  { label: "Reverse Proxy", value: "Caddy + Cloudflare DNS-01" },
+  { label: "Auth", value: "Authentik SSO" },
+  { label: "DNS", value: "Pi-hole → Unbound → Cloudflare" },
+  { label: "Containers", value: "9 LXC + 2 VMs" },
+];
+
+const vlans = [
+  { id: "MGMT", name: "MGMT", purpose: "Network equipment only" },
+  { id: "LAN", name: "LAN", purpose: "Trusted personal devices" },
+  { id: "Lab", name: "Homelab", purpose: "All self-hosted services" },
+  { id: "Guest", name: "Guests", purpose: "Internet only, RFC1918 blocked" },
+  { id: "IoT", name: "IoT", purpose: "Smart home, isolated" },
+  { id: "WFH", name: "WFH", purpose: "Work devices, no personal access" },
+  { id: "DMZ", name: "DMZ", purpose: "Public-facing, hard-blocked internally" },
+  { id: "VPN", name: "VPN", purpose: "WireGuard clients, LAN-equivalent access" },
+];
+
+const adrs = [
+  {
+    title: "ISP gateway: passthrough mode",
+    decision:
+      "ISP gateway stays in-line in passthrough mode, pfSense gets the public IP directly. Gateway WiFi disabled.",
+    why: "Carrier locks 802.1X auth to their own gateway hardware, and bypassing it is brittle — breaks on firmware updates and only saves a millisecond or two. True bridge mode isn't supported. Passthrough is the cleanest option that keeps pfSense as the actual perimeter.",
+  },
+  {
+    title: "Caddy over NGINX Proxy Manager",
+    decision:
+      "Caddy with DNS-01 challenge via Cloudflare API. All subdomains resolve to Caddy internally via Pi-hole. Caddy terminates TLS and proxies to backends.",
+    why: "Single Caddyfile, automatic certs without ever needing to expose internal services to the internet for an HTTP-01 challenge. NPM has more UI overhead for the same outcome. Traefik is more complex for no benefit at this scale.",
+  },
+  {
+    title: "WireGuard over OpenVPN",
+    decision:
+      "WireGuard on pfSense as the only remote-access path. Clients get the access tier documented in the access model — same as LAN, plus the admin surfaces that aren't reachable any other way.",
+    why: "Faster, simpler config, better battery life on mobile. Throughput on the firewall hardware comfortably exceeds the WAN link. OpenVPN has no advantage here. Tailscale would add an external relay dependency for a problem WireGuard already solves.",
+  },
+  {
+    title: "Pi-hole in Homelab VLAN, not MGMT",
+    decision:
+      "Pi-hole runs in the Homelab VLAN. Firewall allows port 53 inbound from VLANs that need local resolution. MGMT uses pfSense Unbound as its primary resolver instead.",
+    why: "Putting Pi-hole in MGMT would mean opening MGMT to all the VLANs that need DNS — much bigger attack surface for the most sensitive tier. DNS traffic crossing into the Homelab VLAN is the lesser risk, and Homelab is already where service traffic terminates anyway.",
+  },
+  {
+    title: "Netgate 1100 for pfSense",
+    decision:
+      "Netgate 1100 (Marvell ARMADA 3720, dual-core ARM) as the firewall appliance. ~6W idle, line-rate NAT at 1 Gbps, WireGuard at ~100–150 Mbps.",
+    why: "Purpose-built for pfSense. Right-sized for 1 Gbps fiber — NAT saturates the link, WireGuard is fast enough for remote access. A full rack server wastes power for this role. Configs and version tracked in private repo.",
+  },
+  {
+    title: "Shared Postgres + Redis in apps LXC",
+    decision:
+      "One Postgres instance hosting multiple databases. One Redis instance. A single init script provisions schemas on first run.",
+    why: "Avoids ~15 separate DB containers. Big RAM savings. Productivity apps colocate in one LXC anyway, so a shared backing store there is the natural shape.",
+  },
+  {
+    title: "Gitea CI/CD: self-hosted runner, internal pipeline, static deploy",
+    decision:
+      "Self-hosted Gitea Actions runner builds the portfolio on push, then deploys pre-built static files to the public-facing host. Build runs in an isolated container so the runner host stays clean. Public host serves static files only — no build toolchain on it.",
+    why: "Keeps the whole pipeline internal. No external runners, no GitHub Actions. The build/serve split means the public-facing host has the smallest possible footprint — static file server, nothing more.",
+  },
+  {
+    title: "Authentik over Authelia",
+    decision: "Authentik as the SSO provider across all self-hosted services.",
+    why: "Full OIDC provider + forward auth in one. Lets services like Outline, Gitea, and Vikunja use real SSO rather than just a login gate. Authelia is forward-auth only — no OIDC provider capability.",
+  },
+];
 ---
 
 <Base>
   <Nav slot="nav" />
+
   <Hero />
-  <Timeline />
+
+  <section id="projects">
+    <Widget title="Projects"  as="div">
+      <div class="flex flex-col">
+        {featuredProjects.map((project) => (
+          <ProjectCard project={project} />
+        ))}
+      </div>
+    </Widget>
+  </section>
+
+  <section id="journey">
+    <Timeline />
+  </section>
+
+  <section id="homelab">
+    <div class="mb-4lh">
+      <h2 class="text-xl font-bold mb-half-lh">Homelab</h2>
+      <p class="text-[var(--color-text-label)] leading-relaxed max-w-2xl">
+        Personal infrastructure environment for learning, self-hosting, and
+        operational practice. Running 24/7 on production-grade hardware with
+        real network segmentation, SSO, monitoring, and IaC-style
+        documentation.
+      </p>
+    </div>
+
+    <Widget title="Overview"  as="div">
+      <dl class="flex flex-col">
+        {glanceStats.map(({ label, value }) => (
+          <div class="flex gap-2ch py-qtr-lh">
+            <dt class="text-[var(--color-text-dim)] w-[16ch] shrink-0">{label}</dt>
+            <dd>{value}</dd>
+          </div>
+        ))}
+      </dl>
+    </Widget>
+
+    <Widget
+      title="Network"
+      meta="8 segments, default deny"
+      as="div"
+    >
+      <div class="overflow-x-auto">
+        <table class="w-full border-collapse">
+          <thead>
+            <tr class="border-b border-[var(--color-border)]">
+              <th class="text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch]">
+                Segment
+              </th>
+              <th class="text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch]">
+                Name
+              </th>
+              <th class="text-[var(--color-text-dim)] text-left py-qtr-lh">
+                Purpose
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {vlans.map((v) => (
+              <tr class="border-b border-[var(--color-border)]">
+                <td class="py-half-lh pr-[3ch]">{v.id}</td>
+                <td class="py-half-lh pr-[3ch]">{v.name}</td>
+                <td class="text-[var(--color-text-label)] py-half-lh">{v.purpose}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </Widget>
+
+    <Widget title="Services"  as="div">
+      <div class="flex flex-col gap-2lh">
+        {categoryOrder.map((cat) => {
+          const catServices = services.filter((s) => s.category === cat && !s.hidden);
+          return (
+            <div>
+              <h3 class="text-[var(--color-text-dim)] font-semibold mb-half-lh">
+                {categoryLabels[cat]}
+              </h3>
+              <ul class="flex flex-col">
+                {catServices.map((svc) => (
+                  <li class="py-qtr-lh">
+                    <span class="font-semibold">{svc.name}</span>
+                    <span class="text-[var(--color-text-label)]"> — {svc.description}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          );
+        })}
+      </div>
+    </Widget>
+
+    <Widget
+      title="ADRs"
+      meta="why things are configured the way they are"
+            as="div"
+    >
+      <div class="flex flex-col gap-2lh">
+        {adrs.map((adr) => (
+          <div>
+            <h3 class="font-semibold mb-half-lh">{adr.title}</h3>
+            <p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
+              <strong>Decision:</strong> {adr.decision}
+            </p>
+            <p class="text-[var(--color-text-label)] leading-relaxed">
+              <strong>Why:</strong> {adr.why}
+            </p>
+          </div>
+        ))}
+      </div>
+    </Widget>
+
+    <div class="mb-4lh">
+      <h2 class="text-lg font-semibold mb-half-lh">Docs</h2>
+      <p class="text-[var(--color-text-label)] mb-half-lh">
+        VLAN maps, runbooks, service registry, config exports, and setup guides.
+      </p>
+      <a
+        href="https://gitea.lerkolabs.com/lerko/homelab"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="underline hover:text-[var(--color-text-label)]"
+      >
+        gitea.lerkolabs.com/lerko/homelab
+      </a>
+    </div>
+  </section>
+
   <Footer slot="footer" />
 </Base>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index e1f043d6..285e4ea0 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -1,64 +1,12 @@
----
-import Base from "@/layouts/Base.astro";
-import Nav from "@/components/Nav.astro";
-import Footer from "@/components/Footer.astro";
-import Widget from "@/components/Widget.astro";
-import ProjectCard from "@/components/ProjectCard.astro";
-import { featuredProjects, archiveProjects } from "@/data/projects";
----
-
-<Base
-  title="Projects | Tyler Koenig"
-  description="Featured projects and earlier work — homelab, open-pact, helm, and bootcamp/experiment archive."
->
-  <Nav slot="nav" />
-
-  <div class="mb-4lh">
-    <h1 class="text-xl font-bold mb-half-lh">Projects</h1>
-    <p class="text-[var(--color-text-label)] leading-relaxed max-w-xl">
-      Featured work first. Earlier experiments, browser extensions, and bootcamp projects below — kept for context.
-    </p>
-  </div>
-
-  <Widget title="Featured" badge={featuredProjects.length} as="section">
-    <div class="flex flex-col">
-      {featuredProjects.map((project) => (
-        <ProjectCard project={project} />
-      ))}
-    </div>
-  </Widget>
-
-  <Widget title="Archive" badge={archiveProjects.length} as="section">
-    <div class="flex flex-col gap-2lh">
-      {archiveProjects.map((project) => (
-        <div>
-          <div class="flex items-baseline gap-1ch mb-half-lh">
-            {project.year && (
-              <span class="text-[var(--color-text-dim)] shrink-0">
-                {project.year}
-              </span>
-            )}
-            <h3>
-              <a
-                href={project.githubUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                class="font-semibold underline hover:text-[var(--color-text-label)]"
-              >
-                {project.title}
-              </a>
-            </h3>
-          </div>
-          <p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
-            {project.description}
-          </p>
-          <p class="text-[var(--color-text-dim)]">
-            {project.tags.join(" · ")}
-          </p>
-        </div>
-      ))}
-    </div>
-  </Widget>
-
-  <Footer slot="footer" />
-</Base>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="refresh" content="0; url=/#projects" />
+    <link rel="canonical" href="/" />
+    <title>Redirecting...</title>
+  </head>
+  <body>
+    <p>This page moved. <a href="/#projects">/#projects</a></p>
+  </body>
+</html>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 8f4e6eec..8e7c8bf6 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -17,8 +17,6 @@
   --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
   --font-mono:  "Source Code Pro", ui-monospace, monospace;
-  --font-body:  var(--font-sans);
-
   /* Breakpoints */
   --breakpoint-xs: 576px;
 
@@ -44,14 +42,9 @@ html {
   line-height: 1.5;
   background-color: var(--color-bg);
   color: var(--color-text);
-  font-family: var(--font-body);
+  font-family: var(--font-sans);
 }
 
-/* Typeface picker overrides */
-html[data-typeface="sans"]  { --font-body: var(--font-sans); }
-html[data-typeface="serif"] { --font-body: var(--font-serif); line-height: 1.6; }
-html[data-typeface="mono"]  { --font-body: var(--font-mono); font-size: 15px; letter-spacing: -0.01em; }
-
 @layer base {
   * {
     box-sizing: border-box;
@@ -82,11 +75,23 @@ a:hover {
   text-decoration-color: currentColor;
 }
 
+/* Focus states */
+a:focus-visible {
+  text-decoration-color: currentColor;
+  outline: 2px solid var(--color-border-bright);
+  outline-offset: 2px;
+}
+button:focus-visible {
+  outline: 2px solid var(--color-border-bright);
+  outline-offset: 2px;
+}
+
 /* Default transitions */
 a,
 button {
   transition: color 120ms linear, border-color 120ms linear,
-    opacity 120ms linear, text-decoration-color 120ms linear;
+    opacity 120ms linear, text-decoration-color 120ms linear,
+    outline-color 120ms linear;
 }
 
 @media (prefers-reduced-motion: reduce) {