Catalogue Filtré
Filtres par catégorie, temps de préparation et difficulté — navigation fluide côté client.
Projet personnel — Astro 4 & SSG
Cooking Site
Site de recettes statique
Site de recettes personnelles conçu pour explorer Astro dans un contexte concret. L'enjeu : maîtriser la stack SSG moderne, atteindre un score Lighthouse 100 et livrer une expérience de navigation fluide, maintenable et performante.
Lighthouse — Audit
Score parfait 100
Performance 100
SEO 100
Accessibilité 100
Best Practices 100 score Lighthouse
SSG build statique Astro 4
MDX contenu structuré
WebP images optimisées
Features
Performance et UX sans compromis
Fiches Recettes
Étapes détaillées, ingrédients, astuces et images optimisées WebP — tout en MDX structuré.
Recherche Client
Moteur de recherche par ingrédients côté navigateur, sans serveur ni API externe.
SEO & Performance
Score Lighthouse 100, balises meta dynamiques, sitemap XML, Open Graph et images lazy-load.
Architecture
SSG moderne avec Content Collections
Astro 4 — SSG + TypeScript strict
Content Collections MDX — recettes typées
Tailwind CSS — design system utilitaire
Hostinger — déploiement statique optimisé
Catalogue
Recherche client
SEO dynamique
Approche
Explorer en faisant
Le sujet (recettes de cuisine) a été choisi volontairement pour sa simplicité de domaine — l'enjeu était ailleurs : maîtriser Astro, MDX et Content Collections dans un projet livrable. Un terrain d'expérimentation pour les outils du frontend statique moderne, avec comme objectif un score Lighthouse parfait et un code maintenable.
Astro 4SSGMDXPerformanceSEOAutonomie
Construction
De l'architecture au score Lighthouse 100
Architecture
Mise en place d'Astro avec TypeScript strict, Content Collections MDX et schéma de données recettes.
Design
Intégration du design system Tailwind, fiches recettes, catalogue filtré et recherche client.
Performance
Optimisation assets WebP, lazy-load, score Lighthouse 100 sur les quatre métriques.
Déploiement
Build statique optimisé et déploiement sur Hostinger avec configuration SEO complète.
Stack technique
Technologies utilisées
Astro 4TypeScriptTailwind CSSMDXContent CollectionsHostinger
Envie de collaborer ?
La qualité,
même sur un projet perso
Ce projet reflète mon approche : même sans contrainte externe, je vise la rigueur, la performance et le soin du détail. C'est ma façon naturelle de travailler.
Me contacter