All work

Design Dynamo

A portfolio for a Riyadh graphic and web designer that behaves like Photoshop — React with advanced animations, an Express + PostgreSQL backend for live reviews, and EmailJS for enquiries.

Status
Live
Stack
Node · React · PostgreSQL · Express
Visit site
Design Dynamo — screenshot 1 of 1

11

artboard sections on the home page

2

languages, with a full Arabic RTL layout

Problem

  • A designer's portfolio is itself the product: it had to prove craft at first glance, not just list work.
  • Clients needed to browse case studies, services and pricing, leave reviews and get in touch — in English or Arabic.

My role

  • Designed the interaction model and built the whole site end to end: front end, backend and deployment.
  • Turned the brand idea — 'every section is a layer' — into a working Photoshop-style interface.
  • Built the animation system, the bilingual RTL layout, and the reviews and contact flows.

Architecture & key decisions

  • React front end: every section is an artboard, with a layers panel that tracks scroll position and shortcuts to jump between sections.
  • Express API on PostgreSQL for client reviews, shown live on the home page and on each case study.
  • EmailJS for project enquiries straight from the site, with no mail server to run.
  • One codebase for English and Arabic: a mirrored RTL layout, not just translated text.
How it's builtA request, from the visitor's screen to the data

  1. Visitors

    Desktop & mobile

  2. App

    React

  3. API & server

    ExpressNode

  4. Data

    PostgreSQL

  5. External services

    EmailJS

Challenges

  • Rich, scroll-driven motion — horizontal panning, a logo that builds as you scroll, misregistration hovers — while staying fast on phones.
  • An editor-like UI that still reads as a website for visitors who have never opened Photoshop.

Results

  • Live at designdynamo.art on laptop, tablet and phone.
  • Case studies, a 66-piece filterable archive, services, pricing, reviews and contact in one cohesive experience.

Stack

Used for: Backends and REST APIsUsed in: TWLM - POS, Scmborba, Design DynamoUsed for: TWLM web apps and dashboardsUsed in: TWLM - POS, Design Dynamo, Portfolio WebsiteUsed for: TWLM's main database, via PrismaUsed in: TWLM - POS, Design Dynamo, EIMSUsed in: Scmborba, Design DynamoUsed in: AATourism, Scmborba, D’Ocean Fisheries, Ain SaasUsed for: Contact and enquiry emails without a mail serverUsed in: Design Dynamo