refactor(content): slim homelab to highlight, trim redundant timeline entries

Homelab: drop VLAN table, services list, and ADRs — full docs live in
the homelab repo. Keep condensed at-a-glance stats, category counts,
and Gitea link.

Timeline: drop project entries (covered by Projects section),
lerkolabs.com (duplicate of portfolio), and PC Build. 14 → 9 entries.

Also: hide nav anchor links on mobile, drop Hero section anchors,
update meta description, add print stylesheet.
This commit is contained in:
2026-05-26 17:39:19 -04:00
parent aa5fdb579c
commit 38326cc7ec
6 changed files with 30 additions and 189 deletions
-6
View File
@@ -42,10 +42,4 @@
Email Email
</a> </a>
</nav> </nav>
<nav class="flex flex-wrap items-center gap-x-2ch gap-y-half-lh text-[var(--color-text-dim)] mt-half-lh">
<a href="#projects" class="underline hover:text-[var(--color-text)]">Projects</a>
<a href="#journey" class="underline hover:text-[var(--color-text)]">Journey</a>
<a href="#homelab" class="underline hover:text-[var(--color-text)]">Homelab</a>
</nav>
</section> </section>
+3 -3
View File
@@ -3,9 +3,9 @@
<a href="/" class="font-semibold">Tyler Koenig</a> <a href="/" class="font-semibold">Tyler Koenig</a>
<div class="flex items-center gap-2ch"> <div class="flex items-center gap-2ch">
<a href="#projects" class="text-[var(--color-text-label)] hover:text-[var(--color-text)]">projects</a> <a href="#projects" class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">projects</a>
<a href="#journey" class="text-[var(--color-text-label)] hover:text-[var(--color-text)]">journey</a> <a href="#journey" class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">journey</a>
<a href="#homelab" class="text-[var(--color-text-label)] hover:text-[var(--color-text)]">homelab</a> <a href="#homelab" class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">homelab</a>
<button <button
data-theme-toggle data-theme-toggle
-39
View File
@@ -22,30 +22,6 @@ export const timeline: TimelineEntry[] = [
"Studying for Network+ to formalize networking knowledge built through the homelab.", "Studying for Network+ to formalize networking knowledge built through the homelab.",
tags: ["networking", "certification"], tags: ["networking", "certification"],
}, },
{
date: "2026-04",
title: "Portfolio Site v2",
type: "project",
description:
"Astro portfolio site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
tags: ["astro", "tailwind", "self-hosted"],
},
{
date: "2026-04",
title: "lerkolabs.com",
type: "homelab",
description:
"Self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
tags: ["LXC", "DMZ", "self-hosted"],
},
{
date: "2026-03",
title: "Helm",
type: "project",
description:
"Full-stack task and project management tool built in Go + React.",
tags: ["go", "react", "typescript"],
},
{ {
date: "2025", date: "2025",
title: "Proxmox Backup Server", title: "Proxmox Backup Server",
@@ -93,13 +69,6 @@ export const timeline: TimelineEntry[] = [
"Promoted to Config Tech II. Led imaging workflows and expanded into scripting for endpoint provisioning.", "Promoted to Config Tech II. Led imaging workflows and expanded into scripting for endpoint provisioning.",
tags: ["sysadmin", "scripting"], tags: ["sysadmin", "scripting"],
}, },
{
date: "2022-11",
title: "PC Build",
type: "homelab",
description: "Sourced parts online and built a personal computer.",
tags: ["amd", "windows 10", "configure", "desktop"],
},
{ {
date: "2022-05", date: "2022-05",
title: "Config Tech I — MCPc", title: "Config Tech I — MCPc",
@@ -108,14 +77,6 @@ export const timeline: TimelineEntry[] = [
"Hardware configuration, OS imaging, and deployment at scale for enterprise clients.", "Hardware configuration, OS imaging, and deployment at scale for enterprise clients.",
tags: ["sysadmin", "hardware"], tags: ["sysadmin", "hardware"],
}, },
{
date: "2021-10",
title: "Portfolio Site v1",
type: "project",
description:
"React portfolio deployed to www.lerko96.github.io using github pages.",
tags: ["React", "CSS", "github pages"],
},
{ {
date: "2021-01", date: "2021-01",
title: "We Can Code IT — Java Bootcamp", title: "We Can Code IT — Java Bootcamp",
+1 -1
View File
@@ -6,7 +6,7 @@ interface Props {
const { const {
title = "Tyler Koenig", title = "Tyler Koenig",
description = "SOC Helpdesk I by day, building beyond the title. Projects in AI tooling, mobile apps, infrastructure, and more.", description = "Security operations, self-hosted infrastructure, and software projects. Homelab, Go, TypeScript, and more.",
} = Astro.props; } = Astro.props;
--- ---
+11 -140
View File
@@ -12,74 +12,8 @@ import { services, categoryOrder, categoryLabels } from "@/data/services";
const glanceStats = [ const glanceStats = [
{ label: "Hypervisor", value: "Proxmox VE" }, { label: "Hypervisor", value: "Proxmox VE" },
{ label: "Firewall", value: "pfSense (Netgate 1100)" }, { label: "Firewall", value: "pfSense (Netgate 1100)" },
{ label: "Switching", value: "TP-Link Omada (managed)" }, { label: "Network", value: "8 VLANs, default deny, managed switching" },
{ label: "ISP", value: "AT&T Fiber 1 Gbps" }, { label: "Services", value: `${services.length} self-hosted across ${categoryOrder.length} categories` },
{ 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 ~100150 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.",
},
]; ];
--- ---
@@ -113,7 +47,7 @@ const adrs = [
</p> </p>
</div> </div>
<Widget title="Overview" as="div"> <Widget title="At a Glance" as="div">
<dl class="flex flex-col"> <dl class="flex flex-col">
{glanceStats.map(({ label, value }) => ( {glanceStats.map(({ label, value }) => (
<div class="flex gap-2ch py-qtr-lh"> <div class="flex gap-2ch py-qtr-lh">
@@ -124,86 +58,23 @@ const adrs = [
</dl> </dl>
</Widget> </Widget>
<Widget
title="Network"
meta="8 segments, default deny"
as="div"
>
<div class="overflow-x-auto">
<table class="w-full border-collapse">
<thead>
<tr class="border-b border-[var(--color-border)]">
<th class="text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch]">
Segment
</th>
<th class="text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch]">
Name
</th>
<th class="text-[var(--color-text-dim)] text-left py-qtr-lh">
Purpose
</th>
</tr>
</thead>
<tbody>
{vlans.map((v) => (
<tr class="border-b border-[var(--color-border)]">
<td class="py-half-lh pr-[3ch]">{v.id}</td>
<td class="py-half-lh pr-[3ch]">{v.name}</td>
<td class="text-[var(--color-text-label)] py-half-lh">{v.purpose}</td>
</tr>
))}
</tbody>
</table>
</div>
</Widget>
<Widget title="Services" as="div"> <Widget title="Services" as="div">
<div class="flex flex-col gap-2lh"> <div class="flex flex-wrap gap-x-[3ch] gap-y-qtr-lh">
{categoryOrder.map((cat) => { {categoryOrder.map((cat) => {
const catServices = services.filter((s) => s.category === cat && !s.hidden); const count = services.filter((s) => s.category === cat).length;
return ( return (
<div> <span>
<h3 class="text-[var(--color-text-dim)] font-semibold mb-half-lh"> <span class="text-[var(--color-text-dim)]">{categoryLabels[cat]}</span>
{categoryLabels[cat]} <span class="text-[var(--color-text-label)]"> ({count})</span>
</h3> </span>
<ul class="flex flex-col">
{catServices.map((svc) => (
<li class="py-qtr-lh">
<span class="font-semibold">{svc.name}</span>
<span class="text-[var(--color-text-label)]"> — {svc.description}</span>
</li>
))}
</ul>
</div>
); );
})} })}
</div> </div>
</Widget> </Widget>
<Widget
title="ADRs"
meta="why things are configured the way they are"
as="div"
>
<div class="flex flex-col gap-2lh">
{adrs.map((adr) => (
<div>
<h3 class="font-semibold mb-half-lh">{adr.title}</h3>
<p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
<strong>Decision:</strong> {adr.decision}
</p>
<p class="text-[var(--color-text-label)] leading-relaxed">
<strong>Why:</strong> {adr.why}
</p>
</div>
))}
</div>
</Widget>
<div class="mb-4lh"> <div class="mb-4lh">
<h2 class="text-lg font-semibold mb-half-lh">Docs</h2>
<p class="text-[var(--color-text-label)] mb-half-lh"> <p class="text-[var(--color-text-label)] mb-half-lh">
VLAN maps, runbooks, service registry, config exports, and setup guides. Full documentation — network maps, ADRs, runbooks, and service configs.
</p> </p>
<a <a
href="https://gitea.lerkolabs.com/lerko/homelab" href="https://gitea.lerkolabs.com/lerko/homelab"
@@ -211,7 +82,7 @@ const adrs = [
rel="noopener noreferrer" rel="noopener noreferrer"
class="underline hover:text-[var(--color-text-label)]" class="underline hover:text-[var(--color-text-label)]"
> >
gitea.lerkolabs.com/lerko/homelab gitea.lerkolabs.com/lerko/homelab
</a> </a>
</div> </div>
</section> </section>
+15
View File
@@ -94,6 +94,21 @@ button {
outline-color 120ms linear; outline-color 120ms linear;
} }
@media print {
html {
font-family: var(--font-serif);
font-size: 11pt;
line-height: 1.3;
color: #000;
background: #fff;
}
header, footer, button { display: none; }
a { color: inherit; text-decoration: underline; }
main { max-width: none; padding: 0; }
section, div, li { margin-bottom: 0.25em; padding-bottom: 0; }
h1, h2, h3 { margin-bottom: 0.15em; }
}
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
*, *::before, *::after { *, *::before, *::after {
animation-duration: 0.01ms !important; animation-duration: 0.01ms !important;