This Portfolio — Design System & Build

I do four kinds of work — frontend, herbal formulation, Quran teaching, and design. Most multi-craft portfolios read as four disconnected mini-sites. The design problem was coherence: one person, one voice, four rooms.

One narrative thread — learner, maker, teacher — and one design language across every page. The warm paper palette, the serif display face, and the olive-and-clay accents carry through the developer case studies and the herbal catalogue alike.

Dark mode is designed rather than inverted: shadows are replaced by borders and surface tints, because box-shadows die on dark backgrounds.

Every colour, duration, and shadow exists once, as a token. Components consume tokens; nothing is hard-coded. Changing the brand accent is a one-line change.

Motion is compositor-only — transform and opacity, never layout properties — and every animated component ships with a reduced-motion path, not as an afterthought but in the same file.

The page transition you may have just seen (the project card image becoming this page's hero) uses the View Transitions API with a graceful fallback for browsers that lack it.