How this site was made

A personal site is a portfolio too, so this page covers the decisions behind this one and how I use AI alongside the engineering I already knew. I designed, wrote and reviewed all of it.

Why so much for a simple site: For a personal site this is more than it needs, and that is on purpose: it shows how I work on real projects. On a client project, the first decision is how much rigour the problem calls for. Cross-browser testing, audits and reviews cost time and money, so I size them to the risk, the deadline and the budget, and I say plainly what can wait.
Engineering with AI: The foundation is what I already knew how to do: architecture, TypeScript, databases, testing, security and code review. AI comes in as a tool. I use Claude Code with agents guided by expert checklists. Often several of them propose different solutions to the same problem and argue them out until the best one stands, and independent reviewers test the result. I decide, review every change and choose what ships.
The drawings: The drawings are a single piece, made in SVG and canvas from data. It starts at the globe, moves down to Portugal, climbs the career staircase and ends at the team of agents, zooming in at each level as you read. The text scrolls and the drawing follows without cuts, so the story reads as one piece. The guided tour uses the same drawing, and everything is translated into all 4 languages, the words inside the drawings included.
The video: The summary video was generated in code from the same drawings, fonts and colours as the page, frame by frame in a browser, with an AI video skill. The music is generated too, in A minor, with a soft tick on every step of the staircase, and there is no synthetic voice. It exists in all 4 languages.
Stack: Next.js 16, React 19 and TypeScript, styles in Tailwind CSS 4, a Postgres database on Supabase, hosting and CDN on Vercel, email through Resend and Cloudflare's anti-bot check.
Admin panel: Behind the site there is a panel of its own: messages, contacts by stage, visits and where they come from, CV requests and a security log. Access is through a single-use link sent by email, with an alert on every sign-in. It was built to grow: it can become the hub for other tools and back offices, behind the same access control.
Quality: Every change goes through automated tests in 4 languages, on phone and desktop, in Chrome, Safari and Firefox, accessibility included (WCAG 2.2 AA). Security follows OWASP, with server-side validation, an anti-bot check, sending limits, Row Level Security in the database, HTTPS enforced and a Content Security Policy, among other techniques. In Lighthouse, 96 to 100.
SEO and GEO: Four linked languages, schema.org structured data, a sitemap and an llms.txt: the site is built to show up in search engines and also to be found and cited by AI assistants.
Privacy: The site uses no tracking cookies and no ads. IP addresses are gone after 14 days, and messages and CV requests are deleted within 24 months. The details are in the privacy policy.
CV: The PDF comes from the same content as the site, in 4 languages, built for people and for applicant tracking systems: one column, real text, standard headings and clickable links.