Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 lerko
|
173af2df8d |
@@ -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>
|
||||
+33
-35
@@ -2,40 +2,38 @@
|
||||
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 text-[var(--color-text-dim)]">
|
||||
<span>© {year} Tyler Koenig</span>
|
||||
<nav class="flex items-center gap-2ch">
|
||||
<a
|
||||
href="https://github.com/lerko96"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="underline hover:text-[var(--color-text)]"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
<a
|
||||
href="https://gitea.lerkolabs.com/lerko"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="underline hover:text-[var(--color-text)]"
|
||||
>
|
||||
Gitea
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/tyler-koenig"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="underline hover:text-[var(--color-text)]"
|
||||
>
|
||||
LinkedIn
|
||||
</a>
|
||||
<a
|
||||
href="mailto:tyler@lerkolabs.com"
|
||||
class="underline hover:text-[var(--color-text)]"
|
||||
>
|
||||
Email
|
||||
</a>
|
||||
</nav>
|
||||
<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">
|
||||
<span>© {year} tyler koenig · self-hosted in a dmz lxc</span>
|
||||
<div class="flex items-center gap-5">
|
||||
<a
|
||||
href="https://github.com/lerko96"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="hover:text-[var(--color-text-fg)]"
|
||||
>
|
||||
github
|
||||
</a>
|
||||
<a
|
||||
href="https://gitea.lerkolabs.com/lerko"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="hover:text-[var(--color-text-fg)]"
|
||||
>
|
||||
gitea
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/tyler-koenig"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="hover:text-[var(--color-text-fg)]"
|
||||
>
|
||||
linkedin
|
||||
</a>
|
||||
<a
|
||||
href="mailto:tyler@lerkolabs.com"
|
||||
class="hover:text-[var(--color-text-fg)]"
|
||||
>
|
||||
email
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
+59
-42
@@ -1,45 +1,62 @@
|
||||
<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>
|
||||
---
|
||||
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)"],
|
||||
];
|
||||
|
||||
<p class="text-[var(--color-text-label)] leading-relaxed mb-1lh">
|
||||
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.
|
||||
</p>
|
||||
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: "✉" },
|
||||
];
|
||||
---
|
||||
|
||||
<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 hover:text-[var(--color-text)]"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
<a
|
||||
href="https://gitea.lerkolabs.com/lerko"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="underline hover:text-[var(--color-text)]"
|
||||
>
|
||||
Gitea
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/tyler-koenig"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="underline hover:text-[var(--color-text)]"
|
||||
>
|
||||
LinkedIn
|
||||
</a>
|
||||
<a
|
||||
href="mailto:tyler@lerkolabs.com"
|
||||
class="underline hover:text-[var(--color-text)]"
|
||||
>
|
||||
Email
|
||||
</a>
|
||||
</nav>
|
||||
<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>
|
||||
<h1 class="text-[var(--color-text-heading)] text-[38px] leading-[1.05] tracking-tight font-semibold">
|
||||
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>
|
||||
|
||||
<dl class="mt-6 grid grid-cols-[auto_1fr] gap-x-6 gap-y-1.5 text-[13px] tabular-nums">
|
||||
{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>
|
||||
|
||||
<aside>
|
||||
<div class="text-[var(--color-text-label)] text-[11px] tracking-[0.12em] mb-2.5">CONTACT</div>
|
||||
<div class="grid gap-px">
|
||||
{contact.map(({ key, value, href, glyph }) => (
|
||||
<a
|
||||
href={href}
|
||||
target={href.startsWith("mailto") ? undefined : "_blank"}
|
||||
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 class="text-[var(--color-text-label)] tracking-wide">{key}</span>
|
||||
<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>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -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>
|
||||
+47
-63
@@ -8,42 +8,44 @@ const links = [
|
||||
];
|
||||
---
|
||||
|
||||
<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">
|
||||
<header class="sticky top-0 z-50 bg-[var(--color-surface-raised)] border-b border-[var(--color-border)]">
|
||||
<nav class="max-w-[960px] mx-auto px-6 h-11 flex items-center justify-between text-xs tabular-nums">
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="/" class="text-[var(--color-text-fg)] tracking-wide hover:text-[var(--color-text-heading)]">
|
||||
lerkolabs
|
||||
</a>
|
||||
<span class="text-[var(--color-text-faint)]">/</span>
|
||||
<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>
|
||||
|
||||
{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>
|
||||
<a
|
||||
href={href}
|
||||
aria-current={active ? "page" : undefined}
|
||||
class:list={[
|
||||
active
|
||||
? "text-[var(--color-text-fg)]"
|
||||
: "text-[var(--color-text-label)] hover:text-[var(--color-text-fg)]",
|
||||
]}
|
||||
>
|
||||
{label}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
|
||||
<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"
|
||||
class="text-[var(--color-text-fg)] hover:text-[var(--color-accent)] cursor-pointer"
|
||||
>
|
||||
light
|
||||
</button>
|
||||
@@ -51,51 +53,33 @@ const links = [
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const themeBtn = document.querySelector("[data-theme-toggle]") as HTMLButtonElement;
|
||||
<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>
|
||||
|
||||
function updateTheme() {
|
||||
<script>
|
||||
const btn = document.querySelector("[data-theme-toggle]") as HTMLButtonElement;
|
||||
|
||||
function update() {
|
||||
const isDark = document.documentElement.classList.contains("dark");
|
||||
themeBtn.textContent = isDark ? "light" : "dark";
|
||||
themeBtn.setAttribute(
|
||||
btn.textContent = isDark ? "light" : "dark";
|
||||
btn.setAttribute(
|
||||
"aria-label",
|
||||
isDark ? "Switch to light mode" : "Switch to dark mode",
|
||||
);
|
||||
}
|
||||
|
||||
themeBtn.addEventListener("click", () => {
|
||||
btn.addEventListener("click", () => {
|
||||
const next = !document.documentElement.classList.contains("dark");
|
||||
document.documentElement.classList.toggle("dark", next);
|
||||
localStorage.setItem("lerko96-dark-mode", String(next));
|
||||
updateTheme();
|
||||
update();
|
||||
});
|
||||
|
||||
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();
|
||||
update();
|
||||
</script>
|
||||
|
||||
@@ -8,28 +8,49 @@ interface Props {
|
||||
const { project } = Astro.props;
|
||||
---
|
||||
|
||||
<article class="mb-2lh">
|
||||
<div class="flex items-baseline gap-1ch mb-half-lh">
|
||||
<h3>
|
||||
<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-3">
|
||||
<a
|
||||
href={project.githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-sm font-semibold text-[var(--color-text-fg)] hover:text-[var(--color-accent)]"
|
||||
>
|
||||
{project.title}
|
||||
</a>
|
||||
<div class="flex items-center gap-3 shrink-0">
|
||||
{project.stats && (
|
||||
<span class="text-xs text-[var(--color-text-label)]">
|
||||
{project.stats}
|
||||
</span>
|
||||
)}
|
||||
<a
|
||||
href={project.githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="font-semibold underline hover:text-[var(--color-text-label)]"
|
||||
aria-label={`View ${project.title} on GitHub`}
|
||||
class="text-sm text-[var(--color-text-label)] hover:text-[var(--color-accent)]"
|
||||
>
|
||||
{project.title}
|
||||
↗
|
||||
</a>
|
||||
</h3>
|
||||
{project.statusBadge && (
|
||||
<span class="text-[var(--color-text-dim)]">({project.statusBadge})</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
|
||||
{project.statusBadge && (
|
||||
<span class="text-xs text-[var(--color-accent)] border border-[var(--color-accent)] px-2 py-0.5 w-fit opacity-80">
|
||||
{project.statusBadge}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<p class="text-sm text-[var(--color-text)] leading-relaxed flex-1">
|
||||
{project.description}
|
||||
</p>
|
||||
|
||||
<p class="text-[var(--color-text-dim)]">
|
||||
{project.tags.join(" · ")}
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-x-3 gap-y-1 mt-1">
|
||||
{project.tags.map((tag) => (
|
||||
<span class="text-xs text-[var(--color-text-label)]">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@@ -27,14 +27,14 @@ const skillGroups = [
|
||||
const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);
|
||||
---
|
||||
|
||||
<Widget title="Skills" badge={totalCount} as="section">
|
||||
<Widget title="tyler/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="text-[var(--color-text-dim)] w-28 shrink-0">
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)] w-28 shrink-0">
|
||||
{label}
|
||||
</span>
|
||||
<span>
|
||||
<span class="font-mono text-sm text-[var(--color-text)]">
|
||||
{skills.join(" · ")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -1,43 +1,101 @@
|
||||
---
|
||||
import Widget from "./Widget.astro";
|
||||
import { timeline, type TimelineType } from "@/data/timeline";
|
||||
import { timeline } from "@/data/timeline";
|
||||
|
||||
const isDate = (d: string) => /^\d{4}/.test(d);
|
||||
|
||||
const typeLabel: Record<TimelineType, string> = {
|
||||
career: "career",
|
||||
education: "education",
|
||||
cert: "cert",
|
||||
project: "project",
|
||||
homelab: "homelab",
|
||||
const branchColor: Record<string, 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 hashes = [
|
||||
"a14c2e1", "8f9b3d2", "7a02b41", "4c1f0aa", "3e9d8c0",
|
||||
"2b6a51f", "9d4c12a", "6e0b8a3", "1c7a4ff", "d5b3e92",
|
||||
"5a8f1ee", "e2b71ac", "f0a39db", "0000000",
|
||||
];
|
||||
---
|
||||
|
||||
<Widget title="Journey">
|
||||
<ol class="flex flex-col gap-0">
|
||||
{timeline.map((entry) => (
|
||||
<li class="pb-2lh last:pb-0">
|
||||
<p class="text-[var(--color-text-dim)] mb-qtr-lh">
|
||||
{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>
|
||||
<section class="border-t 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">journey</span>
|
||||
<span class="text-[var(--color-text-label)] text-[11px]">{timeline.length} commits · 5 branches · git log --all</span>
|
||||
</div>
|
||||
|
||||
<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(" · ")}
|
||||
</p>
|
||||
)}
|
||||
</li>
|
||||
<!-- Desktop: tabular grid -->
|
||||
<div class="hidden md:grid grid-cols-[92px_86px_92px_1fr] text-[13px] tabular-nums">
|
||||
{["date", "commit", "scope", "message"].map((h) => (
|
||||
<div class:list={[
|
||||
"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",
|
||||
]}>
|
||||
{h}
|
||||
</div>
|
||||
))}
|
||||
</ol>
|
||||
</Widget>
|
||||
|
||||
{timeline.map((entry, i) => {
|
||||
const color = branchColor[entry.type] || "var(--color-text-fg)";
|
||||
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>
|
||||
|
||||
<!-- Mobile: stacked cards -->
|
||||
<div class="md:hidden">
|
||||
{timeline.map((entry, i) => {
|
||||
const color = branchColor[entry.type] || "var(--color-text-fg)";
|
||||
const hash = hashes[i] || "0000000";
|
||||
const last = i === timeline.length - 1;
|
||||
return (
|
||||
<div class:list={[
|
||||
"px-5 py-4",
|
||||
!last && "border-b border-[var(--color-border)]",
|
||||
]}>
|
||||
<div class="flex items-center gap-3 mb-1.5 text-xs">
|
||||
<span class="text-[var(--color-text-fg)]">{entry.date}</span>
|
||||
<span class="text-[var(--color-accent)]">{hash}</span>
|
||||
<span class="border-b border-dotted pb-px text-[11px]" style={`color: ${color}; border-color: ${color}`}>
|
||||
{entry.type}
|
||||
</span>
|
||||
</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>
|
||||
{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>
|
||||
|
||||
@@ -10,17 +10,13 @@ interface Props {
|
||||
const { title, badge, meta, as: Tag = "section", class: className } = Astro.props;
|
||||
---
|
||||
|
||||
<Tag class:list={["mb-4lh", className]}>
|
||||
<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 && (
|
||||
<p class="text-[var(--color-text-dim)]">{meta}</p>
|
||||
)}
|
||||
<Tag class:list={["mb-0", className]}>
|
||||
<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">{title}</span>
|
||||
<span class="text-[var(--color-text-label)] text-[11px]">
|
||||
{badge !== undefined && <span>[{badge}]</span>}
|
||||
{meta && <span>{meta}</span>}
|
||||
</span>
|
||||
</div>
|
||||
<slot />
|
||||
</Tag>
|
||||
|
||||
@@ -25,19 +25,13 @@ 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"
|
||||
class="bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen"
|
||||
>
|
||||
<slot name="nav" />
|
||||
<div class="max-w-[740px] mx-auto">
|
||||
<main class="px-4ch py-3lh">
|
||||
<div class="max-w-[960px] mx-auto">
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<slot name="footer" />
|
||||
|
||||
+67
-43
@@ -85,9 +85,9 @@ const adrs = [
|
||||
>
|
||||
<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">
|
||||
<div class="px-6 py-6 border-b border-[var(--color-border)]">
|
||||
<h1 class="text-[var(--color-text-heading)] text-lg font-semibold mb-2">homelab</h1>
|
||||
<p class="text-[var(--color-text)] text-sm 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
|
||||
@@ -95,43 +95,53 @@ const adrs = [
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Widget title="Overview" badge={glanceStats.length} as="section">
|
||||
<dl class="flex flex-col">
|
||||
<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="flex gap-2ch py-qtr-lh">
|
||||
<dt class="text-[var(--color-text-dim)] w-[16ch] shrink-0">{label}</dt>
|
||||
<dd>{value}</dd>
|
||||
<div class="bg-[var(--color-surface)] px-5 py-3">
|
||||
<p class="text-sm text-[var(--color-text-label)] mb-1">
|
||||
{label}
|
||||
</p>
|
||||
<p class="text-sm text-[var(--color-text-fg)]">
|
||||
{value}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
</Widget>
|
||||
|
||||
<Widget
|
||||
title="Network"
|
||||
meta="8 segments, default deny"
|
||||
title="homelab/network"
|
||||
meta="8 network segments · default deny"
|
||||
as="section"
|
||||
>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<div class="overflow-x-auto px-5">
|
||||
<table class="w-full text-sm 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]">
|
||||
<th class="text-[var(--color-text-label)] text-left py-2 pr-8 text-[10px] tracking-[0.16em] uppercase">
|
||||
Segment
|
||||
</th>
|
||||
<th class="text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch]">
|
||||
<th class="text-[var(--color-text-label)] text-left py-2 pr-8 text-[10px] tracking-[0.16em] uppercase">
|
||||
Name
|
||||
</th>
|
||||
<th class="text-[var(--color-text-dim)] text-left py-qtr-lh">
|
||||
<th class="text-[var(--color-text-label)] text-left py-2 text-[10px] tracking-[0.16em] uppercase">
|
||||
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 class="border-b border-[var(--color-border)] hover:bg-[var(--color-surface)]">
|
||||
<td class="text-[var(--color-accent)] py-2.5 pr-8 text-sm">
|
||||
{v.id}
|
||||
</td>
|
||||
<td class="text-[var(--color-text-fg)] py-2.5 pr-8 text-sm">
|
||||
{v.name}
|
||||
</td>
|
||||
<td class="text-[var(--color-text)] py-2.5 text-sm">
|
||||
{v.purpose}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
@@ -139,23 +149,27 @@ const adrs = [
|
||||
</div>
|
||||
</Widget>
|
||||
|
||||
<Widget title="Services" badge={services.length} as="section">
|
||||
<div class="flex flex-col gap-2lh">
|
||||
<Widget title="homelab/services" badge={services.length} as="section">
|
||||
<div class="flex flex-col gap-6 px-5 py-4">
|
||||
{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">
|
||||
<p class="text-[var(--color-text-label)] text-[10px] tracking-[0.14em] uppercase mb-2 px-1">
|
||||
{categoryLabels[cat]}
|
||||
</h3>
|
||||
<ul class="flex flex-col">
|
||||
</p>
|
||||
<div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
|
||||
{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>
|
||||
<div class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-5 py-3">
|
||||
<p class="text-sm text-[var(--color-text-fg)] mb-0.5">
|
||||
{svc.name}
|
||||
</p>
|
||||
<p class="text-xs text-[var(--color-text)] leading-relaxed">
|
||||
{svc.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
@@ -163,38 +177,48 @@ const adrs = [
|
||||
</Widget>
|
||||
|
||||
<Widget
|
||||
title="ADRs"
|
||||
title="homelab/ADRs"
|
||||
meta="why things are configured the way they are"
|
||||
badge={adrs.length}
|
||||
as="section"
|
||||
>
|
||||
<div class="flex flex-col gap-2lh">
|
||||
<div class="flex flex-col gap-px bg-[var(--color-border)] mx-5 my-4">
|
||||
{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}
|
||||
<div class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-5 py-4">
|
||||
<p class="text-sm text-[var(--color-text-fg)] mb-3">
|
||||
{adr.title}
|
||||
</p>
|
||||
<p class="text-[var(--color-text-label)] leading-relaxed">
|
||||
<strong>Why:</strong> {adr.why}
|
||||
<p class="text-sm text-[var(--color-text)] leading-relaxed mb-2">
|
||||
<span class="text-[var(--color-text-label)]">
|
||||
decision:{" "}
|
||||
</span>
|
||||
{adr.decision}
|
||||
</p>
|
||||
<p class="text-sm text-[var(--color-text)] leading-relaxed">
|
||||
<span class="text-[var(--color-text-label)]">
|
||||
why:{" "}
|
||||
</span>
|
||||
{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">
|
||||
<section class="px-5 py-6">
|
||||
<p class="text-[var(--color-text-label)] text-[10px] tracking-[0.14em] uppercase mb-2">
|
||||
homelab/docs
|
||||
</p>
|
||||
<p class="text-sm text-[var(--color-text)] mb-3">
|
||||
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)]"
|
||||
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>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -3,12 +3,18 @@ import Base from "@/layouts/Base.astro";
|
||||
import Nav from "@/components/Nav.astro";
|
||||
import Footer from "@/components/Footer.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";
|
||||
---
|
||||
|
||||
<Base>
|
||||
<Nav slot="nav" />
|
||||
<Hero />
|
||||
<div class="grid grid-cols-1 md:grid-cols-[1fr_1.2fr] border-b border-[var(--color-border)]">
|
||||
<Active />
|
||||
<HomeServices />
|
||||
</div>
|
||||
<Timeline />
|
||||
<Footer slot="footer" />
|
||||
</Base>
|
||||
|
||||
+40
-30
@@ -13,49 +13,59 @@ import { featuredProjects, archiveProjects } from "@/data/projects";
|
||||
>
|
||||
<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">
|
||||
<div class="px-6 py-6 border-b border-[var(--color-border)]">
|
||||
<h1 class="text-[var(--color-text-heading)] text-lg font-semibold mb-2">projects</h1>
|
||||
<p class="text-[var(--color-text)] text-sm 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">
|
||||
<Widget title="projects/featured" badge={featuredProjects.length} as="section">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-px bg-[var(--color-border)] m-5">
|
||||
{featuredProjects.map((project) => (
|
||||
<ProjectCard project={project} />
|
||||
))}
|
||||
</div>
|
||||
</Widget>
|
||||
|
||||
<Widget title="Archive" badge={archiveProjects.length} as="section">
|
||||
<div class="flex flex-col gap-2lh">
|
||||
<Widget title="projects/archive" badge={archiveProjects.length} as="section">
|
||||
<div class="flex flex-col gap-px bg-[var(--color-border)] m-5">
|
||||
{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)]"
|
||||
>
|
||||
<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-5 px-5 py-4 group"
|
||||
>
|
||||
<div class="flex flex-col gap-2 flex-1 min-w-0">
|
||||
<div class="flex items-center gap-3">
|
||||
{project.year && (
|
||||
<span class="text-sm text-[var(--color-text-label)] shrink-0">
|
||||
{project.year}
|
||||
</span>
|
||||
)}
|
||||
<span class="text-sm text-[var(--color-text-fg)] group-hover:text-[var(--color-accent)] truncate">
|
||||
{project.title}
|
||||
</a>
|
||||
</h3>
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm text-[var(--color-text)] leading-relaxed">
|
||||
{project.description}
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-x-3 gap-y-0.5">
|
||||
{project.tags.map((tag) => (
|
||||
<span class="text-xs text-[var(--color-text-label)]">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</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>
|
||||
<span
|
||||
class="text-sm text-[var(--color-text-label)] group-hover:text-[var(--color-accent)] shrink-0 mt-0.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
↗
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</Widget>
|
||||
|
||||
+58
-40
@@ -3,21 +3,32 @@
|
||||
@variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
/* 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;
|
||||
/* Console Dark (default) */
|
||||
--color-bg: #0a0c0f;
|
||||
--color-surface: #0e1116;
|
||||
--color-surface-raised: #11151b;
|
||||
--color-border: #1c2128;
|
||||
--color-border-bright: #2a3038;
|
||||
--color-text: #c1bdb3;
|
||||
--color-text-fg: #e8e4d8;
|
||||
--color-text-heading: #ffffff;
|
||||
--color-text-label: #6a675f;
|
||||
--color-text-dim: #6a675f;
|
||||
--color-text-faint: #3a3830;
|
||||
--color-accent: #d4a259;
|
||||
--color-accent-green: #7b9e7b;
|
||||
--color-accent-red: #c74028;
|
||||
|
||||
/* Timeline branch colors — dark */
|
||||
--color-timeline-career: #b390a8;
|
||||
--color-timeline-education: #999999;
|
||||
--color-timeline-cert: #cba76c;
|
||||
--color-timeline-project: #8ba8c0;
|
||||
--color-timeline-homelab: #9ab494;
|
||||
|
||||
/* Typography */
|
||||
--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);
|
||||
--font-mono: "Source Code Pro", ui-monospace, monospace;
|
||||
--font-sans: ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
/* Breakpoints */
|
||||
--breakpoint-xs: 576px;
|
||||
@@ -35,22 +46,27 @@
|
||||
--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: 16px;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-body);
|
||||
font-family: var(--font-mono);
|
||||
font-variant-ligatures: none;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
* {
|
||||
@@ -60,33 +76,35 @@ html[data-typeface="mono"] { --font-body: var(--font-mono); font-size: 15px; le
|
||||
}
|
||||
}
|
||||
|
||||
/* Bone (light) overrides */
|
||||
/* Console Light overrides */
|
||||
:root:not(.dark) {
|
||||
--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-bg: #f3f0e8;
|
||||
--color-surface: #faf6ec;
|
||||
--color-surface-raised: #f6f2e7;
|
||||
--color-border: #d8d2c2;
|
||||
--color-border-bright: #b8b2a2;
|
||||
--color-text: #3a3c40;
|
||||
--color-text-fg: #1c1e22;
|
||||
--color-text-heading: #000000;
|
||||
--color-text-label: #8a857a;
|
||||
--color-text-dim: #8a857a;
|
||||
--color-text-faint: #c0bba8;
|
||||
--color-accent: #b1631c;
|
||||
--color-accent-green: #3d7048;
|
||||
--color-accent-red: #d21f07;
|
||||
|
||||
--color-timeline-career: #6e3d7a;
|
||||
--color-timeline-education: #595959;
|
||||
--color-timeline-cert: #9c6620;
|
||||
--color-timeline-project: #355d8a;
|
||||
--color-timeline-homelab: #3d7048;
|
||||
}
|
||||
|
||||
/* Link underlines */
|
||||
a {
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 3px;
|
||||
text-decoration-color: var(--color-border-bright);
|
||||
}
|
||||
a:hover {
|
||||
text-decoration-color: currentColor;
|
||||
}
|
||||
|
||||
/* Default transitions */
|
||||
/* Default transitions — linear, fast */
|
||||
a,
|
||||
button {
|
||||
transition: color 120ms linear, border-color 120ms linear,
|
||||
opacity 120ms linear, text-decoration-color 120ms linear;
|
||||
background-color 120ms linear, opacity 120ms linear;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
Reference in New Issue
Block a user