From 088a06a51c9cda98cacbb92c5d9c8fc78ef8afde Mon Sep 17 00:00:00 2001
From: lerko96 <dev@tkoenig.simplelogin.com>
Date: Sun, 12 Apr 2026 19:23:50 -0400
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20terminal-noir=20redesign=20?=
 =?UTF-8?q?=E2=80=94=20widget=20system=20+=20design=20token=20overhaul?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace cyan-green modern theme with terminal-noir aesthetic aligned to
style-guide.md. Hard edges, monospace-first, linear transitions, no gradients.

Introduce Widget component as the single repeatable section primitive:
title bar with horizontal rule, optional badge/meta — all pages and
sections now use this pattern (Glance-inspired data-driven layout).

Design system changes (globals.css):
- Palette: #0a0a0a bg, #111111 surface, #00cc44 status green, #cc2200 alert red
- Drop Montserrat; Source Code Pro primary, system sans for prose only
- Transitions: linear 120ms; no eased animations, no border-radius

Component changes:
- Nav: flat, border-bottom only, lowercase links
- Hero: 56px square photo, status dot, @ email glyph
- ProjectCard: flat bordered card, 2-col grid, no gradient tile
- Skills: key-value rows with dot-separated values
- Footer: minimal text links

Pages: all sections wrapped in Widget; homelab uses gap-px grid for
at-a-glance, services, and ADRs sections. Archive uses flat list layout.

Data: remove gradient field from Project type; add optional year field
---
 src/app/archive/page.tsx       |  94 ++++++++------
 src/app/globals.css            |  56 ++++-----
 src/app/homelab/page.tsx       | 224 +++++++++++++++++----------------
 src/app/layout.tsx             |  14 +--
 src/app/page.tsx               |  22 ++--
 src/components/Footer.tsx      |  25 ++--
 src/components/Hero.tsx        | 107 +++++++++-------
 src/components/Nav.tsx         |  57 ++++-----
 src/components/ProjectCard.tsx |  77 +++++-------
 src/components/Skills.tsx      |  44 +++----
 src/components/Widget.tsx      |  39 ++++++
 src/data/projects.ts           |  14 +--
 12 files changed, 396 insertions(+), 377 deletions(-)
 create mode 100644 src/components/Widget.tsx

diff --git a/src/app/archive/page.tsx b/src/app/archive/page.tsx
index 9fd15070..d2e11e6b 100644
--- a/src/app/archive/page.tsx
+++ b/src/app/archive/page.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import Widget from "@/components/Widget";
 import { archiveProjects } from "@/data/projects";
 
 export const metadata: Metadata = {
@@ -9,51 +10,64 @@ export const metadata: Metadata = {
 export default function ArchivePage() {
   return (
     <>
-      <div className="mb-14">
-        <p className="font-mono text-xs text-[var(--color-green)] tracking-widest uppercase mb-2">
-          Archive
-        </p>
-        <h1 className="font-mono text-2xl font-bold text-[var(--color-text-light)] mb-4">
+      <div className="mb-12">
+        <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="text-[var(--color-grey-3)] text-sm leading-relaxed max-w-xl">
-          Experiments, browser extensions, and bootcamp projects. Kept here for context — not representative of current work.
+        <p className="font-sans text-sm text-[var(--color-text-label)] leading-relaxed max-w-xl">
+          Experiments, browser extensions, and bootcamp projects. Kept here for context — not
+          representative of current work.
         </p>
       </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
-        {archiveProjects.map((project) => (
-          <a
-            key={project.slug}
-            href={project.githubUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="group border border-[var(--color-grey-1)] rounded-lg p-6 bg-[var(--color-bg)] hover:border-[var(--color-green-darker)] transition-colors flex flex-col gap-4"
-          >
-            <div className="flex items-start justify-between gap-2">
-              <h2 className="font-mono text-sm font-semibold text-[var(--color-text-light)] group-hover:text-[var(--color-green)] transition-colors">
-                {project.title}
-              </h2>
-              <i className="fas fa-arrow-up-right-from-square text-xs text-[var(--color-grey-2)] shrink-0 mt-0.5 group-hover:text-[var(--color-green)] transition-colors" aria-hidden="true" />
-            </div>
-
-            <p className="text-xs text-[var(--color-grey-3)] leading-relaxed flex-1">
-              {project.description}
-            </p>
-
-            <div className="flex flex-wrap gap-1.5">
-              {project.tags.map((tag) => (
-                <span
-                  key={tag}
-                  className="font-mono text-xs px-2 py-0.5 border border-[var(--color-grey-1)] text-[var(--color-grey-2)] rounded"
-                >
-                  {tag}
-                </span>
-              ))}
-            </div>
-          </a>
-        ))}
-      </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-xs text-[var(--color-text)] group-hover:text-[var(--color-accent-green)] truncate">
+                    {project.title}
+                  </span>
+                </div>
+                <p className="font-sans text-xs text-[var(--color-text-dim)] leading-relaxed">
+                  {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>
     </>
   );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index 0bbd46a7..e4d300f4 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,59 +3,40 @@
 @variant dark (&:where(.dark, .dark *));
 
 @theme {
-  /* Colors */
-  --color-green: #2bf3c4;
-  --color-green-dark: #27bb98;
-  --color-green-darker: #238770;
-  --color-green-darkest: #1f4b40;
-
-  --color-bg: #272727;
-  --color-bg-deep: #1b1b1b;
-  --color-surface: #333333;
-
-  --color-grey-1: #4b4b4b;
-  --color-grey-2: #707171;
-  --color-grey-3: #999a9a;
-  --color-grey-4: #c5c6c6;
-
-  --color-text: #c5c6c6;
-  --color-text-muted: #999a9a;
-  --color-text-light: #f7f9fb;
+  /* 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;
 
   /* Typography */
   --font-mono: "Source Code Pro", ui-monospace, monospace;
-  --font-sans: "Montserrat", ui-sans-serif, system-ui, sans-serif;
+  --font-sans: ui-sans-serif, system-ui, sans-serif;
 
   /* Breakpoints */
   --breakpoint-xs: 576px;
 
   /* Animations */
-  --animate-fade-in: fadeIn 0.6s ease forwards;
-  --animate-slide-up: slideUp 0.5s ease forwards;
-  --animate-app-scale: appScale 0.4s ease forwards;
+  --animate-fade-in: fadeIn 120ms linear forwards;
 
   @keyframes fadeIn {
     from { opacity: 0; }
     to   { opacity: 1; }
   }
-
-  @keyframes slideUp {
-    from { opacity: 0; transform: translateY(20px); }
-    to   { opacity: 1; transform: translateY(0); }
-  }
-
-  @keyframes appScale {
-    from { transform: scale(0.97); opacity: 0; }
-    to   { transform: scale(1);    opacity: 1; }
-  }
 }
 
 /* Base */
 html {
   scroll-behavior: smooth;
-  background-color: var(--color-bg-deep);
+  background-color: var(--color-bg);
   color: var(--color-text);
-  font-family: var(--font-sans);
+  font-family: var(--font-mono);
 }
 
 * {
@@ -64,6 +45,13 @@ html {
   padding: 0;
 }
 
+/* Default transitions — linear, fast */
+a,
+button {
+  transition: color 120ms linear, border-color 120ms linear,
+    background-color 120ms linear, opacity 120ms linear;
+}
+
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
     animation-duration: 0.01ms !important;
diff --git a/src/app/homelab/page.tsx b/src/app/homelab/page.tsx
index 0b6f7c46..6ae318d2 100644
--- a/src/app/homelab/page.tsx
+++ b/src/app/homelab/page.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import Widget from "@/components/Widget";
 import { services, categoryOrder, categoryLabels } from "@/data/services";
 
 export const metadata: Metadata = {
@@ -7,15 +8,27 @@ export const metadata: Metadata = {
     "Production-grade personal homelab: Proxmox, pfSense, 8 VLANs, WireGuard, Caddy, Authentik SSO, and 20+ self-hosted services.",
 };
 
+const glanceStats = [
+  { label: "Hypervisor", value: "Proxmox VE" },
+  { label: "Firewall", value: "pfSense (Intel N100)" },
+  { 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: "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: "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" },
 ];
 
 const adrs = [
@@ -58,8 +71,8 @@ const adrs = [
   {
     title: "Gitea CI/CD: Self-hosted runner with container build + SSH rsync 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. Runner WorkingDirectory=/opt/docker/gitea. Feature branches for daily work; merge to dev to deploy.",
-    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. Runner must be registered with the LXC IP (10.99.0.22:3000), not localhost — containers can't resolve localhost to the host. The .runner file must live in WorkingDirectory or the daemon crashes on start.",
+      "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.",
   },
 ];
 
@@ -67,115 +80,116 @@ export default function HomelabPage() {
   return (
     <>
       {/* Header */}
-      <div className="mb-16">
-        <p className="font-mono text-xs text-[var(--color-green)] tracking-widest uppercase mb-2">
-          lerkolabs
-        </p>
-        <h1 className="font-mono text-2xl font-bold text-[var(--color-text-light)] mb-4">
+      <div className="mb-12">
+        <div className="flex items-center gap-3 mb-4">
+          <span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
+            lerkolabs
+          </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="text-[var(--color-grey-3)] text-sm 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 className="font-sans text-sm 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>
 
-      {/* At a glance */}
-      <section className="mb-16" aria-labelledby="glance-heading">
-        <h2
-          id="glance-heading"
-          className="font-mono text-xs text-[var(--color-green)] tracking-widest uppercase mb-6"
-        >
-          At a Glance
-        </h2>
-        <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-4">
-          {[
-            { label: "Hypervisor", value: "Proxmox VE" },
-            { label: "Firewall", value: "pfSense (Intel N100)" },
-            { 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" },
-          ].map(({ label, value }) => (
+      {/* At a Glance */}
+      <Widget title="at a glance" 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="border border-[var(--color-grey-1)] rounded-lg p-4 bg-[var(--color-bg)]"
+              className="bg-[var(--color-surface)] px-4 py-3"
             >
-              <p className="font-mono text-xs text-[var(--color-grey-2)] mb-1">{label}</p>
-              <p className="font-mono text-sm text-[var(--color-text-light)]">{value}</p>
+              <p className="font-mono text-xs text-[var(--color-text-dim)] uppercase tracking-wider mb-1">
+                {label}
+              </p>
+              <p className="font-mono text-xs text-[var(--color-text)]">{value}</p>
             </div>
           ))}
         </div>
-      </section>
+      </Widget>
 
       {/* VLAN table */}
-      <section className="mb-16" aria-labelledby="network-heading">
-        <h2
-          id="network-heading"
-          className="font-mono text-xs text-[var(--color-green)] tracking-widest uppercase mb-6"
-        >
-          Network — 8 Isolated VLANs
-        </h2>
-        <p className="text-xs text-[var(--color-grey-3)] mb-4">
-          Default deny inter-VLAN policy. Each VLAN has explicit firewall rules for what it can reach.
-        </p>
+      <Widget
+        title="network"
+        meta="8 isolated vlans · default deny inter-vlan"
+        as="section"
+      >
         <div className="overflow-x-auto">
-          <table className="w-full text-sm border-collapse">
+          <table className="w-full text-xs border-collapse">
             <thead>
-              <tr className="border-b border-[var(--color-grey-1)]">
-                <th className="font-mono text-xs text-[var(--color-grey-2)] text-left py-2 pr-4 uppercase tracking-wider">VLAN</th>
-                <th className="font-mono text-xs text-[var(--color-grey-2)] text-left py-2 pr-4 uppercase tracking-wider">Name</th>
-                <th className="font-mono text-xs text-[var(--color-grey-2)] text-left py-2 pr-4 uppercase tracking-wider">Subnet</th>
-                <th className="font-mono text-xs text-[var(--color-grey-2)] text-left py-2 uppercase tracking-wider">Purpose</th>
+              <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>
+                <th className="font-mono text-[var(--color-text-dim)] text-left py-2 pr-6 uppercase tracking-wider">
+                  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">
+                  Purpose
+                </th>
               </tr>
             </thead>
             <tbody>
               {vlans.map((v) => (
-                <tr key={v.id} className="border-b border-[var(--color-grey-1)] border-opacity-30 hover:bg-[var(--color-bg)] transition-colors">
-                  <td className="font-mono text-xs text-[var(--color-green)] py-2.5 pr-4">{v.id}</td>
-                  <td className="font-mono text-sm text-[var(--color-text-light)] py-2.5 pr-4">{v.name}</td>
-                  <td className="font-mono text-xs text-[var(--color-grey-3)] py-2.5 pr-4">{v.subnet}</td>
-                  <td className="text-xs text-[var(--color-grey-3)] py-2.5">{v.purpose}</td>
+                <tr
+                  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">
+                    {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>
+                  <td className="font-sans text-[var(--color-text-label)] py-2.5">{v.purpose}</td>
                 </tr>
               ))}
             </tbody>
           </table>
         </div>
-      </section>
+      </Widget>
 
       {/* Services */}
-      <section className="mb-16" aria-labelledby="services-heading">
-        <h2
-          id="services-heading"
-          className="font-mono text-xs text-[var(--color-green)] tracking-widest uppercase mb-6"
-        >
-          Self-Hosted Services
-        </h2>
+      <Widget
+        title="services"
+        badge={services.length}
+        as="section"
+      >
         <div className="flex flex-col gap-8">
           {categoryOrder.map((cat) => {
             const catServices = services.filter((s) => s.category === cat);
             return (
               <div key={cat}>
-                <h3 className="font-mono text-xs text-[var(--color-grey-2)] uppercase tracking-wider mb-3">
+                <p className="font-mono text-xs text-[var(--color-text-dim)] uppercase tracking-wider mb-3">
                   {categoryLabels[cat]}
-                </h3>
-                <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-3">
+                </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="flex items-start gap-3 border border-[var(--color-grey-1)] rounded-lg p-4 bg-[var(--color-bg)] hover:border-[var(--color-green-darker)] transition-colors"
+                      className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start gap-3 px-4 py-3"
                     >
                       <i
-                        className={`${svc.icon} text-[var(--color-green)] text-sm mt-0.5 w-4 shrink-0`}
+                        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-light)] mb-0.5">{svc.name}</p>
-                        <p className="text-xs text-[var(--color-grey-2)] leading-relaxed">{svc.description}</p>
+                        <p className="font-mono text-xs text-[var(--color-text)] mb-0.5">
+                          {svc.name}
+                        </p>
+                        <p className="font-sans text-xs text-[var(--color-text-dim)] leading-relaxed">
+                          {svc.description}
+                        </p>
                       </div>
                     </div>
                   ))}
@@ -184,52 +198,48 @@ export default function HomelabPage() {
             );
           })}
         </div>
-      </section>
+      </Widget>
 
       {/* ADRs */}
-      <section className="mb-16" aria-labelledby="adr-heading">
-        <h2
-          id="adr-heading"
-          className="font-mono text-xs text-[var(--color-green)] tracking-widest uppercase mb-2"
-        >
-          Architecture Decisions
-        </h2>
-        <p className="text-xs text-[var(--color-grey-3)] mb-6">
-          Short-form ADRs — why things are configured the way they are.
-        </p>
-        <div className="flex flex-col gap-5">
+      <Widget
+        title="architecture decisions"
+        meta="why things are configured the way they are"
+        badge={adrs.length}
+        as="section"
+      >
+        <div className="flex flex-col gap-px bg-[var(--color-border)]">
           {adrs.map((adr) => (
             <div
               key={adr.title}
-              className="border border-[var(--color-grey-1)] rounded-lg p-5 bg-[var(--color-bg)] hover:border-[var(--color-green-darker)] transition-colors"
+              className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-4 py-4"
             >
-              <h3 className="font-mono text-sm text-[var(--color-text-light)] mb-2">{adr.title}</h3>
-              <p className="text-xs text-[var(--color-grey-3)] leading-relaxed mb-2">
-                <span className="text-[var(--color-grey-2)]">Decision: </span>{adr.decision}
+              <p className="font-mono text-xs text-[var(--color-text)] mb-2">{adr.title}</p>
+              <p className="font-sans text-xs text-[var(--color-text-dim)] leading-relaxed mb-1.5">
+                <span className="text-[var(--color-text-label)]">decision: </span>
+                {adr.decision}
               </p>
-              <p className="text-xs text-[var(--color-grey-3)] leading-relaxed">
-                <span className="text-[var(--color-grey-2)]">Why: </span>{adr.why}
+              <p className="font-sans text-xs text-[var(--color-text-dim)] leading-relaxed">
+                <span className="text-[var(--color-text-label)]">why: </span>
+                {adr.why}
               </p>
             </div>
           ))}
         </div>
-      </section>
+      </Widget>
 
       {/* GitHub CTA */}
-      <section className="border border-[var(--color-grey-1)] rounded-lg p-6 bg-[var(--color-bg)] flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
-        <div>
-          <p className="font-mono text-sm text-[var(--color-text-light)] mb-1">lerkolabs on GitHub</p>
-          <p className="text-xs text-[var(--color-grey-3)]">
-            Full documentation: VLAN maps, runbooks, service registry, config exports, and setup guides.
-          </p>
-        </div>
+      <section className="border-t border-[var(--color-border)] pt-6">
+        <p className="font-mono text-xs text-[var(--color-text-label)] mb-1">lerkolabs on GitHub</p>
+        <p className="font-sans text-xs text-[var(--color-text-dim)] mb-3">
+          Full documentation: VLAN maps, runbooks, service registry, config exports, and setup guides.
+        </p>
         <a
           href="https://github.com/lerko96/homelab-wip"
           target="_blank"
           rel="noopener noreferrer"
-          className="shrink-0 font-mono text-xs px-4 py-2 border border-[var(--color-green-darker)] text-[var(--color-green)] rounded hover:bg-[var(--color-green-darkest)] transition-colors"
+          className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
         >
-          View repo <i className="fas fa-arrow-up-right-from-square ml-1 text-xs" aria-hidden="true" />
+          ↗ github.com/lerko96/homelab-wip
         </a>
       </section>
     </>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ceee9def..8eb2e206 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,17 +1,11 @@
 import type { Metadata } from "next";
-import { Montserrat, Source_Code_Pro } from "next/font/google";
+import { Source_Code_Pro } from "next/font/google";
 import "./globals.css";
 import ThemeScript from "@/components/ThemeScript";
 import Nav from "@/components/Nav";
 import Footer from "@/components/Footer";
 import { ThemeProvider } from "@/context/ThemeContext";
 
-const montserrat = Montserrat({
-  subsets: ["latin"],
-  variable: "--font-sans",
-  display: "swap",
-});
-
 const sourceCodePro = Source_Code_Pro({
   subsets: ["latin"],
   variable: "--font-mono",
@@ -19,7 +13,7 @@ const sourceCodePro = Source_Code_Pro({
 });
 
 export const metadata: Metadata = {
-  title: "Tyler Koenig | Portfolio",
+  title: "Tyler Koenig",
   description:
     "SOC Helpdesk I by day, building beyond the title. Projects in AI tooling, mobile apps, infrastructure, and more.",
 };
@@ -41,11 +35,11 @@ export default function RootLayout({
         />
       </head>
       <body
-        className={`${montserrat.variable} ${sourceCodePro.variable} bg-[var(--color-bg-deep)] text-[var(--color-text)] font-sans min-h-screen`}
+        className={`${sourceCodePro.variable} bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen`}
       >
         <ThemeProvider>
           <Nav />
-          <main className="max-w-5xl mx-auto px-6 py-16">
+          <main className="max-w-5xl mx-auto px-6 py-14">
             {children}
           </main>
           <Footer />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 08e3e4c5..5f6bbc5c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,10 +2,11 @@ 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";
 
 export const metadata: Metadata = {
-  title: "Tyler Koenig | Portfolio",
+  title: "Tyler Koenig",
   description:
     "SOC Helpdesk I by day, building beyond the title. Projects in AI tooling, mobile apps, infrastructure, and more.",
 };
@@ -15,18 +16,13 @@ export default function Home() {
     <>
       <Hero />
       <Skills />
-
-      <section aria-labelledby="projects-heading">
-        <h2
-          id="projects-heading"
-          className="font-mono text-xs text-[var(--color-green)] tracking-widest uppercase mb-10"
-        >
-          Projects
-        </h2>
-        {featuredProjects.map((project, i) => (
-          <ProjectCard key={project.slug} project={project} reversed={i % 2 !== 0} />
-        ))}
-      </section>
+      <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>
     </>
   );
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 0224afbe..2c1e1416 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,35 +1,30 @@
 export default function Footer() {
   return (
-    <footer className="border-t border-[var(--color-grey-1)] py-8 mt-16">
-      <div className="max-w-5xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
-        <p className="font-mono text-xs text-[var(--color-grey-2)] tracking-widest">
+    <footer className="border-t border-[var(--color-border)] py-5 mt-8">
+      <div className="max-w-5xl mx-auto px-6 flex items-center justify-between">
+        <span className="font-mono text-xs text-[var(--color-text-dim)]">
           &copy; {new Date().getFullYear()} Tyler Koenig
-        </p>
+        </span>
         <div className="flex items-center gap-5">
           <a
             href="https://github.com/lerko96"
             target="_blank"
             rel="noopener noreferrer"
             aria-label="GitHub"
-            className="text-[var(--color-grey-2)] hover:text-[var(--color-green)] transition-colors"
+            className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
           >
-            <i className="fab fa-github text-lg" aria-hidden="true" />
+            <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="text-[var(--color-grey-2)] hover:text-[var(--color-green)] transition-colors"
+            className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
           >
-            <i className="fab fa-linkedin text-lg" aria-hidden="true" />
-          </a>
-          <a
-            href="mailto:tylerkoenig96@gmail.com"
-            aria-label="Email"
-            className="text-[var(--color-grey-2)] hover:text-[var(--color-green)] transition-colors"
-          >
-            <i className="fas fa-envelope text-lg" aria-hidden="true" />
+            <i className="fab fa-linkedin mr-1.5" aria-hidden="true" />
+            linkedin
           </a>
         </div>
       </div>
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 0d625635..449dd74c 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -2,61 +2,74 @@ import Image from "next/image";
 
 export default function Hero() {
   return (
-    <section className="flex flex-col sm:flex-row items-center sm:items-start gap-8 mb-20">
-      <div className="shrink-0">
+    <section className="mb-12">
+      {/* 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={120}
-          height={120}
-          className="rounded-full border-2 border-[var(--color-green-darker)]"
+          width={56}
+          height={56}
+          className="shrink-0 object-cover"
           priority
         />
-      </div>
 
-      <div className="flex flex-col gap-4 text-center sm:text-left">
-        <div>
-          <h1 className="font-mono text-2xl font-bold text-[var(--color-text-light)] tracking-wide">
-            Tyler Koenig
-          </h1>
-          <p className="font-mono text-sm text-[var(--color-green)] tracking-widest uppercase mt-1">
-            SOC Helpdesk I by day, building beyond the title
+        <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-label)] leading-relaxed max-w-lg">
+            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>
 
-        <p className="text-[var(--color-grey-3)] text-sm leading-relaxed max-w-lg">
-          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 items-center gap-5 justify-center sm:justify-start">
-          <a
-            href="https://github.com/lerko96"
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="GitHub"
-            className="text-[var(--color-grey-2)] hover:text-[var(--color-green)] transition-colors"
-          >
-            <i className="fab fa-github text-xl" aria-hidden="true" />
-          </a>
-          <a
-            href="https://www.linkedin.com/in/tyler-koenig"
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="LinkedIn"
-            className="text-[var(--color-grey-2)] hover:text-[var(--color-green)] transition-colors"
-          >
-            <i className="fab fa-linkedin text-xl" aria-hidden="true" />
-          </a>
-          <a
-            href="mailto:tylerkoenig96@gmail.com"
-            aria-label="Email"
-            className="text-[var(--color-grey-2)] hover:text-[var(--color-green)] transition-colors"
-          >
-            <i className="fas fa-envelope text-xl" aria-hidden="true" />
-          </a>
+          <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
+            </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>
         </div>
       </div>
     </section>
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index b22978a1..5fe893ac 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -3,48 +3,45 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
-
 const links = [
-  { href: "/", label: "Home" },
-  { href: "/homelab/", label: "Homelab" },
-  { href: "/archive/", label: "Archive" },
+  { href: "/", label: "home" },
+  { href: "/homelab/", label: "homelab" },
+  { href: "/archive/", label: "archive" },
 ];
 
 export default function Nav() {
   const pathname = usePathname();
   return (
-    <header className="sticky top-0 z-50 bg-[var(--color-bg-deep)] border-b border-[var(--color-grey-1)]">
-      <nav className="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
+    <header className="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
+      <nav className="max-w-5xl mx-auto px-6 h-11 flex items-center justify-between">
         <Link
           href="/"
-          className="font-mono text-xl font-bold text-[var(--color-green)] tracking-widest hover:opacity-80 transition-opacity"
+          className="font-mono text-sm font-bold text-[var(--color-text)] tracking-widest hover:text-[var(--color-text-label)]"
         >
           tk
         </Link>
 
-        <div className="flex items-center gap-6">
-          <ul className="flex gap-6">
-            {links.map(({ href, label }) => {
-              const active = pathname === href || pathname === href.replace(/\/$/, "");
-              return (
-                <li key={href}>
-                  <Link
-                    href={href}
-                    aria-current={active ? "page" : undefined}
-                    className={`text-xs font-mono tracking-widest uppercase transition-colors ${
-                      active
-                        ? "text-[var(--color-green)]"
-                        : "text-[var(--color-grey-3)] hover:text-[var(--color-grey-4)]"
-                    }`}
-                  >
-                    {label}
-                  </Link>
-                </li>
-              );
-            })}
-          </ul>
-
-        </div>
+        <ul className="flex gap-6">
+          {links.map(({ href, label }) => {
+            const active =
+              pathname === href || pathname === href.replace(/\/$/, "");
+            return (
+              <li key={href}>
+                <Link
+                  href={href}
+                  aria-current={active ? "page" : undefined}
+                  className={`font-mono text-xs tracking-widest ${
+                    active
+                      ? "text-[var(--color-text)]"
+                      : "text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+                  }`}
+                >
+                  {label}
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
       </nav>
     </header>
   );
diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
index 788fbaa3..cc42fcdf 100644
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -2,67 +2,48 @@ import type { Project } from "@/data/projects";
 
 type Props = {
   project: Project;
-  reversed?: boolean;
 };
 
-export default function ProjectCard({ project, reversed = false }: Props) {
+export default function ProjectCard({ project }: Props) {
   return (
-    <article className={`group flex flex-col ${reversed ? "sm:flex-row-reverse" : "sm:flex-row"} gap-6 mb-16`}>
-      {/* Gradient image tile */}
-      <a
-        href={project.githubUrl}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="shrink-0 sm:w-56 h-36 rounded-lg overflow-hidden"
-        aria-label={`View ${project.title} on GitHub`}
-        tabIndex={-1}
-      >
-        <div
-          className={`w-full h-full bg-gradient-to-br ${project.gradient} flex items-center justify-center transition-transform duration-300 group-hover:scale-105`}
+    <article className="border border-[var(--color-border)] bg-[var(--color-surface)] hover:border-[var(--color-border-bright)] flex flex-col gap-3 p-4">
+      <div className="flex items-start justify-between gap-3">
+        <a
+          href={project.githubUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="font-mono text-sm font-semibold text-[var(--color-text)] hover:text-[var(--color-accent-green)]"
         >
-          <span className="font-mono text-xs text-[var(--color-green)] opacity-60 tracking-widest">
-            {project.slug}
-          </span>
-        </div>
-      </a>
-
-      {/* Content */}
-      <div className={`flex flex-col justify-center gap-3 ${reversed ? "sm:text-right sm:items-end" : ""}`}>
-        {/* Animated accent bar */}
-        <div
-          className={`h-0.5 w-8 bg-[var(--color-grey-1)] rounded-full transition-all duration-300 group-hover:w-16 group-hover:bg-[var(--color-green-darker)] ${reversed ? "self-end" : ""}`}
-        />
-
-        <div>
+          {project.title}
+        </a>
+        <div className="flex items-center gap-3 shrink-0">
+          {project.stats && (
+            <span className="font-mono text-xs text-[var(--color-text-dim)]">
+              {project.stats}
+            </span>
+          )}
           <a
             href={project.githubUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="font-mono text-base font-semibold text-[var(--color-text-light)] hover:text-[var(--color-green)] transition-colors"
+            aria-label={`View ${project.title} on GitHub`}
+            className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
           >
-            {project.title}
+            ↗
           </a>
-          {project.stats && (
-            <span className="font-mono text-xs text-[var(--color-green)] ml-3 opacity-70">
-              {project.stats}
-            </span>
-          )}
         </div>
+      </div>
 
-        <p className="text-sm text-[var(--color-grey-3)] leading-relaxed max-w-md">
-          {project.description}
-        </p>
+      <p className="font-sans text-xs text-[var(--color-text-label)] leading-relaxed flex-1">
+        {project.description}
+      </p>
 
-        <div className={`flex flex-wrap gap-2 ${reversed ? "justify-end" : ""}`}>
-          {project.tags.map((tag) => (
-            <span
-              key={tag}
-              className="font-mono text-xs px-2 py-0.5 border border-[var(--color-grey-1)] text-[var(--color-grey-2)] rounded"
-            >
-              {tag}
-            </span>
-          ))}
-        </div>
+      <div className="flex flex-wrap gap-x-3 gap-y-1 pt-2 border-t border-[var(--color-border)]">
+        {project.tags.map((tag) => (
+          <span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]">
+            {tag}
+          </span>
+        ))}
       </div>
     </article>
   );
diff --git a/src/components/Skills.tsx b/src/components/Skills.tsx
index 05394a0f..f176c3e0 100644
--- a/src/components/Skills.tsx
+++ b/src/components/Skills.tsx
@@ -1,11 +1,13 @@
+import Widget from "@/components/Widget";
+
 const skillGroups = [
   {
     label: "Languages",
     skills: ["JavaScript", "TypeScript", "HTML", "CSS"],
   },
   {
-    label: "Frontend & Mobile",
-    skills: ["React", "React Native", "Expo", "Next.js", "Three.js", "Responsive Design"],
+    label: "Frontend",
+    skills: ["React", "React Native", "Expo", "Next.js", "Three.js"],
   },
   {
     label: "Desktop & Tools",
@@ -21,34 +23,28 @@ const skillGroups = [
   },
 ];
 
+const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);
+
 export default function Skills() {
   return (
-    <section className="mb-20" aria-labelledby="skills-heading">
-      <h2
-        id="skills-heading"
-        className="font-mono text-xs text-[var(--color-green)] tracking-widest uppercase mb-8"
-      >
-        Skills
-      </h2>
-      <div className="flex flex-col gap-5">
-        {skillGroups.map(({ label, skills }) => (
-          <div key={label} className="flex flex-col xs:flex-row gap-2 xs:items-start">
-            <span className="font-mono text-xs text-[var(--color-grey-2)] w-36 shrink-0 pt-0.5">
+    <Widget title="skills" badge={totalCount} as="section">
+      <div className="flex flex-col">
+        {skillGroups.map(({ label, skills }, i) => (
+          <div
+            key={label}
+            className={`flex flex-col xs:flex-row gap-1 xs:gap-6 py-3 ${
+              i < skillGroups.length - 1 ? "border-b border-[var(--color-border)]" : ""
+            }`}
+          >
+            <span className="font-mono text-xs text-[var(--color-text-dim)] w-28 shrink-0 uppercase tracking-wider">
               {label}
             </span>
-            <div className="flex flex-wrap gap-2">
-              {skills.map((skill) => (
-                <span
-                  key={skill}
-                  className="text-xs font-mono px-3 py-1 border border-[var(--color-grey-1)] text-[var(--color-grey-3)] rounded hover:border-[var(--color-green-darker)] hover:text-[var(--color-grey-4)] transition-colors"
-                >
-                  {skill}
-                </span>
-              ))}
-            </div>
+            <span className="font-mono text-xs text-[var(--color-text)]">
+              {skills.join(" · ")}
+            </span>
           </div>
         ))}
       </div>
-    </section>
+    </Widget>
   );
 }
diff --git a/src/components/Widget.tsx b/src/components/Widget.tsx
new file mode 100644
index 00000000..c3e84071
--- /dev/null
+++ b/src/components/Widget.tsx
@@ -0,0 +1,39 @@
+type WidgetProps = {
+  title: string;
+  badge?: string | number;
+  meta?: string;
+  as?: "section" | "div" | "article";
+  className?: string;
+  children: React.ReactNode;
+};
+
+export default function Widget({
+  title,
+  badge,
+  meta,
+  as: Tag = "section",
+  className,
+  children,
+}: WidgetProps) {
+  return (
+    <Tag className={`mb-12 ${className ?? ""}`}>
+      <div className="flex items-center gap-3 mb-6">
+        <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>
+        )}
+        <div className="flex-1 h-px bg-[var(--color-border)]" aria-hidden="true" />
+        {badge !== undefined && (
+          <span className="font-mono text-xs text-[var(--color-text-dim)] whitespace-nowrap">
+            {badge}
+          </span>
+        )}
+      </div>
+      {children}
+    </Tag>
+  );
+}
diff --git a/src/data/projects.ts b/src/data/projects.ts
index 4fa8ffde..8d6e3192 100644
--- a/src/data/projects.ts
+++ b/src/data/projects.ts
@@ -4,9 +4,9 @@ export type Project = {
   description: string;
   tags: string[];
   githubUrl: string;
-  gradient: string; // Tailwind gradient classes for placeholder image tile
   tier: "featured" | "archive";
   stats?: string;
+  year?: number;
 };
 
 export const projects: Project[] = [
@@ -18,7 +18,6 @@ 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",
-    gradient: "from-[var(--color-green-darkest)] via-[var(--color-bg)] to-[var(--color-bg-deep)]",
     tier: "featured",
     stats: "211 commits",
   },
@@ -29,7 +28,6 @@ export const projects: Project[] = [
       "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",
-    gradient: "from-[var(--color-green-darker)] via-[var(--color-surface)] to-[var(--color-bg-deep)]",
     tier: "featured",
   },
   {
@@ -39,7 +37,6 @@ export const projects: Project[] = [
       "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",
-    gradient: "from-[var(--color-bg)] via-[var(--color-green-darkest)] to-[var(--color-bg-deep)]",
     tier: "featured",
   },
   {
@@ -49,7 +46,6 @@ export const projects: Project[] = [
       "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",
-    gradient: "from-[var(--color-surface)] via-[var(--color-green-darkest)] to-[var(--color-bg-deep)]",
     tier: "featured",
   },
 
@@ -61,8 +57,8 @@ export const projects: Project[] = [
       "Chrome extension (Manifest V3) that captures entire Twitter/X threads and exports them as HTML, Markdown, PDF, or image — with metadata preservation and preview before export.",
     tags: ["Chrome Extension", "Manifest V3", "JavaScript", "jsPDF"],
     githubUrl: "https://github.com/lerko96/twitter-thread-ext",
-    gradient: "from-[var(--color-bg)] to-[var(--color-bg-deep)]",
     tier: "archive",
+    year: 2023,
   },
   {
     slug: "notes-app-1.0",
@@ -71,8 +67,8 @@ export const projects: Project[] = [
       "Lightweight canvas drawing app with color picker, adjustable brush size, and PNG export. Runs in the browser, no dependencies.",
     tags: ["HTML5 Canvas", "JavaScript", "CSS"],
     githubUrl: "https://github.com/lerko96/notes-app-1.0",
-    gradient: "from-[var(--color-bg)] to-[var(--color-bg-deep)]",
     tier: "archive",
+    year: 2022,
   },
   {
     slug: "were-hooked",
@@ -81,8 +77,8 @@ export const projects: Project[] = [
       "Fishing location discovery app built as a team of 5 during bootcamp. Java/Spring MVC backend with Thymeleaf templates.",
     tags: ["Java", "Spring", "Thymeleaf", "HTML", "CSS"],
     githubUrl: "https://github.com/lerko96/were-hooked-repo",
-    gradient: "from-[var(--color-bg)] to-[var(--color-bg-deep)]",
     tier: "archive",
+    year: 2022,
   },
   {
     slug: "mystery-educator",
@@ -91,8 +87,8 @@ export const projects: Project[] = [
       "Single-page app mashup of the MET Museum and NASA public APIs. Built as a team of 4 during bootcamp.",
     tags: ["JavaScript", "REST APIs", "HTML", "CSS"],
     githubUrl: "https://github.com/lerko96/mystery-educator",
-    gradient: "from-[var(--color-bg)] to-[var(--color-bg-deep)]",
     tier: "archive",
+    year: 2022,
   },
 ];
 

From bf0910a8fee6ce4cc10ad1d2dcf5cfa91c2b547c Mon Sep 17 00:00:00 2001
From: lerko96 <dev@tkoenig.simplelogin.com>
Date: Sun, 12 Apr 2026 19:33:40 -0400
Subject: [PATCH 2/5] style: narrow content column to max-w-3xl for centered
 layout

---
 src/app/layout.tsx        | 2 +-
 src/components/Footer.tsx | 2 +-
 src/components/Nav.tsx    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8eb2e206..0af92ec6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -39,7 +39,7 @@ export default function RootLayout({
       >
         <ThemeProvider>
           <Nav />
-          <main className="max-w-5xl mx-auto px-6 py-14">
+          <main className="max-w-3xl mx-auto px-6 py-14">
             {children}
           </main>
           <Footer />
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 2c1e1416..5350e8e2 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,7 +1,7 @@
 export default function Footer() {
   return (
     <footer className="border-t border-[var(--color-border)] py-5 mt-8">
-      <div className="max-w-5xl mx-auto px-6 flex items-center justify-between">
+      <div className="max-w-3xl mx-auto px-6 flex items-center justify-between">
         <span className="font-mono text-xs text-[var(--color-text-dim)]">
           &copy; {new Date().getFullYear()} Tyler Koenig
         </span>
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 5fe893ac..bd9e20e2 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -13,7 +13,7 @@ export default function Nav() {
   const pathname = usePathname();
   return (
     <header className="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
-      <nav className="max-w-5xl mx-auto px-6 h-11 flex items-center justify-between">
+      <nav className="max-w-3xl mx-auto px-6 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)]"

From a58fafc563e738e76cb90d77a8fb96b9f01625b5 Mon Sep 17 00:00:00 2001
From: lerko96 <dev@tkoenig.simplelogin.com>
Date: Sun, 12 Apr 2026 19:36:41 -0400
Subject: [PATCH 3/5] fix(layout): narrow content column to 740px for visible
 centering

---
 src/app/layout.tsx        | 2 +-
 src/components/Footer.tsx | 2 +-
 src/components/Nav.tsx    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0af92ec6..8d9f34f5 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -39,7 +39,7 @@ export default function RootLayout({
       >
         <ThemeProvider>
           <Nav />
-          <main className="max-w-3xl mx-auto px-6 py-14">
+          <main className="max-w-[740px] mx-auto px-6 py-14">
             {children}
           </main>
           <Footer />
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 5350e8e2..31cbedb6 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,7 +1,7 @@
 export default function Footer() {
   return (
     <footer className="border-t border-[var(--color-border)] py-5 mt-8">
-      <div className="max-w-3xl mx-auto px-6 flex items-center justify-between">
+      <div className="max-w-[740px] mx-auto px-6 flex items-center justify-between">
         <span className="font-mono text-xs text-[var(--color-text-dim)]">
           &copy; {new Date().getFullYear()} Tyler Koenig
         </span>
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index bd9e20e2..6826079b 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -13,7 +13,7 @@ export default function Nav() {
   const pathname = usePathname();
   return (
     <header className="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
-      <nav className="max-w-3xl mx-auto px-6 h-11 flex items-center justify-between">
+      <nav className="max-w-[740px] mx-auto px-6 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)]"

From b3fc7b21146ab469ef0a74299b93168966da9b5c Mon Sep 17 00:00:00 2001
From: lerko96 <dev@tkoenig.simplelogin.com>
Date: Sun, 12 Apr 2026 19:59:59 -0400
Subject: [PATCH 4/5] fix(layout): restore mx-auto centering by scoping CSS
 reset to @layer base

Unlayered CSS always wins over Tailwind's @layer utilities, so the
bare * { margin: 0 } reset was overriding mx-auto everywhere. Moving
it into @layer base restores correct cascade order.
---
 README.md                 |  7 ++-----
 src/app/globals.css       | 10 ++++++----
 src/app/layout.tsx        | 13 +++++++++----
 src/components/Footer.tsx |  2 +-
 src/components/Nav.tsx    |  2 +-
 5 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 2b5c1263..489a7365 100644
--- a/README.md
+++ b/README.md
@@ -27,12 +27,10 @@ npm run deploy   # build + push out/ to master (GitHub mirror)
 
 ## How it deploys
 
-`npm run deploy` runs `predeploy` (build) then pushes the `out/` directory to `master` via `gh-pages`. That's what feeds the GitHub Pages backup at lerko96.com.
+`npm run deploy` runs `predeploy` (build) then pushes the `out/` directory to `master` via `gh-pages`. That's what feeds the GitHub Pages backup mirror.
 
 `postbuild` drops `out/.nojekyll` so GitHub Pages doesn't ignore `_next/` assets.
 
-Custom domain is in `public/CNAME` — gets copied into `out/` on build.
-
 ---
 
 ## Project layout
@@ -51,8 +49,7 @@ src/
   data/
     projects.ts         # all projects, featured + archive split
     services.ts         # homelab services with categories
-public/
-  CNAME                 # www.lerko96.com
+public/                 # static assets copied into out/ on build
 ```
 
 > Tailwind v4 is CSS-first — no `tailwind.config.ts`. All custom tokens live in `globals.css` under `@theme {}`.
diff --git a/src/app/globals.css b/src/app/globals.css
index e4d300f4..ad6ef9a6 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -39,10 +39,12 @@ html {
   font-family: var(--font-mono);
 }
 
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+@layer base {
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
 }
 
 /* Default transitions — linear, fast */
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8d9f34f5..0f0a8aa2 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -38,11 +38,16 @@ export default function RootLayout({
         className={`${sourceCodePro.variable} bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen`}
       >
         <ThemeProvider>
+          {/* Full-width sticky nav */}
           <Nav />
-          <main className="max-w-[740px] mx-auto px-6 py-14">
-            {children}
-          </main>
-          <Footer />
+
+          {/* 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">
+              {children}
+            </main>
+            <Footer />
+          </div>
         </ThemeProvider>
       </body>
     </html>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 31cbedb6..2085cd15 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,7 +1,7 @@
 export default function Footer() {
   return (
     <footer className="border-t border-[var(--color-border)] py-5 mt-8">
-      <div className="max-w-[740px] mx-auto px-6 flex items-center justify-between">
+      <div className="px-8 flex items-center justify-between">
         <span className="font-mono text-xs text-[var(--color-text-dim)]">
           &copy; {new Date().getFullYear()} Tyler Koenig
         </span>
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 6826079b..c5ce90e7 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -13,7 +13,7 @@ export default function Nav() {
   const pathname = usePathname();
   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-6 h-11 flex items-center justify-between">
+      <nav className="max-w-[740px] mx-auto px-8 h-11 flex items-center justify-between">
         <Link
           href="/"
           className="font-mono text-sm font-bold text-[var(--color-text)] tracking-widest hover:text-[var(--color-text-label)]"

From 79d3fb142e0d8141e8801113756d2ca1e41f3bb2 Mon Sep 17 00:00:00 2001
From: lerko96 <dev@tkoenig.simplelogin.com>
Date: Sun, 12 Apr 2026 20:00:05 -0400
Subject: [PATCH 5/5] style: improve readability across all pages

Bump body/description text from text-xs to text-sm. Lighten body copy
from color-text-dim/label (#444/#666) to near-white with opacity.
Increase row padding, card padding, and inter-section spacing to match
GitHub Changelog-style breathing room.
---
 src/app/archive/page.tsx       |  8 ++++----
 src/app/homelab/page.tsx       | 24 ++++++++++++------------
 src/components/Hero.tsx        |  4 ++--
 src/components/ProjectCard.tsx |  4 ++--
 src/components/Skills.tsx      |  4 ++--
 src/components/Widget.tsx      |  4 ++--
 6 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/app/archive/page.tsx b/src/app/archive/page.tsx
index d2e11e6b..13e5848b 100644
--- a/src/app/archive/page.tsx
+++ b/src/app/archive/page.tsx
@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 export default function ArchivePage() {
   return (
     <>
-      <div className="mb-12">
+      <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
@@ -20,7 +20,7 @@ export default function ArchivePage() {
         <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-label)] leading-relaxed max-w-xl">
+        <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>
@@ -43,11 +43,11 @@ export default function ArchivePage() {
                       {project.year}
                     </span>
                   )}
-                  <span className="font-mono text-xs text-[var(--color-text)] group-hover:text-[var(--color-accent-green)] truncate">
+                  <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-xs text-[var(--color-text-dim)] leading-relaxed">
+                <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">
diff --git a/src/app/homelab/page.tsx b/src/app/homelab/page.tsx
index 6ae318d2..a9fc0443 100644
--- a/src/app/homelab/page.tsx
+++ b/src/app/homelab/page.tsx
@@ -80,7 +80,7 @@ export default function HomelabPage() {
   return (
     <>
       {/* Header */}
-      <div className="mb-12">
+      <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
@@ -90,7 +90,7 @@ export default function HomelabPage() {
         <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-label)] leading-relaxed max-w-2xl">
+        <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.
@@ -108,7 +108,7 @@ export default function HomelabPage() {
               <p className="font-mono text-xs text-[var(--color-text-dim)] uppercase tracking-wider mb-1">
                 {label}
               </p>
-              <p className="font-mono text-xs text-[var(--color-text)]">{value}</p>
+              <p className="font-mono text-sm text-[var(--color-text)]">{value}</p>
             </div>
           ))}
         </div>
@@ -151,7 +151,7 @@ export default function HomelabPage() {
                   <td className="font-mono text-[var(--color-text-label)] py-2.5 pr-6">
                     {v.subnet}
                   </td>
-                  <td className="font-sans text-[var(--color-text-label)] py-2.5">{v.purpose}</td>
+                  <td className="font-sans text-sm text-[var(--color-text)] py-2.5 opacity-80">{v.purpose}</td>
                 </tr>
               ))}
             </tbody>
@@ -187,7 +187,7 @@ export default function HomelabPage() {
                         <p className="font-mono text-xs text-[var(--color-text)] mb-0.5">
                           {svc.name}
                         </p>
-                        <p className="font-sans text-xs text-[var(--color-text-dim)] leading-relaxed">
+                        <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed opacity-75">
                           {svc.description}
                         </p>
                       </div>
@@ -213,13 +213,13 @@ export default function HomelabPage() {
               key={adr.title}
               className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-4 py-4"
             >
-              <p className="font-mono text-xs text-[var(--color-text)] mb-2">{adr.title}</p>
-              <p className="font-sans text-xs text-[var(--color-text-dim)] leading-relaxed mb-1.5">
-                <span className="text-[var(--color-text-label)]">decision: </span>
+              <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>
                 {adr.decision}
               </p>
-              <p className="font-sans text-xs text-[var(--color-text-dim)] leading-relaxed">
-                <span className="text-[var(--color-text-label)]">why: </span>
+              <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>
                 {adr.why}
               </p>
             </div>
@@ -229,8 +229,8 @@ export default function HomelabPage() {
 
       {/* GitHub CTA */}
       <section className="border-t border-[var(--color-border)] pt-6">
-        <p className="font-mono text-xs text-[var(--color-text-label)] mb-1">lerkolabs on GitHub</p>
-        <p className="font-sans text-xs text-[var(--color-text-dim)] mb-3">
+        <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.
         </p>
         <a
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 449dd74c..f039e56a 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -2,7 +2,7 @@ import Image from "next/image";
 
 export default function Hero() {
   return (
-    <section className="mb-12">
+    <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">
@@ -31,7 +31,7 @@ export default function Hero() {
             </p>
           </div>
 
-          <p className="font-sans text-sm text-[var(--color-text-label)] leading-relaxed max-w-lg">
+          <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
diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
index cc42fcdf..76d75a00 100644
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -6,7 +6,7 @@ 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-3 p-4">
+    <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">
         <a
           href={project.githubUrl}
@@ -34,7 +34,7 @@ export default function ProjectCard({ project }: Props) {
         </div>
       </div>
 
-      <p className="font-sans text-xs text-[var(--color-text-label)] leading-relaxed flex-1">
+      <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-75">
         {project.description}
       </p>
 
diff --git a/src/components/Skills.tsx b/src/components/Skills.tsx
index f176c3e0..6e535d4a 100644
--- a/src/components/Skills.tsx
+++ b/src/components/Skills.tsx
@@ -32,14 +32,14 @@ export default function Skills() {
         {skillGroups.map(({ label, skills }, i) => (
           <div
             key={label}
-            className={`flex flex-col xs:flex-row gap-1 xs:gap-6 py-3 ${
+            className={`flex flex-col xs:flex-row gap-1 xs:gap-6 py-4 ${
               i < skillGroups.length - 1 ? "border-b border-[var(--color-border)]" : ""
             }`}
           >
             <span className="font-mono text-xs text-[var(--color-text-dim)] w-28 shrink-0 uppercase tracking-wider">
               {label}
             </span>
-            <span className="font-mono text-xs text-[var(--color-text)]">
+            <span className="font-mono text-sm text-[var(--color-text)]">
               {skills.join(" · ")}
             </span>
           </div>
diff --git a/src/components/Widget.tsx b/src/components/Widget.tsx
index c3e84071..6ec63db8 100644
--- a/src/components/Widget.tsx
+++ b/src/components/Widget.tsx
@@ -16,8 +16,8 @@ export default function Widget({
   children,
 }: WidgetProps) {
   return (
-    <Tag className={`mb-12 ${className ?? ""}`}>
-      <div className="flex items-center gap-3 mb-6">
+    <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>