← All work
2026-10Private9719…e52
Portfolio for a performance-marketing consultant
A Figma design shipped pixel-perfect.
Figma to production · Next.js 16 · TypeScript · Tailwind CSS v4 · Motion
Shown anonymised until the client agrees to be named.
Redacted screenshots below
The problem
A consultant had a finished Figma design: a long homepage, six case-study pages, and springs and hover states specified in the prototype. The site had to match it exactly at every width and stay easy to update.
What I built
- Matched the Figma frame to the pixel at 1600px: a 13,312px page with every section at its Figma coordinate.
- A one-design-pixel unit, min(0.0625vw, 1px), lets the hero and feature layouts scale with the viewport from 1024px up and flow normally below.
- Motion uses the spring values from the prototype file itself and turns off under reduced motion.
- All copy, links and case studies live in typed content files, so the client changes text without touching layout.
How it holds up
- Six case-study pages from one template, prerendered at build.
- Built on Next.js 16 with Tailwind CSS v4.
If you're building something similar
- Read motion values out of the prototype file instead of matching them by eye.
- Separate content from layout before the first copy change arrives.
signed Muhammad Umer Khan · sha256:4370…a70 · signed the way the society platform's gate passes are
Free 30-minute build audit
Get in touch to start building yours.
Bring the idea or the workflow. In 30 minutes you get what I would build first and how I would prove it works. NDA before the first call.
calls 2pm to 11pm PKT · reply within 24h · WhatsApp +92 343 2187868