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
Data with a verifiable source
Every figure comes from the slides of my projects, and the source slide can be opened from the case.
Measured, separate from proposed
Results say what they were measured on: a prototype, a survey or a test with people.
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.
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.