01
Arquitectura de islas
Astro 5 con islas de React 18: solo los componentes interactivos cargan JavaScript y el resto llega como HTML estático. Así se cumplen los Core Web Vitals (LCP, CLS) y se alcanza 98/100 en PageSpeed.
03Sitio web de alto rendimiento
CrossFit Olimpo Box
Sitio web para un box de CrossFit con tres objetivos: cargar rápido en celulares, aparecer en las búsquedas locales y convertir visitantes en nuevos miembros a través de WhatsApp.
- Rol
- Desarrollador Frontend
- Tipo
- Proyecto freelance
- Cliente
- CrossFit Olimpo Box
- Stack
- Astro 5 · React 18 · Tailwind CSS 4
- 98/100
- puntuación en PageSpeed
- 2 pasos
- de la visita al contacto por WhatsApp
- 4K
- video con carga diferida y sin saltos de diseño
01
Contexto
El box necesitaba pasar de una presencia informativa a un canal que atrajera nuevos miembros: mostrar planes y horarios con claridad, verse bien en celular y facilitar el contacto inmediato.
Desarrollé el sitio de principio a fin: arquitectura, interfaz, integraciones y despliegue.
02
La solución
02
Planes legibles en cualquier pantalla
La tabla de tarifas se reorganiza con CSS Grid para que la comparación entre planes siga siendo clara en pantallas pequeñas.
03
Comunidad en tiempo real
Integración con Instagram para mostrar la actividad del box, adaptada a los cambios de autenticación de la API de Meta.
04
SEO local y contacto directo
Datos estructurados JSON-LD, mapa de Google integrado y botón de WhatsApp siempre visible. Desplegado en la red global de Cloudflare Pages.
03
Desafíos técnicos
Video 4K sin penalizar la carga
- Reto
- El video del inicio empeoraba el LCP y la primera impresión del sitio.
- Solución
- Placeholders livianos que se muestran al instante mientras el video se carga en segundo plano, sin provocar saltos de diseño.
APIs externas que cambian
- Reto
- Meta y Google modificaron sus mecanismos de autenticación durante el desarrollo.
- Solución
- Rediseñé la integración sobre las nuevas capas de autenticación para que el feed siga funcionando tras las actualizaciones de políticas.
Tarifas complejas en móvil
- Reto
- La tabla de planes era ilegible en pantallas pequeñas.
- Solución
- Sistema de layout con CSS Grid que reorganiza la jerarquía visual sin perder la comparación entre beneficios.
04
Stack
- Framework
- Astro 5
- React 18
- Interfaz
- Tailwind CSS 4
- Framer Motion
- Integraciones
- Instagram API
- Google Maps API
- SEO e infraestructura
- JSON-LD
- Cloudflare Pages
05
¿Necesitas algo similar?
Estos son los servicios con los que construí este proyecto.
