- In production
- Professional
- 2026
Fondo Ciudad Torres Blancas 2027
Official site for a cycling gran fondo in El Líbano, Tolima
Screenshots
Content
- src/configEvent and env vars
- src/dataOne source per section
- directory.jsonGenerated from the spreadsheet
- → props tipadas
Interface · React 19
- 11 seccionesComponents hold no data
- useGpxTrackProfile and map from GPX
- Motion (LazyMotion)Honors reduced motion
- → vite build
Build and quality
- Vite2 HTML entries + sitemap
- Vitest45 unit tests
- Playwright + axe7 widths, WCAG 2.2 AA
Cross-cutting concerns
Data import
- Excel → directory.json
- Script en Python
Images
- WebP 640 / 1280 / 1920
- Manifiesto de tamaños
Routes
- Lectura de GPX
- Haversine y desnivel
SEO
- HTML por página
- Open Graph y sitemap
Overview
Site for the FCTB 2027 event with routes, rider kit, schedule, registration and FAQ, plus a rider's guide with hotels, rural tourism, trails, local guides and travel tips.
The organizers had their information spread across a spreadsheet, a scanned 40-page PDF and details still to be confirmed. They needed a site that's fast on phones and can be updated without redesigning anything.
- Role
- Designed and built end to end as the sole author: visual identity derived from the logo, typed content, data import, tests and launch.
- Period
- 2026
- Status
- In production
- Code
- Private, described with permission
- React 19
- TypeScript
- Vite
- Tailwind CSS v4
- Motion
- Vitest
- Testing Library
- Playwright
- axe-core
- Python
Context
Fondo Ciudad Torres Blancas is a cycling gran fondo starting in El Líbano, Tolima, on March 21, 2027, with two routes: Medio Fondo (58 km) and Gran Fondo (82 km). The site had to serve riders from out of town who need to register, understand the route and plan the trip.
Architecture
No component holds event data: everything comes from src/config and src/data, and every figure is written exactly once. Sections, FAQ and tests all read the routes from the same file.
The site has two pages with their own HTML for SEO, the home page and the guide, sharing a header, footer and design system. Vite builds both entries and the sitemap from a single page list.
Technical decisions
- Empty data without broken screens: with no registration link there's no button, with no sponsors the tiers show with an invitation, and the countdown only appears for a valid future date.
- Routes ready for GPX: without a file the profile is illustrative and the page says so. With the GPX, the
useGpxTrackhook computes haversine distance and elevation gain, and the real profile, map and download appear without touching components. - A Python script imports the tourism directory (25 hotels, 31 rural operators and 16 guides) from the organizers' spreadsheet and skips empty fields.
- The tourism portfolio was a scanned PDF with no text, so I transcribed it into typed data citing the source page for each block, and compressed the downloadable PDF from 14.9 to 8.2 MB.
- Another script generates WebP variants at three widths plus a manifest with each photo's dimensions.
Design
The palette comes from the logo's greens, with a single amber accent for elevation and progress. Headlines use a condensed typeface that echoes the FCTB lettering, and registration is built around a paper race bib that scales like an object. There's a single orchestrated motion moment, the hero entrance, and everything honors prefers-reduced-motion.
Quality and testing
- 45 unit tests with Vitest and Testing Library: countdown, dates, GPX parsing, schedule, sections and the guide page.
- Visual checks with Playwright on the build at 7 widths (320 to 1920 px): overflow, console errors, anchors, axe WCAG 2.2 AA and reduced motion.
- ESLint with accessibility rules (jsx-a11y), strict TypeScript and Prettier.
Outcome
The site is live at fondociudadtorresblancas.org. Details the organizers haven't confirmed yet, such as the official GPX files or the registration opening, are shown as pending and will slot in without any redesign.