The Problem

Developers who want a visually striking, three‑dimensional portfolio must stitch together a React front‑end, a Three.js scene, and assorted assets. Doing this from scratch involves configuring Vite, wiring routing, handling GLTF models, and managing UI state – all of which are easy to mis‑wire and hard to test.

What This Does

The repo delivers a complete Vite‑powered React app that renders an interactive home‑office showcase using Three.js. Core UI lives in src/components/* (e.g., RoomToggleButton.jsx, Menu.jsx). The 3‑D experience is assembled in src/Experience/*, where Experience.jsx creates a WebGL canvas and Scene.jsx loads model files from public/models/*. Page routing is handled by src/routes/Router.jsx, which maps URLs to page components under src/pages/*. Styling is SCSS‑based (src/**/*.scss and src/styles/*.scss).

How It Is Wired

Execution starts with index.html, which loads the Vite bundle. Vite’s entry point is src/main.jsx; it mounts the React root and renders <App /> (src/App.jsx). App.jsx imports the router (src/routes/Router.jsx) and the global overlay/transition components.

Router.jsx uses React‑Router to render page components such as HomePage.jsx, DesignWorkPage.jsx, and DevWorkPage.jsx. Each page imports UI pieces and, where needed, the experience store (src/stores/experienceStore.js) to toggle the 3‑D scene.

The 3‑D pipeline is anchored by src/Experience/Experience.jsx, which creates a <canvas> and injects Scene.jsx. Scene.jsx imports a large number of utilities (convertToBasic.jsx, useGLTFWithKTX2.jsx, videoTextures.jsx) and the model components (Dark_First.jsx, Light_First.jsx, etc.). The model files each call useGLTFWithKTX2 to fetch their GLB assets from public/models/....

State is managed through several Pinia‑style stores (toggleRoomStore.js, pageTransitionStore.js, videoTextureStore.js). toggleRoomStore is the most imported module (Ca = 8, Ce = 0) and drives the light/dark room switch across the entire app.

The internal import graph shows no circular dependencies and highlights src/Experience/Scene.jsx (Ca = 1, Ce = 12, instability 0.92) as the hub with the widest blast radius – changes here ripple through all model components and utilities.

Assets (fonts, images, videos, GLB files) are static files under public/ and are fetched directly by the browser; no server‑side code touches a database or external API.

How To Use It

# Clone the repository
git clone https://github.com/moses-y/daniels-home-office-portfolio.git
cd daniels-home-office-portfolio

# Install dependencies (npm inferred from package.json)
npm ci

# Development server (Vite default)
npm run dev

The README does not document exact npm scripts; the above commands follow the standard Vite conventions.

No environment variables or secret configuration files are present. To build for production, run npm run build (again, inferred from a typical Vite setup) and deploy the generated dist/ folder, e.g., via Vercel as hinted by vercel.json.

Real‑World Use

A design agency could embed this repo as the front‑end of a client‑facing showcase site. By swapping the GLB assets in public/models/ and adjusting the page content under src/pages/, the same codebase can present any portfolio with minimal changes.

Code Health & Issues

  • High – No test suite – 40 source files, zero test files.
  • High – No CI workflow – No .github/workflows/* or other automation.
  • High – No build gate (vercel.json present but not validated) – Deployment artifacts lack automated verification.
  • Medium – Dependabot missing – Only one manifest (package.json); no .github/dependabot.yml.
  • Medium – Large binaries in repo – public/models/Dark Room/Dark_First.glb (9.2 MiB) and similar assets inflate clone size.
  • Medium – Duplicated code blocks – Repeated 6‑line snippets across four model files (Dark_First.jsx, Light_First.jsx, Dark_Targets.jsx, Light_Targets.jsx). Refactor shared helpers to reduce duplication.

The Bottom Line

The repository provides a ready‑to‑run, visually impressive React + Three.js portfolio, with clear separation of UI, routing, and 3‑D scene logic. However, the lack of tests, CI, and proper asset management makes it risky for production without immediate investment in quality‑gate tooling and refactoring of duplicated model code. Suitable for rapid prototyping or as a visual reference; requires hardening before enterprise adoption.