Homepage
The site
A walk through the trilingual site — the homepage, the founding story, the nine activity sections.
Why it's hard
A generic template site solves "we're online" but not the actual problem — a cultural society's website has to hold nearly a century of institutional memory (archived news, founding history, board records) while staying genuinely usable by non-technical volunteer staff, in three languages, without ever mistranslating the organisation's own terminology. Most template builders can do one of those things. None do all four at once.
Every section, top to bottom.
The homepage, top to bottom
How we solved it.
Archive
The 1932 founding story, nine activity sections and a full news history were structured into a real, browsable archive — not a static "About" page.
Translate
An auto-translation pipeline brings the originally Croatian-only news archive into Hungarian and English — with caching and custom handling so it never mangles the society's own names and terms.
Hand over
A custom admin panel lets non-technical staff manage news, activity sections, board members, events and documents themselves — no developer needed for day-to-day content.
Belong
A warm, paper-and-ink editorial design — hand-built page transitions, a torn-calendar-page motif drawn from Hungarian folk art — makes the site feel like the community it represents, not a corporate template.
- React: Interface
- Tailwind CSS: Styling
- Framer Motion: Motion
- Vite: Framework
- TypeScript: Language
- Supabase: Data
- Supabase
News, activity sections, board members, events and documents all needed real relational structure with row-level security — so a volunteer editor can safely manage content without ever touching, or being able to break, anything outside their role.
- Vite
This isn't an SEO-critical e-commerce funnel — it's an editorial, animation-heavy site where the admin panel and public site share one codebase. Vite's dev speed mattered more here than Next.js's server-rendering machinery, which this project didn't need.
- Framer Motion
The torn-calendar-page motif and photo transitions between pages needed hand-tuned, editorial-feeling animation — not a generic fade. Framer Motion's React-native API let every transition be built and refined alongside the actual components, not bolted on after.
The outcome.
- 3
Languages — Croatian, Hungarian, English
Every page, including the auto-translated news archive, reads naturally in all three — not just the static parts of the site.
- 94
Years of history, finally archived online
The founding story, past board members and the published-books record now live somewhere permanent, not scattered across paper records.
- 0
Developers needed for day-to-day content
Staff post news, add board members and manage events themselves — the custom CMS was the actual deliverable, not just the public-facing site.
- Weekly
Automated upkeep job keeps the database awake
A small society running on a free-tier database doesn't have to worry about cold-start delays for its members — a scheduled job keeps it responsive.
Cravio
