BUILD LOG · 003

No quería un portfolio bonito. Quería una máquina de decisión.

De portfolio a sistema interactivo: cómo convertí Enfoque y Trabajo en una experiencia que hace visibles las condiciones, decisiones, capacidades y evidencia.

  • Diseño de interacción
  • GSAP
  • Accesibilidad

El problema no era que faltara diseño

El portfolio ya podía mostrar proyectos y explicar mi perfil. El límite era otro: las rutas importantes todavía podían sentirse como páginas que vivían una junto a otra, no como partes de un criterio compartido.

Quería que la interfaz ayudara a responder una pregunta más útil que “¿se ve bien?”: ¿cómo tomo una necesidad, qué condiciones reviso y qué evidencia respalda lo que sé implementar?

La decisión: convertir navegación en continuidad

Home se volvió un punto de origen. Sus dos salidas no son botones aislados: llevan al proceso o a la evidencia. La composición, las ramas y los estados de foco existen para que esas dos decisiones se entiendan antes de hacer clic.

El objetivo no fue añadir movimiento por movimiento. Cada señal debía reforzar una relación real: origen, canal y destino.

Enfoque: INPUT → CONTROL → FLOW

En Enfoque, la idea de una válvula permite mostrar que un proyecto no pasa directamente de una petición a una interfaz. Primero entra contexto; después se revisan alcance, información y acceso; solo entonces el flujo puede continuar.

Los tres controles no representan métricas ficticias. Son condiciones honestas que suelen cambiar el trabajo: una ruta se restringe, una fuente necesita validarse o una integración queda bloqueada por acceso pendiente. HTML mantiene los controles reales; la máquina material y el SVG solo hacen visible su consecuencia.

Trabajo: capability → route commit → evidence terminals

En Trabajo, la capacidad seleccionada compromete una ruta y revela la evidencia que la sostiene. La separación entre aplicado y laboratorio no intenta igualar proyectos que no tienen el mismo contexto. Distingue entregables, trabajo propio y exploración técnica sin presentar experimentos como clientes.

La evidencia industrial permanece reservada donde corresponde. No se compensa esa confidencialidad con pantallas falsas: se explica el tipo de trabajo sin publicar datos, cliente, PLC, endpoints ni interfaces privadas.

La IA fue herramienta, no autoría automática

Uso IA para explorar alternativas, auditar interfaces, prototipar y revisar problemas técnicos. Sigue haciendo falta definir restricciones, contrastar el resultado contra el sitio real y decidir qué se conserva. El trabajo útil no fue pedir una imagen o un efecto: fue iterar hasta que cada elemento tuviera una función.

La tensión que quedó visible

La estética industrial podía volver más difícil la lectura. La animación podía ocultar jerarquía. Los assets materiales podían pesar demasiado. Por eso el sistema conserva HTML legible, controles nativos, rutas directas, reduced motion y una versión entendible sin JavaScript. La capa visual tiene permiso de mejorar la experiencia, no de esconder el contenido.

Siguientes pasos

El sistema ya permite revisar el portfolio como un conjunto: identidad, proceso y evidencia. Lo siguiente no es añadir complejidad por inercia, sino observarlo en uso, corregir fricciones reales y ampliar evidencia únicamente cuando exista trabajo que pueda presentarse con honestidad.