Desenvolvedores têm o mau hábito de construir canivetes suíços quando tudo o que precisam é de uma lâmina afiada. Recorremos a frameworks de frontend pesados antes mesmo da primeira linha de HTML ser escrita. Anexamos bibliotecas de animação, ferramentas de gerenciamento de estado e pipelines de build poderosos o suficiente para rodar uma pequena empresa. Depois, nos perguntamos por que nossos sites de portfólio levam três segundos para renderizar, por que a navegação quebra no mobile e por que os recrutadores abandonam a página antes mesmo de verem os projetos em que passamos meses trabalhando.
Eu segui um caminho diferente no meu último portfólio. Afastei-me do ecossistema de dependências infinitas e construí o site inteiro com HTML semântico e CSS limpo. Sem frameworks JavaScript. Sem etapas de build. Sem motores de animação de terceiros. Apenas a própria plataforma, layout gerenciado por CSS Grid e Flexbox, e uma filosofia de design que trata velocidade e clareza como funcionalidades, e não como algo pensado depois.
O resultado é leve, rápido e profissional. Aqui está exatamente como eu abordei isso.
Comece pela Base
A maior parte da superengenharia começa na base. Um portfólio não precisa ser uma aplicação de página única (SPA). Ele precisa exibir seu trabalho, dizer às pessoas como entrar em contato com você e não atrapalhar. Usei HTML semântico porque o navegador já sabe como renderizar um nav, um article e um footer. Quando você usa o elemento certo para o trabalho certo, você ganha acessibilidade, visibilidade em mecanismos de busca e comportamento responsivo essencialmente de graça. Você também escreve menos código. Uma div com cinco atributos ARIA é apenas uma imitação prolixa de um button. Eu evitei isso completamente.
Para o layout, CSS Grid e Flexbox são mais do que suficientes. O Grid cuida da estrutura macro: as seções gerais da página, a galeria de projetos, o alinhamento dos blocos principais. O Flexbox gerencia as microinterações: links de navegação dentro daquela cápsula, centralização de texto em cards, empurrar um footer para o final da viewport. Juntos, eles substituem qualquer motivo que você pudesse ter para importar um framework de grid de doze colunas em 2018. O código permanece legível. O arquivo CSS permanece pequeno.
Cor, Tipografia e Sobriedade
Eu queria que o portfólio transmitisse calma no momento em que carregasse. O fundo usa uma base clara com gradientes radiais sutis. Nada agressivo. O gradiente possui baixa opacidade, criando uma profundidade suave que evita que a página pareça plana sem gritar por atenção. Ele carrega instantaneamente porque é puro CSS. Não há imagens de destaque para comprimir, não há fallbacks WebP para gerenciar, não há bibliotecas de lazy-loading de JavaScript para configurar.
A tipografia carrega a personalidade. Combinei Outfit com Ovo. A Outfit, uma sans-serif geométrica, cuida de todo o texto da UI: rótulos de navegação, texto de botões, corpo do texto, detalhes de meta-dados. É nítida em telas e permanece legível em tamanhos pequenos. A Ovo, uma serif de médio contraste, serve para os cabeçalhos e títulos principais. Essa combinação dá à página uma sensação editorial discreta. Parece algo desenhado, não apenas um tema aplicado. Mais importante ainda, ambas as fontes são carregadas a partir de uma única chamada a um serviço de fontes ou arquivos auto-hospedados. Não há layout shift, não há flash de texto sem estilo, nem troca de pesos de fonte após a renderização inicial.
O Menu de Cápsula Flutuante
A navegação é onde os portfólios costumam colapsar sob o próprio peso. Menus de sobreposição em tela cheia, scripts de animação escalonada e ícones de hambúrguer que exigem quarenta linhas de JavaScript para alternar uma classe. Eu não queria nada disso.
Eu construí um menu de cápsula flutuante com efeito glassmorphic. É um único contêiner horizontal, arredondado nas bordas, posicionado de forma fixa perto do topo da viewport. O glassmorphism vem de uma cor de fundo semitransparente e uma propriedade backdrop-filter: blur(). Ele flutua sobre o conteúdo sem obscurecê-lo, fornece acesso imediato a cada seção e colapsa graciosamente em viewports menores sem a necessidade de um redesign completo. O efeito parece moderno porque o navegador cuida da composição, não uma biblioteca de canvas.