Add Three.js page graphics and GSAP site-wide motion system

- Home hero: full-height, with an interactive 3D wireframe of my face
  (MediaPipe landmarks from my-photo.png) rendered as a network graph
  with packets, scan sweeps and an assemble-on-load entry animation
- Inner pages: shared PageHero with a themed scene per page
  (About helix, Skills geodesic sphere, Work infra stack, Blog signal
  waves, Contact globe with connection arcs)
- Shared Three.js stage (framing, GSAP entry, pointer, off-screen
  pausing, reduced motion) with lazily loaded per-scene chunks
- GSAP motion system: data-reveal / data-reveal-stagger / data-parallax
  attributes, SplitText headings, divider draw-in, page exit fade,
  no-JS and reduced-motion fallbacks
- Mobile: graphic stacks above the text

Co-Authored-By: Claude Opus 5.5 <[email protected]>

package.json

@@ -14,6 +14,7 @@
         "@moduletrace/bun-mariadb": "^1.1.1",
         "@moduletrace/bunext": "^1.2.4",
         "gray-matter": "^4.0.3",
+        "gsap": "^3.15.0",
         "html-to-react": "^1.7.0",
         "lodash": "^4.17.21",
         "lucide-react": "^0.462.0",
@@ -27,7 +28,8 @@
         "rehype-prism-plus": "^2.0.1",
         "remark-gfm": "^4.0.1",
         "showdown": "^2.1.0",
-        "tailwind-merge": "^2.5.5"
+        "tailwind-merge": "^2.5.5",
+        "three": "^0.187.0"
     },
     "devDependencies": {
         "@tailwindcss/postcss": "^4.1.11",
@@ -38,6 +40,7 @@
         "@types/react": "^18",
         "@types/react-dom": "^18",
         "@types/showdown": "^2.0.6",
+        "@types/three": "^0.187.0",
         "postcss": "^8",
         "tailwindcss": "^4.1.11",
         "typescript": "^5"