Building an Interactive 3D Portfolio with Three.js, Next.js, and GSAP

Night Workspace is a portfolio that takes visitors on an interactive journey through a warm-lit studio. Instead of a traditional page, it introduces the creator by placing them inside a space where objects represent their projects, skills, and background. 🌌

The studio features books on the shelf that open to reading spreads, a monitor introducing the creator and their work, a softboard displaying skills, education, and experience, a music player, and a digital clock. Selecting an object moves the camera closer to it, creating an engaging experience without requiring visitors to learn a new interface. 🖥️

Creating this interactive portfolio presented several challenges. First, rendering readable text inside a 3D scene was difficult, especially on mobile devices. Ayush addressed this by increasing text size, contrast, and resolution, adjusting camera framing, and optimizing lighting. 📝

Second, mobile performance was a concern. Ayush implemented a lighter mobile rendering profile, reducing rendering resolution during movement, using smaller shadow maps, and minimizing visual effects. For reading views, the scene increases resolution when movement stops, and sharper textures are applied to visible book pages. 📱

Finally, keeping the portfolio easy to use required balancing interactivity with clear presentation of information. Ayush developed ordinary text pages for project details, skills, and contact information, ensuring that the interactive experience and readable content complement each other. ⚙️

Through this project, Ayush gained insights into designing a portfolio as both a graphics endeavor and an interface. He learned that while objects can appear convincing, they may be difficult to interact with, and transitions can feel smooth but take too long. Additionally, a page may look sharp on a laptop but become unreadable on a phone. ✅

Feedback on Night Workspace is welcome. If visitors find it clear which objects can be interacted with, notice its performance on their device, or assess the readability of book pages and board notes, Ayush encourages reporting performance issues, including device and browser details. Visit Night Workspace to explore the interactive portfolio.