Skip to main content
A concise overview of every dependency in the project.

​
Overview

Vite 5

Build tool and dev server. Provides HMR, fast cold starts via native ESM, and optimized production bundles via Rollup.

React 18

UI framework. Used for the 2D overlay (name, title, social links, environment selector) and as the host for the 3D canvas.

@react-three/fiber 8

React renderer for Three.js. Mounts a <Canvas> and lets you describe the 3D scene declaratively with JSX.

@react-three/drei 9

Helper library for react-three/fiber. Provides Environment, PresentationControls, Html, and useGLTF.

GSAP 3

Animation library. Used to tween camera/object position and rotation with duration: 1 easing when the user clicks on the PC.

React Router DOM 6

Client-side routing with BrowserRouter. Manages navigation between / (the 3D room) and /projects.

Tailwind CSS 3

Utility-first CSS framework. Styles the 2D overlay elements (name card, buttons, dropdown) without writing custom CSS.

react-responsive

Responsive breakpoint library. Available in dependencies for building responsive UI; the loader image breakpoint currently uses a plain resize event listener.

​
Core 3D libraries

​
@react-three/fiber 8

Fiber is the foundation of the 3D scene. It creates a <Canvas> element backed by a WebGL renderer and maps React component lifecycle to Three.js object creation and disposal. Key usage in this project:
  • <Canvas> in src/pages/Home.jsx sets up the WebGL context and hosts the 3D scene.
  • All mesh, light, and group elements (<mesh>, <ambientLight>, <group>) are fiber primitives that map directly to Three.js objects.

​
@react-three/drei 9

Drei provides high-level abstractions on top of fiber:
Component / hookWhere usedPurpose
useGLTFsrc/models/Computer.jsxLoads and caches bedroom.glb. Returns { nodes, materials, scene }.
Environmentsrc/models/Computer.jsxSets an HDR environment map (preset prop) that lights and reflects on the scene.
PresentationControlssrc/models/Computer.jsxWraps the model with mouse-drag orbit controls constrained to a range.
Htmlsrc/models/Computer.jsxProjects a DOM element (<iframe>) into 3D space, attached to the monitor mesh.

​
GSAP 3

GSAP animates camera and object transforms when the user interacts with the scene.
src/models/Computer.jsx
// Animate the scene group position toward the monitor on click
gsap.to(controlsRef.current.position, {
  x: targetPosition[0],
  y: targetPosition[1],
  z: targetPosition[2],
  duration: 1,
});
The duration: 1 (one second) is used consistently for zoom-in and zoom-out transitions.

​
Routing

​
react-router-dom 6

The app uses BrowserRouter with two routes:
PathComponentDescription
/src/pages/Home.jsxFull 3D room experience
/projectssrc/pages/Projects.jsxPlaceholder — currently renders <div>Projects</div>
If you deploy to GitHub Pages, BrowserRouter requires a server-side rewrite rule or a 404.html workaround. See the deployment guide for details.

​
Styling

​
Tailwind CSS 3

Tailwind utility classes style the 2D overlay that appears over the 3D canvas. It is configured with autoprefixer in postcss.config.js (standard Vite + Tailwind setup). No custom tailwind.config.js theme extensions are required by the base project. The retro font is applied inline via style={{ fontFamily: 'retro' }} because Tailwind’s JIT mode would need an explicit safelist entry for custom font families — the inline style avoids that complexity.

​
Available but not yet actively used

These packages are listed in dependencies but serve as ready-to-use building blocks for future enhancements:
PackageVersionPotential use
@react-spring/three^9.7.3Physics-based spring animations on 3D objects
@rive-app/react-canvas / rive-react^4.11.3Interactive Rive animations embedded in the scene or UI
react-responsive^10.0.0Available for responsive breakpoint hooks; can be used for fully responsive 3D layouts

​
Developer tooling

ToolVersionPurpose
Vite^5.2.0Dev server, HMR, production build
ESLint^8.57.0Linting with react, react-hooks, and react-refresh plugins
@vitejs/plugin-react^4.2.1Babel-based React fast refresh for Vite
autoprefixer^10.4.19PostCSS plugin to add vendor prefixes for Tailwind output
TypeScript types@types/react, @types/react-domType hints in editors (project uses JSX, not TSX)
Run the linter with: 
npm run lint
The lint script is configured with --max-warnings 0, so any warning is treated as an error in CI.

Build docs developers (and LLMs) love

Get started for freeTalk to us