Stone Home - Mármol & Acabados
Sitio web para taller especializado en piedra natural. Catálogo dinámico de materiales, portafolio de proyectos y optimización de imágenes premium.
El Problema
Stone Home necesitaba una plataforma digital que reflejara la calidad premium de sus acabados en piedra natural. El desafío era manejar un gran volumen de imágenes de alta resolución (mármol, granito) sin comprometer el rendimiento, además de ofrecer una navegación fluida en dispositivos móviles para clientes y arquitectos.
La Solución
Desarrollé una plataforma estática con Astro 5 que utiliza Sharp para la optimización agresiva de imágenes. Implementé un catálogo dinámico con fichas técnicas para cada material y una experiencia móvil optimizada con filtros colapsables y navegación táctil, logrando tiempos de carga instantáneos.
Características Clave
- Catálogo dinámico de materiales con fichas técnicas
- Optimización de imágenes con Sharp (WebP & Lazy Loading)
- Hero con Video & Póster optimizado (< 3MB)
- UX Mobile Premium con filtros colapsables
- SEO dinámico (Metatags Open Graph por material)
Resultados
Mejora significativa en la presentación de materiales y proyectos. El sitio logra puntuaciones de 100% en Web Vitals, proporcionando una vitrina digital de alto nivel para el taller.
Sitio web para taller especializado en piedra natural: mármol, granito, cuarzo y ónix. Una plataforma optimizada diseñada para mostrar catálogos de materiales de alta calidad y portafolio de proyectos arquitectónicos.
Tecnologías Principales
- Astro 5: Generación estática (SSG) para máximo rendimiento.
- Vanilla CSS: Diseño a medida sin frameworks pesados, optimizando el CSS crítico.
- Sharp: Procesamiento y optimización de imágenes en tiempo de build.
- Cloudflare Pages: Hosting de alto rendimiento y despliegue continuo.
UX & Performance
El proyecto prioriza la experiencia visual a través de un hero impactante con video optimizado y un catálogo que permite a los usuarios explorar la textura y detalles de cada piedra. La implementación de astro:assets garantiza que, a pesar de la alta calidad visual, el peso de la página sea mínimo.