← Voltar ao blog

Construindo este site

Tem algo meta em escrever o primeiro post de um blog sobre o próprio site que hospeda esse blog. Vou tentar não me perder nessa recursão e deixar registrado as decisões que tomei construindo o alysson.dev.

Stack

Astro 6 com saída estática, MDX para os posts, Motion (motion/react, ex-Framer Motion) só onde a animação precisa de JavaScript, plain CSS com variáveis em :root, e Bun como package manager. Sem Tailwind, sem preprocessor, sem framework maior - o site precisa servir como vitrine de craft e ter dependências mínimas casa com isso.

A configuração está em astro.config.mjs. As únicas integrações que precisei foram @astrojs/mdx, @astrojs/react (para os motion islands) e @astrojs/sitemap (para SEO).

A assinatura “Alysson”

Esse aqui é o efeito que abre a home. Renderizado a partir dos paths SVG das letras Pacifico (extraídos via opentype.js), com motion-react animando pathLength + fillOpacity por glyph com stagger.

A escolha do Pacifico foi pra casar com o logo do meu currículo. O efeito não é centerline (caligrafia real, tipo o “hello” da Apple) - o stroke traça o contorno preenchido das letras, depois o fill chega. Um efeito puro centerline precisaria de um SVG desenhado à mão letra por letra.

Splash com SEO em mente

A primeira coisa que aparece no page load é o bloco da assinatura centralizado no viewport, em mobile ele encolhe pro tamanho “Aly” durante a transição pro topo via morph (@keyframes em CSS). Isso seria péssimo pra LCP se rodasse pra todo mundo - Lighthouse mediria conteúdo invisível por ~4 segundos.

Solução: gate o splash via JavaScript inline no <head>:

if (!isBot && !prefersReduce && !sessionStorage.getItem('seen-splash-v1')) {
  document.documentElement.dataset.splash = '';
  sessionStorage.setItem('seen-splash-v1', '1');
}

E todas as regras CSS do splash são gateadas por :global(html[data-splash]):

:global(html[data-splash]) .signature-stack {
  animation: hero-settle 0.85s cubic-bezier(0.4, 0, 0.2, 1) 3.4s both;
}

Resultado: bots, Lighthouse, visitantes recorrentes (mesma sessão) e usuários com prefers-reduced-motion veem a página em layout natural imediatamente. Só humanos novos veem o splash. Não é cloaking porque o conteúdo HTML servido é idêntico em todos os casos - só a animação de entrada muda.

Próximos passos

O site continua sob iteração. Próximas coisas no radar: