Jornal

Registro 002

Saindo da tríplice aliança: como nasceu meu portfólio em Astro

Depois de muito HTML, CSS e JavaScript, resolvi experimentar algo novo — e construir meu portfólio acabou mudando a forma como eu organizo projetos para a web.

Desenvolvimento6 min de leitura
  • Astro
  • Frontend
  • Portfólio

Por bastante tempo, qualquer ideia de site começava do mesmo jeito para mim: um index.html, um arquivo de CSS e outro de JavaScript. Eu chamo esse trio de tríplice aliança porque ele resolveu praticamente tudo que eu quis fazer no começo e, sendo bem sincero, ainda resolve muita coisa. Foi com essa base que aprendi a montar uma página, apanhei de responsividade e entendi que uma animação simples pode consumir uma tarde inteira quando decide não colaborar.

O problema não estava nas ferramentas, mas no automático. Eu já abria os mesmos arquivos, repetia uma estrutura parecida e seguia pelo caminho conhecido sem pensar muito sobre organização. Quando decidi reconstruir meu portfólio, percebi que seria uma boa chance de testar outro jeito de trabalhar. O site precisava existir, claro, mas também podia servir como laboratório em vez de ser só uma vitrine pronta e parada.

Foi assim que o Astro entrou no projeto. Eu já conhecia o framework de nome e entendia mais ou menos a proposta, mas ainda não tinha usado de verdade em algo meu. A decisão veio menos de uma lista de vantagens e mais daquela vontade de descobrir se uma ferramenta nova mudaria a forma como eu pensava a página.

Começar pelo conhecido era confortável

HTML, CSS e JavaScript puros têm uma qualidade que eu continuo valorizando: dá para enxergar com facilidade o que está acontecendo. Quando alguma coisa quebra, os arquivos estão ali e a relação entre eles costuma ser direta. Isso ajudou bastante no começo e continua sendo útil sempre que preciso entender o comportamento real do navegador, sem depender de abstrações demais.

Ao mesmo tempo, conforme o portfólio foi crescendo, aquela liberdade começou a cobrar organização. Cabeçalho, rodapé, metadados e pequenos padrões de interface apareciam em mais de um lugar. Copiar e colar ainda funcionava, só que qualquer alteração passava a exigir a famosa pergunta: “em quantos arquivos eu repeti isso mesmo?”. Não era uma tragédia técnica; era só um sinal de que o projeto já pedia uma estrutura melhor.

Também percebi que eu estava evitando ferramentas novas por conforto. É fácil dizer que algo mais simples é suficiente — e muitas vezes é mesmo —, mas existe diferença entre escolher simplicidade depois de comparar opções e usar sempre o mesmo caminho porque ele já está decorado. Nesse projeto, eu queria fazer a primeira coisa.

Por que o Astro entrou na história

O Astro me chamou atenção porque ele não joga fora os fundamentos que eu já conhecia. Um arquivo .astro ainda parece familiar: existe HTML, existe CSS e existe JavaScript. A diferença aparece na maneira como essas partes podem ser separadas em componentes e combinadas depois, sem mandar um pacote enorme de código para o navegador só para exibir conteúdo estático.

Na prática, isso mudou minha forma de organizar o portfólio. O cabeçalho deixou de ser um trecho que eu precisava repetir; o SEO ganhou um componente próprio; páginas diferentes passaram a compartilhar o mesmo layout. Em vez de pensar em uma página gigante, comecei a pensar em peças menores, cada uma com uma responsabilidade que eu consigo explicar sem abrir cinco abas no editor.

Não virei especialista em Astro de uma hora para outra. Tive que entender a sintaxe, descobrir onde cada coisa deveria ficar e refazer algumas escolhas que pareciam ótimas na primeira tentativa. Ainda assim, a curva foi agradável justamente porque o framework não esconde a web. Eu continuava trabalhando com elementos conhecidos, só que agora dentro de uma estrutura que aguentava melhor o crescimento do projeto.

O portfólio virou laboratório

A primeira versão do plano era simples: escolher meus melhores projetos, escrever uma apresentação curta e colocar tudo no ar. Naturalmente, essa simplicidade durou pouco. Comecei a testar animações de entrada, transição de tema, comportamento durante o scroll, detalhes de interação e diferentes maneiras de apresentar informação sem transformar o site em um parque de efeitos.

Algumas ideias ficaram boas de primeira, o que é raro. Outras funcionaram por vinte minutos até eu olhar de novo e perceber que tinha criado uma interface bonita para uma nave espacial, não um portfólio. Também teve o efeito que parecia perfeito no monitor e desmontava completamente no celular. Nessas horas, não adianta negociar com o CSS: a solução é reduzir, reorganizar e testar outra vez.

Essa liberdade para errar foi uma das melhores partes do projeto. Como o portfólio é meu, consigo testar uma ideia até entender por que ela funciona ou por que ficou exagerada. O resultado importa, mas o processo acabou sendo tão útil quanto. Cada detalhe que entrou no site passou por alguma combinação de curiosidade, tentativa, erro e aquela revisão feita no dia seguinte, quando o entusiasmo já baixou um pouco.

Dark, mas sem virar uma caverna

Desde o começo eu queria uma identidade mais escura e sóbria. O objetivo não era preencher a tela com cards brilhantes, dezenas de ícones e todas as tecnologias conhecidas passando em um carrossel. Também não adiantava colocar um fundo preto, escolher um verde chamativo e chamar isso de direção visual. Eu queria personalidade, mas precisava continuar fácil de ler.

A versão escura veio primeiro porque combinava com a ideia que eu tinha para o portfólio. Depois entrou o tema claro, trazendo uma coleção nova de problemas que o fundo escuro escondia muito bem. Bordas delicadas desapareciam, sombras ganhavam peso demais e alguns contrastes simplesmente não funcionavam. Foi um lembrete bem direto de que tema claro não é uma inversão automática de cores; ele precisa ser tratado como parte da mesma interface.

O equilíbrio que procuro hoje é usar movimento e contraste para orientar, não para disputar atenção com o conteúdo. Uma transição pode dar ritmo à navegação, mas não deveria atrasar quem só quer conhecer um projeto. Uma tipografia grande pode criar presença, desde que não faça o texto seguinte parecer um detalhe. Essa lógica ficou ainda mais clara quando comecei a montar o Jornal.

Por que nasceu este Jornal

Eu poderia encerrar o portfólio depois de publicar os projetos e voltar apenas quando tivesse algo novo para adicionar. Só que isso mostraria o resultado final sem contar a parte que mais ensina: as decisões ruins, as mudanças de direção, os problemas que aparecem depois que “já está funcionando” e as pequenas descobertas que não viram um projeto separado.

O Jornal nasceu para guardar esse caminho com menos formalidade. Não quero escrever tutoriais como se tivesse todas as respostas; prefiro registrar o que estou construindo, explicar o raciocínio por trás de uma escolha e admitir quando alguma coisa ainda está em aberto. É mais próximo de uma conversa entre devs do que de uma documentação oficial, e esse formato combina melhor comigo.

Agora o portfólio não precisa ser apenas uma fotografia dos meus projetos. Ele pode acompanhar o que estou aprendendo em software, segurança, automações e nas ideias que provavelmente ainda vou quebrar antes de fazer funcionar. De certa forma, tudo começou quando resolvi sair por alguns instantes da confortável tríplice aliança e olhar além do index.html.

Eu ainda gosto muito dela. Só não preciso ficar preso nela.

Voltar ao Jornal