Construindo meu Portfólio com Nuxt 4 e Nuxt Content

Fazia muito tempo que eu não tinha um site pessoal. Se a memória não me falha, a última vez foi há anos — talvez hospedado no saudoso GitHub Pages? Era algo bem simples, servia apenas para exibir meu currículo e nada mais.

Recentemente, me peguei pensando: "Por que não fazer um novo? Mas, dessa vez, algo sério?" Decidi voltar a estudar (fazer uma pós graduação), ganhar mais espaço no mercado, me atualizar e, claro, me expor mais ao mundo. O primeiro passo óbvio era ter um espaço meu na internet.

O Desafio: Simplicidade vs. Funcionalidade

A premissa era clara: o site precisava ser simples de manter, mas eu queria que ele funcionasse como um CMS (Content Management System).

Fazer um do zero, construindo banco de dados, API e painel administrativo? Claro! IA na veia! Mas, cinco minutos depois, a realidade bateu: "Espera... que trabalheira. Tem que ser simples!".

A alternativa clássica seria o WordPress. Porém, eu queria usar o ecossistema e as tecnologias com as quais já trabalho no meu dia a dia como Software Engineer. Comecei então a debater com ferramentas de Inteligência Artificial (mais específicamente o Gemini) para explorar ideias de arquitetura, mas nenhuma sugestão brilhava aos olhos. Eu queria uma página inicial estilo CV vivo, um espaço para portfólio e um "Techbrain/Blog".

A Descoberta do Nuxt Content

Até que me lembrei vagamente de uma extensão ou biblioteca do Nuxt que havia visto no passado. Perguntei novamente para a IA sobre isso e a resposta foi imediata: Nuxt Content!

Entrei na documentação e vi que a ferramenta fazia exatamente o que eu queria: transformava arquivos Markdown (.md) e Frontmatter YAML em HTML altamente otimizado. Era o casamento perfeito entre a experiência de desenvolvedor (DX) que eu buscava e a simplicidade de publicação que eu precisava.

💡 O Pulo do Gato: Com o Nuxt Content v3, o site se comporta como um CMS estático completo. Zero banco de dados, zero dor de cabeça. O conteúdo é processado no tempo de build (SSG), garantindo performance nota 100 no Lighthouse.

O Stack Técnico que Escolhi

Para dar vida a essa ideia, o alicerce foi construído com as melhores ferramentas do ecossistema Vue:

Nuxt 4: Aproveitando a nova estrutura de pastas (app/) que separa logicamente o código da aplicação das configurações.
Nuxt Content v3: O motor que lê os arquivos .md e os entrega tipados (Type Safety total) para os componentes Vue.
Tailwind CSS + Typography Plugin: Para garantir que o HTML gerado pelo Markdown ficasse bonito, responsivo e adaptado ao Dark Mode sem esforço manual.
Shiki: Syntax highlighting de alta qualidade para os blocos de código.

// Exemplo de como o código fica bonito no post!
const techStack: string[] = ['Nuxt 4', 'Nuxt Content', 'Tailwind', 'Shiki'];
const isHappy = techStack.every(tech => tech.isAwesome);

Sobre o Desenvolvimento

A parte mais interessante dessa jornada é que ela não foi tão longa no sentido de escrever código complexo ou integrar APIs obscuras. O verdadeiro desafio foi organizar as informações, pensar na estrutura dos dados (quais campos o Frontmatter do Markdown precisava ter) e desenhar a Arquitetura de Informação do site.

Hoje, meu fluxo de trabalho para publicar um novo artigo ou projeto é simplesmente maravilhoso:

Copio e colo um template .md que deixei pronto.
Escrevo o conteúdo como se fosse um texto comum no meu editor favorito.
Dou um git commit e git push.
O CI/CD do meu Home Lab local intercepta o push e faz o build/deploy automático.

⚠️ Alerta de Spoiler: A configuração desse meu Home Lab com GitLab CI e Node é uma história longa e que, com certeza, vai render um post dedicado no futuro!

Conclusão

Estou extremamente satisfeito com o resultado. Construí exatamente o que eu queria, usando as ferramentas que eu adoro, e o processo de manutenção agora é fluido e indolor. Este portfólio não é apenas um site; é um living lab onde posso testar e mostrar um pouco de mim e do meu trabalho.

Espero que tenha gostado do site e da fluidez da navegação! Me dê um feedback depois. Entre em contato pelo LinkedIn ou me mande um email ([email protected]).

Um abraço!