Inspiration
Most portfolio websites look alike—they rely on scrolling through sections and static cards. We wanted to challenge that idea by transforming a portfolio into a living 3D digital city. Inspired by futuristic architecture, cyberpunk aesthetics, and cinematic web experiences, we created a world where every district represents a different part of a developer's journey. Instead of browsing a website, visitors explore an interactive city.
What it does
DevCity 3D is a fully interactive 3D portfolio built as a futuristic digital city. Every district has its own identity and purpose, while every building represents a portfolio category such as Skills, Projects, Services, Achievements, or Contact. Large floating district titles guide visitors through the city, and holographic 3D information panels display content beside each building. Smooth camera movements, dynamic lighting, animated environments, and immersive interactions create an engaging experience unlike a traditional portfolio.
How we built it
We built DevCity 3D using Three.js, React.js, JavaScript, HTML5, CSS3, GSAP, and Vite. Three.js powers the 3D city, buildings, lighting, cameras, and particle systems, while GSAP delivers smooth cinematic camera transitions and interactive animations. The interface uses custom glassmorphism components, holographic cards, responsive layouts, and optimized assets to ensure a fluid experience across devices.
Challenges we ran into
Building an immersive city while maintaining smooth performance was our biggest challenge. We also had to carefully balance lighting, animations, camera movement, and responsiveness so the city remained visually impressive without sacrificing usability. Designing holographic interfaces that blended naturally into the 3D environment required multiple iterations.
Accomplishments that we're proud of
We're proud of turning a traditional portfolio into a futuristic city that people can explore. Instead of displaying information in ordinary sections, we created an experience where architecture, motion, and storytelling work together. The floating holographic panels, cinematic fly-through camera, and interactive districts make the portfolio feel like a digital world rather than a website.
What we learned
This project helped us deepen our understanding of Three.js, 3D scene composition, camera choreography, lighting techniques, particle systems, performance optimization, and creative interaction design. We also learned that combining storytelling with 3D graphics creates a far more memorable user experience.
What's next for DevCity 3D
We plan to expand DevCity 3D with dynamic weather, day and night cycles, AI-powered city guides, interactive building interiors, real-time GitHub integration, WebXR/VR support, multiplayer exploration, and additional districts that showcase future projects and achievements.
Built With
- css3
- gsap
- javascript
- react
- three.js
- vite
