Carta Digital – Alma Verde

Carta digital bilingüe para el Hotel Alma Verde: reemplaza el menú PDF de 8MB por una web que carga en < 1.2s en 3G, con i18n implementado con rutas estáticas nativas de Astro sin ninguna librería externa — el turista que accede en inglés descarga exactamente lo que necesita, sin overhead de runtime ni hidratación innecesaria.

🚀 Impacto y Números

• PDF de 8MB → LCP < 1.2s en 3G medido con WebPageTest — experiencia real para turistas con conexión inestable
• 100/100 Lighthouse en Performance y Accessibility con alt texts y ARIA en todos los elementos
• Bundle JS total < 15KB gzipped — Alpine.js para interactividad mínima, Astro hace el resto estático
• Bilingüe ES/EN con rutas separadas y hreflang correcto para SEO multiidioma

⚡ Cómo está construido

i18n sin librerías externas

• Rutas estáticas por idioma: /es/ y /en/ generadas en build time con el sistema de i18n nativo de Astro — un usuario en /en/ nunca descarga nada del /es/
• Content Collections multiidioma: archivos YAML separados por idioma para platos, categorías y traducciones de UI — editables sin tocar código
• SEO multiidioma correcto: meta tags y hreflang generados dinámicamente por ruta y locale

Interactividad puntual con Alpine.js

• Principio de mínima hidratación: solo el acordeón de categorías y los filtros de alérgenos usan Alpine.js — el resto de la página es HTML puro sin ejecutar JS
• Categorías con acordeón: estado local con x-show y transición CSS, cero librerías de animación
• Filtros de alérgenos: gestionados con x-data local sin store externo — simplicidad intencional

Optimización para conexiones débiles

• Imágenes WebP con srcset: tamaños adaptados por viewport con <Image> de Astro y lazy loading nativo
• Prefetching selectivo: solo las rutas de categoría más visitadas — no toda la carta
• Detección de idioma: la ruta raíz detecta el idioma del navegador y redirige sin costo en cliente

🛠️ Stack

Core: Astro con i18n nativo, Alpine.js 3 Content: Content Collections (YAML multiidioma) Styling: Tailwind CSS, iconografía personalizada Tools: Biome, PNPM, Netlify Patterns: Islands Architecture, i18n con rutas estáticas, Content Collections

💼 Lo que este proyecto demuestra

Este proyecto demuestra que puedo:

• ✅ Elegir la herramienta correcta para el problema real: Alpine.js sobre React cuando el contenido es estático — un menú de restaurante no necesita 500KB de bundle
• ✅ Implementar i18n robusta sin depender de paquetes externos, aprovechando las primitivas del framework
• ✅ Optimizar para usuarios reales en condiciones reales: turistas con 3G, no conexiones de oficina
• ✅ Entregar soluciones de negocio completas para clientes reales — este menú está desplegado y en uso

Diferenciador clave: No es un proyecto de práctica con datos falsos. Es un producto en producción para el Hotel Alma Verde, donde la decisión de usar Astro sobre Next.js fue consciente, justificada y medible en los resultados de Lighthouse.