feat(content): add uptop, reorder projects, archive open-pact, fix VLAN count

Add uptop (uptime monitoring TUI) as featured project. Reorder nib
above homelab, update nib stack and URL. Move open-pact to archive.
Update portfolio description (Nginx → Caddy). Fix VLAN count 8 → 7.
Trim Hero bio.

.gitea/workflows/deploy.yml

@@ -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

.github/workflows/deploy.yml

@@ -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

.gitignore

@@ -1,37 +1,17 @@
 # dependencies
 /node_modules
-/.pnp
-.pnp.js
 
-# next.js
+# astro
-/.next/
 /out/
-
+/.astro/
-# production
-/build
-
-# testing
-/coverage
 
 # misc
 .DS_Store
 .env
-.env.local
+.env.*
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
-
-# claude code
-CLAUDE.md
-.claude/
 
 # docs
 /docs

README.md

@@ -1,37 +1,40 @@
-# lerko96 portfolio
+# Tyler Koenig portfolio
 
-Personal portfolio site. Live at [lerkolabs.com](https://lerkolabs.com) — self-hosted, deployed and maintained through my own operation.
+Personal portfolio site. Live at [lerkolabs.com](https://lerkolabs.com) — self-hosted.
 
-Source lives on my Gitea at [gitea.lerkolabs.com](https://gitea.lerkolabs.com). GitHub is a backup mirror, not the primary.
+Source: [gitea.lerkolabs.com/lerko/portfolio](https://gitea.lerkolabs.com/lerko/portfolio)
 
-**Stack:** Next.js 16 · React 19 · TypeScript · Tailwind v4
+**Stack:** Astro 5 · TypeScript · Tailwind v4
 
 ---
 
 ## Branches
 
-- `dev` — source code, all work happens here
+- `dev` — source code; pushing here updates lerkolabs.com
-- `master` — built output only; what GitHub Pages serves for the backup mirror. don't touch this manually.
+- `master` — reserved for future GitHub mirror; don't touch manually
 
 ---
 
 ## Commands
 
 ```bash
-npm run dev      # dev server at localhost:3000
+npm run dev      # dev server at localhost:4321
 npm run build    # static export into out/
-npm run deploy   # build + push out/ to master (GitHub mirror)
+npm run preview  # preview production build
 ```
 
 ---
 
-## How it deploys
+## Deploy
 
-`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.
+```bash
+git checkout dev && git merge <branch> && git push gitea dev
+```
 
-`postbuild` drops `out/.nojekyll` so GitHub Pages doesn't ignore `_next/` assets.
+Push to `dev` triggers Gitea Actions (`.gitea/workflows/deploy.yml`):
-
+1. Builds the static site (`npm run build`)
-Custom domain is in `public/CNAME` — gets copied into `out/` on build.
+2. rsyncs `out/` to the portfolio LXC
+3. Rebuilds and restarts the Docker container serving lerkolabs.com
 
 ---
 
@@ -39,20 +42,22 @@ Custom domain is in `public/CNAME` — gets copied into `out/` on build.
 
 ```
 src/
-  app/
+  layouts/
-    layout.tsx          # root layout, fonts, ThemeProvider
+    Base.astro            # root layout, fonts, theme script, nav/footer
-    page.tsx            # home: hero, skills, project cards
+  pages/
-    homelab/page.tsx    # homelab page: VLANs, services, ADRs
+    index.astro           # home: hero, timeline
-    archive/page.tsx    # older projects grid
+    projects.astro        # featured + archive projects
-    globals.css         # full design system (Tailwind v4 CSS-first, all tokens here)
+    homelab.astro         # VLANs, services, ADRs
-  components/           # Nav, Footer, Hero, ThemeScript, etc.
+    archive.astro         # redirect to /projects/
-  context/
+  components/             # Nav, Footer, Hero, Timeline, Widget, ProjectCard, Skills
-    ThemeContext.tsx     # dark mode provider + useTheme hook
   data/
-    projects.ts         # all projects, featured + archive split
+    projects.ts           # all projects, featured + archive split
-    services.ts         # homelab services with categories
+    services.ts           # homelab services with categories
+    timeline.ts           # career/project timeline
+  styles/
+    globals.css           # full design system (Tailwind v4 CSS-first, all tokens here)
 public/
-  CNAME                 # www.lerko96.com
+  fonts/                  # self-hosted Source Code Pro woff2
 ```
 
 > Tailwind v4 is CSS-first — no `tailwind.config.ts`. All custom tokens live in `globals.css` under `@theme {}`.

astro.config.mjs

@@ -0,0 +1,10 @@
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  output: 'static',
+  trailingSlash: 'always',
+  outDir: 'out',
+  build: {
+    format: 'directory',
+  },
+});

eslint.config.mjs

@@ -1,18 +0,0 @@
-import { defineConfig, globalIgnores } from "eslint/config";
-import nextVitals from "eslint-config-next/core-web-vitals";
-import nextTs from "eslint-config-next/typescript";
-
-const eslintConfig = defineConfig([
-  ...nextVitals,
-  ...nextTs,
-  // Override default ignores of eslint-config-next.
-  globalIgnores([
-    // Default ignores of eslint-config-next:
-    ".next/**",
-    "out/**",
-    "build/**",
-    "next-env.d.ts",
-  ]),
-]);
-
-export default eslintConfig;

next.config.ts

@@ -1,11 +0,0 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  output: "export",
-  trailingSlash: true,
-  images: {
-    unoptimized: true,
-  },
-};
-
-export default nextConfig;

package.json

@@ -4,27 +4,15 @@
   "private": true,
   "homepage": "https://www.lerko96.com",
   "scripts": {
-    "dev": "next dev",
+    "dev": "astro dev",
-    "build": "next build",
+    "build": "astro build",
-    "postbuild": "node -e \"require('fs').writeFileSync('out/.nojekyll', '')\"",
+    "preview": "astro preview"
-    "start": "next start",
-    "lint": "eslint",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -b master -d out -t"
   },
   "dependencies": {
-    "next": "16.2.2",
+    "astro": "^5"
-    "react": "19.2.4",
-    "react-dom": "19.2.4"
   },
   "devDependencies": {
-    "gh-pages": "^6.0.0",
     "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "16.2.2",
     "tailwindcss": "^4",
     "typescript": "^5"
   }

public/file.svg

@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

src/app/archive/page.tsx

@@ -1,59 +0,0 @@
-import type { Metadata } from "next";
-import { archiveProjects } from "@/data/projects";
-
-export const metadata: Metadata = {
-  title: "Archive | Tyler Koenig",
-  description: "Earlier projects and experiments — browser extensions, canvas apps, and bootcamp work.",
-};
-
-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">
-          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>
-      </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>
-    </>
-  );
-}

src/app/globals.css

@@ -1,72 +0,0 @@
-@import "tailwindcss";
-
-@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;
-
-  /* Typography */
-  --font-mono: "Source Code Pro", ui-monospace, monospace;
-  --font-sans: "Montserrat", 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;
-
-  @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);
-  color: var(--color-text);
-  font-family: var(--font-sans);
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    transition-duration: 0.01ms !important;
-  }
-}

src/app/homelab/page.tsx

@@ -1,237 +0,0 @@
-import type { Metadata } from "next";
-import { services, categoryOrder, categoryLabels } from "@/data/services";
-
-export const metadata: Metadata = {
-  title: "Homelab | Tyler Koenig",
-  description:
-    "Production-grade personal homelab: Proxmox, pfSense, 8 VLANs, WireGuard, Caddy, Authentik SSO, and 20+ self-hosted services.",
-};
-
-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" },
-];
-
-const adrs = [
-  {
-    title: "AT&T Gateway: IP Passthrough over EAP bypass",
-    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.",
-  },
-  {
-    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.",
-  },
-  {
-    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.",
-  },
-  {
-    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.",
-  },
-  {
-    title: "N100 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.",
-  },
-  {
-    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).",
-  },
-  {
-    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.",
-  },
-];
-
-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">
-          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>
-      </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 }) => (
-            <div
-              key={label}
-              className="border border-[var(--color-grey-1)] rounded-lg p-4 bg-[var(--color-bg)]"
-            >
-              <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>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      {/* 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>
-        <div className="overflow-x-auto">
-          <table className="w-full text-sm 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>
-            </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>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </section>
-
-      {/* 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>
-        <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">
-                  {categoryLabels[cat]}
-                </h3>
-                <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-3">
-                  {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"
-                    >
-                      <i
-                        className={`${svc.icon} text-[var(--color-green)] text-sm mt-0.5 w-4 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>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </section>
-
-      {/* 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">
-          {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"
-            >
-              <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>
-              <p className="text-xs text-[var(--color-grey-3)] leading-relaxed">
-                <span className="text-[var(--color-grey-2)]">Why: </span>{adr.why}
-              </p>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      {/* 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>
-        <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"
-        >
-          View repo <i className="fas fa-arrow-up-right-from-square ml-1 text-xs" aria-hidden="true" />
-        </a>
-      </section>
-    </>
-  );
-}

src/app/layout.tsx

@@ -1,56 +0,0 @@
-import type { Metadata } from "next";
-import { Montserrat, 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",
-  display: "swap",
-});
-
-export const metadata: Metadata = {
-  title: "Tyler Koenig | Portfolio",
-  description:
-    "SOC Helpdesk I by day, building beyond the title. Projects in AI tooling, mobile apps, infrastructure, and more.",
-};
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en" className="dark">
-      <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={`${montserrat.variable} ${sourceCodePro.variable} bg-[var(--color-bg-deep)] text-[var(--color-text)] font-sans min-h-screen`}
-      >
-        <ThemeProvider>
-          <Nav />
-          <main className="max-w-5xl mx-auto px-6 py-16">
-            {children}
-          </main>
-          <Footer />
-        </ThemeProvider>
-      </body>
-    </html>
-  );
-}

src/app/page.tsx

@@ -1,32 +0,0 @@
-import type { Metadata } from "next";
-import Hero from "@/components/Hero";
-import Skills from "@/components/Skills";
-import ProjectCard from "@/components/ProjectCard";
-import { featuredProjects } from "@/data/projects";
-
-export const metadata: Metadata = {
-  title: "Tyler Koenig | Portfolio",
-  description:
-    "SOC Helpdesk I by day, building beyond the title. Projects in AI tooling, mobile apps, infrastructure, and more.",
-};
-
-export default function Home() {
-  return (
-    <>
-      <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>
-    </>
-  );
-}

src/components/Footer.astro

@@ -0,0 +1,42 @@
+---
+const year = new Date().getFullYear();
+---
+
+<footer class="border-t border-[var(--color-border)] py-1lh mt-2lh">
+  <div class="px-4ch flex items-center justify-between text-[var(--color-text-dim)]">
+    <span>&copy; {year} Tyler Koenig</span>
+    <nav class="flex items-center gap-2ch">
+      <a
+        href="https://github.com/lerko96"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="underline"
+      >
+        GitHub
+      </a>
+      <a
+        href="https://gitea.lerkolabs.com/lerko"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="underline"
+      >
+        Gitea
+      </a>
+      <a
+        href="https://www.linkedin.com/in/tyler-koenig"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="underline"
+      >
+        LinkedIn
+      </a>
+      <a
+        href="mailto:tyler@lerkolabs.com"
+        target="_blank"
+        class="underline"
+      >
+        Email
+      </a>
+    </nav>
+  </div>
+</footer>

src/components/Footer.tsx

@@ -1,38 +0,0 @@
-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">
-          &copy; {new Date().getFullYear()} Tyler Koenig
-        </p>
-        <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"
-          >
-            <i className="fab fa-github text-lg" 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-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" />
-          </a>
-        </div>
-      </div>
-    </footer>
-  );
-}

src/components/Hero.astro

@@ -0,0 +1,50 @@
+---
+import { services } from "@/data/services";
+---
+
+<section class="mb-3lh">
+  <h1 class="text-xl font-bold mb-half-lh">Tyler Koenig</h1>
+  <p class="text-[var(--color-text-label)] mb-1lh">
+    Security Operations · Self-Hosted Infrastructure
+  </p>
+
+  <p class="text-[var(--color-text-label)] leading-relaxed mb-1lh">
+    Homelab runs {services.length} services across segmented VLANs — pfSense, Authentik SSO,
+    full observability stack. Write software too: mobile apps, Go backends, open
+    protocols. 
+  </p>
+
+  <nav class="flex flex-wrap items-center gap-x-2ch gap-y-half-lh text-[var(--color-text-label)]">
+    <a
+      href="https://github.com/lerko96"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="underline"
+    >
+      GitHub
+    </a>
+    <a
+      href="https://gitea.lerkolabs.com/lerko"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="underline"
+    >
+      Gitea
+    </a>
+    <a
+      href="https://www.linkedin.com/in/tyler-koenig"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="underline"
+    >
+      LinkedIn
+    </a>
+    <a
+      href="mailto:tyler@lerkolabs.com"
+      target="_blank"
+      class="underline"
+    >
+      Email
+    </a>
+  </nav>
+</section>

src/components/Hero.tsx

@@ -1,64 +0,0 @@
-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">
-        <Image
-          src="/images/headshot-tyler_koenig.png"
-          alt="Tyler Koenig"
-          width={120}
-          height={120}
-          className="rounded-full border-2 border-[var(--color-green-darker)]"
-          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
-          </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>
-      </div>
-    </section>
-  );
-}

src/components/Nav.astro

@@ -0,0 +1,89 @@
+<header class="sticky top-0 z-50 bg-[var(--color-bg)] border-b border-[var(--color-border)]">
+  <nav class="max-w-[740px] mx-auto px-4ch h-11 flex items-center justify-between">
+    <a href="/" class="font-semibold">Tyler Koenig</a>
+
+    <div class="flex items-center gap-2ch">
+      <a href="#projects" data-nav-link class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">projects</a>
+      <a href="#journey" data-nav-link class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">journey</a>
+      <a href="#homelab" data-nav-link class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">homelab</a>
+
+      <button
+      data-theme-toggle
+      aria-label="Switch to light mode"
+      class="text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
+    >
+        light
+      </button>
+    </div>
+  </nav>
+</header>
+
+<script>
+  const themeBtn = document.querySelector("[data-theme-toggle]") as HTMLButtonElement;
+
+  function updateTheme() {
+    const isDark = document.documentElement.classList.contains("dark");
+    themeBtn.textContent = isDark ? "light" : "dark";
+    themeBtn.setAttribute(
+      "aria-label",
+      isDark ? "Switch to light mode" : "Switch to dark mode",
+    );
+  }
+
+  themeBtn.addEventListener("click", () => {
+    const next = !document.documentElement.classList.contains("dark");
+    document.documentElement.classList.toggle("dark", next);
+    localStorage.setItem("lerko96-dark-mode", String(next));
+    updateTheme();
+  });
+
+  updateTheme();
+
+  const navLinks = document.querySelectorAll<HTMLAnchorElement>("[data-nav-link]");
+  const sections = Array.from(navLinks).map((link) => ({
+    link,
+    section: document.querySelector(link.hash) as HTMLElement,
+  }));
+
+  const atBottom = () =>
+    window.innerHeight + window.scrollY >= document.body.offsetHeight - 2;
+
+  const observer = new IntersectionObserver(
+    () => {
+      let active: HTMLAnchorElement | null = null;
+      if (atBottom()) {
+        active = sections[sections.length - 1].link;
+      } else {
+        for (const { link, section } of sections) {
+          if (section.getBoundingClientRect().top <= 80) active = link;
+        }
+      }
+      navLinks.forEach((l) => {
+        l.style.color = l === active ? "var(--color-text)" : "";
+      });
+    },
+    { rootMargin: "-56px 0px 0px 0px", threshold: 0 },
+  );
+
+  sections.forEach(({ section }) => observer.observe(section));
+
+  let ticking = false;
+  window.addEventListener("scroll", () => {
+    if (ticking) return;
+    ticking = true;
+    requestAnimationFrame(() => {
+      let active: HTMLAnchorElement | null = null;
+      if (atBottom()) {
+        active = sections[sections.length - 1].link;
+      } else {
+        for (const { link, section } of sections) {
+          if (section.getBoundingClientRect().top <= 80) active = link;
+        }
+      }
+      navLinks.forEach((l) => {
+        l.style.color = l === active ? "var(--color-text)" : "";
+      });
+      ticking = false;
+    });
+  }, { passive: true });
+</script>

src/components/Nav.tsx

@@ -1,51 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-
-
-const links = [
-  { 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">
-        <Link
-          href="/"
-          className="font-mono text-xl font-bold text-[var(--color-green)] tracking-widest hover:opacity-80 transition-opacity"
-        >
-          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>
-      </nav>
-    </header>
-  );
-}

src/components/ProjectCard.astro

@@ -0,0 +1,35 @@
+---
+import type { Project } from "@/data/projects";
+
+interface Props {
+  project: Project;
+}
+
+const { project } = Astro.props;
+---
+
+<article class="mb-2lh">
+  <div class="flex items-baseline gap-1ch mb-half-lh">
+    <h3>
+      <a
+        href={project.githubUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="font-semibold underline"
+      >
+        {project.title}
+      </a>
+    </h3>
+    {project.statusBadge && (
+      <span class="text-[var(--color-text-dim)]">({project.statusBadge})</span>
+    )}
+  </div>
+
+  <p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
+    {project.description}
+  </p>
+
+  <p class="text-[var(--color-text-dim)]">
+    {project.tags.join(" · ")}
+  </p>
+</article>

src/components/ProjectCard.tsx

@@ -1,69 +0,0 @@
-import type { Project } from "@/data/projects";
-
-type Props = {
-  project: Project;
-  reversed?: boolean;
-};
-
-export default function ProjectCard({ project, reversed = false }: 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`}
-        >
-          <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>
-          <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"
-          >
-            {project.title}
-          </a>
-          {project.stats && (
-            <span className="font-mono text-xs text-[var(--color-green)] ml-3 opacity-70">
-              {project.stats}
-            </span>
-          )}
-        </div>
-
-        <p className="text-sm text-[var(--color-grey-3)] leading-relaxed max-w-md">
-          {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>
-    </article>
-  );
-}

src/components/Skills.astro

@@ -0,0 +1,43 @@
+---
+import Widget from "./Widget.astro";
+
+const skillGroups = [
+  {
+    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);
+---
+
+<Widget title="Skills" badge={totalCount} as="section">
+  <div class="flex flex-col">
+    {skillGroups.map(({ label, skills }) => (
+      <div class="flex flex-col xs:flex-row gap-1ch xs:gap-2ch py-half-lh">
+        <span class="text-[var(--color-text-dim)] w-28 shrink-0">
+          {label}
+        </span>
+        <span>
+          {skills.join(" · ")}
+        </span>
+      </div>
+    ))}
+  </div>
+</Widget>

src/components/Skills.tsx

@@ -1,54 +0,0 @@
-const skillGroups = [
-  {
-    label: "Languages",
-    skills: ["JavaScript", "TypeScript", "HTML", "CSS"],
-  },
-  {
-    label: "Frontend & Mobile",
-    skills: ["React", "React Native", "Expo", "Next.js", "Three.js", "Responsive Design"],
-  },
-  {
-    label: "Desktop & Tools",
-    skills: ["Electron", "Node.js", "REST APIs", "Git", "Docker", "TDD"],
-  },
-  {
-    label: "Infrastructure",
-    skills: ["Proxmox", "pfSense", "VLANs", "WireGuard", "Linux", "Caddy"],
-  },
-  {
-    label: "Practices",
-    skills: ["Agile / Scrum", "Relational Databases", "Self-hosting"],
-  },
-];
-
-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">
-              {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>
-          </div>
-        ))}
-      </div>
-    </section>
-  );
-}

src/components/ThemeScript.tsx

@@ -1,12 +0,0 @@
-// Server component — renders a blocking inline script that sets the dark class
-// on <html> before React hydrates, preventing flash of wrong theme.
-export default function ThemeScript() {
-  const script = `
-    (function() {
-      var stored = localStorage.getItem('lerko96-dark-mode');
-      var dark = stored === null ? true : stored === 'true';
-      if (dark) document.documentElement.classList.add('dark');
-    })();
-  `;
-  return <script dangerouslySetInnerHTML={{ __html: script }} />;
-}

src/components/Timeline.astro

@@ -0,0 +1,38 @@
+---
+import Widget from "./Widget.astro";
+import { timeline, type TimelineType } from "@/data/timeline";
+
+const isDate = (d: string) => /^\d{4}/.test(d);
+
+const typeLabel: Record<TimelineType, string> = {
+  career: "career",
+  education: "education",
+  cert: "cert",
+  project: "project",
+  homelab: "homelab",
+};
+---
+
+<Widget title="Journey">
+  <ol class="flex flex-col">
+    {timeline.map((entry) => (
+      <li class="grid grid-cols-[10ch_1fr] gap-2ch py-half-lh border-b border-[var(--color-border)] last:border-b-0">
+        <div class="text-[var(--color-text-dim)] pt-[0.1em]">
+          {isDate(entry.date)
+            ? <time datetime={entry.date}>{entry.date}</time>
+            : <span>{entry.date}</span>
+          }
+        </div>
+        <div>
+          <h3 class="font-semibold">
+            {entry.title}
+            <span class="font-normal text-[var(--color-text-dim)]"> · {typeLabel[entry.type]}</span>
+          </h3>
+          <p class="text-[var(--color-text-label)] leading-relaxed">
+            {entry.description}
+          </p>
+        </div>
+      </li>
+    ))}
+  </ol>
+</Widget>

src/components/Widget.astro

@@ -0,0 +1,26 @@
+---
+interface Props {
+  title: string;
+  badge?: string | number;
+  meta?: string;
+  as?: "section" | "div" | "article";
+  class?: string;
+}
+
+const { title, badge, meta, as: Tag = "section", class: className } = Astro.props;
+---
+
+<Tag class:list={["mb-4lh", className]}>
+  <div class="mb-2lh">
+    <h2 class="text-lg font-semibold">
+      {title}
+      {badge !== undefined && (
+        <span class="text-[var(--color-text-dim)] font-normal"> ({badge})</span>
+      )}
+    </h2>
+    {meta && (
+      <p class="text-[var(--color-text-dim)]">{meta}</p>
+    )}
+  </div>
+  <slot />
+</Tag>

src/context/ThemeContext.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import { createContext, useContext, useEffect, useState } from "react";
-
-type ThemeContextType = {
-  isDark: boolean;
-  toggle: () => void;
-};
-
-const ThemeContext = createContext<ThemeContextType>({
-  isDark: true,
-  toggle: () => {},
-});
-
-export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [isDark, setIsDark] = useState(true);
-
-  useEffect(() => {
-    const stored = localStorage.getItem("lerko96-dark-mode");
-    const dark = stored === null ? true : stored === "true";
-    setIsDark(dark);
-    document.documentElement.classList.toggle("dark", dark);
-  }, []);
-
-  function toggle() {
-    const next = !isDark;
-    setIsDark(next);
-    localStorage.setItem("lerko96-dark-mode", String(next));
-    document.documentElement.classList.toggle("dark", next);
-  }
-
-  return (
-    <ThemeContext.Provider value={{ isDark, toggle }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-export function useTheme() {
-  return useContext(ThemeContext);
-}

src/data/projects.ts

@@ -4,13 +4,84 @@ 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;
+  statusBadge?: string;
+  externalUrl?: string;
 };
 
 export const projects: Project[] = [
   // --- Featured ---
+  {
+    slug: "uptop",
+    title: "uptop",
+    description: "Live uptime monitoring dashboard for your terminal. SSH-accessible. HTTP, ping, TCP, DNS, push checks with alerts, clustering, and Prometheus metrics.",
+    tags: ["Go", "Bubbletea", "Monitoring", "Uptime"],
+    githubUrl: "https://github.com/lerkolabs/uptop",
+    tier: "featured",
+    year: 2026,
+  },
+  {
+    slug: "nib",
+    title: "nib",
+    description:
+      "Capture-first personal journal built with Go + SQLite.  Currently developing in private when I have spare time.",
+    tags: ["Go", "JavaScript", "SQLite", "Stream-of-Thought"],
+    githubUrl: "https://gitea.lerkolabs.com/lerko/nib-v1",
+    tier: "featured",
+    year: 2026,
+  },
+  {
+    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:
+      "Astro static site, self-hosted in a DMZ LXC behind Caddy, deployed via Gitea Actions CI.",
+    tags: ["Astro", "Typescript", "Dockerfile", "Caddy"],
+    githubUrl: "https://gitea.lerkolabs.com/lerko/portfolio",
+    tier: "featured",
+    year: 2021,
+  },
+  // --- Archive ---
+  {
+    slug: "open-pact",
+    title: "open-pact",
+    description: "Open protocol for AI agent identity, delegation, and portable memory. Ed25519 keypair identity, signed delegation",
+    tags: ["TypeScript", "Ed25519", "DID", "npm", "CC0"],
+    githubUrl: "https://github.com/lerko96/open-pact",
+    tier: "archive",
+    year: 2026,
+  },
+  {
+    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,42 +89,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",
-    gradient: "from-[var(--color-green-darkest)] via-[var(--color-bg)] to-[var(--color-bg-deep)]",
+    tier: "archive",
-    tier: "featured",
+    stats: "200+ commits",
-    stats: "211 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",
-    gradient: "from-[var(--color-green-darker)] via-[var(--color-surface)] to-[var(--color-bg-deep)]",
-    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",
-    gradient: "from-[var(--color-bg)] via-[var(--color-green-darkest)] to-[var(--color-bg-deep)]",
-    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",
-    gradient: "from-[var(--color-surface)] via-[var(--color-green-darkest)] to-[var(--color-bg-deep)]",
-    tier: "featured",
-  },
-
-  // --- Archive ---
   {
     slug: "twitter-thread-ext",
     title: "twitter-thread-ext",
@@ -61,8 +101,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: 2025,
   },
   {
     slug: "notes-app-1.0",
@@ -71,8 +111,38 @@ 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: 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",
@@ -81,8 +151,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: 2021,
   },
   {
     slug: "mystery-educator",
@@ -91,8 +161,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: 2021,
   },
 ];
 

src/data/services.ts

@@ -2,43 +2,58 @@ export type Service = {
   name: string;
   description: string;
   category: "infrastructure" | "security" | "monitoring" | "productivity" | "media";
-  icon: string; // Font Awesome class
+  hidden?: boolean;
 };
 
 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 Netgate 1100", category: "infrastructure" },
-  { name: "Caddy", description: "Reverse proxy with automatic wildcard TLS via Cloudflare DNS-01", category: "infrastructure", icon: "fas fa-globe" },
+  { name: "Caddy", description: "Reverse proxy with automatic wildcard TLS via Cloudflare DNS-01", category: "infrastructure" },
-  { name: "Pi-hole", description: "Network-wide DNS + ad blocking", category: "infrastructure", icon: "fas fa-filter" },
+  { name: "Pi-hole", description: "Network-wide DNS + ad blocking", category: "infrastructure" },
-  { 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" },
+  { name: "mail relay", description: "Outbound SMTP relay for self-hosted service notifications", category: "infrastructure" },
+  { name: "gluetun", description: "VPN container routing download client traffic", category: "infrastructure", hidden: true },
+  { name: "Home Assistant", description: "Smart home automation and device management", category: "infrastructure" },
 
   // Security / Auth
-  { name: "Authentik", description: "SSO provider — OIDC + forward auth across all services", category: "security", icon: "fas fa-id-badge" },
+  { name: "Authentik", description: "SSO provider — OIDC + forward auth across all services", category: "security" },
-  { name: "Vaultwarden", description: "Self-hosted password manager, isolated in its own LXC", category: "security", icon: "fas fa-vault" },
+  { name: "Vaultwarden", description: "Self-hosted password manager, isolated in its own LXC", category: "security" },
 
   // Monitoring
-  { name: "Victoria Metrics", description: "Long-term metrics storage and querying", category: "monitoring", icon: "fas fa-chart-line" },
+  { name: "Victoria Metrics", description: "Long-term metrics storage and querying", category: "monitoring" },
-  { name: "Grafana", description: "Dashboards and alerting across all hosts and services", category: "monitoring", icon: "fas fa-chart-bar" },
+  { name: "Grafana", description: "Dashboards and alerting across all hosts and services", category: "monitoring" },
-  { name: "Beszel", description: "Lightweight container and host monitoring", category: "monitoring", icon: "fas fa-server" },
+  { name: "Beszel", description: "Lightweight container and host monitoring", category: "monitoring" },
-  { name: "ntfy", description: "Self-hosted push notifications", category: "monitoring", icon: "fas fa-bell" },
+  { name: "ntfy", description: "Self-hosted push notifications", category: "monitoring" },
+  { name: "Uptime Kuma", description: "Self-hosted monitoring tool (GUI)", category: "monitoring" },
 
   // Productivity
-  { name: "Gitea", description: "Personal Git server", category: "productivity", icon: "fas fa-code-branch" },
+  { name: "Gitea", description: "Personal Git server", category: "productivity" },
-  { name: "Outline", description: "Team wiki and knowledge base", category: "productivity", icon: "fas fa-book" },
+  { name: "Outline", description: "Team wiki and knowledge base", category: "productivity" },
-  { name: "Vikunja", description: "Task management", category: "productivity", icon: "fas fa-list-check" },
+  { name: "Actual Budget", description: "Personal budgeting", category: "productivity" },
-  { name: "Actual Budget", description: "Personal budgeting", category: "productivity", icon: "fas fa-wallet" },
+  { name: "Baikal", description: "CalDAV / CardDAV server", category: "productivity" },
-  { name: "Ghostfolio", description: "Investment portfolio tracking", category: "productivity", icon: "fas fa-coins" },
+  { name: "Grist", description: "Spreadsheets and structured data", category: "productivity" },
-  { name: "Hoarder", description: "Bookmark manager with tagging", category: "productivity", icon: "fas fa-bookmark" },
+  { name: "Glance", description: "Self-hosted start page with feeds and service status", category: "productivity" },
-  { name: "FreshRSS", description: "RSS reader", category: "productivity", icon: "fas fa-rss" },
+  { name: "Hoarder", description: "Bookmark manager with tagging", category: "productivity", hidden: true },
-  { name: "Memos", description: "Quick notes and journal", category: "productivity", icon: "fas fa-note-sticky" },
+  { name: "FreshRSS", description: "RSS reader", category: "productivity", hidden: true },
-  { name: "Traggo", description: "Time tracking", category: "productivity", icon: "fas fa-clock" },
+  { name: "Memos", description: "Quick notes and journal", category: "productivity", hidden: true },
-  { name: "Baikal", description: "CalDAV / CardDAV server", category: "productivity", icon: "fas fa-calendar" },
+  { name: "Ghostfolio", description: "Investment portfolio tracking", category: "productivity", hidden: true },
-  { name: "Grist", description: "Spreadsheets and structured data", category: "productivity", icon: "fas fa-table" },
+  { name: "Vikunja", description: "Task management", category: "productivity", hidden: true },
-
+  { name: "Traggo", description: "Time tracking", category: "productivity", hidden: true },
+  { name: "Filebrowser", description: "Web-based file manager", category: "productivity", hidden: true },
+  
   // Media
-  { name: "Plex + Jellyfin", description: "Media streaming", category: "media", icon: "fas fa-film" },
+  { name: "Immich", description: "Open-source photo library", category: "media"}, 
-  { name: "Sonarr / Radarr / Lidarr", description: "Automated media management", category: "media", icon: "fas fa-download" },
+  { name: "Kavita", description: "Self-hosted manga and book reader", category: "media" },
-  { name: "Calibre-Web", description: "Book library with auto-ingest", category: "media", icon: "fas fa-book-open" },
+  { name: "Jellyfin", description: "Open-source media streaming", category: "media" },
+  { name: "Prowlarr", description: "Indexer manager and proxy for the *arr stack", category: "media" },
+  { name: "*Arr stack", description: "Automated media management for streaming", category: "media" },
+  { name: "Bazarr", description: "Automatic subtitle download and management", category: "media" },
+  { name: "Lidarr", description: "Automated music management", category: "media", hidden: true },
+  { name: "Radarr", description: "Automated movie management", category: "media", hidden: true },
+  { name: "Plex", description: "Media streaming — movies, TV, music", category: "media", hidden: true },
+  { name: "nzbget", description: "Usenet downloader", category: "media", hidden: true },
+  { name: "qBittorrent", description: "Torrent client with web UI", category: "media", hidden: true },
+  { name: "Openshelf", description: "Book library with auto-ingest", category: "media", hidden: true },
 ];
 
 export const categoryOrder: Service["category"][] = [

src/data/timeline.ts

@@ -0,0 +1,88 @@
+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: "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 (Marvell ARMADA 3720) picked up on eBay — hands-on networking configuration, VLANs, firewall rules, 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-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-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"],
+  },
+];

src/layouts/Base.astro

@@ -0,0 +1,67 @@
+---
+interface Props {
+  title?: string;
+  description?: string;
+}
+
+const {
+  title = "Tyler Koenig",
+  description = "Security operations, self-hosted infrastructure, and software projects. Homelab, Go, TypeScript, and more.",
+} = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="/favicon.ico" />
+    <title>{title}</title>
+    <meta name="description" content={description} />
+    <script is:inline>
+      (function () {
+        var stored = localStorage.getItem("lerko96-dark-mode");
+        var dark = stored === null ? true : stored === "true";
+        if (dark) document.documentElement.classList.add("dark");
+      })();
+    </script>
+  </head>
+  <body
+    class="bg-[var(--color-bg)] text-[var(--color-text)] min-h-screen"
+  >
+    <slot name="nav" />
+    <div class="max-w-[740px] mx-auto">
+      <main class="px-4ch py-3lh">
+        <slot />
+      </main>
+      <slot name="footer" />
+    </div>
+  </body>
+</html>
+
+<style is:global>
+  @import "../styles/globals.css";
+
+  @font-face {
+    font-family: "Source Code Pro";
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url("/fonts/SourceCodePro-latin-ext.woff2") format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+      U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+      U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+      U+A720-A7FF;
+  }
+
+  @font-face {
+    font-family: "Source Code Pro";
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url("/fonts/SourceCodePro-latin.woff2") format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
+      U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
+      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+</style>

src/pages/archive.astro

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="refresh" content="0; url=/#projects" />
+    <link rel="canonical" href="/" />
+    <title>Redirecting...</title>
+  </head>
+  <body>
+    <p>This page moved. <a href="/#projects">/#projects</a></p>
+  </body>
+</html>

src/pages/homelab.astro

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="refresh" content="0; url=/#homelab" />
+    <link rel="canonical" href="/" />
+    <title>Redirecting...</title>
+  </head>
+  <body>
+    <p>This page moved. <a href="/#homelab">/#homelab</a></p>
+  </body>
+</html>

src/pages/index.astro

@@ -0,0 +1,84 @@
+---
+import Base from "@/layouts/Base.astro";
+import Nav from "@/components/Nav.astro";
+import Footer from "@/components/Footer.astro";
+import Hero from "@/components/Hero.astro";
+import Timeline from "@/components/Timeline.astro";
+import Widget from "@/components/Widget.astro";
+import ProjectCard from "@/components/ProjectCard.astro";
+import { featuredProjects } from "@/data/projects";
+import { services, categoryOrder, categoryLabels } from "@/data/services";
+
+const glanceStats = [
+  { label: "Hypervisor", value: "Proxmox VE" },
+  { label: "Firewall", value: "pfSense (Netgate 1100)" },
+  { label: "Network", value: "7 VLANs, default deny, managed switching" },
+  { label: "Services", value: `${services.length} self-hosted across ${categoryOrder.length} categories` },
+];
+---
+
+<Base>
+  <Nav slot="nav" />
+
+  <Hero />
+
+  <section id="projects">
+    <Widget title="Projects"  as="div">
+      <div class="flex flex-col">
+        {featuredProjects.map((project) => (
+          <ProjectCard project={project} />
+        ))}
+      </div>
+    </Widget>
+  </section>
+
+  <section id="journey">
+    <Timeline />
+  </section>
+
+  <section id="homelab">
+    <Widget title="Homelab" as="div">
+      <p class="text-[var(--color-text-label)] leading-relaxed max-w-2xl mb-2lh">
+        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>
+
+      <dl class="flex flex-col mb-2lh">
+        {glanceStats.map(({ label, value }) => (
+          <div class="flex gap-2ch py-qtr-lh">
+            <dt class="text-[var(--color-text-dim)] w-[16ch] shrink-0">{label}</dt>
+            <dd>{value}</dd>
+          </div>
+        ))}
+      </dl>
+
+      <div class="flex flex-wrap gap-x-[3ch] gap-y-qtr-lh mb-2lh">
+        {categoryOrder.map((cat) => {
+          const count = services.filter((s) => s.category === cat).length;
+          return (
+            <span>
+              <span class="text-[var(--color-text-dim)]">{categoryLabels[cat]}</span>
+              <span class="text-[var(--color-text-label)]"> ({count})</span>
+            </span>
+          );
+        })}
+      </div>
+
+      <p class="text-[var(--color-text-label)] mb-half-lh">
+        Full documentation — network maps, ADRs, runbooks, and service configs.
+      </p>
+      <a
+        href="https://gitea.lerkolabs.com/lerko/homelab"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="underline"
+      >
+        gitea.lerkolabs.com/lerko/homelab →
+      </a>
+    </Widget>
+  </section>
+
+  <Footer slot="footer" />
+</Base>

src/pages/projects.astro

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="refresh" content="0; url=/#projects" />
+    <link rel="canonical" href="/" />
+    <title>Redirecting...</title>
+  </head>
+  <body>
+    <p>This page moved. <a href="/#projects">/#projects</a></p>
+  </body>
+</html>

src/styles/globals.css

@@ -0,0 +1,142 @@
+@import "tailwindcss";
+
+@variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* Slate (dark, default) */
+  --color-bg:             #1A1B1E;
+  --color-surface:        #22242A;
+  --color-surface-raised: #2A2D34;
+  --color-border:         #33363E;
+  --color-border-bright:  #3E4148;
+  --color-text:           #D4D4D8;
+  --color-text-label:     #9CA0AA;
+  --color-text-dim:       #888D9B;
+  --color-link:           #8CAFC8;
+  --color-link-visited:   #9A94AB;
+
+  /* Typography */
+  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
+  --font-mono:  "Source Code Pro", ui-monospace, monospace;
+  /* 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;
+}
+
+/* Base */
+html {
+  scroll-behavior: smooth;
+  font-size: 16px;
+  line-height: 1.5;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  font-family: var(--font-sans);
+}
+
+@layer base {
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+/* Bone (light) overrides */
+:root:not(.dark) {
+  --color-bg:             #FAF8F5;
+  --color-surface:        #F3F0EB;
+  --color-surface-raised: #EBE8E3;
+  --color-border:         #E0DCD5;
+  --color-border-bright:  #D4D0C8;
+  --color-text:           #2C2C2C;
+  --color-text-label:     #6B6560;
+  --color-text-dim:       #787068;
+  --color-link:           #4A6B8A;
+  --color-link-visited:   #6B6080;
+}
+
+/* Link underlines */
+a {
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  text-decoration-color: var(--color-border-bright);
+}
+a:hover {
+  text-decoration-color: currentColor;
+}
+a[target="_blank"] {
+  color: var(--color-link);
+}
+a[target="_blank"]:visited {
+  color: var(--color-link-visited);
+}
+a[target="_blank"]:hover {
+  color: var(--color-link);
+  text-decoration-color: currentColor;
+}
+
+/* Focus states */
+a:focus-visible {
+  text-decoration-color: currentColor;
+  outline: 2px solid var(--color-border-bright);
+  outline-offset: 2px;
+}
+button:focus-visible {
+  outline: 2px solid var(--color-border-bright);
+  outline-offset: 2px;
+}
+
+/* Default transitions */
+a,
+button {
+  transition: color 120ms linear, border-color 120ms linear,
+    opacity 120ms linear, text-decoration-color 120ms linear,
+    outline-color 120ms linear;
+}
+
+/* Section anchors — clear sticky nav, visual rhythm */
+section[id] {
+  scroll-margin-top: 3.5rem;
+  padding-top: 2lh;
+  border-top: 1px solid var(--color-border);
+}
+section[id]:first-of-type {
+  border-top: none;
+  padding-top: 0;
+}
+
+@media print {
+  html {
+    font-family: var(--font-serif);
+    font-size: 11pt;
+    line-height: 1.3;
+    color: #000;
+    background: #fff;
+  }
+  header, footer, button { display: none; }
+  a { color: inherit; text-decoration: underline; }
+  main { max-width: none; padding: 0; }
+  section, div, li { margin-bottom: 0.25em; padding-bottom: 0; }
+  h1, h2, h3 { margin-bottom: 0.15em; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}

tsconfig.json

@@ -1,34 +1,9 @@
 {
+  "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
-    "target": "ES2017",
+    "baseUrl": ".",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
     "paths": {
       "@/*": ["./src/*"]
     }
-  },
+  }
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts",
-    "**/*.mts"
-  ],
-  "exclude": ["node_modules"]
 }