Redesign the resume site as a 3D-editor viewport

New design: studio backdrop with a perspective floor and X/Z axis lines, an
orientation gizmo that orbits on scroll, Bricolage Grotesque and Instrument
Sans (bundled, no build-time network). Projects are laid out as plates by a
row planner that keeps every row full for any count; a demo image from the
repo root is shown when present, otherwise a generated voxel sculpture.
Text and projects still come live from Gitea.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XtcZtnG4GQA1d6mW5PNrS9

components/TopBar.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { useScrolled } from '@/lib/useScroll'
+import styles from './topbar.module.css'
+
+type Props = { name: string; mailHref: string; showProjects: boolean }
+
+export default function TopBar({ name, mailHref, showProjects }: Readonly<Props>) {
+  const scrolled = useScrolled()
+  return (
+    <header className={`${styles.bar} ${scrolled ? styles.solid : ''}`}>
+      <div className={styles.inner}>
+        <a className={styles.mark} href="#top">{name}</a>
+        <nav className={styles.nav} aria-label="Sections">
+          {showProjects && <a href="#projects">Projects</a>}
+          <a href="#skills">Skills</a>
+          <a href="#experience">Experience</a>
+          <a href="#education">Education</a>
+        </nav>
+        <a className={styles.mail} href={mailHref}>Email me</a>
+      </div>
+    </header>
+  )
+}