Merge pull request 'feat(content): reposition for security engineer, expand services' (#4 ) from feat/timeline into dev

Reviewed-on: #4
ci: auto-tag CalVer after deploy if commit untagged
2026-04-17 01:24:22 +00:00 · 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
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
tyler	8e9fcfaeeb	Merge pull request 'feat(content): reposition for security engineer, expand services' (#4 ) from feat/timeline into dev All checks were successful Build and Deploy / deploy (push) Successful in 1m11s Details Reviewed-on: #4	2026-04-17 01:24:22 +00:00
lerko96	2946801517	ci: auto-tag CalVer after deploy if commit untagged	2026-04-16 21:16:01 -04:00
lerko96	49028e7783	feat(content): reposition for security engineer, expand services to 37 Hero subtitle and blurb rewritten to lead with security operations and homelab credentials over generic "builder" framing. Projects: archive plAIground, service-monitor, ThoughtSpace (2025); add open-pact and helm as featured; add risk-ops to archive (2026). Add statusBadge + externalUrl to Project type; wire golf-book-mobile. Services: 24 → 37 — split grouped arr/media entries, add mail relay, gluetun, Home Assistant, Glance, Filebrowser, Prowlarr, Bazarr, nzbget, qBittorrent, Kavita, Openshelf. Drop Calibre-Web. Skills: add Go to Languages. Timeline: update monitoring stack. Homelab ADRs: add Authentik over Authelia.	2026-04-16 21:06:18 -04:00
lerko96	c36cc94437	feat(ui): add timeline component; complete terminal-noir design system - introduce Timeline component with scroll-in animation and type-colored spine dots (career/edu/cert/project/homelab) - swap terminal-noir palette for macOS Classic dark/light with matching timeline color tokens in globals.css - add light mode overrides, cursor blink keyframe, font-size 14px base - update Widget header: prefix/name split, bracket badge, no divider rule - align archive and homelab page headers to ❯ prompt style - convert all font-sans prose in homelab/archive to font-mono - rename widget titles to namespaced paths (homelab/network, etc.) - skills label: uppercase tracking → plain text-sm; remove row borders	2026-04-16 18:03:33 -04:00
lerko96	6d0b4e29d8	refactor(ui): enforce terminal metaphor, unify secondary opacity - drop headshot photo (coherence break vs. full terminal aesthetic) - replace FA icons with plain-text brackets ([github], [linkedin], [email]) - remove Font Awesome CDN dependency - nav logo tk → ~/; theme toggle fa-sun/fa-moon → [light]/[dark] - reorder home sections: projects before skills/journey - add font-mono + opacity-70 to timeline descriptions (#2 bug + #8 polish) - uniform opacity-70 across hero bio, project desc, timeline desc - add hover:bg-surface-raised to ProjectCard article - drop journey badge count (noise) - change status ● online → ● available	2026-04-16 18:01:19 -04:00
lerko96	7d9b300d84	ci: add GitHub Actions deploy workflow for GitHub Pages 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>`