GrandpaBeans — Schwarze Bohnen aus Ano Vrontou
1 Monat
|
Designer & Entwickler
Wir haben grandpabeans.gr entworfen und entwickelt — eine zweisprachige (Griechisch/Englisch) Single-Page-Storytelling-Website für Prodromos Matenoglou, den ehemaligen Physiotherapeuten, der 2019 seine Praxis aufgab, um vergessene Erbstück-Saatgut aus dem Lager seines Großvaters wiederzubeleben — und damit zu Griechenlands einzigem kommerziellen Schwarzbohnen-Produzenten wurde. Die Seite öffnet mit einem 20-Frame-Stop-Motion-Hero, der zwischen ganzen und angebissenen Bohnen wechselt, und entfaltet eine scrollgesteuerte Erzählung über sieben Abschnitte: Intro, Gründergeschichte, Erntegalerie, Nährstoffprofil (24g Protein, Anthocyane, vollständiges Aminosäurespektrum), FAQ und Kontakt. Aufgebaut ohne Datenbank oder Framework — zweisprachige Inhalte leben in PHP-Sprachdateien, das Routing entfernt das /en/-Präfix serverseitig, und die gesamte Seite hält 60fps-Scroll-Animationen über GSAP 3.12.5 mit vollständigen Reduced-Motion-Fallbacks. JSON-LD-strukturierte Daten decken Organization, LocalBusiness, Product und FAQ ab; eine llms.txt-Datei macht die Marke für KI-Crawler sichtbar. Der Auftritt der Marke bei Dragons' Den Greece (S2E2, ANT1, Januar 2024) — mit einem €30.000-Deal — wird durch die Geschichte des Gründers erzählt, nicht als Banner.
Technologien
PHP
HTML5
CSS3
Vanilla JavaScript
GSAP
ScrollTrigger
Bilingual i18n
Structured Data
Responsive Design
SEO
Herausforderungen
Eine emotionale Erbschaftsgeschichte — Großvater-zu-Großvater-Saatgut, ein Dragons' Den-gestütztes Comeback, ein einzigartiges Monopol in 1.200m Höhe — in eine einzige Seite zu übertragen, die mobil performt, zugänglich bleibt und cineastisch wirkt, ohne Datenbank, Framework oder E-Commerce-Stack.
Lösungen
Eine scroll-choreografierte Erzählung in sieben animierten Abschnitten, ein 20-Frame-Stop-Motion-Hero, der das Produkt zur Figur macht, und eine PHP-Routing-Schicht ohne Abhängigkeiten für zweisprachige URLs. ScrollTrigger-Animationen respektieren prefers-reduced-motion; die Sticky-Pill-Navigation bleibt während des iOS-URL-Leistencollapse über Fixed-Positioning verankert (keine Transforms); JSON-LD und zweisprachiges hreflang geben Google und KI-Suchmaschinen volle Sichtbarkeit auf eine Marke, die zuvor in englischsprachigen Web-Indizes fehlte.
