Construindo meu blog, parte 2: design para entender e explorar

Mon, 19 Oct 2026 04:15:50 -0300

O terminal antigo fazia sentido para mim, mas podia exigir demais de quem visitava. Uma pessoa procurando conhecer meu trabalho não deveria precisar descobrir um comando para encontrar uma informação. Ao adaptar essa área para um desktop, quis aproveitar uma linguagem mais familiar: abrir, explorar e fechar janelas.

Isso não resolveu o design inteiro. Um desktop também pode confundir se tudo depender dele. O site tem páginas próprias para apresentação, projetos, textos e contato; a área interativa é uma possibilidade de exploração. O caminho convencional continua disponível.

Acertar essa combinação foi a parte mais trabalhosa da construção. Eu queria que o site transmitisse minha imagem e que a pessoa entendesse o que estava vendo. A aparência precisava ajudar nessa leitura.

Uma referência para apresentar, outra para construir

No Zeno Rocha, me chamou a atenção a maneira de se apresentar e dar visibilidade ao próprio trabalho mantendo a navegação intuitiva. No Akita, a referência foi principalmente a construção do blog e suas ideias. Não eram duas interfaces que eu pretendia juntar literalmente.

Ao experimentar com Claude, Antigravity e depois Codex com skills, fui refinando uma proposta que precisava combinar com o restante do meu site. Um resultado visual interessante ainda podia ter espaçamento ruim, informação demais no mesmo lugar ou uma interação pouco clara.

Isso apareceu especialmente nas capas dos artigos. Eu queria conservar título, resumo, autor, data, tempo de leitura e temas. Quando essas informações ficaram muito juntas, a imagem grande não compensou a falta de hierarquia. O degradê também precisou de revisão: uma transição que parecia aceitável no tema escuro podia formar uma faixa pesada no claro.

Dar uma função a cada área

Os destaques apresentam uma seleção de até três textos. Os recentes mostram o que foi publicado por último e podem repetir um destaque. O Arquivo oferece um caminho para explorar mais conteúdo e filtrar o que interessa.

Os temas aparecem como pequenos rótulos, sem o símbolo de hashtag. O rótulo comunica uma categoria; a aparência precisa continuar reconhecível como algo em que se pode clicar. Da mesma forma, um link de retorno deve dizer para onde leva. Um texto que promete voltar ao Arquivo precisa realmente levar ao Arquivo.

Esse tipo de detalhe parece pequeno quando avaliado sozinho. Junto, ele determina se a pessoa consegue prever o próximo passo. Meu critério passou a ser observar a função de cada elemento, além da sua posição na captura de tela.

Prévia local do Arquivo em 19/10/2026: busca, filtros e temas têm funções distintas na navegação.

Ver captura em tamanho original

Movimento precisa acompanhar a ação

As imagens dos destaques ficam em preto e branco nos dispositivos com mouse e ganham cor ao passar o ponteiro. A primeira troca parecia direta demais. Ajustamos a transição para dar tempo de perceber a mudança, com uma ampliação discreta da imagem.

O mesmo cuidado apareceu no sumário. Ao clicar do primeiro para o último tópico, o indicador não deveria disputar atenção com cada seção intermediária durante a rolagem. A navegação passou a tratar esse deslocamento como uma ação com um destino escolhido.

Esses efeitos precisam ter alternativas. No celular, não existe um hover confiável como no mouse. Pelo teclado, o foco precisa aparecer sem depender de uma animação lenta. Para quem pede movimento reduzido no sistema, deslocamentos e transições devem ser reduzidos ou removidos. A preferência é lida com a media query prefers-reduced-motion.

O objetivo não é fazer o visitante esperar por um efeito para conseguir usar o site. O movimento deve explicar o que está mudando e permitir continuar a navegação.

Captura real da leitura em português. O sumário mantém a seção selecionada visível ao lado do texto.

Ver captura em tamanho original

Ler em português ou inglês

A versão em português do blog fica em /pt/blog/; a inglesa, em /blog/. Cada artigo tem um arquivo por idioma. A ligação entre eles usa a mesma translationKey:

# Nos dois arquivos; o título e o texto são traduzidos.
translationKey: building-blog-reading

O seletor leva à versão correspondente quando ela existe. Ele não traduz automaticamente o texto. Isso exige revisar também resumos, rótulos, texto alternativo das imagens e links entre as partes da série.

A busca usa um índice local com texto, títulos e outros campos editoriais. Ela ajuda a localizar uma palavra dentro de um artigo; filtros do Arquivo ajudam a reduzir uma coleção por critérios. São tarefas próximas, mas não idênticas.

Comentários reais e limites do teste

Mantive o Disqus existente. Botões de reação que guardavam apenas uma escolha no navegador não entregavam uma interação real comigo, então essa proposta ficou de fora.

O carregamento dos comentários mostrou por que uma captura bonita não comprova funcionamento. Foi preciso revisar o domínio autorizado no Disqus e testar a abertura automática. Também houve interferência de ferramentas e mudanças de aba durante verificações. O diagnóstico precisava separar falha do serviço, configuração do site e problema no próprio teste.

Em produção, os comentários tentam carregar automaticamente. O botão de tentar novamente é uma recuperação para falhas. Nas prévias, a integração de produção fica desativada para não misturar ensaios com conversas reais.