Konahapuram

Konahapuram is a Naruto-themed 3D portfolio where users explore my work in an immersive village. Includes mobile controls, 2D fallback, and a one-page summary for quick access.

Comment

What Inspired Us

Hi, this is Rutuja and Ashwin — a big anime fan, especially of Naruto. We’ve always loved the vibe of the Hidden Leaf Village, the scrolls, missions, and the energy of the Chūnin Exams. When I teamed up with my friend Ashwin for this hackathon, we wanted to build something that combined both creativity and frontend skills. That’s when the idea struck: what if a portfolio didn’t just show your work, but let you explore it like a game?

That idea turned into Konahapuram — a Naruto-themed, interactive 3D portfolio that tells Ashwin's story as a developer in a fun and immersive way.

How We Built It

We used Next.js as the framework, and React Three Fiber + Three.js to build a 3D village environment. Each building represents a different part of Ashwin’s portfolio—skills, projects, experience, and more.

Some key features we added:

  • Day/Night toggle (with a cool Akatsuki-style night mode )
  • Mobile-friendly controls using a joystick and direction buttons
  • Mini-map for easy navigation
  • A 2D fallback view for devices that can’t handle 3D
  • A single-page summary for users who just want to quickly glance through everything

Challenges We Faced

Creating a smooth 3D experience on the web is no small task. We had to work hard to optimize performance—especially for mobile devices. Making the village fun to explore, while still being informative, was a creative challenge too.

Another big task was designing mobile controls that actually felt intuitive and responsive. We wanted it to feel like a mini-game, but still function as a serious developer portfolio.

What We Learned

This project pushed both of us in different ways. I learned a lot about 3D rendering in the browser, responsive design in 3D environments, and how to create experiences that go beyond just "pretty UI."

For Ashwin, this was a new way to represent his skills—not just as text on a screen, but as part of a world that reflects his personality.

Overall, Konahapuram blends creativity, tech, and fandom into something that’s both fun and functional. It's a reminder that your work can reflect who you are — and still impress the tech crowd.

Built With

  • 3d-rendering
  • animation
  • css
  • drei
  • framer-motion
  • git
  • javascript
  • mobile-navigation-controls
  • next.js
  • performance-optimization
  • react
  • react-three-fiber
  • responsive-design
  • shadcn/ui
  • tailwind-css
  • three.js
  • typescript
  • ui/ux-design
  • vercel-deployment
Share this project:

Updates