Retour au portfolio
La page d'accueil de Taverna Mpelles : le logo ΤΟ ΜΠΕΛΛΕΣ, un menu Home, About, Menu, Reviews, Gallery, News, The Area et Contact, le sélecteur ΕΛ | EN et un bouton « Book a Table », sur une photo de l'entrée de la taverne — une enseigne en bois sculpté « ΤΟ ΜΠΕΛΛΕΣ » posée sur des piliers de pierre avec des lanternes et des plantes grimpantes, des tables nappées de blanc à l'intérieur et une ardoise de menu dans le coin ; au centre, le titre « Taverna Mpelles », les lignes « Authentic Greek Cuisine » et « Near Lake Kerkini, at the foot of Mount Belles », un bouton « View Menu » et un bouton « Book a Table » détouré, avec quatre points de diaporama en dessous.
Ouvrir tavernampelles.gr dans un nouvel onglet

Taverna to Mpelles — Site de Restaurant

Aperçu

J'ai conçu et développé un site bilingue (grec/anglais) en une page pour la Taverna to Mpelles, une taverne grecque traditionnelle près du lac Kerkini à Serrès. Le site propose un menu interactif en modale avec 8 catégories et plus de 40 plats, un carrousel présentant 19 avis cinq étoiles de Google et TripAdvisor, et une galerie filtrable avec plus de 60 photos et visualisation en lightbox. J'ai construit le projet avec PHP, Tailwind CSS et JavaScript vanilla, en utilisant des fichiers de données JSON au lieu d'une base de données. Le site comprend une section actualités et événements, les attractions de la région, un support bilingue complet avec plus de 200 clés de traduction, et un SEO complet avec données structurées JSON-LD pour les schémas local business et restaurant.

Défis

Construire un site de restaurant riche en contenu avec menu interactif, avis et galerie, sans base de données ni CMS, tout en gérant un contenu entièrement bilingue.

Solutions

Utilisation de fichiers de données JSON pour les plats, avis et traductions, maintenant une architecture légère et rapide. Construction de composants réutilisables de modale et de carrousel en JavaScript vanilla avec les classes utilitaires Tailwind pour un style cohérent.

Galerie

  • La page d'accueil de Taverna Mpelles : le logo ΤΟ ΜΠΕΛΛΕΣ, un menu Home, About, Menu, Reviews, Gallery, News, The Area et Contact, le sélecteur ΕΛ | EN et un bouton « Book a Table », sur une photo de l'entrée de la taverne — une enseigne en bois sculpté « ΤΟ ΜΠΕΛΛΕΣ » posée sur des piliers de pierre avec des lanternes et des plantes grimpantes, des tables nappées de blanc à l'intérieur et une ardoise de menu dans le coin ; au centre, le titre « Taverna Mpelles », les lignes « Authentic Greek Cuisine » et « Near Lake Kerkini, at the foot of Mount Belles », un bouton « View Menu » et un bouton « Book a Table » détouré, avec quatre points de diaporama en dessous.

    Accueil — L'entrée même de la taverne, avec la carte et la réservation à un clic

  • La page d'accueil sur tablette : le logo, le sélecteur ΕΛ | EN et un bouton de menu au-dessus de la photo de l'enseigne sculptée et des tables intérieures, avec au centre le titre, les deux lignes et les boutons « View Menu » et « Book a Table » ; sous la photo, sur fond crème, le haut de deux photos : une personne en polo bordeaux au logo de la taverne qui assaisonne un plat aux fourneaux, et une salade verte à côté d'une corbeille de pain.

    Accueil sur tablette — De la porte d'entrée directement en cuisine

  • La page d'accueil sur téléphone : le logo, le sélecteur ΕΛ | EN et un bouton de menu au-dessus de l'enseigne sculptée, le titre « Taverna Mpelles » sur toute la largeur, les deux lignes, les boutons « View Menu » et « Book a Table » pleine largeur et les points du diaporama ; en dessous, sur fond crème, une personne en polo bordeaux de la taverne qui assaisonne de la viande dans une poêle aux fourneaux, et une salade à côté d'une corbeille de pain.

    Bannière sur mobile — La carte et la réservation, chacune en un bouton pleine largeur