Colophon
Como este site foi feito
Sou frontend engineer e gosto de trabalhar próximo do design. Fiz este site para mostrar isso na prática. Aqui eu conto o que usei e por que fiz algumas escolhas.
Tecnologias
Stack
Fiz o site com Astro e publiquei na Cloudflare.
Usei React nas partes interativas e Nanostores para compartilhar o estado entre as islands. Para os estilos, escolhi Tailwind CSS. Para os componentes primitivos, usei Ark UI porque eles são headless. As animações foram feitas com Motion. Os emails do formulário são templates em React Email enviados pelo Resend.
Escrevi o código usando o Claude Code na definição da especificação, na implementação das tarefas e na revisão de código.
Design
Comecei o design no Figma, depois explorei algumas interações no Claude Design e fiz protótipos direto no código. Também criei uma página de styleguide para mostrar os tokens do site.
Para as cores, usei Catppuccin Mocha no tema escuro e Latte no tema claro. Nos textos eu usei Geist para os títulos e o corpo e Fira Code nos trechos técnicos. Os ícones são da biblioteca Tabler, e as imagens dos personagens foram geradas com o ChatGPT Image.
Conteúdo
O site tem versões em português e inglês, separadas por idioma e organizadas em arquivos YAML. As narrações da home foram geradas com ElevenLabs usando minha voz como base.
Qualidade
Configurei o CI para rodar typecheck com TypeScript, linter com Biome, testes com Vitest e uma auditoria do Lighthouse. Acompanho o uso do site com o PostHog.
Decisões
- 01
Páginas de conteúdo em HTML estático
As páginas de conteúdo são geradas durante o build e só o formulário de contato roda no servidor. Assim elas chegam prontas e mais rápido ao navegador.
- 02
O formulário não guarda mensagens
O formulário envia as mensagens para o meu email e nenhuma cópia fica em banco de dados nem nos logs, porque não quero guardar dados de quem visita o site.
- 03
Analytics sem cookies
Configurei o PostHog para funcionar sem cookies e respeitar o Do Not Track. Assim não preciso mostrar banner de privacidade e consentimento.
- 04
Metas de Lighthouse no CI
Defini como meta performance acima de 95 no mobile e nota 100 em acessibilidade, boas práticas e SEO, com WCAG AA como referência de acessibilidade. Me importo com o desempenho de cada tela, e a auditoria confere isso a cada alteração.
Quer conversar sobre alguma dessas escolhas?
Entrar em contato