Back to Portfolio
The Mpampetas & Sons home page: a green bar with a phone number and the address in Kallithea, Katerini, Pieria, the ΜΠΑΜΠΕΤΑΣ logo with a tractor outline, a menu of Home, About, Services, Equipment, Gallery and Contact and an ΕΛ | EN switch, above a green-tinted photograph of a tractor's long hood in tall grass in front of rows of solar panels at sunset; over it the heading "Mpampetas & Sons" in white and "Agricultural Services" in yellow, the line "Complete solutions for agricultural work and solar park vegetation clearing in Katerini and the wider Pieria region.", a yellow "Get a Quote" button, an outlined "Our Services" button and a scroll cue.
Open mpampetas.gr in a new tab

Mpampetas & Sons — Agricultural Services

Overview

I designed and developed a bilingual (Greek/English) static website for Mpampetas & Sons, a family agricultural services company established in 2015 in Katerini, Pieria. The business specializes in farming operations and solar park vegetation clearing. The site features a scroll-spy navigation, an equipment showcase highlighting their John Deere 5075GL tractor and 12 specialized tools, a filterable gallery with 19 photos and 7 videos with lightbox support, and a contact section. I built the project with pure HTML5, CSS3 using custom properties with a John Deere-inspired color system, and vanilla JavaScript. The site includes JSON-LD LocalBusiness schema, full bilingual support, and IntersectionObserver-driven scroll animations.

Challenges

Presenting heavy machinery and agricultural services professionally while keeping the site fast and accessible as a zero-dependency static build.

Solutions

Used CSS custom properties for a cohesive John Deere color system, IntersectionObserver for performant scroll animations, and a filterable gallery with video lightbox — all without any framework or build tool.

Gallery

  • The Mpampetas & Sons home page: a green bar with a phone number and the address in Kallithea, Katerini, Pieria, the ΜΠΑΜΠΕΤΑΣ logo with a tractor outline, a menu of Home, About, Services, Equipment, Gallery and Contact and an ΕΛ | EN switch, above a green-tinted photograph of a tractor's long hood in tall grass in front of rows of solar panels at sunset; over it the heading "Mpampetas & Sons" in white and "Agricultural Services" in yellow, the line "Complete solutions for agricultural work and solar park vegetation clearing in Katerini and the wider Pieria region.", a yellow "Get a Quote" button, an outlined "Our Services" button and a scroll cue.

    Home — Farm Work and Solar Parks, Both Named in the First Line

  • The home page on a tablet: the green bar with the phone number and address, the logo and a menu button, then the solar panels and the tractor's hood, with the two-line heading, the introduction, the "Get a Quote" and "Our Services" buttons and the scroll cue.

    Top Bar on a Tablet — Phone and Address Stay, the Menu Folds Into One Button

  • The home page on a phone: the green bar showing only the phone number, a large logo and a menu button, then the heading over four lines, the introduction, the "Get a Quote" and "Our Services" buttons stacked and the scroll cue, over the tractor's hood and the solar panels.

    Top Bar on a Phone — The Phone Number Stays, One Tap From a Call