The site you are on right now: a hand-built, interactive developer portfolio with a living sky, a WebGL cursor, synthesized sound, a real map and a smooth light and dark theme.
A portfolio should show how someone builds, not just say it. This site is my own product: every page, animation, sound and interaction is built by hand with React, with no UI kit and no CSS framework. It holds my story, projects, experience, skills and contact details, and the way it looks, moves and sounds is itself a demonstration of the work I do. It is the main project on this page because you are using it right now.
Most developer portfolios look alike. I wanted one that is memorable and personal, yet still fast, accessible and easy to navigate. That meant combining heavy ideas such as WebGL fluid, canvas art, 3D cards, real maps and audio without hurting performance, losing keyboard access or breaking on mobile.
A layered SVG sky with drifting clouds, a generative rainbow and a clickable mascot welcomes the visitor.
A gooey navigation pill, a Ctrl or Cmd + K search and a mobile menu reach every page quickly.
The About page is a grid of interactive cards: a map, a drum pad, a flag, a chai counter and more.
Projects open into in-depth case studies; skills flip like cards to reveal how I use each tool.
Experience, education and certifications sit on a timeline with real logos.
The contact page offers email, links, a downloadable resume and a pre-filled message form.
Splash cursorA WebGL2 fluid simulation with bloom and low, medium and high quality tiers follows the pointer.
Generative rainbowA canvas of dashes on concentric arcs, steered by the mouse, with a configurator panel.
Gooey navigationA liquid-style pill with themed palettes for dark and light mode.
Masked headingsPage titles use a GSAP-driven spotlight mask over textured fills.
Tilted cardsSkill cards tilt in 3D with glare and shadow, then flip to reveal a note on the back.
Real mapA MapLibre map on CARTO tiles draws a line from Ahmedabad to the visitor's location.
Synthesized soundPops, chimes, whooshes and four drum sounds generated live with the Web Audio API.
Themed everythingA light and dark theme that animates smoothly across every color at once.
Problem. Swapping CSS variables normally snaps colors instantly and breaks gradients.
Solution. Every color token is registered with @property so the browser can tween them, animating gradients, fills and borders together.
Problem. Sound effects add weight and licensing questions.
Solution. The Web Audio API synthesizes each sound from oscillators and gain envelopes, with a global on and off switch.
Problem. Map services often need paid keys and tokens.
Solution. MapLibre GL with free CARTO basemaps, a theme-aware style and a simple distance calculation, with a "you are right here" case for nearby visitors.
Problem. Fluid simulation and canvas art can drop frames.
Solution. Quality tiers for the simulation, passive scroll listeners and cleanup of every listener on unmount keep it smooth.
Problem. A tiny site does not need a full router.
Solution. A hash map resolves pages, falls back to About, scrolls to the top and keeps the nav highlight correct.
Problem. Running a server only for one form is overkill.
Solution. The form builds a pre-filled mailto message, and the resume is a direct PDF download.
React 19 with Vite 8 and the React plugin, using functional components and hooks.
Hand-written CSS with design tokens, no framework, and a dedicated theme-transition layer.
GSAP, Framer Motion, CSS keyframes and canvas for different jobs.
WebGL2 shaders, 2D canvas, inline SVG and canvas-confetti.
A small SoundController class over the Web Audio API, wrapped in a React context.
MapLibre GL with CARTO tiles and an IP-based visitor lookup.
Theme and sound contexts with local storage persistence.
Oxlint for linting, Vite for fast builds, and Git for version control.
| Route | Page |
|---|---|
| / | Story, interactive cards, map and drum pad |
| /projects | Showcase cards and in-depth case studies |
| /experience | Timeline, education and certifications |
| /skills | Flip cards grouped by category |
| /contact | Email, links, resume and message form |
The portfolio is a complete, working product that I designed, built and maintain alone. It shows the full range of my front-end work: architecture, design systems, animation, graphics, audio, accessibility and performance, all in one codebase of 14,000+ lines. Most importantly it is the proof behind everything else on this site.
Several interactions, such as the sound design, the rainbow configurator and the smooth theme switch, are rebuilds inspired by joshwcomeau.com, written in my own code as a way to learn the techniques.