Back to Portfolio
The Taverna Mpelles home page: the ΤΟ ΜΠΕΛΛΕΣ logo, a menu of Home, About, Menu, Reviews, Gallery, News, The Area and Contact, an ΕΛ | EN switch and a "Book a Table" button, over a photograph of the taverna's entrance — a carved wooden sign reading "ΤΟ ΜΠΕΛΛΕΣ" on stone pillars with lanterns and climbing plants, tables with white cloths inside and a chalkboard menu in the corner; in the middle the heading "Taverna Mpelles", the lines "Authentic Greek Cuisine" and "Near Lake Kerkini, at the foot of Mount Belles", a "View Menu" button and an outlined "Book a Table" button, with four slide dots below.
Open tavernampelles.gr in a new tab

Taverna to Mpelles — Restaurant Website

Overview

I designed and developed a bilingual (Greek/English) single-page website for Taverna to Mpelles, a traditional Greek taverna near Lake Kerkini in Serres. The site features an interactive menu modal with 8 food categories and 40+ items, a review carousel showcasing 19 five-star reviews from Google and TripAdvisor, and a filterable gallery with 60+ photos and lightbox viewing. I built the project with PHP, Tailwind CSS, and vanilla JavaScript, using JSON data files instead of a database. The site includes a news and events section, area attractions, full bilingual support with 200+ translation keys, and comprehensive SEO with JSON-LD structured data for local business and restaurant schema.

Challenges

Building a content-rich restaurant site with an interactive menu, reviews, and gallery without a database or CMS, while supporting full bilingual content.

Solutions

Used JSON data files for menu items, reviews, and translations, keeping the architecture lightweight and fast. Built reusable modal and carousel components in vanilla JS with Tailwind utility classes for consistent styling.

Gallery

  • The Taverna Mpelles home page: the ΤΟ ΜΠΕΛΛΕΣ logo, a menu of Home, About, Menu, Reviews, Gallery, News, The Area and Contact, an ΕΛ | EN switch and a "Book a Table" button, over a photograph of the taverna's entrance — a carved wooden sign reading "ΤΟ ΜΠΕΛΛΕΣ" on stone pillars with lanterns and climbing plants, tables with white cloths inside and a chalkboard menu in the corner; in the middle the heading "Taverna Mpelles", the lines "Authentic Greek Cuisine" and "Near Lake Kerkini, at the foot of Mount Belles", a "View Menu" button and an outlined "Book a Table" button, with four slide dots below.

    Home — The Taverna's Own Doorway, With the Menu and a Table One Click Away

  • The home page on a tablet: the logo, the ΕΛ | EN switch and a menu button over the photograph of the carved sign and the tables inside, with the heading, both lines and the "View Menu" and "Book a Table" buttons in the middle; below the photograph, on a cream background, the tops of two photographs: a person in a burgundy polo shirt with the taverna's logo seasoning food at a stove, and a green salad beside a bread basket.

    Home on a Tablet — From the Front Door Straight Into the Kitchen

  • The home page on a phone: the logo, the ΕΛ | EN switch and a menu button over the carved sign, the heading "Taverna Mpelles" across the width, the two lines, full-width "View Menu" and "Book a Table" buttons and the slide dots; below, on a cream background, a person in the taverna's burgundy polo shirt seasoning meat in a pan at a stove, and a salad beside a bread basket.

    Hero on a Phone — The Menu and a Booking, Each One Full-Width Tap