Work

A digital financing-brokerage platform, set up as a 50/50 joint venture between Saudi Azm and the National Housing Company. It connects customers with licensed financing entities across the Kingdom. The Saudi Central Bank (SAMA) granted it a digital brokerage licence in August 2026.

• Financing request journeys built for clarity and trust
• Offer comparison and application tracking
• Secure, accessible Arabic-first UI to fintech standards

A unified service for complaints against lawyers and reports against people impersonating the profession. It protects the profession's integrity and the rights of beneficiaries.

• Submission with documents, from intake to decision
• Quality-control queues, scoring, escalation, audit trail
• Applicant dashboard with live case status

E-arbitration for engineering and construction disputes under the Saudi Council of Engineers, serving ministries, companies and individual engineers.

• Portals for arbitrators, establishments, individuals and experts
• Case filing, hearings and joining as a respondent
• Document exchange and case timeline

Individuals and companies create, manage and e-sign contracts anytime, anywhere, with automated and auditable workflows replacing paper.

• Separate sign-in flows for individuals and companies
• Template-driven contract builder
• e-Signature, approvals and version history

Front-end work on Mirafh (ميراث in Arabic): I built one business module, Estates, from the Figma designs on the portal's shared design system.

• Arabic-first, accessible estates screens
• Built on the portal's shared component library and design tokens
• Front-end only, delivered inside the existing product

A cloud human-capital-management suite covering time tracking, payroll and performance. I shipped new features, fixed bugs and improved performance across three generations of the codebase: AngularJS (1.x), Angular 8 and Angular 14.

• New features in the Payroll and Performance modules
• Bug fixing and performance tuning in the legacy AngularJS code
• Upgrades and refactors through Angular 8 and 14

An e-learning platform that sits alongside the HR suite, so organisations can train their people where they already manage them.

• Course catalogue and learning screens
• Enrolment and learner progress
• Features, fixes and performance work

Core modules of a low-code / no-code automation platform for UAE government and enterprise: form and workflow designers that let business teams build processes without code.

• Designer modules in Angular 16 and PrimeNG
• Reduced initial page load and memory overhead
• Reported PrimeNG defects upstream with reproducers

The CMS behind PenNav and PenTrack indoor positioning for hospitals, universities, malls and airports. Venue teams use it to manage maps and points of interest.

• Floor-plan and POI editing on interactive maps
• Venue, building and floor management
• Node.js and PostgreSQL content APIs

One design system shipped as packages for React, Vue, Svelte, Astro, Angular, React Native and Flutter, plus a Three.js package. Shared core tokens and CSS, 21 themes, and a full set of accessible charts.

• Light, dark and high-contrast × 6 accents × 3 shapes: 21 themes, with 525 WCAG contrast pairs checked in tests
• WCAG 2.2 AA focus and keyboard patterns, RTL and Arabic, skeletons, toasts, dialogs and a DataTable
• Charts: Bar, Line, Area, Combo, Pie, Donut, Scatter, Bubble, Radar, Gauge and Waterfall, plus an organisation chart

Build pages with real Pelagic UI components by drag and drop, or describe what you need in English or Arabic, then export clean React, Vue, Angular or HTML code. Runs entirely in the browser.

• Drag blocks (navbar, hero, pricing, login, KPIs, tables, FAQ…) onto a live canvas and edit their properties
• "Describe it": type a page in English or Arabic, review the suggested blocks, then generate
• Export clean React, Vue, Angular or HTML, or share the page as a link or JSON

Record one action in the browser and get a typed component for React, Angular, Svelte or Astro, plus evidence for every request it makes. Secrets are removed before anything is written.

• Keeps only the API calls the page really makes
• Removes cookies, tokens and passwords
• Tests pass, MIT licence, public repository

An open-source puzzle CAPTCHA that runs on your own server: no third-party tracking and no data leaving your app. 3D-styled puzzles with optional sound, an audio challenge for blind users and 6 themes. Widgets for React, Vue, Svelte, Angular and plain HTML, with verification on Node.js or ASP.NET Core.

• The client is never trusted: puzzles render on the server and the answer is sealed with AES-256-GCM
• Short-lived, single-use, HMAC-signed pass tokens verified on your own backend, like siteverify without the third party
• Everyone can pass it: mouse, touch, full keyboard, a text alternative and an audio challenge for blind and screen-reader users, in Arabic and English with RTL
• 3D puzzle design, optional sound effects and 6 widget themes (light, dark and high contrast) that pick up your own design tokens

A reusable web-component chat widget plus a small Node back end that streams answers from the Claude API, or from local answers when no key is set.

• Streaming answers over server-sent events
• Rate limit, size limits and an origin allow-list
• English and Arabic with RTL

Scans a project for unpinned and compromised dependencies, leaked secrets, end-of-life runtimes, risky AI-agent and MCP settings, unsafe token storage, and Angular, React, .NET, PHP and Python code smells. Every finding gives the file, the line and a concrete fix. On npm and PyPI, with a GitHub Action and SARIF for code scanning.

• Same JSON rules in Go, Node.js and Python, checked against each other in CI
• Flags tokens in localStorage, URLs, logs and MCP configs
• Offline heuristics: a fast first line of defence, not a SAST replacement

• Eight rules, each with a fix hint
• Markdown and JSON reports
• Exit code for CI

• Never copies cookies, tokens or passwords
• axe check for WCAG 2.2 AA per navigation
• TODO markers instead of guessed selectors

• Groups scoped and nested node_modules packages
• Table or JSON output
• Sizes are approximate (from original source text)

• Finds missing endpoints and response keys
• Fails the build when the client drifts
• Ships with a CI workflow

• Ignores problems that were already there
• Least-privilege workflow permissions
• Exit code 1 on new serious issues

• Light and dark values
• Resolves {references} and catches cycles
• No dependencies

• Recognises numeric and UUID ids in paths
• Redacts secret-looking fields
• Unknown routes return the list of known ones

• Self-contained page with search
• Angular and React Router detection
• Heuristic: the README lists what it misses

• Reads the sitemap or the home page links
• Weekly GitHub Actions run with a report artifact
• Exit code 1 on errors

• Zero runtime dependencies: built-in rasteriser, PNG encoder and ICO packer
• Colour, mono and inverse variants of mark, wordmark and lockup stay in sync
• Typed brand.ts tokens so code and assets never drift apart

• RTL and LTR from the same template, with mirrored layout and correct dir/lang
• Table-based inlined HTML plus a plain-text fallback for every language
• Optional SQL upsert seed for apps that store templates in a database

• Scans package.json, .sln/.csproj, go.mod, pyproject, CI workflows, lint configs and .env.example names
• Layered output: one file at the root plus one per workspace, with a marker block so hand-written notes survive
• --check exits 1 when the generated section is out of date; zero runtime dependencies, Node 22

• Five built-in templates: API feature, frontend client, mobile screen, repo workflow, review checklist
• Lint enforces frontmatter, required sections, 200-char descriptions and unique names, failing CI on problems
• Zero runtime dependencies on Node 22 with a tiny built-in YAML frontmatter parser

• Accounts register on --first-run and just log in afterwards; saved tokens and ids flow into later steps as {{vars}}.
• Per-step timing, retries with backoff for flaky steps, readable console report plus JUnit and JSON output.
• Secrets come only from {{env.NAME}} and are redacted everywhere; zero runtime dependencies and a built-in demo server.

• Regex analysers for JS/TS, C# and Go extract exports, controllers, packages and HTTP routes
• Mermaid import graph between modules plus external packages per module
• --since turns git diff into a per-module change digest you can commit and review

• Reports only true duplicates: same selector, property and context.
• Ignores intentional overrides in media, RTL, theme, state and mixin blocks.
• Standard library only, parallel scans, and CI-friendly exit codes.

• Single static Go binary, standard library only
• Checks C# and TypeScript/JavaScript with a heuristic lexer
• JSON report and exit codes make it CI-friendly

A full-stack wellbeing companion: a daily to-do list, mood check-ins, guided meditation with music generated in the browser, and a supportive chat. Arabic first, with English, colour themes and accessibility settings.

• Crisis guidance replaces chat replies when needed
• Meditation sounds are generated live, no audio files
• Self-help only: not therapy and not a diagnosis

Dada is my own business, currently in design and build: a website and mobile app where parents find trusted childcare near them (full-day or hourly nurseries, KG1 and KG2 kindergartens, and babysitters, including mum-to-mum care swaps). There are no payments on the platform: parents and providers agree price and hours directly, and contact details appear only after a request is accepted. The UI/UX case study is on Behance.

• Owner and product lead; UI/UX, front end and back end by me
• Arabic-first, one map for nurseries, kindergartens and babysitters
• Privacy by design: contact details only after acceptance, no payments

Matjari (متجري) is a UI/UX design case study for an Arabic-first mobile app that gives home-based businesses in Jordan a store that feels like a brand: a seller app, a buyer storefront and business tools, with research, competitor review, user journey, components, dark mode and every state designed. The full case study is on Behance.

• Seller app, buyer storefront and business tools
• User research, competitors, user journey, components, dark mode and states

A demo of the real-time front-end work I do: an Angular 22 app (Signals + RxJS) on a Node WebSocket server that streams simulated detections. Camera tiles draw tracked people and vehicles with bounding boxes and trails on canvas, alerts arrive live with severity and filters, KPIs and charts update every second, and two operators can chat and notify each other in real time. The connection reconnects with backoff. Detections are simulated: it is a demo, not a production analytics system.

• WebSocket stream in RxJS with reconnect, backoff and latency ping
• Live alerts and tracking boxes drawn on canvas and SVG
• Two-user chat with presence, typing, read receipts and notifications
• Unit tests plus a two-browser Playwright end-to-end test

My own habit and focus app for developers and makers. Press start for five honest minutes and keep going if the flow finds you. Log what you shipped, keep your streak, and watch a little 3D fish grow into a whale.

• 5-minute start timer that invites you to keep going and tracks the extra flow minutes, plus a tagged daily ship log
• Streaks with a GitHub-style heatmap, stats for minutes started vs flowed, and a Three.js ocean where the fish levels up
• 100% custom UI kit (accessible combobox, switch, tabs, dialog, toasts), 4 palettes, light/dark, a11y panel, EN + AR RTL, local-first with JSON export

A playful puzzle game for developers, built as a sibling of 5min. Start a 5-minute refresh, solve bite-sized levels on a kid-game map, earn stars and watch Pip the fish grow into a 3D whale.

• 100 dev puzzles in 10 worlds: code order, bugs, Flexbox, Grid, CSS selectors, regex, git, async, TypeScript and Big-O
• 8 data-driven puzzle engines checked by real evaluation (RegExp, querySelectorAll in a sandbox, live layout comparison, a git model), never eval; tests prove all 100 answers
• Kid-game level map with stars, hints, streaks and a 5-minute session, keyboard-friendly reorder, EN + AR RTL with code kept LTR, light/dark, a11y

A Fastify 5 + PostgreSQL API for 5min Refresh: accounts and guests, offline-first progress sync, streaks, XP and speed leaderboards streamed over SSE, and a daily challenge. Ships with OpenAPI docs, Docker, CI and a one-click Render blueprint.

• Cookie sessions done right: argon2id, HttpOnly + Partitioned cookies, session rotation, CSRF tokens and strict CORS
• Offline-first sync that merges conflict-free (max stars, best time) and never awards XP twice, with ETags and anti-cheat checks
• Zod schemas drive validation and OpenAPI 3.1, with 89 tests at 94% coverage and a real Postgres run in CI

My own Arabic-first learning app for the whole family. Kids grow a 3D garden as they learn Arabic letters, short surahs, maths and first words in English, Turkish and German. Adults get a calmer track with grammar, mental maths, streaks and stats.

• Letter tracing on canvas with stroke guidance, positional letter forms, harakat drag-and-drop blending, adaptive maths with a speed mode, and flashcards with spaced repetition
• Quran text bundled verbatim from Tanzil and checked byte-for-byte against Quran.com, with hide-and-recall memorisation, Alafasy recitation and simplified meanings that are clearly labelled
• 100% custom accessible UI kit (combobox, switch, tabs, dialog, toasts), Arabic RTL + English UI, kid and adult profiles, parents' corner with a hold-to-open gate, all local with no AI

A bilingual tourism portal for Yanbu’s three regions: the sea, the industrial city and the palm valley. Rebuilt with a hand-made design system, full Arabic RTL and accessibility settings.

• Custom Angular UI kit on design tokens, with light and dark themes and four colour palettes
• Accessibility panel for contrast, text size and reduced motion; keyboard-friendly tabs and dialogs
• Regions, activities, events and services, in English and Arabic with full RTL

The marketing website of a technology and digital-transformation partner, built pixel-for-pixel from the Figma production frames in Angular 22. It presents seven connected services and turns visitors into leads through a guided partnership assessment.

• Home, services and portfolio pages implemented from the Figma design system
• 7-step partnership assessment wizard with validation, review and success screens
• English and Arabic with full RTL, responsive on every screen

A luxury interior-design brand built as three apps that share one design language: an Angular 21 marketing site with a 3-step consultation booking, a client portal with a project timeline, material approvals and progress invoices, and an Expo (React Native) mobile app.

• 3-step consultation booking with one-time-code verification
• Client portal: construction timeline, material approvals and progress invoices
• One design-token source for web, portal and mobile, in Arabic and English

A React Native app for converting between AED and USDT. Live quotes with exact decimal maths, a 15-second quote expiry enforced in the UI and at confirmation, and a themed, accessible design system with light, dark and four colour palettes.

• Exact money maths: every calculation is covered by automated tests, and amounts are always rounded down
• Safe async quotes: out-of-order responses are discarded, double confirmation is blocked, and failures can be simulated
• 60 automated tests, WCAG AA contrast, reduced-motion and font-scaling support, plus a 3-minute demo video

Dashboards, apps, sign-in and 3D landing pages in one admin and SaaS template, designed right-to-left from the first line and tested for accessibility.

• Arabic and right-to-left from the start
• Theme switch, colour skins and accessibility modes
• Editions for several front-end frameworks

An unsolicited design concept: a real-time 3D park at night where scrolling flies the camera from the gate to the plaza, past regional pavilions, food street, the stage, rides and fireworks. Arabic first with English, four themes, and a still poster when motion is reduced. Concept by Orieb Alzyuot, not affiliated with or endorsed by Global Village.

• Procedural three.js scene, no downloaded models
• Scroll-driven camera story in eight sections
• Night, day, high-contrast and grayscale themes with a circular reveal

Zujaj (Arabic for glass) is a showcase of soft frosted-glass interfaces: milky inactive tiles and deep tinted active ones, glass sliders, chips and buttons, a live playground for tint, blur and shape, and a theme generated from any colour with text contrast fixed automatically. A separate 3D page has refracting glass pebbles and an original glass mascot. Arabic first with English, works on phones.

• Glass control panel with real toggle buttons
• Theme from any colour, contrast checked automatically
• 3D page with refracting glass and an original mascot

A cinematic, bilingual landing page built as a standalone Astro site: a real-time Three.js hero, a scroll-driven switch between dark and light, and 3D fact cards, all in lavender.

• Three.js hero (glossy knot, lattice, particle ring) reacting to mouse and scroll
• Loader, word-by-word reveal, 3D counters, draggable work gallery, full-screen menu
• English + Arabic RTL, synthesised UI sound, reduced-motion and no-WebGL fallbacks

A scroll-driven website for an invented burger restaurant. A procedural Three.js burger comes apart layer by layer as you scroll, the camera visits each ingredient, then the burger stacks back together with its price.

• Burger built entirely in code (bun, sesame, lettuce, tomato, cheddar, patty) with soft studio light and shadows
• Pinned scroll story: exploded layers with labels, ingredient close-ups with stats, re-assembly, menu with a live cart counter
• English + Arabic RTL, lighter scene on mobile, reduced-motion and no-WebGL fallbacks

An immersive one-page site for an invented design studio. A bioluminescent jellyfish answers your cursor, and scrolling takes the camera down through five ocean zones, from the sunlit surface to a glowing core 10,994 m below.

• Procedural Three.js jellyfish: shader-lit bell and verlet tentacles; it turns toward the cursor, leans in, and flinches at fast moves
• Scroll-driven descent with its own light, fog and particles per zone, a live depth meter, synthesised ambient sound and a fully custom contact form
• English + Arabic RTL, a lighter mobile scene that follows touch and gyro, reduced-motion and no-WebGL fallbacks

A 2026 rebuild of our 2020 RBK team project (LadyBugs4), now in React 19 and TypeScript with Three.js: an online bakery started during the lockdown so neighbours could order bread from home. The original React and Material UI app had a menu, cart, card or cash checkout and an admin page. This version keeps all of it, finishes it properly and runs on my own hand-built UI kit instead of a component library.

• 30-item menu with categories, search, sort, favourites and product pages; cart drawer with quantities, promo code, 16% tax and a free-delivery meter
• Checkout with Jordanian phone, address and Luhn card validation and an error summary, then a confirmation page with live order tracking
• Custom cake builder with a live 3D preview (size, layers, sponge, frosting, toppings and the message), plus a kitchen dashboard; custom select, date picker and radio cards; English and Arabic (RTL), light and dark

A 2026 rebuild of our 2020 RBK team project (TSNO Group 3), now a Next.js App Router site exported as static pages, with a Three.js hero: a marketplace to find a plumber, smith, carpenter, mechanic, tutor or photographer by service or by name. The original had worker profiles with hourly prices, search and sign up. The rebuild turns it into a complete booking flow.

• Search by service or name with city, price, rating, availability and verified filters that stay in the URL
• Pro profiles with reviews and a validated booking form with a live cost estimate; a bookings list with status and cancel
• Three-step "join as a pro" wizard that publishes a profile straight into search; custom combobox, select, slider, switch, stepper and calendar; English and Arabic (RTL), light and dark

A 2026 rebuild of our 2020 RBK team project, now in Svelte 5 and TypeScript with Three.js: a guide to sustainable tourism in Jordan with a 3D map of destinations, eco-friendly activities, a slideshow and a shop for reusable bags and bottles.

• Procedural 3D relief map of Jordan with seven clickable pins, keyboard links that follow the pins, and an SVG fallback
• Destination guides with eco-scored activities, and a trip planner that groups stops, estimates days and copies the plan
• Accessible carousel, eco shop with cart and validated checkout, contact form; English and Arabic (RTL), light and dark

A 2026 rebuild of our 2020 RBK Greenfield team project, now in React 19 with Vite and a Three.js study-desk hero: students find private tutors by subject and city, and teachers post ads with their subject, place and price. The rebuild completes both sides of the flow.

• Subject chips with city, level, price and online filters; teacher pages with a weekly timetable to pick a slot
• Validated "connect" requests with status tracking for students, and an inbox with accept for teachers
• Ad editor with a live preview card, edit and delete, built on custom selects, checkbox chips, a stepper, tabs and a dialog; English and Arabic (RTL), light and dark, WCAG AA contrast