devsigner.xyz

Contexto

devsigner.xyz es mi espacio de trabajo público: un portfolio construido para presentar proyectos, reflexiones y experimentos sin separar el diseño de cómo se comporta en el navegador.

La web está planteada como un sistema editorial ligero. Astro entrega HTML estático rápido; el SVG inline permite que la gráfica sea parte real de la interfaz, no una imagen decorativa; y la interacción se añade sólo cuando aporta una lectura mejor.

El proceso detrás del hero

El hero actual no apareció de una vez. Los estudios funcionales que aparecen a continuación recogen una parte del proceso: empezar por una metáfora de caos y orden, separar capas y sistemas, y probar una coreografía alternativa con Anime.js.

La versión final de producción se mantiene en la home. Aquí conservo los estudios previos y la alternativa coreografiada para enseñar las decisiones, no sólo el resultado acabado.

Criterios

• Movimiento con intención: el motion explica un cambio de estado, no ocupa el espacio por sí mismo.
• Artefactos reales: cada línea, nodo y pieza es SVG o HTML que el navegador puede leer y animar.
• Accesibilidad y rendimiento: las escenas respetan prefers-reduced-motion y pausan su actividad continua cuando no están visibles.

Aprendizaje

Mostrar el proceso permite enseñar el razonamiento detrás de una interfaz. Las variaciones ayudan a comparar densidad, ritmo, jerarquía y significado antes de elegir qué versión merece estar en la portada.