Este site não manda JavaScript
Trinta páginas em três idiomas, menos de 30 KB cada, com acessibilidade e SEO travados no CI. As decisões por trás do site e o que elas custaram.
A página que você está lendo não manda JavaScript para o seu navegador. Nenhum framework, nenhum script de hidratação, nenhum pixel de analytics. A página inteira tem menos de 30 KB e as fontes são a parte mais pesada.
Para um site pessoal com blog, essa é uma escolha defensável. Também é amostra de trabalho: eu vendo serviço de performance e acessibilidade, ficaria estranho vender isso de uma página que demora três segundos para ficar útil.
Estático, porque o conteúdo é estático
O site é Astro: markdown num repositório git, virando HTML na hora do build. Trinta páginas ficam prontas em cerca de meio segundo. Não tem servidor para atualizar, banco para fazer backup, painel administrativo para proteger, e escrever um post é abrir o editor, que é onde eu já estou.
Passei três anos na ConsumerAffairs, um site com sete milhões de visitas por mês, onde velocidade de página era acompanhada como métrica de negócio porque se comportava como uma. A lição daquela época é sem graça e continua valendo: a requisição mais rápida é a que não acontece.
A única exceção é o formulário de contato, que monta um e-mail no seu próprio cliente de e-mail. Doze linhas de script. Todo o resto do site funciona com JavaScript desligado.
Três idiomas, propositalmente desiguais
O inglês fica na raiz, o português espelha tudo, o espanhol cobre as páginas principais. As URLs também são traduzidas, então a página sobre em português é /pt/sobre e não /pt/about.
A desigualdade é o formato honesto de quem lê. Pedido de consultoria chega em inglês. A mentoria, que ajuda dev do Brasil e da Argentina a alcançar cliente lá fora, acontece em português e espanhol. Traduzir todo post para três idiomas triplicaria a manutenção por uma fração do retorno.
Duas páginas em português existem só para busca: uma sobre consultoria em Brasília, outra sobre Goiânia. Não estão no menu. Estão ali porque alguém em Goiânia digitando “consultoria de tecnologia” merece encontrar uma página escrita para ele, e não uma genérica.
As partes que deram mais trabalho
Cor, acredite. O design usava um laranja quente nos destaques, e ele reprovava no contraste da WCAG em tamanho pequeno: 3,31:1 contra o fundo do cartão, quando o mínimo é 4,5:1. A correção foi um segundo laranja, mais fechado, para qualquer texto abaixo de 24px, e custou uma passada em todas as telas. O cinza secundário tinha o mesmo problema, em 4,44:1.
Eu não teria pego nenhum dos dois no olho. Os dois apareceram na medição.
O menu do celular é um checkbox e um label, sem JavaScript. Na primeira tentativa eu escondi o checkbox dos leitores de tela e tirei ele da ordem de tabulação ao mesmo tempo, o que deixou o menu inteiro inalcançável pelo teclado abaixo de 768px. O teste automático dizia que a página estava limpa. Apertar Tab três vezes dizia o contrário.
O que o build cobra
Cada push roda quatro verificações. Uma checagem de conteúdo derruba o build se um título passar de 60 caracteres, se houver metadado duplicado, canonical faltando, mais de um h1 ou travessão no texto, porque não quero travessão na minha escrita e regra que depende da minha memória é regra que eu esqueço. Uma varredura do axe cobre dez páginas em duas larguras e reprova em qualquer violação de WCAG 2.2 AA. O Lighthouse precisa ficar em 100 nas quatro categorias, com limite de LCP, CLS e tempo de bloqueio. E o knip apaga código e dependência que ninguém importa.
Números de hoje: LCP 0,4s, CLS 0, bloqueio 0ms.
O CLS estava em 0,04 até eu pré-carregar as duas fontes que aparecem na primeira dobra. É o tipo de detalhe que ninguém nota quando está certo e todo mundo sente quando está errado.
Valeu a pena
Um construtor de site resolveria isso numa tarde. Este caminho demorou mais, e a diferença não aparece em captura de tela.
Ela aparece quando um recrutador abre o site no wi-fi do hotel, quando alguém navega o formulário com leitor de tela, e quando o Google renderiza as páginas em português e encontra a palavra-chave na URL. Foi para esses três casos que eu construí.