Este portfólio

Eu queria mostrar projetos e casos reais de trabalho com profundidade: o problema, a investigação, as decisões e o resultado. Um portfólio assim só se mantém vivo se publicar algo novo for uma tarefa de escrita, não de programação.

Por isso desenhei o site em torno do conteúdo. Cada projeto e cada case é um arquivo .mdx. Criou o arquivo, a página existe: card na listagem e na Home, ficha técnica, índice "Nesta página" e link para o próximo.

1. →Arquivo .mdx
2. →Frontmatter validado
3. →Página gerada no build
4. →Card, ficha e índice automáticos
5. ↳campo obrigatório faltando: o build falha e diz qual arquivo e qual campo

Defini os metadados com Zod, usando uniões discriminadas: o valor de um campo decide quais outros são obrigatórios. Um projeto feito para alguém exige o cliente e a stack. Um case anonimizado exige um contexto genérico e proíbe o nome da empresa: se alguém colocar, o build falha antes de o texto ir para o ar.

export const caseSchema = z.discriminatedUnion("anonimizado", [
  base.extend({ anonimizado: z.literal(true), contexto: texto }).strict(),
  base.extend({ anonimizado: z.literal(false), empresa: texto }).strict(),
]);

A ficha técnica mostra só os campos que existem em cada arquivo, e as categorias viram os filtros da listagem. Para destacar tecnologias no card sem poluir os filtros, criei um campo separado de etiquetas.

Texto corrido não basta para explicar uma investigação. Criei componentes que podem ser usados direto no MDX: métricas, fluxos com caminho de falha, janelas de código com abas, abas de hipóteses, cards de decisão e notas de destaque. Todos os desta página são eles.

Cada título de capítulo segue o formato "Rótulo | Título": o rótulo vai para o índice lateral e para a numeração, e o título vira uma frase que já diz a conclusão. Por segurança, o MDX aceita só atributos de texto, sem expressões JavaScript.

Em vez de foto e frase de efeito, o topo da Home conta uma investigação em formato de log, linha a linha, e a seção "Quem sou eu" responde como uma API, com uma requisição e um JSON. É a forma mais direta que encontrei de mostrar como eu trabalho.

linhas de código para publicar um projeto ou case

0

componentes próprios para os capítulos

6

temas, claro e escuro

2

Os cases deste site foram publicados assim: rascunho, revisão e um arquivo novo na pasta. O mesmo vale para este projeto.