6d0b4e29d8
- drop headshot photo (coherence break vs. full terminal aesthetic) - replace FA icons with plain-text brackets ([github], [linkedin], [email]) - remove Font Awesome CDN dependency - nav logo tk → ~/; theme toggle fa-sun/fa-moon → [light]/[dark] - reorder home sections: projects before skills/journey - add font-mono + opacity-70 to timeline descriptions (#2 bug + #8 polish) - uniform opacity-70 across hero bio, project desc, timeline desc - add hover:bg-surface-raised to ProjectCard article - drop journey badge count (noise) - change status ● online → ● available
60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { useTheme } from "@/context/ThemeContext";
|
|
|
|
const links = [
|
|
{ href: "/", label: "tyler" },
|
|
{ href: "/homelab/", label: "homelab" },
|
|
{ href: "/archive/", label: "archive" },
|
|
];
|
|
|
|
export default function Nav() {
|
|
const pathname = usePathname();
|
|
const { isDark, toggle } = useTheme();
|
|
return (
|
|
<header className="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
|
|
<nav className="max-w-[740px] mx-auto px-8 h-11 flex items-center justify-between">
|
|
<Link
|
|
href="/"
|
|
className="font-mono text-sm font-bold text-[var(--color-text)] hover:text-[var(--color-text-label)]"
|
|
>
|
|
~/
|
|
</Link>
|
|
|
|
<ul className="flex items-center 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-sm ${
|
|
active
|
|
? "text-[var(--color-text)]"
|
|
: "text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
|
}`}
|
|
>
|
|
{label}
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
<li>
|
|
<button
|
|
onClick={toggle}
|
|
aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
|
|
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
|
|
>
|
|
{isDark ? "[light]" : "[dark]"}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
);
|
|
}
|