Site do Portfólio — Habilidade de Manutenção

O que Site do Portfólio — Habilidade de Manutenção faz?

Este é o portfólio pessoal de Mitchell Palmer: uma reconstrução Next.js 16 (App Router) de um antigo site Webflow. O conteúdo é armazenado como arquivos TypeScript/JSON/MDX puros em src/content/ em vez de um CMS. Leia isto antes de fazer alterações para que você siga as convenções existentes em vez de introduzir novos padrões.

Modelo mental

src/content/    → DADOS       (o que dizer — edite isso para quase tudo)
src/app/        → PÁGINAS     (roteamento — uma pasta = uma URL, convenções do App Router)
src/components/ → PEÇAS DE UI (reutilizáveis — Header, Footer, ProjectCard, PhotoGallery, embeds MDX)
public/images/  → ativos estáticos, organizados por seção (site/, projects/, projects/hero/, photography/, icons/)

Se a tarefa é "adicionar/editar conteúdo" (um projeto, um emprego, uma linha de biografia, uma foto), quase com certeza ela só mexe em src/content/. Não mexa em src/app/ ou src/components/ para mudanças puramente de conteúdo.

Referência dos arquivos de conteúdo

Arquivo	Controla
src/content/site.ts	Nome, tagline, email, links de navegação, links sociais
src/content/about.ts	Parágrafos de biografia, história "jornada", declaração de missão, status
src/content/experience.ts	Histórico de trabalho (experience[]), educação, lista de habilidades, cartões de serviços
src/content/photography.json	Array de { src, season, location, type } — os botões de filtro em /photography são gerados automaticamente a partir de quaisquer valores que apareçam aqui
src/content/projects.ts	Lógica apenas (lê arquivos .mdx de projects/) — não edite a menos que esteja alterando como os projetos são carregados/ordenados
src/content/projects/*.mdx	Um arquivo por projeto. Frontmatter + corpo Markdown/MDX. Nome do arquivo = slug da URL.

Formato do frontmatter do projeto MDX

---
title: "Título do Projeto"
description: "1-2 frases, mostradas no cartão + no topo da página de detalhes."
image: "/images/projects/thumbnail.jpg"
heroImage: "/images/projects/hero/banner.jpg"   # opcional, usa `image` como fallback
featured: true                                    # mostra na página inicial
link: { label: "Repositório GitHub", href: "https://..." }
skills: ["Habilidade Um", "Habilidade Dois"]
tools: ["Python", "PostgreSQL"]
# OU, para projetos com muitas tecnologias, use techGroups em vez de skills/tools:
techGroups:
  Linguagens e Bibliotecas: ["Python", "pandas"]
  Métodos Estatísticos: ["CUSUM", "Análise Z-Score"]
---

Nota: ProjectCard.tsx exibe project.tools ?? project.skills (tools tem prioridade se ambos existirem). techGroups é mutuamente exclusivo com skills/tools na exibição — a barra lateral da página de detalhes mostra um ou outro, não ambos.

Dois componentes MDX personalizados estão disponíveis dentro do corpo de qualquer projeto:

<DashboardEmbed src="https://seu-app.streamlit.app/" title="Meu Dashboard" />
<PdfEmbed src="/caminho/para/resumo.pdf" />

Convenções de estilo

• Tailwind v4, variáveis CSS definidas em src/app/globals.css sob :root (ex.: --color-brand: #486161). Altere a paleta lá, não codificando valores hexadecimais em componentes.
• Duas fontes: --font-serif (Merriweather, títulos) e --font-sans (Inter Tight, corpo) — ambas carregadas via next/font/google em layout.tsx. Requer acesso à internet no momento do build — falhará em ambientes offline/sandbox.
• Classe utilitária .container-page lida com largura máxima + padding consistentes entre as páginas.

NÃO mexer

• node_modules/ — ignorado pelo git, regenerado via npm install. Nunca adicione novamente ao git.
• AGENTS.md na raiz do repositório — regenerado automaticamente por next dev, informa agentes de IA sobre as convenções específicas desta versão do Next.js. Não edite manualmente; será sobrescrito.
• CLAUDE.md na raiz do repositório — atualmente apenas @AGENTS.md (uma importação). Se precisar adicionar instruções personalizadas persistentes, coloque-as em um novo arquivo e referencie-o separadamente, não sobrescreva a importação do AGENTS.md.
• next-env.d.ts — gerado automaticamente, ignorado pelo git.

Tarefas comuns, referência rápida

Novo projeto → miniatura em public/images/projects/ (+ banner hero opcional) → novo arquivo .mdx em src/content/projects/ → pronto, nenhum código de roteamento necessário.

Nova foto → arquivo em public/images/photography/ → entrada correspondente em photography.json.

Editar biografia/missão → src/content/about.ts, edições simples de string.

Nova entrada de emprego → src/content/experience.ts, adicione ao início do array experience[] (renderizado na ordem do array, portanto do mais novo para o mais antigo).

Alteração de link de navegação/social → src/content/site.ts.

Build e verificação

npm install       # após puxar alterações que mexam em package.json
npm run dev        # servidor de desenvolvimento local, hot reload
npm run build       # build de produção — execute isso antes de enviar alterações estruturais
npm run lint        # verificação eslint

npm run build falhará sem acesso à internet (busca de fontes do Google) — isso é esperado em ambientes totalmente offline e não é um bug de código.