Design encontra código
Como este site é feito.
Stack
Next.js 14 App Router, React, TypeScript, Tailwind CSS and Framer Motion. Vercel builds a branch preview; this PR does not change production.
Architecture
Server-rendered page templates share curated project data. English is the default, Portuguese has /pt routes. Previous Spanish and French pages remain available as preserved static translations. Media and legacy translations are prepared from the existing portfolio source at build time.
Design system
lib/design-tokens.ts generates the CSS custom properties and the documentation on /design-system. Components share these tokens rather than copying separate documentation values.
Accessibility
Semantic navigation, a skip link, visible keyboard focus, labelled media and native video controls. There is no scroll hijacking. Motion can be paused and respects prefers-reduced-motion. Colour pairings are checked automatically; this is not a claim of a full WCAG certification.
Performance
next/image supplies responsive image sizes and AVIF/WebP negotiation. Images below the first screen are lazy loaded. Video uses preload="none"; YouTube embeds load lazily. Manrope and DM Mono are self-hosted by next/font. No custom cursor or smooth-scroll library is loaded.
Evidence
Project screenshots and brand artwork are existing portfolio assets. Missing research, results and process artefacts are visibly marked TODO. No Lighthouse score is claimed without a recorded run.