A portfolio gets judged by the people it was built to impress, which makes it a uniquely unforgiving brief: every shortcut in it is a claim about how you work.
End-to-end: research, flow architecture, high-fidelity UI, design system contribution.
Frames That Tell The Truth About The Platform
−64%: Image payload
Scope, Constraints & Reality
Every line came from specification, review and rejection, not hands-on code, which shaped the process more than any technical constraint did.
The generated starter arrived with a light/cream identity and its own defaults. Inverting it was the first real decision, and it cascaded through every token in the system.
No server means no server-side secrets and no runtime image processing. Performance had to be solved at build time or not at all.
T-Mobile, Standard Bank and Elevance screens are real product. Nothing could be invented, and nothing could be represented as something it wasn't.
The brief, the constraint of no coding background, and the inversion from the generated starter's light identity to the shipped dark one.
Colour swatches bound to live variables and real type-style specimens, not a picture of the system but the system itself.
Home, case study and canvas, rebuilt in Figma from the same tokens the shipped site reads.
Three decisions that needed a second look, and the reason none of the mistakes behind them threw an error.
Design Decisions
Frames That Tell The Truth About The Platform
Every case-study hero originally sat in the same desktop browser chrome with a fabricated URL, which put Standard Bank's iOS app, status bar and home indicator included, inside a browser window with a made-up address bar. Frames are now device-true and no URL is invented. Elevance nearly got mis-assigned the other way: its screens are tall and look mobile by aspect ratio, but they're full-page desktop captures with the nav and footer visible.
One Accent, Three Roles
Each case study carries its client's colour. The naive version broke immediately: T-Mobile magenta passes contrast as a fill but fails as text on the dark background, and white fails on top of the lighter accents. So each accent is three tokens rather than one, verified against 4.5:1 instead of eyeballed. A colour token is a role, not a value.
Animation Mapped To The Wrong Range
The hero screens drift apart on scroll. The first build was technically working and effectively invisible, and the cause was the input range, not the distance: the drift was mapped from where the hero enters the viewport, but the hero is already on screen at load, so readers began halfway through and only saw the back half of the motion. An animation nobody notices is more often mapped to the wrong range than tuned to the wrong output.
Impact
54.4MB to 19.8MB across 238 images via WebP served through <picture>, with the originals kept as fallback so older browsers get a working image rather than a broken one. Other Work's initial load dropped 4073KB to 240KB.
The WebGL hero already checked for weak hardware and reduced-motion, but the check ran after the library had downloaded. Moving it behind a dynamic boundary means the devices that fall back to a CSS gradient no longer fetch roughly half the homepage payload.
Every section title and project name had been a styled div, leaving screen-reader users no outline to navigate and search engines a flat wall of divs. Rendering is pixel-identical: the fix was semantic, not visual.