← About me

how I built this portfolio

I designed the main screens in Figma and built the site with Claude Code. Here is what the tool did and what I decided.

  • Figma
  • Claude Code
  • Astro
  • Tailwind CSS
  • Playwright (measurements)
  • Web Audio (sounds)

What I decided

  • I designed Home, Graphic design and About me in Figma: palette, typefaces and the eight-pointed star.
  • I decided what goes into each case, in what order it is told and which slide each data point comes from.
  • I approved, adjusted or discarded each proposal, from the structure of a page to the length of a text.
  • I set the site’s rules, listed below, and the tone of every text.

What Claude Code did

  • It wrote the code in Astro, Tailwind CSS and custom JavaScript, with no animation libraries.
  • It proposed structures and first drafts from my PDFs, which I then reviewed.
  • It put together a voice and tone guide using my Figma texts as the model; I approved it point by point.
  • It measured what the eye misses: single words left on the last line, contrast and card heights.

Rules I set

  1. Data with a verifiable source

    Every figure comes from the slides of my projects, and the source slide can be opened from the case.

  2. Measured, separate from proposed

    Results say what they were measured on: a prototype, a survey or a test with people.

  3. AI use disclosed in each case

    If I used AI in a project, the case says so. The My Valentine interface, for example, was generated with Figma Make.

  4. The real context of each project

    The four cases are Coderhouse final projects and are presented that way: educational, solo and without a client.

Quality criteria

  • 13 screen widths

    Every page was checked from 360 to 1920 px, in Spanish and English, so that no text would end with a single word on its last line.

  • AA contrast

    The green labels meet the WCAG AA level: 6.0:1 on cards and 4.8:1 on the gray background.

  • Voice and tone guide

    Texts and microcopy follow my own UX Writing guide, in Rioplatense Spanish and US English.

  • Reduced motion

    If your device asks for less motion, animations turn off and content appears right away.