1 min de leitura
Como construí este site
Um site pessoal estático em duas línguas com Astro, Tailwind e Cloudflare, sem JavaScript de framework e com formulário de contato rodando num Worker.
- #astro
- #tailwind
- #cloudflare
Eu queria um lugar que dissesse mais do que um PDF: os projetos que mantenho, o trabalho por trás dos números do currículo e anotações que vou escrevendo pelo caminho. Aqui está como ele foi montado.
A stack
- Astro gera todas as páginas como HTML estático no build. O único JavaScript que chega ao navegador é o botão de tema e o formulário de contato.
- Tailwind CSS v4 para o estilo, com as cores definidas em variáveis CSS, então os temas claro e escuro usam as mesmas classes.
- Cloudflare Workers serve os arquivos estáticos e cuida da única rota dinâmica, o formulário de contato.
Duas línguas a partir de uma fonte
Todo o conteúdo do currículo fica num único arquivo TypeScript, com inglês e português lado a lado. As páginas são só uma casca que passa o idioma para um componente compartilhado:
---
import Home from '../components/Home.astro';
---
<Home locale="pt-br" />O inglês fica em / e o português em /pt-br/. Cada página declara a versão alternativa com hreflang, então os buscadores mostram a versão certa para cada leitor.
Formulário de contato sem servidor
O formulário envia para /api/contact, que roda num Worker. Ele valida o token do Cloudflare Turnstile, confere os campos e me manda um e-mail pelo binding do Email Service. Sem serviço de formulário de terceiros e sem chave de API no código.
O que vem por aí
Mais posts sobre o que faço no dia a dia: Laravel multi-tenant, nota fiscal eletrônica, apps em Flutter e lançar produtos pequenos sozinho.