ESTE PORTFÓLIO
Designer + Desenvolvedor
Contexto
O portfólio é o primeiro filtro em qualquer conversa de contratação. Usar Behance, Notion ou um template genérico resolve o imediato, mas cria um paradoxo: o site precisa comunicar como você pensa e, se o site foi feito sem pensar, o que ele comunica?
A decisão de construir do zero foi parte do posicionamento: designer que entende produto precisa ser capaz de entregar produto.
Problema de posicionamento
Cinco anos de experiência em empresas e setores muito diferentes: consultoria, insurtech, construção civil. O risco era aparecer como generalista sem foco. O desafio era criar uma narrativa coesa sem fingir uma especialização que não existe.
A solução foi selecionar e ordenar. Casos em ordem cronológica reversa, do mais recente para o mais antigo, cada um conectado ao próximo, criando uma cadeia de leitura.
Conteúdo primeiro
O processo começou pelo texto, não pelo design. O ponto de partida foi o portfólio anterior (Webflow) e o LinkedIn: dois registros do mesmo trabalho, escritos em momentos diferentes e para públicos diferentes.
A comparação revelou divergências de tom e lacunas no histórico. O portfólio Webflow tinha uma linguagem mais aspiracional; o LinkedIn era mais técnico e fragmentado. O trabalho foi reconciliar os dois: ajustar o histórico ano a ano, uniformizar o tom e definir o papel de cada texto no posicionamento profissional.
A pergunta que guiou esse estágio: o que esse texto precisa fazer? Para cada seção, uma resposta diferente. A tagline precisa situar. A bio curta precisa qualificar. Cada case precisa mostrar raciocínio, não apenas resultado.
Referências
Com o conteúdo estabilizado, fui atrás de exemplos para entender como designers que admiro apresentam o próprio trabalho.
Quatro portfólios serviram de referência: laurenlangdesign.com, kysondana.com, thatedchao.com e tparkes.com. Todos minimalistas, todos com tipografia forte como elemento principal de hierarquia. A estética brutalista apareceu como ponto em comum: sem decoração, sem gradiente, sem animação pela animação. O layout serve o conteúdo.
O que ficou de fora das referências também foi útil. Sites com motion pesado, paletas múltiplas ou layouts experimentais foram descartados: bonitos no protótipo, caros de manter em código.
Tipografia, estilo e protótipo
Com as referências mapeadas, entrei na fase de exploração visual. O Google Stitch entrou para experimentar padrões de componente: variações de tipo, escala, espaçamento. O Lovable para testar estruturas de layout e navegação.
Essa fase foi iterativa. Nenhuma decisão foi tomada de uma vez. A paleta foi reduzida ao mínimo: fundo off-white, preto para texto, cinza para hierarquia secundária e verde-escuro como único acento. A tipografia ficou em dois pesos de duas famílias: Space Grotesk para títulos, Inter para corpo. Escala fluida com clamp() para funcionar em qualquer tela.
O protótipo no Lovable validou a estrutura de navegação antes de qualquer linha de código.
Claude Code
Com o design system definido e a estrutura validada, a construção aconteceu inteiramente no Claude Code. A decisão de migrar do Lovable para código próprio foi estratégica: controle total sobre a linguagem visual, um design system próprio e a possibilidade de iterar texto e código no mesmo ambiente.
A fundação veio primeiro: scaffold do Astro, organização de pastas, tokens de cor, escala tipográfica, fontes auto-hospedadas. Nenhuma página antes de ter a base pronta.
Depois, a arquitetura de componentes: Base, Nav, Footer, CaseCard, ImpactBlock, DividerBar, HeroBar, ImageSlot. O ImageSlot como placeholder permitiu publicar o conteúdo antes de ter as imagens prontas, sem deixar o layout quebrado.
O texto de cada case não foi inserido de uma vez. Cada página passou por rodadas de ajuste de tom, extensão e o que incluir ou cortar.
Resultado
13
commits do início ao fim do scaffold ao deploy
7
páginas publicadas 4 cases, sobre, fora do trabalho, home
1
design system do zero sem CSS framework
0
imagens no primeiro deploy conteúdo antes de visual
Os arquivos
Esses são os documentos que guiaram a construção deste portfólio, com dados pessoais removidos. Copie, adapte ou use como referência para o seu processo.
CONTEXT.md Objetivo do projeto, o que é um bom resultado e o que evitar.
# Projeto Atual
## O que estamos construindo
Estou atualizando meu portfólio profissional — um site pessoal que funciona como alternativa ao LinkedIn e redes sociais. O objetivo é que qualquer pessoa possa me encontrar online de forma otimizada e ter acesso ao meu trabalho de maneira clara e direta.
## O que é um bom resultado
Tudo que for necessário para construir um portfólio de qualidade: melhor estruturação de conteúdo, arquitetura de informação, design do site e orientações sobre como desenvolver e entregar o produto final.
## O que evitar
- Resolver problemas além do escopo — o foco é mostrar trabalho, não construir uma plataforma complexa
- Soluções bonitas no protótipo mas inviáveis de implementar em código
- Reproduzir o que LinkedIn e redes sociais já fazem — o portfólio deve ser uma alternativa, não uma cópia
REFERENCES.md Referências visuais e notas sobre equilíbrio entre estética e viabilidade técnica.
# Referências
## Exemplos de bom trabalho
Gosto da estética **brutalista** — minimalista e atemporal, com uso de cores que contrastem bem entre si.
Portfólios de referência:
- https://www.laurenlangdesign.com/
- https://www.kysondana.com/
- https://www.thatedchao.com/
- https://www.tparkes.com/
## Links relevantes
- Portfólio atual: https://[portfolio-anterior]
## Notas
- O resultado precisa ser **tecnicamente desenvolvível** — não adianta ser bonito no protótipo se não faz sentido implementar. O design tem que ser viável de construir em código.
- Ao mesmo tempo, tem que ser **bonito aos olhos** — o equilíbrio entre viabilidade técnica e qualidade estética é fundamental.
CLAUDE.md Instruções para o assistente de IA: identidade do projeto e regras de colaboração.
# Identidade
Você está ajudando o Lemuel a atualizar e manter seu posicionamento no mercado de trabalho (projetos, portfólio, redes).
## Regras
- Escreva de forma clara e direta
- Faça perguntas de esclarecimento antes de fazer suposições
- Quando não tiver certeza, diga isso abertamenteportfolio-planejamento.md Decisões editoriais: público-alvo, seleção de cases, métricas e ativos.
# Planejamento do Portfólio
Decisões editoriais e de escopo que guiam a construção do novo portfólio. Complementa o [portfolio-historico.md](portfolio-historico.md) (fonte de conteúdo) e o [CONTEXT.md](CONTEXT.md) (objetivo geral).
---
## Público-alvo
1. **Primário:** recrutadores
2. **Secundário:** clientes de freelance
Implicação: a arquitetura precisa ser escaneável por recrutador (visão rápida do histórico, cases com impacto claro), mas também sustentar uma leitura mais longa de quem quer contratar.
---
## Seleção de cases
Quatro cases no total, com profundidade variável:
| Case | Profundidade | Observação |
|---|---|---|
| **Youse Seguros (via BOLD Brasil)** | Alta | Mostrar como uma experiência só, sem separar BOLD. Conteúdo já está detalhado no histórico. |
| **Geopark Araripe / UNESCO** | Alta | Case com história longa (NexTI → voluntário → 2024). Conteúdo já está detalhado. |
| **Sienge (Starian/Softplan)** | Média/baixa | Cargo atual. Listar o que está sendo feito, sem detalhe de projeto específico. Manter genérico. |
| **Paguru Digital Solutions** | Baixa | Mantém na timeline com o detalhe que já existe, mas despriorizado. Pela idade, não é hero case. |
---
## Números e métricas
- Uso dos percentuais atuais (80% Geopark, 60% tickets Youse, 90%+ satisfação, etc.) depende de checagem de **cláusula de não publicidade / NDA**
- Alternativa considerada: buscar reportagens ou fontes públicas que corroborem dados (ex: release de imprensa da Youse sobre a Calculadora de CO2). Valor duvidoso, baixa prioridade
- **Abordagem padrão até revisão:** usar linguagem qualitativa quando o número for sensível ("redução expressiva", "adoção alta"), reservar números só para o que for comprovadamente público ou não sensível
---
## Ativos visuais
- Existem screenshots e protótipos parciais de alguns cases
- Novos assets serão produzidos depois
- **Foco principal é a parte textual.** Visual é suporte, não protagonista
- Combina com a estética brutalista já decidida (minimalista, tipografia e contraste carregam o peso)
---
## Próximos passos sugeridos
1. Rodar o prompt de recuperação do Sienge numa IA externa para extrair o que está sendo feito no cargo atual
2. Revisar os cases Youse e Geopark aplicando a decisão sobre números (qualitativo vs quantitativo)
3. Começar arquitetura de informação do site (páginas, hierarquia, fluxo de navegação)
4. Inventário de ativos visuais disponíveis por case
arquitetura-site.md Mapa do site, decisões de navegação e conteúdo por página.
# Arquitetura do Site
Decisões de estrutura do novo portfólio. Complementa o [portfolio-conteudo.md](portfolio-conteudo.md) (texto final) e o [portfolio-planejamento.md](portfolio-planejamento.md) (decisões editoriais).
---
## Abordagem
Multi-page, não single-page. Razão principal: cada case vira URL isolada e compartilhável, o que é crítico para enviar em candidatura de vaga ou mensagem de prospecção.
---
## Mapa do site
```
/ Home
├── /work/sienge Case Sienge (Starian)
├── /work/geopark Case Geopark
├── /work/youse Case Youse
├── /work/paguru Case Paguru
├── /sobre Sobre + competências + como trabalho + educação
└── /fora-do-trabalho Vida pessoal
```
Total: 7 páginas. Footer com contato presente em todas.
---
## Navegação
**Topo**: `[SEU NOME]` (logo texto, linka para home) · `Trabalhos` · `Sobre` · `Fora do trabalho`
**Footer** (em todas as páginas):
- E-mail: [seu-email@dominio.com]
- LinkedIn
- Localização: Juazeiro do Norte, CE
- Ano
Sem menu hambúrguer, sem modal de contato. O footer é o contato.
---
## Ordem dos cases (cronológica, do mais recente)
1. **Sienge · Starian** (2025 a atual): case curto
2. **Geopark Araripe** (2024): case completo
3. **Youse Seguros** (2022 a 2024): case completo
4. **Paguru Digital Solutions** (2020 a 2022): case compacto
Essa ordem aparece na home e determina a leitura sequencial.
---
## Conteúdo por página
### / (Home)
- **Hero**: nome, role ("Product Designer"), tagline, localização
- **Sobre resumo**: versão curta do "Sobre mim", com link para /sobre
- **Trabalhos**: grid/lista dos 4 cases em ordem cronológica. Cada card com:
- Preview visual (placeholder até ter imagem final)
- Nome do case
- Tagline de uma linha
- Ano
- **Footer**: contato
### /work/{slug}
Conteúdo completo de cada case, como está em [portfolio-conteudo.md](portfolio-conteudo.md).
### /sobre
- Sobre (versão longa)
- Como trabalho (4 hábitos)
- Competências (4)
- Educação (formação + certificações)
### /fora-do-trabalho
- Frase de abertura: *"Tentando descobrir meu lugar em um mundo novo todo dia, com curiosidade e resiliência."*
- Lista dos 7 interesses
- Espaço reservado para galeria de fotos e registros no futuro
---
## Preview de card na home
Formato proposto:
```
[Placeholder de imagem]
SIENGE · STARIAN
Discovery de IA para criação de títulos em lote.
2025 a atual.
→
```
Cards sem parágrafo ou bullet. Tudo que importa fica dentro do /work/{slug}.
---
## Decisões tomadas
- Multi-page (não single-page): cases viram URLs compartilháveis.
- Ordem cronológica (não por peso).
- Placeholder para imagens até ter assets finais.
- /sobre e /fora-do-trabalho separados, dando espaço ao pessoal.
- Contato só no footer. Sem página /contato.
---
## Assets pendentes
- Preview visual de cada case (4 imagens)
- GIF do login Youse
- Foto do Geopark
- Galeria para /fora-do-trabalho (fotografia, trilha, cozinha, etc.)
---
## Próximos passos sugeridos
1. Definir tokens visuais (tipografia, paleta, espaçamento) alinhados ao brutalismo das referências em [REFERENCES.md](REFERENCES.md).
2. Esboço de layout (wireframe ou direto no Figma).
3. Decisão de stack de desenvolvimento. Sugestões: Astro (estático, bom para portfólio), 11ty (minimalista), ou HTML/CSS puro.
4. Produção dos assets pendentes.
identidade-visual.md Sistema de design: tipografia, paleta, espaçamento, wireframes e componentes.
# Identidade Visual
Sistema de design do novo portfólio. Complementa o [arquitetura-site.md](arquitetura-site.md) (estrutura de páginas) e o [portfolio-conteudo.md](portfolio-conteudo.md) (texto final).
---
## Abordagem
Brutalismo minimalista e atemporal, inspirado no DNA comum dos quatro portfólios em [REFERENCES.md](REFERENCES.md): tipografia forte, imagem como apoio, nada decorativo.
Posicionamento estético: começar mais próximo do **Ed Chao** (tipografia dominante, blocos geométricos onde entrariam imagens) e migrar para **Tom Parkes** quando os assets finais (GIFs, fotos, screenshots) chegarem. Mesmo layout, densidade visual diferente. Estratégia chamada aqui de **Parkes-flirt**.
---
## Tipografia
### Famílias
- **Display**: Space Grotesk, bold. Carrega personalidade nos títulos e números.
- **Corpo**: Inter, regular e medium. Segura a leitura sem brigar com o display.
Ambas gratuitas via Google Fonts ou self-hosted.
### Escala
| Uso | Fonte | Tamanho | Peso |
|---|---|---|---|
| Page title / Hero | Space Grotesk | 64 a 80px | Bold |
| Número de impacto | Space Grotesk | 48 a 60px | Bold |
| "Próximo case" (link) | Space Grotesk | 40 a 48px | Bold |
| Parte / Subtítulo | Space Grotesk | 36 a 40px | Bold |
| Item de lista destaque | Space Grotesk | 24 a 28px | Bold |
| Lead paragraph | Inter | 20px | Regular |
| Body | Inter | 18px | Regular |
| Small / UI | Inter | 14 a 16px | Regular |
| Label (uppercase) | Inter | 12 a 14px | Medium |
---
## Paleta
**Opção 2**: branco creme + preto profundo + verde floresta como acento.
| Token | Valor | Uso |
|---|---|---|
| Fundo | `#FAFAF7` | Background de todas as páginas |
| Texto primário | `#0A0A0A` | Títulos e corpo principal |
| Texto secundário | `#666666` | Metadata, datas, labels |
| Linhas / divisores | `#E0E0E0` | Separadores entre seções |
| Acento | `#2D4A2B` | Hover de link, microdetalhes |
O verde floresta amarra a trilha de sustentabilidade sem virar slogan colorido. Aplicação parcimoniosa.
---
## Espaçamento
- Grid base: 8px
- Padding lateral da página: 32px (mobile), 80px (desktop), 120px (wide)
- Gap entre seções: 120 a 160px
- Gap entre elementos: 16 a 32px
- Largura máxima de leitura: ~700px para texto corrido
---
## Princípios de layout
1. **Coluna única** em todas as páginas. Largura de leitura constante.
2. **Divisores finos** entre seções, não cards nem caixas.
3. **Labels uppercase pequenos** organizam hierarquia sem competir com o conteúdo.
4. **Números em destaque isolados**: métricas de impacto (60%, 80%, 90%+) aparecem em display grande, separadas do parágrafo.
5. **Slots de imagem sempre full-width** do container. Quando vazios, viram blocos geométricos discretos, não "placeholder feio".
6. **Sem animação ornamental**. Transições mínimas (hover simples, scroll natural).
7. **Nav no topo não fixa**, footer pesado com contato.
---
## Wireframes
### Home (/)
```
[nav topo]
LEMUEL MONTEIRO
PRODUCT DESIGNER
Cinco anos construindo produtos digitais,
com uma trilha consistente em sustentabilidade.
Juazeiro do Norte, Ceará
────
SOBRE
[parágrafo curto com versão curta do "Sobre mim"]
→ Ler mais
────
TRABALHOS
[slot] SIENGE · STARIAN
Discovery de IA para criação de títulos
em lote. 2025 a atual →
[slot] GEOPARK ARARIPE
Digitalização dos processos de avaliação
ambiental (UNESCO). 2024 →
[slot] YOUSE SEGUROS
Login com CPF e Calculadora de CO2.
2022 a 2024 →
[slot] PAGURU DIGITAL SOLUTIONS
Projetos em educação, saúde e jurídico.
2020 a 2022 →
────
[footer]
```
### Case page (/work/{slug})
```
[nav topo]
← Trabalhos
YOUSE SEGUROS (Space Grotesk 64-80px bold)
Product Designer via BOLD Brasil (Inter 20px)
2022 a 2024
[slot 16:9 para hero image ou GIF]
────
CONTEXTO (label uppercase 14px)
[parágrafo 18px]
────
PARTE 1
LOGIN COM CPF (Space Grotesk 40px)
O PROBLEMA
[parágrafo + bullets]
A DECISÃO
[parágrafo]
O ROLLOUT
1. Faseamento
2. Construção das perguntas
3. Métrica por fase
IMPACTO
60% (Space Grotesk 60px bold, isolado)
redução em contatos de suporte relacionados a login.
[continua]
[slot de GIF ou imagem]
────
PARTE 2
CALCULADORA DE CO2
[mesma estrutura]
IMPACTO
90%+ (Space Grotesk 60px bold)
satisfação (thumbs up) na tela principal.
[grid 2x2 de screenshots]
REPERCUSSÃO NA IMPRENSA
→ Terra
→ Revista Cobertura
→ Youse ESG
────
TAMBÉM ATUEI EM
Endosso de contrato. [parágrafo curto]
PRÓXIMO CASE
GEOPARK ARARIPE → (Space Grotesk 48px link)
[footer]
```
**Variações por case**:
- Youse e Geopark: estrutura completa com hero image e partes.
- Sienge e Paguru: estrutura enxuta, sem "Partes", sem hero image, só contexto + conteúdo + próximo case.
### Sobre (/sobre)
```
[nav topo]
SOBRE (Space Grotesk 64-80px)
[parágrafo lead em Inter 20px: abertura do "Sobre longa"]
[parágrafos seguintes em 18px]
────
COMO TRABALHO (label 14px uppercase)
[parágrafo de abertura]
Confirmação antes do pixel (Space Grotesk 24px bold)
[descrição Inter 18px]
Dados primeiro
[descrição]
IA como ferramenta de exploração
[descrição]
Construção iterativa
[descrição]
────
COMPETÊNCIAS
01 Discovery baseado em dados (Space Grotesk 28px)
[explicação breve Inter 16px]
02 Design de interfaces para operação
03 Produtos com impacto socioambiental
04 Prototipação iterativa em Figma + IA
────
EDUCAÇÃO
Bacharelado em Sistemas de Informação
UniFAP · 2017 a 2021
Certificações
· Google UX Design (Coursera)
· Design for the 21st Century com Don Norman (IxDF)
· EFSET B2
[footer]
```
### Fora do trabalho (/fora-do-trabalho)
```
[nav topo]
FORA DO TRABALHO (Space Grotesk 64-80px)
"Tentando descobrir meu lugar em um mundo novo todo dia, com curiosidade e resiliência."
(Space Grotesk 36px, citação)
Juazeiro do Norte · Maio 2025 (Inter 14px, meta)
────
Fotografia (Space Grotesk 56px bold, cada interesse
Cozinha em linha própria, espaçamento generoso)
Jiu-jitsu
Trilha
Animal
Planta
Agrofloresta
────
GALERIA (label 14px uppercase)
[grid 3x3 de placeholders 1:1] (slots Parkes-flirt)
[conforme fotos chegarem, substitui]
[footer]
```
---
## Componentes padrão
### Navegação topo
```
LEMUEL MONTEIRO trabalhos · sobre · fora do trabalho
```
- Logo texto à esquerda, menu à direita.
- Itens em Inter 14-16px, uppercase opcional.
- Hover com verde floresta.
- Não fixa (deixa scroll natural).
### Footer
```
────────────────────────────────────────
[seu-email@dominio.com] Juazeiro do Norte · CE
LinkedIn 2026
```
- Presente em todas as páginas.
- Inter 14-16px, texto secundário para meta.
- Links sublinhados só em hover.
### Slot de imagem
- Quando vazio: fundo levemente mais escuro que o background (`#F0F0EC`), nada dentro.
- Quando preenchido: imagem ocupa todo o slot, sem moldura.
- Aspect ratios padrão: 16:9 (hero), 4:3 (screenshot), 1:1 (galeria).
---
## Assets pendentes
- Preview visual de cada case (4 imagens ou blocos tratados)
- GIF do login Youse
- Foto do Geopark (em campo ou no território do Araripe)
- Galeria inicial de /fora-do-trabalho (fotografia, trilha, cozinha)
---
## Próximos passos sugeridos
1. **Stack de desenvolvimento**: decisão entre Astro (estático, bom para portfólio), 11ty (minimalista) ou HTML/CSS puro. Influencia como o conteúdo é estruturado em arquivos.
2. **Prototipação no Figma** (opcional): um frame por página tipo, aplicando os tokens. Útil para ver a respiração real antes de codar.
3. **Produção de assets** com specs concretas (dimensões, formato, duração de GIF, estilo de foto).
prompt-prototipagem.md Brief completo para prototipagem no Lovable, Stitch ou similar.
# Brief de prototipagem — Portfólio de [SEU NOME]
Documento autocontido para prototipar em Lovable, Figma Make, Google AI Studio, Google Stitch ou similar. Não precisa de anexos.
---
## Objetivo
Prototipar a **home** e **uma página de case (Geopark Araripe)** de um portfólio de Product Designer. Estilo: **brutalismo minimalista atemporal**. Tipografia carrega o peso, imagem é apoio. Nenhuma animação ornamental.
Público-alvo: recrutadores (leitura rápida) e clientes de freelance (leitura longa). O site precisa ser escaneável em 10 segundos e sustentar leitura profunda depois.
---
## Stack alvo
Site estático, multi-page, HTML/CSS (ou Astro/React gerando HTML estático). **Sem backend, sem autenticação, sem IA em runtime, sem animações de scroll, sem parallax, sem partículas.** Transições limitadas a hover simples (cor de link).
---
## Sistema visual
### Tipografia
- **Display**: Space Grotesk Bold (títulos, números de impacto, links grandes). Google Fonts.
- **Corpo**: Inter Regular/Medium (texto, UI, labels). Google Fonts.
Escala:
| Uso | Fonte | Tamanho | Peso |
|---|---|---|---|
| Hero / page title | Space Grotesk | 64–80px | Bold |
| Número de impacto (isolado) | Space Grotesk | 48–60px | Bold |
| Link "próximo case" | Space Grotesk | 40–48px | Bold |
| Parte / subtítulo | Space Grotesk | 36–40px | Bold |
| Item de lista destaque | Space Grotesk | 24–28px | Bold |
| Lead paragraph | Inter | 20px | Regular |
| Body | Inter | 18px | Regular |
| Small / UI | Inter | 14–16px | Regular |
| Label uppercase | Inter | 12–14px | Medium, letter-spacing 0.08em |
### Paleta
| Token | Hex | Uso |
|---|---|---|
| `--bg` | `#FAFAF7` | Fundo de todas as páginas (branco creme) |
| `--text` | `#0A0A0A` | Títulos e corpo principal (preto profundo) |
| `--text-muted` | `#666666` | Metadata, datas, labels |
| `--divider` | `#E0E0E0` | Linhas finas entre seções |
| `--accent` | `#2D4A2B` | Hover de link, microdetalhes (verde floresta) |
| `--slot-empty` | `#F0F0EC` | Fundo de slot de imagem vazio |
Verde floresta é acento parcimonioso — amarra a trilha de sustentabilidade do portfólio. Nunca grandes superfícies, nunca título colorido.
### Espaçamento
- Grid base: 8px.
- Padding lateral: 32px mobile / 80px desktop / 120px wide.
- Gap entre seções: 120–160px.
- Gap entre elementos: 16–32px.
- Largura máxima de leitura: ~700px para texto corrido (coluna única, centralizada ou alinhada à esquerda).
### Princípios de layout
1. **Coluna única** em todas as páginas. Sem grids de múltiplas colunas para texto.
2. **Divisores finos** (1px, `--divider`) entre seções. Nunca cards, nunca caixas, nunca sombras.
3. **Labels uppercase pequenos** (Inter 12–14px) organizam hierarquia sem competir com o conteúdo.
4. **Números em destaque isolados**: métricas (80%, 60%, 90%+) em linha própria, Space Grotesk 48–60px bold, texto descritivo abaixo em Inter 18px.
5. **Slots de imagem full-width do container**. Quando vazios, fundo `--slot-empty`, sem texto de placeholder, sem moldura. Proporções: 16:9 (hero), 4:3 (screenshot), 1:1 (galeria).
6. **Nav no topo não fixa**. Scroll natural.
7. **Footer pesado** com contato, presente em todas as páginas.
---
## Componentes globais
### Nav (topo, não fixa)
```
LEMUEL MONTEIRO Trabalhos · Sobre · Fora do trabalho
```
- Logo texto à esquerda (Inter medium 14–16px, linka para `/`).
- Menu à direita (Inter 14–16px, itens separados por ` · `).
- Hover muda cor para `--accent`.
- Padding vertical 24–32px.
### Footer (em todas as páginas)
```
────────────────────────────────────────────────────
[seu-email@dominio.com] Juazeiro do Norte · CE
LinkedIn 2026
```
- Divisor fino acima.
- Duas colunas em desktop, empilhado em mobile.
- Inter 14–16px, cor `--text-muted` para metadata à direita.
- Links sublinhados só em hover.
---
## Páginas a prototipar
### 1. Home (`/`)
```
[ NAV TOPO ]
LEMUEL MONTEIRO ← Space Grotesk 64–80px bold
PRODUCT DESIGNER ← Inter 20px, text-muted
Cinco anos construindo produtos digitais,
com uma trilha consistente em sustentabilidade. ← Inter 20px lead, max ~700px
Juazeiro do Norte · Ceará ← Inter 14px, text-muted
──────────── divisor ────────────
SOBRE ← label uppercase 14px, text-muted
Product Designer com cinco anos de experiência em produtos digitais.
Atuo hoje na Starian (antiga Softplan), no time de Contas a Pagar do Sienge,
e mantenho uma trilha consistente de projetos em sustentabilidade:
Geopark Araripe (UNESCO), GIR e a Calculadora de CO2 da Youse Seguros.
← Inter 18px, max ~700px
→ Ler mais ← link para /sobre, Inter 16px
──────────── divisor ────────────
TRABALHOS ← label uppercase 14px
[slot 4:3 vazio] SIENGE · STARIAN ← Space Grotesk 28px bold
Discovery de IA para criação de títulos em lote.
2025 a atual → ← Inter 16px, text-muted
[slot 4:3 vazio] GEOPARK ARARIPE
Digitalização dos processos de avaliação
ambiental (UNESCO). 2024 →
[slot 4:3 vazio] YOUSE SEGUROS
Login com CPF e Calculadora de CO2.
2022 a 2024 →
[slot 4:3 vazio] PAGURU DIGITAL SOLUTIONS
Projetos em educação, saúde e jurídico.
2020 a 2022 →
[ FOOTER ]
```
**Notas da home:**
- Cards de case **não são caixas**. São linhas com slot de imagem à esquerda (ou em cima no mobile) e texto à direita. Divisor fino entre cards.
- Card inteiro é clicável, leva para `/work/{slug}`.
- Hover no card: texto muda para `--accent`.
- A seta `→` é parte do texto, não ícone separado.
### 2. Case: Geopark Araripe (`/work/geopark`)
```
[ NAV TOPO ]
← Trabalhos ← Inter 14px, text-muted, linka para /
GEOPARK ARARIPE ← Space Grotesk 64–80px bold
Designer de Produtos ← Inter 20px
Abril a Dezembro de 2024 · Crato, CE ← Inter 16px, text-muted
[ slot 16:9 vazio — hero ] ← fundo --slot-empty, sem texto dentro
──────────── divisor ────────────
CONTEXTO ← label uppercase 14px
Atuei no Geopark Araripe, instituição ligada à UNESCO que atua como
catalisador de transformação sustentável na região do Cariri cearense
(área que engloba a Floresta Nacional do Araripe, a primeira FLONA do
Brasil). O foco do projeto era digitalizar os processos de avaliação
das áreas de preservação.
← Inter 18px, max ~700px
──────────── divisor ────────────
HISTÓRICO DO PROJETO ← label uppercase 14px
Esse projeto atravessou três fases da minha trajetória, e cada retomada
trouxe refinamentos baseados no que eu tinha aprendido no intervalo.
← Inter 18px
01 Graduação (NexTI) ← Space Grotesk 24–28px bold
Primeiro contato, estruturação do problema e protótipo inicial. ← Inter 16px
02 Período voluntário
Retomada por conta própria, com refinamentos baseados em experiências
acumuladas no mercado.
03 2024 com a instituição
Liderança direta da implementação da solução digital, dentro da
estrutura do Geopark.
──────────── divisor ────────────
O DESAFIO ← label uppercase 14px
O processo manual de avaliação dos locais de preservação, feito com
papel e caneta em campo, gerava atrasos na coleta e análise dos dados.
Esses atrasos comprometiam o planejamento das ações de conservação,
que é o trabalho central do Geopark.
← Inter 18px
──────────── divisor ────────────
A ABORDAGEM ← label uppercase 14px
Liderança de time ← Space Grotesk 24–28px bold
Coordenação do time de desenvolvimento em ciclos ágeis. ← Inter 16px
Definição de escopo
Identificação da necessidade de uma fórmula matemática para mensurar
as condições dos locais avaliados, gerando relatórios mais precisos
para os gestores.
Pesquisa e design
Entrevistas com stakeholders (avaliadores e gestores), protótipos
de alta fidelidade e testes de usabilidade.
──────────── divisor ────────────
A SOLUÇÃO ← label uppercase 14px
App para avaliadores ← Space Grotesk 24–28px bold
Ferramenta de coleta em campo, substituindo o caderno e caneta
do processo anterior.
[ slot 4:3 vazio — screenshot app ]
Painel web para gestores
Consolidação dos dados, aplicação da fórmula matemática e geração
de relatórios para tomada de decisão.
[ slot 4:3 vazio — screenshot painel ]
──────────── divisor ────────────
IMPACTO ← label uppercase 14px
80% ← Space Grotesk 60px bold, isolado em linha própria
redução no tempo do processo de avaliação. ← Inter 18px, linha seguinte
Ferramenta em fase de testes finais com gestores ambientais ao fim
da minha atuação em 2024.
← Inter 18px
──────────── divisor ────────────
PRÓXIMO CASE ← label uppercase 14px
YOUSE SEGUROS → ← Space Grotesk 40–48px bold, linka para /work/youse
[ FOOTER ]
```
**Notas do case:**
- Hero image é o único slot 16:9. Demais slots são 4:3.
- Métrica "80%" aparece sozinha em linha própria, sem parágrafo em volta. Texto descritivo na linha seguinte.
- Linha "Próximo case" é o único elemento tipográfico grande depois da métrica — serve como call-to-read.
---
## Critérios de aceitação
O protótipo está pronto quando:
1. **Hierarquia tipográfica**: olhando a página sem ler, dá para distinguir título > subtítulo > label > corpo sem esforço.
2. **Respiração**: nenhum bloco de conteúdo está apertado. Gap mínimo entre seções = 120px.
3. **Coluna única** mantida em toda a leitura. Texto nunca passa de ~700px.
4. **Slots vazios** parecem intencionais (bloco com fundo levemente mais escuro), não "placeholder feio".
5. **Métrica de impacto (80%)** é a coisa mais visível da página depois do título do case.
6. **Navegação topo + footer** iguais nas duas páginas.
7. **Mobile**: hero desce para 40–48px, padding lateral cai para 32px, cards de case viram empilhados (slot em cima, texto embaixo), footer vira uma coluna.
8. **Zero animações ornamentais**. Nenhuma transição além de hover de link (cor → verde floresta).
---
## O que evitar (erros comuns de geradores de IA)
- **Não** colocar cards com sombra, borda arredondada pronunciada ou fundo colorido.
- **Não** adicionar ícones decorativos (emojis, ilustrações, ícones de seção).
- **Não** usar gradientes, blurs ou glassmorphism.
- **Não** colocar animações de scroll, fade-in, parallax, contadores animados.
- **Não** usar mais de duas fontes (Space Grotesk + Inter, só isso).
- **Não** preencher slots de imagem com stock photos — deixar vazios como blocos geométricos.
- **Não** inventar seções extras ("Depoimentos", "Skills em barras de progresso", "Timeline animada").
- **Não** colocar menu hambúrguer no desktop. Mobile pode ter hambúrguer simples, mas opcional.
- **Não** criar uma página `/contato` separada. O contato vive no footer.
---
## Entregáveis esperados
1. Home (`/`) navegável.
2. Case Geopark (`/work/geopark`) navegável.
3. Link da home levando para o case e de volta (botão "← Trabalhos").
4. Responsivo (desktop + mobile no mínimo).
5. Código exportável (HTML/CSS ou componente React) — vai ser refinado depois em Astro.
Próximo case
STARIAN · SIENGE