HashirWebX — Portfolio & Agency Website
A cinematic, award-style personal portfolio and agency website featuring scroll-driven GSAP animations, WebGL effects, and a luxury dark aesthetic.
About the Project
HashirWebX is my personal brand website — built to represent my craft as a frontend engineer who specializes in high-performance, visually striking web experiences.
The brief I gave myself: build something that feels like it belongs on Awwwards. Every scroll interaction, every transition, and every micro-animation was designed to communicate one thing — attention to detail at every level.
Motion as a Design Language
Most portfolios show work. This one demonstrates it. GSAP ScrollTrigger drives the entire scroll experience, with Lenis providing buttery-smooth scrolling physics and Three.js powering the WebGL canvas elements.
The result is a site that doesn't just tell clients what I do — it shows them, in real time.
GSAP & ScrollTrigger Architecture
Every animation on the site is orchestrated through a centralized GSAP timeline system. Section reveals, text splits, image parallax, and cursor interactions are all coordinated — creating a cinematic flow from hero to footer.
Performance was a core constraint. All animations use will-change and GPU-composited transforms to maintain 60fps even on mid-range devices.
Lenis Smooth Scroll Integration
Lenis was integrated at the root level to replace native scroll with a physics-based interpolation system. This creates the signature "fluid" feel that makes the site feel premium rather than just functional.
Lenis syncs perfectly with GSAP ScrollTrigger through RAF (requestAnimationFrame) loop integration — no jank, no desync.
Three.js & WebGL Elements
A custom Three.js canvas scene is embedded in the hero section, featuring dynamic mesh geometry and shader-based effects that respond to mouse movement. This adds visual depth and interactivity that pure CSS/GSAP cannot achieve alone.
A Portfolio That Earns Clients
HashirWebX isn't just a showcase — it's a client acquisition tool. Every section is designed to build trust, demonstrate technical authority, and end with a clear call to action that converts visitors into conversations.
What This Project Represents
This site is the highest expression of my current craft. It combines React architecture, TypeScript discipline, advanced animation engineering, and intentional visual design into one cohesive product. It's the work I'm most proud of — and the benchmark I build everything else against.
