Alaa Abbod · selected work

Ten builds, ten directions

A restaurant, hotel, clinic, gym, photography studio, observability platform and more — ten self-initiated concept websites created to explore different visual languages and technical problems.

Explore the ten How they're made

10complete builds
10/10self-initiated
10/10live previews
10/10reduced-motion support

self-initiated concept · the rail — scroll

01 / 10

Ember & Oak Restaurant · Portland, OR An editorial print magazine that happens to serve dinner. Seasonal menus written by the Willamette Valley, cooked over oak. CSS Grid6 KB JS01/10
Aurelia House Boutique Hotel · Mayfair, London Forty-one rooms of old-world calm behind a walled garden. A quiet address in a loud century, set in gold on charcoal. Focus trap1.1s reveals02/10
Norra Health Family Clinic · Portland, OR Forty-minute appointments and a waiting room you’ll barely see. Calm treated as a design constraint, contrast argued in the CSS. 26 inline SVGsWCAG AA03/10
Arke Estates Real Estate · Architectural brokerage Architecture, quietly brokered. Four colour tokens, three type weights and a great deal of deliberate white space. 4 colour tokens22 KB CSS04/10
SLAB Strength Club Gym · Detroit, MI 1,150 m² of concrete, 41 squat racks and exactly zero mirrors. Neo-brutalism that actually means it. 8px shadows90ms snap05/10
Noctis Studio Photography · London A concept built around eighteen weddings a year, every frame graded by hand in the dark. The lights stay off for a reason. Pointer capture10 modules06/10
Root & Ritual Skincare · Port Townsend, WA Two acres above the Salish Sea, thirty-four jars to a batch. Never more, never rushed — with film grain to match. feTurbulence3D tilt07/10
Signalform Observability SaaS · Developer tools Every signal on one surface — metrics, traces and logs answering in milliseconds. Not one photograph in the build. ⌘K paletteZero photos08/10
NEONFRAME Digital Agency · Berlin A fictional agency imagined as electric since 2017. A cyberpunk HUD where every glow, chamfer and scanline is CSS — no photography, no canvas, no stock. CSS chamfersGlitch text09/10
Brightloop Education · Cohort-based courses Switch careers with momentum, not guesswork. Six months, cohort-based, portfolio-first — a page that counts itself up. SVG ringsShared IO10/10

the index

ten self-initiated concepts — hover a row

how they're made

No build step
Every one of the ten is three files: index.html, styles.css, script.js. No bundler, no transpiler, no node_modules.
- HTML
- CSS
- Vanilla JS
Tokens first
Each site's identity lives in a :root block — colour, type, radius, easing. Change eight values and the whole page changes mood.
- Custom properties
- clamp()
- Fluid type
Motion with a brake
All ten gate their animation behind prefers-reduced-motion, and several behind (pointer: fine) too. Motion is an enhancement, never the content.
- matchMedia
- IntersectionObserver
- rAF
Accessible on purpose
Every overlay takes focus, holds it, and hands it back on Escape — every accordion deliberately does not. Ten forms, ten live regions, and a clean axe-core run across all ten builds.
- ARIA
- Focus management
- Keyboard
Hand-drawn interfaces
Signalform's dashboard, Brightloop's progress rings and NEONFRAME's entire visual language are inline SVG and CSS. Three of the ten ship zero photographs.
- Inline SVG
- pathLength
- clip-path
Ten voices, not one
Print-editorial, luxury heritage, Scandinavian calm, radical minimal, neo-brutalist, cinematic, botanical, precision-dark, cyberpunk, optimistic-bright.
- Art direction
- Type pairing
- Palette

keepexploring

Let’s connect

back home

Ten builds, ten directions Ten builds, ten directions

the index

how they're made

keepexploring

Always exploring the next idea.

Ten builds, ten directions