portfolio-workspace.mdx
Portfolio Workspace
Um portfólio em Next.js apresentado como workspace inspirado em editor e movido por projetos em MDX.
Visão geral
Este portfólio também é um projeto: um site em Next.js orientado por conteúdo que apresenta trabalhos de software por meio de uma interface original inspirada em editores. O shell usa ideias úteis de workspace, como explorador, abas, breadcrumbs, paleta de comandos e barra de status, enquanto as páginas continuam semânticas e legíveis.
O problema
O objetivo era criar um portfólio memorável para desenvolvedores sem esconder os estudos de caso. Um clone literal de editor seria confuso, e um conjunto estático de cards ficaria chato de manter conforme os projetos crescessem.
Arquitetura
Projetos vivem como arquivos MDX com frontmatter estruturada. Os mesmos metadados alimentam explorador, arquivo, busca, filtros, paleta de comandos, páginas de projeto, sitemap e navegação anterior/próximo.
| Área | Decisão |
|---|---|
| Framework | Next.js App Router |
| Conteúdo | Arquivos MDX locais com frontmatter |
| Estilo | Tailwind CSS e paleta customizada inspirada em editor |
| Localização | Rotas padrão em inglês e rotas localizadas em /pt-BR |
| Fonte de dados | Conteúdo no filesystem, sem banco |
Decisões técnicas
A implementação mantém Server Components como padrão e usa Client Components apenas para interações como paleta de comandos, drawer mobile, filtros e troca de idioma. A busca usa metadados leves em vez de carregar todo o corpo MDX no navegador.
Estado atual
O site suporta rotas em inglês e português brasileiro, seleção automática no primeiro acesso por preferência de idioma do navegador, estudos de caso em MDX, metadados de SEO e navegação responsiva.
Aprendizados
A metáfora de editor funciona melhor quando melhora a navegação em vez de virar decoração. O shell pode ser técnico e familiar enquanto o conteúdo principal continua sendo web normal e acessível.
Capturas de tela
