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 my Master’s thesis for the Teacher Training Master’s (University of La Laguna), built for high-school Art History students and their teachers, with classroom material aligned to Spain’s LOMLOE curriculum.

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 first. Content leads: 38 prerendered pages, with Preact reserved for the islands that truly need interactivity — the mini-games — and nothing else.
• Content Collections + Zod as the typed source of truth: 8 stops, 8 artists and 6 art movements as validated markdown, plus data collections for bibliographic sources (29 references) and a timeline of events (24) as typed data.
• On-demand 3D: models (via Sketchfab and model-viewer from CDN) load only on the stops that have a real model, so the rest 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 seven JSON-LD types (LearningResource, VisualArtwork, TouristAttraction, ItemList, BreadcrumbList, 3DModel, WebSite), sitemap and robots.

What I built

• A bespoke design system (CSS tokens, self-hosted variable fonts) with two keyboard-switchable modes: Explorer for solo study and Presentation for classroom projection.
• 8 stop pages with artwork, artist, 3D model and observation questions with answer saving.
• 9 mini-games as Preact islands: eight “author’s gestures” — one per stop, unlocked when you seal it — that reconstruct each master’s visual language (Calder’s mobile balance, Soto’s kinetic interference, Vasarely’s alphabet…), plus a “Growing Constellation” that evolves across the route. They share infrastructure: a deterministic PRNG, a hint system, haptics, SVG export and prefers-reduced-motion support.
• An original photo essay of 28 works across sculptures and murals, with field research and ~60 photos served signed and watermarked via ImageKit.
• Classroom material: a teachers’ page with a seven-session LOMLOE sequence, rubrics, a UDL sheet and the thesis download; a short 4-stop session for a 50-minute class; and the “Curator’s Challenge”.
• An interactive campus map with pan, zoom and a scale bar that recomputes, a scroll-snap Villanueva timeline, a findings notebook and a “Gaze Profile” exportable to PDF (jsPDF) as assessable evidence.
• A progress-and-reward system: a catalogue of 16 credentials, gold seals and hint/time logging, all persisted in localStorage through a typed, Zod-validated wrapper.
• A glossary with hover definitions injected into the markdown by a remark plugin across 54 terms.

Technical challenges

Balancing interactive richness against performance was the core tension. Moving the mini-games from vanilla to Preact islands let them share a common base (reproducible randomness, accessibility, export) without giving up a site that stays static in everything that isn’t a game, loading interactivity only when it scrolls into view.

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 on key pages.

Result

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