Interactive WebGL Portfolio with Scroll-Driven StorytellingInteractive WebGL Portfolio with Scroll-Driven Storytelling
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Barath's avatar
Barath Kumar
• 1d
I gave my portfolio a proper upgrade, and honestly, this was the most fun I’ve had building something in a long time.
Instead of a regular scroll-down page, the site is a story told through a living sky. As you scroll, the sky shifts through different moods, with clouds, stars, aurora, floating islands, a little entity that follows along, and drifting particles. There isn’t a single image behind it. The entire sky is one hand-written WebGL fragment shader, drawn procedurally, with no Three.js or any 3D library.
What’s inside
🌌 The sky: Raw WebGL with a custom shader. Each section has its own sky state, the entity moves on springs, resolution adapts to the device, and it respects reduced-motion and Save-Data settings.
🎬 Scroll storytelling: GSAP + ScrollTrigger power a project stack, a route that draws itself as you scroll, an About statement that lights up word by word, stack rows that uncover, and a nav that tracks where you are. Lenis keeps wheel scrolling buttery smooth, while touch scrolling on phones stays native.
🎯 Details I obsessed over: I recreated Emil Kowalski’s easing curves with GSAP CustomEase so JavaScript animations feel identical to the CSS ones. Button presses, hovers and the mobile menu use pure CSS transitions and keyframes.
🎨 Design: Plain CSS with a token file and one stylesheet per section, with no Tailwind and no CSS-in-JS. Typography uses the Archivo variable font, with its width axis doing compressed titles, normal body text and expanded labels. Icons are by Phosphor, and screenshots are WebP, with lighter 800px versions for phones.
📬 Enquiries: The contact form runs on Web3Forms, and falls back to a pre-filled mailto: if no key is set.
Tech stack React 19 · Vite 8 · JavaScript (ES modules) · GSAP 3 (ScrollTrigger, CustomEase) · Lenis · Raw WebGL/GLSL · Plain CSS · Archivo Variable · Phosphor Icons · Web3Forms · oxlint · Vercel
Runtime dependencies are just React, React DOM, GSAP, Lenis, the font package and Phosphor. I kept it lean on purpose.
👉 See it live: https://barath-freelancing.netlify.app/
Got a project that deserves a little more wow? Let’s build it together. 🚀
Completed work
Interaction DesignReact Native DevelopmentWeb DevelopmentReactViteWeb DesignportfoliowebsitedevelopmentGSAP
Timothy's avatar
Timothy Exodus
pro
• 13h
A portfolio as a story told through a living sky is such a lovely concept. Hand-writing the WebGL fragment shader instead of reaching for Three.js is real craft, and respecting reduced-motion and Save-Data shows the kind of care clients notice even if they can't name it....
Barath's avatar
Barath Kumar
• 8h
I'm glad you liked the concept! Creating the sky and making the scroll animations feel smooth and connected was definitely an interesting challenge.
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started