THIS PORTFOLIO
Designer + Developer
Context
A portfolio is the first filter in any hiring conversation. Using Behance, Notion or a generic template solves the immediate need, but it creates a paradox: the site has to communicate how you think and, if the site was made without thinking, what does it communicate?
The decision to build it from scratch was part of the positioning: a designer who understands product needs to be able to ship product.
A positioning problem
Five years of experience across very different companies and sectors: consulting, insurtech, construction. The risk was coming across as an unfocused generalist. The challenge was to create a cohesive narrative without faking a specialization that doesn't exist.
The solution was to select and order. Cases in reverse chronological order, from most recent to oldest, each connected to the next, creating a chain of reading.
Content first
The process started with the text, not the design. The starting point was the previous portfolio (Webflow) and LinkedIn: two records of the same work, written at different times and for different audiences.
The comparison revealed differences in tone and gaps in the history. The Webflow portfolio had a more aspirational voice; LinkedIn was more technical and fragmented. The work was to reconcile the two: adjust the history year by year, even out the tone and define each text's role in the professional positioning.
The question that guided this stage: what does this text need to do? For each section, a different answer. The tagline needs to situate. The short bio needs to qualify. Each case needs to show reasoning, not just the result.
References
With the content settled, I went looking for examples to understand how designers I admire present their own work.
Four portfolios served as references: laurenlangdesign.com, kysondana.com, thatedchao.com and tparkes.com. All minimalist, all with strong typography as the main element of hierarchy. A brutalist aesthetic showed up as the common thread: no decoration, no gradient, no animation for animation's sake. The layout serves the content.
What got left out of the references was useful too. Sites with heavy motion, multiple palettes or experimental layouts were discarded: beautiful in the prototype, expensive to maintain in code.
Typography, style and prototype
With the references mapped out, I moved into the visual-exploration phase. Google Stitch came in to experiment with component patterns: variations in type, scale, spacing. Lovable to test layout and navigation structures.
This phase was iterative. No decision was made all at once. The palette was reduced to the minimum: off-white background, black for text, gray for secondary hierarchy and dark green as the single accent. The typography settled on two weights from two families: Space Grotesk for headings, Inter for body. A fluid scale with clamp() to work on any screen.
The Lovable prototype validated the navigation structure before a single line of code.
Claude Code
With the design system defined and the structure validated, the build happened entirely in Claude Code. The decision to move from Lovable to my own code was strategic: full control over the visual language, a design system of my own and the ability to iterate on text and code in the same environment.
The foundation came first: Astro scaffold, folder organization, color tokens, type scale, self-hosted fonts. No page before the base was ready.
Then the component architecture: Base, Nav, Footer, CaseCard, ImpactBlock, DividerBar, HeroBar, ImageSlot. ImageSlot as a placeholder let me publish the content before the images were ready, without leaving the layout broken.
The text for each case wasn't dropped in all at once. Each page went through rounds of adjusting tone, length and what to include or cut.
Results
13
commits from start to finish from scaffold to deploy
7
pages published 4 cases, about, outside work, home
1
design system from scratch no CSS framework
0
images in the first deploy content before visuals
The files
These are the documents that guided the building of this portfolio, with personal data removed. They are kept in their original Portuguese — copy, adapt or use them as a reference for your own process.
CONTEXT.md Project goal, what a good outcome looks like and what to avoid. (In Portuguese.)
# 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 Visual references and notes on the balance between aesthetics and technical feasibility. (In Portuguese.)
# 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://[previous-portfolio]
## 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 Instructions for the AI assistant: project identity and collaboration rules. (In Portuguese.)
# 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 Editorial decisions: target audience, case selection, metrics and assets. (In Portuguese.)
# 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 Site map, navigation decisions and content per page. (In Portuguese.)
# 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**: `[YOUR NAME]` (logo texto, linka para home) · `Trabalhos` · `Sobre` · `Fora do trabalho`
**Footer** (em todas as páginas):
- E-mail: [your-email@domain.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 Design system: typography, palette, spacing, wireframes and components. (In Portuguese.)
# 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
```
────────────────────────────────────────
[your-email@domain.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 Full brief for prototyping in Lovable, Stitch or similar. (In Portuguese.)
# Brief de prototipagem — Portfólio de [YOUR NAME]
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)
```
────────────────────────────────────────────────────
[your-email@domain.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.
Next case
STARIAN · SIENGE