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

feat: terminal-noir redesign — widget system + design token overhaul

Browse Source 
Replace cyan-green modern theme with terminal-noir aesthetic aligned to
style-guide.md. Hard edges, monospace-first, linear transitions, no gradients.

Introduce Widget component as the single repeatable section primitive:
title bar with horizontal rule, optional badge/meta — all pages and
sections now use this pattern (Glance-inspired data-driven layout).

Design system changes (globals.css):
- Palette: #0a0a0a bg, #111111 surface, #00cc44 status green, #cc2200 alert red
- Drop Montserrat; Source Code Pro primary, system sans for prose only
- Transitions: linear 120ms; no eased animations, no border-radius

Component changes:
- Nav: flat, border-bottom only, lowercase links
- Hero: 56px square photo, status dot, @ email glyph
- ProjectCard: flat bordered card, 2-col grid, no gradient tile
- Skills: key-value rows with dot-separated values
- Footer: minimal text links

Pages: all sections wrapped in Widget; homelab uses gap-px grid for
at-a-glance, services, and ADRs sections. Archive uses flat list layout.

Data: remove gradient field from Project type; add optional year field
This commit is contained in:
lerko96
2026-04-12 19:23:50 -04:00
parent 05a32492ac
commit 088a06a51c
12 changed files with 396 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/Nav.tsx
View File

@@ -3,48 +3,45 @@
import Link from "next/link";
import { usePathname } from "next/navigation";
const links = [
{ href: "/", label: "Home" },
{ href: "/homelab/", label: "Homelab" },
{ href: "/archive/", label: "Archive" },
{ href: "/", label: "home" },
{ href: "/homelab/", label: "homelab" },
{ href: "/archive/", label: "archive" },
];
export default function Nav() {
const pathname = usePathname();
return (
<header className="sticky top-0 z-50 bg-[var(--color-bg-deep)] border-b border-[var(--color-grey-1)]">
<nav className="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
<header className="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
<nav className="max-w-5xl mx-auto px-6 h-11 flex items-center justify-between">
<Link
href="/"
className="font-mono text-xl font-bold text-[var(--color-green)] tracking-widest hover:opacity-80 transition-opacity"
className="font-mono text-sm font-bold text-[var(--color-text)] tracking-widest hover:text-[var(--color-text-label)]"
>
tk
</Link>
<div className="flex items-center gap-6">
<ul className="flex gap-6">
{links.map(({ href, label }) => {
const active = pathname === href || pathname === href.replace(/\/$/, "");
return (
<li key={href}>
<Link
href={href}
aria-current={active ? "page" : undefined}
className={`text-xs font-mono tracking-widest uppercase transition-colors ${
active
? "text-[var(--color-green)]"
: "text-[var(--color-grey-3)] hover:text-[var(--color-grey-4)]"
}`}
>
{label}
</Link>
</li>
);
})}
</ul>
</div>
<ul className="flex gap-6">
{links.map(({ href, label }) => {
const active =
pathname === href || pathname === href.replace(/\/$/, "");
return (
<li key={href}>
<Link
href={href}
aria-current={active ? "page" : undefined}
className={`font-mono text-xs tracking-widest ${
active
? "text-[var(--color-text)]"
: "text-[var(--color-text-label)] hover:text-[var(--color-text)]"
}`}
>
{label}
</Link>
</li>
);
})}
</ul>
</nav>
</header>
);