This Site
I needed a portfolio that proves the thing it claims — that I design and build. So the site itself is the case study: an editorial system I designed, then shipped in code, in two languages.
- Role
- Design · Front-end build · Internationalization
- Timeline
- Ongoing · 2026
- Live
- Visit site
A designer who builds needs proof that proves it
Most designer portfolios show pictures of work; they rarely demonstrate the build. A static page can claim "I code" but never shows it, and for a designer-developer that gap is the whole story left untold. I also wanted the site to speak to my audience in both of its languages — English and Arabic — natively, not as a bolt-on translation. So the brief to myself was strict: make the site itself the evidence — bilingual, fast, accessible, and visibly engineered — without it ever looking like a template.
Make the medium the message
I treated the site as a product, not a brochure: one design system, shipped in code, carrying two languages and a real motion and accessibility layer — every decision visible in the thing you're using.
- Designed a warm editorial system as design tokens — paper, ink, and a single Deep Teal accent — with a warm dark mode done by swapping CSS variables, not a second set of styles.
- Built it bilingual from the foundation: English and Arabic via next-intl, full right-to-left through logical CSS properties, with the Arabic faces (Amiri, IBM Plex Sans Arabic) swapped in by direction and Latin tokens bidi-isolated.
- Kept motion restrained and honest — transform/opacity only, a card-to-case-study shared-element transition — and gated every movement behind prefers-reduced-motion.
- Made performance and accessibility build gates, not afterthoughts: self-hosted fonts with no layout shift, semantic landmarks, AA contrast, full keyboard paths, and a Lighthouse ≥95 budget.
- Sweated the details that signal craft: per-page metadata, localized Open Graph images (with an embedded Arabic font so the Arabic card renders true), a command palette, and a monospace micro-label system as the through-line.
The proof is the page you're on
The portfolio now argues its own case: it's the same site in English and Arabic, it reads and moves the same in both directions, and it's built to a strict performance and accessibility budget. Instead of telling visitors I design and build, it shows them — the medium is the evidence. It's also a foundation: new case studies drop into the same system, in both languages, without redrawing anything.
- Next.js (App Router)
- React 19
- TypeScript
- Tailwind CSS v4
- Framer Motion
- next-intl
- Vercel