felipe oliveira

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

Visitar o site (abre em nova aba)
Retrato de Nathália Geraldo, jornalista e editora em São Paulo — foto do site no ar

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

Todos Reportagem Podcast & Roteiro Redes & Vídeo Acadêmico
Reportagem UOL Universa

Quase brancos, quase pretos

Reportagem Marie Claire

Carol Trentini, capa da Marie Claire

nathaliageraldo.com.br
Screenshot real da home do site nathaliageraldo.com.br
Screenshot real do site nathaliageraldo.com.br em viewport mobile

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.

Screenshot real da secao de portfolio do site, mostrando os filtros de categoria e parte dos materiais publicados
Visitar o site (abre em nova aba)