página de destino con Astro 5, TypeScript y cero frameworks CSS

Qué problema resolvía

Necesitaba una página de entrada para xarop.com: rápida, accesible, multilingüe y fácil de mantener. La web principal (web.xarop.com) es un blog/portafolio generado con Node.js + Markdown, pero no es una landing. Necesitaba algo con más control visual y rendimiento de primer nivel.

Por qué Astro

Astro 5 compila a HTML estático por defecto — cero JavaScript en el cliente si no lo necesitas. Permite mezclar componentes .astro, TypeScript y CSS sin ningún overhead de runtime. El routing se basa en ficheros, lo que hace que la internacionalización (CA / ES / EN) sea directa.

El resultado: ~10 KB de JavaScript, todo él opcional y progresivo (IntersectionObserver para scroll reveal, toggle de tema, cambio de sabor).

Stack

• Astro 5 — build y routing
• TypeScript — toda la lógica de componentes y configuración
• Vanilla CSS — design tokens, paletas de color (flavors), modo oscuro/claro, sin frameworks
• Asap — tipografía auto-alojada (OFL), sin llamadas externas
• Google Analytics 4 — integrado vía variable de entorno, opcional
• Cloudflare Pages / Vercel / Netlify — deploy estático, configuración por ENV

Características

• 7 sabores de paleta persistidos en localStorage
• Modo oscuro/claro: automático por prefers-color-scheme + toggle manual
• Multilingüe: Catalán (por defecto), Español, Inglés vía routing de Astro
• Navegación sticky con hamburguesa móvil, selectores de idioma y sabor
• Scroll reveal sin dependencias externas — IntersectionObserver puro
• Accesible: focus rings, prefers-reduced-motion, semántica HTML
• MIT para el código; SIL OFL para la tipografía

Distribución del código

CSS 37% · TypeScript 34% · Astro 27% · PHP 1% · JS 1%

xarop.com → · Código en GitHub →