The Problem
Building a portfolio that stands out requires more than static pages—it needs an immersive, interactive experience that demonstrates technical skill while showcasing work. Most portfolio templates are generic, and custom 3D web experiences are complex to build and optimize. This repo solves that by providing a complete, award-winning 3D portfolio site built with React Three Fiber, ready to be adapted.
What This Does
This is a single-page application (SPA) portfolio built with React and Vite, featuring a fully interactive 3D room rendered with React Three Fiber (via @react-three/fiber and @react-three/drei). The core experience lives in src/Experience/, where Scene.jsx composes two 3D environments — a light room and a dark room — each with multiple GLTF models loaded from public/models/. Users toggle between rooms via RoomToggleButton.jsx, and pages (AboutPage, DesignWorkPage, DevWorkPage) are rendered as overlaid UI with transitions managed by Transition.jsx.
The site uses Zustand stores (src/stores/) for state management, including experienceStore.js, toggleRoomStore.js, and pageTransitionStore.js. Video textures for the work pages are handled in src/Experience/utils/videoTextures.jsx using useVideoTexture from drei. The public/basis/ directory contains the Basis Universal transcoder for KTX2-compressed textures, which the GLTF loader uses for efficient GPU memory usage.
How To Use It
Setup: Install dependencies with npm install (from package.json).
Running: Start the dev server with npm run dev (Vite's default). The entry point is index.html, which loads src/main.jsx and mounts App.jsx.
Configuration: No environment variables are required. Deployment is configured via vercel.json for Vercel hosting. The site is currently live at daniels-architects.com.
Build: Use npm run build for a production bundle (output to dist/), then npm run preview to test locally.
Real-World Use
This repo is a strong reference for anyone building a 3D portfolio or product showcase. The architecture is cleanly separated: src/Experience/ handles the 3D scene, src/pages/ contains the UI, and src/stores/ manages state. To adapt it, replace the GLTF models in public/models/ with your own, update the video files in public/videos/, and edit the page content in src/pages/. The useGLTFWithKTX2.jsx utility shows how to load compressed textures correctly, a pattern worth copying for any Three.js project.
Code Health & Issues
Med - No automated tests - The repo has no test files. The 3D scene and state transitions are complex and would benefit from at least unit tests for the stores and integration tests for page routing. Med - No CI/CD pipeline - There's no .github/workflows/ or CI config. Adding a simple GitHub Action to run lint (eslint.config.js) and build on push would prevent regressions. Low - Large static assets - The public/models/ and public/videos/ directories contain binary files (GLB, MP4). These are not tracked by version control best practices and increase repo size significantly. Consider using Git LFS or hosting them separately. Low - Hardcoded content - Page text and images are hardcoded in the JSX files (AboutPage.jsx, etc.). A CMS or data file would make content updates easier, but this is acceptable for a personal portfolio.
The code is well-structured for a portfolio project. The separation of concerns between the 3D experience, UI pages, and state stores is clean. The README credits all third-party assets, which is good practice.
The Bottom Line
This is a polished, production-ready 3D portfolio with a clean architecture and thoughtful asset optimization. It's a strong starting point for developers wanting to build an immersive web experience, though it's better suited as a reference than a template — the 3D models and content are specific to the original author. The lack of tests and CI is typical for a personal project but should be addressed if this were used as a team codebase.