// PROJECT_
MVG Lash & Brow
01. LIVE_DEMO
// LIVE PREVIEW
MVG Lash & Brow →
02. PROJECT_OVERVIEW
A live one-page site for MVG Lash & Brow, a lashes & brow salon in Trondheim, Norway — designed, built and shipped end to end on its own .no domain. Built on Astro 7 for static generation, zero unnecessary JavaScript, Lighthouse 95+ (LCP ~1.2s). CSS variables drive the brand palette from the logo, no CSS framework. The 'More about me' modal uses native HTML5 <dialog> (no modal library), fonts are self-hosted via Fontsource (GDPR: keeps IPs on-site). No cookies, no tracking, Content Security Policy for inline resources only, privacy policy for Norwegian law + GDPR, WCAG 2.1 AA throughout. Fully config-driven — owner updates everything without touching HTML. Booking links point to Timma. Full ownership from design through Vercel deployment and Norwegian registrar DNS setup under Dual-Stack Studio.
Status
Active Development
Scope
Full-Stack Architecture
Primary Stack
Astro 7
Repo
Public
03. TECH_STACK & ARCHITECTURE
//Client project under Dual-Stack Studio — designed, built and shipped end to end, live on a .no domain
//Astro SSG: flat HTML, near-zero JS, sub-second loads (Lighthouse 95+, LCP ~1.2s, CLS <0.05)
//Config-driven: nav, footer, texts, links and meta tags all editable from one typed src/config.ts
//Dependency-free interactivity: native <dialog> modal, Flexbox hamburger nav, CSS-variable brand palette
//Privacy by design: self-hosted fonts, no cookies/analytics/tracking, CSP allowing only inline resources
//Compliant: privacy policy for Norwegian law (personopplysningsloven) + GDPR, WCAG 2.1 AA accessibility
//Booking links point to Timma (the salon's real booking system); full ownership incl. DNS + client comms
Astro 7 (Static Site Generation)
Framework — Performance
A pure informational site with no dynamic content, so Astro pre-renders flat HTML and ships almost zero client-side JavaScript. Result: sub-second loads on 4G, Lighthouse 95+, LCP ~1.2s, CLS <0.05.
TypeScript + config-driven content
Architecture — Maintainability
All content — nav, footer, texts, photos, social links, meta tags — lives in a single typed src/config.ts. The owner can update the whole site without touching HTML, and type-safety catches mistakes before deploy.
Vanilla CSS + CSS variables
Styling — Brand System
No CSS framework. A six-colour palette extracted from the client's logo is expressed as CSS custom properties and reused everywhere — full visual control, a tiny bundle, and no framework overhead.
Native <dialog> + zero UI libraries
Interactivity — Accessibility
The 'More about me' modal uses the native HTML5 <dialog> element — semantic, WCAG-friendly, closes on Escape or backdrop click, with no jQuery/Popper/modal library. Responsive nav is a Flexbox hamburger dropdown.
Fontsource (self-hosted fonts)
Privacy — GDPR
Cormorant Garamond, Jost and Dancing Script are self-hosted via Fontsource instead of Google Fonts, so no visitor IP is ever sent to a third party — part of a strict no-cookies, no-tracking, CSP-locked setup.
Vercel + Domeneshop (.no)
Infrastructure — Deployment
Auto-deploys from GitHub on every push, free SSL and a global CDN. Custom DNS (A record + CNAME) configured on Domeneshop, a Norwegian registrar, so the salon runs on its own .no domain for local relevance.
Jimp
Tooling — Assets
Programmatic image processing — background removal on the client's logo and favicon generation — so brand assets stay consistent across the site.