How this site was made.
- Next.js 16
- React 19
- TypeScript
- Tailwind v4
- Motion
- Three.js
- next-intl
- @wrksz/themes
01
Stack
Next.js 16 (App Router), React 19, TypeScript and Tailwind v4. Motion for transitions, Three.js for the globe, next-intl for pt/en. Theming via @wrksz/themes so React 19 doesn't fight an inline script.
02
The intro
The logo draws, flies to the header, then the rest comes in. The 3D globe warms up backstage - if it stalled mid-animation, you'd notice. That's why the wait happens before the draw, not during it.
03
Two languages, one address
Portuguese is the default at /. English lives at /en. Section hashes (#sobre, #projetos) stay stable so shared links don't break. On the first visit, the locale follows the browser.
04
Light and dark
Semantic tokens, no flash. The theme script lands in the HTML before paint; React doesn't need to inject inline JavaScript on the client just for that.
05
The palette
⌘K (or Ctrl K) opens shortcuts: sections, theme, language, email, GitHub. The kind of detail I'd hope to find on someone else's site.
06
Type and color
Geist Sans and Geist Mono. Electric blue in dark mode, a deeper blue in light - the same system, two moods.
The source for this site lives at dollyzn/portfolio on GitHub.