Dustkeith Portfolio

¿Qué problema debía resolver el portafolio?

El proyecto necesitaba presentar obra digital con una interfaz ligera y fuera del ritmo de una red social. La prioridad era construir una galería que diera contexto a cada pieza, conservara espacio negativo y funcionara en pantallas pequeñas. La decoración debía acompañar una atmósfera propia y mantenerse detrás de la obra.

En una galería artística, el contenido visual cambia de proporción y peso. Por eso, reservar espacio para las imágenes y controlar el momento en que aparecen es parte de la arquitectura de la página. Si una imagen mueve el contenido cuando termina de cargar, la experiencia pierde estabilidad; si todas se descargan al inicio, el tiempo de carga crece aunque el usuario todavía no haya llegado a ellas.

¿Cómo se planteó la solución?

La solución usa una estructura React responsiva, carga diferida para imágenes fuera de la vista y transiciones de Framer Motion. La jerarquía visual mantiene títulos, navegación y acciones secundarios respecto a la obra. La estética oscura se construye con CSS y un sistema reducido de color, contraste y espaciado para que el sitio se sienta coherente sin depender de una plantilla genérica.

• Diseño responsive para adaptar la galería a distintos anchos sin perder ritmo.
• Reserva de espacio y carga progresiva para reducir saltos durante la llegada de imágenes.
• Animaciones cortas ligadas a estados de entrada y navegación.
• Paleta oscura, tipografía editorial y controles con bajo peso visual.

¿Qué decisiones técnicas fueron importantes?

La decisión principal fue tratar las imágenes como contenido estructural. Cada contenedor debe conocer su relación de aspecto antes de que llegue el recurso, y cada transición debe actuar sobre propiedades que no recalculen el layout de forma innecesaria. En React, la galería también necesita límites claros de estado para evitar renderizados que interrumpan gestos o desplazamientos.

Framer Motion se utiliza para la coordinación de estados visuales, no para reemplazar la estructura HTML. La navegación, los títulos y el contenido siguen siendo elementos semánticos. Esta separación permite que la interfaz conserve sentido cuando el movimiento se reduce o cuando un crawler no ejecuta toda la capa interactiva.

¿Qué desafíos quedaron documentados?

• Controlar el layout shift durante la carga asíncrona de imágenes de alta resolución.
• Evitar ciclos de renderizado innecesarios durante una navegación de galería fluida.
• Mantener una estética gótica oscura con contraste y lectura suficientes.
• Conservar el protagonismo de la obra en móvil, donde el espacio negativo es menor.

¿Qué aprendizaje dejó el proyecto?

Un portafolio artístico no se evalúa solo por su complejidad técnica. La composición, el ritmo y el espacio negativo determinan cómo se percibe la obra. La implementación debe proteger esas decisiones: la optimización de carga, la estabilidad visual y las transiciones existen para hacer más clara la galería, no para demostrar cuántos efectos puede producir el frontend.