Project
Rastafari Zürich needed an online presence that reflected the craft and culture of the salon — a place known for dreadlocks, Afro styles, twists, and precision cuts. The goal was a clean, fast, and visually distinctive site with zero dependencies.
No frameworks, no build tools. Every interaction is written in plain JavaScript and every layout is hand-coded CSS — a deliberate choice to keep the site lightweight, maintainable, and fully owned by the client.
Features
- Service overview with descriptions for dreadlocks, twists, braids, and cuts
- Gallery section showcasing the salon's work
- Contact and booking section with direct WhatsApp and phone links
- Smooth scroll navigation with sticky header
- Fully responsive — optimised for mobile browsers
- Fast load — no external JS libraries, minimal HTTP requests
Technical Details
The entire site is a single-page layout driven by anchor-based navigation. Smooth scrolling is handled natively with scroll-behavior: smooth and a small JS offset correction for the sticky header.
The gallery uses a pure CSS column layout with column-count for a masonry-style grid without any JavaScript overhead. Images are served in WebP format with JPEG fallbacks for older browsers.
Structure
index.html — single page, all sections
style.css — layout, components, animations
script.js — nav behaviour, scroll effects
/images — WebP gallery assets + logoPerformance
No JavaScript framework means the page is interactive the moment the HTML parses. Images use loading="lazy" and explicit width/height attributes to eliminate layout shift. Lighthouse scores consistently 95+ across all categories.