Zurück zum Portfolio
Die Startseite von Mpampetas & Sons: eine grüne Leiste mit Telefonnummer und der Adresse in Kallithea, Katerini, Pieria, das Logo ΜΠΑΜΠΕΤΑΣ mit Traktor-Umriss, ein Menü mit Home, About, Services, Equipment, Gallery und Contact und der Umschalter ΕΛ | EN, darunter ein grün getöntes Foto: die lange Motorhaube eines Traktors in hohem Gras vor Reihen von Solarmodulen bei Sonnenuntergang; darauf die Überschrift „Mpampetas & Sons“ in Weiß und „Agricultural Services“ in Gelb, die Zeile „Complete solutions for agricultural work and solar park vegetation clearing in Katerini and the wider Pieria region.“, ein gelber Button „Get a Quote“, ein umrandeter „Our Services“ und ein Scroll-Hinweis.
mpampetas.gr in neuem Tab öffnen

Mpampetas & Söhne — Landwirtschaftliche Dienstleistungen

Überblick

Ich habe eine zweisprachige (Griechisch/Englisch) statische Website für Mpampetas & Söhne entworfen und entwickelt — ein Familien-Agrarunternehmen, gegründet 2015 in Katerini, Pieria. Das Unternehmen ist auf landwirtschaftliche Arbeiten und Vegetationsrodung für Solarparks spezialisiert. Die Website bietet eine Scroll-Spy-Navigation, eine Gerätevorstellung mit dem John Deere 5075GL-Traktor und 12 Spezialwerkzeugen, eine filterbare Galerie mit 19 Fotos und 7 Videos mit Lightbox-Unterstützung sowie einen Kontaktbereich. Ich habe das Projekt mit reinem HTML5, CSS3 mit Custom Properties und einem von John Deere inspirierten Farbsystem sowie Vanilla JavaScript erstellt. Die Website enthält JSON-LD LocalBusiness Schema, vollständige zweisprachige Unterstützung und IntersectionObserver-gesteuerte Scroll-Animationen.

Herausforderungen

Schwere Maschinen und landwirtschaftliche Dienstleistungen professionell zu präsentieren und gleichzeitig die Website als abhängigkeitsfreie statische Seite schnell und barrierefrei zu halten.

Lösungen

Einsatz von CSS Custom Properties für ein einheitliches John-Deere-Farbsystem, IntersectionObserver für performante Scroll-Animationen und eine filterbare Galerie mit Video-Lightbox — alles ohne Framework oder Build-Tool.

Galerie

  • Die Startseite von Mpampetas & Sons: eine grüne Leiste mit Telefonnummer und der Adresse in Kallithea, Katerini, Pieria, das Logo ΜΠΑΜΠΕΤΑΣ mit Traktor-Umriss, ein Menü mit Home, About, Services, Equipment, Gallery und Contact und der Umschalter ΕΛ | EN, darunter ein grün getöntes Foto: die lange Motorhaube eines Traktors in hohem Gras vor Reihen von Solarmodulen bei Sonnenuntergang; darauf die Überschrift „Mpampetas & Sons“ in Weiß und „Agricultural Services“ in Gelb, die Zeile „Complete solutions for agricultural work and solar park vegetation clearing in Katerini and the wider Pieria region.“, ein gelber Button „Get a Quote“, ein umrandeter „Our Services“ und ein Scroll-Hinweis.

    Startseite — Feldarbeit und Solarparks, beide gleich in der ersten Zeile genannt

  • Die Startseite auf einem Tablet: die grüne Leiste mit Telefonnummer und Adresse, Logo und Menü-Button, dann die Solarmodule und die Motorhaube des Traktors mit der zweizeiligen Überschrift, der Einleitung, den Buttons „Get a Quote“ und „Our Services“ und dem Scroll-Hinweis.

    Obere Leiste auf dem Tablet — Telefon und Adresse bleiben, das Menü klappt in einen Button

  • Die Startseite auf einem Smartphone: die grüne Leiste nur mit der Telefonnummer, ein großes Logo und ein Menü-Button, dann die Überschrift auf vier Zeilen, die Einleitung, die Buttons „Get a Quote“ und „Our Services“ untereinander und der Scroll-Hinweis, vor der Motorhaube des Traktors und den Solarmodulen.

    Obere Leiste auf dem Smartphone — Die Telefonnummer bleibt, ein Tipp bis zum Anruf