Interactive 3D Developer Portfolio

Immersive personal web experience built with Three.js, React Three Fiber, and GSAP

An interactive portfolio website showcasing modern web engineering, real-time 3D scenes, physics-based simulations, and smooth scroll-driven animations.

Live Demo: https://parthosarothipaik.netlify.app/

---

Overview

Partho's 3D Portfolio combines cutting-edge WebGL graphics rendering with responsive UI design, integrating custom 3D character avatars, physics engines (Rapier/Cannon), and cinematic camera transitions controlled via GSAP timeline sequences.

Experience the live interactive website at https://parthosarothipaik.netlify.app/.

All 3D assets are optimized with Draco compression for quick page hydration, providing fluid 60+ FPS navigation on both mobile and desktop screens.

---

Key Features

• Real-Time 3D Rendering — Interactive scenes powered by Three.js and @react-three/fiber featuring ambient lighting, custom materials, and shadow maps.
• Cinematic Scroll Animations — Timeline-synchronized transitions and camera path movements orchestrated with GreenSock (GSAP).
• Physics & Character Controller — Real-time physics simulation using @react-three/rapier with collision boundaries and interactive cursor effects.
• High-Speed Asset Pipeline — Draco-compressed 3D mesh geometry (.glb) and WebP texture compression for fast asset streaming.
• Cross-Device Performance — Adaptive pixel ratio scaling and responsive viewport calculation ensuring smooth frame rates on mobile hardware.
• Modular Component Architecture — Clean separation of 3D canvas components, HTML overlays, and reactive state stores.

---

Tech Stack

Layer	Technology	Purpose
UI Framework	React 18	Reactive component tree & lifecycle management
Language	TypeScript 5.5	Strict type checking & autocompletion
3D Rendering	Three.js & R3F	WebGL canvas, camera, shaders & scene graph
Scene Utilities	@react-three/drei	Helper abstractions, loaders & environment presets
Physics Simulation	@react-three/rapier	Rigid body dynamics & collision detection
Animations	GSAP 3	Smooth scroll triggers & micro-interactions
Build Tool	Vite 5	Lightning-fast development server & asset bundler

---

Getting Started

Prerequisites

• Node.js: >= 18.x
• npm: >= 9.x

Installation & Development

1. Clone the repository:

   git clone https://github.com/CodeByPartho/partho-3d-portfolio.git
   cd partho-3d-portfolio

2. Install dependencies:

   npm install

3. Start local development server:

   npm run dev

   Open http://localhost:5173 to explore the 3D scene.

4. Build for production:

   npm run build

   The compiled static assets will be ready in the dist/ directory.

---

License

This project is licensed under the MIT License.

---

Built by Partho