side project · case de produto
Nathália Geraldo
Portfólio para uma jornalista com 15 anos de carreira — organizado em torno da própria assinatura editorial dela.
papel
Design + implementação, ponta a ponta
ferramentas
Figma, HTML/CSS/JS puro
foco
Editorial, performance e SEO
Contexto
A Nathália é jornalista e editora com 15 anos de carreira — passou por veículos como UOL Universa e Marie Claire, foi coordenadora de podcasts na Obvious e tem uma trajetória forte em pautas sociais, culturais e de direitos das mulheres. O desafio não era falta de conteúdo: era o oposto. Reportagens especiais, perfis, roteiros de podcast, cortes para redes sociais, um artigo acadêmico de pós-graduação — um portfólio extenso e de naturezas bem diferentes, que precisava caber num site só sem virar um currículo denso ou uma lista cansativa de links.
O site também precisava sustentar duas coisas ao mesmo tempo: a autoridade profissional dela (formação, trajetória em veículos reconhecidos, competências) e a experiência de navegar pelo trabalho publicado — pra quem chega ali é RH avaliando currículo, é marca buscando uma redatora, ou é leitor curioso sobre uma matéria específica.
Direção de design
O princípio que guiou todas as decisões foi simples: na dúvida, o caminho mais limpo. Testamos uma versão com seções escuras e uma segunda versão com tipografia em escada (títulos de tamanhos crescentes, meio editorial de revista) — as duas foram descartadas por ficarem "desorganizadas" diante do resto do site. O que ficou foi uma composição serifada (Playfair Display para títulos, DM Sans para o corpo do texto), paleta quente e clara (bege #F2EFEA de fundo, terracota #9E7C5C como único acento), com uma textura de grain sutil e um cursor customizado — os únicos dois excessos permitidos, porque reforçam a assinatura autoral sem competir com o conteúdo.
Pro portfólio extenso, a solução foi um sistema de filtro por categoria — Todos, Reportagem, Podcast & Roteiro, Redes & Vídeo, Acadêmico — em vez de uma grade única e infinita. Cada card carrega o essencial pra escanear rápido: o veículo, o tipo de peça e uma linha de contexto, sem obrigar quem visita a abrir tudo pra entender do que se trata.
Portfólio
Projetos que falam por si
Quase brancos, quase pretos
Carol Trentini, capa da Marie Claire
Implementação e SEO
O design nasceu no Figma e foi implementado em HTML, CSS e JavaScript puros — sem framework. Essa escolha teve dois motivos: o site é pequeno o bastante pra não precisar da complexidade extra, e um HTML enxuto carrega mais rápido, o que pesa direto no SEO de um site que existe justamente pra ser encontrado por quem procura o trabalho da Nathália.
Isso significou cuidar de metadados completos (title, description, Open Graph) pensados pra cada tipo de busca, hierarquia semântica de verdade (header, main, section, footer, headings em ordem), e interações leves em vanilla JS — o próprio filtro de categoria do portfólio e o scroll-reveal dos elementos via IntersectionObserver — sem dependência de bibliotecas pesadas de animação.
Resultado
O site está no ar em nathaliageraldo.com.br, reunindo mais de uma dezena de peças de portfólio organizadas em quatro categorias, a trajetória profissional completa e a formação acadêmica da Nathália — tudo isso sem abrir mão da leitura leve e editorial que guiou o projeto desde a primeira decisão de design.