3D Portfolio is an immersive, scroll-based personal website built with React Three Fiber, Three.js, GSAP, and Tailwind CSS. It replaces the traditional portfolio with a cinematic, WebGL-powered experience that guides users through sections like Intro, About, Projects, and Contact using animated camera transitions and interactive 3D scenes.
- Scroll-triggered camera and scene animations using GSAP
- Real-time 3D rendering powered by React Three Fiber and Three.js
- Fully responsive layout using Tailwind CSS
- Modular scene structure for each portfolio section
- Optimized performance with lazy-loading and frustum culling
- Framer Motion transitions for content reveal animations
- Component-driven architecture for maintainability
public/– Static assets including 3D models and texturessrc/components/– UI and 3D logic componentssrc/scenes/– Canvas-based scroll scenes (Intro, About, Projects, etc.)src/styles/– Global styles and Tailwind configurationApp.jsx– Sets up canvas, scroll layers, and routingmain.jsx– Entry point for the React app
git clone [https://github.com/LaeeqtheDev/3d-Portfolio.git](https://github.com/LaeeqtheDev/3d-Portfolio.git)
cd 3d-Portfolio
npm install
npm run dev
Then open http://localhost:3000 in your browser to view the live project.
- Replace 3D models in the
public/modelsfolder with.glbor.gltffiles - Update camera movement and scene transitions inside each
scene/*.jsxfile - Modify colors and font styles using
tailwind.config.js - Add more sections by creating new scenes and wiring them into the scroll layout
Made with 🚀 by Syed Laeeq Ahmed
- 📬 Email: laeeqahmed656@gmail.com
- 🧑💻 GitHub: github.com/LaeeqtheDev
Free to use for portfolio or educational purposes. Commercial or agency use requires attribution or permission from the author.