DEV Community

Sai Akshith Akshintala
Sai Akshith Akshintala

Posted on

Built a 3D Batman Themed Portfolio πŸ¦‡πŸŽοΈ

The Hook
Most portfolios are flat. I wanted mine to feel like a high-performance terminal. So, I built a 3D experience using Three.js featuring a custom Batmobile and a "Turbo" navigation system.

The Tech Stack

3D Engine: Three.js (WebGL)

Logic: Vanilla JS (Zero bloat, 60FPS)

The Vibe: Dark mode, high-contrast gold/blue, and procedural geometries.

What I Learned

Camera Smoothing: Using lerp() (Linear Interpolation) to make the camera glide between sections instead of jumping.

Performance: Optimizing shaders and particle counts so it runs smoothly on mobile without melting your battery.

State Management: Syncing the 3D scene's "speed" (acceleration) with the user's scroll depth.

Check out the source code:
I've open-sourced the 3D logic here:
πŸ‘‰ https://github.com/saiakshithakshintala266-collab/saiakshithakshintala266-collab.github.io

Live Demo: saiakshith.me

Top comments (0)