This is a 3D web developer portfolio built with React.js, React Three Fiber, and Three.js. It features a real-time animated avatar, interactive camera controls, and a dynamic virtual office environment. The project demonstrates creative coding, 3D animation blending, and performance optimization in a modern web environment.
- Frontend: React.js, Tailwind CSS, Framer Motion, GSAP
- 3D Engine: Three.js, React Three Fiber, Drei
- 3D Models: GLTF format, Blender, Ready Player Me, Mixamo
- Other Tools: Vite, useScroll, EmailJS (for contact form)
- 🎮 Interactive 3D avatar with real-time animation blending
- 🖱️ Camera transitions triggered by menu interaction and scroll
- 🧭 Mouse-based head tracking using bone manipulation
- 🧰 3D project showcase with scroll-synced animations
- 🌐 Responsive design for all screen sizes
- 💌 Working contact form connected via EmailJS
- Created avatar using Ready Player Me
- Added animation clips from Mixamo (no Blender needed)
- Controlled bone movements (e.g., head follows cursor)
- Displayed model in wireframe mode for debugging or aesthetic
- Designed a full office using Blender
- Imported free furniture and props
- Baked lighting and shadows into a single texture
- Integrated the model seamlessly into the Three.js scene
- Built responsive UI using Tailwind CSS
- Enabled auto-completion with Tailwind extension
- Added 2D/3D scroll animations using Framer Motion
- Implemented scroll transitions and camera moves with GSAP
- Triggered avatar animations based on scroll position
- Developed a 3D project slider within the scene
- Animated background color transitions with GSAP
- Embedded a video texture into the in-office computer screen
- Made the portfolio fully responsive for all devices
- Added an animated loading screen
- Fine-tuned animations for smoother transitions
- Connected a working contact form with email integration
git clone https://github.com/your-username/3d-portfolio.git
cd 3d-portfolio
npm install
npm run dev