GrandpaBeans — Black Beans of Ano Vrontou
1 month
|
Designer & Developer
We designed and developed grandpabeans.gr, a bilingual (Greek/English) single-page brand storytelling site for Prodromos Matenoglou — the former physiotherapist who in 2019 left his practice to revive forgotten heritage seeds discovered in his grandfather's warehouse, becoming Greece's only commercial black bean producer. The site opens with a 20-frame stop-motion hero cycling between whole and bitten beans, then unfolds a scroll-driven narrative across seven sections: intro, founder's story, harvest gallery, nutritional profile (24g protein, anthocyanins, complete amino-acid spectrum), FAQ, and contact. Built without a database or framework — bilingual content lives in PHP language files, routing strips an /en/ prefix server-side, and the entire site sustains 60fps scroll animations via GSAP 3.12.5 with full reduced-motion fallbacks. JSON-LD structured data covers Organization, LocalBusiness, Product, and FAQ; an llms.txt file exposes the brand to AI crawlers. The brand's Dragons' Den Greece appearance (S2E2, ANT1, January 2024) — securing a €30,000 deal — is told through the founder's backstory rather than as a banner.
Technologies
PHP
HTML5
CSS3
Vanilla JavaScript
GSAP
ScrollTrigger
Bilingual i18n
Structured Data
Responsive Design
SEO
Challenges
Translating an emotional heritage story — grandfather-to-grandfather seeds, a Dragons' Den-backed comeback, a one-of-a-kind 1,200m altitude monopoly — into a single page that performs on mobile, stays accessible, and feels cinematic, without a database, framework, or e-commerce stack.
Solutions
A scroll-choreographed narrative paced across seven animated sections, a 20-frame stop-motion hero that turns the product into a character, and a zero-dependency PHP routing layer for bilingual URLs. ScrollTrigger animations honour prefers-reduced-motion; the sticky pill nav stays anchored during iOS URL-bar collapse via fixed positioning (no transforms); JSON-LD and bilingual hreflang give Google and AI search engines full visibility into a brand previously absent from English-language web indexes.
