Thuro's Cloud

Este é meu site pessoal e blog, construído do zero com tecnologias web modernas e forte foco em performance, SEO e experiência de desenvolvimento.

Motivação

Eu queria um espaço pessoal na internet que:

1. Mostrasse meu trabalho — um portfólio dos projetos que criei ou contribuí
2. Compartilhasse conhecimento — um blog para escrever sobre tecnologias, tutoriais e experiências
3. Demonstrasse minhas habilidades — o próprio site serve como peça de portfólio
4. Priorizasse SEO — conteúdo descobrível pelos buscadores

Arquitetura técnica

Escolha do framework

Depois de avaliar várias opções, escolhi o TanStack Start para este projeto. Motivos:

• Renderização no servidor (SSR): essencial para SEO, o TanStack Start oferece suporte excelente pronto para uso
• Segurança de tipos: TypeScript de ponta a ponta
• React moderno: baseado no React 19 com os recursos mais recentes
• Rotas por arquivo: roteamento intuitivo com TanStack Router

Gestão de conteúdo

O conteúdo é gerenciado com arquivos MDX versionados no repositório:

content/
├── blog/
│   └── [slug]/
│       └── index.mdx
├── projects/
│   └── [slug]/
│       └── index.mdx
└── data/
  └── config.json

Essa abordagem oferece:

• Controle de versão: todo conteúdo rastreado no Git
• Flexibilidade do Markdown: escreva em Markdown com componentes JSX
• Metadados no frontmatter: metadados ricos para SEO e organização
• Validação por tipos: schemas Zod validam todo o conteúdo

Estilo

A UI é construída com:

• Tailwind CSS v4: utilitários modernos
• shadcn/ui: componentes acessíveis e de alta qualidade
• Lucide Icons: ícones consistentes e bonitos

Testes

Testes abrangentes garantem confiabilidade:

• Vitest: runner moderno e rápido
• React Testing Library: testes de componentes
• 90%+ de cobertura: meta de cobertura alta

Funcionalidades principais

Otimização de SEO

Cada página é otimizada para buscadores:

• HTML renderizado no servidor para conteúdo imediato
• Metatags estruturadas para compartilhamento social
• URLs limpas com slugs semânticos
• Geração automática de sitemap
• Dados estruturados em JSON-LD

Performance

O site é construído para ser rápido:

• Bundle de JavaScript mínimo
• Imagens otimizadas
• Estratégias eficientes de cache
• Core Web Vitals priorizados

Acessibilidade

A acessibilidade é prioridade:

• HTML semântico
• Labels ARIA quando necessário
• Suporte a navegação por teclado
• Amigável a leitores de tela
• Conformidade com contraste de cores

Deploy

O site roda no meu servidor pessoal usando Coolify com Nixpacks:

1. Push para a branch main aciona o deploy
2. Nixpacks detecta o tipo de projeto
3. O build roda automaticamente
4. Nova versão sobe com zero downtime

Aprendizados

Construir este projeto me ensinou:

1. TanStack Start está pronto para produção: mesmo sendo novo, é estável e potente
2. MDX é flexível: Markdown com componentes oferece ótima experiência de autoria
3. SSR é crucial para SEO: renderização no servidor fez diferença visível na busca
4. Testes valem a pena: alta cobertura encontrou problemas antes de chegar em produção

Planos futuros

• Adicionar busca full-text com indexação no cliente
• Implementar contagem de visualizações e analytics de leitura
• Criar um feed RSS para os posts
• Adicionar suporte a tema claro/escuro/sistema
• Implementar sistema de comentários

Conclusão

Thuro's Cloud representa minhas habilidades atuais e abordagem para desenvolvimento web. É um projeto vivo que vou continuar evoluindo.

Sinta-se à vontade para explorar o código no GitHub ou chamar para conversar!