Tem muito dev bom por aí com portfólio bonito, mas invisível. A real é que, se ninguém consegue achar seu site no Google, de que adianta?
Eu queria evitar esse erro.
Este portfólio aqui foi feito pra ser simples, direto e bem estruturado, tanto visualmente quanto por baixo dos panos. E principalmente: pra aparecer quando alguém procurar por mim ou por algo que eu escrevi.
🧱 Stack
Nada muito fora do óbvio aqui:
- Next.js (App Router) — pela flexibilidade com server e SEO
- Tailwind CSS — pela velocidade e consistência visual
- TypeScript — porque não vou mais sem
Usei a estrutura padrão do App Router com app/, layouts e metadata embutida, o que já facilita muito fazer SEO de verdade (sem precisar de plugins ou bibliotecas externas).
🔍 SEO sem trauma
Não fiz nenhuma mágica de black hat, mas me preocupei com coisas que fazem diferença:
📄 Metadata com next/metadata
O novo sistema de metadata do Next 13+ (generateMetadata) já te dá controle granular da estrutura das páginas. Exemplo básico:
export const generateMetadata = ({ params }) => ({
title: `Projeto: ${params.slug}`,
description: 'Veja detalhes desse projeto pessoal criado com React...',
openGraph: {
images: [`/og/${params.slug}.png`],
},
})
Isso ajuda a gerar previews personalizados e melhora muito a indexação no Google e redes sociais.
🧭 robots.txt, sitemap.xml e estrutura limpa
Esses dois arquivos não são sexy, mas são fundamentais:
robots.txt pra liberar o acesso dos crawlers (sem isso, Google pode ignorar sua página)
sitemap.xml pra indicar o caminho de todas as rotas disponíveis
🖼️ Open Graph + Twitter Cards
Cada página tem uma imagem de preview configurada, com fallback padrão. Criei uma pasta /public/og com imagens em 1200x630px, e configuro elas no metadata.
Isso faz o link parecer mais profissional quando você compartilha no LinkedIn, Twitter, etc.
📱 Mobile-first de verdade
Evitei o erro comum de “ah depois arrumo no mobile”.
Desde o início, pensei o layout como um feed vertical com boas quebras de seção. Usei classes utilitárias do Tailwind pra garantir que os textos sempre tivessem max-w-prose, espaçamento confortável e leitura fluida até em tela pequena.
Ah, e não coloquei navbar na landing mobile de propósito, queria que o foco inicial fosse só a apresentação. O link pro Devlog aparece mais sutil, no rodapé, quase como um “easter egg” pra quem quiser explorar.
⚡ dynamic() bem usado = performance sem piscadas
Usei dynamic() pra importar componentes pesados ou baseados em comportamento, como o Intersection Observer. Mas sempre com fallback visuais, pra não ter aquela piscada horrível que parece quebra de layout.
const InView = dynamic(() => import('react-intersection-observer').then(mod => mod.InView), {
ssr: false,
loading: () => <div className="h-32 bg-zinc-900/10 animate-pulse rounded-xl" />,
})
Esse tipo de detalhe aumenta o perceived performance, mesmo em conexões lentas.
📓 Devlog: conteúdo como estratégia
Eu poderia ter parado só no portfólio estático, mas achei que valia mais a pena abrir o jogo sobre os projetos que construo. Assim nasceu o Devlog, essa seção que você tá lendo agora.
Além de mostrar que tô sempre criando, escrever aqui ajuda o site a rankear melhor com o tempo. E sinceramente? É um bom jeito de documentar o que aprendo enquanto boto a mão no código.
Portfólio não é só cartão de visita.
É prova viva de que você escreve código com intenção, e um lugar pra mostrar a sua criatividade sem limites.
