02 / Kozi'sWebsite · Front-end · Photography

Kozi's

A seven-page website for Kozi's in Melissia, designed and built from scratch in vanilla HTML, CSS and JavaScript: home, menu, about, gallery, delivery, contact and an internal style guide. It is available as a Netlify preview and is not yet live on kozis.com.

Designed and built by me. Available as a Netlify preview; not yet the live site on kozis.com.

Website preview (Netlify)

WEB
FRONT-END
PHOTO

01 / Website

Seven pages, built from scratch

Home, menu, about, gallery, delivery, contact, and an internal style guide, written in plain HTML, CSS and JavaScript with no framework or template.

Kozi's website homepage, light theme, full length — The full homepage, light theme.

Kozi's homepage, light theme, first screen — Light theme.

Kozi's homepage, dark theme, first screen — Dark theme. It follows the visitor's system setting and remembers a manual choice.

Kozi's menu page, full length — The menu page, rendered from a single data file.

Kozi's menu page, dark theme — Menu, dark theme.

Mobile, light
Mobile, dark
Mobile menu

02 / How it works

One menu file drives the whole site

Every dish and drink lives in one array, with its price, ingredients, photo and flags. The menu page, the homepage favourites and the drinks list all read from it, so a price changes in one place.

The site was built page by page in vanilla HTML, CSS and JavaScript, without a framework or template.

Menu data: 108 items in 12 categories, in one MENU_DATA file
Homepage favourites: The 10 items flagged popular in the data
Status labels: New, Spicy, Popular, Sold out
Themes: Light and dark; follows the system, remembers a choice
Accessibility: Visible keyboard focus, reduced-motion support, labelled menus and accordions
Status: Netlify preview; not live on kozis.com

03 / Style guide

Every component, on one internal page

Colours, type, buttons, status labels, menu cards, reviews, forms, loading and empty states, all on one page that isn’t linked from the public site.

Kozi's style guide, light theme: colours, type, buttons, status labels, menu cards and reviews — Light theme, first half.

Kozi's style guide, dark theme, the same components — The same components in the dark theme.

Kozi's style guide, second half: accordion, form, loading skeletons, photo placeholders and empty state — Second half: accordion, contact form, loading and empty states. Two scroll-animated sections between the halves don't render in a still capture and are left out.

04 / Selected photography

The room, not just the plate

The photographs show the room as much as the plate: the grill, the counter and the tables, alongside the dishes themselves.

05 / Output

A complete seven-page site, designed and built by me, available as a preview on Netlify. It is not yet the live site on kozis.com.