Skip to main content

​
Welcome to Namith’s Room

3D Portfolio is an immersive, browser-based experience built entirely in React. Instead of a traditional portfolio page, visitors are dropped into a fully rendered 3D bedroom where they can look around, interact with objects, and dive into the portfolio by clicking on the in-room PC monitor.

Quick start

Clone the repo and run the dev server in under two minutes.

3D scene

Understand how the bedroom GLTF model is rendered with React Three Fiber.

Time of day

Learn how lighting automatically adapts to the real-world time.

Interactions

See how click-to-zoom and keyboard navigation work.

​
What makes this portfolio different

Most developer portfolios are static web pages. This one is a 3D room you can actually explore.
FeatureDescription
Interactive 3D sceneA detailed bedroom GLTF model rendered at full screen with @react-three/fiber
Live monitor embedClick the PC to zoom in and see the real portfolio site inside the monitor via an <iframe>
Dynamic lightingFive environment presets (dawn, morning, evening, dusk, night) that change based on your local clock
GSAP animationsSmooth position and rotation transitions when zooming into or out of the monitor
Responsive layoutCamera positions and UI scaling adapt to widescreen, standard, and portrait viewports
Retro aestheticCustom pixel-font UI overlays with a live clock and social links

​
Tech stack at a glance

React 18 + Vite
@react-three/fiber   — React renderer for Three.js
@react-three/drei    — Helpers: Environment, PresentationControls, Html, useGLTF
gsap                 — Camera animation
react-router-dom     — Client-side routing
Tailwind CSS         — Utility classes for the 2D UI overlay
The portfolio embeds https://namith.vercel.app/ inside the 3D monitor. To fork this project for your own use, update the src of the <iframe> in src/models/Computer.jsx.

​
Project structure

src/
├── App.jsx                 # Router root
├── pages/
│   ├── Home.jsx            # Main experience: Canvas + UI overlay
│   ├── Home.css            # Retro font + pulsing animation styles
│   └── Projects.jsx        # Placeholder projects page
├── components/
│   ├── Loader.jsx          # Loading screen (responsive background images)
│   └── Loader.css
├── models/
│   └── Computer.jsx        # 3D bedroom scene + click interaction logic
└── assets/
    ├── 3d/bedroom.glb      # The main GLTF model
    ├── fonts/retro.ttf
    ├── icons/              # GitHub, LinkedIn, clock GIF, home GIF
    └── images/             # Loader background images (desktop + mobile)

Build docs developers (and LLMs) love

Get started for freeTalk to us