Retour au portfolio
La page d'accueil de Mpampetas & Sons : une barre verte avec un numéro de téléphone et l'adresse à Kallithea, Katerini, Piérie, le logo ΜΠΑΜΠΕΤΑΣ surmonté d'un tracteur, un menu Home, About, Services, Equipment, Gallery et Contact et le sélecteur ΕΛ | EN, au-dessus d'une photo teintée de vert : le long capot d'un tracteur dans les hautes herbes devant des rangées de panneaux solaires au coucher du soleil ; par-dessus, le titre « Mpampetas & Sons » en blanc et « Agricultural Services » en jaune, la phrase « Complete solutions for agricultural work and solar park vegetation clearing in Katerini and the wider Pieria region. », un bouton jaune « Get a Quote », un bouton « Our Services » détouré et un indicateur de défilement.
Ouvrir mpampetas.gr dans un nouvel onglet

Mpampetas & Fils — Services Agricoles

Aperçu

J'ai conçu et développé un site statique bilingue (grec/anglais) pour Mpampetas & Fils, une entreprise familiale de services agricoles fondée en 2015 à Katerini, en Piérie. L'entreprise se spécialise dans les travaux agricoles et le débroussaillage de parcs solaires. Le site propose une navigation par scroll-spy, une vitrine d'équipements mettant en avant leur tracteur John Deere 5075GL et 12 outils spécialisés, une galerie filtrable avec 19 photos et 7 vidéos avec lightbox, et une section contact. J'ai construit le projet en HTML5 pur, CSS3 avec des propriétés personnalisées inspirées du système de couleurs John Deere, et JavaScript vanilla. Le site intègre un schéma JSON-LD LocalBusiness, un support bilingue complet et des animations au défilement pilotées par IntersectionObserver.

Défis

Présenter professionnellement des engins lourds et des services agricoles tout en gardant le site rapide et accessible en tant que construction statique sans dépendances.

Solutions

Utilisation de propriétés CSS personnalisées pour un système de couleurs John Deere cohérent, IntersectionObserver pour des animations de défilement performantes, et une galerie filtrable avec lightbox vidéo — le tout sans aucun framework ni outil de build.

Galerie

  • La page d'accueil de Mpampetas & Sons : une barre verte avec un numéro de téléphone et l'adresse à Kallithea, Katerini, Piérie, le logo ΜΠΑΜΠΕΤΑΣ surmonté d'un tracteur, un menu Home, About, Services, Equipment, Gallery et Contact et le sélecteur ΕΛ | EN, au-dessus d'une photo teintée de vert : le long capot d'un tracteur dans les hautes herbes devant des rangées de panneaux solaires au coucher du soleil ; par-dessus, le titre « Mpampetas & Sons » en blanc et « Agricultural Services » en jaune, la phrase « Complete solutions for agricultural work and solar park vegetation clearing in Katerini and the wider Pieria region. », un bouton jaune « Get a Quote », un bouton « Our Services » détouré et un indicateur de défilement.

    Accueil — Travaux agricoles et parcs solaires, nommés dès la première ligne

  • La page d'accueil sur tablette : la barre verte avec le téléphone et l'adresse, le logo et un bouton de menu, puis les panneaux solaires et le capot du tracteur, avec le titre sur deux lignes, l'introduction, les boutons « Get a Quote » et « Our Services » et l'indicateur de défilement.

    Barre supérieure sur tablette — Le téléphone et l'adresse restent, le menu se replie en un bouton

  • La page d'accueil sur téléphone : la barre verte avec le seul numéro de téléphone, un grand logo et un bouton de menu, puis le titre sur quatre lignes, l'introduction, les boutons « Get a Quote » et « Our Services » empilés et l'indicateur de défilement, sur le capot du tracteur et les panneaux solaires.

    Barre supérieure sur mobile — Le numéro reste affiché, à un geste de l'appel