Novo layout e o cofre dentro do site
O site ganhou o layout novo e o cofre saiu do Notion: repos, livros, equipamento e a página de cada vídeo agora moram aqui, cada um com link próprio.
No ar
heliofilho.dev
Este site: projetos, cofre, jornal e newsletter num lugar só.
H
O problema
Meu conteúdo estava espalhado entre bio do Instagram, Notion, Substack e links soltos. Quem chegava por um vídeo não achava o resto.
A solução
Um site só, com o cofre de materiais, os projetos com README e diário, a prévia do jornal e a newsletter. O conteúdo fica no Supabase, então dá pra publicar uma página nova sem novo deploy.
Arquitetura
Next.js (App Router)→Supabase Postgres→Vercel
Decisões técnicas
Conteúdo em tabelas do Supabase: publicar não exige deploy.
Páginas geradas no servidor e atualizadas a cada 5 minutos.
Cada item do cofre tem link curto próprio, pronto pra mandar na DM.
Trade-offs
Editar markdown direto na tabela é menos confortável que o Notion.
README
O código deste próprio site. Next.js (App Router) na Vercel, conteúdo no Supabase - não existe banco de arquivo nem CMS externo.
Como o conteúdo funciona
Cada seção (Blog, Cofre, Projetos, config do Site, Mídia) é uma tabela no Supabase. O admin não tem API própria: as telas de /admin chamam Server Actions do Next.js direto, que passam por um guarded() comum - confere login, trata erro, e chama revalidatePath depois de qualquer salvamento. Publicar não exige novo deploy: a página pública já lê o dado novo na próxima visita, porque as rotas usam ISR com revalidate curto (a maioria em 5 minutos).
Duas chaves do Supabase
Uma anon, só leitura, usada pelas páginas públicas e protegida por RLS (cada tabela tem política liberando só o que não está oculto/rascunho). Outra de service role, só no servidor, usada pelas Server Actions do admin pra escrever - essa ignora RLS e nunca chega no navegador.
Reveal ao rolar
Qualquer bloco com data-reveal começa com opacidade 0 e some 14px pra baixo; um IntersectionObserver marca data-in quando o bloco entra na tela, e o CSS anima a entrada. Correção recente: o gatilho era 8% do próprio bloco visível, o que quebrava em conteúdo mais alto que a tela (um README longo nunca cobria 8% de si mesmo) - trocado pra disparar no primeiro pixel visível.
Identidade visual
Paleta clara e sóbria (bege #F6F3EC, tinta #1E1C19, destaque roxo #4F46C8), serifada no título (Instrument Serif) com itálico marcando o nome "filho" na marca. O favicon segue o mesmo padrão: monograma HF em SVG, sem precisar de gerador de imagem.
Analytics
Vercel Web Analytics ligado, sem cookie, contando visita e navegação entre páginas.