Fario Fly Fishing Club

The idea

Fario is a fly fishing club from Smolyan in Bulgaria's Central Rhodopes and the 2023 national team champions. The starting point was a design prototype made in Claude Design: a single 3 MB HTML file that rendered the whole site at runtime, with hash routing and every font inlined. I turned it into a real website, with every page on its own URL in English and Bulgarian and pre-rendered with proper titles, descriptions and hreflang links, while keeping the design's look, animations and interactions intact.

Implementation

• Built with Astro and strict TypeScript. Five views render in both languages from paired English and Bulgarian copy, with English at the root and Bulgarian under /bg/.
• Ported the design's behaviour into small TypeScript modules: a canvas hero with a real Rhodope skyline and a mouse-driven fly line, scroll reveals, a scroll-driven timeline, an SVG trout-season dial and a fly-line page transition hooked into Astro's client router.
• The language switch works in place through a custom DOM morph, so scroll position, typed form input, running animations and the map survive a change of language.
• Moved the Leaflet map of six river beats out of an inline srcdoc string into its own lazily loaded route, with the language synced over postMessage.
• Replaced 90 inline base64 font sources with 19 cached WOFF2 subsets, preloading only the scripts each language needs.
• GitHub Actions deploys the site to GitHub Pages using the base path GitHub provides, and a single INDEXABLE flag keeps the pre-launch site out of search engines.

Challenges

• Giving each language its own URL while keeping the design's instant, in-place language switch.
• Swapping pages only after the next page has loaded and the transition covers the screen, including cancelled and back/forward navigations.
• Making every link, canonical URL and asset path base-aware, so the same build works on a sub-path or a custom domain.
• Keeping a live staging site out of search results without blocking crawlers from seeing the noindex tag.

Result

The site is live on GitHub Pages as a pre-launch build and redeploys on every push to main. The build produces 20 static pages (five pages and four contact-topic pages in two languages, plus the map and a 404) and weighs about 1.25 MB in total including fonts, against the prototype's 2.95 MB single file. Before launch it still needs the club's photos, a form endpoint and the real social links.

Gallery

Home pageA full-screen hero with a Rhodope skyline and a fly line that follows the cursor.

Bulgarian versionEvery page has a Bulgarian twin under /bg/, switched in place without a reload.

Club storyLarge type and scroll reveals carried over from the design prototype.

Season dialAn SVG dial with the open and closed trout seasons and the days until the next opening.

AchievementsThe 2023 national championship podium and the club's results.

History timelineA scroll-driven timeline from the club's first title in 2019 to 2025.

Contact topicsFour contact topics, each with its own URL and fields.

Pages

Every page exists in English and Bulgarian.

• Home: interactive hero and a map of six river beats
• History: the club's timeline from 2019 to 2025
• Activities: a live trout-season dial
• Achievements: the 2023 podium, results and team
• Contact: four topic forms, each with its own link