- En producción
- Profesional
- 2026
Fondo Ciudad Torres Blancas 2027
Sitio oficial de un gran fondo de ciclismo en El Líbano, Tolima
Capturas
Contenido
- src/configEvento y variables de entorno
- src/dataUna fuente por sección
- directory.jsonGenerado desde el Excel
- → props tipadas
Interfaz · React 19
- 11 seccionesComponentes sin datos fijos
- useGpxTrackPerfil y mapa desde GPX
- Motion (LazyMotion)Respeta movimiento reducido
- → vite build
Build y calidad
- Vite2 entradas HTML + sitemap
- Vitest45 pruebas unitarias
- Playwright + axe7 anchos, WCAG 2.2 AA
Componentes transversales
Importación de datos
- Excel → directory.json
- Script en Python
Imágenes
- WebP 640 / 1280 / 1920
- Manifiesto de tamaños
Recorridos
- Lectura de GPX
- Haversine y desnivel
SEO
- HTML por página
- Open Graph y sitemap
Resumen
Sitio del evento FCTB 2027 con recorridos, kit, cronograma, inscripciones y preguntas frecuentes, más una guía del ciclista con hoteles, turismo rural, rutas, guías y recomendaciones de viaje.
La organización tenía la información repartida en un Excel, un PDF escaneado de 40 páginas y datos que todavía estaban por confirmar. Necesitaba un sitio rápido en móviles que pudiera actualizarse sin rediseñar nada.
- Rol
- Diseño y desarrollo completos como único autor: identidad visual a partir del logo, contenido tipado, importación de datos, pruebas y publicación.
- Periodo
- 2026
- Estado
- En producción
- Código
- Privado, descrito con autorización
- React 19
- TypeScript
- Vite
- Tailwind CSS v4
- Motion
- Vitest
- Testing Library
- Playwright
- axe-core
- Python
Contexto
El Fondo Ciudad Torres Blancas es un gran fondo de ciclismo que sale de El Líbano, Tolima, el 21 de marzo de 2027, con dos recorridos: Medio Fondo (58 km) y Gran Fondo (82 km). El sitio debía servir a ciclistas de fuera del municipio que necesitan inscribirse, entender el recorrido y planear el viaje.
Arquitectura
Ningún componente contiene datos del evento: todo sale de src/config y src/data, y cada cifra se escribe una sola vez. Las secciones, las preguntas frecuentes y las pruebas leen los recorridos del mismo archivo.
El sitio tiene dos páginas con su propio HTML para SEO, la portada y la guía, que comparten cabecera, pie y sistema de diseño. Vite genera ambas entradas y el sitemap a partir de una sola lista de páginas.
Decisiones técnicas
- Datos vacíos sin pantallas rotas: sin enlace de inscripción no hay botón, sin patrocinadores se muestran las categorías con una invitación, y la cuenta regresiva solo aparece si la fecha es válida y futura.
- Recorridos preparados para GPX: sin archivo, el perfil es ilustrativo y la página lo dice. Con el GPX, el hook
useGpxTrackcalcula la distancia con haversine y el desnivel, y aparecen el perfil real, el mapa y la descarga sin tocar componentes. - Un script en Python importa el directorio turístico (25 hoteles, 31 operadores rurales y 16 guías) desde el Excel de la organización y omite los campos sin información.
- El portafolio turístico era un PDF escaneado sin texto, así que lo transcribí a datos tipados con la página de origen de cada bloque y comprimí el PDF descargable de 14,9 a 8,2 MB.
- Otro script genera variantes WebP en tres anchos y un manifiesto con las dimensiones de cada foto.
Diseño
La paleta sale de los verdes del logo, con un único acento ámbar para la altimetría y el progreso. Los titulares usan una tipografía condensada que recuerda las letras FCTB, y la pieza central de las inscripciones es un dorsal de papel que escala como un objeto. Hay un solo momento de animación orquestado, en la entrada del hero, y todo respeta prefers-reduced-motion.
Calidad y pruebas
- 45 pruebas unitarias con Vitest y Testing Library: cuenta regresiva, fechas, lectura de GPX, cronograma, secciones y la página de guía.
- Verificación visual con Playwright sobre el build en 7 anchos (de 320 a 1920 px): desbordamiento, errores de consola, anclas, axe WCAG 2.2 AA y movimiento reducido.
- ESLint con reglas de accesibilidad (jsx-a11y), TypeScript estricto y Prettier.
Resultados
El sitio está en producción en fondociudadtorresblancas.org. Los datos que la organización aún no confirma, como los GPX oficiales o la apertura de inscripciones, se muestran como pendientes y entrarán sin rediseñar nada.