← Sobre mí

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é

  1. 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.

  2. Lo medido, separado de lo propuesto

    Los resultados dicen sobre qué se midieron: un prototipo, una encuesta o un test con personas.

  3. 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.

  4. 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.