This site
Portfolio built spec-first, with its own identity and two languages written separately.
- Year
- 2026
- Stack
- Next.js · TypeScript · Tailwind · next-intl · Framer Motion · Vercel
Context
I needed a site that presented the move from full-stack development into AI engineering without looking like a generic AI site, and that worked as proof that I ship products with real finish. The audience: recruiters in Brazil and abroad, tech leads checking depth, and potential project partners.
The method came before the code: a light version of spec-driven development. Vision, content, design system, identity, architecture, deployment and roadmap were written as seven documents in the repository before the first component existed.
Technical decisions
Next.js instead of Angular, which is what I use at work. The goal here was the outcome (per-language routes, SEO, motion, deployment), and the Next ecosystem covers those four with less friction. Angular shows up as a skill, not as the implementation.
Two languages as routes (/pt and /en), not as a text swap in the browser. Each language has its own indexable URL with hreflang, and the English content was written from scratch rather than translated: for roles outside Brazil, the quality of the English is part of the pitch.
Content separated from the interface, in the spirit of clean architecture: copy lives in JSON files per language, sections consume it through a loading layer, and no component knows a content string. Fonts are self-hosted, with no external call at build time.
Motion with a purpose: a single entrance sequence in the hero, a faceted field that reacts to the cursor using the mascot's own geometry, and the mascot following the scroll on wide screens. Everything switches off with prefers-reduced-motion.
Outcome
Live at marcusrdrigues.com, with /pt and /en statically generated, an Open Graph image per language, favicon and app icon with the mascot, a 404 page and a sitemap. The domain stayed at Namecheap with the iCloud email untouched; only the DNS points to Vercel.
The identity (lens raven mascot and MR_ monogram) came out of seven visual comparison rounds, documented in the repository together with what was discarded and why.
What I'd do differently
Test the heading typeface in the context of the page before locking the spec. The serif I picked on paper read as old on screen and was replaced with heavy Geist after the first build. Specs define rules; the eye decides the finish.