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:
@@ -42,10 +42,4 @@
|
||||
Email
|
||||
</a>
|
||||
</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>
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
<a href="/" class="font-semibold">Tyler Koenig</a>
|
||||
|
||||
<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="#journey" class="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="#projects" class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">projects</a>
|
||||
<a href="#journey" class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">journey</a>
|
||||
<a href="#homelab" class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">homelab</a>
|
||||
|
||||
<button
|
||||
data-theme-toggle
|
||||
|
||||
@@ -22,30 +22,6 @@ export const timeline: TimelineEntry[] = [
|
||||
"Studying for Network+ to formalize networking knowledge built through the homelab.",
|
||||
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",
|
||||
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.",
|
||||
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",
|
||||
title: "Config Tech I — MCPc",
|
||||
@@ -108,14 +77,6 @@ export const timeline: TimelineEntry[] = [
|
||||
"Hardware configuration, OS imaging, and deployment at scale for enterprise clients.",
|
||||
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",
|
||||
title: "We Can Code IT — Java Bootcamp",
|
||||
|
||||
@@ -6,7 +6,7 @@ interface Props {
|
||||
|
||||
const {
|
||||
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;
|
||||
---
|
||||
|
||||
|
||||
+11
-140
@@ -12,74 +12,8 @@ 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.",
|
||||
},
|
||||
{ label: "Network", value: "8 VLANs, default deny, managed switching" },
|
||||
{ label: "Services", value: `${services.length} self-hosted across ${categoryOrder.length} categories` },
|
||||
];
|
||||
---
|
||||
|
||||
@@ -113,7 +47,7 @@ const adrs = [
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Widget title="Overview" as="div">
|
||||
<Widget title="At a Glance" as="div">
|
||||
<dl class="flex flex-col">
|
||||
{glanceStats.map(({ label, value }) => (
|
||||
<div class="flex gap-2ch py-qtr-lh">
|
||||
@@ -124,86 +58,23 @@ const adrs = [
|
||||
</dl>
|
||||
</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">
|
||||
<div class="flex flex-col gap-2lh">
|
||||
<div class="flex flex-wrap gap-x-[3ch] gap-y-qtr-lh">
|
||||
{categoryOrder.map((cat) => {
|
||||
const catServices = services.filter((s) => s.category === cat && !s.hidden);
|
||||
const count = services.filter((s) => s.category === cat).length;
|
||||
return (
|
||||
<div>
|
||||
<h3 class="text-[var(--color-text-dim)] font-semibold mb-half-lh">
|
||||
{categoryLabels[cat]}
|
||||
</h3>
|
||||
<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>
|
||||
<span>
|
||||
<span class="text-[var(--color-text-dim)]">{categoryLabels[cat]}</span>
|
||||
<span class="text-[var(--color-text-label)]"> ({count})</span>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</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">
|
||||
<h2 class="text-lg font-semibold mb-half-lh">Docs</h2>
|
||||
<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>
|
||||
<a
|
||||
href="https://gitea.lerkolabs.com/lerko/homelab"
|
||||
@@ -211,7 +82,7 @@ const adrs = [
|
||||
rel="noopener noreferrer"
|
||||
class="underline hover:text-[var(--color-text-label)]"
|
||||
>
|
||||
gitea.lerkolabs.com/lerko/homelab
|
||||
gitea.lerkolabs.com/lerko/homelab →
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -94,6 +94,21 @@ button {
|
||||
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) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
|
||||
Reference in New Issue
Block a user