Volver al portfolio
La portada de Taverna Mpelles: el logotipo ΤΟ ΜΠΕΛΛΕΣ, un menú con Home, About, Menu, Reviews, Gallery, News, The Area y Contact, el selector ΕΛ | EN y un botón «Book a Table», sobre una foto de la entrada de la taberna —un letrero de madera tallada con «ΤΟ ΜΠΕΛΛΕΣ» sobre pilares de piedra con faroles y plantas trepadoras, mesas con manteles blancos dentro y una pizarra con el menú en una esquina—; en el centro, el titular «Taverna Mpelles», las líneas «Authentic Greek Cuisine» y «Near Lake Kerkini, at the foot of Mount Belles», un botón «View Menu» y otro con contorno, «Book a Table», y debajo cuatro puntos del carrusel.
Abrir tavernampelles.gr en una pestaña nueva

Taverna to Mpelles — Sitio Web de Restaurante

Resumen

Diseñé y desarrollé un sitio web bilingüe (griego/inglés) de una sola página para Taverna to Mpelles, una taberna griega tradicional cerca del lago Kerkini en Serres. El sitio cuenta con un modal de menú interactivo con 8 categorías de comida y más de 40 platos, un carrusel de reseñas con 19 reseñas de cinco estrellas de Google y TripAdvisor, y una galería filtrable con más de 60 fotos y visualización con lightbox. Construí el proyecto con PHP, Tailwind CSS y JavaScript puro, utilizando archivos de datos JSON en lugar de base de datos. El sitio incluye una sección de noticias y eventos, atracciones de la zona, soporte bilingüe completo con más de 200 claves de traducción y SEO completo con datos estructurados JSON-LD para esquemas de negocio local y restaurante.

Retos

Construir un sitio de restaurante rico en contenido con menú interactivo, reseñas y galería sin base de datos ni CMS, al tiempo que se admite contenido bilingüe completo.

Soluciones

Se utilizaron archivos de datos JSON para los platos del menú, reseñas y traducciones, manteniendo la arquitectura ligera y rápida. Se construyeron componentes reutilizables de modal y carrusel en JavaScript puro con clases de utilidad Tailwind para un estilo consistente.

Galería

  • La portada de Taverna Mpelles: el logotipo ΤΟ ΜΠΕΛΛΕΣ, un menú con Home, About, Menu, Reviews, Gallery, News, The Area y Contact, el selector ΕΛ | EN y un botón «Book a Table», sobre una foto de la entrada de la taberna —un letrero de madera tallada con «ΤΟ ΜΠΕΛΛΕΣ» sobre pilares de piedra con faroles y plantas trepadoras, mesas con manteles blancos dentro y una pizarra con el menú en una esquina—; en el centro, el titular «Taverna Mpelles», las líneas «Authentic Greek Cuisine» y «Near Lake Kerkini, at the foot of Mount Belles», un botón «View Menu» y otro con contorno, «Book a Table», y debajo cuatro puntos del carrusel.

    Inicio — La propia entrada de la taberna, con la carta y la reserva a un clic

  • La portada en una tableta: el logotipo, el selector ΕΛ | EN y un botón de menú sobre la foto del letrero tallado y las mesas del interior, con el titular, las dos líneas y los botones «View Menu» y «Book a Table» en el centro; bajo la foto, sobre fondo crema, la parte superior de dos fotos: una persona con un polo granate con el logotipo de la taberna que sazona comida en los fogones, y una ensalada verde junto a una cesta de pan.

    Inicio en tableta — De la puerta de entrada directamente a la cocina

  • La portada en un móvil: el logotipo, el selector ΕΛ | EN y un botón de menú sobre el letrero tallado, el titular «Taverna Mpelles» a todo lo ancho, las dos líneas, los botones «View Menu» y «Book a Table» a todo lo ancho y los puntos del carrusel; debajo, sobre fondo crema, una persona con el polo granate de la taberna que sazona carne en una sartén en los fogones, y una ensalada junto a una cesta de pan.

    Portada en el móvil — La carta y la reserva, cada una en un botón a todo lo ancho