This portfolio —
building while
learning. Este portafolio —
construyendo mientras
aprendo.

The decisionLa decisión

Why coding and not a platform.Por qué código, y no una plataforma.

The easy answer was Figma Sites, Wix, or Webflow. Fast, visual, no code required. But there was a longer-term reason to choose something harder: I want to understand how the products I design actually get built. Not to replace developers — to work better with them. La respuesta fácil era Figma Sites, Wix o Webflow. Rápido, visual, sin código. Pero había una razón de largo plazo para elegir algo más difícil: quiero entender cómo se construyen realmente los productos que diseño. No para reemplazar a los desarrolladores — para trabajar mejor con ellos.

There was also a practical reason learned the hard way: platform tools create vendor lock-in. When a platform changes its pricing, shuts down a feature, or disappears entirely, you lose your work. Code you own stays yours. También había una razón práctica aprendida de la peor manera: las herramientas de plataforma crean dependencia del proveedor. Cuando una plataforma cambia sus precios, elimina una función o desaparece, pierdes tu trabajo. El código que posees se queda tuyo.

The challengeEl reto

A designer learning to think in code.Una diseñadora aprendiendo a pensar en código.

Design tools and code share some vocabulary — pixels, color codes, spacing — and those parts come naturally. But the mental model is completely different. In Figma, you see what you're making as you make it. In code, you have to imagine the visual result from text. That shift is harder than it sounds. Las herramientas de diseño y el código comparten algo de vocabulario — píxeles, códigos de color, espaciado — y esas partes salen de manera natural. Pero el modelo mental es completamente diferente. En Figma, ves lo que estás haciendo mientras lo haces. En código, tienes que imaginar el resultado visual desde el texto. Ese cambio es más difícil de lo que suena.

The unexpected discovery: seeing something visual form from lines of code is genuinely exciting. The feedback loop is different from design — slower, more intentional — but when it works, it works in a way that feels more permanent. You understand why it works, not just that it does. El descubrimiento inesperado: ver cómo algo visual se forma a partir de líneas de código es genuinamente emocionante. El ciclo de retroalimentación es diferente al diseño — más lento, más intencional — pero cuando funciona, funciona de una manera que se siente más permanente. Entiendes por qué funciona, no solo que funciona.

The systemEl sistema

What was actually built.Qué se construyó realmente.

The portfolio isn't just a collection of pages — it's a small design system built from scratch with consistent patterns across every case study. El portafolio no es solo una colección de páginas — es un pequeño sistema de diseño construido desde cero con patrones consistentes en cada case study.

The processEl proceso

Built in parallel.Construido en paralelo.

This portfolio was built while learning to code — not after. Every case study taught something new about HTML, CSS or JavaScript that got applied to the next one. Este portafolio se construyó mientras se aprendía a programar — no después. Cada case study enseñó algo nuevo sobre HTML, CSS o JavaScript que se aplicó al siguiente.

The learning pathEl camino de aprendizaje

Two tracks, running in parallel.Dos tracks, en paralelo.

This portfolio is built on top of an active learning plan — not a 20-week course followed in order, but two parallel tracks that feed each other: one for code, one for AI. Every week something learned in a course gets applied directly to the portfolio. Este portafolio se construye sobre un plan de aprendizaje activo — no un curso de 20 semanas seguido en orden, sino dos tracks paralelos que se alimentan entre sí: uno de código, uno de IA. Cada semana algo aprendido en un curso se aplica directamente al portafolio.

AI collaborationColaboración con IA

Claude as collaborator,
not replacement.Claude como colaborador,
no reemplazo.

This portfolio was built in active collaboration with Claude AI — and that collaboration started before a single line of code was written. The first step was taking Claude 101 to understand how the tool actually works, how to prompt effectively, and how to get the most out of it. From that foundation, a project was born. Este portafolio se construyó en colaboración activa con Claude AI — y esa colaboración empezó antes de escribir una sola línea de código. El primer paso fue tomar Claude 101 para entender cómo funciona realmente la herramienta, cómo hacer prompts efectivos y cómo sacarle el máximo. De esa base nació un proyecto.

But there's something important to say about this — something that gets lost in the "AI replaces professionals" discourse that's been repeated so much it's started to feel true. Pero hay algo importante que decir sobre esto — algo que se pierde en el discurso de "la IA reemplaza a los profesionales" que se ha repetido tanto que empezó a parecer verdad.

The courses exist for exactly this reason. Learning HTML, CSS and JavaScript isn't about being able to build everything from scratch — it's about having enough language to direct, correct and push beyond what AI generates by default. The designer's eye, the design decisions, the narrative of each case study — those came from a person. Claude helped build the vehicle. The destination was always hers. Los cursos existen exactamente por eso. Aprender HTML, CSS y JavaScript no es para poder construir todo desde cero — es para tener suficiente lenguaje para dirigir, corregir y empujar más allá de lo que la IA genera por defecto. El ojo de diseñadora, las decisiones de diseño, la narrativa de cada case study — eso vino de una persona. Claude ayudó a construir el vehículo. El destino siempre fue de ella.

What I learnedLo que aprendí

The unexpected lessons.Las lecciones inesperadas.