An immersive, interactive 3D Developer Portfolio built with Three.js, React 19, and Tailwind CSS. Features a retro-futuristic 3D workspace with a dynamic CRT monitor displaying a live, interactive UI via canvas texture projection and 3D raycast event dispatching.
- 🖥️ Interactive 3D CRT Display: Projects a live React component onto a curved 3D mesh texture in real-time using
html2canvasand Three.js canvas texturing. - 🎯 3D Raycasting Event Proxy: Interactive buttons, navigation links, and clipboard actions rendered directly on the 3D monitor mesh using raycasted mouse coordinates.
- 💾 Retro BIOS Boot Sequence: Nostalgic terminal boot experience with animated system checks, memory tests, and audio cues before entering the workspace.
- 🎨 Minimalist Box-Free Design: Clean, typography-first interface optimized for curved CRT readability with zero box artifacts or clutter.
- ⚡ Smooth Camera Transitions: Tween.js camera choreography that zooms in and focuses dynamically between the desk overview and CRT display.
- 🐳 Docker & Nginx Deployment: Multi-stage production container with custom Nginx GLB/GLTF MIME type support and aggressive caching control.
- 3D & Graphics: Three.js (r171), WebGL, Blender (GLTF/GLB models)
- Frontend Framework: React 19, Vite 6
- Styling: Tailwind CSS v4, PostCSS
- Animations: @tweenjs/tween.js, Canvas 2D
- Texture Rasterizer: html2canvas
- Infrastructure: Docker (Multi-stage Node 20 / Nginx Alpine), Docker Compose, Make
portfolio-beta/
├── public/
│ ├── models/ # 3D Blender GLB/GLTF models (wholeEnviroment.glb)
│ └── styles/ # Background textures and visual assets
├── srcs/
│ ├── audioManager.js # Web Audio API spatial synthesizer & sound FX engine
│ ├── deskWidgets.js # 3D Desk widgets (7-segment clock, lamp switch, sound switch)
│ ├── lightingManager.js # Three.js scene lighting (ambient, directional, bulb, screen)
│ ├── loader.js # Interactive macOS iTerm telemetry boot loader & fast-boot
│ ├── portfolio.js # Core Three.js orchestrator, camera tweens & lifecycle
│ ├── screenManager.js # HTML-to-Canvas CRT texture rasterizer & color interceptor
│ ├── comps/
│ │ ├── display.jsx # Interactive screen sections (Home, About, Projects, Contact)
│ │ ├── portfolioData.js # Structured project, experience & skills data
│ │ └── sectionNav.jsx # Monospace section navigation bar
│ └── main.jsx # React 19 root & application initialization
├── portfolio.css # Typography, CRT scanlines, and WebGL screen styling
├── Dockerfile # Multi-stage production container build
├── docker-compose.yml # Container orchestration configuration
├── nginx.conf # Nginx server config with GLB/WASM mime types
├── Makefile # Automated build, dev, and Docker management targets
└── package.json # Dependencies and build scripts
- Node.js (v18 or higher)
- Docker & Docker Compose (optional, for containerized run)
-
Clone the repository:
git clone https://github.com/ChaoticIssam/portfolio-beta.git cd portfolio-beta -
Install dependencies:
npm install
-
Start the Vite development server:
make dev # or npm run devOpen http://localhost:5173 in your browser.
The project includes automated Docker orchestration served through an optimized Nginx Alpine container:
# Build and start container in the background (runs on http://localhost:8090)
make docker-up
# Stop container
make docker-down
# Clean dangling image layers and builder cache
make docker-clean
# Full prune (removes dangling images, cache, and unused anonymous volumes)
make docker-prune
# Rebuild and restart container from scratch
make docker-re| Command | Description |
|---|---|
make dev |
Starts local Vite development server with Hot Module Replacement (HMR). |
make build |
Compiles the production bundle into /dist. |
make preview |
Locally previews the compiled production build. |
make clean |
Removes /dist and .vite cache directories. |
make docker-up |
Builds and launches the Docker container at http://localhost:8090. |
make docker-down |
Stops and removes the Docker container. |
make docker-clean |
Prunes dangling <none> images and builder cache. |
make docker-prune |
Deep prunes dangling images, build cache, and unused anonymous volumes. |
make docker-fclean |
Deep clean for all containers, images, volumes, and local artifacts. |
make docker-re |
Restarts and rebuilds the container from scratch. |
| Workspace Progress | Blender Wireframe View |
|---|---|
 |
 |
| BIOS Loading Terminal | Scene Lighting & Ambience |
|---|---|
 |
 |
Issam Zitouni
- Role: Full Stack Developer (React · TypeScript · FastAPI · Django · Three.js)
- Education: 1337 Coding School (42 Network) – Benguerir, Morocco
- GitHub: @ChaoticIssam
- LinkedIn: issam-zitouni
- Email: issamzitouni257@gmail.com
- Inspired by the creative 3D web experiments by Henryjeff.
- Built with the support and community at 1337 (42 Network).
This project is licensed under the MIT License - see the LICENSE file for details.