Back to Portfolio
The WaterBaby home page: under an orange announcement bar and the navigation, with EN selected in the language switch, the headline “Baby and Children’s Swimming” and the line “at Elpida Resort & Spa in Serres” over a dimmed photograph of an indoor pool with inflatable rainbow arches, beach balls and floating toys, above an orange “Explore programmes” button, a white “Reserve a place” button and a wave edged in orange.
Open babyswimserres.gr in a new tab

WaterBaby Serres — Baby & Children's Swimming School

Overview

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.

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.

Gallery

  • The WaterBaby home page: under an orange announcement bar and the navigation, with EN selected in the language switch, the headline “Baby and Children’s Swimming” and the line “at Elpida Resort & Spa in Serres” over a dimmed photograph of an indoor pool with inflatable rainbow arches, beach balls and floating toys, above an orange “Explore programmes” button, a white “Reserve a place” button and a wave edged in orange.

    Home — The Pool Itself Is the First Thing a Parent Sees

  • The section “Baby Swimming Serres” under the label “Our philosophy”: a paragraph naming the team’s two founders, the bold line “Every child is treated as unique.” and a “Meet the team” link, beside a rounded, organic-shaped photograph of a smiling adult in a black and green wetsuit holding up a smiling baby in the pool, above a strip of three figures: 4+ months when the experience begins, 31°C water temperature and 1:4–6 teaching groups.

    Philosophy — The Three Numbers That Reassure a Parent

  • Two programme cards side by side on a pale blue ground. Left, Baby Swimming, labelled 4 months – 3/4 years, over an underwater photograph of a baby with a pink flower headband beneath floating coloured toys. Right, Preschool & Children’s, labelled 3/4 – 10 years, over an underwater photograph of a child in orange goggles and a dark cap. Each has a one-line description and a “Learn more” link.

    Two Programmes — Four Months to Ten Years

  • The heading “Continuous learning, meaningful care” above four numbered qualifications: a physical-education degree from Thessaloniki in 2007, lifeguard certification, first-aid instructor certification in 2017, and baby-swimming qualifications from Austswim, Birthlight and STA, beside a rounded photograph of a smiling adult in a white swim cap and wetsuit holding a laughing baby in the water.

    Qualifications — Four Credentials a Parent Can Check

  • The heading “Equipment & documents” above two panels. The blue panel, “What to bring”, lists for babies a swimsuit, swimming cap and goggles, bathrobe or towel, non-slip sandals and a warm hat for leaving the venue, and for parents a swimsuit, cap, towel, non-slip sandals and personal toiletries. The navy panel, “Required documents”, asks for a paediatrician’s certificate for every child and medical clearance for accompanying parents.

    Equipment and Paperwork — The Questions Asked Before Every First Lesson

  • A grid of underwater photographs in mixed sizes: a large tile of a baby with a yellow flower headband swimming with arms outstretched, two tiles of young children underwater facing the camera, and a row of three showing a child with an orange fin-shaped float on the back, a child gliding beneath a blue kickboard and a child in orange goggles. Each photograph carries the WaterBaby and Elpida logos and a photographer’s credit.

    The Gallery — Photographs Sized to the Moment, Not the Grid

  • The lightbox open over the darkened gallery: a photograph of an adult in a white swim cap and a wet white T-shirt supporting a baby who floats on its back in the pool, the caption “Floating on the back — the first lesson in trust.” below it, round previous and next arrow buttons on either side, and a close button at the top right with a focus ring.

    The Lightbox — A Native Dialog, Keyboard First

  • The contact page’s timetable: the heading “Two days every week” above a card giving Saturday and Sunday, each 9:30 – 14:00, beside a satellite map with a red pin on Elpida Resort & Spa and a card with its address in Serres and a 4.6-star rating; the top of a blue band shows below.

    Contact — Weekend Hours and the Way to the Pool

  • The home page on a tablet: the indoor pool photograph with its inflatable rainbow arches and beach balls, the headline “Baby and Children’s Swimming”, the line “at Elpida Resort & Spa in Serres” and the two buttons over it, a round menu button in place of the navigation, and below the wave the label “Our philosophy”, the heading “Baby Swimming Serres” and the start of its text.

    Home on a Tablet — Two Clear Next Steps Under the Headline

  • The Baby Swimming page on a tablet: a breadcrumb, the title “Baby Swimming” and the line “An enjoyable experience for you and your baby — from four months to three or four years.” over a blue-tinted underwater photograph of a baby with a flower headband, then the label “Together in the water”, the heading “A love of water, skills for life” and two paragraphs.

    Baby Swimming — A Programme the Parent Is In the Water For

  • The Preschool & Children’s page on a tablet: the label “Learning without pressure”, the heading “Swimming that follows the child” and two paragraphs on small groups for ages three or four to ten, above a rounded photograph of a smiling child in a white swim cap holding yellow foam noodles in the pool.

    Children’s Swimming — Small Groups, Paced to Each Child

  • The About us page on a tablet: the label “A few words about us”, the heading “An idea that began in Serres in 2013” and four paragraphs on Marina Tsela’s work and qualifications, above a rounded photograph of an adult in a black and green wetsuit with two small children on blue foam noodles, and two other people seen from behind in the foreground.

    The Story — Who Brought Baby Swimming to Serres, and When

  • The gallery page on a tablet: the label “The WaterBaby experience”, the heading “Water becomes a place to learn and play” and a line explaining that each photograph opens larger and can be browsed with the controls or arrow keys, above a wide photograph of a smiling adult in a wetsuit holding up a smiling baby, then two tiles, a baby lying on a foam mat at the pool’s edge and the indoor pool with inflatable arches, and the tops of two more.

    Gallery — Every Photograph Opens Larger, by Tap or Arrow Key

  • The home page on a phone: the announcement bar over two lines, the logo and a round menu button, the indoor pool photograph with the headline “Baby and Children’s Swimming” and the line “at Elpida Resort & Spa in Serres”, and full-width “Explore programmes” and “Reserve a place” buttons stacked above the wave.

    On the Phone — Full-Width Buttons Within Thumb’s Reach

  • The menu open on a phone: Home, About us, the label “Swimming programmes” with Baby Swimming and Preschool & Children’s indented beside an orange rule, Gallery and Contact, then a language switch with EN selected and an orange button with the phone number 698 7728220.

    Mobile Menu — Both Languages and the Phone Number Built In

  • The programmes on a phone: the heading “The right programme for every stage” and a short centred introduction above the Baby Swimming card, an underwater photograph of a baby with a pink flower headband under floating coloured toys, with the label 4 months – 3/4 years, a one-line description and a “Learn more” link.

    Programmes on the Phone — The Age Range Comes First

  • The weekly timetable on a phone: the heading “Lesson times that work for family life” and a line giving Saturday and Sunday, 9:30–14:00, above a photograph of a grinning child underwater with both thumbs up and a yellow foam noodle, then cards for Saturday and Sunday with their hours.

    Timetable — Weekend Lessons Planned Around Family Life

  • The photo gallery on a phone, one photograph per row: a baby swimming underwater towards the camera, a baby with a pink flower headband gliding with arms spread wide, and the start of a third, a smiling child holding a red ring and an orange toy, each with the WaterBaby and Elpida logos and a photographer’s credit.

    Gallery on the Phone — One Photograph at a Time, Full Width

  • The lightbox open on a phone over the darkened page: an underwater photograph of a baby swimming through an orange ring, with round previous and next arrows over its sides, a close button with a focus ring at its top right corner and the caption “Through the hoop, first time.” in a panel below.

    Lightbox on the Phone — Every Photograph Keeps Its Caption

  • Contact cards on a phone under the label “Contact us” and the heading “We’re here for your questions”: Phone, with the number 698 7728220 underlined, Email, with waterbabyserres@gmail.com underlined, and Address, Elpida Resort & Spa, Agion Anargyron Valley, Serres.

    Contact — Three Ways to Reach a School With No Front Desk