GrandpaBeans — Μαύρα Φασόλια Άνω Βροντούς
1 μήνας
|
Σχεδιαστής & Προγραμματιστής
Σχεδιάσαμε και αναπτύξαμε το grandpabeans.gr, μια δίγλωσση (Ελληνικά/Αγγλικά) ιστοσελίδα μίας σελίδας για τον Πρόδρομο Ματενόγλου — τον πρώην φυσιοθεραπευτή που το 2019 άφησε το επάγγελμά του για να αναβιώσει ξεχασμένους σπόρους κληρονομιάς που βρήκε στην αποθήκη του παππού του, γινόμενος ο μοναδικός εμπορικός παραγωγός μαύρων φασολιών στην Ελλάδα. Η ιστοσελίδα ξεκινά με ένα stop-motion hero 20 καρέ που εναλλάσσει ολόκληρα και δαγκωμένα φασόλια, και ξεδιπλώνει μια αφήγηση οδηγούμενη από scroll σε επτά ενότητες: εισαγωγή, ιστορία ιδρυτή, γκαλερί συγκομιδής, διατροφικό προφίλ (24γρ πρωτεΐνη, ανθοκυανίνες, πλήρες φάσμα αμινοξέων), FAQ και επικοινωνία. Κατασκευάστηκε χωρίς βάση δεδομένων ή framework — το δίγλωσσο περιεχόμενο ζει σε αρχεία γλώσσας PHP, η δρομολόγηση αφαιρεί το /en/ prefix server-side και ολόκληρη η ιστοσελίδα διατηρεί 60fps scroll animations μέσω GSAP 3.12.5 με πλήρη fallback για reduced-motion. Τα structured data JSON-LD καλύπτουν Organization, LocalBusiness, Product και FAQ· ένα αρχείο llms.txt εκθέτει το brand σε AI crawlers. Η εμφάνιση του brand στο Dragons' Den Greece (S2E2, ANT1, Ιανουάριος 2024) — με συμφωνία €30.000 — λέγεται μέσα από την ιστορία του ιδρυτή και όχι ως banner.
Τεχνολογίες
PHP
HTML5
CSS3
Vanilla JavaScript
GSAP
ScrollTrigger
Bilingual i18n
Structured Data
Responsive Design
SEO
Προκλήσεις
Η μεταφορά μιας συναισθηματικής ιστορίας κληρονομιάς — σπόροι από παππού σε παππού, μια επιστροφή με στήριξη Dragons' Den, ένα μοναδικό μονοπώλιο σε υψόμετρο 1.200μ — σε μια ενιαία σελίδα που αποδίδει σε mobile, παραμένει προσβάσιμη και αισθάνεται κινηματογραφική, χωρίς βάση δεδομένων, framework ή e-commerce stack.
Λύσεις
Μια αφήγηση χορογραφημένη με scroll, με ρυθμό σε επτά animated ενότητες, ένα stop-motion hero 20 καρέ που μετατρέπει το προϊόν σε χαρακτήρα και ένα PHP routing layer χωρίς εξαρτήσεις για δίγλωσσα URLs. Τα ScrollTrigger animations σέβονται το prefers-reduced-motion· το sticky pill nav παραμένει αγκιστρωμένο κατά τη σύμπτυξη της URL bar του iOS μέσω fixed positioning (χωρίς transforms)· τα JSON-LD και τα δίγλωσσα hreflang δίνουν σε Google και AI search engines πλήρη ορατότητα σε ένα brand που προηγουμένως απουσίαζε από τα αγγλόφωνα web indexes.
