text-3xl text-zinc-950text-zinc-50 font-medium
Shubham Khade
Creating with code. Small details matter.
Overview
Social Links
About
Front-end developer with 3+ years of professional experience building animation-driven, performance-optimized web applications using Next.js, React, TypeScript, Tailwind CSS, and GSAP. Specialized in complex scroll-based animation systems, real-time interaction patterns, and CMS-driven architectures using Payload CMS. Strong understanding of render loops, animation timelines, performance trade-offs, and lifecycle management. Actively extending this foundation into Three.js and 3D web visualization for design, automotive, and visualization-focused domains.
Stack
Experience
Inline 3 Media Solutions
Current Employer- Designed and built 30+ production-grade websites with animation-first UX.
- Created GSAP-powered animation systems including pinned scroll sections, parallax effects, timelines, and smooth scrolling.
- Applied render-loop thinking for performance stability.
- Built CMS-driven frontends using Payload CMS, WordPress, and Shopify.
- TypeScript
- Next.js
- React
- GSAP
- ScrollTrigger
- Three.js
- Payload CMS
- Tailwind CSS
- WordPress
- Shopify
Education
Projects(4)
Role: Three.js Developer
- Interaction System: Architected a Raycasting system utilizing Normalized Device Coordinates (NDC) to map 2D DOM events to 3D precision inputs.
- Camera Architecture: Implemented linear interpolation via GSAP to manage complex camera state transitions (Position + LookAt quaternions), creating cinematic "Director Mode" focus effects.
- Mobile Optimization: Addressed mobile GPU constraints by dynamically capping
devicePixelRatioand managing material precision.
- Three.js
- TypeScript
- GSAP
- Vite
- Raycasting
- Linear Algebra
Role: 3D Graphics Engineer
- Visual Fidelity: Achieved photorealism through Physically Based Rendering (PBR) workflows, utilizing HDRI environment maps and custom material properties (Clearcoat, Transmission).
- Post-Processing Pipeline: Implemented a custom rendering pipeline with Bloom, Tone Mapping (ACESFilmic), and Depth of Field to simulate cinematic camera lenses.
- Performance: Optimized high-poly automotive assets using Draco compression and implemented texture atlas techniques to reduce draw calls.
- Three.js
- GLSL
- WebGL
- PBR
- Post-Processing