Portfolio Personal

La mayoría de portfolios de Product Designers muestran pantallas o explican procesos. Pocos demuestran cómo piensa realmente la persona detrás del trabajo.

Este sitio fue diseñado para resolver esa brecha: convertir el portfolio en una prueba tangible de criterio, ejecución y capacidad de construir productos con estándar real.

No es solo una vitrina de proyectos. Es una muestra directa de cómo abordo problemas ambiguos, estructuro decisiones y transformo ideas en experiencias funcionales.

El Desafío

Quien revisa un portfolio suele decidir en pocos minutos si vale la pena seguir conversando.

En ese tiempo necesita responder preguntas críticas:

• ¿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?

Muchos portfolios obligan a confiar sin evidencia. Muestran resultados finales, pero no revelan la calidad del pensamiento detrás.

Este proyecto buscó eliminar esa fricción: permitir que la evaluación ocurra dentro del propio producto.

Además tenía una condición particular: aquí diseño y desarrollo convivían en una sola responsabilidad. Cada decisión visual debía sostenerse técnicamente, y cada decisión técnica debía sentirse correcta para quien la usa.

No bastaba con verse bien. Tenía que operar como producto.

La Apuesta

Tres hipótesis guiaron la construcción:

H1 — La coherencia genera confianza: cuando narrativa, interfaz y ejecución están alineadas, se percibe madurez profesional.

H2 — El razonamiento visible acelera evaluación: mostrar decisiones permite entender capacidad real más rápido que una galería de imágenes.

H3 — La calidad técnica comunica estándar: velocidad, accesibilidad y consistencia no son extras; son parte de la reputación profesional.

El Enfoque

La estrategia se construyó sobre tres pilares: identidad clara, sistema escalable y experiencia sin fricción.

Identidad y dirección visual

La interfaz debía comunicar desde el primer segundo:

• claridad

• criterio

• modernidad

• sobriedad

Se evitó decoración innecesaria y se priorizó jerarquía, lectura y foco en contenido.

Sistema propio

Se desarrolló un design system con tokens semánticos en CSS (globals.css + Tailwind) y componentes reutilizables — no una librería genérica, sino piezas con criterio de producto:

• Tokens sobre media: text-on-media, surface-hero, indicator-active — estables en light/dark para texto y overlays sobre imágenes (cards de proyectos, hero, 404).
• Layout compartido: PageShell, Section con containerSize="full" y SectionTitle — ancho alineado con nav/hero en todo el sitio.
• Patrones de overlay: DarkHeroFrame + useChromeLock para 404 y acceso protegido a casos.
• Carruseles: CrossfadeSlides, CarouselDots y variantes centralizadas en motion-variants.ts.
• Gobernanza: STRUCTURE.md, DESIGN_SYSTEM.md y reglas Cursor (layout, accesibilidad, tokens) para que decisiones futuras no rompan consistencia.

Stack: Next.js 16 (App Router), TypeScript, Framer Motion con prefers-reduced-motion, container queries en el grid de proyectos.

Esto permite evolucionar el sitio sin rehacer decisiones base, mantener calidad en nuevas secciones y reducir deuda futura.

Además, demuestra una forma de trabajar orientada a escala, no solo a entregar pantallas.

Arquitectura de contenido

Cada proyecto vive como Markdown + front matter en src/content/projects/, procesado en build (lib/markdown.ts) y servido con SSG. El home usa datos estáticos en home-content.ts; about tiene su propio .md.

Agregar un caso nuevo es crear un archivo, no tocar arrays en componentes ni rediseñar la plataforma.

El portfolio crece como producto versionado en Git, no como archivo estático.

Accesibilidad

La experiencia cumple WCAG 2.1 AA con decisiones concretas, no solo intención:

• Jerarquía: un h1 visible por ruta; el markdown de proyectos demota headings automáticamente para no duplicar títulos.
• Contraste: tokens on-media en overlays de imagen; text-inverse solo en bloques de tema invertido (p. ej. sección de casos de uso).
• Motion: carruseles respetan prefers-reduced-motion (autoplay off por defecto) e incluyen control pausa/play.
• Teclado y foco: navegación con targets ≥44px, aria-labelledby en secciones, foco visible en todos los interactivos.
• Imágenes: alt vacío en thumbnails decorativas cuando el link padre ya nombra el destino.
• Overlays: chrome del sitio queda inert mientras 404 o password gate están activos.

Porque calidad también significa inclusión medible, no declarativa.

Resultados

El portfolio hoy cumple dos funciones simultáneas:

Mostrar trayectoria

Experiencia, casos y criterio profesional.

Demostrar capacidad en vivo

Diseño visual, pensamiento de producto, sistemas y ejecución front-end.

También deja una señal importante: no necesito separar estrategia de ejecución para generar valor.

Cómo se mide

El sitio incorpora analítica para entender:

• tráfico y origen de visitas

• páginas más revisadas

• rendimiento técnico

• dispositivos utilizados

• rutas de navegación

Próximos pasos:

• profundidad de lectura

• clicks en CTAs (hero, contacto, casos)

• consumo de casos

• generación de oportunidades

Este portfolio no fue construido para impresionar con efectos. Fue construido para responder una pregunta clave: ¿cómo trabaja esta persona cuando tiene que convertir ambición en producto real?