Garderie Mes Meilleurs Souvenirs
Showcase website for an educational daycare
A warm, highly visual showcase website for an educational daycare, designed like an album of “printed memories”: photos as tilted prints, original illustrations and a palette drawn from the logo. Built with Astro and TypeScript in an AI-assisted workflow (Claude Code), under my creative direction.
A React recreation of the Astro site, displayed in a real viewport. Fictional contact details, an illustrated map instead of Google Maps, no external requests.
Type
Client project
Status
Not publicly deployed
Main technologies
Astro · TypeScript · CSS · Animated SVG
The project.
A one-page showcase website, in Quebec French, for a private non-subsidized daycare in Sainte-Thérèse that welcomes children from 0 to 5 years old, including infants. It presents the daycare, its approach, real photos of its premises, daily life, practical information, an FAQ and contact details, with the goal of getting parents to request a visit.
It is a static site, with no database and no tracking. It is fully responsive, with scroll-driven storytelling, interactive sections and careful accessibility.
My role.
- 01Website concept and design
- 02Front-end development
- 03Responsive design
- 04Scroll-driven interactions and animations
- 05Interactive interface
- 06Visual experience
- 07AI-assisted development with Claude Code
Key features.
- Illustrated, animated hero: an SVG garden with a sun, trees, a wheelbarrow, butterflies and floating seeds
- Scroll transition: the hero recedes and tilts while the next section rises over it
- Pinned “values” block whose active step changes on scroll or on click
- Photo carousel (scroll-snap, arrows, dots, mouse drag) with a full-screen viewer
- Fixed header, transparent then white, with a mobile menu; mobile “Call / Request a visit” bar
- Accordion FAQ, practical information sheet and a tax credit banner with links to Revenu Québec
- Contact by phone, pre-filled email and a “Copy address” button (the site intentionally has no form)
- Fully responsive, keyboard accessible, respects prefers-reduced-motion and stays readable without JavaScript
Technologies.
Original site
- Astro 7 (static generation, scoped CSS)
- TypeScript 6 (strict)
- CSS with custom properties (clamp(), Grid, Flexbox, scroll-snap, position: sticky)
- Native <details> and <dialog>
- Hand-drawn SVG, animated with CSS and SMIL
- A single vanilla TypeScript script, no runtime framework
- Self-hosted variable fonts: Fraunces and Figtree
- Lucide icons inlined at build time
- Astro image pipeline (responsive WebP)
Preview in this portfolio
- React
- TypeScript
- Next.js
- Scaled responsive iframe
AI-assisted development. Claude Code as the assistant, with the direction on my side.
Claude Code was used as an AI development assistant for implementation, iterations and debugging, under my direction of the concept, the structure and the final result. I did not write every line of code by hand.
In addition, the photos of children used on the site are AI-generated images, as noted in the project notes. The export for this portfolio (React port, CSS isolation, illustrated map, preview frame) was also produced with Claude Code.
Highlights.
Scroll-driven transition
A single scroll value written directly into transform and border-radius through requestAnimationFrame, with no framework state.
Pinned values
The block stays pinned for a scroll “runway”; click, keyboard and scroll are reconciled so they never contradict each other.
Hybrid carousel
Native scroll-snap for touch and mouse dragging with Pointer Events; the click that ends a drag is ignored.
Printed memories
Photos as white-bordered prints, tilted, with tape strips, that straighten on hover. A fox and a chickadee drawn for the site.
Motion is always optional
Every animation has a prefers-reduced-motion version, and all the content stays readable without JavaScript.
Status
Not publicly deployed.
At the time of this export, the site had not been publicly deployed. It is presented here through its interactive preview.
Good to know
- The preview is a React recreation of the Astro site, displayed in an iframe so that media queries and scroll effects work as they do on the real site.
- Its contact details are fictional values, the Google Maps map is replaced by an illustrated map and the Google reviews widget is removed: the page makes no external requests.
Next project
All projectsConstruction Dominic Gagné
Website for a general contractor
A responsive website for a renovation contractor in Quebec: a strong visual identity, interactive elements and AI-assisted development (Claude Code).
