Abdullah Bin ZiadAvailable for new projects

Portfolio System Rebuild — Soft UI, Hard Clarity

Rebuilding a developer portfolio as a scalable content system with soft surfaces and case-led storytelling.

Product Design, published , updated May 10, 2026. 5 min read.

A portfolio is not a dump of repos. This rebuild treated the site as a guided story: who I am, what I ship, and why someone should trust the next project to me.

Challenge

  • Hard borders and generic layouts felt dated
  • Content lived as one-off pages instead of a reusable system
  • Mobile clarity lagged behind desktop polish

Approach

We defined soft surface tokens, a feature-first folder structure, and mock → service → UI data flow so content could grow without redesigning every card.

  • Elevation through blur, light, and shadow — not 1px borders
  • Semantic light/dark tokens for one component set
  • Case studies and projects as first-class content types
  • Sticky rails and intentional motion for hierarchy

Results

The first viewport now answers name, craft, and next step. Contact and booking stay one click away, and new case studies plug into the same system.

Topics: Portfolio, Design System, UX

All case studies
Portfolio System Rebuild — Soft UI, Hard Clarity | Abdullah Bin Ziad