Construí mi portafolio como un mapa RPG
Lo que encontré al reemplazar la estructura de portafolio clásica por 7 islas flotantes y un modo spotlight. Decisiones técnicas, errores y resultado.
Josse
La mayoría de portafolios personales siguen el mismo patrón: hero con foto, lista de skills, sección de proyectos, formulario de contacto. Funciona. También es invisible.
Quería algo que reflejara cómo pienso el trabajo — no como una hoja de vida, sino como un ecosistema. Terminé construyendo un hub con 7 islas flotantes, cada una una submarca distinta.
La estructura
Cada isla es un mundo independiente: dev, tech, play, photo, nature, edu, draw. Al hacer clic en una, entra en modo spotlight — el resto se oscurece, aparece un overlay, y la isla seleccionada se centra con su descripción.
Sin React, sin Vue. Astro estático + JavaScript vanilla. La lógica completa del hub son menos de 200 líneas.
Lo que no funcionó al principio
El primer problema fue de posicionamiento. Tenía tres elementos en un flex container centrado: logo arriba, grid al centro, descripción abajo. Cuando el spotlight activaba la descripción del personaje, el logo y la descripción chocaban visualmente.
La solución fue sacar esos elementos del flujo flex y posicionarlos absolutamente dentro del contenedor — top: 8rem para el título, bottom: 3.5rem para la descripción. El grid queda centrado solo en el viewport sin que nada lo empuje.
El segundo problema fue de eventos. Puse pointer-events: none en el contenedor central para que los clics pasaran al overlay. Eso cascadeaba a la grilla y las islas dejaban de responder. Fix: pointer-events: auto explícito en #islands-grid.
El overlay como señal de modo
Sin alguna indicación visual, no queda claro si el usuario está dentro de un modo o no. Agregué un overlay oscuro (rgba(2, 1, 8, 0.6) + backdrop-filter: blur(2px)) que cubre todo cuando hay una isla activa. Hacer clic en ese overlay cierra el spotlight — comportamiento familiar de cualquier modal.
Ese overlay también fue la solución para “click fuera para salir” sin tener que escuchar clicks en document y filtrar cuáles son del grid y cuáles no.
Lo que quedó pendiente
No hay indicador de que las islas son clickeables en primera visita. Hay un hint de teclado (← → navegar · Enter entrar · Esc salir) pero nada que invite al primer clic con mouse. Una animación de pulso al cargar sería suficiente — todavía no la implementé.
El hub está en jotive.com.co. El código fuente, en el repo público de Jotive.