Developer Portfolio
This portfolio began as a hand-written vanilla JavaScript site. It was migrated in planned, tested phases to React, TypeScript and Tailwind CSS — keeping the same design while turning every project into a real page with its own address, share preview and search metadata.
Architecture
React Router runs in framework mode with server rendering turned off: every page — the home page and each project, in English, Portuguese and Spanish — is pre-rendered to static HTML at build time and then hydrated in the browser. There is no runtime server to maintain.
The code is organized by responsibility (app, pages, widgets, features, entities, shared), and a test fails the build if a lower layer imports a higher one.
Languages and SEO
The language is part of the URL (/, /pt, /es). Each page has its own title, description, canonical address, hreflang alternates, social preview and structured data, and the sitemap is generated from the same route data.
All copy lives in typed JSON files: a misspelled key fails the type check, and tests make sure the three languages always share the same structure.
Security, accessibility and performance
A Content-Security-Policy is generated for every page with a hash of each inline script, so no inline code runs unless it was built into the page. A tiny script in the document head applies the saved theme and language before the first paint — no flash of the wrong theme.
Animations respect the reduced-motion setting and load only when the browser is idle; a first visit downloads about 140 kB of JavaScript. A Playwright suite covers routing, languages, themes, the contact form and automated accessibility checks.