The art of
technical architecture.
I am a developer who views code as a medium for creative expression. Based in Pakistan, I bridge the gap between complex engineering and refined digital aesthetics.
My journey began in structural engineering before finding a digital canvas. This background instills a "foundation-first" philosophy in my development process. Every line of TypeScript is a structural beam; every WebGL shader is a play of light on a physical surface.
I specialize in building interfaces that don't just function, but feel. I believe luxury is found in the invisible details—the timing of a transition, the weight of a font, the precision of a layout shift.
Technical Vocabulary
React & TypeScript
Architecting scalable, type-safe systems with a focus on atomic design and reusable logic.
WebGL & Shaders
Pushing the boundaries of the browser with performant 3D experiences and custom GLSL.
Visual Design
Crafting high-end editorial layouts with a focus on typography and negative space.
Interactive Motion
Choreographing digital experiences that respond to user intent with fluid, physics-based motion systems.
Core Vitals
Obsessive optimization for zero-latency interactions and ultra-low load times.
Principles
How I make decisions
A small set of rules that keeps the work consistent—across performance budgets, visual systems, and long-lived codebases.
01
Clarity over cleverness
Readable architecture scales teams. If it can’t be explained simply, it’s not stable enough to ship.
02
Performance is a feature
I treat Core Web Vitals as product requirements—measured, budgeted, and defended during iteration.
03
Systems, not screens
I build design tokens, primitives, and patterns first—then assemble pages as compositions, not one-offs.
04
Motion with intent
Animation must clarify hierarchy and state. Ambient motion is restrained; transitions earn their presence.
Toolbox
Next.js / React
App Router
TypeScript
Strict-first
Tailwind CSS
Tokens + utilities
Framer Motion / GSAP
Interaction
Three.js / WebGL
Immersive
Vercel / Edge
Delivery
Signals
What “good” looks like
Evidence that the work is robust: measurable, repeatable, and comfortable to maintain after launch.
Core Web Vitals
Performance
Budgets defined early; regressions caught before release. Fast-first decisions throughout the build.
Accessible by default
A11y
Semantic structure, keyboard flows, contrast, and motion preferences built into the system—not bolted on.
Maintainable delivery
Engineering
Type safety, conventions, and components that age well—so future updates remain confident and quick.
Lead Creative Developer
2021 — PRESENTStudio Void, New York
Leading the development of award-winning digital experiences for luxury brands. Pioneered a custom WebGL framework that reduced production time for 3D portfolios by 40%.
Senior Front-end Engineer
2018 — 2021Prism Interactive
Focused on React ecosystem scaling and design system implementation. Built a shared component library used across 12 high-traffic media properties.
UI Engineer
2016 — 2018Monolith Labs
Began the transition from architecture to the web, applying structural design principles to user interfaces and complex data visualization tools.