Este site e seu design system

Um design system com contraste verificado por testes, e um site que recusa números sem prova.

gates locais passam, ainda não publicadoÚltima verificação: 2026-10-31 · Commit 83c2253

Resumo

Problema: Um portfólio faz afirmações. Sem uma regra que ligue cada número a uma execução salva, ele deriva para marketing.
Meu papel: Projetei o sistema, os componentes, o pipeline de evidência e as páginas.
Stack: React, TypeScript, Vite, Three.js, ELK (build time), Playwright, axe, Cloudflare Pages
Resultado: O contraste é conferido pelo axe em Chrome real nos dois temas, em viewport largo e estreito. As checagens estão no repositório, não nesta frase.

`colagem-ui` é meu design system em React: tokens, componentes e uma tabela de contraste verificada em código e em navegador real. Este portfólio é construído sobre ele, e o build falha quando um número de projeto não tem evidência.

Veja rodando

O demo ao vivo roda este sistema contra um modelo real e mostra cada passo.

Demo ao vivo

Como funciona

O fluxo inteiro. Aperte tocar ou próximo para percorrer.

Versão em texto deste diagrama

Arquivo de evidência P07. Um relatório ou execução de teste salvo no repositório de um projeto.
- depois Gerador de evidência
Gerador de evidência P07. Lê o arquivo no último commit e copia o valor exatamente.
- depois Registro de evidência
Registro de evidência P07. Valor, modo, comando, exit code, commit e caminho.
- depois Regra dos números
Regra dos números P07. Um teste falha com um dígito sem registro por trás.
- depois Número na página
Número na página P07. A página mostra o valor com um link para o commit exato.

Decisões

Um número precisa de um registro

Os registros de evidência são gerados a partir de arquivos nos repositórios dos projetos em um commit exato. Um teste falha com um dígito no texto de um case que não tenha registro.

Código: scripts/evidence.mjs

Descartado: Digitar números na página à mão.

Diagramas são posicionados no build

O ELK calcula o layout durante o build, e o React desenha SVG a partir do resultado. Nenhum motor de layout chega ao navegador.

Código: scripts/flows.mjs

Descartado: Mermaid, D2 e React Flow no navegador, que medi sob a CSP deste site.

Resultados

Medido

PENDENTE

Não medido, então não afirmado

Desempenho com usuários reais. Ainda sem tráfego.
Taxa de quadros da cena 3D em um celular de entrada. Pendente de teste em aparelho.

Galeria de falhas

O que aconteceu: O Chrome real achou defeitos de contraste que testes unitários não enxergavam.
Causa: O jsdom não calcula contraste. Links e painéis pensados para o tema escuro acabaram sobre superfícies escuras no tema claro.
O que mudou: As correções estão no CSS dos componentes, e o teste no navegador continua no gate.

O que aconteceu: Rótulos quebrados de diagrama falhavam em uma regra de acessibilidade.
Causa: Quebras de linha no texto SVG perdiam os espaços, então o nome visível não batia com o nome acessível.
O que mudou: Cada linha quebrada carrega o seu espaço final.

Valide você mesmo

git clone https://github.com/DiegoVSouza/diego-portfolio-ai.git
cd diego-portfolio-ai
npm ci && python scripts/check_fast.py

Esperado: Lint, tipos, as checagens de evidência, fluxo e catálogo, e os testes unitários passam.

O que eu faria diferente

Eu teria escrito o pipeline de evidência antes da primeira página, para nenhum rascunho nunca ter tido um número digitado.

Próximo projeto

O harness de engenharia