Fundação José Neves: reconstrução em Webflow, migração de Gatsby e Contentful

O desafio

A Fundação José Neves é uma organização sem fins lucrativos portuguesa focada em educação e conhecimento. Tinham um site construído com Gatsby e Contentful — boa tecnologia, mas a configuração deixava a equipa dependente de developers para a maioria das alterações de conteúdo. Elementos hard-coded não eram editáveis. A interface do Contentful confundia a equipa editorial. Atualizar uma página que deveria levar minutos demorava dias.

Vieram ter connosco com um design em Figma e um briefing claro: reconstruir o site em Webflow, migrar todo o conteúdo existente, e recriar todas as animações do site antigo. A parte das animações foi o primeiro desafio. O build em Gatsby tinha efeitos triggered por scroll, transições staggered e elementos interativos que iam muito além do que a maioria dos projetos Webflow exige. O segundo desafio era a biblioteca de conteúdo — centenas de artigos organizados por tema, tipo e tags, com filtragem cruzada que precisava de funcionar em todas as combinações.

A solução

Construímos o site inteiro em Webflow, implementando o design Figma do cliente de raiz. Sem templates, sem atalhos.

O trabalho de animação foi a parte mais exigente. O site antigo tinha linhas de grelha que cresciam com o scroll, um menu SVG que se fragmenta ao passar o rato e depois abre uma navegação em ecrã inteiro com a sua própria sequência de animação, interações de toggle personalizadas, modais com vídeo, e um slider de homepage que se tornou uma das peças de que mais gostamos. A maioria dos efeitos hover foram feitos em CSS para manter a performance. Para tudo o que precisava de staggering ou sequenciação precisa, usámos GSAP — o Webflow Interactions não suporta staggering, e precisávamos desse nível de controlo.

Para a biblioteca de conteúdo, construímos um sistema de filtragem usando Jetboost para pesquisa e filtragem, combinado com JavaScript personalizado para a lógica de filtragem cruzada. Selecionar um tema continua a mostrar os tipos disponíveis. Selecionar um tipo continua a mostrar os temas relevantes. Fazer isto funcionar exigiu uma arquitetura CMS cuidadosa — 27 coleções no total, com campos multi-referência e coleções auxiliares de reverse lookup para contornar as limitações relacionais do Webflow.

Abordagem técnica

A migração foi um projeto por si só. A schema API do Contentful deu-nos acesso estruturado a 250+ artigos, mas os dados não estavam prontos para o formato CMS do Webflow. Usámos o Parabola para limpar, transformar e mapear o conteúdo antes de o importar. O resultado foi uma migração limpa sem entrada manual de dados.

A arquitetura CMS vai além de um projeto Webflow típico. 27 coleções tratam de tudo, desde artigos e entradas da biblioteca até conteúdo do slider da homepage — cada slide é uma entrada CMS que a equipa pode atualizar. Campos multi-referência ligam temas a artigos, artigos a tipos, tipos a tags. Onde as referências nativas do Webflow não chegavam, criámos coleções auxiliares para reverse lookups para que o sistema de filtragem pudesse consultar conteúdo a partir de qualquer direção.

Os resultados

A equipa da fundação atualiza conteúdo de forma independente. Páginas que demoravam dias a alterar agora levam minutos. O workflow editorial que pretendiam — tudo num único lugar, sem precisar de developer — é exatamente o que obtiveram.

Todas as animações do antigo site Gatsby foram recriadas. O site carrega em menos de 3 segundos. E entregámos tudo em quatro meses, incluindo a migração de conteúdo.

Para mais sobre porque deixámos de usar plataformas CMS tradicionais, leia WordPress vs Webflow: porque mudei depois de uma década.