Coin3D Portfolio: An Interactive 3D Portfolio Experience
The Concept
I wanted to push beyond flat, static portfolio sites and create something that immediately grabs attention. The idea: a 3D coin that spins in space, revealing different sections of my portfolio as it rotates. Built with Three.js and TypeScript.
Tech Stack
- TypeScript — type safety for complex 3D math and scene management
- Three.js — WebGL rendering, lighting, and camera controls
- GSAP — smooth animation sequencing
- Vite — fast build tooling and HMR
How It Works
Scene Setup
The scene consists of a central 3D coin model with custom textures, ambient and directional lighting, and a particle system in the background that creates a floating-in-space effect.
Interactive Navigation
Instead of traditional nav links, users interact with the 3D scene. Clicking different faces of the coin transitions to different portfolio sections. The camera smoothly orbits to reveal each face.
Responsive Fallback
Not all devices handle WebGL well. I implemented a capability check that gracefully degrades to a flat 2D version on older devices and low-powered mobile phones.
Challenges
Performance
3D rendering is expensive. I spent significant time optimizing:
- Geometry instancing for repeated elements
- Texture compression to reduce VRAM usage
- RequestAnimationFrame throttling on background tabs
TypeScript + Three.js
Three.js's type definitions were incomplete in some areas. I ended up writing custom type guards and extending interfaces for my scene objects. The upfront investment paid off — catching rotation math bugs at compile time saved hours of runtime debugging.
What I Learned
This project taught me that 3D web experiences live or die on performance and accessibility. A stunning 3D scene that stutters at 15fps on a mid-range phone is worse than a simple 2D site that loads instantly. Always measure, always test on real devices.