Tilbage til portfolio
WaterBaby Serres — Svømmeskole for Babyer & Børn

WaterBaby Serres — Svømmeskole for Babyer & Børn

4 uger Design & Frontend-udvikling
WaterBaby Serres underviser babyer fra fire måneder og børn op til ti år i en opvarmet indendørs pool på Elpida Resort. Sitet skulle tale til græske forældre først og til engelsksprogede gæster derefter, uden at blive to sites. Derfor står hver synlig tekst to gange i den samme fil, og skifteren skjuler blot den ene: én URL per side, ingen genindlæsning, ingen fetch, intet andet sæt sider at holde i sync — og græsk læses fuldt ud med JavaScript slået fra. Seks sider bærer det hele — forside, om os, de to programmer, galleri og kontakt — med børnenes fire niveauer fra begynder til øvet, det udstyr og de papirer en forælder skal bruge, og en FAQ. GSAP og ScrollTrigger ligger lokalt frem for på et CDN, og hver animation er additiv: intet skjules på forhånd i CSS, så et fejlet script efterlader en komplet side i stedet for en tom. Ankomstanimationen på forsiden lader en bølge løbe ned gennem viewporten én gang per session og rydder sig selv via CSS-keyframes — den kan ikke spærre en gæst inde bag et overlay, selv hvis al JavaScript dør. Strukturerede data dækker kurser, FAQ, galleri og brødkrummer; en llms.txt oplyser de verificerede fakta til AI-assistenter og er bundet til siderne af testene, så de to ikke driver fra hinanden. Enogtyve Node-tests holder det hele på plads — sidestruktur, græske tekster, redirect-stubbene, loaderens sikkerhedsegenskaber og WCAG-kontrast på hver orange flade.

Teknologier

HTML5 CSS3 Vanilla JS (ES Modules) GSAP 3 ScrollTrigger JSON-LD i18n (EL/EN) Node Test Runner WCAG 2.2 AA SEO

Udfordringer

Et tosproget site betyder normalt alt i to udgaver — to sæt sider, to URL'er, to chancer for at opdatere den ene og glemme den anden. Her vedligeholdes det af én instruktør, så en ekstra kopi af hver side ville være en byrde frem for en funktion. Græsk skulle desuden være den reelle standard, læsbar før noget script kører, for publikum er lokale forældre. Og netop de detaljer, en svømmeskole gerne vil have — ankomstanimation, scroll-reveals, en lightbox — er dem, der efterlader en tom side, når et script fejler på en telefon med dårligt signal.

Løsninger

Begge sprog ligger inline i hver fil, og skifteren vender blot et hidden-attribut: én side at redigere, én URL at dele, intet at holde i sync; præferencen bor i localStorage, og skiftet udsender en custom event, som galleriet lytter på. Ikke-tekstlige strenge — aria-labels, placeholders, meta-beskrivelser, selv dokumenttitlen — oversættes gennem parrede data-attributter i samme funktion, så en oversat side ikke har uoversatte hjørner. Bevægelse er additiv efter reglen, og en test håndhæver det: CSS må aldrig skjule et animeret element på forhånd, så et GSAP der ikke loader, koster kun animationen. Ankomst-overlayet leveres hidden og afsløres kun af en klasse, JavaScript tilføjer, mens dets exit er en CSS-keyframe med fill-mode forwards — script slået fra, blokeret eller crashet, overlayet rydder sig alligevel. Bibliotekerne ligger lokalt, så et CDN-udfald ikke tager sitets bevægelse med sig, og hver af de enogtyve tests blev verificeret ved bevidst at ødelægge det, den beskytter.

Besøg projekt

Galleri

To programkort side om side, Baby Swimming og førskole- & børnesvømning, hver med sit aldersspænd
To Programmer — Fra Fire Måneder til Ti År
Filosofiafsnittet med en forælder og en baby i bassinet, over tre tal: minimumsalder, vandtemperatur og holdstørrelse
Tallene der Beroliger en Forælder — Alder, Temperatur, Holdstørrelse
Baby Swimming-programsiden, en baby på et flydeleje ved siden af teksten om forældrenes deltagelse
Baby Swimming — Et Program Hvor Forælderen Går i Vandet Med
Børnenes fire niveauer som nummererede kort, fra begynder til øvet, vist på engelsk på samme URL
Én URL, Begge Sprog — De Fire Niveauer, Skiftet til Engelsk
To paneler med hvad man skal medbringe til timen og de lægepapirer, der kræves før start
Udstyr og Papirer — Spørgsmålene Før Hver Første Time
Galleri-siden, et grid af fotos i forskellige størrelser fra timerne i bassinet
Galleriet — Fotos i Størrelser Sat af Øjeblikket, Ikke af Grid'et
Lightboxen åben over den nedtonede side, ét foto med billedtekst og pile til forrige og næste
Lightboxen — Et Native Dialog-element, Tastaturet Først
Kontaktsiden med tre kort med telefon, e-mailadresse og stedet i Serres
Kontakt — Tre Måder at Nå en Skole Uden Reception