Note on Design & Code Study:
This project is an independent technical recreation and code study of Nikhil Dhakad's creative portfolio design. Built 100% from scratch in Next.js 15 (App Router), Three.js & React Three Fiber, and GSAP by Zaheer Khan as a deep-dive engineering exercise to master WebGL shaders, particle physics, 3D model orchestration, polygon clipping math, and zero-latency audio pooling.All source code, performance pipelines, video synchronization engines, and case study content are custom-engineered from the ground up.
🔗 Live Demo: https://zaheerkhan-portfolio.pages.dev
🎨 Design Inspiration & Original Concept: Nikhil Dhakad
- 78,631 Dynamic Particle Points: Real-time WebGL canvas sampling high-contrast typography bitmap.
- Physics Simulation: Distance-squared repulsion from cursor, smooth velocity damping, spring return elasticity, and custom GLSL vertex point shading.
- Staggered Social Tooltips: Character-level split text reveals with interactive hover sound effects.
- Organic SVG Bottom Wave Morphing: Custom SVG clip-path dynamically morphing curve geometry on scroll with GSAP ScrollTrigger.
- Interactive Smudge Mask Reveals: Two-tier cursor smudge mask revealing contrasting philosophies.
- What I Do Dynamic Slider: 13 categorized rolling capability cards (SaaS development, AI workflows, WebGL, CMS, APIs, etc.) with horizontal drag mechanics.
- Circular Testimonials Dial: Arc mathematics (
sin/cos) arranging reviewer avatars on a dynamic radius dial with autoplay rotation and modal review inspection. - 3D Marcus Aurelius Bust: Three.js & React Three Fiber GLTF model with real-time mouse/scroll parallax tracking, dual-lighting, and interactive sunglasses overlay.
- Polygon Clipping Slider: Mathematical dual-column split slider with dynamic polygon clipping (
polygon(0% ${100-r}%, 100% ${100-r}%, 100% 100%, 0% 100%)). - Synchronized Video Playback: Parallel left and right video streams with wheel inertia, touch swipe inertia, arrow key snapping, and custom floating
"VIEW"cursor. - 3G-Resilient Stream Engine: Faststart MP4 atoms and optimized WebP fallback assets for instant loading on any connection speed.
- Case Study Deep Dives: Rich project breakdown for 5 featured projects (
staurga,linkryse,patreon,orunk,yappedin). - Parallax Hero Showcase: Scrubbed video/image presentation with SplitText line reveals and metadata specs.
- WebGL Barrel Distortion Gallery: Interactive infinite draggable Three.js canvas texture atlas with custom barrel distortion vertex and fragment GLSL shaders.
- Dual-Split Bottom Nav: Seamless Next/Previous project switcher.
- Morphing Submit Button: Pill-shaped action button smoothly collapsing into a progress bar line, expanding into a circular badge, and drawing SVG status checkmark with signature letter staggers.
- Dynamic Social Tooltips: Staggered center-aligned social tooltips with interactive hover micro-animations.
- Preloaded Audio Pool System: Multi-instance audio pool allowing simultaneous overlapping clicks and hovers without cutting off audio channels.
- Interactive Micro-Acoustics: Tactile
click.mp3on navigation buttons, slider controls, and form submit; gentlehover.mp3on social link interactions.
- WebP Image Compression: All static screenshots and portraits optimized to WebP with 82.6% size reduction (23.7MB → 4.1MB) at quality 95.
- 25-Slice Curtain Page Transitions: Signature DrawSVG stroke overlay combined with 25-column vertical curtain wipe on page routing.
- Lenis Smooth Scrolling: Globally synchronized with GSAP ticker loop.
creative-dev-portfolio/
├── public/
│ ├── 3D/ # Marcus Aurelius GLTF 3D model
│ ├── draco/ # Local Draco WASM decoders
│ ├── fonts/ # Barlow Condensed & Bigger Display Webfonts
│ ├── Images/ # Optimized WebP screenshots, portraits, & texture assets
│ ├── sounds/ # Audio assets (click.mp3, hover.mp3, pop.mp3)
│ └── Videos/ # Project showcase MP4 faststart video loops
├── src/
│ ├── app/
│ │ ├── layout.tsx # Root layout with fonts, smooth scroll, & preloader
│ │ ├── page.tsx # Home page with 78k particle cloud
│ │ ├── globals.css # Global tokens, typography, & custom utilities
│ │ ├── about/page.tsx # Full About page (5 interactive sections)
│ │ ├── contact/page.tsx # Contact page with interactive form
│ │ ├── projects/
│ │ │ ├── page.tsx # Dual-column polygon clipping slider
│ │ │ └── [id]/page.tsx # Dynamic project showcase with WebGL gallery
│ ├── components/
│ │ ├── Navbar.tsx # Rolling text link navigation with audio clicks
│ │ ├── SmoothScroll.tsx # Lenis smooth scroll provider
│ │ ├── TransitionRouter.tsx# 25-slice vertical curtain page transitions
│ │ ├── LoadingScreen.tsx # Number counter preloader with SVG draw
│ │ ├── ParticleCanvas.tsx # WebGL 78k particle cloud engine
│ │ ├── SocialLinks.tsx # Floating social links with hover audio & SplitText
│ │ ├── about/ # MarcusAureliusModel, SmudgeMask, WhatTheySaid, etc.
│ │ ├── projects/ # ProjectsSlider, ProjectGallery (Three.js shaders)
│ │ └── contact/ # ContactForm, ContactFooter
│ ├── data/
│ │ └── projectsData.ts # Metadata, specs, & case study content
│ └── lib/
│ ├── soundEffects.ts # Zero-latency audio pooling system
│ ├── splitText.ts # Custom SplitText utility for line/char reveals
│ └── utils.ts # Utility functions
├── package.json
├── tsconfig.json
└── next.config.ts
- Node.js:
v18.18.0or higher (Node 20+ recommended) - npm or pnpm or yarn
git clone https://github.com/zaheerkhan-dev/creative-dev-portfolio.git
cd creative-dev-portfolionpm installnpm run devOpen http://localhost:4005 in your browser. Fast Refresh / HMR is active for instant real-time updates.
npm run buildGenerates a fully optimized static export in the /out directory, ready for Cloudflare Pages, Vercel, or AWS S3.
| Technology | Purpose |
|---|---|
| Next.js 15 (App Router) | Framework, static HTML generation & server components |
| React 19 | UI components & state orchestration |
| Three.js & React Three Fiber | 3D Marcus Aurelius bust, WebGL particle simulation & barrel distortion gallery |
| GSAP & ScrollTrigger | Scroll animations, SplitText character choreography & SVG path morphing |
| Web Audio API | Zero-latency preloaded audio pooling for sound effects |
| Lenis | Momentum smooth scroll engine |
| Tailwind CSS 4 | Utility styling & responsive layout system |
| TypeScript | Type safety across metadata and 3D scenes |
| Cloudflare Pages | Global edge hosting and static deployment |
MIT License © 2026 Zaheer Khan. Built with passion and attention to detail.