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/Hero.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { useRef } from 'react'
+import type { Resume } from '@/lib/types'
+import styles from './hero.module.css'
+
+type Props = { resume: Resume; mailHref: string; showProjects: boolean }
+
+export default function Hero({ resume, mailHref, showProjects }: Readonly<Props>) {
+  const hero = useRef<HTMLElement>(null)
+
+  // The floor sways a couple of degrees with the pointer, like nudging the viewport.
+  const onPointerMove = (event: React.PointerEvent) => {
+    if (event.pointerType !== 'mouse' || !hero.current) return
+    const offset = event.clientX / window.innerWidth - 0.5
+    hero.current.style.setProperty('--sway', `${(offset * 3).toFixed(2)}deg`)
+  }
+
+  return (
+    <section className={styles.hero} id="top" ref={hero} onPointerMove={onPointerMove}>
+      <div className={styles.content}>
+        <p className={styles.status}>
+          <span className={styles.dot} />
+          {resume.availability}
+        </p>
+        <h1 className={styles.name}>{resume.name}</h1>
+        <p className={styles.role}>{resume.role}</p>
+        <p className={styles.bio}>{resume.bio}</p>
+        <div className={styles.actions}>
+          {showProjects && <a className={`${styles.button} ${styles.primary}`} href="#projects">See projects</a>}
+          <a className={`${styles.button} ${showProjects ? styles.secondary : styles.primary}`} href={mailHref}>Email me</a>
+        </div>
+      </div>
+      <div className={styles.stage} aria-hidden="true">
+        <div className={styles.floor}>
+          <div className={styles.plane} />
+        </div>
+      </div>
+    </section>
+  )
+}