Pular para o conteúdo
Voltar ao início

08 — Bastidores

Como este site foi feito.

Não é um changelog. É o mapa das decisões que importam - as que você vê e as que tentam ficar invisíveis.

boot-gate.ts
1// a intro só desenha depois do WebGL aquecer2const cap = setTimeout(unlock, 10_000)3whenGlobeReady(unlock)
5// se o globo travasse no meio do draw, você ia notar6if (ready) setPhase("drawing")

A intro espera o globo. O draw só começa quando o WebGL avisa - ou quando o teto de dez segundos estoura.

O que segura o site

  • 01

    Next.js 16

    App Router

  • 02

    React 19

    RSC

  • 03

    TypeScript

    strict

  • 04

    Tailwind v4

    tokens

  • 05

    Motion

    layoutId

  • 06

    Three.js

    WebGL

  • 07

    next-intl

    pt / en

  • 08

    @wrksz/themes

    no flash

  1. 01

    Stack

    Next.js 16 (App Router), React 19, TypeScript e Tailwind v4. Motion nas transições, Three.js no globo, next-intl no pt/en. Tema com @wrksz/themes para não brigar com o React 19.

  2. 02

    A intro

    A logo desenha, voa para o header e só então o resto entra. O globo 3D esquenta atrás do palco - se ele travasse no meio da animação, você ia notar. Por isso a espera acontece antes do draw, não durante.

  3. 03

    Dois idiomas, um endereço

    Português é o padrão em /. Inglês mora em /en. As âncoras (#sobre, #projetos) ficam estáveis para o link compartilhado não quebrar. Na primeira visita, o idioma segue o do browser.

  4. 04

    Claro e escuro

    Tokens semânticos, sem flash. O script de tema entra no HTML antes da pintura; o React não precisa injetar JavaScript inline no cliente só para isso.

  5. 05

    A paleta

    ⌘K (ou Ctrl K) abre atalhos: seções, tema, idioma, e-mail, GitHub. É o tipo de detalhe que eu gostaria de encontrar no site de outra pessoa.

  6. 06

    Tipo e cor

    Geist Sans e Geist Mono. Azul elétrico no dark, azul mais profundo no light - o mesmo sistema, dois humores.

O código deste site está em dollyzn/portfolio noGitHub