Como este site é construído

A maioria dos portfólios é uma lista: um título, uma grade de logos, uma linha do tempo. Eu queria que o meu parecesse algo feito de propósito por um engenheiro, então dei a ele uma regra: a página se comporta como uma requisição atravessando um sistema.

Essa única ideia explica quase tudo o que você vê. A navegação à esquerda é uma espinha que se preenche conforme você rola. Minha carreira é desenhada como um trace distribuído, com cada experiência sendo um span. Até o tempo de leitura deste blog é uma barrinha, porque uma leitura mais longa é um span mais longo.

A stack#

Mantive a lista curta de propósito. O navegador só precisa de Next.js, React e Motion; todo o resto roda no build.

Na home, aperte ↓ ou simplesmente role a página para iniciar o trace.

Dois temas, um conjunto de tokens#

O tema claro é um pergaminho solarizado inspirado no Noctis Lux, com um acento quente cor de argila. O tema escuro é um verde-azulado profundo. Ambos são definidos uma única vez, como variáveis CSS, e alternados por um atributo data-theme no <html>:

:root,
:root[data-theme="light"] {
  --bg: #fbf5e6;
  --ink: #173f45;
  --accent: #d2603a;
}
 
:root[data-theme="dark"] {
  --bg: #04242b;
  --ink: #ece5cf;
  --accent: #ee8460;
}

O Tailwind v4 mapeia essas variáveis para utilitários (bg-bg, text-ink, text-accent), então nenhum componente contém uma cor fixa. Mudar um tema é mudar uma variável.

Traduções são tipadas#

O site fala inglês e português do Brasil. O en.ts define o tipo Dictionary, e todo outro idioma precisa respeitá-lo:

import type { Dictionary } from "./en";
 
export const ptBR: Dictionary = {
  hero: {
    headlines: ["Construo software que continua {simples} conforme cresce."],
  },
  // ...todas as outras chaves, ou o build falha
};

Esqueceu uma chave e o tsc se recusa a compilar. A marcação {palavra} indica a palavra que recebe o estilo de destaque, tratada por um helper de poucas linhas:

export function rich(text: string): ReactNode[] {
  return text.split(/(\{[^}]+\})/g).map((part, i) =>
    part.startsWith("{") ? <span key={i} className="text-accent italic">{part.slice(1, -1)}</span> : part,
  );
}

Trocar de idioma sem recarregar#

Eu não queria que mudar de idioma parecesse navegar. A home guarda o idioma em estado no cliente, então a página nunca remonta, a posição de rolagem sobrevive e o hero não recomeça.

const out = root.animate(
  [{ opacity: 1, transform: "translateY(0)" }, { opacity: 0, transform: "translateY(8px)" }],
  { duration: 140, fill: "forwards" },
);
await out.finished;
flushSync(() => setState({ lang: next, dict: nextDict }));

Animação que continua leve#

Um site animado não deve punir um celular de cinco anos atrás. As regras são simples:

• Animar apenas transform e opacity. Largura, altura e top forçam layout a cada quadro.
• Manter as mudanças de estado pequenas. O título digitado vive em um componente próprio, então cada tecla re-renderiza uns cinquenta nós em vez da página inteira.
• Pausar tudo que fica em loop quando sai da tela.
• Respeitar prefers-reduced-motion: sem digitação, sem carrossel e com troca de idioma instantânea.

- animate={{ width: "100%" }}   // layout a cada quadro
+ animate={{ scaleX: 1 }}       // só no compositor

Como este blog funciona#

Conteúdo#

Os posts são arquivos MDX no repositório, em src/content/blog/<slug>/en.mdx e pt-BR.mdx. O slug é o mesmo nos dois idiomas, e o inglês é o fallback. O frontmatter é validado no build, então um erro de digitação em uma data quebra o build em vez de ir para produção.

Blocos de código#

O destaque de sintaxe é feito pelo Shiki no build, com as mesmas gramáticas do VS Code¹. A saída com tema duplo faz as cores seguirem o tema do site só com CSS, e nada é destacado no navegador.

npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

Construindo com uma dupla de IA#

Eu construí este site com o Claude Code como dupla de programação. O que fez funcionar foi um arquivo AGENTS.md com as regras: usar os tokens de design, manter os textos nos dicionários, tirar cada fato do meu perfil e nunca inventar um. Trate o agente como um novo colega de time e escreva o que você diria a ele no primeiro dia.

O melhor prompt é um bom conjunto de restrições.