Racional do Projeto
Este portfólio foi tratado
como um produto de UX.
Cada decisão — de cor, tipografia e hierarquia a acessibilidade e dark mode — foi intencional e embasada. Esta página documenta o racional, o design system e as ferramentas por trás do projeto.
01 — Contexto
O problema a resolver
Um portfólio de designer é um produto. Tem usuário, tem objetivo, tem contexto de uso. A maioria dos portfólios falha porque é concebido como vitrine — belo, mas sem narrativa. Este foi construído partindo de uma pergunta diferente: o que o usuário precisa concluir ao final da visita?
A resposta define tudo: a ordem das seções, a profundidade dos cases, o tom do conteúdo e até o sistema de navegação.
02 — Pesquisa
Quem usa e o que busca
Três perfis centrais, com jobs-to-be-done distintos:
Recrutador / RH
Job-to-be-done: Confirmar rapidamente se o perfil tem senioridade e fit com a vaga
Necessidade: Clareza de trajetória, hierarquia visual, tempo de leitura curto
Head de Produto / Design
Job-to-be-done: Avaliar capacidade de raciocínio estratégico e resolução de problemas
Necessidade: Cases com contexto, processo e resultado. Profundidade.
Designer / Par
Job-to-be-done: Calibrar nível, ver escolhas de sistema e consistência de execução
Necessidade: Design system coerente, atenção a detalhes, dark mode, responsividade
03 — Arquitetura de Informação
A ordem das seções não é aleatória
A sequência da homepage segue um funil de confiança: apresentação rápida → prova de trabalho → profundidade de trajetória → pensamento escrito → contato. Cada seção qualifica o usuário antes de pedir mais atenção dele.
04 — Design System
Sistema de tokens semânticos
O design system usa tokens semânticos — as cores não têm nomes literais, mas papéis. --bg, --fg, --fg-muted. Isso permite que o dark mode seja uma troca de tokens — não de estilos individuais.
Escala tipográfica
Tipografia variável com font-weight fluido (320–700). Todos os tamanhos usam Inter com ajustes de letter-spacing e line-height calibrados para leitura em tela. Botões têm classe própria .type-btn (16px/480) para evitar conflito de especificidade com utilitários Tailwind.
Paleta — light mode
bg
#fafafa
surface-soft
#f7f7f5
block-cream
#f4ecd6
fg / primary
#1f1d3d
fg-muted
#404040
fg-subtle
#777777
accent-magenta
#C8236A
block-navy
#1f1d3d
Paleta — dark mode
bg
#121124
surface-soft
#1a1836
block-cream
#1e1c31
fg
#ffffff
fg-muted
#e4e4e7
fg-subtle
#a1a1aa
accent-magenta
#C8236A
block-pink
#261724
Espaçamento
Base 8px. Todos os espaços são múltiplos de 8 — de 4px (xxs) a 96px (section). O py-section (96px) delimita seções da homepage; componentes usam a escala menor internamente.
Sistema de botões
Quatro variantes (primary, secondary, ghost, icon) × três tamanhos (sm, md, lg). Tipografia unificada em 16px/480 via .type-btn. Primary usa navy no light e magenta no dark. Secondary usa bordas do fg atual. Todos têm focus-visible com ring para navegação por teclado.
05 — Heurísticas de Nielsen
10 heurísticas aplicadas ao projeto
Cada heurística foi considerada no design e na implementação. Abaixo, como cada uma se manifesta neste portfólio.
Visibilidade do status do sistema
O usuário sempre sabe onde está e o que está acontecendo.
ScrollProgress no topo dos artigos do blog. BackToTop aparece depois de 400px de scroll. Transições suaves indicam mudança de estado.
Compatibilidade com o mundo real
Linguagem e conceitos familiares ao usuário, não ao sistema.
Seções nomeadas por significado ("Trajetória", "Artigos") — não por convenção técnica. Cases com títulos descritivos do problema, não do artefato.
Controle e liberdade do usuário
O usuário decide o modo de experiência.
Toggle de dark/light mode. Seletor de idioma (PT/EN). Dentro dos cases: toggles "Simplificada / Detalhada". BackToTop para retornar ao topo sem rolar.
Consistência e padrões
Elementos semelhantes se comportam de forma semelhante.
Todos os botões usam .type-btn (16px/480). Todas as seções usam py-section (96px). Cards de case seguem estrutura idêntica. Ícones da mesma família (Lucide).
Prevenção de erros
Design que evita que o erro aconteça.
Links externos com target="_blank" e rel="noopener noreferrer". Pre-commit hook de TypeScript bloqueia commits com erros de tipo. Formulário de contato com validação HTML nativa.
Reconhecimento em vez de memorização
Objetos e opções visíveis reduzem carga cognitiva.
Ícone de casa (House) no header em páginas internas — reconhecível sem label. Tags de categoria nos cards de artigo e case. Hover states revelam contexto adicional.
Flexibilidade e eficiência de uso
Atalhos para usuários experientes, sem prejudicar novatos.
Skip to content (tecla Tab) para usuários de teclado. Cases organizados por categoria (Product Design, Strategy, Foundations) para navegação direta. Scroll anchor links no header.
Estética e design minimalista
Cada elemento presente tem propósito. Sem ruído visual.
Ausência de decorações desnecessárias. Tipografia variável calibrada — pesos diferentes sem negrito artificial. Seções com background diferenciado apenas quando há justificativa visual.
Ajudar usuários a reconhecer e recuperar erros
Mensagens claras e saídas visíveis quando algo dá errado.
Página 404 com navegação de retorno. Posts de blog com externalUrl sinalizam saída do site. notFound() retorna erro adequado quando slug não existe.
Ajuda e documentação
Quando necessário, documentação clara e acessível.
Esta página — racional completo do projeto. Cada case documenta problema, processo e resultado. README no repositório. Metadados Open Graph para compartilhamento.
06 — Design Thinking
Double Diamond aplicado ao portfólio
O Double Diamond (Discover → Define → Develop → Deliver) estruturou o processo — mesmo em um projeto solo.
Divergir
Discover
Análise de referências de portfólios de designers sênior. Mapeamento do que recrutadores e heads de produto reportam buscar. Benchmark de soluções técnicas (Next.js 15, Tailwind v4).
Convergir
Define
Definição do usuário-alvo e seus jobs-to-be-done. Hierarquia de informação das seções. Decisão pelo design system de tokens semânticos como núcleo do projeto.
Divergir
Develop
Exploração da identidade visual, paleta e tipografia. Prototipação dos componentes de card, navegação e dark mode. Testes de contraste WCAG e legibilidade.
Convergir
Deliver
Implementação iterativa com Claude Code. Deploy contínuo via Vercel. Refinos de UX com base em feedback real — botões, espaçamentos, backgrounds, alinhamento de cards.
07 — Acessibilidade & Dark Mode
Acessibilidade como requisito, não como checklist
Acessibilidade
- Skip to contentLink oculto no header, visível ao focar por Tab — permite saltar o menu e ir direto ao conteúdo
- Focus visibleTodos os elementos interativos têm focus-visible com ring de 2px — nunca escondido
- ARIA labelsBotões de ícone (ThemeToggle, LanguageSwitcher, BackToTop) têm aria-label descritivo
- Semântica HTML<main>, <nav>, <section>, <article>, <header>, <footer> usados corretamente com aria-labelledby
- Alt textTodas as imagens têm alt descritivo. Ícones decorativos têm aria-hidden="true"
- Contraste WCAG AAMínimo 4.5:1 para texto normal. Tokens de fg-muted testados em cada background de seção
- Navegação por tecladoFluxo de Tab lógico. Drawer mobile fecha com Escape. Modal fecha com Escape
Dark mode
Implementado via next-themes com estratégia de classe (.dark no html). Tokens semânticos no CSS garantem que um único toggle muda todas as superfícies — sem overrides manuais por componente.
--bg--fg--color-surface-soft--color-block-cream--color-accent-magentaO modo escuro respeita a preferência do sistema (prefers-color-scheme) por padrão e persiste a escolha do usuário no localStorage via next-themes.
08 — Stack & Ferramentas
O que foi usado e por quê
Frontend
Next.js 15 — App Router
Framework React com RSC (React Server Components), Turbopack e geração estática. Páginas de cases e blog renderizam no servidor — sem JS desnecessário no cliente.
Tailwind CSS v4
Utility-first com @theme inline, tokens CSS nativos e @custom-variant dark. Sem configuração JS — tudo em CSS. Permite coexistência com classes tipográficas customizadas.
Framer Motion
Animações de entrada suaves (fadeInUp, stagger) em componentes client. Usado com critério — só onde o movimento agrega percepção de qualidade, nunca como decoração.
next-intl
Internacionalização com suporte a PT e EN. Arquivos de mensagens JSON, routing por locale (as-needed prefix), traduções server-side via getTranslations.
next-themes
Dark mode com persistência em localStorage e respeito ao prefers-color-scheme do sistema. Estratégia de classe (.dark) alinhada ao @custom-variant dark do Tailwind.
MDX + rehype
Blog renderizado via MDX com syntax highlighting (rehype-pretty-code, tema github-light/dark), links com slug, tabelas e listas via remark-gfm.
Infraestrutura
Vercel
Deploy automático conectado ao GitHub. Preview URLs para cada PR/branch. Edge network global. Variáveis de ambiente e domínio configurados no dashboard.
GitHub
Controle de versão com branch main. Pre-commit hook de TypeScript (tsc --noEmit) bloqueia commits com erros de tipo antes de chegarem ao repositório.
Inteligência Artificial no processo
Claude Code (CLI)
Desenvolvimento assistido por IA diretamente no terminal. Leitura, edição e criação de arquivos; execução de comandos git; TypeScript check integrado. Todo o código foi revisado e direcionado pela designer — a IA executa, a designer decide.
Claude Chat (claude.ai)
Exploração de conceitos de UX, racional de decisões de design, revisão de copy e estruturação de conteúdo para casos e artigos antes da implementação.
Nota sobre IA e autoria: O uso de IA neste projeto é intencional e transparente — não como substituto de competência, mas como ferramenta de aceleração. Cada decisão de design, estrutura de informação e escolha de UX é da designer. Claude executa — como um programador júnior que recebe direção clara. A qualidade do output reflete a qualidade do input.
09 — Aprendizados
Tratar o próprio portfólio como produto
A maior lição deste projeto: designers tendem a tratar o próprio portfólio como um exercício visual. Quando tratado como produto — com usuário definido, hipóteses, decisões embasadas e iterações —, o resultado é mais coerente e mais difícil de questionar.
O design system foi a decisão mais importante. Sem ele, cada componente seria uma decisão local e inconsistente. Com ele, dark mode, acessibilidade e responsividade são consequência do sistema — não esforço extra.
Este portfólio é um produto em evolução — como qualquer produto deveria ser.