Header
Sticky top navigation used site-wide by (site)/layout.tsx. Contains the logo/name lockup (Avatar + title), desktop nav links, ThemeToggle, X + LinkedIn social icons, and a mobile menu trigger that opens MobileNav.
Live Preview
The real Header component rendered inline (fixed=false) so it sits inside the preview box. In production it's fixed to the top of the viewport with a spring entrance animation.
Composition
Avatar
Photo variant with rotating gradient border at 40×40.
Desktop nav
Links driven by translation keys (nav.home, nav.work, nav.blog, nav.about, nav.faqs, nav.contact). Active link highlighted by matching `pathname`.
Right cluster
ThemeToggle, a vertical divider, then X and LinkedIn icons.
Mobile
Below lg: hides desktop nav, shows a hamburger button that opens MobileNav.
Entrance
Framer Motion spring: y -100 → 0, opacity 0 → 1.
Styling tokens
border-border-subtle + bg-[color-mix(in_srgb,var(--background)_60%,transparent)] — applied inline in Header.tsxbackdrop-blur-[10px] on the barImport
import { Header } from '@/components/layout/Header'