KH
Open navigation menu
Back to work
The Syrian eagle emblem above a connected geographic project network

Interactive map · CMS ownership

Bab al-Sham

A bilingual, CMS-driven public platform with localized content, searchable projects, and an interactive geographic explorer.

Visit product

Role

Sole product developer across the Next.js frontend and the complete Directus content schema.

Scope

Responsive D3/GeoJSON map and geographic project exploration · Localized routes, content, slugs, metadata, canonicals, and language alternates · Typed Directus queries, filtering, search, media, and contact workflows · Directus collections, fields, relations, translations, permissions, and file storage

Team

Sole product developer, working with project stakeholders and design input.

Challenge

Turning complexity into legible state.

Challenge

The interactive map had to fit diverse screens, translate geographic labels, synchronize selected governorates with the URL, and drive filtered CMS results without becoming fragile or inaccessible.

Approach

I used D3 Geo and GeoJSON projections with fitted extents and measured containers, then connected map state to localized URLs and Directus filters. Keyboard interaction, motion, project cards, and responsive states were designed as one system.

Outcome

Visitors can explore projects geographically and share a filtered location through the URL, while editors can update content, translations, relations, and media without frontend code changes.

Selected contributions

  1. 01Built the interactive geographic explorer end to end.
  2. 02Owned the complete Directus schema and permission model.
  3. 03Implemented Arabic RTL and English LTR routing and presentation.
  4. 04Added localized SEO metadata, Open Graph data, canonical URLs, and language alternates.

Stack

Next.jsReactTypeScriptTailwind CSSnext-intlDirectusD3 GeoGeoJSONFramer Motion

Repository snapshot

128 of 132 commits in the inspected main-branch history were attributed to my identified Git identities.

Continue exploring

Mushaf Eqrra public product presentation showing its Quran reader on desktop and mobile
01AI-assisted recitation · Advanced Quran reader

Mushaf Eqrra

Frontend integration for live recitation sessions, browser audio, verse-level feedback, and a six-language Quran reader.

View case study
Abstract blue modular system representing Univerta's shared frontend architecture
02Education platform · Frontend architecture

Univerta

Broad admin and student workflows, plus an Nx dependency cleanup that restored hot reload and improved a controlled Lighthouse run from 78 to 92.

View case study
Abstract council of connected learning participants around an open book and audio waveform
03Learning operations · Real-time administration

Mutoon Admin

An administration platform built from its initial setup, including live hearing councils, GraphQL workflows, attendance, and certification.

View case study