DevSpawnPoint is an interactive 3D developer workspace (spawn point) portfolio built with modern web technologies. Visitors can navigate through a realistic 3D room, interact with items on the desk, and discover my projects, social media profiles, and skills in an immersive environment.
Interactive 3D workspace environment
Night mode with ambient lighting
This project is optimized using the latest web technologies and 3D graphics libraries:
- Core:React 19 & TypeScript
- 3D Engine:Three.js
- React Bridge:@react-three/fiber
- 3D Utilities:@react-three/drei
- Styling:Tailwind CSS 4
- Animations:Framer Motion
- AI Integration:Google Generative AI (Gemini)
- Build Tool:Vite
- Post-processing: Bloom and Vignette effects via
@react-three/postprocessing
- Interactive 3D Environment: 360-degree room exploration with zoom and pan capabilities.
- Dynamic Screens: Desktop monitors feature dynamic digital displays showcasing projects and tech stacks.
- Matrix Effect: Custom shader-based Matrix rain effect on specific terminal screens.
- Performance Optimization: Seamless experience with
frameloop="demand"and optimized DPR settings. - Music & Audio: Immersive ambient music managed through a central
MusicContext. - Gemini AI: Artificial intelligence integration for smart content management and interactions.
src/
├── components/
│ ├── canvas/ # 3D Models and Scene components (Room, Desk, Monitor, etc.)
│ ├── overlays/ # UI layers placed over the 3D scene
│ └── ui/ # Menus, Loading screens, and Buttons
├── context/ # Centralized state management for Overlays and Music
├── constants/ # Project data and configurations
├── assets/ # Static media files
└── App.tsx # Main entry point and R3F Canvas configurationTo run the project locally:
- Clone the repository:
git clone https://github.com/sametuca/DevSpawnPoint-Porfolio.git
- Install dependencies:
npm install
- Start the development server:
npm run dev
The 3D models used in the project are located in the public/models directory. All models are in GLTF/GLB format and optimized for web performance. The scene consists of a desk, gaming chair, monitors, decorative items, and custom lighting setups.
This project started with a detailed implementation plan and task breakdown. Here's how it all began:
Initial implementation plan - Building a hyper-realistic, first-person 3D environment
Detailed task breakdown - From project initialization to final polish
Developed by: Samet Uca