Volver al portfolio
Portfolio Personal — Mapa de Proyectos Explorable

Portfolio Personal — Mapa de Proyectos Explorable

Reconstruí mi portfolio desde cero. El sitio anterior era una página neobrutalista oscura que ejecutaba un script de Tailwind desde CDN sobre una cuadrícula JSON; este es una compilación estática en Astro 5, con islas de React solo donde la interacción las exige. La pieza central es la página de trabajos: un tablero tipo mapa donde 36 proyectos ocupan cinco territorios, uno por disciplina. La rueda amplía sobre el cursor, arrastrar desplaza con inercia, dos dedos hacen pinza y los filtros vuelan la vista hacia una categoría atenuando el resto. Al acercarse, los pines se convierten en tarjetas. Cada nodo es un enlace real, así que cada proyecto se compila también como su propia página estática, que abre con su diálogo ya en pantalla. La portada es una secuencia de secciones guiadas por el scroll: un hero fijado con un carrusel de seis diapositivas, una sección «sobre mí» cuyos párrafos se rellenan letra a letra mientras se acumula una pila de imágenes, una tira de datos rápidos en ojo de pez, un acordeón de habilidades y un carrusel de proyectos cuya pista se desplaza lateralmente al bajar, en móvil igual que en escritorio. Todo el contenido vive en un único archivo JSON. No hay CMS, ni base de datos, ni runtime de servidor.

Tecnologías

Astro 5 React 19 TypeScript GSAP Lenis Tailwind CSS View Transitions SEO

Retos

Un mapa explorable se vuelve desorientador con facilidad, e inaccesible con la misma facilidad. Además debía seguir siendo una compilación estática —sin servidor— dando a 36 proyectos URLs reales y compartibles, y la animación tenía que aguantar en un móvil.

Soluciones

Cada nodo del mapa es un ancla a una página generada en tiempo de compilación, así que el tablero sigue siendo navegable, compartible y rastreable incluso sin JavaScript. El nivel de detalle cambia pines por tarjetas al ampliar, y los filtros vuelan la vista en lugar de recargarla. Las secciones se fijan con GSAP ScrollTrigger y se controlan por la posición del scroll en vez de por un ticker, lo que las mantiene fieles en dispositivos táctiles. Todo el sitio se entrega como HTML estático desde Astro, con React montado solo en el único componente que realmente lo necesita.