Guia do
portfolio

Criar um post novo

O fluxo completo para publicar uma série de fotos:

1. Acessa /admin e entra com a senha
2. Aba Upload de fotos — sobe as fotos para o R2. Cada foto gera uma URL automaticamente
3. O Markdown é gerado automaticamente com as URLs e proporções. Clica em Baixar .md
4. Abre o arquivo baixado e preenche os campos: título, número, categoria, data, câmera, filme, intro e texto
5. Aba Novo post — sobe o .md, preenche o nome do arquivo (ex: porto-junho.md) e clica em Publicar
6. O site atualiza em ~30 segundos

Estrutura de um post

Todos os campos disponíveis no frontmatter de um post:

---
title: Título do post
numero: "001"
categoria: Arquitetura
data_formatada: Jun 2025
equipamento: Nikon F65
filme: Kodak Gold 200
intro: Texto curto que aparece antes das fotos.
descricao: Texto para preview em links (WhatsApp, etc).
capa: https://url-da-foto-de-capa.jpg
temas:
  - viagem
  - cidade
fotos:
  - url: https://url-da-foto.jpg
    alt: "Descrição da foto"
    proporcao: wide
    legenda: Legenda opcional
  - texto: "Texto intercalado entre fotos."
  - url: https://url-da-foto.jpg
    alt: ""
    proporcao: tall
---

Texto do post aqui. Pode ser longo,
com vários parágrafos.

Proporções de foto

1. wide — ocupa as duas colunas, proporção 16:9. Bom para abertura de série e paisagens
2. tall — ocupa uma coluna, proporção 3:4. Bom para retratos e verticais
3. Se não definir, o template alterna automaticamente: primeira foto wide, depois tall/wide intercalados

Editar um post existente

1. Abre o GitHub em github.com/hspaiva/portfolio
2. Navega até src/posts/nome-do-post.md
3. Clica no lápis para editar direto no GitHub
4. Salva — o site atualiza em ~30s

Ou edita o arquivo localmente no VS Code e faz git add . → git commit → git push.

Apagar um post

1. Acessa /admin e entra com a senha
2. Aba Apagar post
3. Clica em Apagar — o botão vira Confirmar
4. Clica em Confirmar — o post é removido e o site atualiza em ~30s

Alterar textos do site

1. Nome no nav — src/_includes/base.njk, linha com H. Paiva
2. Título da home — src/index.njk, dentro de home-titulo
3. Descrição da home — src/index.njk, dentro de home-descricao
4. Footer — src/_includes/base.njk, dentro do footer
5. Página sobre — src/sobre/index.njk, edita livremente

Alterar cores e visual

Todas as cores ficam nas variáveis CSS em src/css/global.css, no início do arquivo:

:root {
  --fundo: #f5f2ed;      /* cor de fundo do site */
  --texto: #1a1916;      /* cor do texto principal */
  --texto-suave: #7a7570; /* texto secundário */
  --texto-mudo: #a09a94;  /* texto terciário */
  --acento: #2d4a6b;     /* azul — cor de destaque */
}

Para mudar o azul de acento, só altera o valor de --acento.

Adicionar filtros no arquivo

Os filtros de categoria, câmera, filme e tema são gerados automaticamente a partir dos posts. Para aparecer um novo filtro basta usar o valor novo num post:

1. Categoria nova → adiciona categoria: Nova categoria num post
2. Câmera nova → adiciona equipamento: Nova câmera num post
3. Filme novo → adiciona filme: Novo filme num post
4. Tema novo → adiciona o tema na lista temas: de um post

Hyperlink num post

No texto do post (abaixo do frontmatter) usa Markdown normal:

[texto do link](https://url.com)

Exemplo:
Revelado no [Lab Analógico](https://labanalogico.com).

Erros comuns

1. Site não atualiza após push — espera 1-2 minutos e força reload com Ctrl+Shift+R
2. Foto não aparece — confirma que a URL do R2 está correta e que o arquivo foi carregado no bucket
3. git push rejeitado — roda git pull --rebase e depois git push novamente
4. Post não aparece na home — confirma que o campo numero está entre aspas: "001"
5. Filtro não aparece no arquivo — confirma que o campo está igual em todos os posts (maiúsculas contam)
6. Lightbox abre foto errada — acontece quando há itens de texto intercalados. O índice do lightbox ignora textos automaticamente
7. Deploy falhou no Cloudflare — abre o Cloudflare Pages, clica no deploy com erro e lê o log para identificar o problema

Prompt para criar posts

Cole esse prompt no Claude quando for criar um novo post. Substitui os campos entre colchetes:

Crie o frontmatter completo para um post do meu portfolio com essas informações:

- Título: [título da série]
- Número: [número sequencial, ex: 004]
- Categoria: [Arquitetura / Urbano / Pessoas / Pessoal]
- Data: [mês e ano, ex: Mar 2025]
- Câmera: [modelo da câmera]
- Filme: [nome do filme fotográfico, ou "Digital" se for digital]
- Intro: [uma frase curta sobre a série]
- Descrição SEO: [frase para preview em links]
- Temas: [lista de temas, ex: viagem, cidade, noite]
- Fotos: [cole aqui as URLs geradas pelo painel admin]
- Texto do post: [escreva livremente sobre as fotos]

Quero que as fotos alternem entre wide e tall de forma interessante,
e que o texto apareça intercalado nas partes que eu indicar.