Cómo se construyó
Este sitio también es un caso de estudio.
Definí el posicionamiento, la arquitectura de información, el modelo de contenido, la dirección visual, las reglas de interacción, los criterios de calidad y los límites de implementación. El desarrollo asistido por IA ayudó a convertir esas decisiones en un producto funcional, pero el criterio, la validación y la aceptación final siguieron siendo mi responsabilidad.
Responsabilidad de producto
Las decisiones que lideré
- Posicionamiento y estrategia de audiencias
- Arquitectura de información y jerarquía de contenidos
- Modelo estructurado de casos y límites de evidencia
- Dirección visual y reglas del sistema de diseño
- Requisitos de interacción, movimiento, accesibilidad y rendimiento
- Criterios de aceptación, QA, despliegue y rollback
Modelo de implementación
Asistido por IA, dirigido por criterio humano
Usé Codex y otras herramientas con IA como apoyo de implementación. Dirigí el sistema, revisé los resultados, corregí desviaciones de arquitectura y diseño, probé la experiencia y asumí la responsabilidad por el resultado final.
La IA aceleró la producción. No decidió la audiencia, el posicionamiento, la jerarquía de información, las fuentes oficiales, los límites de evidencia, el estándar de calidad ni qué era seguro y honesto publicar.
Sistema visual verificable
Una paleta sobria, con una función para cada color.
El azul oscuro transmite autoridad; el azul claro y el crema dan aire a la lectura; el bronce se reserva para bordes, evidencia y acentos puntuales. Se excluyeron de forma intencional los morados, neones y códigos de estado tipo arcoíris.
- Oxford blue
--oxford-blue#0D1E3B - Navy
--navy#0F2A44 - Space cadet
--space-cadet#203565 - Cobalt blue
--cobalt-blue#365194 - Deep teal
--deep-teal#4B687C - Sky blue
--sky-blue#ADD8E7 - Pale blue
--pale-blue#D8E6F2 - Floral white
--floral-white#F4F0E8 - Warm cream
--warm-cream#F2EDE5 - Antique brass
--antique-brass#C5A28C - Antique gold
--antique-gold#B08A44 - Charcoal
--charcoal#2A2D31
--gradient-deep-blue--gradient-navy-slate--gradient-sky-cream--gradient-cream-sand--gradient-blue-brass-edgeArquitectura técnica
Un producto web portátil, guiado por el contenido
Construido con Next.js 16 · TypeScript · GitHub · Cloudflare Workers. La aplicación usa React 19 sobre Vinext y Vite, y se renderiza con componentes semánticos y rutas permanentes para proyectos, enfoque, experiencia, hoja de vida, construcción del sitio, laboratorio y contacto.
El contenido de los casos vive en un modelo de datos tipado, no en seis páginas independientes. Las rutas y los metadatos usan esa misma fuente para mantener consistentes el estado público, la confidencialidad, las métricas y las decisiones.
Registro de decisiones
Por qué el sistema funciona así.
La solidez visual del sitio viene de la jerarquía y la evidencia, no de una estética de dashboard, cifras decorativas o afirmaciones técnicas sin sustento.
El contenido se estructura; no se copia entre páginasConoce el razonamiento detrás de esta decisión.
Los seis casos comparten un mismo modelo para estado, confidencialidad, sistemas, métricas, decisiones, controles, resultados y evidencia. El índice y cada ruta leen de la misma fuente.
La madurez hace parte del contenidoConoce el razonamiento detrás de esta decisión.
Los sistemas en producción, trabajos entregados, demos, reconstrucciones anonimizadas y desarrollos activos se etiquetan por separado para no atribuir una madurez que la evidencia no respalda.
Las decisiones importan más que una lista de herramientasConoce el razonamiento detrás de esta decisión.
Cada caso explica dónde vive la información oficial, por qué se definieron ciertos límites, cómo se maneja la incertidumbre y qué evidencia fue suficiente. La tecnología aparece en contexto, no como una nube de logos.
La capa pública de casos está anonimizada de forma intencionalConoce el razonamiento detrás de esta decisión.
Los datos de solicitantes, credenciales, enlaces internos, identificadores de cuenta, repositorios privados y registros confidenciales no pertenecen a un portafolio. La evidencia solo es útil cuando puede publicarse de forma responsable.
Enlazar imágenes externas no es una estrategia de contenidoConoce el razonamiento detrás de esta decisión.
Las capturas y los diagramas deben pasar por un proceso controlado: conservar legibilidad, incluir contexto y superar una revisión de anonimización. Si falta evidencia, se registra con transparencia; no se inventa un tablero.
La jerarquía crea calidad editorial, no la novedad tipográficaConoce el razonamiento detrás de esta decisión.
Inter Variable se usa en titulares, texto, navegación, etiquetas, métricas, formularios y diagramas. La escala, el peso, el espacio y la composición crean el carácter editorial; la tipografía monoespaciada se reserva para código e identificadores técnicos.
Una base estática responde mejor al productoConoce el razonamiento detrás de esta decisión.
El portafolio prioriza contenido, lectura y SEO. Las rutas permanentes se generan desde contenido estructurado y las interacciones de cliente se reservan para lo que realmente las necesita.
La calidad es un requisito del productoConoce el razonamiento detrás de esta decisión.
El comportamiento responsive, el acceso por teclado, la estructura semántica, los enlaces, el rendimiento y la recuperación del despliegue se revisan antes de publicar; no se dejan como retoques posteriores.
Evidencia de calidad
La calidad se mide sobre el sistema completo.
No publico un resultado de auditoría hasta medir la versión final desplegada. Es mejor reconocer un pendiente que inventar una cifra.
- Compilación de producción
- Verificada · 29 de julio de 2026La compilación de producción terminó y pasaron las pruebas de rutas, tipografía, evidencia, esquema, recursos, contacto e interacciones.
- Revisión de accesibilidad
- Revisada · seguimiento programadoSe revisaron en el navegador el uso del teclado, el manejo del foco, los puntos de referencia, encabezados, etiquetas y la preferencia de movimiento reducido. Queda pendiente una auditoría automatizada de un tercero.
- Auditoría de enlaces
- Verificada · 29 de julio de 2026Las rutas permanentes, los enlaces internos, los anclajes de evidencia y la hoja de vida descargable pasaron la auditoría del sitio renderizado.
- Revisión responsive
- Verificada en celular, tableta, portátil y pantalla ampliaSe revisaron rutas representativas desde celular hasta 1.920 px, incluidos estados interactivos, límites de sistema, filtros, tablas y navegación, sin desbordamientos horizontales ni contenido roto.
El resultado
El portafolio aplica lo mismo que defiende en sus casos.
Definir fuentes oficiales. Separar niveles de madurez. Hacer visible la evidencia. Mantener el riesgo del cliente fuera de la capa pública. Usar automatización e IA para acelerar sin renunciar al criterio.
Ver el sistema de casos de estudio