Itinerario Virtual CUC

Context

A virtual educational resource on the sculptural heritage of Caracas’ University City — Carlos Raúl Villanueva’s masterwork, a UNESCO World Heritage Site since 2000. It’s an academic project developed with the University of La Laguna, built for high-school Art History students and their teachers.

The pedagogical challenge: turn eight sculptures by masters like Arp, Calder, Vasarely and Soto, plus the “Synthesis of the Arts” concept, into an experience a 16–17 year-old can navigate alone, in class or projected on screen.

Architecture decisions

• Static Astro, zero framework in the main bundle. Content first: 27 prerendered pages, with Preact only on the islands that truly need interactivity. Animation and game logic ship as inline vanilla JS.
• Content Collections + Zod as the typed source of truth: 8 stops, 8 artists and 8 art movements as validated markdown, not scattered HTML.
• On-demand 3D: models (via Sketchfab and model-viewer) load only when a real model exists, so pages without one pay no weight penalty.
• Dynamic OG images generated at build with Satori (14+ 1200×630 cards) so each stop shares with its own cover.
• Structured SEO with JSON-LD (VisualArtwork, LearningResource, BreadcrumbList, 3DModel), sitemap and robots.

What I built

• A bespoke design system (CSS tokens, self-hosted variable fonts, a classroom presentation mode).
• 8 stop pages with artwork, artist, 3D model and observation questions with answer saving.
• 10 educational mini-games in SVG/canvas (Vasarely’s visual rhythm, Calder’s tricolour, Soto’s interference…) with rewards and progress.
• An interactive campus map, a scroll-snap Villanueva timeline, a PDF visitor passport and a findings notebook synced across tabs.
• localStorage persistence of answers, visited stops and progress, with automatic restoration.

Technical challenges

Balancing interactive richness against performance was the core tension. Keeping ten mini-games, 3D models and persistence without a heavy framework in the bundle meant carefully separating content (static) from interaction (minimal islands and on-demand vanilla).

Accessibility was treated as a requirement, not an add-on: keyboard navigation, native inert for modals, 44×44 px touch targets and ≥ 4.5:1 contrast, audited with axe-core down to zero violations.

Result

192 ms LCP on the home page and ~100 ms on stop pages — twelve times under Google’s threshold — near-zero CLS and zero WCAG 2.2 AA violations on audited pages. A resource a teacher can project and a student can explore alone, on any device.