Filtered Catalogue
Filters by category, preparation time and difficulty — smooth client-side navigation.
Personal project — Astro 4 & SSG
Cooking Site
Static recipe website
Personal recipe site designed to explore Astro in a concrete context. The challenge: master the modern SSG stack, achieve a Lighthouse 100 score and deliver a smooth, maintainable and performant browsing experience.
Cooking Site — Lighthouse
Score 100Performance100
Accessibility100
Best Practices100
SEO100
100 Lighthouse score
SSG static generation
MDX structured content
WebP optimized images
Features
A 100% performant site
Recipe Cards
Detailed steps, ingredients, tips and optimized WebP images — all in structured MDX.
Client Search
Ingredient-based search engine in the browser, with no server or external API.
SEO & Performance
Lighthouse 100 score, dynamic meta tags, XML sitemap, Open Graph and lazy-loaded images.
Approach
Explore modern SSG
The objective was clear: master Astro in a real context, push performance to its limits and deliver a site that's fast, accessible and well-referenced. Lighthouse 100 on all four metrics. A practical demonstration of what modern SSG can achieve.
Astro 4TypeScriptMDXTailwind CSSSEOPerformance
Build
From schema to Lighthouse 100
Architecture
Setting up Astro with strict TypeScript, MDX Content Collections and recipe data schema.
Design
Tailwind design system integration, recipe cards, filtered catalogue and client search.
Performance
WebP asset optimization, lazy-load, Lighthouse 100 score on all four metrics.
Deployment
Optimized static build and Hostinger deployment with full SEO configuration.
Tech stack
Technologies used
Astro 4TypeScriptTailwind CSSMDXContent CollectionsHostinger
Results
Static, fast
& perfectly SEO'd
Cooking Site demonstrates my ability to build an ultra-optimized static site with Astro — Lighthouse 100, structured MDX content and flawless SEO.
Contact me