Prism: 3D Interactive Portfolio Template (Three.js + GSAP ScrollTrigger, Vite)

Live demo: https://prism-3d-portfolio-demo.vercel.app

Prism is a dark, dramatic one-page portfolio for creative developers, designers, 3D artists and small studios. A noise-displaced, iridescent orb (custom GLSL shaders) reacts to the pointer and travels through the page as you scroll. Headings reveal letter by letter, projects slide sideways in a pinned gallery, and your about statement lights up word by word.

It's plain Three.js + GSAP ScrollTrigger + Vite, with no framework lock-in. All content lives in index.html, colours in CSS variables, and the orb's path through the page in one small keys array.

It's built responsibly: it respects prefers-reduced-motion (plus an on-page "Reduce motion" toggle), falls back to a CSS orb when WebGL isn't available, and uses lighter geometry, fewer particles and no pinning on phones. The 3D scene loads after the page is interactive.

Features:

- 🔮 Custom-shader WebGL orb + dust field (Three.js), pointer-reactive

- 🎬 GSAP ScrollTrigger choreography: char reveals, pinned horizontal work gallery, scrubbed marquees, word-by-word statement, count-ups, drawn timeline

- 🧭 Orb follows 5 editable scroll keyframes (position, scale, distortion)

- 🖱️ Desktop extras: blend-mode cursor, magnetic buttons, 3D tilt cards with spotlight

- 📄 Sections: Hero, Skills marquee, Selected work, About + stats + services, Journey timeline, Contact, Footer

- ♿ Lighthouse Accessibility, Best Practices and SEO all 100 (mobile, live demo). Skip link, landmarks, screen-reader text for animated headings

- 🧘 Reduced-motion support + on-page toggle. No-WebGL fallback

- 📱 Mobile-tuned: reduced detail, DPR cap 1.5, pauses when the tab is hidden

- 🔤 Self-hosted OFL fonts (Space Grotesk, JetBrains Mono), no external requests

- 🚀 Deploys anywhere static: Vercel, Netlify, Cloudflare Pages, GitHub Pages