Como a IA me Ajudou a Criar este Portfolio do Zero — e Por que Migrei para Next.js 15

Você está navegando por um site que foi construído com a ajuda de Inteligência Artificial. Não, não foi um robô que escreveu todo o código — mas a IA foi minha dupla de programação mais eficiente que já tive. Nesta versão, conto como evoluí o projeto, por que migrei para Next.js 15 e como isso elevou SEO, performance e DX.

🚀 O Ponto de Partida: Uma Tela em Branco

Quando decidi criar meu portfolio pessoal, eu tinha apenas uma visão vaga do que queria: algo moderno, responsivo, com um blog integrado e que mostrasse minhas habilidades de desenvolvimento. O problema? Onde começar?

Ao invés de passar horas pesquisando templates ou começando do zero sem direção, tomei uma decisão que mudaria toda a experiência: usar a IA como minha parceira de desenvolvimento.

🧠 Escolhendo as Ferramentas Certas

A Stack Tecnológica (Atual)

Eu tinha alguns requisitos claros:

Performance: o site precisava ser rápido
SEO: metadados corretos, sitemap, canonical, OG/Twitter e conteúdo indexável
Moderna: usando tecnologias atuais sem gambiarra
Escalável: fácil de crescer e manter

Com base nisso, a stack evoluiu para:

Next.js 15 (App Router) — SSG/SSR automáticos, metadata API e ótima DX
React 19
TypeScript
Tailwind CSS v4
Shadcn UI (base de componentes)
react-markdown + react-syntax-highlighter para posts

Por que migrei de Vite/TanStack Router para Next.js 15?

Eu comecei com Vite + TanStack Router e a experiência foi boa para prototipagem. Mas para SEO sério (principalmente no blog), eu queria:

Páginas do blog pré-renderizadas (SSG) com rotas dinâmicas
Metadados ricos por página (Open Graph, Twitter, canonical)
Sitemap gerado no build

O Next.js 15 resolve tudo isso nativamente, com App Router + generateStaticParams + generateMetadata, além de um pipeline de build consistente para produção e Vercel. Resultado: conteúdo de blog renderizado no build, com SEO impecável.

🎯 SEO Primeiro: o que mudou

Metadados globais em app/layout.tsx (title, description, OG/Twitter, robots, canonical)
Metadados por post via generateMetadata em app/blog/[slug]/page.tsx
Sitemap automático em app/sitemap.ts
Rotas dinâmicas do blog estáticas com generateStaticParams (SSG), garantindo indexação e velocidade

Exemplo simplificado do SSG no Next:

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
return blogPosts.map((post) => ({ slug: post.slug }))
}

export async function generateMetadata({ params }) {
const post = blogPosts.find((p) => p.slug === params.slug)
return { title: post ? `${post.title} | Kayo Oliveira` : 'Blog' }
}

🏗️ Arquitetura: Construindo com Inteligência

Estrutura de Pastas (Atual)

src/
├── app/
│   ├── layout.tsx              # Metadata global + layout
│   ├── page.tsx                # Home
│   ├── about/page.tsx          # Sobre
│   ├── projects/page.tsx       # Projetos
│   ├── contact/page.tsx        # Contato
│   ├── blog/
│   │   ├── page.tsx            # Lista do blog
│   │   └── [slug]/page.tsx     # Post (SSG + metadata)
└── sitemap.ts
├── components/             # UI e seções (Header, Hero, etc.)
├── content/
│   ├── posts/              # Markdown dos posts
│   ├── blog-posts.ts       # Metadados dos posts
│   └── markdown-loader.ts  # Loader server-side (fs)
├── lib/
│   └── utils.ts            # utilitários (ex.: cn)
└── index.css               # Tailwind v4 e tema

O que a IA sugeriu e como evoluí

Manteve a componentização clara (seções + UI base)
Migrou o roteamento para o App Router com rotas de arquivo
Ajustou metadados para cada página e post
Garantiu que os estilos continuassem os mesmos

📝 Sistema de Blog: a Evolução Guiada pela IA

Fase 1: Posts Hardcoded

Comecei com posts hardcoded em código — ótimo para validar, ruim para escrever.

Fase 2: Markdown Inline

Migrei o conteúdo para Markdown inline, com highlight. Melhor, mas ainda preso a strings no código.

Fase 3 (Atual): Arquivos Markdown Externos + Loader server-side

Hoje cada post vive como um arquivo .md em src/content/posts. Para garantir compatibilidade total com SSG/SSR, substituí o import.meta.glob do Vite por um loader baseado em Node (fs), executado no servidor durante o build.

// src/content/markdown-loader.ts (trecho)
import { promises as fs } from 'fs'
import path from 'path'

const contentDir = path.join(process.cwd(), 'src', 'content', 'posts')

export async function loadMarkdownContent(filename: string) {
const filePath = path.join(contentDir, filename)
return await fs.readFile(filePath, 'utf8')
}

Vantagens:

✅ Escrever em Markdown com highlight no VS Code
✅ Conteúdo versionado por arquivo
✅ SSG estável e SEO-friendly
✅ Renderização consistente no servidor

🎨 Visual do Site: Da ideia à implementação

Mantive o design moderno e responsivo com Tailwind v4, transições suaves, tipografia clara e foco em legibilidade dos posts. A IA ajudou a lapidar o layout sem “quebrar” o estilo na migração.

🔧 Desenvolvimento Iterativo com IA

Prototipagem Rápida: a IA ajudou a montar a base e decidir pela migração
Refatoração Inteligente: simplificação do roteamento e metadata
Debugging Assistido: ajustes de build e de tipagem na migração
Otimização Contínua: melhorias de SEO, acessibilidade e UX

📈 Resultados e Métricas

🕒 Tempo de desenvolvimento: reduzido em ~70%
🔍 SEO: metadados corretos, sitemap e páginas estáticas indexáveis
⚡ Performance: páginas do blog geradas estaticamente
🧩 Manutenibilidade: estrutura mais clara e opinada

🚀 O Futuro: Próximas Iterações

// Roadmap de funcionalidades
const roadmap = {
v2: {
  features: ['Dark/Light mode toggle', 'Comentários no blog', 'RSS feed'],
  tech: ['Sistema de temas', 'API de comentários', 'XML generation']
},
v3: {
  features: ['Analytics dashboard', 'Newsletter', 'Busca avançada'],
  tech: ['GA4', 'Mailchimp', 'Full-text search']
}
}

💡 Conclusão: Uma Parceria Poderosa

Desenvolver este portfolio com IA não foi sobre substituir a criatividade humana — foi sobre amplificá-la. A migração para Next.js 15 trouxe o que eu precisava: SSG/SSR confiáveis e SEO de verdade, mantendo o visual e elevando a qualidade técnica.

Se quiser saber como aplicar algo parecido no seu projeto, me chama. Vou curtir compartilhar o caminho e os aprendizados desta migração.

—

Este post foi escrito por um humano, com insights e estruturação auxiliados por IA — uma meta-reflexão sobre o próprio processo que descreve! 🤖✨

Como a IA me Ajudou a Criar este Portfolio do Zero