Roadmap interactivo para presentar la evolucion tecnica de Yampi: de soporte IT, CMS y microsistemas a desarrollo web moderno, automatizacion, QA y flujos con LLM.
Demo: yampislabs.github.io/roadmap
- Timeline visual de aprendizaje y experiencia tecnica.
- Matriz de skills por areas: frontend, backend, CMS, datos, QA, automatizacion y LLM workflows.
- Grafico de evolucion con
recharts. - Inspector JSON para mantener el contenido trazable y data-driven.
- UI dark, glassmorphism sutil y motion con
framer-motion. - SEO preparado para GitHub Pages con Open Graph, Twitter Card, JSON-LD, sitemap y manifest.
| Area | Tecnologia |
|---|---|
| UI | React 19, TypeScript, Tailwind CSS 4 |
| Build | Vite 8 |
| Datos | JSON + Zod |
| Motion | Framer Motion |
| Charts | Recharts |
| Icons | Lucide React, React Icons |
| Deploy | GitHub Pages |
src/
components/
layout/ Shell, Hero, About
roadmap/ Timeline, before/now, JSON inspector
sections/ CTAs y bloques de pagina
skills/ Skill matrix y charts
ui/ Primitivas compartidas
data/ Contenido JSON publico
lib/ Carga y parseo de datos
schemas/ Contratos Zodnpm install
npm run dev
npm run build
npm run lint
npm run previewEl contenido vive en src/data/*.json y se valida con Zod en src/schemas/roadmap.ts.
Regla de oro:
- Cambiar esquema primero.
- Ajustar tipos/componentes.
- Actualizar JSON.
- Validar con build.
La app esta preparada para publicarse bajo GitHub Pages:
- Base Vite:
/roadmap/ - URL publica:
https://yampislabs.github.io/roadmap/ - Assets sociales:
public/og-image.png,public/favicon.svg,public/site.webmanifest
- Metadata social completa: Open Graph + Twitter/X Card.
- JSON-LD con
WebSite,PersonyCreativeWork. robots.txt,sitemap.xmly canonical absoluto.- Sin datos privados: no DNI, email personal, telefono, direccion ni fecha exacta de nacimiento.
Proyecto de presentacion tecnica personal. Enfocado en claridad, trazabilidad de datos y una primera impresion cuidada para compartir como portfolio ligero.