Reconstruindo o portfólio com Astro

O portfólio anterior era um único arquivo index.html — funcional, rápido e fácil de manter. Mas chegou a hora de evoluir: blog em Markdown, React para componentes interativos, Three.js para animação 3D e Tailwind para estilo.

Por que Astro?

Astro é um framework de geração estática que permite misturar componentes de diferentes frameworks (React, Svelte, Vue) sem enviar JavaScript desnecessário ao cliente. A filosofia de islands architecture significa que apenas os componentes que precisam de interatividade viram JavaScript no browser.

Para um portfólio, isso é ideal:

O conteúdo estático (texto, projetos, bio) é HTML puro — carrega rápido e indexa bem.
Componentes interativos (o carrossel, a cena Three.js) viram “ilhas” com client:load.

A animação Three.js

A cena 3D usa três grupos independentes que rotacionam em velocidades e direções diferentes:

Core — icosaedro wireframe com anéis, representando a estrutura central de um sistema.
Orbital — nós conectados por linhas, como um grafo de dependências.
Satélites — pontos externos que orbitam no sentido oposto.

A interação com o mouse move levemente a câmera, criando paralaxe sem sobrecarregar o usuário de animação.

Markdown e blog

Com as content collections do Astro, qualquer arquivo .md em src/content/blog/ vira uma rota automática. Frontmatter tipado via Zod garante que cada post tenha título, descrição e data.

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()).default([]),
  }),
});

JetBrains Mono

A fonte que o projeto pedia desde o início. Monospace, com ligaduras, legível em qualquer tamanho. Substitui as três fontes que o protótipo anterior usava por uma só família coesa.

Próximos passos: adicionar versão em inglês, currículos e mais projetos.