JM Eventos
Plataforma web de alto rendimiento con arquitectura moderna y optimización SEO avanzada
Desafío & Solución
Completé el desarrollo del sitio web para JM Eventos, una empresa de planificación y logística de eventos en Costa Rica. El objetivo era construir una plataforma digital moderna, visualmente atractiva, con un rendimiento excepcional y optimizada para los motores de búsqueda.
La elección de Astro como framework principal fue deliberada, siguiendo un enfoque de "islas de interactividad". Esto permite construir el sitio principalmente con contenido estático que se carga instantáneamente, e "hidratar" solo los componentes interactivos necesarios con JavaScript.
Para el estilizado, opté por Tailwind CSS con su enfoque utility-first, permitiendo construir un diseño completamente personalizado sin escribir CSS tradicional. La configuración en tailwind.config.mjsfue clave para definir la paleta de colores, tipografías y espaciados del proyecto.
Detalles del Proyecto
Stack Tecnológico
Astro
Framework principal con Islands Architecture
Tailwind CSS
Diseño utility-first personalizado
GSAP + ScrollTrigger
Animaciones premium y efectos de scroll
JSON-LD Schemas
Datos estructurados para SEO
WebP + Lazy Loading
Optimización avanzada de imágenes
JavaScript Vanilla
Componentes interactivos optimizados
Características Destacadas
Rendimiento Excepcional
Arquitectura de 'islas de interactividad' con carga instantánea de contenido estático
Arquitectura Modular
Componentes reutilizables y sistema de enrutamiento basado en archivos
SEO Estructural Avanzado
Schemas JSON-LD dedicados para rich snippets y mejor visibilidad
Interactividad Premium
Mega-menús, carruseles y efectos de volteo con GSAP
Optimización de Imágenes
Formato WebP y lazy loading para carga diferida
Sistema de Diseño Cohesivo
Paleta de colores, tipografías y espaciados consistentes
Implementación Técnica
src/pages/
Sistema de enrutamiento basado en archivos de Astro. Cada archivo .astro se convierte automáticamente en una página.
src/components/
Librería de componentes reutilizables como Header.astro, Footer.astro y ServiceCard.astro siguiendo el principio DRY.
src/layouts/
Layout.astro como plantilla base con head HTML, scripts globales y estructura fundamental compartida.
src/components/schemas/
Componentes dedicados para schemas JSON-LD específicos por página, optimizando la visibilidad en buscadores.
Implementación Técnica Avanzada
Dinamismo y Experiencia de Usuario
Para las animaciones sofisticadas y efectos de scroll, integré GSAP con ScrollTrigger. Se desarrollaron scripts personalizados para componentes clave como el mega-menú, carrusel principal y tarjetas con efecto de volteo, asegurando una navegación intuitiva y atractiva.
Optimización de Rendimiento
Implementé un script de lazy loading para imágenes que no están en la ventana visible. Todas las imágenes fueron convertidas al formato WebP para compresión superior sin pérdida perceptible de calidad, reduciendo drásticamente el tiempo de carga inicial.
SEO Estructural con Schemas JSON-LD
Uno de los aspectos más destacados es la implementación de schemas de datos estructuradosa través de componentes dedicados. Creé schemas específicos para cada tipo de página, proporcionando contexto semántico detallado que puede resultar en rich snippets y mejor visibilidad en buscadores.
Impacto del Proyecto
El sitio de JM Eventos representa la perfecta combinación entre diseño moderno, rendimiento excepcional y optimización para motores de búsqueda. La arquitectura de Astro junto con las optimizaciones implementadas resulta en una experiencia de usuario fluida y una plataforma digital que impulsa el crecimiento del negocio.
JM Eventos¿Necesitas una Plataforma de Alto Rendimiento?
Transformemos tu visión en una realidad digital excepcional.