cómo hice este portfolio
Las pantallas principales las diseñé en Figma y el sitio lo construí con Claude Code. Acá cuento qué hizo la herramienta y qué decidí yo.
- Figma
- Claude Code
- Astro
- Tailwind CSS
- Playwright (mediciones)
- Web Audio (sonidos)
Qué decidí yo
- Diseñé Inicio, Diseño gráfico y Sobre mí en Figma: paleta, tipografías y la estrella de ocho puntas.
- Decidí qué entra en cada caso, en qué orden se cuenta y de qué lámina sale cada dato.
- Aprobé, ajusté o descarté cada propuesta, desde la estructura de una página hasta el largo de un texto.
- Fijé las reglas del sitio, que están más abajo, y el tono de todos los textos.
Qué hizo Claude Code
- Escribió el código en Astro, Tailwind CSS y JavaScript propio, sin librerías de animación.
- Propuso estructuras y primeros textos a partir de mis PDFs, que después revisé.
- Armó una guía de voz y tono tomando mis textos de Figma como modelo; la aprobé punto por punto.
- Midió lo que a ojo se escapa: palabras sueltas al final de un párrafo, contraste y alturas de las tarjetas.
Reglas que fijé
Datos con fuente verificable
Cada cifra sale de las láminas de mis proyectos, y desde el caso se puede abrir la lámina de origen.
Lo medido, separado de lo propuesto
Los resultados dicen sobre qué se midieron: un prototipo, una encuesta o un test con personas.
Uso de IA declarado en cada caso
Si usé IA en un proyecto, lo digo en el caso. La interfaz de My Valentine, por ejemplo, se generó con Figma Make.
Contexto real de cada proyecto
Los cuatro casos son proyectos finales de Coderhouse y se presentan así: educativos, en solitario y sin cliente.
Criterios de calidad
13 anchos de pantalla
Cada página se revisó de 360 a 1920 px, en español y en inglés, para que ningún texto terminara con una palabra sola en la última línea.
Contraste AA
Los rótulos verdes cumplen el nivel AA de las pautas WCAG: 6,0:1 sobre las tarjetas y 4,8:1 sobre el fondo gris.
Guía de voz y tono
Los textos y el microcopy siguen una guía de UX Writing propia, en español rioplatense y en inglés de Estados Unidos.
Movimiento reducido
Si tu dispositivo pide menos movimiento, las animaciones se apagan y el contenido aparece directo.