02 — Web Design & Development

Uà Art&Pizza.

A digital menu app for a Neapolitan pizzeria in Ravenna — 60+ pizzas across 9 categories, smart AND-logic ingredient filtering, sticky category navigation, and delivery info. Zero frameworks, instant load.

Role

Designer & Developer

Year

2025

Stack

Vanilla JS · HTML/CSS

Status

Live ↗

GitHub

View Source ↗

Live Site

Open Site ↗

What

Uà Art&Pizza is a Neapolitan pizzeria on Via Giuseppe Vitale 6, Ravenna. Their menu is extensive — over 60 items across 9 sections, from fried starters and classic Margherita to the signature "Pizze di Dante" triptych (Inferno, Purgatorio, Paradiso) and the chef's pick "La Divina Commedia".

The digital menu replaces a static PDF with a scrollable, filterable, mobile-first experience. Each pizza card shows name, base sauce, toppings, and price. Delivery info and allergen notices are embedded directly in the page — no separate documents needed.

· · · ◆ · · ·

Why

PDF menus are frustrating on mobile, impossible to search, and slow to update. The pizzeria needed a solution that loaded in a second, worked offline-ready, and could be updated directly in HTML without a CMS or subscription.

The ingredient filter addresses a real problem: customers with dietary restrictions or preferences have no way to quickly find compatible pizzas from a 60-item list. The AND-logic filter solves this — select "Tartufo" and "Burrata" and you instantly see only the pizzas containing both.

AND-Logic Ingredient Filter

A slide-up filter panel groups ingredients by type (base, dairy, meat, vegetables, fish). Selecting multiple ingredients shows only pizzas that contain all of them simultaneously — not just any one. Built in vanilla JS with fuzzy substring matching to handle variations like "Grana in Cottura" matching a filter for "Grana".

Sticky Category Navigation

A fixed secondary nav bar below the header contains scrollable category pills. As the user scrolls, an IntersectionObserver tracks the current section and highlights the matching pill, auto-scrolling it into view within the nav bar if off-screen. Clicking a pill smooth-scrolls to the section with correct offset for the double fixed header.

· · · ◆ · · ·

Outcome

What shipped

A complete digital menu with 9 sections (Friggitoria, I Classici, Le Amici, Le Artistiche, Le Pizze di Dante, Calzoni Fritti, Focacce, Dolcezze, Bevande), an extras/additions grid, delivery banner, allergen notice, and footer. The ingredient filter covers 30+ filterable ingredients across 6 categories. No backend, no build step, instant loading on any network.

What I learned

IntersectionObserver-based nav tracking requires careful accounting for multi-layer fixed headers — offset calculations must factor in both the top nav and the category strip. I also learned that AND-logic filtering is significantly more useful than OR for ingredient-based selection: users want to find what fits all their constraints, not anything that matches any one of them.

NEXT PROJECT

Serenamente →

↗