Portfólio v2
Este site. Redesign num monorepo com identidade própria, api de conteúdo em Go, internacionalização e gates de qualidade verificáveis — inclusive um teste de composição em preto e branco que reprovou a primeira versão da interface.
- categoria
- pessoal
- stack
- Next.js
- TypeScript
- next-intl
- Tailwind
- Zod
- Turborepo
Contexto
O portfólio anterior comunicava um fullstack genérico. A tese nova é um nicho declarado — qualidade, segurança e operação — e uma identidade visual derivada de composição japonesa: notan, ma e pigmento de terra em vez de vermelho de alarme.
Pressão e restrição
A identidade proíbe o caminho fácil: nada de HUD, medidor, kanji decorativo ou qualquer asset do jogo que serviu de referência. Sobra precisão, espaço e materialidade — e nenhuma delas se verifica no olho.
Leitura
Um teste de notan de dois valores — a tela reduzida a preto e branco chapados — mostrou que a hierarquia estava toda em cor: o CTA primário, a linha de decisão e a barra de veredito desapareciam. A mesma medição mostrou o contrário do esperado no acento, que ocupava 1,3% da dobra contra um teto de 10%.
Decisão
Reconstruir a hierarquia em valor, não em cor: contorno claro no CTA sobre fundo escuro, linha de decisão começando em valor alto e painel atrás do veredito. O acento continuou abaixo do teto, porque o limite é teto e não meta.
Execução
Paleta e tipografia saíram para tokens em CSS, sem hex escrito em componente. Contraste conferido par a par nos dois temas, foco de teclado visível em qualquer superfície, link de pular para o conteúdo como primeiro elemento focável e fontes auto-hospedadas por next/font. O código saiu de agentes de IA em três níveis, do mais leve ao mais forte: cada tarefa com briefing, lista de arquivos permitidos e hash antes e depois, e arquivo fora da lista reprova a entrega. O que toca contrato, api ou CI passa antes por revisão de um agente que não escreveu, e o merge é meu.
O que foi medido e cortado
- Aumentar a saturação do acento para dar contraste. Reprovado pela regra de área: mais vermelho em tela escura lê como erro de sistema, não como decisão.
- Usar o vermelhão litúrgico shu, #FF3500, por ser a cor mais reconhecível da referência. Reprovado: o pigmento correto é o bengara, óxido de ferro, que é o que faz o acento parecer tinta e não alarme.
Como sei que funcionou
Contraste medido nos dois temas, área do acento somada por pixel na dobra e tamanho do JavaScript compartilhado conferido em build de produção — não em modo de desenvolvimento, onde a primeira leitura de 184 kB estava inflada.
- menor contraste de texto
- 4,57par mais apertado dos dois temas, contra o mínimo de 4,5 do WCAG AA
- área de acento na dobra
- 1,3%medido na home em 1440 px de largura, contra teto de 10%
- JavaScript compartilhado
- 102 kBprimeira carga em build de produção, depois de trocar o import de namespace dos ícones por mapa estático
impacto
A identidade deixou de ser descrição e virou contrato executável: nove regras verificáveis no repositório, cada uma com o instrumento que a mede. Tela nova só é aprovada depois de passar pelo teste de dois valores.
o que transfere
Se a hierarquia da sua tela some em preto e branco chapado, o problema é composição e nenhuma paleta conserta. O teste custa um filtro CSS e pega o defeito antes do primeiro usuário.