Budare's

Web Design & Development

View Detail
BackVisit site

A premium website for a family-run Venezuelan kitchen in Algeciras, Spain. A full-bleed cinematic scroll hero, a real-photo carta gallery with lightbox, a Cruz-Diez-inspired salon section, and a balanced JS masonry menu. Built with vanilla HTML, CSS, and JavaScript — no framework, no build step. Self-hosted variable fonts, WebP imagery, and a pure-CSS loader keep the site fast on every phone.

Type
Web Design & Development
Role
Full-Stack Developer
Service
Brand Research / Web Design / Frontend Development / Performance Optimization
Year
2026

Project Overview

Budare's is a Venezuelan kitchen in Algeciras, Cádiz. The brief was simple — a single live site that captures the warmth of home cooking, surfaces the menu clearly, and loads fast on the kind of phones the local crowd actually carries.

The result is a single-page site that opens with a full-bleed cinematic hero, walks the visitor through the story behind the kitchen, the carta, the dining room, and reviews — finishing with a clear visit panel: address, hours, and a sticky WhatsApp button on mobile.

Key Features

  • Cinematic Scroll Hero — A full-bleed sticky hero with a real arepa photo that scales from 1× to 1.17× as the visitor scrolls; the content fades and translates in lock-step. Pure requestAnimationFrame — no animation library
  • Cromointerferencia Salon — The dining-room section uses Carlos Cruz-Diez's Cromointerferencia de color aditivo (Maiquetía airport, 1978) as the background — a tribute to the country, with cards floating on solid navy panels for legibility
  • Real Menu Cards — The full carta presented as three card images with a click-to-fullscreen lightbox, so visitors can read every price without leaving the page
  • JS Balanced Masonry — A custom LPT-distribution algorithm packs menu items into 1/2/3 columns based on viewport, keeping every column near-equal height with no gaps
  • Self-Hosted Variable Fonts — Fraunces and Inter shipped as .woff2 from the same origin with preload hints — kills font-swap CLS and renders instantly even on cold cache
  • Mobile-First Performance — All photos WebP, a CSS-only loader, sticky bottom action bar with WhatsApp + reservation, optimised for cold-cache loads on entry-level phones

Technologies Used

  • Vanilla HTML / CSS / JS — Semantic markup, CSS custom properties, mobile-first responsive — no framework dependencies, no build step
  • WebP imagery — Hero, story, menu cards encoded with libwebp at quality 80, preloaded for LCP
  • Self-hosted variable fonts — Fraunces 400-600 + italic 400-500, Inter 400-700, Baloo 600 — Latin subset only
  • CSS-only loader — Pure keyframe fade-out, auto-dismisses after 700ms without JS gating

Pages

  • Inicio — Full-bleed cinematic hero with the real arepa photo, headline with the Venezuelan flag baked into the word "Venezuela," and dual CTAs
  • Sobre Nosotros — The story behind the kitchen, four count-up stats (founded year, days open, percent home-recipes, plates on the menu)
  • Nuestra Carta — The full carta as three lightbox-enabled cards, with a sharing-platter feature for "Entren que caben 100"
  • El Salón — Dining-room section with the Cromointerferencia photo as backdrop, three feature cards on dark glass panels
  • Reseñas — Three real customer quotes
  • Visita — Address, opening hours, OpenStreetMap embed, WhatsApp + phone CTAs, and a sticky bottom bar on mobile

Outcome

The site went live at https://budares.es with a custom domain, ready to take phone calls, table bookings, and WhatsApp messages from the moment it was handed off.