3D Portfolio
Reimagining the Classic
Immersive & Interactive Website
Introduction
This website is an immersive 3D environment, in which the displayed room acts as a central space, where each page dynamically zooms into specific objects or furniture, transforming them into interactive elements that guide the user through the different parts.
This work highlights my skills in web and 3D development and showcases my ability to rethink traditional concepts to create memorable, impactful experiences.
Features
-
View information about me in the speech bubble that appears.
- Download my CV by clicking on the corresponding object.
- After the camera zoom finishes, some books animate out of the shelves and become clickable to the user.
- Explore my projects by choosing a book. Depending on which, a specific page of a virtual book will open up. The viewer can swipe through the pages and see project descriptions, pictures and videos.
- Fill in the contact form to get in touch or access my LinkedIn and GitHub profiles through direct links.
Dependencies
- Frontend Frameworks: React, React Router DOM, react-three-fiber and drei
- 3D Engine: Three.js, utilising WebGL for rendering and Blender for object creation and optimization
- UI Enhancements: turn.js for interactive book navigation
- Development Tools:Node.js and Vite for efficient development and build processes
Outcome
- I deployed the project using Netlify, generating a live link that incorporates all dependencies and ensures efficient hosting and delivery of the application.
- I have included videos and images of the content to provide an alternative way to explore the projects without delay.
Reflections
Developing this 3D portfolio website involved overcoming challenges across performance, compatibility and accessibility. While the site performed well locally, deployment revealed issues such as occasional page-loading errors and rendering inconsistencies, requiring more robust optimisation for memory-intensive dependencies and WebGL frameworks. Compatibility conflicts, particularly between turn.js and React, necessitated creative workarounds to maintain responsiveness and functionality. Additionally, ensuring accessibility in a WebGL environment proved complex, as features like alt text for texture-loaded images required alternative approaches, emphasising the importance of usability in innovative 3D designs.
- Enhanced Load Times: Investigating techniques like dynamic asset loading or progressive rendering to further reduce initial load times and improve user engagement.
- Cross-Device Testing: Enhancing responsiveness and performance optimisation for an even wider range of devices and screen sizes.
- Landing Page Design: Develop a professional landing page to provide a polished introduction to the site and guide users more effectively.
Explore more of my Web Design & Development Work
