Leon Leroy Arquitectura
Plataforma de portafolio arquitectónico multi-idioma con arquitectura de islas, pipeline de imágenes automatizado y Lighthouse 100/100 en móvil.
¿Cuál era el problema a resolver?
Los portafolios arquitectónicos exigen fidelidad visual extrema: imágenes de alta resolución que documentan detalles estructurales. Los frameworks tradicionales introducen Layout Shifts masivos (CLS), tiempos de LCP deficientes y un SEO fragmentado entre regiones, destruyendo tanto la experiencia de usuario como la visibilidad en buscadores.
Cómo lo resolvimos en Núcleo Studio
Ingeniería de una plataforma estática multiidioma de alto rendimiento con Astro 5 + Vue.js 3, combinando arquitectura de islas con pipelines de imágenes en tiempo de build para lograr estados de entrada sin JavaScript, integridad de layout perfecta e internacionalización instantánea.
Arquitectura de Islas e Hidratación Parcial
En lugar de forzar un bundle JS monolítico al cliente, los componentes interactivos se hidratan quirúrgicamente:
HeroSlider.vue usa hidratación diferida (client:idle) para priorizar la carga del contenido crítico above-the-fold.
MasonryGallery.vue usa client:visible, inicializando el grid dinámico con Macy.js únicamente cuando entra en viewport, ahorrando tiempo de ejecución en el hilo principal.
Pipeline Automatizado de Imágenes
Para gestionar fotografías arquitectónicas de varios megabytes, se implementó un pipeline de procesamiento en tiempo de build con Sharp:
Inspección dinámica de metadatos y aplicación de anchos máximos estructurales (1920px)
Generación automática de formatos next-gen (.webp, .avif)
Hardcoding de aspect ratios dinámicos en el DOM para eliminar por completo el CLS
Filtrado Asíncrono Multi-Criterio
Sistema de filtrado event-driven entre elementos Astro estáticos y componentes Vue reactivos: CustomEvent('projectFilter') a través de listeners globales en window. El grid de masonry actualiza su estado, ejecuta los cambios de DOM vía nextTick y fuerza recálculos de layout exactamente después de cada micro-interacción.
SEO Multiregión e i18n
Enrutamiento multi-locale concurrente (/es/, /en/, /fr/)
Sitemaps de idioma automatizados con inyecciones regionales (sitemap-en.xml, etc.)
Estructuras JSON-LD estrictas con palabras clave contextuales como VisualArtwork y metadatos geo-targetizados dinámicos.
El impacto en el negocio
Lighthouse 100/100 en Mobile Performance. Carga total por debajo de 1 segundo con componentes visuales pesados, enrutamiento multiidioma dinámico y sets de imágenes responsive que eliminaron completamente el overhead de datos entre dispositivos.
¿Tu empresa tiene un cuello de botella similar?
Analizamos tu operación y te mostramos exactamente cómo podemos automatizarla. Sin compromiso.