Curso online gratuitoCriando um Portfólio com Next.js 13, Tailwind CSS, Hygraph CMS, Framer motion e Typescript

Descrição do curso

Ter um portfólio rápido, bonito e fácil de atualizar é um diferencial real para quem busca vaga em Front-End ou quer mostrar projetos com mais profissionalismo. Neste curso online gratuito, você cria um portfólio completo com Next.js 13 (App Router), Tailwind CSS e TypeScript, seguindo um fluxo de desenvolvimento próximo do que é usado no mercado: páginas bem estruturadas, componentes reutilizáveis, responsividade e atenção à performance.

Ao longo do projeto, você integra um CMS headless (Hygraph) para transformar o site em algo vivo: em vez de editar conteúdo “no código” toda vez que fizer um novo projeto, você aprende a modelar e consumir dados para alimentar seções como destaques, lista de projetos e detalhes por slug. Isso traz praticidade para manutenção e abre espaço para evoluções, como incluir novas experiências, alterar textos e reorganizar projetos sem retrabalho.

O curso também reforça boas práticas do Next.js 13, como criação de rotas estáticas e dinâmicas, geração de páginas no build, controle de cache e revalidação para equilibrar velocidade e atualização do conteúdo. Além disso, você implementa SEO estático e dinâmico para melhorar a forma como suas páginas aparecem em buscadores e quando compartilhadas, dando ao portfólio um aspecto mais completo e confiável.

Para completar a experiência, você constrói uma área de contato com validação robusta usando React Hook Form e Zod, e envia as mensagens para um canal via Discord Webhook, simulando um cenário real de captura de leads/contato. Você ainda adiciona animações com Framer Motion para deixar a navegação mais fluida e apresenta o trabalho final com deploy na Vercel, incluindo cuidados essenciais com variáveis de ambiente e segredos.

No fim, você terá um portfólio publicado, escalável e orientado a conteúdo, pronto para ser usado em processos seletivos e para demonstrar domínio prático de Next.js 13, TypeScript, integrações com CMS e preocupações importantes de front-end moderno como performance, SEO e experiência do usuário.