Zurück zum Portfolio
Die Startseite der Taverna Mpelles: das Logo ΤΟ ΜΠΕΛΛΕΣ, ein Menü mit Home, About, Menu, Reviews, Gallery, News, The Area und Contact, der Umschalter ΕΛ | EN und ein Button „Book a Table“, darunter ein Foto vom Eingang der Taverne – ein geschnitztes Holzschild „ΤΟ ΜΠΕΛΛΕΣ“ auf Steinpfeilern mit Laternen und Kletterpflanzen, drinnen Tische mit weißen Tischdecken und in der Ecke eine Kreidetafel mit der Speisekarte; in der Mitte die Überschrift „Taverna Mpelles“, die Zeilen „Authentic Greek Cuisine“ und „Near Lake Kerkini, at the foot of Mount Belles“, ein Button „View Menu“ und ein umrandeter „Book a Table“, darunter vier Punkte für die Bildwechsel.
tavernampelles.gr in neuem Tab öffnen

Taverna to Mpelles — Restaurant-Website

Überblick

Ich habe eine zweisprachige (Griechisch/Englisch) Single-Page-Website für Taverna to Mpelles entworfen und entwickelt — eine traditionelle griechische Taverne am Kerkini-See in Serres. Die Website bietet ein interaktives Speisekarten-Modal mit 8 Kategorien und über 40 Gerichten, ein Bewertungskarussell mit 19 Fünf-Sterne-Bewertungen von Google und TripAdvisor sowie eine filterbare Galerie mit über 60 Fotos und Lightbox-Ansicht. Ich habe das Projekt mit PHP, Tailwind CSS und Vanilla JavaScript gebaut und JSON-Datendateien statt einer Datenbank verwendet. Die Website enthält einen News- und Veranstaltungsbereich, Attraktionen der Umgebung, vollständige zweisprachige Unterstützung mit über 200 Übersetzungsschlüsseln und umfassendes SEO mit JSON-LD Structured Data für Local Business und Restaurant Schema.

Herausforderungen

Aufbau einer inhaltsreichen Restaurant-Website mit interaktiver Speisekarte, Bewertungen und Galerie ohne Datenbank oder CMS bei gleichzeitiger vollständiger zweisprachiger Unterstützung.

Lösungen

Einsatz von JSON-Datendateien für Menüpunkte, Bewertungen und Übersetzungen, um die Architektur leichtgewichtig und schnell zu halten. Wiederverwendbare Modal- und Karussell-Komponenten in Vanilla JS mit Tailwind Utility Classes für einheitliches Styling.

Galerie

  • Die Startseite der Taverna Mpelles: das Logo ΤΟ ΜΠΕΛΛΕΣ, ein Menü mit Home, About, Menu, Reviews, Gallery, News, The Area und Contact, der Umschalter ΕΛ | EN und ein Button „Book a Table“, darunter ein Foto vom Eingang der Taverne – ein geschnitztes Holzschild „ΤΟ ΜΠΕΛΛΕΣ“ auf Steinpfeilern mit Laternen und Kletterpflanzen, drinnen Tische mit weißen Tischdecken und in der Ecke eine Kreidetafel mit der Speisekarte; in der Mitte die Überschrift „Taverna Mpelles“, die Zeilen „Authentic Greek Cuisine“ und „Near Lake Kerkini, at the foot of Mount Belles“, ein Button „View Menu“ und ein umrandeter „Book a Table“, darunter vier Punkte für die Bildwechsel.

    Startseite — Der Eingang der Taverne selbst, Speisekarte und Reservierung nur einen Klick entfernt

  • Die Startseite auf einem Tablet: Logo, ΕΛ | EN-Umschalter und Menü-Button über dem Foto mit dem geschnitzten Schild und den Tischen drinnen, in der Mitte die Überschrift, beide Zeilen und die Buttons „View Menu“ und „Book a Table“; unter dem Foto auf cremefarbenem Grund die oberen Teile zweier Fotos: eine Person in einem weinroten Poloshirt mit dem Logo der Taverne, die am Herd Essen würzt, und ein grüner Salat neben einem Brotkorb.

    Startseite auf dem Tablet — Von der Eingangstür direkt in die Küche

  • Die Startseite auf einem Smartphone: Logo, ΕΛ | EN-Umschalter und Menü-Button über dem geschnitzten Schild, die Überschrift „Taverna Mpelles“ über die ganze Breite, die beiden Zeilen, die Buttons „View Menu“ und „Book a Table“ in voller Breite und die Bildwechsel-Punkte; darunter auf cremefarbenem Grund eine Person im weinroten Poloshirt der Taverne, die am Herd Fleisch in einer Pfanne würzt, und ein Salat neben einem Brotkorb.

    Hero auf dem Smartphone — Speisekarte und Reservierung, jeweils ein Button in voller Breite