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

feat(design): single-page consolidation, drop typeface picker

Browse Source 
Merge projects + homelab + timeline into one scrollable page.
Remove typeface picker (sans/serif/mono), keep theme toggle.
Nav simplified to name + toggle. Hero gains anchor links for
in-page navigation (#projects, #journey, #homelab). Old pages
become meta-refresh redirects. Timeline redesigned as two-column
grid layout — date left, content right — cutting vertical space
~50%. Focus states added for keyboard nav. Tags dropped from
timeline entries.
This commit is contained in:
Tyler Koenig
2026-05-24 19:36:19 -04:00
parent de74019e48
commit 141d66d7bb
9 changed files with 275 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Nav.astro
+8 -74
View File
@@ -1,53 +1,14 @@
---
const pathname = Astro.url.pathname;
const links = [
{ href: "/", label: "tyler" },
{ href: "/homelab/", label: "homelab" },
{ href: "/projects/", label: "projects" },
];
---
<header class="sticky top-0 z-50 bg-[var(--color-bg)] border-b border-[var(--color-border)]">
<nav class="max-w-[740px] mx-auto px-4ch h-11 flex items-center justify-between">
<ul class="flex items-center gap-2ch">
{links.map(({ href, label }) => {
const active = pathname === href || pathname === href.replace(/\/$/, "");
return (
<li>
<a
href={href}
aria-current={active ? "page" : undefined}
class:list={[
active
? "text-[var(--color-text)]"
: "text-[var(--color-text-label)] hover:text-[var(--color-text)]",
]}
>
{label}
</a>
</li>
);
})}
</ul>
<a href="/" class="font-semibold">Tyler Koenig</a>
<div class="flex items-center gap-2ch">
<div role="group" aria-label="Typeface" class="flex items-center gap-[0.5ch] text-[var(--color-text-dim)]">
<button data-typeface-btn="sans" class="hover:text-[var(--color-text)] cursor-pointer">sans</button>
<span aria-hidden="true">/</span>
<button data-typeface-btn="serif" class="hover:text-[var(--color-text)] cursor-pointer">serif</button>
<span aria-hidden="true">/</span>
<button data-typeface-btn="mono" class="hover:text-[var(--color-text)] cursor-pointer">mono</button>
</div>
<button
data-theme-toggle
aria-label="Switch to light mode"
class="text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
>
light
</button>
</div>
<button
data-theme-toggle
aria-label="Switch to light mode"
class="text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
>
light
</button>
</nav>
</header>
@@ -71,31 +32,4 @@ const links = [
});
updateTheme();
const tfBtns = document.querySelectorAll("[data-typeface-btn]");
function updateTypeface() {
const current = document.documentElement.dataset.typeface || "sans";
tfBtns.forEach((b) => {
const val = b.getAttribute("data-typeface-btn");
if (val === current) {
b.classList.add("font-bold", "text-[var(--color-text)]");
b.classList.remove("text-[var(--color-text-dim)]");
} else {
b.classList.remove("font-bold", "text-[var(--color-text)]");
b.classList.add("text-[var(--color-text-dim)]");
}
});
}
tfBtns.forEach((b) => {
b.addEventListener("click", () => {
const val = b.getAttribute("data-typeface-btn")!;
document.documentElement.dataset.typeface = val;
localStorage.setItem("lerko96-typeface", val);
updateTypeface();
});
});
updateTypeface();
</script>