Three.js portfolio with animated 3D scenes and camera transitions optimized for mobile performance.
Most 3D portfolio sites are desktop-only tech demos that turn your phone into a space heater. Erfan Mirasadi's portfolio actually runs smoothly on mobile, which already puts it in rare company. He's using Three.js for rendering, Theatre.js to choreograph camera movements and scene transitions, and Draco compression to keep geometry sizes from ballooning. The whole thing lives in a Next.js app that doesn't front-load a massive bundle. It loads fast, runs smooth, and treats touch inputs like first-class citizens instead of consolation prizes.
The technical choices are worth noting. Theatre.js gives the animations proper timing and easing without locking you into a rigid on-rails experience. Next.js handles code-splitting so you're not downloading everything upfront. The Draco compression is doing real work keeping mobile frame rates respectable. Mirasadi clearly spent time profiling and optimizing rather than just shipping the first version that looked good on his laptop. It's the kind of polish that only shows up when someone actually tests on a mid-range phone with a spotty connection.
The source is on GitHub if you want to dig into how he structured the Next/Three integration or see the performance strategies in practice. Worth checking out, especially if you've been putting off making your own site work properly on phones.
- Live Demo: https://iamerfan.me
- Source Code: https://github.com/erfan-mirasadi/IamErfan
- Author: Erfan Mirasadi (LinkedIn)