ci: auto-tag CalVer after deploy if commit untagged

feat(content): reposition for security engineer, expand services to 37
Hero subtitle and blurb rewritten to lead with security operations and homelab credentials over generic "builder" framing. Projects: archive plAIground, service-monitor, ThoughtSpace (2025); add open-pact and helm as featured; add risk-ops to archive (2026). Add statusBadge + externalUrl to Project type; wire golf-book-mobile. Services: 24 → 37 — split grouped arr/media entries, add mail relay, gluetun, Home Assistant, Glance, Filebrowser, Prowlarr, Bazarr, nzbget, qBittorrent, Kavita, Openshelf. Drop Calibre-Web. Skills: add Go to Languages. Timeline: update monitoring stack. Homelab ADRs: add Authentik over Authelia.
2026-04-16 21:16:01 -04:00 · 2026-04-16 21:06:18 -04:00 · 2026-04-16 18:03:33 -04:00 · 2026-04-16 18:01:19 -04:00 · 2026-04-12 22:11:57 -04:00 · 2026-04-13 01:49:21 +00:00
46 changed files with 8481 additions and 827 deletions
--- a/.gitea/workflows/deploy.yml
+++ b/.gitea/workflows/deploy.yml
@@ -0,0 +1,70 @@
 name: Build and Deploy
 on:
  push:
    branches:
      - dev
 jobs:
  deploy:
    runs-on: ubuntu-latest
    container: node:22-alpine
    steps:
      - name: Install SSH and rsync
        run: apk add --no-cache openssh-client rsync git
      - name: Checkout
        uses: actions/checkout@v4
      - name: Build
        run: npm ci && npm run build
      - name: Setup SSH key
        run: |
          mkdir -p ~/.ssh
          echo "${{ secrets.DEPLOY_SSH_KEY }}" > ~/.ssh/deploy_key
          chmod 600 ~/.ssh/deploy_key
          ssh-keyscan -H 10.99.0.23 >> ~/.ssh/known_hosts
      - name: Sync out/ to Portfolio LXC
        run: |
          rsync -az --delete \
            -e "ssh -i ~/.ssh/deploy_key" \
            out/ root@10.99.0.23:/opt/lerkolabs/out/
      - name: Rebuild and restart container
        run: |
          ssh -i ~/.ssh/deploy_key root@10.99.0.23 \
            "cd /opt/lerkolabs && \
             docker build -t portfolio . && \
             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
--- a/.github/workflows/deploy.yml
+++ b/.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
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,37 @@
 # dependencies
 /node_modules
 /.pnp
 .pnp.js
 # next.js
 /.next/
 /out/
 # production
 /build
 # testing
 /coverage
 # misc
 .DS_Store
 .env
 .env.local
 .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
--- a/3
+++ b/3
@@ -0,0 +1,3 @@
 FROM nginx:alpine
 COPY out/ /usr/share/nginx/html
 EXPOSE 80
--- a/README.md
+++ b/README.md
@@ -0,0 +1,59 @@
 # Tyler Koenig portfolio
 Personal portfolio site. Live at [lerkolabs.com](https://lerkolabs.com) — self-hosted.
 Source: [gitea.lerkolabs.com/lerko/portfolio](https://gitea.lerkolabs.com/lerko/portfolio)
 **Stack:** Next.js 16 · React 19 · TypeScript · Tailwind v4
 ---
 ## Branches
 - `dev` — source code; pushing here updates lerkolabs.com
 - `master` — reserved for future GitHub mirror; don't touch manually
 ---
 ## Commands
 ```bash
 npm run dev      # dev server at localhost:3000
 npm run build    # static export into out/
 ```
 ---
 ## Deploy
 ```bash
 git checkout dev && git merge <branch> && git push gitea dev
 ```
 Push to `dev` triggers Gitea Actions (`.gitea/workflows/deploy.yml`):
 1. Builds the static site (`npm run build`)
 2. rsyncs `out/` to the portfolio LXC
 3. Rebuilds and restarts the Docker container serving lerkolabs.com
 ---
 ## Project layout
 ```
 src/
  app/
    layout.tsx          # root layout, fonts, ThemeProvider
    page.tsx            # home: hero, skills, project cards
    homelab/page.tsx    # homelab page: VLANs, services, ADRs
    archive/page.tsx    # older projects grid
    globals.css         # full design system (Tailwind v4 CSS-first, all tokens here)
  components/           # Nav, Footer, Hero, ThemeScript, etc.
  context/
    ThemeContext.tsx     # dark mode provider + useTheme hook
  data/
    projects.ts         # all projects, featured + archive split
    services.ts         # homelab services with categories
 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 {}`.
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -0,0 +1,18 @@
 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;
--- a/images/amok.png
+++ b/images/amok.png
--- a/images/donut-clicker.png
+++ b/images/donut-clicker.png
--- a/images/mystery-educator.png
+++ b/images/mystery-educator.png
--- a/images/pet.png
+++ b/images/pet.png
--- a/images/profile.png
+++ b/images/profile.png
--- a/images/review-site.png
+++ b/images/review-site.png
--- a/images/shelter.png
+++ b/images/shelter.png
--- a/images/trek.png
+++ b/images/trek.png
--- a/index.html
+++ b/index.html
@@ -1,428 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" />
 		<link
 			href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap"
 			rel="stylesheet"
 		/>
 		<style>
 			@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');
 			</style> 
 		<script src="https://use.fontawesome.com/e427b1b41a.js"></script>
 		<link rel="stylesheet" type="text/css" href="style.css" />
 		<title>Tyler Koenig</title>
 	</head>
 	<body>
 		<div id="wrapper">
 			<nav>
 				<a href="index.html">TYLER KOENIG</a>
 				<ul>
 					<li><a href="#bio" target="_self">ABOUT</a></li>
 					<li><a href="#contact" target="_self">CONTACT</a></li>
 					<li>
 						<a href="#project-wrapper" target="_self">PROJECTS</a>
 					</li>
 					<li><a href="#skills" target="_self">SKILLS</a></li>
 				</ul>
 			</nav>
 			<header>
 				<img src="/images/headshot-tyler_koenig.png" alt="tyler" />
 				<h1>
 					<a href="index.html">Tyler Koenig</a>
 				</h1>
 				<h2>
 					Warehouse Associate at Amazon
 					<br />
 					Student at We Can Code IT, Web Developer in the making!
 				</h2>
 			</header>
 			<main>
 				<section id="aboutMe">
 					<div id="bio">
 						<h2>about me</h2>
 						<p>
 							I'm Tyler Koenig, a lifelong student. Graduated with
 							an Associate of Arts from Lorain County Community
 							College in 2018. Inbound associate at Amazon CLE-3
 							since December 2019. Currently learning Java and
 							front-end web development through We Can Code IT
 							Bootcamp. Always interested in a challenge!
 						</p>
 					</div>
 					<div id="contact">
 						<h3>contact</h3>
 						<ul class="contactLinks">
 							<li>
 								<a
 									href="https://github.com/lerko96"
 									target="_blank"
 									title="github"
 								>
 									github
 									<i
 										class="fa fa-github fa-lg"
 										aria-hidden="true"
 									></i>
 								</a>
 							</li>
 							<li>
 								<a
 									href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
 									target="_blank"
 									title="LinkedIn"
 								>
 									linkedin
 									<i
 										class="fa fa-linkedin-square fa-lg"
 										aria-hidden="true"
 									></i>
 								</a>
 							</li>
 							<li>
 								<a
 									href="mailto:tylerkng96@icloud.com"
 									target="_blank"
 									title="tylerkng96@icloud.com"
 									>email
 									<i
 										class="fa fa-envelope-o fa-lg"
 										aria-hidden="true"
 									></i>
 								</a>
 							</li>
 						</ul>
 					</div>
 				</section>
 				<section id="skills">
 					<h4>skills</h4>
 					<ul class="skills">
 						<li>Java</li>
 						<li>Spring</li>
 						<li>Thymeleaf</li>
 						<li>JavaScript</li>
 						<li>MVC</li>
 						<li>HTML</li>
 						<li>CSS</li>
 						<li>Test Driven Development</li>
 						<li>Agile (Scrum)</li>
 						<li>Object Oriented Programming</li>
 						<li>JSON</li>
 						<li>React</li>
 						<li>REST APIs</li>
 						<li>Responsive Design</li>
 						<li>Relational Databases</li>
 						<li>Source Control/ Github</li>
 					</ul>
 				</section>
 				<section id="project-wrapper">
 					<h2>projects</h2>
 					<div>
 						<article class="project-item">
 							<div>
 								<h3>
 									<a
 										href="https://github.com/pt-spring-2021-team-project-spa/team-2-spa-repo"
 										target="_blank"
 										>Mystery Educator</a
 									>
 								</h3>
 							</div>
 							<div id="project-container">
 								<div class="container-right">
 									<img
 										src="/images/mystery-educator.png"
 										alt="virtual-pet-amok-console"
 									/>
 									<div class="project-desc">
 										<p>
 											Designed a single page application
 											that brings back unique data from
 											MET Museum and NASA APIs.
 										</p>
 									</div>
 								</div>
 								<div class="project-skills">
 									<h4>skills</h4>
 									<ul>
 										<li>Java</li>
 										<li>JavaScript</li>
 										<li>HTML</li>
 										<li>CSS</li>
 										<li>VS Code</li>
 										<li>Github</li>
 										<li>TDD</li>
 										<li>OOP</li>
 									</ul>
 								</div>
 							</div>
 						</article>
 						<article class="project-item">
 							<div>
 								<h3>
 									<a
 										href="https://github.com/2021-Spring-Part-Time/donut-clicker-lerko96"
 										target="_blank"
 										>Donut Clicker</a
 									>
 								</h3>
 							</div>
 							<div id="project-container">
 								<div class="container-right">
 									<img
 										src="/images/donut-clicker.png"
 										alt="virtual-pet-amok-console"
 									/>
 									<div class="project-desc">
 										<p>
 											Designed a single page application
 											that lets users make virtual donuts
 											and buy upgrades for the game.
 										</p>
 									</div>
 								</div>
 								<div class="project-skills">
 									<h4>skills</h4>
 									<ul>
 										<li>JavaScript</li>
 										<li>HTML</li>
 										<li>CSS</li>
 										<li>VS Code</li>
 										<li>Github</li>
 										<li>TDD</li>
 										<li>OOP</li>
 									</ul>
 								</div>
 							</div>
 						</article>
 						<article class="project-item">
 							<div>
 								<h3>
 									<a
 										href="https://github.com/pt-spring-2021-team-project-fullstack/team-4-trek"
 										target="_blank"
 										>Trekking Website</a
 									>
 								</h3>
 							</div>
 							<div id="project-container">
 								<div class="container-right">
 									<img
 										src="/images/trek.png"
 										alt="virtual-pet-amok-console"
 									/>
 									<div class="project-desc">
 										<p>
 											Designed an MVC website that lets
 											users find treks located by region
 											and continent.
 										</p>
 									</div>
 								</div>
 								<div class="project-skills">
 									<h4>skills</h4>
 									<ul>
 										<li>Java</li>
 										<li>SpringJPA</li>
 										<li>HTML</li>
 										<li>CSS</li>
 										<li>IntelliJ</li>
 										<li>VS Code</li>
 										<li>Github</li>
 										<li>TDD</li>
 										<li>OOP</li>
 									</ul>
 								</div>
 							</div>
 						</article>
 						<article class="project-item">
 							<div>
 								<h3>
 									<a
 										href="https://github.com/2021-Spring-Part-Time/reviews-mvc-lerko96"
 										target="_blank"
 										>Reviews Site</a
 									>
 								</h3>
 							</div>
 							<div id="project-container">
 								<div class="container-right">
 									<img src="/images/review-site.png" alt="" />
 									<div class="project-desc">
 										<p>
 											Designed a movie reviews website
 											using thymeleaf templates.
 										</p>
 									</div>
 								</div>
 								<div class="project-skills">
 									<h4>skills</h4>
 									<ul>
 										<li>Java</li>
 										<li>Thymeleaf</li>
 										<li>HTML</li>
 										<li>CSS</li>
 										<li>IntelliJ</li>
 										<li>Github</li>
 										<li>TDD</li>
 										<li>OOP</li>
 									</ul>
 								</div>
 							</div>
 						</article>
 						<article class="project-item">
 							<div>
 								<h3>
 									<a
 										href="https://github.com/2021-Spring-Part-Time/virtual-pets-amok-lerko96"
 										target="_blank"
 										>Virtual Pets Amok</a
 									>
 								</h3>
 							</div>
 							<div id="project-container">
 								<div class="container-right">
 									<img
 										src="/images/amok.png"
 										alt="virtual-pet-amok-console"
 									/>
 									<div class="project-desc">
 										<p>
 											Console App that builds off of
 											virtual-pet-shelter. This add's
 											robotic pets to the shelter, with
 											their own robotic needs.
 										</p>
 									</div>
 								</div>
 								<div class="project-skills">
 									<h4>skills</h4>
 									<ul>
 										<li>TDD</li>
 										<li>polymorphism</li>
 										<li>encapsulation</li>
 										<li>interface (implements)</li>
 										<li>abstract class (extends)</li>
 									</ul>
 								</div>
 							</div>
 						</article>
 						<article class="project-item">
 							<div>
 								<h3>
 									<a
 										href="https://github.com/2021-Spring-Part-Time/virtual-pet-shelter-lerko96"
 										target="_blank"
 									>
 										Virtual Pet Shelter</a
 									>
 								</h3>
 							</div>
 							<div id="project-container">
 								<div class="container-right">
 									<img
 										src="/images/shelter.png"
 										alt="virtual-pet-shelter-console"
 									/>
 									<div class="project-desc">
 										<p>
 											Built a console application allowing
 											users to take care of multiple pets.
 											Added the ability to admit pets, or
 											adopt.
 										</p>
 									</div>
 								</div>
 								<div class="project-skills">
 									<h4>skills</h4>
 									<ul>
 										<li>TDD</li>
 										<li>constructor() {...}</li>
 										<li>getter() {...}</li>
 										<li>map<> = hashmap<>()></li>
 										<li>collections<></li>
 									</ul>
 								</div>
 							</div>
 						</article>
 						<article class="project-item">
 							<div>
 								<h3>
 									<a
 										href="https://github.com/2021-Spring-Part-Time/virtual-pet-lerko96"
 										target="_blank"
 									>
 										Virtual Pet</a
 									>
 								</h3>
 							</div>
 							<div id="project-container">
 								<div class="container-right">
 									<img
 										src="/images/pet.png"
 										alt="virtual-pet-console"
 									/>
 									<div class="project-desc">
 										<p>
 											Built a console application in Java
 											that allows the user to take care of
 											one virtual pet. This includes
 											keeping track of the pets' hunger,
 											thirst and bordedom.
 										</p>
 									</div>
 								</div>
 								<div class="project-skills">
 									<h4>skills</h4>
 									<ul>
 										<li>game loop</li>
 										<li>user input</li>
 										<li>classes</li>
 										<li>instance variables</li>
 										<li>methods</li>
 										<li>clean code</li>
 									</ul>
 								</div>
 							</div>
 						</article>
 					</div>
 				</section>
 			</main>
 			<footer>
 				<span id="copyright">&copy; 2021 Tyler Koenig</span>
 				<div id="footLinks">
 					<a
 						href="https://github.com/lerko96"
 						target="_blank"
 						title="github"
 						><i class="fa fa-github fa-2x" aria-hidden="true"></i
 					></a>
 					<a
 						href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
 						target="_blank"
 						title="LinkedIn"
 						><i
 							class="fa fa-linkedin-square fa-2x"
 							aria-hidden="true"
 						></i
 					></a>
 					<a
 						href="mailto:tylerkng96@icloud.com"
 						target="_blank"
 						title="email"
 						><i
 							class="fa fa-envelope-o fa-2x"
 							aria-hidden="true"
 						></i
 					></a>
 				</div>
 			</footer>
 		</div>
 		<script src="index.js" type="text/java"></script>
 	</body>
 </html>
--- a/index.js
+++ b/index.js
@@ -1,23 +0,0 @@
 console.log('hello nurse');
 var slideIndex = 1;
 showDivs(slideIndex);
 function plusDivs(n) {
 	showDivs((slideIndex += n));
 }
 function showDivs(n) {
 	var i;
 	var x = document.getElementsByClassName('mySlides');
 	if (n > x.length) {
 		slideIndex = 1;
 	}
 	if (n < 1) {
 		slideIndex = x.length;
 	}
 	for (i = 0; i < x.length; i++) {
 		x[i].style.display = 'none';
 	}
 	x[slideIndex - 1].style.display = 'block';
 }
--- a/next.config.ts
+++ b/next.config.ts
@@ -0,0 +1,11 @@
 import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
  output: "export",
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
 };
 export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,31 @@
 {
  "name": "lerko96-portfolio",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://www.lerko96.com",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "postbuild": "node -e \"require('fs').writeFileSync('out/.nojekyll', '')\"",
    "start": "next start",
    "lint": "eslint",
    "predeploy": "npm run build",
    "deploy": "gh-pages -b master -d out -t"
  },
  "dependencies": {
    "next": "16.2.2",
    "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"
  }
 }
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -0,0 +1,7 @@
 const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
 };
 export default config;
--- a/public/file.svg
+++ b/public/file.svg
@@ -0,0 +1 @@
 <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>
--- a/public/globe.svg
+++ b/public/globe.svg
@@ -0,0 +1 @@
 <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>
--- a/public/images/headshot-tyler_koenig.png
+++ b/public/images/headshot-tyler_koenig.png
--- a/public/next.svg
+++ b/public/next.svg
@@ -0,0 +1 @@
 <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>
--- a/public/vercel.svg
+++ b/public/vercel.svg
@@ -0,0 +1 @@
 <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>
--- a/public/window.svg
+++ b/public/window.svg
@@ -0,0 +1 @@
 <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>
--- a/src/app/archive/page.tsx
+++ b/src/app/archive/page.tsx
@@ -0,0 +1,68 @@
 import type { Metadata } from "next";
 import Widget from "@/components/Widget";
 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-16">
        <p className="font-mono text-base font-bold text-[var(--color-text)] mb-3">
          <span className="text-[var(--color-accent-green)] select-none mr-2" aria-hidden="true">❯</span>
          tyler/projects/archive
        </p>
        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-xl opacity-80">
          Experiments, browser extensions, and bootcamp projects. Kept here for context — not
          representative of current work.
        </p>
      </div>
      <Widget title="tyler/projects/archive" badge={archiveProjects.length} as="section">
        <div className="flex flex-col gap-px bg-[var(--color-border)]">
          {archiveProjects.map((project) => (
            <a
              key={project.slug}
              href={project.githubUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start justify-between gap-6 px-4 py-4 group"
            >
              <div className="flex flex-col gap-2 flex-1 min-w-0">
                <div className="flex items-center gap-3">
                  {project.year && (
                    <span className="font-mono text-xs text-[var(--color-text-dim)] shrink-0">
                      {project.year}
                    </span>
                  )}
                  <span className="font-mono text-sm text-[var(--color-text)] group-hover:text-[var(--color-accent-green)] truncate">
                    {project.title}
                  </span>
                </div>
                <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
                  {project.description}
                </p>
                <div className="flex flex-wrap gap-x-3 gap-y-0.5">
                  {project.tags.map((tag) => (
                    <span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]">
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
              <span
                className="font-mono text-xs text-[var(--color-text-label)] group-hover:text-[var(--color-text)] shrink-0 mt-0.5"
                aria-hidden="true"
              >
                ↗
              </span>
            </a>
          ))}
        </div>
      </Widget>
    </>
  );
 }
--- a/src/app/favicon.ico
+++ b/src/app/favicon.ico
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -0,0 +1,93 @@
@import "tailwindcss";
@variant dark (&:where(.dark, .dark *));
@theme {
  /* macOS Classic Dark (default) */
  --color-bg:             #131313;
  --color-surface:        #1e1d1e;
  --color-surface-raised: #272727;
  --color-border:         #3a3a3a;
  --color-border-bright:  #404040;
  --color-text:           #caccca;
  --color-text-label:     #9e9e9e;
  --color-text-dim:       #8f8f8f;
  --color-accent-green:   #62ba46;
  --color-accent-red:     #c74028;
  /* Timeline type colors — dark */
  --color-timeline-career:    #62ba46;
  --color-timeline-education: #c28b12;
  --color-timeline-cert:      #c75828;
  --color-timeline-project:   #c72855;
  --color-timeline-homelab:   #e1d797;
  /* Typography */
  --font-mono: "Source Code Pro", ui-monospace, monospace;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  /* Breakpoints */
  --breakpoint-xs: 576px;
  /* Animations */
  --animate-fade-in: fadeIn 120ms linear forwards;
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
 }
 /* Base */
 html {
  scroll-behavior: smooth;
  font-size: 14px;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
 }
@keyframes blink { 50% { opacity: 0; } }
 .animate-cursor { animation: blink 1s step-start infinite; }
@layer base {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
 }
 /* macOS Classic Light overrides */
 :root:not(.dark) {
  --color-bg:             #ffffff;
  --color-surface:        #f9f9f9;
  --color-surface-raised: #f7f7f7;
  --color-border:         #e0e0e0;
  --color-border-bright:  #d2d2d2;
  --color-text:           #000000;
  --color-text-label:     #505050;
  --color-text-dim:       #929292;
  --color-accent-green:   #036a07;
  --color-accent-red:     #d21f07;
  --color-timeline-career:    #036a07;
  --color-timeline-education: #0433ff;
  --color-timeline-cert:      #957931;
  --color-timeline-project:   #6f42c1;
  --color-timeline-homelab:   #0000a2;
 }
 /* Default transitions — linear, fast */
 a,
 button {
  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;
    transition-duration: 0.01ms !important;
  }
 }
--- a/src/app/homelab/page.tsx
+++ b/src/app/homelab/page.tsx
@@ -0,0 +1,247 @@
 import type { Metadata } from "next";
 import Widget from "@/components/Widget";
 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 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" },
 ];
 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.",
    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.",
  },
  {
    title: "Authentik over Authelia",
    decision: "Authentik as the SSO provider across all self-hosted services.",
    why: "Full OIDC provider + forward auth in one. Lets services like Outline, Gitea, and Vikunja use real SSO rather than just a login gate. Authelia is forward-auth only — no OIDC provider capability.",
  },
 ];
 export default function HomelabPage() {
  return (
    <>
      {/* Header */}
      <div className="mb-16">
        <p className="font-mono text-base font-bold text-[var(--color-text)] mb-3">
          <span className="text-[var(--color-accent-green)] select-none mr-2" aria-hidden="true">❯</span>
          homelab
        </p>
        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-2xl opacity-80">
          Personal infrastructure environment for learning, self-hosting, and operational
          practice. Running 24/7 on production-grade hardware with real network segmentation,
          SSO, monitoring, and IaC-style documentation.
        </p>
      </div>
      {/* At a Glance */}
      <Widget title="homelab/overview" badge={glanceStats.length} as="section">
        <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
          {glanceStats.map(({ label, value }) => (
            <div
              key={label}
              className="bg-[var(--color-surface)] px-4 py-3"
            >
              <p className="font-mono text-xs text-[var(--color-text-dim)] uppercase tracking-wider mb-1">
                {label}
              </p>
              <p className="font-mono text-sm text-[var(--color-text)]">{value}</p>
            </div>
          ))}
        </div>
      </Widget>
      {/* VLAN table */}
      <Widget
        title="homelab/network"
        meta="8 isolated vlans · default deny inter-vlan"
        as="section"
      >
        <div className="overflow-x-auto">
          <table className="w-full text-xs border-collapse">
            <thead>
              <tr className="border-b border-[var(--color-border)]">
                <th className="font-mono text-[var(--color-text-dim)] text-left py-2 pr-6 uppercase tracking-wider">
                  VLAN
                </th>
                <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-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-mono text-sm text-[var(--color-text)] py-2.5 opacity-80">{v.purpose}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Widget>
      {/* Services */}
      <Widget
        title="homelab/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}>
                <p className="font-mono text-xs text-[var(--color-text-dim)] uppercase tracking-wider mb-3">
                  {categoryLabels[cat]}
                </p>
                <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
                  {catServices.map((svc) => (
                    <div
                      key={svc.name}
                      className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start gap-3 px-4 py-3"
                    >
                      <i
                        className={`${svc.icon} text-[var(--color-text-label)] text-xs mt-0.5 w-3.5 shrink-0`}
                        aria-hidden="true"
                      />
                      <div>
                        <p className="font-mono text-xs text-[var(--color-text)] mb-0.5">
                          {svc.name}
                        </p>
                        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
                          {svc.description}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </Widget>
      {/* ADRs */}
      <Widget
        title="homelab/ADRs"
        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="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-4 py-4"
            >
              <p className="font-mono text-sm text-[var(--color-text)] mb-2">{adr.title}</p>
              <p className="font-mono 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-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
                <span className="text-[var(--color-text-label)] opacity-100">why: </span>
                {adr.why}
              </p>
            </div>
          ))}
        </div>
      </Widget>
      {/* GitHub CTA */}
      <section className="pt-2">
        <p className="font-mono text-sm text-[var(--color-text-dim)] mb-1">homelab/docs → github.com/lerko96/homelab-wip</p>
        <p className="font-mono text-sm text-[var(--color-text)] mb-3 opacity-75">
          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="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
        >
          ↗ github.com/lerko96/homelab-wip
        </a>
      </section>
    </>
  );
 }
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -0,0 +1,49 @@
 import type { Metadata } from "next";
 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 sourceCodePro = Source_Code_Pro({
  subsets: ["latin"],
  variable: "--font-mono",
  display: "swap",
 });
 export const metadata: Metadata = {
  title: "Tyler Koenig",
  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 />
      </head>
      <body
        className={`${sourceCodePro.variable} bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen`}
      >
        <ThemeProvider>
          {/* Full-width sticky nav */}
          <Nav />
          {/* 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>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -0,0 +1,30 @@
 import type { Metadata } from "next";
 import Hero from "@/components/Hero";
 import Skills from "@/components/Skills";
 import Timeline from "@/components/Timeline";
 import ProjectCard from "@/components/ProjectCard";
 import Widget from "@/components/Widget";
 import { featuredProjects } from "@/data/projects";
 export const metadata: Metadata = {
  title: "Tyler Koenig",
  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 />
      <Widget title="tyler/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>
      <Skills />
      <Timeline />
    </>
  );
 }
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -0,0 +1,31 @@
 export default function Footer() {
  return (
    <footer className="border-t border-[var(--color-border)] py-5 mt-8">
      <div className="px-8 flex items-center justify-between">
        <span className="font-mono text-sm text-[var(--color-text-dim)]">
          &copy; {new Date().getFullYear()} Tyler Koenig
        </span>
        <div className="flex items-center gap-5">
          <a
            href="https://github.com/lerko96"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="GitHub"
            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
          >
            [github]
          </a>
          <a
            href="https://www.linkedin.com/in/tyler-koenig"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="LinkedIn"
            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
          >
            [linkedin]
          </a>
        </div>
      </div>
    </footer>
  );
 }
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -0,0 +1,56 @@
 export default function Hero() {
  return (
    <section className="mb-16">
      <div className="flex flex-col gap-3">
        <div>
          <p className="font-mono text-base font-bold text-[var(--color-text)]">
            <span className="text-[var(--color-accent-green)] select-none mr-2" aria-hidden="true">❯</span>
            tyler koenig
          </p>
          <p className="font-mono text-sm text-[var(--color-text-label)] mt-0.5">
            Security Operations · Self-Hosted Infrastructure
          </p>
        </div>
        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-lg opacity-70">
          Security operations and self-hosted infrastructure. Homelab runs 37
          services across segmented VLANs — pfSense, Authentik SSO, full
          observability stack. Write software too: mobile apps, Go backends,
          open protocols. Daily drivers, all of it.{' '}
          <span className="animate-cursor text-[var(--color-accent-green)]" aria-hidden="true">█</span>
        </p>
        <div className="flex flex-wrap items-center gap-x-5 gap-y-1">
          <span className="font-mono text-sm text-[var(--color-accent-green)]">
            ● available
          </span>
          <a
            href="https://github.com/lerko96"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="GitHub"
            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
          >
            [github]
          </a>
          <a
            href="https://www.linkedin.com/in/tyler-koenig"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="LinkedIn"
            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
          >
            [linkedin]
          </a>
          <a
            href="mailto:tylerkoenig96@gmail.com"
            aria-label="Email"
            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
          >
            [email]
          </a>
        </div>
      </div>
    </section>
  );
 }
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -0,0 +1,59 @@
 "use client";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useTheme } from "@/context/ThemeContext";
 const links = [
  { href: "/", label: "tyler" },
  { href: "/homelab/", label: "homelab" },
  { href: "/archive/", label: "archive" },
 ];
 export default function Nav() {
  const pathname = usePathname();
  const { isDark, toggle } = useTheme();
  return (
    <header className="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
      <nav className="max-w-[740px] mx-auto px-8 h-11 flex items-center justify-between">
        <Link
          href="/"
          className="font-mono text-sm font-bold text-[var(--color-text)] hover:text-[var(--color-text-label)]"
        >
          ~/
        </Link>
        <ul className="flex items-center 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-sm ${
                    active
                      ? "text-[var(--color-text)]"
                      : "text-[var(--color-text-label)] hover:text-[var(--color-text)]"
                  }`}
                >
                  {label}
                </Link>
              </li>
            );
          })}
          <li>
            <button
              onClick={toggle}
              aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
              className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
            >
              {isDark ? "[light]" : "[dark]"}
            </button>
          </li>
        </ul>
      </nav>
    </header>
  );
 }
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -0,0 +1,67 @@
 import type { Project } from "@/data/projects";
 type Props = {
  project: Project;
 };
 export default function ProjectCard({ project }: Props) {
  return (
    <article className="border border-[var(--color-border)] bg-[var(--color-surface)] flex flex-col gap-4 p-5 hover:bg-[var(--color-surface-raised)]">
      <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)]"
        >
          {project.title}
        </a>
        <div className="flex items-center gap-3 shrink-0">
          {project.stats && (
            <span className="font-mono text-sm text-[var(--color-text-dim)]">
              {project.stats}
            </span>
          )}
          {project.externalUrl && (
            <a
              href={project.externalUrl}
              target="_blank"
              rel="noopener noreferrer"
              aria-label={`View ${project.title} externally`}
              className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
            >
              ↗
            </a>
          )}
          <a
            href={project.githubUrl}
            target="_blank"
            rel="noopener noreferrer"
            aria-label={`View ${project.title} on GitHub`}
            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
          >
            ↗
          </a>
        </div>
      </div>
      {project.statusBadge && (
        <span className="font-mono text-xs text-[var(--color-accent-amber,#d4a027)] border border-[var(--color-accent-amber,#d4a027)] px-1.5 py-0.5 w-fit opacity-80">
          {project.statusBadge}
        </span>
      )}
      <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-70">
        {project.description}
      </p>
      <div className="flex flex-wrap gap-x-3 gap-y-1 mt-1">
        {project.tags.map((tag) => (
          <span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]">
            {tag}
          </span>
        ))}
      </div>
    </article>
  );
 }
--- a/src/components/Skills.tsx
+++ b/src/components/Skills.tsx
@@ -0,0 +1,48 @@
 import Widget from "@/components/Widget";
 const skillGroups = [
  {
    label: "Languages",
    skills: ["Go", "JavaScript", "TypeScript", "HTML", "CSS"],
  },
  {
    label: "Frontend",
    skills: ["React", "React Native", "Expo", "Next.js", "Three.js"],
  },
  {
    label: "Desktop & Tools",
    skills: ["Electron", "Node.js", "REST APIs", "Git", "Docker", "TDD"],
  },
  {
    label: "Infrastructure",
    skills: ["Proxmox", "pfSense", "VLANs", "WireGuard", "Linux", "Caddy"],
  },
  {
    label: "Practices",
    skills: ["Agile / Scrum", "Relational Databases", "Self-hosting"],
  },
 ];
 const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);
 export default function Skills() {
  return (
    <Widget title="tyler/skills" badge={totalCount} as="section">
      <div className="flex flex-col">
        {skillGroups.map(({ label, skills }) => (
          <div
            key={label}
            className="flex flex-col xs:flex-row gap-1 xs:gap-6 py-3"
          >
            <span className="font-mono text-sm text-[var(--color-text-dim)] w-28 shrink-0">
              {label}
            </span>
            <span className="font-mono text-sm text-[var(--color-text)]">
              {skills.join(" · ")}
            </span>
          </div>
        ))}
      </div>
    </Widget>
  );
 }
--- a/src/components/ThemeScript.tsx
+++ b/src/components/ThemeScript.tsx
@@ -0,0 +1,12 @@
 // 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 }} />;
 }
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@@ -0,0 +1,107 @@
 'use client'
 import { useEffect, useRef } from 'react'
 import Widget from '@/components/Widget'
 import { timeline, type TimelineType } from '@/data/timeline'
 const typeColor: Record<TimelineType, string> = {
  career:    'var(--color-timeline-career)',
  education: 'var(--color-timeline-education)',
  cert:      'var(--color-timeline-cert)',
  project:   'var(--color-timeline-project)',
  homelab:   'var(--color-timeline-homelab)',
 }
 const typeLabel: Record<TimelineType, string> = {
  career:    'career',
  education: 'education',
  cert:      'cert',
  project:   'project',
  homelab:   'homelab',
 }
 export default function Timeline() {
  const listRef = useRef<HTMLOListElement>(null)
  useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
    const entries = listRef.current?.querySelectorAll<HTMLLIElement>('[data-tl-entry]')
    if (!entries) return
    const observer = new IntersectionObserver(
      (observed) => {
        observed.forEach((entry) => {
          if (entry.isIntersecting) {
            ;(entry.target as HTMLElement).style.opacity = '1'
            ;(entry.target as HTMLElement).style.transform = 'translateY(0)'
            observer.unobserve(entry.target)
          }
        })
      },
      { threshold: 0.15 },
    )
    entries.forEach((el) => {
      el.style.opacity = '0'
      el.style.transform = 'translateY(8px)'
      el.style.transition = 'opacity 240ms linear, transform 240ms linear'
      observer.observe(el)
    })
    return () => observer.disconnect()
  }, [])
  return (
    <Widget title="tyler/journey">
      <ol ref={listRef} className="relative border-l border-[var(--color-border)] ml-1.5 flex flex-col gap-0">
        {timeline.map((entry, i) => (
          <li key={i} data-tl-entry className="pl-6 pb-8 last:pb-0 relative">
            {/* Spine dot */}
            <span
              className="absolute -left-[7px] top-[3px] w-3 h-3 rounded-full border border-[var(--color-bg)] shrink-0"
              style={{ backgroundColor: typeColor[entry.type] }}
              aria-hidden="true"
            />
            {/* Date + type badge */}
            <div className="flex items-center gap-2 mb-1">
              <span className="font-mono text-sm text-[var(--color-text-dim)]">{entry.date}</span>
              <span
                className="font-mono text-[10px] uppercase tracking-wider px-1 rounded-sm border"
                style={{
                  color: typeColor[entry.type],
                  borderColor: typeColor[entry.type],
                  opacity: 0.7,
                }}
              >
                {typeLabel[entry.type]}
              </span>
            </div>
            {/* Title */}
            <p className="font-mono text-sm font-semibold text-[var(--color-text)] mb-1">
              {entry.title}
            </p>
            {/* Description */}
            <p className="font-mono text-sm text-[var(--color-text)] opacity-70 leading-relaxed mb-2">
              {entry.description}
            </p>
            {/* Tags */}
            {entry.tags && entry.tags.length > 0 && (
              <div className="flex flex-wrap gap-x-3 gap-y-1">
                {entry.tags.map((tag) => (
                  <span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]">
                    {tag}
                  </span>
                ))}
              </div>
            )}
          </li>
        ))}
      </ol>
    </Widget>
  )
 }
--- a/src/components/Widget.tsx
+++ 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) {
  const slashIdx = title.lastIndexOf("/");
  const prefix = slashIdx >= 0 ? title.slice(0, slashIdx + 1) : null;
  const name = slashIdx >= 0 ? title.slice(slashIdx + 1) : title;
  return (
    <Tag className={`mb-16 ${className ?? ""}`}>
      <div className="flex items-center gap-2 mb-8">
        {prefix && (
          <span className="font-mono text-sm text-[var(--color-text-dim)] select-none">{prefix}</span>
        )}
        <span className="font-mono text-sm font-semibold text-[var(--color-text)]">{name}</span>
        {badge !== undefined && (
          <span className="font-mono text-xs text-[var(--color-text-dim)]">[{badge}]</span>
        )}
        {meta && (
          <span className="font-mono text-xs text-[var(--color-text-dim)] ml-1">— {meta}</span>
        )}
      </div>
      {children}
    </Tag>
  );
 }
--- a/src/context/ThemeContext.tsx
+++ b/src/context/ThemeContext.tsx
@@ -0,0 +1,41 @@
 "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);
 }
--- a/src/data/projects.ts
+++ b/src/data/projects.ts
@@ -0,0 +1,132 @@
 export type Project = {
  slug: string;
  title: string;
  description: string;
  tags: string[];
  githubUrl: string;
  tier: "featured" | "archive";
  stats?: string;
  year?: number;
  statusBadge?: string;
  externalUrl?: string;
 };
 export const projects: Project[] = [
  // --- Featured ---
  {
    slug: "golf-book-mobile",
    title: "golf-book-mobile",
    description:
      "Offline-first mobile app for tracking golf rounds, managing your 14-club bag, and getting AI-powered club recommendations from a Smart Caddie. Covers 7 shot types per hole with full scorecard history.",
    tags: ["React Native", "Expo", "Zustand", "AI", "Mobile"],
    githubUrl: "https://github.com/lerko96/golf-book-mobile",
    tier: "featured",
    stats: "211 commits",
    statusBadge: "Pending App Store Approval",
    externalUrl: "#",
  },
  {
    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: "open-pact",
    title: "open-pact",
    description:
      "Open protocol for AI agent identity, delegation, and portable memory. Ed25519 keypair identity, signed delegation warrants, portable signed memory facts. No central registry.",
    tags: ["TypeScript", "Ed25519", "DID", "npm", "CC0"],
    githubUrl: "https://github.com/lerko96/open-pact",
    tier: "featured",
  },
  {
    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: "featured",
  },
  // --- Archive ---
  {
    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: "twitter-thread-ext",
    title: "twitter-thread-ext",
    description:
      "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",
    tier: "archive",
    year: 2023,
  },
  {
    slug: "notes-app-1.0",
    title: "notes-app-1.0",
    description:
      "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",
    tier: "archive",
    year: 2022,
  },
  {
    slug: "were-hooked",
    title: "We're Hooked",
    description:
      "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",
    tier: "archive",
    year: 2022,
  },
  {
    slug: "mystery-educator",
    title: "Mystery Educator",
    description:
      "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",
    tier: "archive",
    year: 2022,
  },
 ];
 export const featuredProjects = projects.filter((p) => p.tier === "featured");
 export const archiveProjects = projects.filter((p) => p.tier === "archive");
--- a/src/data/services.ts
+++ b/src/data/services.ts
@@ -0,0 +1,71 @@
 export type Service = {
  name: string;
  description: string;
  category: "infrastructure" | "security" | "monitoring" | "productivity" | "media";
  icon: string; // Font Awesome class
 };
 export const services: Service[] = [
  // Infrastructure
  { name: "pfSense", description: "Firewall, DHCP, routing gateway on N100", category: "infrastructure", icon: "fas fa-shield-halved" },
  { name: "Caddy", description: "Reverse proxy with automatic wildcard TLS via Cloudflare DNS-01", category: "infrastructure", icon: "fas fa-globe" },
  { name: "Pi-hole", description: "Network-wide DNS + ad blocking", category: "infrastructure", icon: "fas fa-filter" },
  { name: "WireGuard", description: "VPN — full LAN access for remote clients", category: "infrastructure", icon: "fas fa-lock" },
  { name: "mail relay", description: "Outbound SMTP relay for self-hosted service notifications", category: "infrastructure", icon: "fas fa-envelope" },
  { name: "gluetun", description: "VPN container routing download client traffic", category: "infrastructure", icon: "fas fa-shield" },
  { name: "Home Assistant", description: "Smart home automation and device management", category: "infrastructure", icon: "fas fa-house" },
  // Security / Auth
  { name: "Authentik", description: "SSO provider — OIDC + forward auth across all services", category: "security", icon: "fas fa-id-badge" },
  { name: "Vaultwarden", description: "Self-hosted password manager, isolated in its own LXC", category: "security", icon: "fas fa-vault" },
  // Monitoring
  { name: "Victoria Metrics", description: "Long-term metrics storage and querying", category: "monitoring", icon: "fas fa-chart-line" },
  { name: "Grafana", description: "Dashboards and alerting across all hosts and services", category: "monitoring", icon: "fas fa-chart-bar" },
  { name: "Beszel", description: "Lightweight container and host monitoring", category: "monitoring", icon: "fas fa-server" },
  { name: "ntfy", description: "Self-hosted push notifications", category: "monitoring", icon: "fas fa-bell" },
  // Productivity
  { name: "Gitea", description: "Personal Git server", category: "productivity", icon: "fas fa-code-branch" },
  { name: "Outline", description: "Team wiki and knowledge base", category: "productivity", icon: "fas fa-book" },
  { name: "Vikunja", description: "Task management", category: "productivity", icon: "fas fa-list-check" },
  { name: "Actual Budget", description: "Personal budgeting", category: "productivity", icon: "fas fa-wallet" },
  { name: "Ghostfolio", description: "Investment portfolio tracking", category: "productivity", icon: "fas fa-coins" },
  { name: "Hoarder", description: "Bookmark manager with tagging", category: "productivity", icon: "fas fa-bookmark" },
  { name: "FreshRSS", description: "RSS reader", category: "productivity", icon: "fas fa-rss" },
  { name: "Memos", description: "Quick notes and journal", category: "productivity", icon: "fas fa-note-sticky" },
  { name: "Traggo", description: "Time tracking", category: "productivity", icon: "fas fa-clock" },
  { name: "Baikal", description: "CalDAV / CardDAV server", category: "productivity", icon: "fas fa-calendar" },
  { name: "Grist", description: "Spreadsheets and structured data", category: "productivity", icon: "fas fa-table" },
  { name: "Glance", description: "Self-hosted start page with feeds and service status", category: "productivity", icon: "fas fa-gauge" },
  { name: "Filebrowser", description: "Web-based file manager", category: "productivity", icon: "fas fa-folder-open" },
  // Media
  { name: "Plex", description: "Media streaming — movies, TV, music", category: "media", icon: "fas fa-film" },
  { name: "Jellyfin", description: "Open-source media streaming", category: "media", icon: "fas fa-play" },
  { name: "Sonarr", description: "Automated TV show management", category: "media", icon: "fas fa-tv" },
  { name: "Radarr", description: "Automated movie management", category: "media", icon: "fas fa-video" },
  { name: "Lidarr", description: "Automated music management", category: "media", icon: "fas fa-music" },
  { name: "Prowlarr", description: "Indexer manager and proxy for the *arr stack", category: "media", icon: "fas fa-magnifying-glass" },
  { name: "Bazarr", description: "Automatic subtitle download and management", category: "media", icon: "fas fa-closed-captioning" },
  { name: "nzbget", description: "Usenet downloader", category: "media", icon: "fas fa-download" },
  { name: "qBittorrent", description: "Torrent client with web UI", category: "media", icon: "fas fa-magnet" },
  { name: "Kavita", description: "Self-hosted manga and book reader", category: "media", icon: "fas fa-book-open" },
  { name: "Openshelf", description: "Book library with auto-ingest", category: "media", icon: "fas fa-book-open" },
 ];
 export const categoryOrder: Service["category"][] = [
  "infrastructure",
  "security",
  "monitoring",
  "productivity",
  "media",
 ];
 export const categoryLabels: Record<Service["category"], string> = {
  infrastructure: "Core Infrastructure",
  security: "Security & Auth",
  monitoring: "Monitoring",
  productivity: "Productivity",
  media: "Media",
 };
--- a/src/data/timeline.ts
+++ b/src/data/timeline.ts
@@ -0,0 +1,75 @@
 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: '2026',
    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: 'Portfolio Site v2',
    type: 'project',
    description: 'Next.js 16 static site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.',
    tags: ['next.js', 'tailwind', 'self-hosted'],
  },
  {
    date: '2024',
    title: 'CompTIA A+',
    type: 'cert',
    description: 'Earned A+ certification, formalizing hardware and OS fundamentals.',
    tags: ['certification'],
  },
  {
    date: '2024',
    title: 'Project Helm',
    type: 'project',
    description: 'Full-stack task and project management tool built in Go + React.',
    tags: ['go', 'react', 'typescript'],
  },
  {
    date: 'ongoing',
    title: 'Homelab — Proxmox Cluster',
    type: 'homelab',
    description: '8-VLAN segmented network, Proxmox VMs/LXCs, SSO via Authentik, full monitoring stack (VictoriaMetrics + Grafana + Beszel + ntfy).',
    tags: ['proxmox', 'networking', 'monitoring', 'sso'],
  },
  {
    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-07',
    title: 'Config Tech I — MCPc',
    type: 'career',
    description: 'Hardware configuration, OS imaging, and deployment at scale for enterprise clients.',
    tags: ['sysadmin', 'hardware'],
  },
  {
    date: '2021',
    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'],
  },
 ]
--- a/style.css
+++ b/style.css
@@ -1,376 +0,0 @@
 html {
 	scroll-behavior: smooth;
 }
 body {
 	box-sizing: border-box;
 	color: #c9cacc;
 	background-color: #272727;
 	font-size: 16px;
 	font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif;
 	font-weight: 400;
 	line-height: 1.725;
 	text-rendering: geometricPrecision;
 	min-height: 100vh;
 	margin: 0 auto;
 }
 #wrapper {
 	display: flex;
 	flex-direction: column;
 	width: 100%;
 	max-width: 560px;
 	margin: 0 auto;
 }
 nav ul {
 	list-style-type: none;
 	margin: auto;
 	padding: 0em;
 }
 nav a {
 	text-decoration: none;
 	border-radius: 500px;
 	padding: 0.2rem;
 	font-weight: 600;
 	display: flex;
 	justify-content: center;
 	color: #c9cacc;
 	letter-spacing: 0.09rem;
 }
 nav a:hover {
 	background-color: #29f3c3;
 	color: #1b1b1b;
 	transition: 150ms ease;
 }
 header {
 	color: #c9cacc;
 	margin: 0 auto;
 	text-align: center;
 	padding: 2rem;
 	line-height: 1.75rem;
 	border-top: 1.5px solid #666;
 	border-bottom: 1.5px solid #666;
 }
 header img {
 	width: 100px;
 	border: 5px solid #666;
 	border-radius: 165px;
 }
 h1 {
 	line-height: 2rem;
 	letter-spacing: 0.01rem;
 }
 h1 a {
 	font-size: 3rem;
 	color: #c9cacc;
 	text-decoration: none;
 }
 h1 a:hover {
 	color: #29f3c3;
 }
 header h2 {
 	font-weight: 200;
 	font-size: 1.2rem;
 	letter-spacing: 0.01rem;
 }
 h2,
 h3,
 h4 {
 	letter-spacing: 0.01rem;
 }
 #aboutMe {
 	letter-spacing: 0.01rem;
 }
 #bio,
 #skills {
 	padding: 1.5rem;
 	text-align: start;
 }
 #bio h2 {
 	font-size: 2.2rem;
 }
 #skills h4 {
 	padding: 1.5rem;
 	color: #666;
 	font-size: 1.5rem;
 	margin: 0 auto 20px;
 }
 #skills ul {
 	line-height: 1.35rem;
 	font-weight: 200;
 	text-align: center;
 	align-items: center;
 	margin: 0;
 	padding: 0;
 	list-style-type: none;
 }
 .skills {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 	gap: 10px 75px;
 	grid-auto-flow: row;
 	grid-template-areas:
 		'. .'
 		'. .'
 		'. .'
 		'. .'
 		'. .'
 		'. .'
 		'. .'
 		'. .';
 }
 #contact {
 	margin-top: 1rem;
 	padding: 1.5rem;
 }
 #contact h3 {
 	font-size: 1.5rem;
 }
 #contact ul {
 	display: flex;
 	list-style-type: none;
 	margin: 0;
 	padding: 0;
 	text-align: center;
 }
 .contactLinks li {
 	display: flex;
 	flex-direction: column;
 	flex: 1;
 }
 .contactLinks a {
 	display: flex;
 	flex-direction: column;
 	color: #c9cacc;
 	text-decoration: none;
 }
 .contactLinks a:hover {
 	font-weight: 600;
 }
 #project-wrapper {
 	margin-top: 2.5rem;
 }
 #project-wrapper h2 {
 	margin: 0;
 	padding: 1.5rem 1.5rem 0 1.5rem;
 	font-size: 2rem;
 }
 #project-wrapper h3 {
 	font-size: 1.5rem;
 	text-align: left;
 	margin: 0 auto;
 	padding: 1.5rem;
 	letter-spacing: 0.01rem;
 }
 .project-item {
 	display: flex;
 	flex-direction: column;
 	margin: 1.5rem 0;
 	text-align: center;
 	font-weight: 200;
 	letter-spacing: 0.01rem;
 }
 .project-item a {
 	color: #c9cacc;
 	text-decoration: none;
 }
 .project-item a:hover {
 	color: #29f3c3;
 }
 .project-desc {
 	margin: 0;
 	padding: 0 0.8rem;
 }
 .project-skills {
 	color: #666;
 	list-style: none;
 	margin: 0 auto;
 	line-height: 1.25rem;
 	text-align: start;
 	padding: 0 1.5rem;
 	display: flex;
 	align-items: baseline;
 }
 .project-skills h4 {
 	font-size: 1.5rem;
 	/* flex: 1; */
 }
 .project-skills li {
 	list-style-type: none;
 	color: #c9cacc;
 }
 .project-skills ul {
 	/* flex: 9; */
 	line-height: 2rem;
 	text-align: start;
 }
 .project-item img {
 	max-width: 375px;
 	/* width: 90%; */
 	box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75);
 	-webkit-box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75);
 	-moz-box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75);
 }
 footer {
 	color: #666;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-around;
 	align-items: center;
 	margin: 0 auto;
 	padding: 1rem;
 }
 #copyright {
 	margin: 0.4rem;
 	letter-spacing: 0.1rem;
 }
 #footLinks {
 	margin: 0.4rem;
 	letter-spacing: 0.8rem;
 }
 #footLinks a {
 	color: #666;
 }
 #footLinks a:hover {
 	color: #c9cacc;
 	transition: 160ms ease-in;
 }
 /* color: #1b1b1b; */
 /* color: #2a9d8f */
@media (min-width: 576px) {
 	#wrapper {
 		width: 560px;
 	}
 	nav {
 		display: flex;
 	}
 	nav a {
 		margin: auto;
 		padding: 0.5rem;
 		flex: 4;
 		justify-content: flex-start;
 	}
 	nav li {
 		display: inline-block;
 	}
 	nav ul {
 		display: flex;
 	}
 	#aboutMe {
 		display: flex;
 	}
 	#bio {
 		flex: 2;
 	}
 	#contact {
 		flex: 1;
 		text-align: end;
 	}
 	.contactLinks {
 		display: flex;
 		flex-direction: column;
 	}
 	.contactLinks li {
 		align-items: flex-end;
 	}
 	.contactLinks a {
 		flex-direction: row;
 	}
 	.contactLinks i {
 		margin: auto 5px;
 	}
 	#skills {
 		padding: 0;
 	}
 	#project-container {
 		display: flex;
 		flex-direction: row-reverse;
 	}
 	.project-item img {
 		flex: 2;
 	}
 	.project-skills {
 		flex: 1;
 		margin: 0;
 		padding: 0;
 		text-align: end;
 		flex-direction: column;
 		align-items: flex-end;
 	}
 	.project-skills h4 {
 		margin: 1.5rem;
 		align-self: flex-start;
 	}
 	.project-skills ul {
 		margin: 1.5rem;
 		padding: 0;
 	}
 	.project-item a {
 		align-self: start;
 	}
 	footer {
 		margin: 0 auto;
 		width: 87%;
 		padding: 2rem;
 		flex-direction: row;
 		justify-content: space-between;
 	}
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,34 @@
 {
  "compilerOptions": {
    "target": "ES2017",
    "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"]
 }
Author	SHA1	Message	Date
lerko96	2946801517	ci: auto-tag CalVer after deploy if commit untagged	2026-04-16 21:16:01 -04:00
lerko96	49028e7783	feat(content): reposition for security engineer, expand services to 37 Hero subtitle and blurb rewritten to lead with security operations and homelab credentials over generic "builder" framing. Projects: archive plAIground, service-monitor, ThoughtSpace (2025); add open-pact and helm as featured; add risk-ops to archive (2026). Add statusBadge + externalUrl to Project type; wire golf-book-mobile. Services: 24 → 37 — split grouped arr/media entries, add mail relay, gluetun, Home Assistant, Glance, Filebrowser, Prowlarr, Bazarr, nzbget, qBittorrent, Kavita, Openshelf. Drop Calibre-Web. Skills: add Go to Languages. Timeline: update monitoring stack. Homelab ADRs: add Authentik over Authelia.	2026-04-16 21:06:18 -04:00
lerko96	c36cc94437	feat(ui): add timeline component; complete terminal-noir design system - introduce Timeline component with scroll-in animation and type-colored spine dots (career/edu/cert/project/homelab) - swap terminal-noir palette for macOS Classic dark/light with matching timeline color tokens in globals.css - add light mode overrides, cursor blink keyframe, font-size 14px base - update Widget header: prefix/name split, bracket badge, no divider rule - align archive and homelab page headers to ❯ prompt style - convert all font-sans prose in homelab/archive to font-mono - rename widget titles to namespaced paths (homelab/network, etc.) - skills label: uppercase tracking → plain text-sm; remove row borders	2026-04-16 18:03:33 -04:00
lerko96	6d0b4e29d8	refactor(ui): enforce terminal metaphor, unify secondary opacity - drop headshot photo (coherence break vs. full terminal aesthetic) - replace FA icons with plain-text brackets ([github], [linkedin], [email]) - remove Font Awesome CDN dependency - nav logo tk → ~/; theme toggle fa-sun/fa-moon → [light]/[dark] - reorder home sections: projects before skills/journey - add font-mono + opacity-70 to timeline descriptions (#2 bug + #8 polish) - uniform opacity-70 across hero bio, project desc, timeline desc - add hover:bg-surface-raised to ProjectCard article - drop journey badge count (noise) - change status ● online → ● available	2026-04-16 18:01:19 -04:00
lerko96	7d9b300d84	ci: add GitHub Actions deploy workflow for GitHub Pages All checks were successful Build and Deploy / deploy (push) Successful in 1m1s Details	2026-04-12 22:11:57 -04:00
tyler	4718d5df31	Merge pull request 'fix(docs): update Gitea repo URL to lerko/portfolio' (#3 ) from docs/update-readme-gitea-primary into dev All checks were successful Build and Deploy / deploy (push) Successful in 1m4s Details Reviewed-on: #3	2026-04-13 01:49:21 +00:00
lerko96	153bdf502c	fix(docs): update Gitea repo URL to lerko/portfolio	2026-04-12 21:47:52 -04:00
lerko	a7edf0b22a	Merge pull request 'docs/update-readme-gitea-primary' (#2 ) from docs/update-readme-gitea-primary into dev All checks were successful Build and Deploy / deploy (push) Successful in 50s Details Reviewed-on: lerko/Portfolio#2	2026-04-13 01:43:51 +00:00
lerko96	a9b73fd08e	fix(docs): correct Gitea repo link in README	2026-04-12 21:38:17 -04:00
lerko96	01f012fc26	docs: update README for Gitea/self-hosted setup drop GitHub Pages references, document actual deploy flow via Gitea Actions + rsync to portfolio LXC	2026-04-12 21:23:57 -04:00
lerko96	94cb2da996	feat: terminal-noir redesign with centering fix and readability improvements All checks were successful Build and Deploy / deploy (push) Successful in 55s Details	2026-04-12 20:01:26 -04:00
lerko96	79d3fb142e	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.	2026-04-12 20:00:05 -04:00
lerko96	b3fc7b2114	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.	2026-04-12 19:59:59 -04:00
lerko96	a58fafc563	fix(layout): narrow content column to 740px for visible centering	2026-04-12 19:36:41 -04:00
lerko96	bf0910a8fe	style: narrow content column to max-w-3xl for centered layout	2026-04-12 19:33:40 -04:00
lerko96	088a06a51c	feat: terminal-noir redesign — widget system + design token overhaul 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	2026-04-12 19:23:50 -04:00
lerko96	05a32492ac	rebuild portfolio: Next.js 16, React 19, Tailwind v4, homelab page, CI/CD All checks were successful Build and Deploy / deploy (push) Successful in 1m0s Details	2026-04-12 18:52:54 -04:00
lerko96	798027bb9d	remove accidentally committed node_modules submodule	2026-04-01 17:21:41 -04:00
Tyler Koenig	e7cece47f1	i'm lost adding more map scss files	2021-09-20 20:51:45 -04:00
Tyler Koenig	34f06b7cfb	eslint change when switching between master	2021-09-20 20:46:51 -04:00
Tyler Koenig	bf7e23b972	change title back in index.html	2021-09-20 20:36:06 -04:00
Tyler Koenig	9dbea9fff5	deploy react-app to gh-pages, dwnld dependencies	2021-09-20 20:29:28 -04:00
Tyler Koenig	b50ff60540	deleted unused images	2021-09-20 20:18:40 -04:00
Tyler Koenig	9f9d41c9ab	rest of react file	2021-09-20 17:03:38 -04:00
Tyler Koenig	c612b7d702	applying transfer to react app	2021-09-20 16:54:47 -04:00
Tyler Koenig	8819f31dd0	Merge pull request #3 from lerko96/project-design needs code removed, but functional and cleaner look.	2021-09-13 17:03:26 -04:00
Tyler Koenig	b1faab1f4e	mobile styling	2021-09-13 17:01:07 -04:00
Tyler Koenig	7e20081f0d	project styling finished	2021-09-13 15:49:56 -04:00
Tyler Koenig	6b484b76b2	lerko repo each project	2021-09-13 13:12:53 -04:00
Tyler Koenig	f152434785	font-size	2021-09-13 12:50:59 -04:00
Tyler Koenig	ae8775a902	project mobile layout	2021-09-13 12:39:39 -04:00
Tyler Koenig	79b4bf43be	project card	2021-09-10 21:21:47 -04:00
Tyler Koenig	cffa6db131	card layout	2021-09-10 20:58:13 -04:00
Tyler Koenig	8753311f5c	added scss, but wont move forward	2021-09-10 18:11:32 -04:00
Tyler Koenig	afbf55aa62	add another font	2021-09-10 15:14:15 -04:00
		`@@ -0,0 +1 @@`
							`<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>`
		`@@ -0,0 +1 @@`
							<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>
		`@@ -0,0 +1 @@`
							<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>
		`@@ -0,0 +1 @@`
							`<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>`