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

feat(theme): implement console.dark + console.light design system

Browse Source 
Replace macOS Classic theme with console-inspired palette. Amber accent,
warm off-white text hierarchy, desaturated green status pips, VLAN-grouped
home services, git-log tabular journey, identity key-value grid with
contact links, active pane (studying/shipping/maintaining). Wider 960px
container, pane headers, responsive mobile fallbacks.
This commit is contained in:
Tyler Koenig
2026-05-18 22:09:59 -04:00
parent 0c5d9e03b1
commit 173af2df8d
13 changed files with 452 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Active.astro
+51
View File
@@ -0,0 +1,51 @@
---
const items = [
{
label: "studying",
title: "comptia network+",
meta: "ch. 7 · ipv6 addressing",
progress: 0.62,
progressText: "62%",
},
{
label: "shipping",
title: "portfolio site v2",
meta: "astro 5 · gitea actions ci · dmz lxc",
},
{
label: "maintaining",
title: "32 services across 4 vlans",
meta: "last alert 11d ago · backups green",
},
];
---
<section class="border-r border-[var(--color-border)]">
<div class="flex items-baseline justify-between px-5 py-3.5 border-b border-[var(--color-border)]">
<span class="text-[var(--color-text-fg)] text-[11px] tracking-[0.16em] uppercase">active</span>
<span class="text-[var(--color-text-label)] text-[11px]">updated 4m ago</span>
</div>
<div>
{items.map((it, i) => (
<div class:list={[
"px-5 py-4",
i < items.length - 1 && "border-b border-[var(--color-border)]",
]}>
<div class="flex items-baseline justify-between gap-2.5">
<span class="text-[var(--color-text-label)] text-[10px] tracking-[0.16em] uppercase">{it.label}</span>
{it.progress != null && (
<span class="text-[var(--color-text-fg)] text-[11px] tabular-nums">{it.progressText}</span>
)}
</div>
<div class="text-[var(--color-text-heading)] text-[15px] mt-1">{it.title}</div>
<div class="text-[var(--color-text)] text-xs mt-0.5">{it.meta}</div>
{it.progress != null && (
<div class="mt-2.5 h-[3px] bg-[var(--color-border-bright)]">
<div class="h-full bg-[var(--color-accent)]" style={`width: ${it.progress * 100}%`} />
</div>
)}
</div>
))}
</div>
</section>
src/components/Footer.astro
+33 -41
View File
@@ -2,46 +2,38 @@
const year = new Date().getFullYear(); const year = new Date().getFullYear();
--- ---
<footer class="border-t border-[var(--color-border)] py-1lh mt-2lh"> <footer class="flex flex-col sm:flex-row justify-between items-center gap-2 px-6 py-3.5 border-t border-[var(--color-border)] bg-[var(--color-surface-raised)] text-[var(--color-text-label)] text-xs">
<div class="px-4ch flex items-center justify-between"> <span>&copy; {year} tyler koenig &middot; self-hosted in a dmz lxc</span>
<span class="font-mono text-sm text-[var(--color-text-dim)]"> <div class="flex items-center gap-5">
&copy; {year} Tyler Koenig <a
</span> href="https://github.com/lerko96"
<div class="flex items-center gap-2ch"> target="_blank"
<a rel="noopener noreferrer"
href="https://github.com/lerko96" class="hover:text-[var(--color-text-fg)]"
target="_blank" >
rel="noopener noreferrer" github
aria-label="GitHub" </a>
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]" <a
> href="https://gitea.lerkolabs.com/lerko"
[github] target="_blank"
</a> rel="noopener noreferrer"
<a class="hover:text-[var(--color-text-fg)]"
href="https://gitea.lerkolabs.com/lerko" >
target="_blank" gitea
rel="noopener noreferrer" </a>
aria-label="Gitea" <a
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]" href="https://www.linkedin.com/in/tyler-koenig"
> target="_blank"
[gitea] rel="noopener noreferrer"
</a> class="hover:text-[var(--color-text-fg)]"
<a >
href="https://www.linkedin.com/in/tyler-koenig" linkedin
target="_blank" </a>
rel="noopener noreferrer" <a
aria-label="LinkedIn" href="mailto:tyler@lerkolabs.com"
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]" class="hover:text-[var(--color-text-fg)]"
> >
[linkedin] email
</a> </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> </div>
</footer> </footer>
src/components/Hero.astro
+55 -64
View File
@@ -1,71 +1,62 @@
<section class="mb-16"> ---
<div class="flex flex-col gap-1ch"> const identity = [
["role", "soc analyst i · fortress srm"],
["based", "cleveland, oh · est. 2021"],
["stack", "go · react · typescript · linux"],
["infra", "proxmox · pfsense · authentik · nginx"],
["observ", "victoriametrics · grafana · beszel · ntfy"],
["certs", "comptia a+ · network+ (in progress)"],
];
const contact = [
{ key: "github", value: "lerko96", href: "https://github.com/lerko96", glyph: "↗" },
{ key: "gitea", value: "gitea.lerkolabs.com/lerko", href: "https://gitea.lerkolabs.com/lerko", glyph: "↗" },
{ key: "linkedin", value: "tyler-koenig", href: "https://www.linkedin.com/in/tyler-koenig", glyph: "↗" },
{ key: "email", value: "tyler@lerkolabs.com", href: "mailto:tyler@lerkolabs.com", glyph: "✉" },
];
---
<section class="border-b border-[var(--color-border)]">
<div class="flex items-baseline justify-between px-5 py-3.5 border-b border-[var(--color-border)]">
<span class="text-[var(--color-text-fg)] text-[11px] tracking-[0.16em] uppercase">identity</span>
<span class="text-[var(--color-text-label)] text-[11px]">~/identity.toml</span>
</div>
<div class="px-6 py-6 grid grid-cols-1 md:grid-cols-[1.4fr_1fr] gap-9">
<div> <div>
<p class="font-mono text-sm font-bold text-[var(--color-text)]"> <h1 class="text-[var(--color-text-heading)] text-[38px] leading-[1.05] tracking-tight font-semibold">
<span
class="text-[var(--color-accent-green)] select-none mr-1ch"
aria-hidden="true"
>
❯
</span>
tyler koenig tyler koenig
</h1>
<p class="text-[var(--color-text)] text-sm mt-2 leading-relaxed max-w-[540px]">
security operations, self-hosted infrastructure, and the software that holds it together.
</p> </p>
<p class="font-mono text-sm text-[var(--color-text-label)] mt-0.5">
Security Operations · Self-Hosted Infrastructure <dl class="mt-6 grid grid-cols-[auto_1fr] gap-x-6 gap-y-1.5 text-[13px] tabular-nums">
</p> {identity.map(([k, v]) => (
<Fragment>
<dt class="text-[var(--color-text-label)] tracking-wide">{k}</dt>
<dd class="text-[var(--color-text-fg)]">{v}</dd>
</Fragment>
))}
</dl>
</div> </div>
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-70"> <aside>
Homelab runs 30+ <div class="text-[var(--color-text-label)] text-[11px] tracking-[0.12em] mb-2.5">CONTACT</div>
services across segmented VLANs — pfSense, Authentik SSO, full <div class="grid gap-px">
observability stack. Write software too: mobile apps, Go backends, {contact.map(({ key, value, href, glyph }) => (
open protocols. Daily drivers, all of it.{" "} <a
<span href={href}
class="animate-cursor text-[var(--color-accent-green)]" target={href.startsWith("mailto") ? undefined : "_blank"}
aria-hidden="true" rel={href.startsWith("mailto") ? undefined : "noopener noreferrer"}
> class="grid grid-cols-[90px_1fr_16px] gap-x-2.5 items-baseline py-[7px] border-b border-[var(--color-border)] text-[13px] no-underline hover:bg-[var(--color-surface)]"
█ >
</span> <span class="text-[var(--color-text-label)] tracking-wide">{key}</span>
</p> <span class="text-[var(--color-text-fg)] overflow-hidden text-ellipsis whitespace-nowrap">{value}</span>
<span class="text-[var(--color-accent)] text-right">{glyph}</span>
<div class="flex flex-wrap items-center gap-x-1ch gap-y-half-lh"> </a>
<span class="font-mono text-sm text-[var(--color-accent-green)]"> ))}
● available </div>
</span> </aside>
<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> </div>
</section> </section>
src/components/HomeServices.astro
+67
View File
@@ -0,0 +1,67 @@
---
const vlans = [
{
id: "vlan10",
label: "management",
services: [
{ name: "pfsense", kind: "firewall" },
{ name: "authentik", kind: "sso" },
{ name: "proxmox", kind: "hypervisor" },
{ name: "pbs", kind: "backup" },
],
},
{
id: "vlan20",
label: "public-facing",
services: [
{ name: "gitea", kind: "scm/ci" },
{ name: "caddy", kind: "proxy" },
{ name: "lerkolabs.com", kind: "web" },
],
},
{
id: "vlan30",
label: "internal services",
services: [
{ name: "victoriametrics", kind: "tsdb" },
{ name: "grafana", kind: "dashboards" },
{ name: "beszel", kind: "host-mon" },
{ name: "ntfy", kind: "alerts" },
{ name: "jellyfin", kind: "media" },
],
},
];
const totalSvc = vlans.reduce((n, v) => n + v.services.length, 0);
---
<section>
<div class="flex items-baseline justify-between px-5 py-3.5 border-b border-[var(--color-border)]">
<span class="text-[var(--color-text-fg)] text-[11px] tracking-[0.16em] uppercase">infrastructure</span>
<span class="text-[var(--color-text-label)] text-[11px]">{totalSvc} up · 0 failed</span>
</div>
<div>
{vlans.map((vlan, gi) => (
<div class:list={[gi < vlans.length - 1 && "border-b border-[var(--color-border)]"]}>
<div class="flex items-baseline gap-2.5 px-5 pt-2.5 pb-1 text-[var(--color-text-label)] text-[10px] tracking-[0.14em]">
<span class="text-[var(--color-text-fg)]">{vlan.id}</span>
<span>·</span>
<span class="uppercase">{vlan.label}</span>
<span class="ml-auto text-[var(--color-text-faint)]">{vlan.services.length} svc</span>
</div>
{vlan.services.map((s) => (
<div class="grid grid-cols-[12px_1fr_110px_60px] gap-x-2.5 px-5 py-1.5 text-[13px] items-baseline tabular-nums">
<span class="w-1.5 h-1.5 rounded-full bg-[var(--color-accent-green)] self-center" />
<span class="text-[var(--color-text-fg)]">{s.name}</span>
<span class="text-[var(--color-text-label)] text-[11px]">{s.kind}</span>
<span class="text-[var(--color-text-label)] text-[11px] text-right">up</span>
</div>
))}
<div class="h-2" />
</div>
))}
</div>
</section>
src/components/Nav.astro
+46 -34
View File
@@ -8,54 +8,66 @@ const links = [
]; ];
--- ---
<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-surface-raised)] border-b border-[var(--color-border)]">
<nav class="max-w-[740px] mx-auto px-4ch h-11 flex items-center justify-between"> <nav class="max-w-[960px] mx-auto px-6 h-11 flex items-center justify-between text-xs tabular-nums">
<a <div class="flex items-center gap-4">
href="/" <a href="/" class="text-[var(--color-text-fg)] tracking-wide hover:text-[var(--color-text-heading)]">
class="font-mono text-sm font-bold text-[var(--color-text)] hover:text-[var(--color-text-label)]" lerkolabs
> </a>
~/ <span class="text-[var(--color-text-faint)]">/</span>
</a> <span class="text-[var(--color-text-label)]">tyler</span>
<span class="text-[var(--color-text-faint)]">/</span>
<span class="text-[var(--color-text-label)]">~</span>
</div>
<div class="flex items-center gap-5">
<span class="hidden sm:inline-flex items-center gap-1.5">
<span class="inline-block w-1.5 h-1.5 rounded-full bg-[var(--color-accent-green)] status-pip" />
<span class="text-[var(--color-text-fg)]">available</span>
</span>
<ul class="flex items-center gap-2ch">
{links.map(({ href, label }) => { {links.map(({ href, label }) => {
const active = pathname === href || pathname === href.replace(/\/$/, ""); const active = pathname === href || pathname === href.replace(/\/$/, "");
return ( return (
<li> <a
<a href={href}
href={href} aria-current={active ? "page" : undefined}
aria-current={active ? "page" : undefined} class:list={[
class:list={[ active
"font-mono text-sm", ? "text-[var(--color-text-fg)]"
active : "text-[var(--color-text-label)] hover:text-[var(--color-text-fg)]",
? "text-[var(--color-text)]" ]}
: "text-[var(--color-text-label)] hover:text-[var(--color-text)]", >
]} {label}
> </a>
{label}
</a>
</li>
); );
})} })}
<li> <button
<button data-theme-toggle
data-theme-toggle aria-label="Switch to light mode"
aria-label="Switch to light mode" class="text-[var(--color-text-fg)] hover:text-[var(--color-accent)] cursor-pointer"
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer" >
> light
[light] </button>
</button> </div>
</li>
</ul>
</nav> </nav>
</header> </header>
<style>
.status-pip {
box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-green) 67%, transparent);
}
:root:not(.dark) .status-pip {
box-shadow: none;
}
</style>
<script> <script>
const btn = document.querySelector("[data-theme-toggle]") as HTMLButtonElement; const btn = document.querySelector("[data-theme-toggle]") as HTMLButtonElement;
function update() { function update() {
const isDark = document.documentElement.classList.contains("dark"); const isDark = document.documentElement.classList.contains("dark");
btn.textContent = isDark ? "[light]" : "[dark]"; btn.textContent = isDark ? "light" : "dark";
btn.setAttribute( btn.setAttribute(
"aria-label", "aria-label",
isDark ? "Switch to light mode" : "Switch to dark mode", isDark ? "Switch to light mode" : "Switch to dark mode",
src/components/ProjectCard.astro
+10 -21
View File
@@ -8,39 +8,28 @@ interface Props {
const { project } = Astro.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)]"> <article class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex flex-col gap-3 p-5">
<div class="flex items-start justify-between gap-1ch"> <div class="flex items-start justify-between gap-3">
<a <a
href={project.githubUrl} href={project.githubUrl}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="font-mono text-sm font-semibold text-[var(--color-text)] hover:text-[var(--color-accent-green)]" class="text-sm font-semibold text-[var(--color-text-fg)] hover:text-[var(--color-accent)]"
> >
{project.title} {project.title}
</a> </a>
<div class="flex items-center gap-1ch shrink-0"> <div class="flex items-center gap-3 shrink-0">
{project.stats && ( {project.stats && (
<span class="font-mono text-sm text-[var(--color-text-dim)]"> <span class="text-xs text-[var(--color-text-label)]">
{project.stats} {project.stats}
</span> </span>
)} )}
{project.externalUrl && (
<a
href={project.externalUrl}
target="_blank"
rel="noopener noreferrer"
aria-label={`View ${project.title} externally`}
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
>
↗
</a>
)}
<a <a
href={project.githubUrl} href={project.githubUrl}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
aria-label={`View ${project.title} on GitHub`} aria-label={`View ${project.title} on GitHub`}
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]" class="text-sm text-[var(--color-text-label)] hover:text-[var(--color-accent)]"
> >
↗ ↗
</a> </a>
@@ -48,18 +37,18 @@ const { project } = Astro.props;
</div> </div>
{project.statusBadge && ( {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"> <span class="text-xs text-[var(--color-accent)] border border-[var(--color-accent)] px-2 py-0.5 w-fit opacity-80">
{project.statusBadge} {project.statusBadge}
</span> </span>
)} )}
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-70"> <p class="text-sm text-[var(--color-text)] leading-relaxed flex-1">
{project.description} {project.description}
</p> </p>
<div class="flex flex-wrap gap-x-1ch gap-y-half-lh mt-half-lh"> <div class="flex flex-wrap gap-x-3 gap-y-1 mt-1">
{project.tags.map((tag) => ( {project.tags.map((tag) => (
<span class="font-mono text-sm text-[var(--color-text-dim)]"> <span class="text-xs text-[var(--color-text-label)]">
{tag} {tag}
</span> </span>
))} ))}
src/components/Timeline.astro
+86 -73
View File
@@ -1,8 +1,7 @@
--- ---
import Widget from "./Widget.astro"; import { timeline } from "@/data/timeline";
import { timeline, type TimelineType } from "@/data/timeline";
const typeColor: Record<TimelineType, string> = { const branchColor: Record<string, string> = {
career: "var(--color-timeline-career)", career: "var(--color-timeline-career)",
education: "var(--color-timeline-education)", education: "var(--color-timeline-education)",
cert: "var(--color-timeline-cert)", cert: "var(--color-timeline-cert)",
@@ -10,79 +9,93 @@ const typeColor: Record<TimelineType, string> = {
homelab: "var(--color-timeline-homelab)", homelab: "var(--color-timeline-homelab)",
}; };
const typeLabel: Record<TimelineType, string> = { const hashes = [
career: "career", "a14c2e1", "8f9b3d2", "7a02b41", "4c1f0aa", "3e9d8c0",
education: "education", "2b6a51f", "9d4c12a", "6e0b8a3", "1c7a4ff", "d5b3e92",
cert: "cert", "5a8f1ee", "e2b71ac", "f0a39db", "0000000",
project: "project", ];
homelab: "homelab",
};
--- ---
<Widget title="tyler/journey"> <section class="border-t border-[var(--color-border)]">
<ol class="relative border-l border-[var(--color-border)] ml-[2px] flex flex-col gap-0"> <div class="flex items-baseline justify-between px-5 py-3.5 border-b border-[var(--color-border)]">
{timeline.map((entry) => ( <span class="text-[var(--color-text-fg)] text-[11px] tracking-[0.16em] uppercase">journey</span>
<li data-tl-entry class="pl-[3ch] pb-2lh last:pb-0 relative"> <span class="text-[var(--color-text-label)] text-[11px]">{timeline.length} commits · 5 branches · git log --all</span>
<span </div>
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"> <!-- Desktop: tabular grid -->
<span class="font-mono text-sm text-[var(--color-text-dim)]">{entry.date}</span> <div class="hidden md:grid grid-cols-[92px_86px_92px_1fr] text-[13px] tabular-nums">
<span {["date", "commit", "scope", "message"].map((h) => (
class="font-mono text-sm px-1 border" <div class:list={[
style={`color: ${typeColor[entry.type]}; border-color: ${typeColor[entry.type]}; opacity: 0.7;`} "text-[var(--color-text-label)] text-[10px] tracking-[0.16em] uppercase py-3 px-3 border-b border-[var(--color-border)]",
> h === "date" && "pl-6",
{typeLabel[entry.type]} ]}>
</span> {h}
</div> </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> {timeline.map((entry, i) => {
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) { const color = branchColor[entry.type] || "var(--color-text-fg)";
const entries = document.querySelectorAll<HTMLElement>("[data-tl-entry]"); const hash = hashes[i] || "0000000";
const last = i === timeline.length - 1;
const borderClass = last ? "" : "border-b border-[var(--color-border)]";
return (
<Fragment>
<div class:list={["py-3.5 px-3 pl-6", borderClass]}>
<span class="text-[var(--color-text-fg)]">{entry.date}</span>
</div>
<div class:list={["py-3.5 px-3", borderClass]}>
<span class="text-[var(--color-accent)]">{hash}</span>
</div>
<div class:list={["py-3.5 px-3", borderClass]}>
<span class="text-[11px] border-b border-dotted pb-px" style={`color: ${color}; border-color: ${color}`}>
{entry.type}
</span>
</div>
<div class:list={["py-3.5 px-3 pr-6", borderClass]}>
<span class="text-[var(--color-text-heading)]">{entry.title}</span>
<div class="text-[var(--color-text)] text-xs mt-0.5 leading-relaxed">{entry.description}</div>
{entry.tags && entry.tags.length > 0 && (
<div class="mt-1.5 flex gap-3.5 flex-wrap text-[var(--color-text-label)] text-[10px]">
{entry.tags.map((t) => (
<span>· {t}</span>
))}
</div>
)}
</div>
</Fragment>
);
})}
</div>
const observer = new IntersectionObserver( <!-- Mobile: stacked cards -->
(observed) => { <div class="md:hidden">
observed.forEach((entry) => { {timeline.map((entry, i) => {
if (entry.isIntersecting) { const color = branchColor[entry.type] || "var(--color-text-fg)";
(entry.target as HTMLElement).style.opacity = "1"; const hash = hashes[i] || "0000000";
(entry.target as HTMLElement).style.transform = "translateY(0)"; const last = i === timeline.length - 1;
observer.unobserve(entry.target); return (
} <div class:list={[
}); "px-5 py-4",
}, !last && "border-b border-[var(--color-border)]",
{ threshold: 0.15 }, ]}>
); <div class="flex items-center gap-3 mb-1.5 text-xs">
<span class="text-[var(--color-text-fg)]">{entry.date}</span>
entries.forEach((el) => { <span class="text-[var(--color-accent)]">{hash}</span>
el.style.opacity = "0"; <span class="border-b border-dotted pb-px text-[11px]" style={`color: ${color}; border-color: ${color}`}>
el.style.transform = "translateY(8px)"; {entry.type}
el.style.transition = "opacity 240ms linear, transform 240ms linear"; </span>
observer.observe(el); </div>
}); <div class="text-[var(--color-text-heading)] text-sm">{entry.title}</div>
} <div class="text-[var(--color-text)] text-xs mt-0.5 leading-relaxed">{entry.description}</div>
</script> {entry.tags && entry.tags.length > 0 && (
<div class="mt-1.5 flex gap-3 flex-wrap text-[var(--color-text-label)] text-[10px]">
{entry.tags.map((t) => (
<span>· {t}</span>
))}
</div>
)}
</div>
);
})}
</div>
</section>
src/components/Widget.astro
+7 -15
View File
@@ -8,23 +8,15 @@ interface Props {
} }
const { title, badge, meta, as: Tag = "section", class: className } = Astro.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]}> <Tag class:list={["mb-0", className]}>
<div class="flex items-center gap-1ch mb-2lh"> <div class="flex items-baseline justify-between px-5 py-3.5 border-b border-[var(--color-border)]">
{prefix && ( <span class="text-[var(--color-text-fg)] text-[11px] tracking-[0.16em] uppercase">{title}</span>
<span class="font-mono text-sm text-[var(--color-text-dim)] select-none">{prefix}</span> <span class="text-[var(--color-text-label)] text-[11px]">
)} {badge !== undefined && <span>[{badge}]</span>}
<span class="font-mono text-sm font-semibold text-[var(--color-text)]">{name}</span> {meta && <span>{meta}</span>}
{badge !== undefined && ( </span>
<span class="font-mono text-sm text-[var(--color-text-dim)]">[{badge}]</span>
)}
{meta && (
<span class="font-mono text-sm text-[var(--color-text-dim)]">— {meta}</span>
)}
</div> </div>
<slot /> <slot />
</Tag> </Tag>
src/layouts/Base.astro
+2 -4
View File
@@ -30,10 +30,8 @@ const {
class="bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen" class="bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen"
> >
<slot name="nav" /> <slot name="nav" />
<div <div class="max-w-[960px] mx-auto">
class="max-w-[740px] mx-auto border-l border-r border-[var(--color-border)]" <main>
>
<main class="px-4ch py-3lh">
<slot /> <slot />
</main> </main>
<slot name="footer" /> <slot name="footer" />
src/pages/homelab.astro
+35 -46
View File
@@ -85,17 +85,9 @@ const adrs = [
> >
<Nav slot="nav" /> <Nav slot="nav" />
<div class="mb-4lh"> <div class="px-6 py-6 border-b border-[var(--color-border)]">
<p class="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh"> <h1 class="text-[var(--color-text-heading)] text-lg font-semibold mb-2">homelab</h1>
<span <p class="text-[var(--color-text)] text-sm leading-relaxed max-w-2xl">
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 Personal infrastructure environment for learning, self-hosting, and
operational practice. Running 24/7 on production-grade hardware with operational practice. Running 24/7 on production-grade hardware with
real network segmentation, SSO, monitoring, and IaC-style real network segmentation, SSO, monitoring, and IaC-style
@@ -106,11 +98,11 @@ const adrs = [
<Widget title="homelab/overview" badge={glanceStats.length} as="section"> <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)]"> <div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
{glanceStats.map(({ label, value }) => ( {glanceStats.map(({ label, value }) => (
<div class="bg-[var(--color-surface)] px-2ch py-half-lh"> <div class="bg-[var(--color-surface)] px-5 py-3">
<p class="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh"> <p class="text-sm text-[var(--color-text-label)] mb-1">
{label} {label}
</p> </p>
<p class="font-mono text-sm text-[var(--color-text)]"> <p class="text-sm text-[var(--color-text-fg)]">
{value} {value}
</p> </p>
</div> </div>
@@ -123,17 +115,17 @@ const adrs = [
meta="8 network segments · default deny" meta="8 network segments · default deny"
as="section" as="section"
> >
<div class="overflow-x-auto"> <div class="overflow-x-auto px-5">
<table class="w-full text-sm border-collapse"> <table class="w-full text-sm border-collapse">
<thead> <thead>
<tr class="border-b border-[var(--color-border)]"> <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"> <th class="text-[var(--color-text-label)] text-left py-2 pr-8 text-[10px] tracking-[0.16em] uppercase">
Segment Segment
</th> </th>
<th class="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase"> <th class="text-[var(--color-text-label)] text-left py-2 pr-8 text-[10px] tracking-[0.16em] uppercase">
Name Name
</th> </th>
<th class="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh uppercase"> <th class="text-[var(--color-text-label)] text-left py-2 text-[10px] tracking-[0.16em] uppercase">
Purpose Purpose
</th> </th>
</tr> </tr>
@@ -141,13 +133,13 @@ const adrs = [
<tbody> <tbody>
{vlans.map((v) => ( {vlans.map((v) => (
<tr class="border-b border-[var(--color-border)] hover:bg-[var(--color-surface)]"> <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]"> <td class="text-[var(--color-accent)] py-2.5 pr-8 text-sm">
{v.id} {v.id}
</td> </td>
<td class="font-mono text-[var(--color-text)] py-half-lh pr-[3ch]"> <td class="text-[var(--color-text-fg)] py-2.5 pr-8 text-sm">
{v.name} {v.name}
</td> </td>
<td class="font-mono text-sm text-[var(--color-text)] py-2.5 opacity-80"> <td class="text-[var(--color-text)] py-2.5 text-sm">
{v.purpose} {v.purpose}
</td> </td>
</tr> </tr>
@@ -158,25 +150,23 @@ const adrs = [
</Widget> </Widget>
<Widget title="homelab/services" badge={services.length} as="section"> <Widget title="homelab/services" badge={services.length} as="section">
<div class="flex flex-col gap-3ch"> <div class="flex flex-col gap-6 px-5 py-4">
{categoryOrder.map((cat) => { {categoryOrder.map((cat) => {
const catServices = services.filter((s) => s.category === cat); const catServices = services.filter((s) => s.category === cat);
return ( return (
<div> <div>
<p class="font-mono text-sm text-[var(--color-text-dim)] mb-1lh"> <p class="text-[var(--color-text-label)] text-[10px] tracking-[0.14em] uppercase mb-2 px-1">
{categoryLabels[cat]} {categoryLabels[cat]}
</p> </p>
<div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]"> <div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
{catServices.map((svc) => ( {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 class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-5 py-3">
<div> <p class="text-sm text-[var(--color-text-fg)] mb-0.5">
<p class="font-mono text-sm text-[var(--color-text)] mb-0.5"> {svc.name}
{svc.name} </p>
</p> <p class="text-xs text-[var(--color-text)] leading-relaxed">
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75"> {svc.description}
{svc.description} </p>
</p>
</div>
</div> </div>
))} ))}
</div> </div>
@@ -192,20 +182,20 @@ const adrs = [
badge={adrs.length} badge={adrs.length}
as="section" as="section"
> >
<div class="flex flex-col gap-px bg-[var(--color-border)]"> <div class="flex flex-col gap-px bg-[var(--color-border)] mx-5 my-4">
{adrs.map((adr) => ( {adrs.map((adr) => (
<div class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-2ch py-1lh"> <div class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-5 py-4">
<p class="font-mono text-sm text-[var(--color-text)] mb-1lh"> <p class="text-sm text-[var(--color-text-fg)] mb-3">
{adr.title} {adr.title}
</p> </p>
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed mb-half-lh opacity-75"> <p class="text-sm text-[var(--color-text)] leading-relaxed mb-2">
<span class="text-[var(--color-text-label)] opacity-100"> <span class="text-[var(--color-text-label)]">
decision:{" "} decision:{" "}
</span> </span>
{adr.decision} {adr.decision}
</p> </p>
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75"> <p class="text-sm text-[var(--color-text)] leading-relaxed">
<span class="text-[var(--color-text-label)] opacity-100"> <span class="text-[var(--color-text-label)]">
why:{" "} why:{" "}
</span> </span>
{adr.why} {adr.why}
@@ -215,21 +205,20 @@ const adrs = [
</div> </div>
</Widget> </Widget>
<section class="pt-qtr-lh"> <section class="px-5 py-6">
<p class="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh"> <p class="text-[var(--color-text-label)] text-[10px] tracking-[0.14em] uppercase mb-2">
homelab/docs homelab/docs
</p> </p>
<p class="font-mono text-sm text-[var(--color-text)] mb-1lh opacity-75"> <p class="text-sm text-[var(--color-text)] mb-3">
VLAN maps, runbooks, service registry, config exports, and setup VLAN maps, runbooks, service registry, config exports, and setup guides.
guides.
</p> </p>
<a <a
href="https://gitea.lerkolabs.com/lerko/homelab" href="https://gitea.lerkolabs.com/lerko/homelab"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]" class="text-sm text-[var(--color-text-label)] hover:text-[var(--color-accent)]"
> >
↗ gitea.lerkolabs.com/lerko/homelab <span class="text-[var(--color-accent)]">↗</span> gitea.lerkolabs.com/lerko/homelab
</a> </a>
</section> </section>
src/pages/index.astro
+6
View File
@@ -3,12 +3,18 @@ import Base from "@/layouts/Base.astro";
import Nav from "@/components/Nav.astro"; import Nav from "@/components/Nav.astro";
import Footer from "@/components/Footer.astro"; import Footer from "@/components/Footer.astro";
import Hero from "@/components/Hero.astro"; import Hero from "@/components/Hero.astro";
import Active from "@/components/Active.astro";
import HomeServices from "@/components/HomeServices.astro";
import Timeline from "@/components/Timeline.astro"; import Timeline from "@/components/Timeline.astro";
--- ---
<Base> <Base>
<Nav slot="nav" /> <Nav slot="nav" />
<Hero /> <Hero />
<div class="grid grid-cols-1 md:grid-cols-[1fr_1.2fr] border-b border-[var(--color-border)]">
<Active />
<HomeServices />
</div>
<Timeline /> <Timeline />
<Footer slot="footer" /> <Footer slot="footer" />
</Base> </Base>
src/pages/projects.astro
+14 -17
View File
@@ -13,18 +13,15 @@ import { featuredProjects, archiveProjects } from "@/data/projects";
> >
<Nav slot="nav" /> <Nav slot="nav" />
<div class="mb-4lh"> <div class="px-6 py-6 border-b border-[var(--color-border)]">
<p class="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh"> <h1 class="text-[var(--color-text-heading)] text-lg font-semibold mb-2">projects</h1>
<span class="text-[var(--color-accent-green)] select-none mr-1ch" aria-hidden="true">❯</span> <p class="text-[var(--color-text)] text-sm leading-relaxed max-w-xl">
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. Featured work first. Earlier experiments, browser extensions, and bootcamp projects below — kept for context.
</p> </p>
</div> </div>
<Widget title="projects/featured" badge={featuredProjects.length} as="section"> <Widget title="projects/featured" badge={featuredProjects.length} as="section">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-1ch"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-px bg-[var(--color-border)] m-5">
{featuredProjects.map((project) => ( {featuredProjects.map((project) => (
<ProjectCard project={project} /> <ProjectCard project={project} />
))} ))}
@@ -32,38 +29,38 @@ import { featuredProjects, archiveProjects } from "@/data/projects";
</Widget> </Widget>
<Widget title="projects/archive" badge={archiveProjects.length} as="section"> <Widget title="projects/archive" badge={archiveProjects.length} as="section">
<div class="flex flex-col gap-px bg-[var(--color-border)]"> <div class="flex flex-col gap-px bg-[var(--color-border)] m-5">
{archiveProjects.map((project) => ( {archiveProjects.map((project) => (
<a <a
href={project.githubUrl} href={project.githubUrl}
target="_blank" target="_blank"
rel="noopener noreferrer" 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" class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start justify-between gap-5 px-5 py-4 group"
> >
<div class="flex flex-col gap-1ch flex-1 min-w-0"> <div class="flex flex-col gap-2 flex-1 min-w-0">
<div class="flex items-center gap-1ch"> <div class="flex items-center gap-3">
{project.year && ( {project.year && (
<span class="font-mono text-sm text-[var(--color-text-dim)] shrink-0"> <span class="text-sm text-[var(--color-text-label)] shrink-0">
{project.year} {project.year}
</span> </span>
)} )}
<span class="font-mono text-sm text-[var(--color-text)] group-hover:text-[var(--color-accent-green)] truncate"> <span class="text-sm text-[var(--color-text-fg)] group-hover:text-[var(--color-accent)] truncate">
{project.title} {project.title}
</span> </span>
</div> </div>
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75"> <p class="text-sm text-[var(--color-text)] leading-relaxed">
{project.description} {project.description}
</p> </p>
<div class="flex flex-wrap gap-x-1ch gap-y-0.5"> <div class="flex flex-wrap gap-x-3 gap-y-0.5">
{project.tags.map((tag) => ( {project.tags.map((tag) => (
<span class="font-mono text-sm text-[var(--color-text-dim)]"> <span class="text-xs text-[var(--color-text-label)]">
{tag} {tag}
</span> </span>
))} ))}
</div> </div>
</div> </div>
<span <span
class="font-mono text-sm text-[var(--color-text-label)] group-hover:text-[var(--color-text)] shrink-0 mt-0.5" class="text-sm text-[var(--color-text-label)] group-hover:text-[var(--color-accent)] shrink-0 mt-0.5"
aria-hidden="true" aria-hidden="true"
> >
↗ ↗
src/styles/globals.css
+40 -33
View File
@@ -3,24 +3,28 @@
@variant dark (&:where(.dark, .dark *)); @variant dark (&:where(.dark, .dark *));
@theme { @theme {
/* macOS Classic Dark (default) */ /* Console Dark (default) */
--color-bg: #131313; --color-bg: #0a0c0f;
--color-surface: #1e1d1e; --color-surface: #0e1116;
--color-surface-raised: #272727; --color-surface-raised: #11151b;
--color-border: #3a3a3a; --color-border: #1c2128;
--color-border-bright: #404040; --color-border-bright: #2a3038;
--color-text: #caccca; --color-text: #c1bdb3;
--color-text-label: #9e9e9e; --color-text-fg: #e8e4d8;
--color-text-dim: #8f8f8f; --color-text-heading: #ffffff;
--color-accent-green: #62ba46; --color-text-label: #6a675f;
--color-text-dim: #6a675f;
--color-text-faint: #3a3830;
--color-accent: #d4a259;
--color-accent-green: #7b9e7b;
--color-accent-red: #c74028; --color-accent-red: #c74028;
/* Timeline type colors — dark */ /* Timeline branch colors — dark */
--color-timeline-career: #62ba46; --color-timeline-career: #b390a8;
--color-timeline-education: #c28b12; --color-timeline-education: #999999;
--color-timeline-cert: #c75828; --color-timeline-cert: #cba76c;
--color-timeline-project: #c72855; --color-timeline-project: #8ba8c0;
--color-timeline-homelab: #e1d797; --color-timeline-homelab: #9ab494;
/* Typography */ /* Typography */
--font-mono: "Source Code Pro", ui-monospace, monospace; --font-mono: "Source Code Pro", ui-monospace, monospace;
@@ -60,10 +64,9 @@ html {
background-color: var(--color-bg); background-color: var(--color-bg);
color: var(--color-text); color: var(--color-text);
font-family: var(--font-mono); font-family: var(--font-mono);
font-variant-ligatures: none;
} }
@keyframes blink { 50% { opacity: 0; } }
.animate-cursor { animation: blink 1s step-start infinite; }
@layer base { @layer base {
* { * {
@@ -73,24 +76,28 @@ html {
} }
} }
/* macOS Classic Light overrides */ /* Console Light overrides */
:root:not(.dark) { :root:not(.dark) {
--color-bg: #ffffff; --color-bg: #f3f0e8;
--color-surface: #f9f9f9; --color-surface: #faf6ec;
--color-surface-raised: #f7f7f7; --color-surface-raised: #f6f2e7;
--color-border: #e0e0e0; --color-border: #d8d2c2;
--color-border-bright: #d2d2d2; --color-border-bright: #b8b2a2;
--color-text: #000000; --color-text: #3a3c40;
--color-text-label: #505050; --color-text-fg: #1c1e22;
--color-text-dim: #929292; --color-text-heading: #000000;
--color-accent-green: #036a07; --color-text-label: #8a857a;
--color-text-dim: #8a857a;
--color-text-faint: #c0bba8;
--color-accent: #b1631c;
--color-accent-green: #3d7048;
--color-accent-red: #d21f07; --color-accent-red: #d21f07;
--color-timeline-career: #036a07; --color-timeline-career: #6e3d7a;
--color-timeline-education: #0433ff; --color-timeline-education: #595959;
--color-timeline-cert: #957931; --color-timeline-cert: #9c6620;
--color-timeline-project: #6f42c1; --color-timeline-project: #355d8a;
--color-timeline-homelab: #0000a2; --color-timeline-homelab: #3d7048;
} }
/* Default transitions — linear, fast */ /* Default transitions — linear, fast */