feat(design): single-page consolidation, drop typeface picker
Merge projects + homelab + timeline into one scrollable page. Remove typeface picker (sans/serif/mono), keep theme toggle. Nav simplified to name + toggle. Hero gains anchor links for in-page navigation (#projects, #journey, #homelab). Old pages become meta-refresh redirects. Timeline redesigned as two-column grid layout — date left, content right — cutting vertical space ~50%. Focus states added for keyboard nav. Tags dropped from timeline entries.
This commit is contained in:
@@ -42,4 +42,10 @@
|
||||
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>
|
||||
|
||||
@@ -1,53 +1,14 @@
|
||||
---
|
||||
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-bg)] border-b border-[var(--color-border)]">
|
||||
<nav class="max-w-[740px] mx-auto px-4ch h-11 flex items-center justify-between">
|
||||
<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={[
|
||||
active
|
||||
? "text-[var(--color-text)]"
|
||||
: "text-[var(--color-text-label)] hover:text-[var(--color-text)]",
|
||||
]}
|
||||
>
|
||||
{label}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<a href="/" class="font-semibold">Tyler Koenig</a>
|
||||
|
||||
<div class="flex items-center gap-2ch">
|
||||
<div role="group" aria-label="Typeface" class="flex items-center gap-[0.5ch] text-[var(--color-text-dim)]">
|
||||
<button data-typeface-btn="sans" class="hover:text-[var(--color-text)] cursor-pointer">sans</button>
|
||||
<span aria-hidden="true">/</span>
|
||||
<button data-typeface-btn="serif" class="hover:text-[var(--color-text)] cursor-pointer">serif</button>
|
||||
<span aria-hidden="true">/</span>
|
||||
<button data-typeface-btn="mono" class="hover:text-[var(--color-text)] cursor-pointer">mono</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
data-theme-toggle
|
||||
aria-label="Switch to light mode"
|
||||
class="text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
|
||||
>
|
||||
light
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
data-theme-toggle
|
||||
aria-label="Switch to light mode"
|
||||
class="text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
|
||||
>
|
||||
light
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
@@ -71,31 +32,4 @@ const links = [
|
||||
});
|
||||
|
||||
updateTheme();
|
||||
|
||||
const tfBtns = document.querySelectorAll("[data-typeface-btn]");
|
||||
|
||||
function updateTypeface() {
|
||||
const current = document.documentElement.dataset.typeface || "sans";
|
||||
tfBtns.forEach((b) => {
|
||||
const val = b.getAttribute("data-typeface-btn");
|
||||
if (val === current) {
|
||||
b.classList.add("font-bold", "text-[var(--color-text)]");
|
||||
b.classList.remove("text-[var(--color-text-dim)]");
|
||||
} else {
|
||||
b.classList.remove("font-bold", "text-[var(--color-text)]");
|
||||
b.classList.add("text-[var(--color-text-dim)]");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
tfBtns.forEach((b) => {
|
||||
b.addEventListener("click", () => {
|
||||
const val = b.getAttribute("data-typeface-btn")!;
|
||||
document.documentElement.dataset.typeface = val;
|
||||
localStorage.setItem("lerko96-typeface", val);
|
||||
updateTypeface();
|
||||
});
|
||||
});
|
||||
|
||||
updateTypeface();
|
||||
</script>
|
||||
|
||||
@@ -14,29 +14,24 @@ const typeLabel: Record<TimelineType, string> = {
|
||||
---
|
||||
|
||||
<Widget title="Journey">
|
||||
<ol class="flex flex-col gap-0">
|
||||
<ol class="flex flex-col">
|
||||
{timeline.map((entry) => (
|
||||
<li class="pb-2lh last:pb-0">
|
||||
<p class="text-[var(--color-text-dim)] mb-qtr-lh">
|
||||
<li class="grid grid-cols-[10ch_1fr] gap-2ch py-half-lh border-b border-[var(--color-border)] last:border-b-0">
|
||||
<div class="text-[var(--color-text-dim)] pt-[0.1em]">
|
||||
{isDate(entry.date)
|
||||
? <time datetime={entry.date}>{entry.date}</time>
|
||||
: <span>{entry.date}</span>
|
||||
}
|
||||
<span class="mx-[0.5ch]">·</span>
|
||||
<em>{typeLabel[entry.type]}</em>
|
||||
</p>
|
||||
|
||||
<h3 class="font-semibold mb-half-lh">{entry.title}</h3>
|
||||
|
||||
<p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
|
||||
{entry.description}
|
||||
</p>
|
||||
|
||||
{entry.tags && entry.tags.length > 0 && (
|
||||
<p class="text-[var(--color-text-dim)]">
|
||||
{entry.tags.join(" · ")}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold">
|
||||
{entry.title}
|
||||
<span class="font-normal text-[var(--color-text-dim)]"> · {typeLabel[entry.type]}</span>
|
||||
</h3>
|
||||
<p class="text-[var(--color-text-label)] leading-relaxed">
|
||||
{entry.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
|
||||
@@ -25,12 +25,6 @@ const {
|
||||
if (dark) document.documentElement.classList.add("dark");
|
||||
})();
|
||||
</script>
|
||||
<script is:inline>
|
||||
(function () {
|
||||
var tf = localStorage.getItem("lerko96-typeface") || "sans";
|
||||
document.documentElement.dataset.typeface = tf;
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body
|
||||
class="bg-[var(--color-bg)] text-[var(--color-text)] min-h-screen"
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="refresh" content="0; url=/projects/" />
|
||||
<link rel="canonical" href="/projects/" />
|
||||
<meta http-equiv="refresh" content="0; url=/#projects" />
|
||||
<link rel="canonical" href="/" />
|
||||
<title>Redirecting...</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>This page moved. <a href="/projects/">/projects/</a></p>
|
||||
<p>This page moved. <a href="/#projects">/#projects</a></p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+12
-202
@@ -1,202 +1,12 @@
|
||||
---
|
||||
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">
|
||||
<h1 class="text-xl font-bold mb-half-lh">Homelab</h1>
|
||||
<p class="text-[var(--color-text-label)] leading-relaxed max-w-2xl">
|
||||
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="Overview" badge={glanceStats.length} as="section">
|
||||
<dl class="flex flex-col">
|
||||
{glanceStats.map(({ label, value }) => (
|
||||
<div class="flex gap-2ch py-qtr-lh">
|
||||
<dt class="text-[var(--color-text-dim)] w-[16ch] shrink-0">{label}</dt>
|
||||
<dd>{value}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</Widget>
|
||||
|
||||
<Widget
|
||||
title="Network"
|
||||
meta="8 segments, default deny"
|
||||
as="section"
|
||||
>
|
||||
<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" badge={services.length} as="section">
|
||||
<div class="flex flex-col gap-2lh">
|
||||
{categoryOrder.map((cat) => {
|
||||
const catServices = services.filter((s) => s.category === cat);
|
||||
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>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Widget>
|
||||
|
||||
<Widget
|
||||
title="ADRs"
|
||||
meta="why things are configured the way they are"
|
||||
badge={adrs.length}
|
||||
as="section"
|
||||
>
|
||||
<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>
|
||||
|
||||
<section 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.
|
||||
</p>
|
||||
<a
|
||||
href="https://gitea.lerkolabs.com/lerko/homelab"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="underline hover:text-[var(--color-text-label)]"
|
||||
>
|
||||
gitea.lerkolabs.com/lerko/homelab
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<Footer slot="footer" />
|
||||
</Base>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="refresh" content="0; url=/#homelab" />
|
||||
<link rel="canonical" href="/" />
|
||||
<title>Redirecting...</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>This page moved. <a href="/#homelab">/#homelab</a></p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+208
-1
@@ -4,11 +4,218 @@ import Nav from "@/components/Nav.astro";
|
||||
import Footer from "@/components/Footer.astro";
|
||||
import Hero from "@/components/Hero.astro";
|
||||
import Timeline from "@/components/Timeline.astro";
|
||||
import Widget from "@/components/Widget.astro";
|
||||
import ProjectCard from "@/components/ProjectCard.astro";
|
||||
import { featuredProjects } from "@/data/projects";
|
||||
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>
|
||||
<Nav slot="nav" />
|
||||
|
||||
<Hero />
|
||||
<Timeline />
|
||||
|
||||
<section id="projects">
|
||||
<Widget title="Projects" badge={featuredProjects.length} as="div">
|
||||
<div class="flex flex-col">
|
||||
{featuredProjects.map((project) => (
|
||||
<ProjectCard project={project} />
|
||||
))}
|
||||
</div>
|
||||
</Widget>
|
||||
</section>
|
||||
|
||||
<section id="journey">
|
||||
<Timeline />
|
||||
</section>
|
||||
|
||||
<section id="homelab">
|
||||
<div class="mb-4lh">
|
||||
<h2 class="text-xl font-bold mb-half-lh">Homelab</h2>
|
||||
<p class="text-[var(--color-text-label)] leading-relaxed max-w-2xl">
|
||||
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="Overview" badge={glanceStats.length} as="div">
|
||||
<dl class="flex flex-col">
|
||||
{glanceStats.map(({ label, value }) => (
|
||||
<div class="flex gap-2ch py-qtr-lh">
|
||||
<dt class="text-[var(--color-text-dim)] w-[16ch] shrink-0">{label}</dt>
|
||||
<dd>{value}</dd>
|
||||
</div>
|
||||
))}
|
||||
</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" badge={services.length} as="div">
|
||||
<div class="flex flex-col gap-2lh">
|
||||
{categoryOrder.map((cat) => {
|
||||
const catServices = services.filter((s) => s.category === cat);
|
||||
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>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Widget>
|
||||
|
||||
<Widget
|
||||
title="ADRs"
|
||||
meta="why things are configured the way they are"
|
||||
badge={adrs.length}
|
||||
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.
|
||||
</p>
|
||||
<a
|
||||
href="https://gitea.lerkolabs.com/lerko/homelab"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="underline hover:text-[var(--color-text-label)]"
|
||||
>
|
||||
gitea.lerkolabs.com/lerko/homelab
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer slot="footer" />
|
||||
</Base>
|
||||
|
||||
+12
-64
@@ -1,64 +1,12 @@
|
||||
---
|
||||
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">
|
||||
<h1 class="text-xl font-bold mb-half-lh">Projects</h1>
|
||||
<p class="text-[var(--color-text-label)] leading-relaxed max-w-xl">
|
||||
Featured work first. Earlier experiments, browser extensions, and bootcamp projects below — kept for context.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Widget title="Featured" badge={featuredProjects.length} as="section">
|
||||
<div class="flex flex-col">
|
||||
{featuredProjects.map((project) => (
|
||||
<ProjectCard project={project} />
|
||||
))}
|
||||
</div>
|
||||
</Widget>
|
||||
|
||||
<Widget title="Archive" badge={archiveProjects.length} as="section">
|
||||
<div class="flex flex-col gap-2lh">
|
||||
{archiveProjects.map((project) => (
|
||||
<div>
|
||||
<div class="flex items-baseline gap-1ch mb-half-lh">
|
||||
{project.year && (
|
||||
<span class="text-[var(--color-text-dim)] shrink-0">
|
||||
{project.year}
|
||||
</span>
|
||||
)}
|
||||
<h3>
|
||||
<a
|
||||
href={project.githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="font-semibold underline hover:text-[var(--color-text-label)]"
|
||||
>
|
||||
{project.title}
|
||||
</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
|
||||
{project.description}
|
||||
</p>
|
||||
<p class="text-[var(--color-text-dim)]">
|
||||
{project.tags.join(" · ")}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Widget>
|
||||
|
||||
<Footer slot="footer" />
|
||||
</Base>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="refresh" content="0; url=/#projects" />
|
||||
<link rel="canonical" href="/" />
|
||||
<title>Redirecting...</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>This page moved. <a href="/#projects">/#projects</a></p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+14
-9
@@ -17,8 +17,6 @@
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
|
||||
--font-mono: "Source Code Pro", ui-monospace, monospace;
|
||||
--font-body: var(--font-sans);
|
||||
|
||||
/* Breakpoints */
|
||||
--breakpoint-xs: 576px;
|
||||
|
||||
@@ -44,14 +42,9 @@ html {
|
||||
line-height: 1.5;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-body);
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
/* Typeface picker overrides */
|
||||
html[data-typeface="sans"] { --font-body: var(--font-sans); }
|
||||
html[data-typeface="serif"] { --font-body: var(--font-serif); line-height: 1.6; }
|
||||
html[data-typeface="mono"] { --font-body: var(--font-mono); font-size: 15px; letter-spacing: -0.01em; }
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
@@ -82,11 +75,23 @@ a:hover {
|
||||
text-decoration-color: currentColor;
|
||||
}
|
||||
|
||||
/* Focus states */
|
||||
a:focus-visible {
|
||||
text-decoration-color: currentColor;
|
||||
outline: 2px solid var(--color-border-bright);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
button:focus-visible {
|
||||
outline: 2px solid var(--color-border-bright);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Default transitions */
|
||||
a,
|
||||
button {
|
||||
transition: color 120ms linear, border-color 120ms linear,
|
||||
opacity 120ms linear, text-decoration-color 120ms linear;
|
||||
opacity 120ms linear, text-decoration-color 120ms linear,
|
||||
outline-color 120ms linear;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
Reference in New Issue
Block a user