01Context
Ata3allam is an educational service. They needed a landing page that felt distinct from the standard agency-template look — something that signaled care without being flashy.
02Challenge
Two languages (English and Arabic, including RTL handling). A limited budget. And a brief that asked for "animations" without specifying what or where.
03Approach
- Built in HTML, CSS, and vanilla JavaScript. No framework. No template. The whole site is small enough to read in an afternoon.
- All animations are hand-coded — scroll-linked reveals, sectioned transitions, micro-interactions on hover. Each one is short and intentional; nothing autoplays.
- RTL support built in from the first commit, not retrofitted.
Craft over framework
The whole site is around 1,200 lines of hand-written code. No build step, no dependencies, no template. Loads under 100 KB on a cold cache.
04Outcome
Live at ata3allam.com. Loads fast on cheap connections, which is the actual metric that matters for an educational site in this region.
05What I'd do differently
If I rebuilt it today I'd use a static site generator and content collections instead of hand-rolled HTML — same output, easier to update.