Inspiration Portfolios are boring. Links, cards, a timeline — every developer has the same layout. We wanted something that felt alive. A space where the 3D character on screen responds to your mouse, where scrolling triggers cinematic animations, where the page itself becomes part of the experience. Not just a gallery of work, but a demonstration of what's possible when you treat a portfolio as a creative project.
What it does A single-page portfolio with a 3D character model as the centerpiece. The character moves with the mouse, sections animate in with GSAP ScrollTrigger, and the page flows through Landing, About, Tech Stack, Work, Career, and Contact sections. Custom cursor follows interactions. Loading screen with progress animation. Every section is designed to feel like a scene rather than a card layout.
How we built it React 18 + TypeScript with Vite for fast builds. Three.js via @react-three/fiber and @react-three/drei for the 3D character — a GLB model with custom lighting, animation blending, and mouse-driven rotation. GSAP with ScrollTrigger handles all scroll-based animations: text splits, parallax, opacity fades, and timeline sequencing. The character has a physics-based cannon setup (via @react-three/cannon) for natural movement, with post-processing effects from @react-three/postprocessing. Custom CSS for each section with responsive breakpoints.
Challenges we ran into The 3D character was the hardest part. Getting the GLB model to load, animate, and respond to mouse movement without jittering took multiple iterations on the animation blending and damping values. GSAP timeline sequencing across sections required careful ScrollTrigger configuration to prevent overlaps. The GSAP Club plugins are trial versions — they work in dev but would need a proper license for production hosting.
Accomplishments we're proud of The character feels alive — it tracks the mouse smoothly, blinks, and has natural idle animations. The scroll-triggered section transitions are cinematic without being slow. The whole thing runs at 60fps even with the 3D canvas active. It actually looks and feels different from any other portfolio out there.
What we learned Three.js + React is surprisingly ergonomic with @react-three/fiber — you can treat 3D objects like React components. GSAP ScrollTrigger is the best scroll animation library, period. Building something visually ambitious forces you to care about performance in a way that a standard CRUD app never does.
What's next Replace the GSAP trial plugins with licensed versions. Add a project carousel with live demo previews. Dark/light mode toggle. Blog section with MDX support. Maybe a second 3D scene for the contact section.
Built With
- gsap
- gsap-scrolltrigger
- react
- three.js
- typescript
- vite
- webgl
Log in or sign up for Devpost to join the conversation.