'feat(site): /projects consolidation, homelab copy pass, theme fix' (#6 )

Reviewed-on: #6
fix(theme): unblock light mode in dev
2026-04-27 06:18:24 +00:00 · 2026-04-27 00:49:57 -04:00 · 2026-04-27 00:49:52 -04:00 · 2026-04-27 00:49:47 -04:00 · 2026-04-27 00:49:42 -04:00 · 2026-04-26 23:19:16 -04:00
20 changed files with 868 additions and 351 deletions
@@ -41,3 +41,30 @@ jobs:
             docker stop portfolio 2>/dev/null || true && \
             docker rm portfolio 2>/dev/null || true && \
             docker run -d --name portfolio -p 80:80 --restart unless-stopped portfolio"
+
+      - name: Tag release (CalVer)
+        run: |
+          git fetch --tags
+          if git describe --exact-match --tags HEAD 2>/dev/null; then
+            echo "Commit already tagged, skipping."
+          else
+            YEAR=$(date +%Y)
+            MONTH=$(date +%m)
+            LATEST=$(git tag --sort=-v:refname | grep -E '^[0-9]{4}\.[0-9]{2}\.[0-9]+$' | head -1)
+            if [ -n "$LATEST" ]; then
+              LATEST_YEAR=$(echo "$LATEST" | cut -d. -f1)
+              LATEST_MONTH=$(echo "$LATEST" | cut -d. -f2)
+              LATEST_MICRO=$(echo "$LATEST" | cut -d. -f3)
+              if [ "$YEAR" = "$LATEST_YEAR" ] && [ "$MONTH" = "$LATEST_MONTH" ]; then
+                MICRO=$((LATEST_MICRO + 1))
+              else
+                MICRO=1
+              fi
+            else
+              MICRO=1
+            fi
+            NEW_TAG="${YEAR}.$(printf '%02d' $MONTH).${MICRO}"
+            git tag "$NEW_TAG"
+            git push origin "$NEW_TAG"
+            echo "Tagged $NEW_TAG"
+          fi
@@ -0,0 +1,44 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - dev
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Build
+        run: npm ci && npm run build
+
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: out/
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v4
@@ -29,9 +29,5 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts

-# claude code
-CLAUDE.md
-.claude/
-
 # docs
 /docs
@@ -2,7 +2,7 @@

 Personal portfolio site. Live at [lerkolabs.com](https://lerkolabs.com) — self-hosted.

-Source: [gitea.lerkolabs.com/lerko/lerkolabs.com](https://gitea.lerkolabs.com/lerko/lerkolabs.com)
+Source: [gitea.lerkolabs.com/lerko/portfolio](https://gitea.lerkolabs.com/lerko/portfolio)

 **Stack:** Next.js 16 · React 19 · TypeScript · Tailwind v4

@@ -1,73 +1,24 @@
-import type { Metadata } from "next";
-import Widget from "@/components/Widget";
-import { archiveProjects } from "@/data/projects";
+"use client";

-export const metadata: Metadata = {
-  title: "Archive | Tyler Koenig",
-  description: "Earlier projects and experiments — browser extensions, canvas apps, and bootcamp work.",
-};
+import { useEffect } from "react";
+
+export default function ArchiveRedirect() {
+  useEffect(() => {
+    window.location.replace("/projects/");
+  }, []);

-export default function ArchivePage() {
  return (
    <>
-      <div className="mb-16">
-        <div className="flex items-center gap-3 mb-4">
-          <span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
-            archive
-          </span>
-          <div className="flex-1 h-px bg-[var(--color-border)]" aria-hidden="true" />
-        </div>
-        <h1 className="font-mono text-lg font-bold text-[var(--color-text)] mb-3">
-          Earlier Work
-        </h1>
-        <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed max-w-xl opacity-80">
-          Experiments, browser extensions, and bootcamp projects. Kept here for context — not
-          representative of current work.
-        </p>
-      </div>
-
-      <Widget title="projects" badge={archiveProjects.length} as="section">
-        <div className="flex flex-col gap-px bg-[var(--color-border)]">
-          {archiveProjects.map((project) => (
-            <a
-              key={project.slug}
-              href={project.githubUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start justify-between gap-6 px-4 py-4 group"
-            >
-              <div className="flex flex-col gap-2 flex-1 min-w-0">
-                <div className="flex items-center gap-3">
-                  {project.year && (
-                    <span className="font-mono text-xs text-[var(--color-text-dim)] shrink-0">
-                      {project.year}
-                    </span>
-                  )}
-                  <span className="font-mono text-sm text-[var(--color-text)] group-hover:text-[var(--color-accent-green)] truncate">
-                    {project.title}
-                  </span>
-                </div>
-                <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed opacity-75">
-                  {project.description}
-                </p>
-                <div className="flex flex-wrap gap-x-3 gap-y-0.5">
-                  {project.tags.map((tag) => (
-                    <span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]">
-                      {tag}
-                    </span>
-                  ))}
-                </div>
-              </div>
-              <span
-                className="font-mono text-xs text-[var(--color-text-label)] group-hover:text-[var(--color-text)] shrink-0 mt-0.5"
-                aria-hidden="true"
-              >
-                ↗
-              </span>
-            </a>
-          ))}
-        </div>
-      </Widget>
+      <meta httpEquiv="refresh" content="0; url=/projects/" />
+      <p className="font-mono text-sm text-[var(--color-text)]">
+        This page moved.{" "}
+        <a
+          href="/projects/"
+          className="text-[var(--color-accent-green)] underline"
+        >
+          /projects/
+        </a>
+      </p>
    </>
  );
 }
@@ -3,17 +3,24 @@
@variant dark (&:where(.dark, .dark *));

@theme {
-  /* Terminal-Noir palette */
-  --color-bg:             #0a0a0a;
-  --color-surface:        #111111;
-  --color-surface-raised: #1a1a1a;
-  --color-border:         #2a2a2a;
-  --color-border-bright:  #444444;
-  --color-text:           #e8e8e8;
-  --color-text-label:     #666666;
-  --color-text-dim:       #444444;
-  --color-accent-green:   #00cc44;
-  --color-accent-red:     #cc2200;
+  /* macOS Classic Dark (default) */
+  --color-bg:             #131313;
+  --color-surface:        #1e1d1e;
+  --color-surface-raised: #272727;
+  --color-border:         #3a3a3a;
+  --color-border-bright:  #404040;
+  --color-text:           #caccca;
+  --color-text-label:     #9e9e9e;
+  --color-text-dim:       #8f8f8f;
+  --color-accent-green:   #62ba46;
+  --color-accent-red:     #c74028;
+
+  /* Timeline type colors — dark */
+  --color-timeline-career:    #62ba46;
+  --color-timeline-education: #c28b12;
+  --color-timeline-cert:      #c75828;
+  --color-timeline-project:   #c72855;
+  --color-timeline-homelab:   #e1d797;

  /* Typography */
  --font-mono: "Source Code Pro", ui-monospace, monospace;
@@ -22,6 +29,20 @@
  /* Breakpoints */
  --breakpoint-xs: 576px;

+  /* Character-grid spacing — horizontal (ch) */
+  --spacing-1ch:     1ch;
+  --spacing-2ch:     2ch;
+  --spacing-3ch:     3ch;
+  --spacing-4ch:     4ch;
+
+  /* Character-grid spacing — vertical (lh, requires line-height:1.5 on html) */
+  --spacing-qtr-lh:  0.25lh;
+  --spacing-half-lh: 0.5lh;
+  --spacing-1lh:     1lh;
+  --spacing-2lh:     2lh;
+  --spacing-3lh:     3lh;
+  --spacing-4lh:     4lh;
+
  /* Animations */
  --animate-fade-in: fadeIn 120ms linear forwards;

@@ -34,11 +55,16 @@
 /* Base */
 html {
  scroll-behavior: smooth;
+  font-size: 15px;
+  line-height: 1.5;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
 }

+@keyframes blink { 50% { opacity: 0; } }
+.animate-cursor { animation: blink 1s step-start infinite; }
+
@layer base {
  * {
    box-sizing: border-box;
@@ -47,6 +73,26 @@ html {
  }
 }

+/* macOS Classic Light overrides */
+:root:not(.dark) {
+  --color-bg:             #ffffff;
+  --color-surface:        #f9f9f9;
+  --color-surface-raised: #f7f7f7;
+  --color-border:         #e0e0e0;
+  --color-border-bright:  #d2d2d2;
+  --color-text:           #000000;
+  --color-text-label:     #505050;
+  --color-text-dim:       #929292;
+  --color-accent-green:   #036a07;
+  --color-accent-red:     #d21f07;
+
+  --color-timeline-career:    #036a07;
+  --color-timeline-education: #0433ff;
+  --color-timeline-cert:      #957931;
+  --color-timeline-project:   #6f42c1;
+  --color-timeline-homelab:   #0000a2;
+}
+
 /* Default transitions — linear, fast */
 a,
 button {
@@ -21,58 +21,96 @@ const glanceStats = [
 ];

 const vlans = [
-  { id: "1000", name: "MGMT",    subnet: "10.0.0.0/24",   purpose: "Network equipment only" },
-  { id: "1010", name: "LAN",     subnet: "10.1.0.0/24",   purpose: "Trusted personal devices" },
-  { id: "1020", name: "Homelab", subnet: "10.2.0.0/24",   purpose: "All self-hosted services" },
-  { id: "1030", name: "Guests",  subnet: "10.3.0.0/24",   purpose: "Internet only, RFC1918 blocked" },
-  { id: "1040", name: "IoT",     subnet: "10.4.0.0/24",   purpose: "Smart home, isolated" },
-  { id: "1050", name: "WFH",     subnet: "10.5.0.0/24",   purpose: "Work devices, no personal access" },
-  { id: "DMZ",  name: "DMZ",     subnet: "10.99.0.0/24",  purpose: "Public-facing, hard-blocked internally" },
-  { id: "VPN",  name: "VPN",     subnet: "10.200.0.0/24", purpose: "WireGuard clients = LAN access" },
+  {
+    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: "AT&T Gateway: IP Passthrough over EAP bypass",
+    title: "ISP gateway: passthrough mode",
    decision:
-      "BGW320 stays in-line with IP Passthrough mode. pfSense gets the public IP directly. Gateway WiFi disabled.",
-    why: "AT&T locks 802.1X auth to their gateway hardware. EAP proxy bypass is brittle — breaks on firmware updates and only saves 1–2ms. True bridge mode isn't supported.",
+      "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 SSL and proxies to backends.",
-    why: "Single Caddyfile, auto-cert without exposing port 80/443 to the internet. NPM has more UI overhead for the same outcome. Traefik is more complex for no benefit here.",
+      "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, UDP 51820, VPN subnet 10.200.0.0/24. Clients get LAN + MGMT access, blocked from Guest/IoT/WFH.",
-    why: "Faster, simpler config, better battery life on mobile. ~600–900 Mbps on an N100. OpenVPN has no advantage here. Tailscale adds an external relay dependency.",
+      "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 at 10.2.0.11 (VLAN 1020). Firewall allows port 53 inbound from all VLANs. MGMT uses pfSense Unbound as its primary DNS.",
-    why: "Putting Pi-hole in MGMT would require opening MGMT to all VLANs — a larger attack surface. DNS traffic crossing into Homelab VLAN is the lesser risk.",
+      "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: "N100 for pfSense",
+    title: "Mini-PC for pfSense",
    decision:
-      "Intel N100 mini PC: 4-core 3.4 GHz, ~6W idle. Handles 2–3 Gbps routing and 600–900 Mbps WireGuard.",
-    why: "Right-sized for 1 Gbps fiber with headroom. Raspberry Pi can't handle 1 Gbps + VPN. A full rack server wastes power for this role.",
+      "Intel N100 mini-PC as the firewall host. ~6W idle, handles multi-Gbps routing, saturates the WAN link with WireGuard headroom to spare.",
+    why: "Right-sized for 1 Gbps fiber. A Raspberry Pi can't handle 1 Gbps plus VPN. A full rack server wastes power for this role and adds noise to a room I sit in.",
  },
  {
    title: "Shared Postgres + Redis in apps LXC",
    decision:
-      "One Postgres instance, multiple databases. One Redis instance. A single init script provisions all schemas on first run.",
-    why: "Avoids 15 separate DB containers. Reduces RAM overhead significantly. All productivity apps share the same LXC (10.2.0.60).",
+      "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 with container build + SSH rsync deploy",
+    title:
+      "Gitea CI/CD: self-hosted runner, internal pipeline, static deploy",
    decision:
-      "act_runner v0.3.1 on Gitea LXC (10.99.0.22). Push to dev → node:22-alpine container builds Next.js → rsync out/ to Portfolio LXC → SSH docker rebuild.",
-    why: "Keeps the full pipeline internal — no GitHub Actions, no external runners. Build runs in an isolated Alpine container so the Gitea LXC isn't polluted. Portfolio LXC (10.99.0.23) just serves pre-built static files via nginx.",
+      "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.",
  },
 ];

@@ -80,35 +118,35 @@ export default function HomelabPage() {
  return (
    <>
      {/* Header */}
-      <div className="mb-16">
-        <div className="flex items-center gap-3 mb-4">
-          <span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
-            lerkolabs
+      <div className="mb-4lh">
+        <p className="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh">
+          <span
+            className="text-[var(--color-accent-green)] select-none mr-1ch"
+            aria-hidden="true"
+          >
+            ❯
          </span>
-          <div className="flex-1 h-px bg-[var(--color-border)]" aria-hidden="true" />
-        </div>
-        <h1 className="font-mono text-lg font-bold text-[var(--color-text)] mb-3">
-          Home Infrastructure Lab
-        </h1>
-        <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed max-w-2xl opacity-80">
-          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.
+          homelab
+        </p>
+        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-2xl opacity-80">
+          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>

      {/* At a Glance */}
-      <Widget title="at a glance" badge={glanceStats.length} as="section">
+      <Widget title="homelab/overview" badge={glanceStats.length} as="section">
        <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
          {glanceStats.map(({ label, value }) => (
-            <div
-              key={label}
-              className="bg-[var(--color-surface)] px-4 py-3"
-            >
-              <p className="font-mono text-xs text-[var(--color-text-dim)] uppercase tracking-wider mb-1">
+            <div key={label} className="bg-[var(--color-surface)] px-2ch py-half-lh">
+              <p className="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh">
                {label}
              </p>
-              <p className="font-mono text-sm text-[var(--color-text)]">{value}</p>
+              <p className="font-mono text-sm text-[var(--color-text)]">
+                {value}
+              </p>
            </div>
          ))}
        </div>
@@ -116,24 +154,21 @@ export default function HomelabPage() {

      {/* VLAN table */}
      <Widget
-        title="network"
-        meta="8 isolated vlans · default deny inter-vlan"
+        title="homelab/network"
+        meta="8 network segments · default deny"
        as="section"
      >
        <div className="overflow-x-auto">
-          <table className="w-full text-xs border-collapse">
+          <table className="w-full text-sm border-collapse">
            <thead>
              <tr className="border-b border-[var(--color-border)]">
-                <th className="font-mono text-[var(--color-text-dim)] text-left py-2 pr-6 uppercase tracking-wider">
-                  VLAN
+                <th className="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase">
+                  Segment
                </th>
-                <th className="font-mono text-[var(--color-text-dim)] text-left py-2 pr-6 uppercase tracking-wider">
+                <th className="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase">
                  Name
                </th>
-                <th className="font-mono text-[var(--color-text-dim)] text-left py-2 pr-6 uppercase tracking-wider">
-                  Subnet
-                </th>
-                <th className="font-mono text-[var(--color-text-dim)] text-left py-2 uppercase tracking-wider">
+                <th className="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh uppercase">
                  Purpose
                </th>
              </tr>
@@ -144,14 +179,15 @@ export default function HomelabPage() {
                  key={v.id}
                  className="border-b border-[var(--color-border)] hover:bg-[var(--color-surface)]"
                >
-                  <td className="font-mono text-[var(--color-accent-green)] py-2.5 pr-6">
+                  <td className="font-mono text-[var(--color-accent-green)] py-half-lh pr-[3ch]">
                    {v.id}
                  </td>
-                  <td className="font-mono text-[var(--color-text)] py-2.5 pr-6">{v.name}</td>
-                  <td className="font-mono text-[var(--color-text-label)] py-2.5 pr-6">
-                    {v.subnet}
+                  <td className="font-mono text-[var(--color-text)] py-half-lh pr-[3ch]">
+                    {v.name}
+                  </td>
+                  <td className="font-mono text-sm text-[var(--color-text)] py-2.5 opacity-80">
+                    {v.purpose}
                  </td>
-                  <td className="font-sans text-sm text-[var(--color-text)] py-2.5 opacity-80">{v.purpose}</td>
                </tr>
              ))}
            </tbody>
@@ -160,34 +196,30 @@ export default function HomelabPage() {
      </Widget>

      {/* Services */}
-      <Widget
-        title="services"
-        badge={services.length}
-        as="section"
-      >
-        <div className="flex flex-col gap-8">
+      <Widget title="homelab/services" badge={services.length} as="section">
+        <div className="flex flex-col gap-3ch">
          {categoryOrder.map((cat) => {
            const catServices = services.filter((s) => s.category === cat);
            return (
              <div key={cat}>
-                <p className="font-mono text-xs text-[var(--color-text-dim)] uppercase tracking-wider mb-3">
+                <p className="font-mono text-sm text-[var(--color-text-dim)] mb-1lh">
                  {categoryLabels[cat]}
                </p>
                <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
                  {catServices.map((svc) => (
                    <div
                      key={svc.name}
-                      className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start gap-3 px-4 py-3"
+                      className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start gap-1ch px-2ch py-half-lh"
                    >
                      <i
                        className={`${svc.icon} text-[var(--color-text-label)] text-xs mt-0.5 w-3.5 shrink-0`}
                        aria-hidden="true"
                      />
                      <div>
-                        <p className="font-mono text-xs text-[var(--color-text)] mb-0.5">
+                        <p className="font-mono text-sm text-[var(--color-text)] mb-0.5">
                          {svc.name}
                        </p>
-                        <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed opacity-75">
+                        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
                          {svc.description}
                        </p>
                      </div>
@@ -202,7 +234,7 @@ export default function HomelabPage() {

      {/* ADRs */}
      <Widget
-        title="architecture decisions"
+        title="homelab/ADRs"
        meta="why things are configured the way they are"
        badge={adrs.length}
        as="section"
@@ -211,15 +243,21 @@ export default function HomelabPage() {
          {adrs.map((adr) => (
            <div
              key={adr.title}
-              className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-4 py-4"
+              className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-2ch py-1lh"
            >
-              <p className="font-mono text-sm text-[var(--color-text)] mb-2">{adr.title}</p>
-              <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed mb-1.5 opacity-75">
-                <span className="text-[var(--color-text-label)] opacity-100">decision: </span>
+              <p className="font-mono text-sm text-[var(--color-text)] mb-1lh">
+                {adr.title}
+              </p>
+              <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed mb-half-lh opacity-75">
+                <span className="text-[var(--color-text-label)] opacity-100">
+                  decision:{" "}
+                </span>
                {adr.decision}
              </p>
-              <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed opacity-75">
-                <span className="text-[var(--color-text-label)] opacity-100">why: </span>
+              <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
+                <span className="text-[var(--color-text-label)] opacity-100">
+                  why:{" "}
+                </span>
                {adr.why}
              </p>
            </div>
@@ -227,19 +265,22 @@ export default function HomelabPage() {
        </div>
      </Widget>

-      {/* GitHub CTA */}
-      <section className="border-t border-[var(--color-border)] pt-6">
-        <p className="font-mono text-sm text-[var(--color-text-label)] mb-1">lerkolabs on GitHub</p>
-        <p className="font-sans text-sm text-[var(--color-text)] mb-3 opacity-75">
-          Full documentation: VLAN maps, runbooks, service registry, config exports, and setup guides.
+      {/* Gitea CTA */}
+      <section className="pt-qtr-lh">
+        <p className="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh">
+          homelab/docs
+        </p>
+        <p className="font-mono text-sm text-[var(--color-text)] mb-1lh opacity-75">
+          VLAN maps, runbooks, service registry, config exports, and setup
+          guides.
        </p>
        <a
-          href="https://github.com/lerko96/homelab-wip"
+          href="https://gitea.lerkolabs.com/lerko/homelab"
          target="_blank"
          rel="noopener noreferrer"
-          className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+          className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
        >
-          ↗ github.com/lerko96/homelab-wip
+          ↗ gitea.lerkolabs.com/lerko/homelab
        </a>
      </section>
    </>
@@ -24,15 +24,9 @@ export default function RootLayout({
  children: React.ReactNode;
 }) {
  return (
-    <html lang="en" className="dark">
+    <html lang="en" suppressHydrationWarning>
      <head>
        <ThemeScript />
-        <link
-          rel="stylesheet"
-          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
-          crossOrigin="anonymous"
-          referrerPolicy="no-referrer"
-        />
      </head>
      <body
        className={`${sourceCodePro.variable} bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen`}
@@ -43,7 +37,7 @@ export default function RootLayout({

          {/* Centered content column — border-l/r makes centering always visible */}
          <div className="max-w-[740px] mx-auto border-l border-r border-[var(--color-border)]">
-            <main className="px-8 py-14">
+            <main className="px-4ch py-3lh">
              {children}
            </main>
            <Footer />
@@ -1,9 +1,6 @@
 import type { Metadata } from "next";
 import Hero from "@/components/Hero";
-import Skills from "@/components/Skills";
-import ProjectCard from "@/components/ProjectCard";
-import Widget from "@/components/Widget";
-import { featuredProjects } from "@/data/projects";
+import Timeline from "@/components/Timeline";

 export const metadata: Metadata = {
  title: "Tyler Koenig",
@@ -15,14 +12,7 @@ export default function Home() {
  return (
    <>
      <Hero />
-      <Skills />
-      <Widget title="projects" badge={featuredProjects.length}>
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-          {featuredProjects.map((project) => (
-            <ProjectCard key={project.slug} project={project} />
-          ))}
-        </div>
-      </Widget>
+      <Timeline />
    </>
  );
 }
@@ -0,0 +1,77 @@
+import type { Metadata } from "next";
+import Widget from "@/components/Widget";
+import ProjectCard from "@/components/ProjectCard";
+import { featuredProjects, archiveProjects } from "@/data/projects";
+
+export const metadata: Metadata = {
+  title: "Projects | Tyler Koenig",
+  description:
+    "Featured projects and earlier work — homelab, open-pact, helm, and bootcamp/experiment archive.",
+};
+
+export default function ProjectsPage() {
+  return (
+    <>
+      <div className="mb-4lh">
+        <p className="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh">
+          <span className="text-[var(--color-accent-green)] select-none mr-1ch" aria-hidden="true">❯</span>
+          projects
+        </p>
+        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-xl opacity-80">
+          Featured work first. Earlier experiments, browser extensions, and bootcamp projects below — kept for context.
+        </p>
+      </div>
+
+      <Widget title="projects/featured" badge={featuredProjects.length} as="section">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-1ch">
+          {featuredProjects.map((project) => (
+            <ProjectCard key={project.slug} project={project} />
+          ))}
+        </div>
+      </Widget>
+
+      <Widget title="projects/archive" badge={archiveProjects.length} as="section">
+        <div className="flex flex-col gap-px bg-[var(--color-border)]">
+          {archiveProjects.map((project) => (
+            <a
+              key={project.slug}
+              href={project.githubUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start justify-between gap-2ch px-2ch py-1lh group"
+            >
+              <div className="flex flex-col gap-1ch flex-1 min-w-0">
+                <div className="flex items-center gap-1ch">
+                  {project.year && (
+                    <span className="font-mono text-sm text-[var(--color-text-dim)] shrink-0">
+                      {project.year}
+                    </span>
+                  )}
+                  <span className="font-mono text-sm text-[var(--color-text)] group-hover:text-[var(--color-accent-green)] truncate">
+                    {project.title}
+                  </span>
+                </div>
+                <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
+                  {project.description}
+                </p>
+                <div className="flex flex-wrap gap-x-1ch gap-y-0.5">
+                  {project.tags.map((tag) => (
+                    <span key={tag} className="font-mono text-sm text-[var(--color-text-dim)]">
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+              <span
+                className="font-mono text-sm text-[var(--color-text-label)] group-hover:text-[var(--color-text)] shrink-0 mt-0.5"
+                aria-hidden="true"
+              >
+                ↗
+              </span>
+            </a>
+          ))}
+        </div>
+      </Widget>
+    </>
+  );
+}
@@ -1,30 +1,44 @@
 export default function Footer() {
  return (
-    <footer className="border-t border-[var(--color-border)] py-5 mt-8">
-      <div className="px-8 flex items-center justify-between">
-        <span className="font-mono text-xs text-[var(--color-text-dim)]">
+    <footer className="border-t border-[var(--color-border)] py-1lh mt-2lh">
+      <div className="px-4ch flex items-center justify-between">
+        <span className="font-mono text-sm text-[var(--color-text-dim)]">
          &copy; {new Date().getFullYear()} Tyler Koenig
        </span>
-        <div className="flex items-center gap-5">
+        <div className="flex items-center gap-2ch">
          <a
            href="https://github.com/lerko96"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="GitHub"
-            className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
          >
-            <i className="fab fa-github mr-1.5" aria-hidden="true" />
-            github
+            [github]
+          </a>
+          <a
+            href="https://gitea.lerkolabs.com/lerko"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Gitea"
+            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+          >
+            [gitea]
          </a>
          <a
            href="https://www.linkedin.com/in/tyler-koenig"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="LinkedIn"
-            className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
          >
-            <i className="fab fa-linkedin mr-1.5" aria-hidden="true" />
-            linkedin
+            [linkedin]
+          </a>
+          <a
+            href="mailto:tyler@lerkolabs.com"
+            aria-label="Email"
+            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+          >
+            [email]
          </a>
        </div>
      </div>
@@ -1,75 +1,73 @@
-import Image from "next/image";
-
 export default function Hero() {
  return (
    <section className="mb-16">
-      {/* Section header */}
-      <div className="flex items-center gap-3 mb-6">
-        <span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
-          identity
-        </span>
-        <div className="flex-1 h-px bg-[var(--color-border)]" aria-hidden="true" />
-      </div>
-
-      <div className="flex items-start gap-5">
-        <Image
-          src="/images/headshot-tyler_koenig.png"
-          alt="Tyler Koenig"
-          width={56}
-          height={56}
-          className="shrink-0 object-cover"
-          priority
-        />
-
-        <div className="flex flex-col gap-3">
-          <div>
-            <p className="font-mono text-base font-bold text-[var(--color-text)]">
-              Tyler Koenig
-            </p>
-            <p className="font-mono text-xs text-[var(--color-text-label)] mt-0.5">
-              SOC Helpdesk I · Homelab Operator
-            </p>
-          </div>
-
-          <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed max-w-lg opacity-80">
-            I write software and run infrastructure that goes well past what my
-            job title implies. Games, AI tooling, mobile apps, and a homelab
-            running 20+ self-hosted services on segmented VLANs. Continuously
-            learning by building things that actually work.
-          </p>
-
-          <div className="flex flex-wrap items-center gap-x-5 gap-y-1">
-            <span className="font-mono text-xs text-[var(--color-accent-green)]">
-              ● online
+      <div className="flex flex-col gap-1ch">
+        <div>
+          <p className="font-mono text-sm font-bold text-[var(--color-text)]">
+            <span
+              className="text-[var(--color-accent-green)] select-none mr-1ch"
+              aria-hidden="true"
+            >
+              ❯
            </span>
-            <a
-              href="https://github.com/lerko96"
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="GitHub"
-              className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-            >
-              <i className="fab fa-github mr-1.5" aria-hidden="true" />
-              github
-            </a>
-            <a
-              href="https://www.linkedin.com/in/tyler-koenig"
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="LinkedIn"
-              className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-            >
-              <i className="fab fa-linkedin mr-1.5" aria-hidden="true" />
-              linkedin
-            </a>
-            <a
-              href="mailto:tylerkoenig96@gmail.com"
-              aria-label="Email"
-              className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-            >
-              @ email
-            </a>
-          </div>
+            tyler koenig
+          </p>
+          <p className="font-mono text-sm text-[var(--color-text-label)] mt-0.5">
+            Security Operations · Self-Hosted Infrastructure
+          </p>
+        </div>
+
+        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-70">
+          Homelab runs 30+
+          services across segmented VLANs — pfSense, Authentik SSO, full
+          observability stack. Write software too: mobile apps, Go backends,
+          open protocols. Daily drivers, all of it.{" "}
+          <span
+            className="animate-cursor text-[var(--color-accent-green)]"
+            aria-hidden="true"
+          >
+            █
+          </span>
+        </p>
+
+        <div className="flex flex-wrap items-center gap-x-1ch gap-y-half-lh">
+          <span className="font-mono text-sm text-[var(--color-accent-green)]">
+            ● available
+          </span>
+          <a
+            href="https://github.com/lerko96"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="GitHub"
+            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+          >
+            [github]
+          </a>
+          <a
+            href="https://gitea.lerkolabs.com/lerko"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Gitea"
+            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+          >
+            [gitea]
+          </a>
+          <a
+            href="https://www.linkedin.com/in/tyler-koenig"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="LinkedIn"
+            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+          >
+            [linkedin]
+          </a>
+          <a
+            href="mailto:tyler@lerkolabs.com"
+            aria-label="Email"
+            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+          >
+            [email]
+          </a>
        </div>
      </div>
    </section>
@@ -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" },
+  { href: "/projects/", label: "projects" },
 ];

 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">
+      <nav className="max-w-[740px] mx-auto px-4ch 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-2ch">
          {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>
@@ -6,8 +6,8 @@ type Props = {

 export default function ProjectCard({ project }: Props) {
  return (
-    <article className="border border-[var(--color-border)] bg-[var(--color-surface)] hover:border-[var(--color-border-bright)] flex flex-col gap-4 p-5">
-      <div className="flex items-start justify-between gap-3">
+    <article className="border border-[var(--color-border)] bg-[var(--color-surface)] flex flex-col gap-1lh p-2ch hover:bg-[var(--color-surface-raised)]">
+      <div className="flex items-start justify-between gap-1ch">
        <a
          href={project.githubUrl}
          target="_blank"
@@ -16,31 +16,48 @@ export default function ProjectCard({ project }: Props) {
        >
          {project.title}
        </a>
-        <div className="flex items-center gap-3 shrink-0">
+        <div className="flex items-center gap-1ch shrink-0">
          {project.stats && (
-            <span className="font-mono text-xs text-[var(--color-text-dim)]">
+            <span className="font-mono text-sm text-[var(--color-text-dim)]">
              {project.stats}
            </span>
          )}
+          {project.externalUrl && (
+            <a
+              href={project.externalUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={`View ${project.title} externally`}
+              className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+            >
+              ↗
+            </a>
+          )}
          <a
            href={project.githubUrl}
            target="_blank"
            rel="noopener noreferrer"
            aria-label={`View ${project.title} on GitHub`}
-            className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
          >
            ↗
          </a>
        </div>
      </div>

-      <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-75">
+      {project.statusBadge && (
+        <span className="font-mono text-sm text-[var(--color-accent-amber,#d4a027)] border border-[var(--color-accent-amber,#d4a027)] px-1ch py-0.5 w-fit opacity-80">
+          {project.statusBadge}
+        </span>
+      )}
+
+      <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-70">
        {project.description}
      </p>

-      <div className="flex flex-wrap gap-x-3 gap-y-1 pt-2 border-t border-[var(--color-border)]">
+      <div className="flex flex-wrap gap-x-1ch gap-y-half-lh mt-half-lh">
        {project.tags.map((tag) => (
-          <span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]">
+          <span key={tag} className="font-mono text-sm text-[var(--color-text-dim)]">
            {tag}
          </span>
        ))}
@@ -1,42 +1,40 @@
 import Widget from "@/components/Widget";

 const skillGroups = [
-  {
-    label: "Languages",
-    skills: ["JavaScript", "TypeScript", "HTML", "CSS"],
-  },
-  {
-    label: "Frontend",
-    skills: ["React", "React Native", "Expo", "Next.js", "Three.js"],
-  },
-  {
-    label: "Desktop & Tools",
-    skills: ["Electron", "Node.js", "REST APIs", "Git", "Docker", "TDD"],
-  },
  {
    label: "Infrastructure",
    skills: ["Proxmox", "pfSense", "VLANs", "WireGuard", "Linux", "Caddy"],
  },
+  {
+    label: "Desktop & Tools",
+    skills: ["Git", "Docker", "TDD", "Node.js", "REST APIs", ],
+  },
  {
    label: "Practices",
    skills: ["Agile / Scrum", "Relational Databases", "Self-hosting"],
  },
+  {
+    label: "Languages",
+    skills: ["Go", "JavaScript", "TypeScript", "HTML", "CSS"],
+  },
+  {
+    label: "Frontend",
+    skills: ["React", "React Native", "Expo", "Next.js", "Three.js"],
+  },
 ];

 const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);

 export default function Skills() {
  return (
-    <Widget title="skills" badge={totalCount} as="section">
+    <Widget title="tyler/skills" badge={totalCount} as="section">
      <div className="flex flex-col">
-        {skillGroups.map(({ label, skills }, i) => (
+        {skillGroups.map(({ label, skills }) => (
          <div
            key={label}
-            className={`flex flex-col xs:flex-row gap-1 xs:gap-6 py-4 ${
-              i < skillGroups.length - 1 ? "border-b border-[var(--color-border)]" : ""
-            }`}
+            className="flex flex-col xs:flex-row gap-1ch xs:gap-2ch py-half-lh"
          >
-            <span className="font-mono text-xs text-[var(--color-text-dim)] w-28 shrink-0 uppercase tracking-wider">
+            <span className="font-mono text-sm text-[var(--color-text-dim)] w-28 shrink-0">
              {label}
            </span>
            <span className="font-mono text-sm text-[var(--color-text)]">
@@ -0,0 +1,107 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import Widget from '@/components/Widget'
+import { timeline, type TimelineType } from '@/data/timeline'
+
+const typeColor: Record<TimelineType, string> = {
+  career:    'var(--color-timeline-career)',
+  education: 'var(--color-timeline-education)',
+  cert:      'var(--color-timeline-cert)',
+  project:   'var(--color-timeline-project)',
+  homelab:   'var(--color-timeline-homelab)',
+}
+
+const typeLabel: Record<TimelineType, string> = {
+  career:    'career',
+  education: 'education',
+  cert:      'cert',
+  project:   'project',
+  homelab:   'homelab',
+}
+
+export default function Timeline() {
+  const listRef = useRef<HTMLOListElement>(null)
+
+  useEffect(() => {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+
+    const entries = listRef.current?.querySelectorAll<HTMLLIElement>('[data-tl-entry]')
+    if (!entries) return
+
+    const observer = new IntersectionObserver(
+      (observed) => {
+        observed.forEach((entry) => {
+          if (entry.isIntersecting) {
+            ;(entry.target as HTMLElement).style.opacity = '1'
+            ;(entry.target as HTMLElement).style.transform = 'translateY(0)'
+            observer.unobserve(entry.target)
+          }
+        })
+      },
+      { threshold: 0.15 },
+    )
+
+    entries.forEach((el) => {
+      el.style.opacity = '0'
+      el.style.transform = 'translateY(8px)'
+      el.style.transition = 'opacity 240ms linear, transform 240ms linear'
+      observer.observe(el)
+    })
+
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <Widget title="tyler/journey">
+      <ol ref={listRef} className="relative border-l border-[var(--color-border)] ml-[2px] flex flex-col gap-0">
+        {timeline.map((entry, i) => (
+          <li key={i} data-tl-entry className="pl-[3ch] pb-2lh last:pb-0 relative">
+            {/* Spine dot */}
+            <span
+              className="absolute -left-[7px] top-[3px] w-3 h-3 rounded-full border border-[var(--color-bg)] shrink-0"
+              style={{ backgroundColor: typeColor[entry.type] }}
+              aria-hidden="true"
+            />
+
+            {/* Date + type badge */}
+            <div className="flex items-center gap-1ch mb-half-lh">
+              <span className="font-mono text-sm text-[var(--color-text-dim)]">{entry.date}</span>
+              <span
+                className="font-mono text-sm px-1 border"
+                style={{
+                  color: typeColor[entry.type],
+                  borderColor: typeColor[entry.type],
+                  opacity: 0.7,
+                }}
+              >
+                {typeLabel[entry.type]}
+              </span>
+            </div>
+
+            {/* Title */}
+            <p className="font-mono text-sm font-semibold text-[var(--color-text)] mb-half-lh">
+              {entry.title}
+            </p>
+
+            {/* Description */}
+            <p className="font-mono text-sm text-[var(--color-text)] opacity-70 leading-relaxed mb-half-lh">
+              {entry.description}
+            </p>
+
+            {/* Tags */}
+            {entry.tags && entry.tags.length > 0 && (
+              <div className="flex flex-wrap gap-x-1ch gap-y-half-lh">
+                {entry.tags.map((tag) => (
+                  <span key={tag} className="font-mono text-sm text-[var(--color-text-dim)]">
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            )}
+          </li>
+        ))}
+      </ol>
+    </Widget>
+  )
+}
@@ -15,22 +15,22 @@ export default function Widget({
  className,
  children,
 }: WidgetProps) {
+  const slashIdx = title.lastIndexOf("/");
+  const prefix = slashIdx >= 0 ? title.slice(0, slashIdx + 1) : null;
+  const name = slashIdx >= 0 ? title.slice(slashIdx + 1) : title;
+
  return (
-    <Tag className={`mb-16 ${className ?? ""}`}>
-      <div className="flex items-center gap-3 mb-8">
-        <span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase whitespace-nowrap">
-          {title}
-        </span>
-        {meta && (
-          <span className="font-mono text-xs text-[var(--color-text-dim)] whitespace-nowrap">
-            {meta}
-          </span>
+    <Tag className={`mb-4lh ${className ?? ""}`}>
+      <div className="flex items-center gap-1ch mb-2lh">
+        {prefix && (
+          <span className="font-mono text-sm text-[var(--color-text-dim)] select-none">{prefix}</span>
        )}
-        <div className="flex-1 h-px bg-[var(--color-border)]" aria-hidden="true" />
+        <span className="font-mono text-sm font-semibold text-[var(--color-text)]">{name}</span>
        {badge !== undefined && (
-          <span className="font-mono text-xs text-[var(--color-text-dim)] whitespace-nowrap">
-            {badge}
-          </span>
+          <span className="font-mono text-sm text-[var(--color-text-dim)]">[{badge}]</span>
+        )}
+        {meta && (
+          <span className="font-mono text-sm text-[var(--color-text-dim)]">— {meta}</span>
        )}
      </div>
      {children}
@@ -7,10 +7,73 @@ export type Project = {
  tier: "featured" | "archive";
  stats?: string;
  year?: number;
+  statusBadge?: string;
+  externalUrl?: string;
 };

 export const projects: Project[] = [
  // --- Featured ---
+  {
+    slug: "homelab",
+    title: "homelab",
+    description:
+      "7-VLAN segmented network, Wireguard VPN, Proxmox VMs/LXCs, SSO via Authentik, full monitoring stack (VictoriaMetrics + Grafana + Beszel + ntfy).",
+    tags: ["Markdown", "Mermaid", "Proxmox", "Monitor", "Backup"],
+    githubUrl: "https://gitea.lerkolabs.com/lerko/homelab",
+    tier: "featured",
+    year: 2026,
+  },
+  {
+    slug: "portfolio",
+    title: "portfolio",
+    description:
+      "Next.js 16 static site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
+    tags: ["Next.js", "Dockerfile", "Tailwind", "nginx", "Caddy"],
+    githubUrl: "https://gitea.lerkolabs.com/lerko/portfolio",
+    tier: "featured",
+    year: 2021,
+  },
+  {
+    slug: "nib",
+    title: "nib",
+    description:
+      "Capture-first personal journal built with Go + React + SQLite.  Currently developing in private when I have spare time.",
+    tags: ["Go", "React", "SQLite", "Journal", "Stream-of-Thought"],
+    githubUrl: "https://github.com/lerko96/nib",
+    tier: "featured",
+    year: 2026,
+  },
+  {
+    slug: "open-pact",
+    title: "open-pact",
+    description:
+      "Open protocol for AI agent identity, delegation, and portable memory. Ed25519 keypair identity, signed delegation warrants, portable signed memory facts. No central registry.",
+    tags: ["TypeScript", "Ed25519", "DID", "npm", "CC0"],
+    githubUrl: "https://github.com/lerko96/open-pact",
+    tier: "featured",
+    year: 2026,
+  },
+  // --- Archive ---
+  {
+    slug: "helm",
+    title: "helm",
+    description:
+      "Full-stack personal productivity dashboard. Go backend with chi router and SQLite, React + TypeScript frontend. Notes, todos, calendar (CalDAV), clipboard, bookmarks, memos. Self-hosted, single-user, daily use.",
+    tags: ["Go", "React", "TypeScript", "SQLite", "CalDAV"],
+    githubUrl: "https://github.com/lerko96/helm",
+    tier: "archive",
+    year: 2026,
+  },
+  {
+    slug: "risk-ops",
+    title: "risk-ops",
+    description:
+      "Browser-based strategy dashboard for Risk: Global Domination (SMG Studio). Open one HTML file — no install needed.",
+    tags: ["HTML", "JavaScript"],
+    githubUrl: "#",
+    tier: "archive",
+    year: 2026,
+  },
  {
    slug: "golf-book-mobile",
    title: "golf-book-mobile",
@@ -18,38 +81,11 @@ export const projects: Project[] = [
      "Offline-first mobile app for tracking golf rounds, managing your 14-club bag, and getting AI-powered club recommendations from a Smart Caddie. Covers 7 shot types per hole with full scorecard history.",
    tags: ["React Native", "Expo", "Zustand", "AI", "Mobile"],
    githubUrl: "https://github.com/lerko96/golf-book-mobile",
-    tier: "featured",
-    stats: "211 commits",
+    tier: "archive",
+    stats: "200+ commits",
+    statusBadge: "Pending App Store Approval",
+    year: 2025,
  },
-  {
-    slug: "plaiground",
-    title: "plAIground",
-    description:
-      "Cross-platform desktop AI chat app for developers. Supports OpenAI, Anthropic Claude, and Google Gemini in a single interface with real-time cost tracking, conversation export, and automatic code explanation.",
-    tags: ["Electron", "Node.js", "OpenAI", "Claude", "Gemini"],
-    githubUrl: "https://github.com/lerko96/plaiground",
-    tier: "featured",
-  },
-  {
-    slug: "service-monitor",
-    title: "service-monitor",
-    description:
-      "Web dashboard for tracking uptime across multiple services with 30-second polling, status history visualization, JWT-authenticated API, and Docker + nginx deployment.",
-    tags: ["React 18", "Vite", "Express", "SQLite", "Docker", "JWT"],
-    githubUrl: "https://github.com/lerko96/service-monitor",
-    tier: "featured",
-  },
-  {
-    slug: "tht-1.2",
-    title: "ThoughtSpace",
-    description:
-      "3D visualization platform for exploring and organizing thoughts using a radio-tuning metaphor. Filter ideas by frequency and bandwidth in an instanced Three.js scene with persistent local storage.",
-    tags: ["React", "TypeScript", "Three.js", "React Three Fiber", "Zustand"],
-    githubUrl: "https://github.com/lerko96/tht-1.2",
-    tier: "featured",
-  },
-
-  // --- Archive ---
  {
    slug: "twitter-thread-ext",
    title: "twitter-thread-ext",
@@ -58,7 +94,7 @@ export const projects: Project[] = [
    tags: ["Chrome Extension", "Manifest V3", "JavaScript", "jsPDF"],
    githubUrl: "https://github.com/lerko96/twitter-thread-ext",
    tier: "archive",
-    year: 2023,
+    year: 2025,
  },
  {
    slug: "notes-app-1.0",
@@ -68,7 +104,37 @@ export const projects: Project[] = [
    tags: ["HTML5 Canvas", "JavaScript", "CSS"],
    githubUrl: "https://github.com/lerko96/notes-app-1.0",
    tier: "archive",
-    year: 2022,
+    year: 2025,
+  },
+  {
+    slug: "plaiground",
+    title: "plAIground",
+    description:
+      "Cross-platform desktop AI chat app for developers. Supports OpenAI, Anthropic Claude, and Google Gemini in a single interface with real-time cost tracking, conversation export, and automatic code explanation.",
+    tags: ["Electron", "Node.js", "OpenAI", "Claude", "Gemini"],
+    githubUrl: "https://github.com/lerko96/plaiground",
+    tier: "archive",
+    year: 2025,
+  },
+  {
+    slug: "service-monitor",
+    title: "service-monitor",
+    description:
+      "Web dashboard for tracking uptime across multiple services with 30-second polling, status history visualization, JWT-authenticated API, and Docker + nginx deployment.",
+    tags: ["React 18", "Vite", "Express", "SQLite", "Docker", "JWT"],
+    githubUrl: "https://github.com/lerko96/service-monitor",
+    tier: "archive",
+    year: 2025,
+  },
+  {
+    slug: "tht-1.2",
+    title: "ThoughtSpace",
+    description:
+      "3D visualization platform for exploring and organizing thoughts using a radio-tuning metaphor. Filter ideas by frequency and bandwidth in an instanced Three.js scene with persistent local storage.",
+    tags: ["React", "TypeScript", "Three.js", "React Three Fiber", "Zustand"],
+    githubUrl: "https://github.com/lerko96/tht-1.2",
+    tier: "archive",
+    year: 2025,
  },
  {
    slug: "were-hooked",
@@ -78,7 +144,7 @@ export const projects: Project[] = [
    tags: ["Java", "Spring", "Thymeleaf", "HTML", "CSS"],
    githubUrl: "https://github.com/lerko96/were-hooked-repo",
    tier: "archive",
-    year: 2022,
+    year: 2021,
  },
  {
    slug: "mystery-educator",
@@ -88,7 +154,7 @@ export const projects: Project[] = [
    tags: ["JavaScript", "REST APIs", "HTML", "CSS"],
    githubUrl: "https://github.com/lerko96/mystery-educator",
    tier: "archive",
-    year: 2022,
+    year: 2021,
  },
 ];

@@ -7,10 +7,13 @@ export type Service = {

 export const services: Service[] = [
  // Infrastructure
-  { name: "pfSense", description: "Firewall, DHCP, routing, WireGuard VPN", category: "infrastructure", icon: "fas fa-shield-halved" },
+  { name: "pfSense", description: "Firewall, DHCP, routing gateway on N100", category: "infrastructure", icon: "fas fa-shield-halved" },
  { name: "Caddy", description: "Reverse proxy with automatic wildcard TLS via Cloudflare DNS-01", category: "infrastructure", icon: "fas fa-globe" },
  { name: "Pi-hole", description: "Network-wide DNS + ad blocking", category: "infrastructure", icon: "fas fa-filter" },
-  { name: "WireGuard", description: "VPN — 600–900 Mbps on N100, full LAN access for clients", category: "infrastructure", icon: "fas fa-lock" },
+  { name: "WireGuard", description: "VPN — full LAN access for remote clients", category: "infrastructure", icon: "fas fa-lock" },
+  { name: "mail relay", description: "Outbound SMTP relay for self-hosted service notifications", category: "infrastructure", icon: "fas fa-envelope" },
+  { name: "gluetun", description: "VPN container routing download client traffic", category: "infrastructure", icon: "fas fa-shield" },
+  { name: "Home Assistant", description: "Smart home automation and device management", category: "infrastructure", icon: "fas fa-house" },

  // Security / Auth
  { name: "Authentik", description: "SSO provider — OIDC + forward auth across all services", category: "security", icon: "fas fa-id-badge" },
@@ -34,11 +37,21 @@ export const services: Service[] = [
  { name: "Traggo", description: "Time tracking", category: "productivity", icon: "fas fa-clock" },
  { name: "Baikal", description: "CalDAV / CardDAV server", category: "productivity", icon: "fas fa-calendar" },
  { name: "Grist", description: "Spreadsheets and structured data", category: "productivity", icon: "fas fa-table" },
+  { name: "Glance", description: "Self-hosted start page with feeds and service status", category: "productivity", icon: "fas fa-gauge" },
+  { name: "Filebrowser", description: "Web-based file manager", category: "productivity", icon: "fas fa-folder-open" },

  // Media
-  { name: "Plex + Jellyfin", description: "Media streaming", category: "media", icon: "fas fa-film" },
-  { name: "Sonarr / Radarr / Lidarr", description: "Automated media management", category: "media", icon: "fas fa-download" },
-  { name: "Calibre-Web", description: "Book library with auto-ingest", category: "media", icon: "fas fa-book-open" },
+  { name: "Plex", description: "Media streaming — movies, TV, music", category: "media", icon: "fas fa-film" },
+  { name: "Jellyfin", description: "Open-source media streaming", category: "media", icon: "fas fa-play" },
+  { name: "Sonarr", description: "Automated TV show management", category: "media", icon: "fas fa-tv" },
+  { name: "Radarr", description: "Automated movie management", category: "media", icon: "fas fa-video" },
+  { name: "Lidarr", description: "Automated music management", category: "media", icon: "fas fa-music" },
+  { name: "Prowlarr", description: "Indexer manager and proxy for the *arr stack", category: "media", icon: "fas fa-magnifying-glass" },
+  { name: "Bazarr", description: "Automatic subtitle download and management", category: "media", icon: "fas fa-closed-captioning" },
+  { name: "nzbget", description: "Usenet downloader", category: "media", icon: "fas fa-download" },
+  { name: "qBittorrent", description: "Torrent client with web UI", category: "media", icon: "fas fa-magnet" },
+  { name: "Kavita", description: "Self-hosted manga and book reader", category: "media", icon: "fas fa-book-open" },
+  { name: "Openshelf", description: "Book library with auto-ingest", category: "media", icon: "fas fa-book-open" },
 ];

 export const categoryOrder: Service["category"][] = [
@@ -0,0 +1,127 @@
+export type TimelineType =
+  | "career"
+  | "cert"
+  | "project"
+  | "homelab"
+  | "education";
+
+export interface TimelineEntry {
+  date: string;
+  title: string;
+  type: TimelineType;
+  description: string;
+  tags?: string[];
+}
+
+export const timeline: TimelineEntry[] = [
+  {
+    date: "WIP",
+    title: "CompTIA Network+ — in progress",
+    type: "cert",
+    description:
+      "Studying for Network+ to formalize networking knowledge built through the homelab.",
+    tags: ["networking", "certification"],
+  },
+  {
+    date: "2026-04",
+    title: "Portfolio Site v2",
+    type: "project",
+    description:
+      "Next.js 16 portfolio site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
+    tags: ["next.js", "tailwind", "self-hosted"],
+  },
+  {
+    date: "2026-04",
+    title: "lerkolabs.com",
+    type: "homelab",
+    description:
+      "Self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
+    tags: ["LXC", "DMZ", "self-hosted"],
+  },
+  {
+    date: "2026-03",
+    title: "Helm",
+    type: "project",
+    description:
+      "Full-stack task and project management tool built in Go + React.",
+    tags: ["go", "react", "typescript"],
+  },
+  {
+    date: "2025",
+    title: "Proxmox Backup Server",
+    type: "homelab",
+    description: "Deployed PBS on used desktop hardware for disaster recovery.",
+    tags: ["backup", "recovery", "retention"],
+  },
+  {
+    date: "2025",
+    title: "Proxmox Cluster",
+    type: "homelab",
+    description:
+      "Proxmox installed on dedicated server and the fun begins. VMs/LXCs, SSO via Authentik, full monitoring stack (VictoriaMetrics + Grafana + Beszel + ntfy).",
+    tags: ["proxmox", "containers", "VMs", "linux"],
+  },
+  {
+    date: "2024-06",
+    title: "CompTIA A+",
+    type: "cert",
+    description:
+      "Earned A+ certification, formalizing hardware and OS fundamentals.",
+    tags: ["certification"],
+  },
+  {
+    date: "2024-03",
+    title: "pfSense",
+    type: "homelab",
+    description:
+      "Netgate 1100 picked up on ebay to experience hands on networking configuration and troubleshooting.",
+    tags: ["network", "firewall", "vlan", "dhcp"],
+  },
+  {
+    date: "2023-10",
+    title: "SOC Analyst I — Fortress SRM",
+    type: "career",
+    description:
+      "Threat monitoring, incident triage, and client-facing security operations in a managed SOC.",
+    tags: ["soc", "security"],
+  },
+  {
+    date: "2023-03",
+    title: "Config Tech II — MCPc",
+    type: "career",
+    description:
+      "Promoted to Config Tech II. Led imaging workflows and expanded into scripting for endpoint provisioning.",
+    tags: ["sysadmin", "scripting"],
+  },
+  {
+    date: "2022-11",
+    title: "PC Build",
+    type: "homelab",
+    description: "Sourced parts online and built a personal computer.",
+    tags: ["amd", "windows 10", "configure", "desktop"],
+  },
+  {
+    date: "2022-05",
+    title: "Config Tech I — MCPc",
+    type: "career",
+    description:
+      "Hardware configuration, OS imaging, and deployment at scale for enterprise clients.",
+    tags: ["sysadmin", "hardware"],
+  },
+  {
+    date: "2021-10",
+    title: "Portfolio Site v1",
+    type: "project",
+    description:
+      "React portfolio deployed to www.lerko96.github.io using github pages.",
+    tags: ["React", "CSS", "github pages"],
+  },
+  {
+    date: "2021-01",
+    title: "We Can Code IT — Java Bootcamp",
+    type: "education",
+    description:
+      "9-month intensive bootcamp covering Java, OOP, SQL, REST APIs, and Agile development practices.",
+    tags: ["java", "sql", "agile"],
+  },
+];
Author	SHA1	Message	Date
tyler	d34f9f136c	'feat(site): /projects consolidation, homelab copy pass, theme fix' (#6 ) Build and Deploy / deploy (push) Successful in 1m0s Details Reviewed-on: #6	2026-04-27 06:18:24 +00:00
lerko96	22660bed7a	fix(theme): unblock light mode in dev Hardcoded class="dark" on <html> meant React owned it via JSX. HMR re-renders and reconciliation kept restoring the class after classList.toggle removed it, so light toggle never stuck. ThemeScript already handles initial paint; suppressHydrationWarning covers the post-script class mismatch.	2026-04-27 00:49:57 -04:00
lerko96	7f614d28b5	feat(projects): consolidate /projects, hide skills, redirect /archive - /projects: merged page with featured (top) + archive (bottom) - titles mirror homelab pattern: projects/featured, projects/archive - nav: archive → projects - home: drop Skills section and featured grid - /archive → /projects via meta-refresh + JS redirect stub	2026-04-27 00:49:52 -04:00
lerko96	e9d7a994c7	chore(content): refresh projects + timeline - featured: swap helm → nib, drop claude-vault, reorder - helm → archive - homelab description: 7 VLANs + Wireguard VPN (matches access-tier framing) - timeline: add Proxmox Backup Server 2025; pfSense entry corrected to Netgate 1100	2026-04-27 00:49:47 -04:00
lerko96	f6118aa7a4	refactor(homelab): rename VLAN col to Segment for VPN row VPN is an L3 tunnel, not an 802.1Q VLAN. Reframes the table as network segments / access tiers so the VPN row is consistent with the others.	2026-04-27 00:49:42 -04:00
lerko96	5dea6121a3	docs(homelab): trim operational detail from network table and ADRs Pure copy edit. Page now publishes the reasoning behind decisions, not the operational specifics (IPs, subnets, ports, hardware fingerprints, build pipeline mechanics). Reasoning preserved in every ADR. - VLAN table: drop Subnet column; replace numeric VLAN IDs with tier names - ISP gateway ADR: drop carrier and gateway model - Caddy ADR: tighten DNS-01 framing to internal-services exposure; SSL → TLS - WireGuard ADR: drop port, VPN subnet, throughput numbers, tier enumeration - Pi-hole ADR: drop host IP and VLAN ID; sharpen trade-off - N100 ADR: drop core/clock and precise throughput; rename to "Mini-PC" - Postgres+Redis ADR: drop apps LXC IP - Gitea CI/CD ADR: drop runner version, build image, host IPs, deploy mechanics - Authentik ADR: unchanged	2026-04-26 23:19:16 -04:00
tyler	4e51dd4a83	feat/polish (#5 ) Build and Deploy / deploy (push) Successful in 51s Details Reorder homepage sections (journey above projects), refine component styles, update copy and data across projects, timeline, and homelab. Reviewed-on: #5	2026-04-20 00:34:50 +00:00
tyler	8e9fcfaeeb	Merge pull request 'feat(content): reposition for security engineer, expand services' (#4 ) from feat/timeline into dev Build and Deploy / deploy (push) Successful in 1m11s Details Reviewed-on: #4	2026-04-17 01:24:22 +00:00
lerko96	2946801517	ci: auto-tag CalVer after deploy if commit untagged	2026-04-16 21:16:01 -04:00
lerko96	49028e7783	feat(content): reposition for security engineer, expand services to 37 Hero subtitle and blurb rewritten to lead with security operations and homelab credentials over generic "builder" framing. Projects: archive plAIground, service-monitor, ThoughtSpace (2025); add open-pact and helm as featured; add risk-ops to archive (2026). Add statusBadge + externalUrl to Project type; wire golf-book-mobile. Services: 24 → 37 — split grouped arr/media entries, add mail relay, gluetun, Home Assistant, Glance, Filebrowser, Prowlarr, Bazarr, nzbget, qBittorrent, Kavita, Openshelf. Drop Calibre-Web. Skills: add Go to Languages. Timeline: update monitoring stack. Homelab ADRs: add Authentik over Authelia.	2026-04-16 21:06:18 -04:00
lerko96	c36cc94437	feat(ui): add timeline component; complete terminal-noir design system - introduce Timeline component with scroll-in animation and type-colored spine dots (career/edu/cert/project/homelab) - swap terminal-noir palette for macOS Classic dark/light with matching timeline color tokens in globals.css - add light mode overrides, cursor blink keyframe, font-size 14px base - update Widget header: prefix/name split, bracket badge, no divider rule - align archive and homelab page headers to ❯ prompt style - convert all font-sans prose in homelab/archive to font-mono - rename widget titles to namespaced paths (homelab/network, etc.) - skills label: uppercase tracking → plain text-sm; remove row borders	2026-04-16 18:03:33 -04:00
lerko96	6d0b4e29d8	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	2026-04-16 18:01:19 -04:00
lerko96	7d9b300d84	ci: add GitHub Actions deploy workflow for GitHub Pages Build and Deploy / deploy (push) Successful in 1m1s Details	2026-04-12 22:11:57 -04:00
tyler	4718d5df31	Merge pull request 'fix(docs): update Gitea repo URL to lerko/portfolio' (#3 ) from docs/update-readme-gitea-primary into dev Build and Deploy / deploy (push) Successful in 1m4s Details Reviewed-on: #3	2026-04-13 01:49:21 +00:00
lerko96	153bdf502c	fix(docs): update Gitea repo URL to lerko/portfolio	2026-04-12 21:47:52 -04:00