# Portfólio de Arquitetura — Guia de Configuração

## Visão Geral

O site lê automaticamente suas imagens de uma **pasta pública do Google Drive** usando a API do Google. Você só precisa:

1. Criar uma chave de API no Google Cloud Console
2. Organizar suas imagens no Google Drive em subpastas
3. Configurar dois valores no arquivo `js/app.js`

---

## Passo 1 — Criar uma API Key no Google Cloud Console

### 1.1 Acesse o Google Cloud Console

Abra: **https://console.cloud.google.com**  
Faça login com sua conta Google.

### 1.2 Crie (ou selecione) um projeto

- Clique no seletor de projeto no topo da página
- Clique em **"Novo projeto"**
- Dê um nome (ex: `portfolio-arquitetura`) e clique em **"Criar"**

### 1.3 Ative a Google Drive API

- No menu lateral, vá em **"APIs e serviços" → "Biblioteca"**
- Pesquise por **"Google Drive API"**
- Clique nela e depois em **"Ativar"**

### 1.4 Crie a Chave de API

- Vá em **"APIs e serviços" → "Credenciais"**
- Clique em **"+ Criar Credenciais" → "Chave de API"**
- Uma chave será gerada (ex: `AIzaSyAbc123XyzDef456Ghi789`)
- **Copie e salve essa chave**

### 1.5 (Recomendado) Restrinja a chave de API

Para segurança, evite que terceiros usem sua chave:

- Na lista de credenciais, clique na chave recém-criada
- Em **"Restrições de aplicativo"** → selecione **"Referências HTTP (websites)"**
- Adicione o domínio onde o site será publicado (ex: `*.seudominio.com.br/*`)
- Em **"Restrições de API"** → selecione **"Restringir chave"** → escolha **"Google Drive API"**
- Clique em **"Salvar"**

---

## Passo 2 — Organizar as imagens no Google Drive

### 2.1 Estrutura de pastas obrigatória

Crie **uma pasta raiz** e dentro dela **exatamente 4 subpastas** com estes nomes:

```
Meu Portfólio  (pasta raiz — qualquer nome)
├── Architectural
├── Archviz
├── Detailing
└── Interiors
```

ATENÇÃO: Os nomes das subpastas precisam ser exatamente esses (respeitando maiúsculas/minúsculas).

### 2.2 Adicione suas imagens

- Faça upload de imagens (JPG, PNG, WebP) dentro de cada subpasta
- O nome do arquivo será usado como legenda na galeria
- Recomendação: use nomes descritivos (ex: `Residencia-Vila-Madalena.jpg`)

### 2.3 Torne as pastas públicas

Para cada pasta (incluindo a raiz):

1. Clique com o botão direito na pasta → "Compartilhar"
2. Clique em "Alterar para qualquer pessoa com o link"
3. Mantenha a permissão como "Leitor" (somente visualização)
4. Clique em "Concluído"

---

## Passo 3 — Obter o ID da pasta raiz

1. No Google Drive, abra a pasta raiz (ex: `Meu Portfólio`)
2. Olhe para a URL no navegador:
   https://drive.google.com/drive/folders/1AbCdEfGhIjKlMnOpQrStUvWxYz01234
3. O ID é a parte final da URL: 1AbCdEfGhIjKlMnOpQrStUvWxYz01234
4. Copie esse ID

---

## Passo 4 — Configurar o arquivo js/app.js

Abra o arquivo `js/app.js` e substitua os placeholders no topo do arquivo:

  DRIVE_API_KEY:   'SUA_API_KEY_AQUI',       <- Cole sua API Key aqui
  DRIVE_FOLDER_ID: 'ID_DA_PASTA_RAIZ_AQUI',  <- Cole o ID da pasta aqui

Salve o arquivo. Pronto!

---

## Passo 5 — Abrir o site

Use um servidor local para evitar bloqueios de CORS:

Com Python (se instalado):
  python -m http.server 8080
  Abra: http://localhost:8080

Com Node.js / npx:
  npx serve .

Com VS Code:
  Instale a extensão "Live Server" e clique em "Go Live".

---

## Solução de Problemas

| Problema | Causa provável | Solução |
|---|---|---|
| Galeria não carrega | API Key incorreta | Verifique se copiou a chave sem espaços |
| Erro 403 (Forbidden) | Pasta não é pública | Repita o Passo 2.3 para todas as pastas |
| Erro 400 (Bad Request) | Folder ID incorreto | Copie apenas o ID da URL |
| Imagens não aparecem | Pasta vazia | Adicione imagens dentro das subpastas |
| Categorias não aparecem | Nomes errados | Use exatamente: Architectural, Archviz, Detailing, Interiors |
| Bloqueio de CORS | Abrir arquivo direto | Use um servidor local (ver Passo 5) |

---

## Publicação (Deploy)

O site é 100% estático — suba os arquivos para qualquer hospedagem:
- GitHub Pages (gratuito)
- Netlify (gratuito, drag-and-drop)
- Vercel (gratuito)