Além do Código: Construindo Este Site
Uma pequena visão dos bastidores: Como e porquê este site foi construído da maneira que é.
Lembrete: O código-fonte completo deste site está disponível no GitHub.
Eu tenho um site pessoal faz tempo, cerca de uma década, e ao longo dos anos ele passou por diversas iterações, cada uma refletindo meu aprimoramento como desenvolvedor e as ferramentas que eu tinha à disposição. Esta é a versão mais recente, a versão comemorativa de 10 anos.
Anteriormente
2015 - 2019
A primeira versão deste site era muito mais simples, com páginas HTML estáticas e um formulário de contato em PHP. Foi feita na época em que comecei a trabalhar com desenvolvimento web novamente (ou pela primeira vez, se você desconsiderar sites em Flash), após alguns anos trabalhando principalmente em aplicativos iOS.
2020 - 2025
Por volta do início de 2020, eu tive um tempo livre e decidi reformular todo o site, que já estava bem desatualizado. Eu tinha acabado de ouvir falar desse tal de Next.js, e estava ansioso para experimentar.
Fiz um esboço de como eu queria que o site fosse, e comecei a programar. Foi uma boa melhora em relação à versão anterior, embora eu não tenha alterado muito da estrutura original do site, mantendo as mesmas quatro páginas:
- Homepage
- Currículo
- Portfólio
- Contato
Entre as mudanças feitas nesta versão, as mais importantes foram a melhora da UI (que em boa parte foi mantida na versão atual), e a adição de suporte a múltiplos idiomas (Inglês e Português). Gostei muito do resultado, mas por ter sido meu primeiro projeto em Next.js, havia muitas coisas que eu faria diferente se eu fosse reconstruir o projeto um dia. Então... esse dia chegou.
Presente
Recentemente eu senti que era hora de outra atualização. Eu ainda estava feliz com o design, mas achei que o código poderia ser aprimorado e modernizado, e eu também queria adicionar alguns recursos novos. Então listei os meus objetivos para uma nova versão:
1. Adicionar um Blog
Tinha que ser fácil de escrever e manter, sem CMS ou nada sofisticado, apenas algo simples e integrado diretamente ao código.
Há cerca de uma década eu tinha um site chamado Gambiarrando. Era um site simples em WordPress onde eu compartilhava dicas rápidas de tecnologia, fazia reviews de produtos e escrevia sobre praticamente qualquer outra coisa que eu achasse que pudesse ser útil para outras pessoas. Quando me mudei para o Canadá, não estava mais tendo tempo de atualizar e manter aquele site, então acabei tirando tudo do ar para economizar o troco que eu pagava de hospedagem.
Desde então eu tenho sentido falta de um espaço para compartilhar meus pensamentos sobre as coisas que gosto (e algumas que não gosto também). E que lugar melhor para fazer isso do que nesse site aqui, né?
2. Adicionar uma Loja
Eu não queria transformar o site num e-commerce, seria um exagero, mas eu queria uma seção onde pudesse postar alguns itens que eu for vender, tipo um laptop usado ou coisas do gênero.
3. Performance Perfeita
Eu já estava bem satisfeito com o desempenho do site, mas ainda não era perfeito. Meu objetivo era obter uma pontuação perfeita no Lighthouse. E para alcançar isso, eu queria ter o máximo possível do site gerado estaticamente durante a build.
4. Evitar Qualquer Coisa que Não Fosse Totalmente Open Source
Eu não queria depender de nada que não fosse de código aberto e licença livre. O próprio Next.js já é FOSS mesmo, mas eu também usava ícones do FontAwesome (que são gratuitos, mas exigem atribuição), também Google Analytics, e SendGrid para enviar e-mails. Eu queria substituir todos eles.
5. Atualizar a Stack de Tecnologia para as Ferramentas que Tenho Usado Recentemente
Tenho usado TypeScript e Tailwind em praticamente todos os meus projetos atualmente, e eu não queria que este fosse diferente. Até então, eu ainda não tinha usado o Tailwind v4, então também foi uma ótima oportunidade para testá-lo.
Desenvolvimento
Eu tinha meu plano: Um site Next.js escrito em TypeScript, com estilos Tailwind, Markdown para conteúdo, Ícones do HeroIcons, nodemailer para enviar e-mails usando um servidor SMTP que eu poderia facilmente substituir alterando algumas variáveis de ambiente, e Analytics da minha instância auto-hospedada do Umami. Tudo planejado, só faltava programar.
Eu passei por alguns desafios no processo, mas nada que alguns minutos lendo documentações não resolvessem. Fazer o conteúdo Markdown funcionar da maneira que eu queria, com suporte multilíngue, foi provavelmente a parte mais difícil de tudo, mas estou muito feliz com a configuração em que acabei chegando e acho que vou conseguir reutilizar boa parte disso em projetos futuros também.
Hospedagem & Implantação
Embora o site esteja atualmente hospedado na Vercel, me certifiquei de que ele também é totalmente rodável em qualquer outro servidor. Os recursos que a Vercel me oferece (como o CDN global, pipeline de deploy, etc) seriam bastante demorados para replicar, e eu provavelmente não conseguiria fazer tudo isso por zero dólares, que é exatamente o que eu pago à Vercel atualmente, então continuarei com eles por enquanto.
Futuro
Estou muito orgulhoso de como o site ficou. É simples, performático, e foi cuidadosamente construído com ferramentas que eu realmente gosto de usar. Mais do que isso, é uma plataforma que eu realmente quero manter e expandir, e espero não ter a vontade de refazer tudo de novo do zero em cinco anos.
Obrigado por ler até aqui, e espero que esta postagem seja a primeira de muitas que publicarei neste site. Até breve!