InspirationInspiration

My recent board exams were a time of intense focus, and right after they ended, I stumbled upon Mausam Singh's portfolio (mousham.design). Its minimalist design, the elegant Japanese Torii gate, and overall refined aesthetic were truly inspiring. It made me ponder: what if I pushed the boundaries of a personal portfolio? What if it wasn't just a collection of links, but an immersive experience, a journey? That spark ignited the idea for my 3D mythological world.

What it does This is a scroll-driven 3D interactive portfolio that takes the user on a narrative journey through various mythological and conceptual landscapes. As you scroll, the camera moves through distinct 3D environments, each representing a part of my story or skills:

An ethereal Torii Gate welcomes visitors. A floating About Me monolith emerges, detailing my background. A serene Lotus Platform showcases my skills through glowing lanterns. A vibrant Cherry Blossom Tree hosts orbiting project cards, each clickable to external links. A foreboding Yamraj Gate leads to the final, darkest realm. Narak Lok, a hell-themed environment with a dynamic lava floor, ash storms, and an interactive signboard for contact. The experience also features a dynamic day/night cycle, atmospheric effects, and subtle animations throughout. How we built it The entire experience is built using Three.js for all 3D rendering, scene management, and animation. React provides the component-based frontend structure, integrating the various 3D "builder" components into a cohesive application. The Base44 platform served as the complete full-stack environment, handling backend logic, data management (for project cards, site settings, and contact links), and deployment, which allowed me to focus purely on bringing the creative vision to life without worrying about infrastructure. Custom shaders were developed for elements like the lava and the demonic eye in Narak Lok, adding unique visual flair.

Challenges we ran into One of the primary challenges was optimizing performance to ensure a smooth 3D experience across various devices, given the complexity of the scenes and animations. Implementing seamless, scroll-based camera transitions between vastly different environments required intricate mathematical calculations and careful animation timing. Crafting procedural 3D elements and custom materials to achieve the desired mythological aesthetic also presented a steep learning curve. Balancing visual richness with loading times and ensuring responsiveness were constant considerations.

Accomplishments that we're proud of I'm incredibly proud of creating a highly unique and immersive portfolio that breaks away from traditional formats. Building a complex 3D world with rich mythological storytelling, all at the age of 15 and right after my board exams, was a significant personal achievement. The seamless integration of diverse 3D elements, the dynamic day/night cycle, and the impactful transition into Narak Lok are highlights. The ability to manage and update content via a custom admin panel on the Base44 backend is also a key accomplishment.

What we learned This project was a deep dive into advanced Three.js concepts, including custom geometries, materials, shaders, and performance optimization techniques. I gained invaluable experience in structuring large-scale frontend applications with React and learned to leverage a full-stack platform like Base44 for rapid development and deployment. It reinforced the importance of project planning, iterative development, and persistent problem-solving in bringing ambitious ideas to fruition.

What's next for rohit_3D Portfolio I plan to continuously refine the experience, adding more interactive elements and expanding on the existing mythological narrative. Future enhancements might include more dynamic content integration, further optimization for even broader device compatibility, and potentially integrating AI elements to make the world even more responsive and intelligent. I also aim to integrate more of my recent projects and skills into this evolving 3D universe.

What's next for rohit 3D Portfolio

Built With

Share this project:

Updates