Raffy Gelato

Web Design & Development

View Detail
BackVisit site

A premium website for an artisan gelato shop in the heart of Tilburg, serving authentic Italian gelato alongside fresh waffles and crêpes. A custom hero animation, a live menu with a 14-allergen modal and vegan markers, and a custom admin dashboard that lets the owner edit categories, prices, and content directly — no developer touch needed. Mobile-optimised with WebP imagery throughout and an on-brand typographic logo system. Built with vanilla HTML, CSS, JavaScript, and GSAP — no framework bloat, no build step, fast on every device.

Type
Web Design & Development
Role
Full-Stack Developer
Service
Web Design / Frontend Development / CMS Integration
Year
2026

Project Overview

Raffy Gelato is an artisan gelato shop on Oude Markt in Tilburg, serving authentic Italian gelato alongside crispy waffles and crêpes since 1997. The brief: a website that matches the warmth and craft of the product, with an admin surface so the owner can update the live menu daily without ever opening a code editor.

The result is a five-page site built without a framework — vanilla HTML/CSS/JS for the front end and a custom admin dashboard for content management.

Key Features

  • Hero Animation: A custom hero animation that sets the tone the moment the page loads
  • Live Menu: Edit any flavour, price, or category from the admin panel and see it update instantly on the live site
  • Allergen-Aware: 14-allergen modal per flavour with vegan markers
  • Admin Dashboard: Owner edits categories, prices, descriptions, and contact info directly — tabs for Menu, Categories, Index Page, About Us, Contact, and Statistics
  • Position-Swap Editing: Type a target row position + Enter to reorder menu items instantly
  • Mobile-First: Portrait hero video on mobile, WebP imagery (50–77% smaller than originals)
  • Visitor Statistics: Admin-only session-based stats panel (today / week / total)

Technologies Used

  • Vanilla HTML/CSS/JS: Semantic markup, CSS custom properties, mobile-first — no framework dependencies
  • GSAP + ScrollTrigger: Hero animation and scroll-driven section reveals
  • Hosting + deploy pipeline: Static site hosted on a global CDN
  • WebP: All raster imagery, optimised for delivery

Pages

  • Home — Hero animation, brand story, and a taste of what's on the menu — built to invite visitors to walk in
  • Menu — Every flavour and product the shop sells, filterable by category, with a 14-allergen modal and vegan markers per item
  • About — The Raffy story since 1997 — family roots, craft, and what makes the gelato authentic
  • Contact — Address on Oude Markt, opening hours, a contact form, and a curated FAQ for quick answers
  • Admin — Private owner dashboard — edit menu, categories, prices, and page content and view visitor statistics without touching code

Outcome

The shop owner now manages the entire menu — adding flavours, swapping positions, marking items vegan, updating allergen info — from a single dashboard. The site stays fast (no framework overhead), the design stays consistent (CSS custom properties), and the menu is always up to date because the owner can edit it directly without ever touching the code.