lerko/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(design): reader view polish + content refresh #11

Merged
lerko merged 10 commits from staging into dev 2026-05-31 22:29:03 +00:00
Conversation 0 Commits 10 Files Changed 16
+406 -718
16 changed files with 406 additions and 718 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.astro
+13 -18
View File
@@ -3,45 +3,40 @@ 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)]">
&copy; {year} Tyler Koenig
</span>
<div class="flex items-center gap-2ch">
<div class="px-4ch flex items-center justify-between text-[var(--color-text-dim)]">
<span>&copy; {year} Tyler Koenig</span>
<nav 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)]"
class="underline"
>
[github]
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)]"
class="underline"
>
[gitea]
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)]"
class="underline"
>
[linkedin]
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)]"
target="_blank"
class="underline"
>
[email]
Email
</a>
</div>
</nav>
</div>
</footer>
src/components/Hero.astro
+47 -68
View File
@@ -1,71 +1,50 @@
<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>
---
import { services } from "@/data/services";
---
<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>
<section class="mb-3lh">
<h1 class="text-xl font-bold mb-half-lh">Tyler Koenig</h1>
<p class="text-[var(--color-text-label)] mb-1lh">
Security Operations · Self-Hosted Infrastructure
</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>
<p class="text-[var(--color-text-label)] leading-relaxed mb-1lh">
Homelab runs {services.length} services across segmented VLANs — pfSense, Authentik SSO,
full observability stack. Write software too: mobile apps, Go backends, open
protocols.
</p>
<nav class="flex flex-wrap items-center gap-x-2ch gap-y-half-lh text-[var(--color-text-label)]">
<a
href="https://github.com/lerko96"
target="_blank"
rel="noopener noreferrer"
class="underline"
>
GitHub
</a>
<a
href="https://gitea.lerkolabs.com/lerko"
target="_blank"
rel="noopener noreferrer"
class="underline"
>
Gitea
</a>
<a
href="https://www.linkedin.com/in/tyler-koenig"
target="_blank"
rel="noopener noreferrer"
class="underline"
>
LinkedIn
</a>
<a
href="mailto:tyler@lerkolabs.com"
target="_blank"
class="underline"
>
Email
</a>
</nav>
</section>
src/components/Nav.astro
+70 -54
View File
@@ -1,73 +1,89 @@
---
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)]">
<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">
<a
href="/"
class="font-mono text-sm font-bold text-[var(--color-text)] hover:text-[var(--color-text-label)]"
>
~/
</a>
<a href="/" class="font-semibold">Tyler Koenig</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>
<div class="flex items-center gap-2ch">
<a href="#projects" data-nav-link class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">projects</a>
<a href="#journey" data-nav-link class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">journey</a>
<a href="#homelab" data-nav-link class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">homelab</a>
<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>
</nav>
</header>
<script>
const btn = document.querySelector("[data-theme-toggle]") as HTMLButtonElement;
const themeBtn = document.querySelector("[data-theme-toggle]") as HTMLButtonElement;
function update() {
function updateTheme() {
const isDark = document.documentElement.classList.contains("dark");
btn.textContent = isDark ? "[light]" : "[dark]";
btn.setAttribute(
themeBtn.textContent = isDark ? "light" : "dark";
themeBtn.setAttribute(
"aria-label",
isDark ? "Switch to light mode" : "Switch to dark mode",
);
}
btn.addEventListener("click", () => {
themeBtn.addEventListener("click", () => {
const next = !document.documentElement.classList.contains("dark");
document.documentElement.classList.toggle("dark", next);
localStorage.setItem("lerko96-dark-mode", String(next));
update();
updateTheme();
});
update();
updateTheme();
const navLinks = document.querySelectorAll<HTMLAnchorElement>("[data-nav-link]");
const sections = Array.from(navLinks).map((link) => ({
link,
section: document.querySelector(link.hash) as HTMLElement,
}));
const atBottom = () =>
window.innerHeight + window.scrollY >= document.body.offsetHeight - 2;
const observer = new IntersectionObserver(
() => {
let active: HTMLAnchorElement | null = null;
if (atBottom()) {
active = sections[sections.length - 1].link;
} else {
for (const { link, section } of sections) {
if (section.getBoundingClientRect().top <= 80) active = link;
}
}
navLinks.forEach((l) => {
l.style.color = l === active ? "var(--color-text)" : "";
});
},
{ rootMargin: "-56px 0px 0px 0px", threshold: 0 },
);
sections.forEach(({ section }) => observer.observe(section));
let ticking = false;
window.addEventListener("scroll", () => {
if (ticking) return;
ticking = true;
requestAnimationFrame(() => {
let active: HTMLAnchorElement | null = null;
if (atBottom()) {
active = sections[sections.length - 1].link;
} else {
for (const { link, section } of sections) {
if (section.getBoundingClientRect().top <= 80) active = link;
}
}
navLinks.forEach((l) => {
l.style.color = l === active ? "var(--color-text)" : "";
});
ticking = false;
});
}, { passive: true });
</script>
src/components/ProjectCard.astro
+13 -45
View File
@@ -8,60 +8,28 @@ interface Props {
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>
)}
<article class="mb-2lh">
<div class="flex items-baseline gap-1ch mb-half-lh">
<h3>
<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)]"
class="font-semibold underline"
>
↗
{project.title}
</a>
</div>
</h3>
{project.statusBadge && (
<span class="text-[var(--color-text-dim)]">({project.statusBadge})</span>
)}
</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">
<p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
{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>
<p class="text-[var(--color-text-dim)]">
{project.tags.join(" · ")}
</p>
</article>
src/components/Skills.astro
+3 -3
View File
@@ -27,14 +27,14 @@ const skillGroups = [
const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);
---
<Widget title="tyler/skills" badge={totalCount} as="section">
<Widget title="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">
<span class="text-[var(--color-text-dim)] w-28 shrink-0">
{label}
</span>
<span class="font-mono text-sm text-[var(--color-text)]">
<span>
{skills.join(" · ")}
</span>
</div>
src/components/Timeline.astro
+18 -68
View File
@@ -2,13 +2,7 @@
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 isDate = (d: string) => /^\d{4}/.test(d);
const typeLabel: Record<TimelineType, string> = {
career: "career",
@@ -19,70 +13,26 @@ const typeLabel: Record<TimelineType, string> = {
};
---
<Widget title="tyler/journey">
<ol class="relative border-l border-[var(--color-border)] ml-[2px] flex flex-col gap-0">
<Widget title="Journey">
<ol class="flex flex-col">
{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>
<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>
}
</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>
<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>
src/components/Widget.astro
+8 -12
View File
@@ -8,22 +8,18 @@ interface Props {
}
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>
)}
<div class="mb-2lh">
<h2 class="text-lg font-semibold">
{title}
{badge !== undefined && (
<span class="text-[var(--color-text-dim)] font-normal"> ({badge})</span>
)}
</h2>
{meta && (
<span class="font-mono text-sm text-[var(--color-text-dim)]">— {meta}</span>
<p class="text-[var(--color-text-dim)]">{meta}</p>
)}
</div>
<slot />
src/data/projects.ts
+24 -16
View File
@@ -13,6 +13,25 @@ export type Project = {
export const projects: Project[] = [
// --- Featured ---
{
slug: "uptop",
title: "uptop",
description: "Live uptime monitoring dashboard for your terminal. SSH-accessible. HTTP, ping, TCP, DNS, push checks with alerts, clustering, and Prometheus metrics.",
tags: ["Go", "Bubbletea", "Monitoring", "Uptime"],
githubUrl: "https://github.com/lerkolabs/uptop",
tier: "featured",
year: 2026,
},
{
slug: "nib",
title: "nib",
description:
"Capture-first personal journal built with Go + SQLite. Currently developing in private when I have spare time.",
tags: ["Go", "JavaScript", "SQLite", "Stream-of-Thought"],
githubUrl: "https://gitea.lerkolabs.com/lerko/nib-v1",
tier: "featured",
year: 2026,
},
{
slug: "homelab",
title: "homelab",
@@ -27,33 +46,22 @@ export const projects: Project[] = [
slug: "portfolio",
title: "portfolio",
description:
"Astro static site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.",
tags: ["Astro", "Dockerfile", "Tailwind", "nginx", "Caddy"],
"Astro static site, self-hosted in a DMZ LXC behind Caddy, deployed via Gitea Actions CI.",
tags: ["Astro", "Typescript", "Dockerfile", "Caddy"],
githubUrl: "https://gitea.lerkolabs.com/lerko/portfolio",
tier: "featured",
year: 2021,
},
{
slug: "nib",
title: "nib",
description:
"Capture-first personal journal built with Go + React + SQLite. Currently developing in private when I have spare time.",
tags: ["Go", "React", "SQLite", "Journal", "Stream-of-Thought"],
githubUrl: "https://github.com/lerko96/nib",
tier: "featured",
year: 2026,
},
// --- Archive ---
{
slug: "open-pact",
title: "open-pact",
description:
"Open protocol for AI agent identity, delegation, and portable memory. Ed25519 keypair identity, signed delegation warrants, portable signed memory facts. No central registry.",
description: "Open protocol for AI agent identity, delegation, and portable memory. Ed25519 keypair identity, signed delegation",
tags: ["TypeScript", "Ed25519", "DID", "npm", "CC0"],
githubUrl: "https://github.com/lerko96/open-pact",
tier: "featured",
tier: "archive",
year: 2026,
},
// --- Archive ---
{
slug: "helm",
title: "helm",
src/data/services.ts
+21 -18
View File
@@ -2,6 +2,7 @@ export type Service = {
name: string;
description: string;
category: "infrastructure" | "security" | "monitoring" | "productivity" | "media";
hidden?: boolean;
};
export const services: Service[] = [
@@ -11,7 +12,7 @@ export const services: Service[] = [
{ 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: "gluetun", description: "VPN container routing download client traffic", category: "infrastructure", hidden: true },
{ name: "Home Assistant", description: "Smart home automation and device management", category: "infrastructure" },
// Security / Auth
@@ -23,34 +24,36 @@ export const services: Service[] = [
{ 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" },
{ name: "Uptime Kuma", description: "Self-hosted monitoring tool (GUI)", category: "monitoring" },
// Productivity
{ 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" },
{ name: "Hoarder", description: "Bookmark manager with tagging", category: "productivity", hidden: true },
{ name: "FreshRSS", description: "RSS reader", category: "productivity", hidden: true },
{ name: "Memos", description: "Quick notes and journal", category: "productivity", hidden: true },
{ name: "Ghostfolio", description: "Investment portfolio tracking", category: "productivity", hidden: true },
{ name: "Vikunja", description: "Task management", category: "productivity", hidden: true },
{ name: "Traggo", description: "Time tracking", category: "productivity", hidden: true },
{ name: "Filebrowser", description: "Web-based file manager", category: "productivity", hidden: true },
// Media
{ 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: "Immich", description: "Open-source photo library", category: "media"},
{ name: "Kavita", description: "Self-hosted manga and book reader", category: "media" },
{ name: "Openshelf", description: "Book library with auto-ingest", category: "media" },
{ name: "Jellyfin", description: "Open-source media streaming", category: "media" },
{ name: "Prowlarr", description: "Indexer manager and proxy for the *arr stack", category: "media" },
{ name: "*Arr stack", description: "Automated media management for streaming", category: "media" },
{ name: "Bazarr", description: "Automatic subtitle download and management", category: "media" },
{ name: "Lidarr", description: "Automated music management", category: "media", hidden: true },
{ name: "Radarr", description: "Automated movie management", category: "media", hidden: true },
{ name: "Plex", description: "Media streaming — movies, TV, music", category: "media", hidden: true },
{ name: "nzbget", description: "Usenet downloader", category: "media", hidden: true },
{ name: "qBittorrent", description: "Torrent client with web UI", category: "media", hidden: true },
{ name: "Openshelf", description: "Book library with auto-ingest", category: "media", hidden: true },
];
export const categoryOrder: Service["category"][] = [
src/data/timeline.ts
-39
View File
@@ -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",
src/layouts/Base.astro
+3 -5
View File
@@ -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;
---
@@ -27,12 +27,10 @@ const {
</script>
</head>
<body
class="bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen"
class="bg-[var(--color-bg)] text-[var(--color-text)] min-h-screen"
>
<slot name="nav" />
<div
class="max-w-[740px] mx-auto border-l border-r border-[var(--color-border)]"
>
<div class="max-w-[740px] mx-auto">
<main class="px-4ch py-3lh">
<slot />
</main>
src/pages/archive.astro
+3 -3
View File
@@ -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>
src/pages/homelab.astro
+12 -237
View File
@@ -1,237 +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">
<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>
<!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>
src/pages/index.astro
+71 -1
View File
@@ -4,11 +4,81 @@ 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: "Network", value: "7 VLANs, default deny, managed switching" },
{ label: "Services", value: `${services.length} self-hosted across ${categoryOrder.length} categories` },
];
---
<Base>
<Nav slot="nav" />
<Hero />
<Timeline />
<section id="projects">
<Widget title="Projects" as="div">
<div class="flex flex-col">
{featuredProjects.map((project) => (
<ProjectCard project={project} />
))}
</div>
</Widget>
</section>
<section id="journey">
<Timeline />
</section>
<section id="homelab">
<Widget title="Homelab" as="div">
<p class="text-[var(--color-text-label)] leading-relaxed max-w-2xl mb-2lh">
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>
<dl class="flex flex-col mb-2lh">
{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>
<div class="flex flex-wrap gap-x-[3ch] gap-y-qtr-lh mb-2lh">
{categoryOrder.map((cat) => {
const count = services.filter((s) => s.category === cat).length;
return (
<span>
<span class="text-[var(--color-text-dim)]">{categoryLabels[cat]}</span>
<span class="text-[var(--color-text-label)]"> ({count})</span>
</span>
);
})}
</div>
<p class="text-[var(--color-text-label)] mb-half-lh">
Full documentation — network maps, ADRs, runbooks, and service configs.
</p>
<a
href="https://gitea.lerkolabs.com/lerko/homelab"
target="_blank"
rel="noopener noreferrer"
class="underline"
>
gitea.lerkolabs.com/lerko/homelab →
</a>
</Widget>
</section>
<Footer slot="footer" />
</Base>
src/pages/projects.astro
+12 -77
View File
@@ -1,77 +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">
<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>
<!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>
src/styles/globals.css
+87 -53
View File
@@ -3,29 +3,22 @@
@variant dark (&:where(.dark, .dark *));
@theme {
/* macOS Classic Dark (default) */
--color-bg: #131313;
--color-surface: #1e1d1e;
--color-surface-raised: #272727;
--color-border: #3a3a3a;
--color-border-bright: #404040;
--color-text: #caccca;
--color-text-label: #9e9e9e;
--color-text-dim: #8f8f8f;
--color-accent-green: #62ba46;
--color-accent-red: #c74028;
/* Timeline type colors — dark */
--color-timeline-career: #62ba46;
--color-timeline-education: #c28b12;
--color-timeline-cert: #c75828;
--color-timeline-project: #c72855;
--color-timeline-homelab: #e1d797;
/* Slate (dark, default) */
--color-bg: #1A1B1E;
--color-surface: #22242A;
--color-surface-raised: #2A2D34;
--color-border: #33363E;
--color-border-bright: #3E4148;
--color-text: #D4D4D8;
--color-text-label: #9CA0AA;
--color-text-dim: #888D9B;
--color-link: #8CAFC8;
--color-link-visited: #9A94AB;
/* Typography */
--font-mono: "Source Code Pro", ui-monospace, monospace;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--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;
/* Breakpoints */
--breakpoint-xs: 576px;
@@ -42,29 +35,18 @@
--spacing-2lh: 2lh;
--spacing-3lh: 3lh;
--spacing-4lh: 4lh;
/* Animations */
--animate-fade-in: fadeIn 120ms linear forwards;
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
}
/* Base */
html {
scroll-behavior: smooth;
font-size: 15px;
font-size: 16px;
line-height: 1.5;
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-mono);
font-family: var(--font-sans);
}
@keyframes blink { 50% { opacity: 0; } }
.animate-cursor { animation: blink 1s step-start infinite; }
@layer base {
* {
box-sizing: border-box;
@@ -73,31 +55,83 @@ html {
}
}
/* macOS Classic Light overrides */
/* Bone (light) overrides */
:root:not(.dark) {
--color-bg: #ffffff;
--color-surface: #f9f9f9;
--color-surface-raised: #f7f7f7;
--color-border: #e0e0e0;
--color-border-bright: #d2d2d2;
--color-text: #000000;
--color-text-label: #505050;
--color-text-dim: #929292;
--color-accent-green: #036a07;
--color-accent-red: #d21f07;
--color-timeline-career: #036a07;
--color-timeline-education: #0433ff;
--color-timeline-cert: #957931;
--color-timeline-project: #6f42c1;
--color-timeline-homelab: #0000a2;
--color-bg: #FAF8F5;
--color-surface: #F3F0EB;
--color-surface-raised: #EBE8E3;
--color-border: #E0DCD5;
--color-border-bright: #D4D0C8;
--color-text: #2C2C2C;
--color-text-label: #6B6560;
--color-text-dim: #787068;
--color-link: #4A6B8A;
--color-link-visited: #6B6080;
}
/* Default transitions — linear, fast */
/* Link underlines */
a {
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--color-border-bright);
}
a:hover {
text-decoration-color: currentColor;
}
a[target="_blank"] {
color: var(--color-link);
}
a[target="_blank"]:visited {
color: var(--color-link-visited);
}
a[target="_blank"]:hover {
color: var(--color-link);
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,
background-color 120ms linear, opacity 120ms linear;
opacity 120ms linear, text-decoration-color 120ms linear,
outline-color 120ms linear;
}
/* Section anchors — clear sticky nav, visual rhythm */
section[id] {
scroll-margin-top: 3.5rem;
padding-top: 2lh;
border-top: 1px solid var(--color-border);
}
section[id]:first-of-type {
border-top: none;
padding-top: 0;
}
@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) {