§ 01 Problem
A fashion designer graduating with a body of real work — textile patterns, fashion illustrations, design croquis — and nowhere to show it: the pieces lived as raw photos in a zip file. The brief was a portfolio where the work is the hero and the web design disappears behind it. And unlike every other project on this page, the acceptance test wasn't my own judgment — it was a real client saying yes or no.
§ 02 Approach
- A strict editorial design system where the UI stays monochrome so the work carries all the color: Playfair Display for serif headings, Inter for labels, border-radius zero everywhere, no drop shadows — depth comes from 1px hairlines and tonal layers.
- An asset pipeline instead of manual uploads: her 124 raw pieces went through sharp into color-preserved, 2000px long-edge WebP under public/works, and a typed content/works.ts — regenerated by script from the files on disk — is the single source of truth the whole site renders from.
- One motion vocabulary on GSAP 3.15 + Lenis: SplitText line reveals for headings, clip-path wipes for editorial images, one pinned scroll set-piece per page — and the 'Seçki' page renders featured pieces on a scroll-driven 3D rotary ring. Nothing auto-rotates, and prefers-reduced-motion collapses every set-piece into a plain vertical layout.
- Real client feedback treated as requirements, not noise: the hero felt too dark, so it became a crossfading slideshow leading with a lighter image; gallery cards clipped on short viewports, so their height became viewport-responsive; the category dial went through two redesigns before she approved it.
- A fixed verification bar before every deploy: typecheck, lint and build green, every route returning 200, zero console errors and zero failed image loads — checked headlessly, not eyeballed.
§ 03 Outcome
Live at skdesign.online on Vercel: home, a filterable gallery of all 124 works across her four categories (Desen · Çizim · Tasarım · Materyal), the Seçki showcase, and an about page. The durable lesson was that client work inverts the definition of done — 'done' stopped being when I was satisfied and became when she was.
124
real works shipped through the sharp → WebP pipeline (content/works.ts)
0
console errors / failed image loads across all routes at deploy check
