Replace Next.js 16 + React 19 with Astro 5. Same visual design, same deploy pipeline, zero client-side framework. - All components rewritten as .astro files - Dark mode via inline scripts (no React context) - Timeline animation via IntersectionObserver script - Nav active state computed at build time - Self-hosted Source Code Pro woff2 fonts - Drop Font Awesome (icons were never loaded) - Drop unused headshot PNG (1MB, unreferenced) - Fix pfSense hardware refs (Netgate 1100, not N100) - Output: 212KB static HTML vs 2.6MB before - JS shipped: ~700 bytes inline vs ~130KB React runtime
This commit is contained in:
+3
-19
@@ -1,33 +1,17 @@
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
# astro
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
/.astro/
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.env.*
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
||||
# docs
|
||||
/docs
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## Project Overview
|
||||
|
||||
**Project:** [PERSONAL PORTFOLIO]
|
||||
**Stack:** [Astro 5 + TypeScript + Tailwind v4]
|
||||
**Deployed to:** [lerkolabs.com — self-hosted via Gitea Actions]
|
||||
|
||||
## Branch Strategy
|
||||
|
||||
This repo uses two branches:
|
||||
- **`master`** — built output only; reserved for future GitHub mirror
|
||||
- **`dev`** — source code; all development happens here
|
||||
|
||||
**Always work on the `dev` branch.** Never manually edit files on `master`.
|
||||
|
||||
## Commands
|
||||
|
||||
```bash
|
||||
npm run dev # Dev server at localhost:4321
|
||||
npm run build # Production build into out/ (static export)
|
||||
npm run preview # Preview production build locally
|
||||
```
|
||||
|
||||
## Architecture
|
||||
|
||||
Astro 5 static-export portfolio site with TypeScript. Zero client-side framework — all interactivity via inline `<script>` tags.
|
||||
|
||||
- **`src/layouts/Base.astro`** — Root layout; self-hosted Source Code Pro font, blocking theme script, Nav + Footer
|
||||
- **`src/pages/index.astro`** — Home page (Hero, Timeline)
|
||||
- **`src/pages/projects.astro`** — Featured + archive projects
|
||||
- **`src/pages/homelab.astro`** — At-a-glance stats, VLAN table, services grid, ADRs, Gitea CTA
|
||||
- **`src/pages/archive.astro`** — Meta-refresh redirect to /projects/
|
||||
- **`src/components/`** — Nav, Footer, Hero, Timeline, Widget, ProjectCard, Skills (all `.astro`)
|
||||
- **`src/data/projects.ts`** — All projects typed, featured + archive split
|
||||
- **`src/data/services.ts`** — Homelab services with categories
|
||||
- **`src/data/timeline.ts`** — Career/project timeline entries
|
||||
- **`src/styles/globals.css`** — Full design system: colors, fonts, breakpoints, keyframes (Tailwind v4 CSS-first config)
|
||||
- **`public/fonts/`** — Self-hosted Source Code Pro woff2 (latin + latin-ext)
|
||||
- **`.gitea/workflows/deploy.yml`** — CI: builds, rsyncs `out/` to portfolio LXC, restarts Docker container
|
||||
|
||||
### Dark mode
|
||||
Blocking `<script is:inline>` in Base.astro `<head>` reads `localStorage('lerko96-dark-mode')`, defaults dark, adds `.dark` class before paint. Toggle logic in Nav.astro `<script>`.
|
||||
|
||||
### Tailwind v4 note
|
||||
Tailwind v4 is CSS-first — there is no `tailwind.config.ts`. All custom tokens live in `globals.css` under `@theme {}`. Dark mode variant is defined as `@variant dark (&:where(.dark, .dark *))`.
|
||||
|
||||
## Coding Standards
|
||||
|
||||
### Commit messages
|
||||
Never include any of the following in commit messages — a local `commit-msg` hook will reject them:
|
||||
- AI tool names: `claude`, `chatgpt`, `gemini`, `copilot`, `mistral`
|
||||
- Company names: `anthropic`, `openai`
|
||||
- Model names: `haiku`, `opus`, `sonnet`, `gpt-4`, `gpt-3`, etc.
|
||||
- Generic AI terms: `llm`, `generated with ai`, `co-authored-by: claude`
|
||||
- AI attribution footers (e.g. the default Claude Code co-author line)
|
||||
|
||||
Write commit messages as if you wrote the code yourself.
|
||||
|
||||
The enforcement hook lives in `.git/hooks/commit-msg` (not committed — local only).
|
||||
|
||||
## Deployment
|
||||
|
||||
Push to `dev` on Gitea triggers `.gitea/workflows/deploy.yml`:
|
||||
1. Builds the static site (`npm run build`)
|
||||
2. rsyncs `out/` to the portfolio LXC at `10.99.0.23`
|
||||
3. Rebuilds and restarts the Docker container serving lerkolabs.com
|
||||
@@ -4,7 +4,7 @@ Personal portfolio site. Live at [lerkolabs.com](https://lerkolabs.com) — self
|
||||
|
||||
Source: [gitea.lerkolabs.com/lerko/portfolio](https://gitea.lerkolabs.com/lerko/portfolio)
|
||||
|
||||
**Stack:** Next.js 16 · React 19 · TypeScript · Tailwind v4
|
||||
**Stack:** Astro 5 · TypeScript · Tailwind v4
|
||||
|
||||
---
|
||||
|
||||
@@ -18,8 +18,9 @@ Source: [gitea.lerkolabs.com/lerko/portfolio](https://gitea.lerkolabs.com/lerko/
|
||||
## Commands
|
||||
|
||||
```bash
|
||||
npm run dev # dev server at localhost:3000
|
||||
npm run dev # dev server at localhost:4321
|
||||
npm run build # static export into out/
|
||||
npm run preview # preview production build
|
||||
```
|
||||
|
||||
---
|
||||
@@ -41,19 +42,22 @@ Push to `dev` triggers Gitea Actions (`.gitea/workflows/deploy.yml`):
|
||||
|
||||
```
|
||||
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
|
||||
layouts/
|
||||
Base.astro # root layout, fonts, theme script, nav/footer
|
||||
pages/
|
||||
index.astro # home: hero, timeline
|
||||
projects.astro # featured + archive projects
|
||||
homelab.astro # VLANs, services, ADRs
|
||||
archive.astro # redirect to /projects/
|
||||
components/ # Nav, Footer, Hero, Timeline, Widget, ProjectCard, Skills
|
||||
data/
|
||||
projects.ts # all projects, featured + archive split
|
||||
services.ts # homelab services with categories
|
||||
public/ # static assets copied into out/ on build
|
||||
projects.ts # all projects, featured + archive split
|
||||
services.ts # homelab services with categories
|
||||
timeline.ts # career/project timeline
|
||||
styles/
|
||||
globals.css # full design system (Tailwind v4 CSS-first, all tokens here)
|
||||
public/
|
||||
fonts/ # self-hosted Source Code Pro woff2
|
||||
```
|
||||
|
||||
> Tailwind v4 is CSS-first — no `tailwind.config.ts`. All custom tokens live in `globals.css` under `@theme {}`.
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
||||
export default defineConfig({
|
||||
output: 'static',
|
||||
trailingSlash: 'always',
|
||||
outDir: 'out',
|
||||
build: {
|
||||
format: 'directory',
|
||||
},
|
||||
});
|
||||
@@ -1,18 +0,0 @@
|
||||
import { defineConfig, globalIgnores } from "eslint/config";
|
||||
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||
import nextTs from "eslint-config-next/typescript";
|
||||
|
||||
const eslintConfig = defineConfig([
|
||||
...nextVitals,
|
||||
...nextTs,
|
||||
// Override default ignores of eslint-config-next.
|
||||
globalIgnores([
|
||||
// Default ignores of eslint-config-next:
|
||||
".next/**",
|
||||
"out/**",
|
||||
"build/**",
|
||||
"next-env.d.ts",
|
||||
]),
|
||||
]);
|
||||
|
||||
export default eslintConfig;
|
||||
@@ -1,11 +0,0 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
output: "export",
|
||||
trailingSlash: true,
|
||||
images: {
|
||||
unoptimized: true,
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
Generated
+3990
-5240
File diff suppressed because it is too large
Load Diff
+4
-16
@@ -4,27 +4,15 @@
|
||||
"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"
|
||||
"dev": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "16.2.2",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4"
|
||||
"astro": "^5"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
@@ -1 +0,0 @@
|
||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 391 B |
Binary file not shown.
Binary file not shown.
@@ -1 +0,0 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1001 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
@@ -1 +0,0 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
Before Width: | Height: | Size: 128 B |
@@ -1 +0,0 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||
|
Before Width: | Height: | Size: 385 B |
@@ -1,24 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function ArchiveRedirect() {
|
||||
useEffect(() => {
|
||||
window.location.replace("/projects/");
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<meta httpEquiv="refresh" content="0; url=/projects/" />
|
||||
<p className="font-mono text-sm text-[var(--color-text)]">
|
||||
This page moved.{" "}
|
||||
<a
|
||||
href="/projects/"
|
||||
className="text-[var(--color-accent-green)] underline"
|
||||
>
|
||||
/projects/
|
||||
</a>
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,288 +0,0 @@
|
||||
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: "MGMT",
|
||||
name: "MGMT",
|
||||
purpose: "Network equipment only",
|
||||
},
|
||||
{
|
||||
id: "LAN",
|
||||
name: "LAN",
|
||||
purpose: "Trusted personal devices",
|
||||
},
|
||||
{
|
||||
id: "Lab",
|
||||
name: "Homelab",
|
||||
purpose: "All self-hosted services",
|
||||
},
|
||||
{
|
||||
id: "Guest",
|
||||
name: "Guests",
|
||||
purpose: "Internet only, RFC1918 blocked",
|
||||
},
|
||||
{
|
||||
id: "IoT",
|
||||
name: "IoT",
|
||||
purpose: "Smart home, isolated",
|
||||
},
|
||||
{
|
||||
id: "WFH",
|
||||
name: "WFH",
|
||||
purpose: "Work devices, no personal access",
|
||||
},
|
||||
{
|
||||
id: "DMZ",
|
||||
name: "DMZ",
|
||||
purpose: "Public-facing, hard-blocked internally",
|
||||
},
|
||||
{
|
||||
id: "VPN",
|
||||
name: "VPN",
|
||||
purpose: "WireGuard clients, LAN-equivalent access",
|
||||
},
|
||||
];
|
||||
|
||||
const adrs = [
|
||||
{
|
||||
title: "ISP gateway: passthrough mode",
|
||||
decision:
|
||||
"ISP gateway stays in-line in passthrough mode, pfSense gets the public IP directly. Gateway WiFi disabled.",
|
||||
why: "Carrier locks 802.1X auth to their own gateway hardware, and bypassing it is brittle — breaks on firmware updates and only saves a millisecond or two. True bridge mode isn't supported. Passthrough is the cleanest option that keeps pfSense as the actual perimeter.",
|
||||
},
|
||||
{
|
||||
title: "Caddy over NGINX Proxy Manager",
|
||||
decision:
|
||||
"Caddy with DNS-01 challenge via Cloudflare API. All subdomains resolve to Caddy internally via Pi-hole. Caddy terminates TLS and proxies to backends.",
|
||||
why: "Single Caddyfile, automatic certs without ever needing to expose internal services to the internet for an HTTP-01 challenge. NPM has more UI overhead for the same outcome. Traefik is more complex for no benefit at this scale.",
|
||||
},
|
||||
{
|
||||
title: "WireGuard over OpenVPN",
|
||||
decision:
|
||||
"WireGuard on pfSense as the only remote-access path. Clients get the access tier documented in the access model — same as LAN, plus the admin surfaces that aren't reachable any other way.",
|
||||
why: "Faster, simpler config, better battery life on mobile. Throughput on the firewall hardware comfortably exceeds the WAN link. OpenVPN has no advantage here. Tailscale would add an external relay dependency for a problem WireGuard already solves.",
|
||||
},
|
||||
{
|
||||
title: "Pi-hole in Homelab VLAN, not MGMT",
|
||||
decision:
|
||||
"Pi-hole runs in the Homelab VLAN. Firewall allows port 53 inbound from VLANs that need local resolution. MGMT uses pfSense Unbound as its primary resolver instead.",
|
||||
why: "Putting Pi-hole in MGMT would mean opening MGMT to all the VLANs that need DNS — much bigger attack surface for the most sensitive tier. DNS traffic crossing into the Homelab VLAN is the lesser risk, and Homelab is already where service traffic terminates anyway.",
|
||||
},
|
||||
{
|
||||
title: "Mini-PC for pfSense",
|
||||
decision:
|
||||
"Intel N100 mini-PC as the firewall host. ~6W idle, handles multi-Gbps routing, saturates the WAN link with WireGuard headroom to spare.",
|
||||
why: "Right-sized for 1 Gbps fiber. A Raspberry Pi can't handle 1 Gbps plus VPN. A full rack server wastes power for this role and adds noise to a room I sit in.",
|
||||
},
|
||||
{
|
||||
title: "Shared Postgres + Redis in apps LXC",
|
||||
decision:
|
||||
"One Postgres instance hosting multiple databases. One Redis instance. A single init script provisions schemas on first run.",
|
||||
why: "Avoids ~15 separate DB containers. Big RAM savings. Productivity apps colocate in one LXC anyway, so a shared backing store there is the natural shape.",
|
||||
},
|
||||
{
|
||||
title:
|
||||
"Gitea CI/CD: self-hosted runner, internal pipeline, static deploy",
|
||||
decision:
|
||||
"Self-hosted Gitea Actions runner builds the portfolio on push, then deploys pre-built static files to the public-facing host. Build runs in an isolated container so the runner host stays clean. Public host serves static files only — no build toolchain on it.",
|
||||
why: "Keeps the whole pipeline internal. No external runners, no GitHub Actions. The build/serve split means the public-facing host has the smallest possible footprint — static file server, nothing more.",
|
||||
},
|
||||
{
|
||||
title: "Authentik over Authelia",
|
||||
decision: "Authentik as the SSO provider across all self-hosted services.",
|
||||
why: "Full OIDC provider + forward auth in one. Lets services like Outline, Gitea, and Vikunja use real SSO rather than just a login gate. Authelia is forward-auth only — no OIDC provider capability.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function HomelabPage() {
|
||||
return (
|
||||
<>
|
||||
{/* Header */}
|
||||
<div className="mb-4lh">
|
||||
<p className="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh">
|
||||
<span
|
||||
className="text-[var(--color-accent-green)] select-none mr-1ch"
|
||||
aria-hidden="true"
|
||||
>
|
||||
❯
|
||||
</span>
|
||||
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-2ch py-half-lh">
|
||||
<p className="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh">
|
||||
{label}
|
||||
</p>
|
||||
<p className="font-mono text-sm text-[var(--color-text)]">
|
||||
{value}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Widget>
|
||||
|
||||
{/* VLAN table */}
|
||||
<Widget
|
||||
title="homelab/network"
|
||||
meta="8 network segments · default deny"
|
||||
as="section"
|
||||
>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-[var(--color-border)]">
|
||||
<th className="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase">
|
||||
Segment
|
||||
</th>
|
||||
<th className="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase">
|
||||
Name
|
||||
</th>
|
||||
<th className="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh uppercase">
|
||||
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-half-lh pr-[3ch]">
|
||||
{v.id}
|
||||
</td>
|
||||
<td className="font-mono text-[var(--color-text)] py-half-lh pr-[3ch]">
|
||||
{v.name}
|
||||
</td>
|
||||
<td className="font-mono text-sm text-[var(--color-text)] py-2.5 opacity-80">
|
||||
{v.purpose}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Widget>
|
||||
|
||||
{/* Services */}
|
||||
<Widget title="homelab/services" badge={services.length} as="section">
|
||||
<div className="flex flex-col gap-3ch">
|
||||
{categoryOrder.map((cat) => {
|
||||
const catServices = services.filter((s) => s.category === cat);
|
||||
return (
|
||||
<div key={cat}>
|
||||
<p className="font-mono text-sm text-[var(--color-text-dim)] mb-1lh">
|
||||
{categoryLabels[cat]}
|
||||
</p>
|
||||
<div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
|
||||
{catServices.map((svc) => (
|
||||
<div
|
||||
key={svc.name}
|
||||
className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start gap-1ch px-2ch py-half-lh"
|
||||
>
|
||||
<i
|
||||
className={`${svc.icon} text-[var(--color-text-label)] text-xs mt-0.5 w-3.5 shrink-0`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div>
|
||||
<p className="font-mono text-sm 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-2ch py-1lh"
|
||||
>
|
||||
<p className="font-mono text-sm text-[var(--color-text)] mb-1lh">
|
||||
{adr.title}
|
||||
</p>
|
||||
<p className="font-mono text-sm text-[var(--color-text)] leading-relaxed mb-half-lh opacity-75">
|
||||
<span className="text-[var(--color-text-label)] opacity-100">
|
||||
decision:{" "}
|
||||
</span>
|
||||
{adr.decision}
|
||||
</p>
|
||||
<p className="font-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>
|
||||
|
||||
{/* Gitea CTA */}
|
||||
<section className="pt-qtr-lh">
|
||||
<p className="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh">
|
||||
homelab/docs
|
||||
</p>
|
||||
<p className="font-mono text-sm text-[var(--color-text)] mb-1lh opacity-75">
|
||||
VLAN maps, runbooks, service registry, config exports, and setup
|
||||
guides.
|
||||
</p>
|
||||
<a
|
||||
href="https://gitea.lerkolabs.com/lerko/homelab"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
↗ gitea.lerkolabs.com/lerko/homelab
|
||||
</a>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
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" suppressHydrationWarning>
|
||||
<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-4ch py-3lh">
|
||||
{children}
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
import type { Metadata } from "next";
|
||||
import Hero from "@/components/Hero";
|
||||
import Timeline from "@/components/Timeline";
|
||||
|
||||
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 />
|
||||
<Timeline />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
import type { Metadata } from "next";
|
||||
import Widget from "@/components/Widget";
|
||||
import ProjectCard from "@/components/ProjectCard";
|
||||
import { featuredProjects, archiveProjects } from "@/data/projects";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Projects | Tyler Koenig",
|
||||
description:
|
||||
"Featured projects and earlier work — homelab, open-pact, helm, and bootcamp/experiment archive.",
|
||||
};
|
||||
|
||||
export default function ProjectsPage() {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-4lh">
|
||||
<p className="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh">
|
||||
<span className="text-[var(--color-accent-green)] select-none mr-1ch" aria-hidden="true">❯</span>
|
||||
projects
|
||||
</p>
|
||||
<p className="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-xl opacity-80">
|
||||
Featured work first. Earlier experiments, browser extensions, and bootcamp projects below — kept for context.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Widget title="projects/featured" badge={featuredProjects.length} as="section">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-1ch">
|
||||
{featuredProjects.map((project) => (
|
||||
<ProjectCard key={project.slug} project={project} />
|
||||
))}
|
||||
</div>
|
||||
</Widget>
|
||||
|
||||
<Widget title="projects/archive" badge={archiveProjects.length} as="section">
|
||||
<div className="flex flex-col gap-px bg-[var(--color-border)]">
|
||||
{archiveProjects.map((project) => (
|
||||
<a
|
||||
key={project.slug}
|
||||
href={project.githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start justify-between gap-2ch px-2ch py-1lh group"
|
||||
>
|
||||
<div className="flex flex-col gap-1ch flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1ch">
|
||||
{project.year && (
|
||||
<span className="font-mono text-sm text-[var(--color-text-dim)] shrink-0">
|
||||
{project.year}
|
||||
</span>
|
||||
)}
|
||||
<span className="font-mono text-sm text-[var(--color-text)] group-hover:text-[var(--color-accent-green)] truncate">
|
||||
{project.title}
|
||||
</span>
|
||||
</div>
|
||||
<p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
|
||||
{project.description}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-x-1ch gap-y-0.5">
|
||||
{project.tags.map((tag) => (
|
||||
<span key={tag} className="font-mono text-sm text-[var(--color-text-dim)]">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="font-mono text-sm text-[var(--color-text-label)] group-hover:text-[var(--color-text)] shrink-0 mt-0.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
↗
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</Widget>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
const year = new Date().getFullYear();
|
||||
---
|
||||
|
||||
<footer class="border-t border-[var(--color-border)] py-1lh mt-2lh">
|
||||
<div class="px-4ch flex items-center justify-between">
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">
|
||||
© {year} Tyler Koenig
|
||||
</span>
|
||||
<div class="flex items-center gap-2ch">
|
||||
<a
|
||||
href="https://github.com/lerko96"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="GitHub"
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[github]
|
||||
</a>
|
||||
<a
|
||||
href="https://gitea.lerkolabs.com/lerko"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Gitea"
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[gitea]
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/tyler-koenig"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="LinkedIn"
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[linkedin]
|
||||
</a>
|
||||
<a
|
||||
href="mailto:tyler@lerkolabs.com"
|
||||
aria-label="Email"
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[email]
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -1,47 +0,0 @@
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="border-t border-[var(--color-border)] py-1lh mt-2lh">
|
||||
<div className="px-4ch flex items-center justify-between">
|
||||
<span className="font-mono text-sm text-[var(--color-text-dim)]">
|
||||
© {new Date().getFullYear()} Tyler Koenig
|
||||
</span>
|
||||
<div className="flex items-center gap-2ch">
|
||||
<a
|
||||
href="https://github.com/lerko96"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="GitHub"
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[github]
|
||||
</a>
|
||||
<a
|
||||
href="https://gitea.lerkolabs.com/lerko"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Gitea"
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[gitea]
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/tyler-koenig"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="LinkedIn"
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[linkedin]
|
||||
</a>
|
||||
<a
|
||||
href="mailto:tyler@lerkolabs.com"
|
||||
aria-label="Email"
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[email]
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
<section class="mb-16">
|
||||
<div class="flex flex-col gap-1ch">
|
||||
<div>
|
||||
<p class="font-mono text-sm font-bold text-[var(--color-text)]">
|
||||
<span
|
||||
class="text-[var(--color-accent-green)] select-none mr-1ch"
|
||||
aria-hidden="true"
|
||||
>
|
||||
❯
|
||||
</span>
|
||||
tyler koenig
|
||||
</p>
|
||||
<p class="font-mono text-sm text-[var(--color-text-label)] mt-0.5">
|
||||
Security Operations · Self-Hosted Infrastructure
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-70">
|
||||
Homelab runs 30+
|
||||
services across segmented VLANs — pfSense, Authentik SSO, full
|
||||
observability stack. Write software too: mobile apps, Go backends,
|
||||
open protocols. Daily drivers, all of it.{" "}
|
||||
<span
|
||||
class="animate-cursor text-[var(--color-accent-green)]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
█
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-x-1ch gap-y-half-lh">
|
||||
<span class="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"
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[github]
|
||||
</a>
|
||||
<a
|
||||
href="https://gitea.lerkolabs.com/lerko"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Gitea"
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[gitea]
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/tyler-koenig"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="LinkedIn"
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[linkedin]
|
||||
</a>
|
||||
<a
|
||||
href="mailto:tyler@lerkolabs.com"
|
||||
aria-label="Email"
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[email]
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,75 +0,0 @@
|
||||
export default function Hero() {
|
||||
return (
|
||||
<section className="mb-16">
|
||||
<div className="flex flex-col gap-1ch">
|
||||
<div>
|
||||
<p className="font-mono text-sm font-bold text-[var(--color-text)]">
|
||||
<span
|
||||
className="text-[var(--color-accent-green)] select-none mr-1ch"
|
||||
aria-hidden="true"
|
||||
>
|
||||
❯
|
||||
</span>
|
||||
tyler koenig
|
||||
</p>
|
||||
<p className="font-mono text-sm text-[var(--color-text-label)] mt-0.5">
|
||||
Security Operations · Self-Hosted Infrastructure
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-70">
|
||||
Homelab runs 30+
|
||||
services across segmented VLANs — pfSense, Authentik SSO, full
|
||||
observability stack. Write software too: mobile apps, Go backends,
|
||||
open protocols. Daily drivers, all of it.{" "}
|
||||
<span
|
||||
className="animate-cursor text-[var(--color-accent-green)]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
█
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-x-1ch gap-y-half-lh">
|
||||
<span className="font-mono text-sm text-[var(--color-accent-green)]">
|
||||
● available
|
||||
</span>
|
||||
<a
|
||||
href="https://github.com/lerko96"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="GitHub"
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[github]
|
||||
</a>
|
||||
<a
|
||||
href="https://gitea.lerkolabs.com/lerko"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Gitea"
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[gitea]
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/tyler-koenig"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="LinkedIn"
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[linkedin]
|
||||
</a>
|
||||
<a
|
||||
href="mailto:tyler@lerkolabs.com"
|
||||
aria-label="Email"
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[email]
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
const pathname = Astro.url.pathname;
|
||||
|
||||
const links = [
|
||||
{ href: "/", label: "tyler" },
|
||||
{ href: "/homelab/", label: "homelab" },
|
||||
{ href: "/projects/", label: "projects" },
|
||||
];
|
||||
---
|
||||
|
||||
<header class="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
|
||||
<nav class="max-w-[740px] mx-auto px-4ch h-11 flex items-center justify-between">
|
||||
<a
|
||||
href="/"
|
||||
class="font-mono text-sm font-bold text-[var(--color-text)] hover:text-[var(--color-text-label)]"
|
||||
>
|
||||
~/
|
||||
</a>
|
||||
|
||||
<ul class="flex items-center gap-2ch">
|
||||
{links.map(({ href, label }) => {
|
||||
const active = pathname === href || pathname === href.replace(/\/$/, "");
|
||||
return (
|
||||
<li>
|
||||
<a
|
||||
href={href}
|
||||
aria-current={active ? "page" : undefined}
|
||||
class:list={[
|
||||
"font-mono text-sm",
|
||||
active
|
||||
? "text-[var(--color-text)]"
|
||||
: "text-[var(--color-text-label)] hover:text-[var(--color-text)]",
|
||||
]}
|
||||
>
|
||||
{label}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li>
|
||||
<button
|
||||
data-theme-toggle
|
||||
aria-label="Switch to light mode"
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
|
||||
>
|
||||
[light]
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const btn = document.querySelector("[data-theme-toggle]") as HTMLButtonElement;
|
||||
|
||||
function update() {
|
||||
const isDark = document.documentElement.classList.contains("dark");
|
||||
btn.textContent = isDark ? "[light]" : "[dark]";
|
||||
btn.setAttribute(
|
||||
"aria-label",
|
||||
isDark ? "Switch to light mode" : "Switch to dark mode",
|
||||
);
|
||||
}
|
||||
|
||||
btn.addEventListener("click", () => {
|
||||
const next = !document.documentElement.classList.contains("dark");
|
||||
document.documentElement.classList.toggle("dark", next);
|
||||
localStorage.setItem("lerko96-dark-mode", String(next));
|
||||
update();
|
||||
});
|
||||
|
||||
update();
|
||||
</script>
|
||||
@@ -1,59 +0,0 @@
|
||||
"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: "/projects/", label: "projects" },
|
||||
];
|
||||
|
||||
export default function Nav() {
|
||||
const pathname = usePathname();
|
||||
const { isDark, toggle } = useTheme();
|
||||
return (
|
||||
<header className="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
|
||||
<nav className="max-w-[740px] mx-auto px-4ch 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-2ch">
|
||||
{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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
import type { Project } from "@/data/projects";
|
||||
|
||||
interface Props {
|
||||
project: Project;
|
||||
}
|
||||
|
||||
const { project } = Astro.props;
|
||||
---
|
||||
|
||||
<article class="border border-[var(--color-border)] bg-[var(--color-surface)] flex flex-col gap-1lh p-2ch hover:bg-[var(--color-surface-raised)]">
|
||||
<div class="flex items-start justify-between gap-1ch">
|
||||
<a
|
||||
href={project.githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="font-mono text-sm font-semibold text-[var(--color-text)] hover:text-[var(--color-accent-green)]"
|
||||
>
|
||||
{project.title}
|
||||
</a>
|
||||
<div class="flex items-center gap-1ch shrink-0">
|
||||
{project.stats && (
|
||||
<span class="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`}
|
||||
class="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`}
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
↗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{project.statusBadge && (
|
||||
<span class="font-mono text-sm text-[var(--color-accent-amber,#d4a027)] border border-[var(--color-accent-amber,#d4a027)] px-1ch py-0.5 w-fit opacity-80">
|
||||
{project.statusBadge}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-70">
|
||||
{project.description}
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap gap-x-1ch gap-y-half-lh mt-half-lh">
|
||||
{project.tags.map((tag) => (
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
@@ -1,67 +0,0 @@
|
||||
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-1lh p-2ch hover:bg-[var(--color-surface-raised)]">
|
||||
<div className="flex items-start justify-between gap-1ch">
|
||||
<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-1ch 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-sm text-[var(--color-accent-amber,#d4a027)] border border-[var(--color-accent-amber,#d4a027)] px-1ch py-0.5 w-fit opacity-80">
|
||||
{project.statusBadge}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<p className="font-mono text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-70">
|
||||
{project.description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-x-1ch gap-y-half-lh mt-half-lh">
|
||||
{project.tags.map((tag) => (
|
||||
<span key={tag} className="font-mono text-sm text-[var(--color-text-dim)]">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
import Widget from "./Widget.astro";
|
||||
|
||||
const skillGroups = [
|
||||
{
|
||||
label: "Infrastructure",
|
||||
skills: ["Proxmox", "pfSense", "VLANs", "WireGuard", "Linux", "Caddy"],
|
||||
},
|
||||
{
|
||||
label: "Desktop & Tools",
|
||||
skills: ["Git", "Docker", "TDD", "Node.js", "REST APIs"],
|
||||
},
|
||||
{
|
||||
label: "Practices",
|
||||
skills: ["Agile / Scrum", "Relational Databases", "Self-hosting"],
|
||||
},
|
||||
{
|
||||
label: "Languages",
|
||||
skills: ["Go", "JavaScript", "TypeScript", "HTML", "CSS"],
|
||||
},
|
||||
{
|
||||
label: "Frontend",
|
||||
skills: ["React", "React Native", "Expo", "Next.js", "Three.js"],
|
||||
},
|
||||
];
|
||||
|
||||
const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);
|
||||
---
|
||||
|
||||
<Widget title="tyler/skills" badge={totalCount} as="section">
|
||||
<div class="flex flex-col">
|
||||
{skillGroups.map(({ label, skills }) => (
|
||||
<div class="flex flex-col xs:flex-row gap-1ch xs:gap-2ch py-half-lh">
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)] w-28 shrink-0">
|
||||
{label}
|
||||
</span>
|
||||
<span class="font-mono text-sm text-[var(--color-text)]">
|
||||
{skills.join(" · ")}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Widget>
|
||||
@@ -1,48 +0,0 @@
|
||||
import Widget from "@/components/Widget";
|
||||
|
||||
const skillGroups = [
|
||||
{
|
||||
label: "Infrastructure",
|
||||
skills: ["Proxmox", "pfSense", "VLANs", "WireGuard", "Linux", "Caddy"],
|
||||
},
|
||||
{
|
||||
label: "Desktop & Tools",
|
||||
skills: ["Git", "Docker", "TDD", "Node.js", "REST APIs", ],
|
||||
},
|
||||
{
|
||||
label: "Practices",
|
||||
skills: ["Agile / Scrum", "Relational Databases", "Self-hosting"],
|
||||
},
|
||||
{
|
||||
label: "Languages",
|
||||
skills: ["Go", "JavaScript", "TypeScript", "HTML", "CSS"],
|
||||
},
|
||||
{
|
||||
label: "Frontend",
|
||||
skills: ["React", "React Native", "Expo", "Next.js", "Three.js"],
|
||||
},
|
||||
];
|
||||
|
||||
const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);
|
||||
|
||||
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-1ch xs:gap-2ch py-half-lh"
|
||||
>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
// Server component — renders a blocking inline script that sets the dark class
|
||||
// on <html> before React hydrates, preventing flash of wrong theme.
|
||||
export default function ThemeScript() {
|
||||
const script = `
|
||||
(function() {
|
||||
var stored = localStorage.getItem('lerko96-dark-mode');
|
||||
var dark = stored === null ? true : stored === 'true';
|
||||
if (dark) document.documentElement.classList.add('dark');
|
||||
})();
|
||||
`;
|
||||
return <script dangerouslySetInnerHTML={{ __html: script }} />;
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
import Widget from "./Widget.astro";
|
||||
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",
|
||||
};
|
||||
---
|
||||
|
||||
<Widget title="tyler/journey">
|
||||
<ol class="relative border-l border-[var(--color-border)] ml-[2px] flex flex-col gap-0">
|
||||
{timeline.map((entry) => (
|
||||
<li data-tl-entry class="pl-[3ch] pb-2lh last:pb-0 relative">
|
||||
<span
|
||||
class="absolute -left-[7px] top-[3px] w-3 h-3 rounded-full border border-[var(--color-bg)] shrink-0"
|
||||
style={`background-color: ${typeColor[entry.type]}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
<div class="flex items-center gap-1ch mb-half-lh">
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">{entry.date}</span>
|
||||
<span
|
||||
class="font-mono text-sm px-1 border"
|
||||
style={`color: ${typeColor[entry.type]}; border-color: ${typeColor[entry.type]}; opacity: 0.7;`}
|
||||
>
|
||||
{typeLabel[entry.type]}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="font-mono text-sm font-semibold text-[var(--color-text)] mb-half-lh">
|
||||
{entry.title}
|
||||
</p>
|
||||
|
||||
<p class="font-mono text-sm text-[var(--color-text)] opacity-70 leading-relaxed mb-half-lh">
|
||||
{entry.description}
|
||||
</p>
|
||||
|
||||
{entry.tags && entry.tags.length > 0 && (
|
||||
<div class="flex flex-wrap gap-x-1ch gap-y-half-lh">
|
||||
{entry.tags.map((tag) => (
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</Widget>
|
||||
|
||||
<script>
|
||||
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
||||
const entries = document.querySelectorAll<HTMLElement>("[data-tl-entry]");
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -1,107 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useRef } from 'react'
|
||||
import Widget from '@/components/Widget'
|
||||
import { timeline, type TimelineType } from '@/data/timeline'
|
||||
|
||||
const typeColor: Record<TimelineType, string> = {
|
||||
career: 'var(--color-timeline-career)',
|
||||
education: 'var(--color-timeline-education)',
|
||||
cert: 'var(--color-timeline-cert)',
|
||||
project: 'var(--color-timeline-project)',
|
||||
homelab: 'var(--color-timeline-homelab)',
|
||||
}
|
||||
|
||||
const typeLabel: Record<TimelineType, string> = {
|
||||
career: 'career',
|
||||
education: 'education',
|
||||
cert: 'cert',
|
||||
project: 'project',
|
||||
homelab: 'homelab',
|
||||
}
|
||||
|
||||
export default function Timeline() {
|
||||
const listRef = useRef<HTMLOListElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
|
||||
|
||||
const entries = listRef.current?.querySelectorAll<HTMLLIElement>('[data-tl-entry]')
|
||||
if (!entries) return
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(observed) => {
|
||||
observed.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
;(entry.target as HTMLElement).style.opacity = '1'
|
||||
;(entry.target as HTMLElement).style.transform = 'translateY(0)'
|
||||
observer.unobserve(entry.target)
|
||||
}
|
||||
})
|
||||
},
|
||||
{ threshold: 0.15 },
|
||||
)
|
||||
|
||||
entries.forEach((el) => {
|
||||
el.style.opacity = '0'
|
||||
el.style.transform = 'translateY(8px)'
|
||||
el.style.transition = 'opacity 240ms linear, transform 240ms linear'
|
||||
observer.observe(el)
|
||||
})
|
||||
|
||||
return () => observer.disconnect()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Widget title="tyler/journey">
|
||||
<ol ref={listRef} className="relative border-l border-[var(--color-border)] ml-[2px] flex flex-col gap-0">
|
||||
{timeline.map((entry, i) => (
|
||||
<li key={i} data-tl-entry className="pl-[3ch] pb-2lh last:pb-0 relative">
|
||||
{/* Spine dot */}
|
||||
<span
|
||||
className="absolute -left-[7px] top-[3px] w-3 h-3 rounded-full border border-[var(--color-bg)] shrink-0"
|
||||
style={{ backgroundColor: typeColor[entry.type] }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
{/* Date + type badge */}
|
||||
<div className="flex items-center gap-1ch mb-half-lh">
|
||||
<span className="font-mono text-sm text-[var(--color-text-dim)]">{entry.date}</span>
|
||||
<span
|
||||
className="font-mono text-sm px-1 border"
|
||||
style={{
|
||||
color: typeColor[entry.type],
|
||||
borderColor: typeColor[entry.type],
|
||||
opacity: 0.7,
|
||||
}}
|
||||
>
|
||||
{typeLabel[entry.type]}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<p className="font-mono text-sm font-semibold text-[var(--color-text)] mb-half-lh">
|
||||
{entry.title}
|
||||
</p>
|
||||
|
||||
{/* Description */}
|
||||
<p className="font-mono text-sm text-[var(--color-text)] opacity-70 leading-relaxed mb-half-lh">
|
||||
{entry.description}
|
||||
</p>
|
||||
|
||||
{/* Tags */}
|
||||
{entry.tags && entry.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-x-1ch gap-y-half-lh">
|
||||
{entry.tags.map((tag) => (
|
||||
<span key={tag} className="font-mono text-sm text-[var(--color-text-dim)]">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</Widget>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
badge?: string | number;
|
||||
meta?: string;
|
||||
as?: "section" | "div" | "article";
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const { title, badge, meta, as: Tag = "section", class: className } = Astro.props;
|
||||
const slashIdx = title.lastIndexOf("/");
|
||||
const prefix = slashIdx >= 0 ? title.slice(0, slashIdx + 1) : null;
|
||||
const name = slashIdx >= 0 ? title.slice(slashIdx + 1) : title;
|
||||
---
|
||||
|
||||
<Tag class:list={["mb-4lh", className]}>
|
||||
<div class="flex items-center gap-1ch mb-2lh">
|
||||
{prefix && (
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)] select-none">{prefix}</span>
|
||||
)}
|
||||
<span class="font-mono text-sm font-semibold text-[var(--color-text)]">{name}</span>
|
||||
{badge !== undefined && (
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">[{badge}]</span>
|
||||
)}
|
||||
{meta && (
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">— {meta}</span>
|
||||
)}
|
||||
</div>
|
||||
<slot />
|
||||
</Tag>
|
||||
@@ -1,39 +0,0 @@
|
||||
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-4lh ${className ?? ""}`}>
|
||||
<div className="flex items-center gap-1ch mb-2lh">
|
||||
{prefix && (
|
||||
<span className="font-mono text-sm text-[var(--color-text-dim)] select-none">{prefix}</span>
|
||||
)}
|
||||
<span className="font-mono text-sm font-semibold text-[var(--color-text)]">{name}</span>
|
||||
{badge !== undefined && (
|
||||
<span className="font-mono text-sm text-[var(--color-text-dim)]">[{badge}]</span>
|
||||
)}
|
||||
{meta && (
|
||||
<span className="font-mono text-sm text-[var(--color-text-dim)]">— {meta}</span>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { createContext, useContext, useEffect, useState } from "react";
|
||||
|
||||
type ThemeContextType = {
|
||||
isDark: boolean;
|
||||
toggle: () => void;
|
||||
};
|
||||
|
||||
const ThemeContext = createContext<ThemeContextType>({
|
||||
isDark: true,
|
||||
toggle: () => {},
|
||||
});
|
||||
|
||||
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||
const [isDark, setIsDark] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem("lerko96-dark-mode");
|
||||
const dark = stored === null ? true : stored === "true";
|
||||
setIsDark(dark);
|
||||
document.documentElement.classList.toggle("dark", dark);
|
||||
}, []);
|
||||
|
||||
function toggle() {
|
||||
const next = !isDark;
|
||||
setIsDark(next);
|
||||
localStorage.setItem("lerko96-dark-mode", String(next));
|
||||
document.documentElement.classList.toggle("dark", next);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ isDark, toggle }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useTheme() {
|
||||
return useContext(ThemeContext);
|
||||
}
|
||||
@@ -27,8 +27,8 @@ export const projects: Project[] = [
|
||||
slug: "portfolio",
|
||||
title: "portfolio",
|
||||
description:
|
||||
"Next.js 16 static site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
|
||||
tags: ["Next.js", "Dockerfile", "Tailwind", "nginx", "Caddy"],
|
||||
"Astro static site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
|
||||
tags: ["Astro", "Dockerfile", "Tailwind", "nginx", "Caddy"],
|
||||
githubUrl: "https://gitea.lerkolabs.com/lerko/portfolio",
|
||||
tier: "featured",
|
||||
year: 2021,
|
||||
|
||||
+37
-38
@@ -2,56 +2,55 @@ 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" },
|
||||
{ name: "pfSense", description: "Firewall, DHCP, routing gateway on Netgate 1100", category: "infrastructure" },
|
||||
{ name: "Caddy", description: "Reverse proxy with automatic wildcard TLS via Cloudflare DNS-01", category: "infrastructure" },
|
||||
{ name: "Pi-hole", description: "Network-wide DNS + ad blocking", category: "infrastructure" },
|
||||
{ name: "WireGuard", description: "VPN — full LAN access for remote clients", category: "infrastructure" },
|
||||
{ name: "mail relay", description: "Outbound SMTP relay for self-hosted service notifications", category: "infrastructure" },
|
||||
{ name: "gluetun", description: "VPN container routing download client traffic", category: "infrastructure" },
|
||||
{ name: "Home Assistant", description: "Smart home automation and device management", category: "infrastructure" },
|
||||
|
||||
// Security / Auth
|
||||
{ name: "Authentik", description: "SSO provider — OIDC + forward auth across all services", category: "security", icon: "fas fa-id-badge" },
|
||||
{ name: "Vaultwarden", description: "Self-hosted password manager, isolated in its own LXC", category: "security", icon: "fas fa-vault" },
|
||||
{ name: "Authentik", description: "SSO provider — OIDC + forward auth across all services", category: "security" },
|
||||
{ name: "Vaultwarden", description: "Self-hosted password manager, isolated in its own LXC", category: "security" },
|
||||
|
||||
// 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" },
|
||||
{ name: "Victoria Metrics", description: "Long-term metrics storage and querying", category: "monitoring" },
|
||||
{ name: "Grafana", description: "Dashboards and alerting across all hosts and services", category: "monitoring" },
|
||||
{ name: "Beszel", description: "Lightweight container and host monitoring", category: "monitoring" },
|
||||
{ name: "ntfy", description: "Self-hosted push notifications", category: "monitoring" },
|
||||
|
||||
// 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" },
|
||||
{ name: "Gitea", description: "Personal Git server", category: "productivity" },
|
||||
{ name: "Outline", description: "Team wiki and knowledge base", category: "productivity" },
|
||||
{ name: "Vikunja", description: "Task management", category: "productivity" },
|
||||
{ name: "Actual Budget", description: "Personal budgeting", category: "productivity" },
|
||||
{ name: "Ghostfolio", description: "Investment portfolio tracking", category: "productivity" },
|
||||
{ name: "Hoarder", description: "Bookmark manager with tagging", category: "productivity" },
|
||||
{ name: "FreshRSS", description: "RSS reader", category: "productivity" },
|
||||
{ name: "Memos", description: "Quick notes and journal", category: "productivity" },
|
||||
{ name: "Traggo", description: "Time tracking", category: "productivity" },
|
||||
{ name: "Baikal", description: "CalDAV / CardDAV server", category: "productivity" },
|
||||
{ name: "Grist", description: "Spreadsheets and structured data", category: "productivity" },
|
||||
{ name: "Glance", description: "Self-hosted start page with feeds and service status", category: "productivity" },
|
||||
{ name: "Filebrowser", description: "Web-based file manager", category: "productivity" },
|
||||
|
||||
// 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" },
|
||||
{ name: "Plex", description: "Media streaming — movies, TV, music", category: "media" },
|
||||
{ name: "Jellyfin", description: "Open-source media streaming", category: "media" },
|
||||
{ name: "Sonarr", description: "Automated TV show management", category: "media" },
|
||||
{ name: "Radarr", description: "Automated movie management", category: "media" },
|
||||
{ name: "Lidarr", description: "Automated music management", category: "media" },
|
||||
{ name: "Prowlarr", description: "Indexer manager and proxy for the *arr stack", category: "media" },
|
||||
{ name: "Bazarr", description: "Automatic subtitle download and management", category: "media" },
|
||||
{ name: "nzbget", description: "Usenet downloader", category: "media" },
|
||||
{ name: "qBittorrent", description: "Torrent client with web UI", category: "media" },
|
||||
{ name: "Kavita", description: "Self-hosted manga and book reader", category: "media" },
|
||||
{ name: "Openshelf", description: "Book library with auto-ingest", category: "media" },
|
||||
];
|
||||
|
||||
export const categoryOrder: Service["category"][] = [
|
||||
|
||||
@@ -27,8 +27,8 @@ export const timeline: TimelineEntry[] = [
|
||||
title: "Portfolio Site v2",
|
||||
type: "project",
|
||||
description:
|
||||
"Next.js 16 portfolio site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
|
||||
tags: ["next.js", "tailwind", "self-hosted"],
|
||||
"Astro portfolio site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
|
||||
tags: ["astro", "tailwind", "self-hosted"],
|
||||
},
|
||||
{
|
||||
date: "2026-04",
|
||||
@@ -74,7 +74,7 @@ export const timeline: TimelineEntry[] = [
|
||||
title: "pfSense",
|
||||
type: "homelab",
|
||||
description:
|
||||
"Netgate 1100 picked up on ebay to experience hands on networking configuration and troubleshooting.",
|
||||
"Netgate 1100 (Marvell ARMADA 3720) picked up on eBay — hands-on networking configuration, VLANs, firewall rules, and troubleshooting.",
|
||||
tags: ["network", "firewall", "vlan", "dhcp"],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
interface Props {
|
||||
title?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
title = "Tyler Koenig",
|
||||
description = "SOC Helpdesk I by day, building beyond the title. Projects in AI tooling, mobile apps, infrastructure, and more.",
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
<script is:inline>
|
||||
(function () {
|
||||
var stored = localStorage.getItem("lerko96-dark-mode");
|
||||
var dark = stored === null ? true : stored === "true";
|
||||
if (dark) document.documentElement.classList.add("dark");
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body
|
||||
class="bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen"
|
||||
>
|
||||
<slot name="nav" />
|
||||
<div
|
||||
class="max-w-[740px] mx-auto border-l border-r border-[var(--color-border)]"
|
||||
>
|
||||
<main class="px-4ch py-3lh">
|
||||
<slot />
|
||||
</main>
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style is:global>
|
||||
@import "../styles/globals.css";
|
||||
|
||||
@font-face {
|
||||
font-family: "Source Code Pro";
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url("/fonts/SourceCodePro-latin-ext.woff2") format("woff2");
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
|
||||
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
|
||||
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
|
||||
U+A720-A7FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Source Code Pro";
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url("/fonts/SourceCodePro-latin.woff2") format("woff2");
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
|
||||
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
|
||||
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="refresh" content="0; url=/projects/" />
|
||||
<link rel="canonical" href="/projects/" />
|
||||
<title>Redirecting...</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>This page moved. <a href="/projects/">/projects/</a></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,237 @@
|
||||
---
|
||||
import Base from "@/layouts/Base.astro";
|
||||
import Nav from "@/components/Nav.astro";
|
||||
import Footer from "@/components/Footer.astro";
|
||||
import Widget from "@/components/Widget.astro";
|
||||
import { services, categoryOrder, categoryLabels } from "@/data/services";
|
||||
|
||||
const glanceStats = [
|
||||
{ label: "Hypervisor", value: "Proxmox VE" },
|
||||
{ label: "Firewall", value: "pfSense (Netgate 1100)" },
|
||||
{ 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: "MGMT", name: "MGMT", purpose: "Network equipment only" },
|
||||
{ id: "LAN", name: "LAN", purpose: "Trusted personal devices" },
|
||||
{ id: "Lab", name: "Homelab", purpose: "All self-hosted services" },
|
||||
{ id: "Guest", name: "Guests", purpose: "Internet only, RFC1918 blocked" },
|
||||
{ id: "IoT", name: "IoT", purpose: "Smart home, isolated" },
|
||||
{ id: "WFH", name: "WFH", purpose: "Work devices, no personal access" },
|
||||
{ id: "DMZ", name: "DMZ", purpose: "Public-facing, hard-blocked internally" },
|
||||
{ id: "VPN", name: "VPN", purpose: "WireGuard clients, LAN-equivalent access" },
|
||||
];
|
||||
|
||||
const adrs = [
|
||||
{
|
||||
title: "ISP gateway: passthrough mode",
|
||||
decision:
|
||||
"ISP gateway stays in-line in passthrough mode, pfSense gets the public IP directly. Gateway WiFi disabled.",
|
||||
why: "Carrier locks 802.1X auth to their own gateway hardware, and bypassing it is brittle — breaks on firmware updates and only saves a millisecond or two. True bridge mode isn't supported. Passthrough is the cleanest option that keeps pfSense as the actual perimeter.",
|
||||
},
|
||||
{
|
||||
title: "Caddy over NGINX Proxy Manager",
|
||||
decision:
|
||||
"Caddy with DNS-01 challenge via Cloudflare API. All subdomains resolve to Caddy internally via Pi-hole. Caddy terminates TLS and proxies to backends.",
|
||||
why: "Single Caddyfile, automatic certs without ever needing to expose internal services to the internet for an HTTP-01 challenge. NPM has more UI overhead for the same outcome. Traefik is more complex for no benefit at this scale.",
|
||||
},
|
||||
{
|
||||
title: "WireGuard over OpenVPN",
|
||||
decision:
|
||||
"WireGuard on pfSense as the only remote-access path. Clients get the access tier documented in the access model — same as LAN, plus the admin surfaces that aren't reachable any other way.",
|
||||
why: "Faster, simpler config, better battery life on mobile. Throughput on the firewall hardware comfortably exceeds the WAN link. OpenVPN has no advantage here. Tailscale would add an external relay dependency for a problem WireGuard already solves.",
|
||||
},
|
||||
{
|
||||
title: "Pi-hole in Homelab VLAN, not MGMT",
|
||||
decision:
|
||||
"Pi-hole runs in the Homelab VLAN. Firewall allows port 53 inbound from VLANs that need local resolution. MGMT uses pfSense Unbound as its primary resolver instead.",
|
||||
why: "Putting Pi-hole in MGMT would mean opening MGMT to all the VLANs that need DNS — much bigger attack surface for the most sensitive tier. DNS traffic crossing into the Homelab VLAN is the lesser risk, and Homelab is already where service traffic terminates anyway.",
|
||||
},
|
||||
{
|
||||
title: "Netgate 1100 for pfSense",
|
||||
decision:
|
||||
"Netgate 1100 (Marvell ARMADA 3720, dual-core ARM) as the firewall appliance. ~6W idle, line-rate NAT at 1 Gbps, WireGuard at ~100–150 Mbps.",
|
||||
why: "Purpose-built for pfSense. Right-sized for 1 Gbps fiber — NAT saturates the link, WireGuard is fast enough for remote access. A full rack server wastes power for this role. Configs and version tracked in private repo.",
|
||||
},
|
||||
{
|
||||
title: "Shared Postgres + Redis in apps LXC",
|
||||
decision:
|
||||
"One Postgres instance hosting multiple databases. One Redis instance. A single init script provisions schemas on first run.",
|
||||
why: "Avoids ~15 separate DB containers. Big RAM savings. Productivity apps colocate in one LXC anyway, so a shared backing store there is the natural shape.",
|
||||
},
|
||||
{
|
||||
title: "Gitea CI/CD: self-hosted runner, internal pipeline, static deploy",
|
||||
decision:
|
||||
"Self-hosted Gitea Actions runner builds the portfolio on push, then deploys pre-built static files to the public-facing host. Build runs in an isolated container so the runner host stays clean. Public host serves static files only — no build toolchain on it.",
|
||||
why: "Keeps the whole pipeline internal. No external runners, no GitHub Actions. The build/serve split means the public-facing host has the smallest possible footprint — static file server, nothing more.",
|
||||
},
|
||||
{
|
||||
title: "Authentik over Authelia",
|
||||
decision: "Authentik as the SSO provider across all self-hosted services.",
|
||||
why: "Full OIDC provider + forward auth in one. Lets services like Outline, Gitea, and Vikunja use real SSO rather than just a login gate. Authelia is forward-auth only — no OIDC provider capability.",
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<Base
|
||||
title="Homelab | Tyler Koenig"
|
||||
description="Production-grade personal homelab: Proxmox, pfSense, 8 VLANs, WireGuard, Caddy, Authentik SSO, and 20+ self-hosted services."
|
||||
>
|
||||
<Nav slot="nav" />
|
||||
|
||||
<div class="mb-4lh">
|
||||
<p class="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh">
|
||||
<span
|
||||
class="text-[var(--color-accent-green)] select-none mr-1ch"
|
||||
aria-hidden="true"
|
||||
>
|
||||
❯
|
||||
</span>
|
||||
homelab
|
||||
</p>
|
||||
<p class="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>
|
||||
|
||||
<Widget title="homelab/overview" badge={glanceStats.length} as="section">
|
||||
<div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
|
||||
{glanceStats.map(({ label, value }) => (
|
||||
<div class="bg-[var(--color-surface)] px-2ch py-half-lh">
|
||||
<p class="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh">
|
||||
{label}
|
||||
</p>
|
||||
<p class="font-mono text-sm text-[var(--color-text)]">
|
||||
{value}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Widget>
|
||||
|
||||
<Widget
|
||||
title="homelab/network"
|
||||
meta="8 network segments · default deny"
|
||||
as="section"
|
||||
>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm border-collapse">
|
||||
<thead>
|
||||
<tr class="border-b border-[var(--color-border)]">
|
||||
<th class="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase">
|
||||
Segment
|
||||
</th>
|
||||
<th class="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase">
|
||||
Name
|
||||
</th>
|
||||
<th class="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh uppercase">
|
||||
Purpose
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{vlans.map((v) => (
|
||||
<tr class="border-b border-[var(--color-border)] hover:bg-[var(--color-surface)]">
|
||||
<td class="font-mono text-[var(--color-accent-green)] py-half-lh pr-[3ch]">
|
||||
{v.id}
|
||||
</td>
|
||||
<td class="font-mono text-[var(--color-text)] py-half-lh pr-[3ch]">
|
||||
{v.name}
|
||||
</td>
|
||||
<td class="font-mono text-sm text-[var(--color-text)] py-2.5 opacity-80">
|
||||
{v.purpose}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Widget>
|
||||
|
||||
<Widget title="homelab/services" badge={services.length} as="section">
|
||||
<div class="flex flex-col gap-3ch">
|
||||
{categoryOrder.map((cat) => {
|
||||
const catServices = services.filter((s) => s.category === cat);
|
||||
return (
|
||||
<div>
|
||||
<p class="font-mono text-sm text-[var(--color-text-dim)] mb-1lh">
|
||||
{categoryLabels[cat]}
|
||||
</p>
|
||||
<div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
|
||||
{catServices.map((svc) => (
|
||||
<div class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start gap-1ch px-2ch py-half-lh">
|
||||
<div>
|
||||
<p class="font-mono text-sm text-[var(--color-text)] mb-0.5">
|
||||
{svc.name}
|
||||
</p>
|
||||
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
|
||||
{svc.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Widget>
|
||||
|
||||
<Widget
|
||||
title="homelab/ADRs"
|
||||
meta="why things are configured the way they are"
|
||||
badge={adrs.length}
|
||||
as="section"
|
||||
>
|
||||
<div class="flex flex-col gap-px bg-[var(--color-border)]">
|
||||
{adrs.map((adr) => (
|
||||
<div class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-2ch py-1lh">
|
||||
<p class="font-mono text-sm text-[var(--color-text)] mb-1lh">
|
||||
{adr.title}
|
||||
</p>
|
||||
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed mb-half-lh opacity-75">
|
||||
<span class="text-[var(--color-text-label)] opacity-100">
|
||||
decision:{" "}
|
||||
</span>
|
||||
{adr.decision}
|
||||
</p>
|
||||
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
|
||||
<span class="text-[var(--color-text-label)] opacity-100">
|
||||
why:{" "}
|
||||
</span>
|
||||
{adr.why}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Widget>
|
||||
|
||||
<section class="pt-qtr-lh">
|
||||
<p class="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh">
|
||||
homelab/docs
|
||||
</p>
|
||||
<p class="font-mono text-sm text-[var(--color-text)] mb-1lh opacity-75">
|
||||
VLAN maps, runbooks, service registry, config exports, and setup
|
||||
guides.
|
||||
</p>
|
||||
<a
|
||||
href="https://gitea.lerkolabs.com/lerko/homelab"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
↗ gitea.lerkolabs.com/lerko/homelab
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<Footer slot="footer" />
|
||||
</Base>
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
import Base from "@/layouts/Base.astro";
|
||||
import Nav from "@/components/Nav.astro";
|
||||
import Footer from "@/components/Footer.astro";
|
||||
import Hero from "@/components/Hero.astro";
|
||||
import Timeline from "@/components/Timeline.astro";
|
||||
---
|
||||
|
||||
<Base>
|
||||
<Nav slot="nav" />
|
||||
<Hero />
|
||||
<Timeline />
|
||||
<Footer slot="footer" />
|
||||
</Base>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
import Base from "@/layouts/Base.astro";
|
||||
import Nav from "@/components/Nav.astro";
|
||||
import Footer from "@/components/Footer.astro";
|
||||
import Widget from "@/components/Widget.astro";
|
||||
import ProjectCard from "@/components/ProjectCard.astro";
|
||||
import { featuredProjects, archiveProjects } from "@/data/projects";
|
||||
---
|
||||
|
||||
<Base
|
||||
title="Projects | Tyler Koenig"
|
||||
description="Featured projects and earlier work — homelab, open-pact, helm, and bootcamp/experiment archive."
|
||||
>
|
||||
<Nav slot="nav" />
|
||||
|
||||
<div class="mb-4lh">
|
||||
<p class="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh">
|
||||
<span class="text-[var(--color-accent-green)] select-none mr-1ch" aria-hidden="true">❯</span>
|
||||
projects
|
||||
</p>
|
||||
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-xl opacity-80">
|
||||
Featured work first. Earlier experiments, browser extensions, and bootcamp projects below — kept for context.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Widget title="projects/featured" badge={featuredProjects.length} as="section">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-1ch">
|
||||
{featuredProjects.map((project) => (
|
||||
<ProjectCard project={project} />
|
||||
))}
|
||||
</div>
|
||||
</Widget>
|
||||
|
||||
<Widget title="projects/archive" badge={archiveProjects.length} as="section">
|
||||
<div class="flex flex-col gap-px bg-[var(--color-border)]">
|
||||
{archiveProjects.map((project) => (
|
||||
<a
|
||||
href={project.githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start justify-between gap-2ch px-2ch py-1lh group"
|
||||
>
|
||||
<div class="flex flex-col gap-1ch flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1ch">
|
||||
{project.year && (
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)] shrink-0">
|
||||
{project.year}
|
||||
</span>
|
||||
)}
|
||||
<span class="font-mono text-sm text-[var(--color-text)] group-hover:text-[var(--color-accent-green)] truncate">
|
||||
{project.title}
|
||||
</span>
|
||||
</div>
|
||||
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
|
||||
{project.description}
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-x-1ch gap-y-0.5">
|
||||
{project.tags.map((tag) => (
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="font-mono text-sm text-[var(--color-text-label)] group-hover:text-[var(--color-text)] shrink-0 mt-0.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
↗
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</Widget>
|
||||
|
||||
<Footer slot="footer" />
|
||||
</Base>
|
||||
+3
-28
@@ -1,34 +1,9 @@
|
||||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"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"
|
||||
}
|
||||
],
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts",
|
||||
"**/*.mts"
|
||||
],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user