WaterBaby Serres — Baby & Children's Swimming School
4 weeks|Designer & Frontend Developer
WaterBaby Serres teaches babies from four months and children up to ten, in a heated indoor pool at the Elpida Resort. The site had to speak to Greek parents first and to visitors in English second, without becoming two sites. So every visitor-facing string ships twice inside the same file and the switcher only toggles which one is hidden: one URL per page, no reload, no fetch, no second set of pages to keep in sync, and the Greek reads perfectly with JavaScript switched off. Six pages carry it — home, about, the two programmes, a gallery and contact — with the four children's levels laid out from beginner to advanced, the equipment and paperwork a parent needs, and an FAQ. GSAP and ScrollTrigger are vendored locally rather than pulled from a CDN, and every animation is additive: nothing is pre-hidden in CSS, so a failed script leaves a complete page rather than a blank one. The arrival animation on the homepage drains a wave down the viewport once per session and clears itself through CSS keyframes, so it cannot strand a visitor behind an overlay even if the JavaScript dies. Structured data covers the courses, the FAQ, the gallery and the breadcrumbs; an llms.txt states the verified facts for AI assistants and is pinned to the pages by the test suite, so the two cannot drift. Twenty-one Node tests hold the whole thing in place — page structure, Greek copy, the redirect stubs, the loader's safety properties and WCAG contrast on every orange surface.
Technologies
HTML5CSS3Vanilla JS (ES Modules)GSAP 3ScrollTriggerJSON-LDi18n (EL/EN)Node Test RunnerWCAG 2.2 AASEO
Challenges
A bilingual site normally means two of everything — two page sets, two URLs, two chances to update one and forget the other. This one had a single instructor maintaining it, so a second copy of every page was a liability rather than a feature. Greek also had to be the real default, readable before any script runs, because the audience is local parents. And the flourishes a swimming school wants — an arrival animation, scroll reveals, a lightbox — are exactly the things that leave a blank page when a script fails on a phone with a weak signal.
Solutions
Both languages ship inline in every file and the switcher only toggles a hidden attribute, so there is one page to edit, one URL to share and nothing to keep in sync; the preference lives in localStorage and the switch fires a custom event the gallery listens to. Non-text strings — aria-labels, placeholders, meta descriptions, even the document title — translate through paired data attributes handled in the same function, so a translated page has no untranslated corners. Motion is additive by rule and a test enforces it: CSS is never allowed to pre-hide an animated element, so GSAP failing to load costs the animation and nothing else. The arrival overlay ships hidden and is revealed only by a class JavaScript adds, while its exit is a CSS keyframe with fill-mode forwards — script off, blocked or thrown, the overlay still clears. Libraries are vendored locally so a CDN outage cannot take the site's motion with it, and the twenty-one tests were each verified by deliberately breaking what they protect.
Two Programmes — Four Months to Ten YearsThe Numbers That Reassure a Parent — Age, Temperature, Group SizeBaby Swimming — A Programme the Parent Is In the Water ForOne URL, Either Language — The Four Levels, Switched to EnglishEquipment and Paperwork — The Questions Asked Before Every First LessonThe Gallery — Photographs Sized to the Moment, Not the GridThe Lightbox — A Native Dialog, Keyboard FirstContact — Three Ways to Reach a School With No Front Desk
Our website has been designed according to the latest WCAG 2.2 Level AA accessibility guidelines (Web Content Accessibility Guidelines). This means the website is accessible to all users, including people with disabilities.
Accessibility Features:
Appropriate color contrast for easy reading
Readable fonts and text sizes
Full keyboard navigation support
Alternative text for all images
Clear structure and semantic HTML
Screen reader compatibility
Enhanced touch target sizes
Visible focus indicators
Accessibility is our commitment to all users.
EU Funding - NextGenerationEU
Funded by the European Union – NextGenerationEU
This business is funded under the "Subsidy for Entrepreneurial Initiatives of Young Freelance Professionals (NEE)" Action of the Public Employment Service (DYPA), with funding from the European Union – NextGenerationEU, through the Recovery and Resilience Facility "Greece 2.0".
The Greece 2.0 National Recovery and Resilience Plan supports businesses and professionals in their development and digital transformation, offering financial tools to enhance competitiveness, innovation, and employment.
Through this program, savage.design acquired the resources to develop a modern, accessible, and functional digital presence that improves customer communication and service delivery.
The AI Admin Panel is an intelligent interface that lets you manage every aspect of your website by simply talking to it. No CMS dashboards, no technical knowledge, no manual editing. Just tell the AI what you want and watch it happen in real time.
Split-Screen Environment
Chat with your AI assistant on the left while watching changes appear live on the right. Toggle between desktop, tablet, and mobile views to see exactly how your site looks on every device.
Three Operating Modes
Ask
Ask questions about your website, get explanations, and receive guidance — without making any changes.
Act
Tell the AI to make changes. Edit text, update styles, swap images, add sections — all reviewed in draft before going live.
Plan
Request a detailed implementation plan for complex updates. The AI breaks it into steps with scope estimates before starting.
What Your AI Can Do
Edit text, headings, and page content
Update colours, fonts, and layout
Swap and manage images
SEO optimisation and meta tags
Add new sections and pages
Multilingual content management
Version history with one-click rollback
Draft/live separation — review before publishing
Enterprise-Grade Security
All changes go to draft first — never directly to your live site
Full version history with instant rollback to any previous state
Multi-user authentication with role-based access
Comprehensive audit logging of every action
Choose Your Plan
Starter
€40
/month
Powered by Claude Haiku 4.5
Perfect for simple content updates, text edits, and image swaps.
Text and image editing
Basic content management
Version history
1 user account
Most Popular
Professional
€100
/month
Powered by Claude Sonnet 4.6
Design changes, new sections, SEO, and content creation.
Everything in Starter
Design and layout changes
SEO optimisation
Up to 3 user accounts
Enterprise
€250
/month
Powered by Claude Opus 4.6
Complex features, full page redesigns, custom JavaScript, and advanced development.
Everything in Professional
Multi-file feature development
Advanced custom code
Unlimited user accounts
Interested in the AI Admin Panel? Include it in your project quote.