Portfolio
Un portfolio diseñado como producto para hacer visible el criterio, los casos y la forma de trabajo detrás de cada decisión.
Este portfolio funciona como un producto de evaluación: ayuda a entender los casos, el criterio que los sostiene y la forma de trabajo detrás de ellos.
Su objetivo es reducir fricción para quien revisa el trabajo. La narrativa, la interfaz y la implementación se organizan para que las decisiones relevantes se puedan recorrer y comprobar.
No es una galería aislada: es un sistema de contenido mantenible que muestra cómo se traducen problemas ambiguos en experiencias funcionales.
El problema
Quien revisa un portfolio suele decidir en pocos minutos si vale la pena seguir conversando.
En ese recorrido necesita responder preguntas concretas:
-
¿Tiene criterio real o solo buen discurso?
-
¿Puede ejecutar o depende de otros?
-
¿Entiende negocio además de diseño?
-
¿Elevaría el nivel del equipo?
El problema no era agregar más información, sino presentar evidencia suficiente con una jerarquía clara. Diseño y desarrollo se resolvieron como una misma responsabilidad: cada decisión visual debía sostenerse técnicamente y cada decisión técnica debía ser comprensible para quien navega.
Decisiones de producto
Priorizar casos y conversión
Connect y Design System (Menta) aparecen primero porque condensan problemas, decisiones y alcance distintos. La navegación es editorial y el CTA principal conserva una jerarquía clara; los enlaces de navegación y las cards comunican destino sin competir con esa acción.
En la grilla, la prioridad se expresa por orden y ancho, no por una card más alta. Cada card es un único enlace con una señal “Abrir caso”, de modo que el área clickeable y la semántica coinciden.
Sistema adaptable
Los tokens semánticos separan intención visual de implementación. El sistema incluye pares de color para light y dark mode, texto estable sobre media, gutters compartidos y una escala de espaciado de 4 px.
Section define densidades compact, comfortable y spacious; PageShell administra el inset de páginas internas. Button, ProjectCard, panels y formularios comparten contratos de padding, stack y foco. Esto permite ajustar el layout sin que cada sección redefina las mismas reglas.
Interacción accesible
La interfaz aplica criterios WCAG mediante contraste tokenizado, targets táctiles de al menos 44 px y foco visible. Los tabs tienen relaciones ARIA y navegación por teclado; los carruseles son manuales, con controles, flechas y swipe, sin cambios automáticos de contenido.
Las animaciones respetan prefers-reduced-motion. En los overlays, useChromeLock aplica inert y aria-hidden al chrome de la página mientras el estado modal está activo.
Arquitectura de contenido
Cada caso vive como Markdown con front matter en src/content/projects/, se procesa durante el build y se sirve como sitio estático. Los componentes reutilizables resuelven la presentación; añadir un proyecto no requiere rehacer arrays de interfaz.
Next.js 16, TypeScript, Framer Motion y container queries sostienen una base pensada para evolucionar contenido y patrones sin perder coherencia.
Evolución
La documentación del sistema conserva las reglas de color, espaciado, profundidad y componentes para que los cambios futuros partan de decisiones explícitas. El resultado no depende de copiar soluciones por sección: el sistema ofrece una base común y deja espacio para ajustar el contenido cuando aparezca nueva evidencia.
Resultado
El resultado es un portfolio que presenta trayectoria y, al mismo tiempo, deja revisar el sistema que la hace legible: decisiones trazables, componentes consistentes, contenido mantenible y una experiencia que considera accesibilidad desde su estructura.
Medición y siguientes pasos
Vercel Analytics y Speed Insights permiten observar tráfico y rendimiento técnico. La siguiente capa de instrumentación puede incorporar profundidad de lectura, interacción con CTAs y consumo de casos para conectar el recorrido con oportunidades concretas.