A high-performance developer portfolio built with React 19, Three.js, WebGL GLSL Shaders, and Framer Motion. It features custom shader backgrounds, 3D tilt interactions, and a bespoke leather-and-gold aesthetic (#1a0f08 dark espresso, #3c2415 warm umber, #c9a96e brushed gold).
Hero Section & WebGL Canvas |
3D Tilt Project Grid |
Mobile Hero |
Mobile About |
Mobile Projects |
| Layer | Technology & Highlights |
|---|---|
| Frontend | React 19, JavaScript (ESNext), Vite 7, React Router 7 |
| Graphics & 3D | Three.js, React Three Fiber, React Three Drei, Custom GLSL Shaders |
| Styling & Motion | Tailwind CSS 4, Custom CSS Leather Diamond Tokens, Framer Motion 12 |
| Integrations | EmailJS Browser API, Lucide Icons |
| Performance | Route-level code splitting (React.lazy), requestAnimationFrame throttled mouse listeners, compositor-only transforms for 60 FPS |
# Clone the repository
git clone https://github.com/mananjani2102/Portfolio.git
# Navigate into project directory
cd Portfolio
# Install dependencies
npm install
# Start development server
npm run devApplication will run locally at http://localhost:5173.
| Command | Action |
|---|---|
npm run dev |
Launch Vite dev server with Hot Module Replacement |
npm run build |
Compile optimized production bundle to dist/ |
npm run preview |
Preview production build locally |
npm run lint |
Run ESLint checks across project files |
| Platform | Direct Link |
|---|---|
| Live Portfolio | manan-jani.netlify.app |
| manan.jani.cg@gmail.com | |
| linkedin.com/in/manan-jani-1a22443a3 | |
| GitHub | github.com/mananjani2102 |
| X (Twitter) | x.com/Mananjani2102 |