Kavella
Demo site for a coffee shop, five pages: home, menu, about, gallery and contact. The menu is real HTML rendered from a single data file, and the same data feeds a schema.org Menu block (JSON-LD) so search engines can read the sections, items and prices; swapping that file for an API response would leave the render code untouched. The gallery opens in a custom lightbox with keyboard and swipe navigation. The contact form validates in the browser and then hands the message to WhatsApp as a deep link, so there is no backend to run. Page changes go behind a curtain transition, and sections reveal on scroll at an editorial pace, both switched off under reduced motion. The site exists in two design directions, an editorial v2 and an experimental v3, built on the same content, menu data and WhatsApp integration: only the presentation layer differs between them. Vanilla HTML, CSS and JavaScript, zero dependencies.
One data layer, two directions
Both directions are live, each with all five pages. They share the content, the menu data file, the schema.org menu markup that menu.js writes from it, and the WhatsApp routing in the contact form. Same scripts and the same phone number. Each direction owns only its own markup, stylesheet and motion script, so choosing between them moves nothing in the data, and a redesign later is a stylesheet swap rather than a rebuild.
v2Editorial
Cream ground, serif display type, paired photography and scroll-timed reveals at a magazine pace.
v3Experimental
Dark ground with a particle canvas, a skippable counter loader, kinetic wordmark, magnetic buttons under a custom cursor, and a horizontally pinned menu section.