01
Contexto
Leidy es psicóloga, especialista en gestión de procesos psicosociales y en proyectos de desarrollo, y trabaja con personas, familias, comunidades e instituciones en Popayán y Cali. Necesitaba algo más humano que una hoja de vida y que la contactaran, sobre todo por WhatsApp.
Además de la experiencia narrativa existe /perfil, una versión de lectura generada en el build desde el mismo contenido, pensada para buscadores y para quien quiere leer rápido.
02
Problema / reto
Una experiencia por capítulos se ve muy bien, pero tiende a esconder el contenido: sin JavaScript el sitio estaba vacío, el móvil cortaba texto y 65 textos no pasaban contraste AA. Había que lograr la emoción sin sacrificar accesibilidad ni SEO.
03
Enfoque
Una sola fuente de contenido alimenta las dos versiones. La experiencia cuida el ritmo —preloader corto, transiciones, sonido opcional— y la versión de lectura garantiza que todo sea indexable. Cada corrección quedó cubierta por pruebas de navegador.
- 01Generar /perfil en el build desde el mismo contenido, con canonical, Open Graph y datos estructurados.
- 02SEO local para Popayán y Cali: título, descripción, texto visible y JSON-LD con zona de servicio.
- 03Fuentes propias (Fraunces y DM Sans) y CSP estricta, sin scripts en línea ni Google Fonts.
- 04El sitio funciona aunque el navegador bloquee localStorage y respeta el movimiento reducido.
04
Construcción
MAPA DEL SISTEMA
Portafolio narrativo · cliente
7 capítulos narrativos
/perfil estático e indexable
SEO local · JSON-LD
CSP estricta · WCAG AA
- React 19
- TypeScript
- Vite
- Tailwind CSS 4
- Playwright
- JSON-LD
- Vercel
01
React 19, TypeScript, Vite y Tailwind CSS 4, con un controlador de navegación propio para rueda, teclado y gestos.
02
Gestor de audio con música y efectos; la narración está lista y se activa cuando existan las grabaciones.
03
Pruebas e2e con Playwright en Chromium de escritorio y móvil: calidad, narrativa y SEO.
04
Presupuesto de rendimiento en el build: el JS se mantiene en 279 kB frente a un límite de 750 kB.
05
En pantalla
06
Resultado
Un sitio en producción que se siente editorial y cálido, con todo su contenido accesible e indexable y un contacto a un toque desde cualquier capítulo.
Aprendizaje
Lo espectacular solo suma si lo básico está resuelto: contraste, contenido alcanzable y que un buscador entienda quién es y dónde trabaja.
SIGUIENTE PASO
Cada proyecto es una forma distinta de resolver un problema. Revisemos qué necesitas construir.