Maison Brume

The studio site for Maison Brume, an editorial web-design practice for fashion brands (Morocco · Paris), built to be its own best sales argument. A restrained editorial system (Fraunces variable optical axes, warm-mono WCAG-AA palette) carries a hand-written raw-GLSL WebGL mist hero that loads via requestIdleCallback with zero first-paint cost, CSS-only entrance animations so content can structurally never hide itself, and French-default browser-language detection. The portfolio shows five real client/concept sites as captured full-page screenshots, honestly labelled prototype/concept/shipped. 21 static pages across EN and FR, auto-deploying to GitHub Pages at zero cost.

Try the live demo Source on GitHub

21 · EN + FR

Pages

Near-zero

JS on mobile

Hosting

Web

What Wasn't Working

A studio that sells web design has to be its own best argument: quiet-luxury editorial for fashion-brand owners browsing on phones, proven by real work shown rather than bare type.

The Solution

How I Fixed It

Astro 5 static site with CSS-only reveals (a prior class of invisible-content bug made structurally impossible), a deferred no-library WebGL 'brume' mist hero, before-paint FR-default locale detection, and five real client screenshots as the portfolio.

Stack

Technologies Used

Astro 5

Tailwind 4

Raw WebGL/GLSL

Lenis

TypeScript

Results

Key Outcomes

✓

21 static pages in two locales with transcreated — not literal — French copy

✓

Hand-written GLSL mist hero: idle-loaded, DPR-capped, paused off-screen, skipped on reduced-motion

✓

Sub-2s mobile budget: near-zero JS, inlined CSS, self-hosted fonts

✓

Zero-cost auto-deploy to GitHub Pages, custom-domain ready

Want something like this?

Let's build it. I ship fast and I ship clean.

Try Live View Code Hire Me