Este portfólio

Contexto

Meu portfólio antigo estava no Webflow. Ele cumpria o papel de existir, mas não contava quem eu sou hoje, e custava entre R$ 250 e R$ 280 por mês, cobrados em dólar, por uma plataforma que já não fazia sentido para mim.

O problema

Quando auditei o meu próprio site, do jeito que faria com o de um cliente, a lista foi longa. O texto falava de “Webflow Expert” e de “transformar o seu site”, como quem vende site, não como quem desenha produto. Meu trabalho mais relevante, no Itamaraty, não aparecia. Os cases paravam em 2023 e tinham números sem fonte. Havia bugs visíveis, como um “No items found.” no meio dos cases e um “próximo projeto” que levava para ele mesmo.

E a acessibilidade tinha problemas básicos: quatro títulos principais na mesma página, nenhuma região de conteúdo principal e nenhum link para pular a navegação. Para quem trabalha com acessibilidade, esse ponto doía.

Meu papel

O projeto foi meu de ponta a ponta: auditoria, posicionamento, textos, design, front-end, publicação e segurança. Usei IA como ferramenta para acelerar partes da implementação, do mesmo jeito que uso no Figma. As decisões de produto, de design e de acessibilidade foram todas minhas.

Decisões-chave

Primeiro o texto, depois a tela

Antes de qualquer pixel, reescrevi o posicionamento: UX/Product Designer para sistemas complexos e acessíveis. Criei um guia de escrita para o site inteiro. Cada projeto começa pelo problema, depois vem o que eu fiz e o que mudou. Nenhum número entra sem fonte, e o texto evita as marcas que hoje fazem um texto parecer escrito por máquina.

Uma fonte escolhida por legibilidade

Cheguei a considerar a Rawline, a fonte do gov.br, por causa do meu trabalho com governo. Descartei porque ela faria o portfólio parecer um serviço oficial. Fiquei com a Atkinson Hyperlegible Next, criada pelo Braille Institute para pessoas com baixa visão, com letras parecidas bem diferentes entre si.

Mostrar o “entre design e código” em vez de dizer

A primeira ideia foi um seletor que alternava um campo de formulário entre a especificação de design e o código. Na primeira revisão ficou claro que ninguém entenderia para que ele servia, então saiu. No lugar entrou algo que se lê num relance: um trecho do título selecionado como no Figma, com cursor, selo de WCAG e um painel de propriedades com os valores reais da fonte, da cor e do contraste.

Contar pelo processo o que o NDA esconde

Meu trabalho mais recente não pode ser mostrado. Em vez de deixar um buraco, o case do design system conta como eu liderei e como o time trabalha, com diagramas e um componente recriados do zero para o portfólio.

Leve por padrão

O site é estático, feito em Astro, quase sem JavaScript, e funciona mesmo com JavaScript desligado. Uma política de segurança de conteúdo bloqueia qualquer script de fora, e o servidor envia cabeçalhos de segurança em todas as páginas.

Acessibilidade

O site segue a WCAG 2.2 nível AA. Tem link para pular ao conteúdo, foco visível, alvos de toque de 44px, contraste conferido nos temas claro e escuro, respeito ao pedido de menos movimento e de mais contraste do sistema, e suporte ao alto contraste do Windows.

Rodei o axe em todas as páginas, nos dois temas. Ele encontrou três problemas reais, e um deles é instrutivo: o link de idioma mostrava uma sigla, mas era anunciado com outro texto, porque o nome acessível tinha sido sobrescrito. É exatamente o que acontece quando se segue o conselho comum de “colocar aria-label em todos os links”.

Resultados

Nenhuma violação no axe em nenhuma página, nos temas claro e escuro. O site está em inglês e português, com a mesma estrutura nos dois idiomas. A hospedagem passou a ser gratuita: saí de R$ 250 a R$ 280 por mês para zero, e hoje só pago o domínio. Para publicar uma mudança, basta enviar o código: em menos de um minuto ela está no ar.

O que eu faria diferente

Testaria com leitor de tela mais cedo. A auditoria automática pega muita coisa, mas não tudo, e o teste completo com NVDA é o próximo item da minha lista.