Garderie Mes Meilleurs Souvenirs
Site vitrine d’une garderie éducative
Site vitrine chaleureux et très visuel pour une garderie éducative, conçu comme un album de « souvenirs imprimés » : photos en tirages inclinés, illustrations originales et palette tirée du logo. Réalisé avec Astro et TypeScript dans un flux de travail assisté par l’IA (Claude Code), sous ma direction créative.
Recréation du site Astro en React, affichée dans un vrai viewport. Coordonnées fictives, carte illustrée à la place de Google Maps, aucune requête externe.
Nature
Projet client
Statut
Non déployé publiquement
Technologies principales
Astro · TypeScript · CSS · SVG animé
Le projet.
Un site vitrine d’une page, en français du Québec, pour une garderie privée non subventionnée de Sainte-Thérèse qui accueille les enfants de 0 à 5 ans, poupons compris. Il présente la garderie, son approche, de vraies photos de ses locaux, le quotidien, les informations pratiques, une FAQ et les coordonnées, avec pour objectif d’amener les parents à demander une visite.
C’est un site statique, sans base de données ni suivi. Il est entièrement responsive, avec une narration pilotée par le défilement, des sections interactives et une accessibilité soignée.
Mon rôle.
- 01Concept et design du site
- 02Développement front-end
- 03Design responsive
- 04Interactions et animations au défilement
- 05Interface interactive
- 06Expérience visuelle
- 07Développement assisté par l’IA avec Claude Code
Fonctionnalités clés.
- Hero illustré et animé : jardin en SVG avec soleil, arbres, brouette, papillons et graines qui flottent
- Transition au défilement : le hero recule et s’incline pendant que la section suivante monte par-dessus
- Bloc « valeurs » épinglé dont l’étape active change au défilement ou au clic
- Carrousel de photos (scroll-snap, flèches, points, glisser à la souris) avec visionneuse plein écran
- En-tête fixe, transparent puis blanc, avec menu mobile ; barre mobile « Appeler / Demander une visite »
- FAQ en accordéon, fiche d’informations pratiques et bandeau sur le crédit d’impôt avec liens vers Revenu Québec
- Contact par téléphone, courriel prérempli et bouton « Copier l’adresse » (le site n’a volontairement pas de formulaire)
- Entièrement responsive, accessible au clavier, respecte prefers-reduced-motion et reste lisible sans JavaScript
Technologies.
Site d’origine
- Astro 7 (génération statique, CSS scopé)
- TypeScript 6 (strict)
- CSS avec propriétés personnalisées (clamp(), Grid, Flexbox, scroll-snap, position: sticky)
- <details> et <dialog> natifs
- SVG dessiné à la main, animé en CSS et SMIL
- Un seul script TypeScript vanilla, sans framework à l’exécution
- Polices variables auto-hébergées : Fraunces et Figtree
- Icônes Lucide intégrées au build
- Pipeline d’images Astro (WebP responsive)
Aperçu dans ce portfolio
- React
- TypeScript
- Next.js
- Iframe responsive mise à l’échelle
Développement assisté par l’IA. Claude Code comme assistant, la direction de mon côté.
Claude Code a été utilisé comme assistant de développement IA pour l’implémentation, les itérations et le débogage, sous ma direction du concept, de la structure et du résultat final. Je n’ai pas écrit chaque ligne de code à la main.
Par ailleurs, les photos d’enfants utilisées sur le site sont des images générées par IA, comme l’indiquent les notes du projet. L’export pour ce portfolio (portage React, isolation du CSS, carte illustrée, cadre d’aperçu) a aussi été produit avec Claude Code.
Points forts.
Transition pilotée par le défilement
Une seule valeur de défilement écrite directement dans transform et border-radius via requestAnimationFrame, sans état de framework.
Valeurs épinglées
Le bloc reste fixé pendant une « course » de défilement ; clic, clavier et défilement sont réconciliés pour ne jamais se contredire.
Carrousel hybride
Scroll-snap natif pour le tactile et glisser à la souris en Pointer Events ; le clic qui termine un glisser est ignoré.
Souvenirs imprimés
Photos en tirages à bordure blanche, inclinées, avec des bandes adhésives, qui se redressent au survol. Un renard et une mésange dessinés pour le site.
Mouvement toujours optionnel
Chaque animation a une version pour prefers-reduced-motion, et tout le contenu reste lisible sans JavaScript.
Statut
Non déployé publiquement.
Au moment de cet export, le site n’avait pas été déployé publiquement. Il est présenté ici à travers son aperçu interactif.
À savoir
- L’aperçu est une recréation en React du site Astro, affichée dans une iframe pour que les media queries et les effets de défilement fonctionnent comme sur le vrai site.
- Les coordonnées y sont des valeurs fictives, la carte Google Maps est remplacée par une carte illustrée et le widget d’avis Google est retiré : la page ne fait aucune requête externe.
Projet suivant
Tous les projetsConstruction Dominic Gagné
Site web d’un entrepreneur général
Site web responsive pour un entrepreneur en rénovation du Québec : une identité visuelle forte, des éléments interactifs et un développement assisté par l’IA (Claude Code).
