01
Frontend Engineering
React, Next.js, TypeScript. Component systems, routing, server components, edge runtime.
React 19Next.jsTypeScriptTanStack
BASED IN BEIRUT · BORN IN RIYADH
FRONTEND
DEVELOPER.
CREATIVE TECH.
SELF-TAUGHT ACROSS EVERY DISCIPLINE.
FOUR YEARS OF PROFESSIONAL WORK.
NO DEGREE. ONLY THE WORK.
/ GLSL · RAYMARCHING · WEBGL · 4-PHASE
COMPUTED
IN THE BROWSER.
Rendered live by your GPU. Every pixel solved by raymarching a distance field — no meshes, no textures, just math.
/ 60FPS · WEBGL2/ 02 — DISCIPLINES
CAPABILITIES.
SIX OVERLAPPING DOMAINS.
ONE PERSON. ONE STACK.
02
Creative Coding
WebGL, GLSL shaders, raymarching, generative systems, canvas + audio.
Three.jsGLSLWeb AudioCanvas2D
03
Data & Backend
Postgres, REST, pipelines, scraping, ETL, dashboards.
PostgresPythonSupabaseNode
04
Design Systems
Token systems, component libraries, accessibility, motion language.
Figmashadcn/uiTailwindRadix
05
Motion & Animation
GSAP, framer-motion, scroll-driven sequences, page transitions.
framer-motionGSAPWAAPILottie
06
DX & Tooling
CI, linters, type-safe code-gen, deployment automation.
VercelGitHub ActionsESLintVitest
Stats
/ 014+YEARS PROFESSIONAL
/ 0250k+LINES SHIPPED
/ 0330+PROJECTS
/ 042LANGUAGES
/ 04 — LIVE / INTERACTIVE
EXPERIMENTS.
DRAG. TAP. PLAY.
EVERY DEMO RUNS LIVE IN YOUR BROWSER.
DRAG · TAP TO BURST
CANVAS PHYSICS
Particle Gravity
120 bodies orbiting your cursor via inverse-square attraction. Tap to detonate an outward burst.
OPENDRAG · X=FREQ · Y=AMP
GENERATIVE VISUAL
Wave Synth
Three interfering waves shaped by drag. X controls frequency, Y controls amplitude.
OPENBREAKOUTDRAG TO PLAY
MICRO GAME
Breakout, 80 lines.
A complete breakout game written in vanilla canvas. Drag to play.
OPEN/ 05 — SELECTED WORK
ALL PROJECTS