Voltar paraBack to ExperimentosTinkering
O site da Federação Sul Americana de Krav Maga, mais leve e mais fácil de ler.The South American Krav Maga Federation's site, lighter and easier to read.
Um redesign não oficial, refeito do zero com foco em performance, legibilidade e acessibilidade.An unofficial redesign, rebuilt from scratch for performance, readability and accessibility.
ver no arsee it live códigosource code
O incômodo
O site da federação era pesado, lento e difícil de ler. O menu misturava as seções, e os cards tinham texto com pouco contraste e só eram clicáveis numa faixa vermelha.
O estalo
Um site real, com problemas reais, era a chance que eu queria para aprofundar Next.js, acessibilidade e componentização com shadcn/ui. Melhor que qualquer tutorial: se desse certo, o resultado seria visível para quem usa o site.
O que fiz
Mapeei o site com crawlers e encontrei cerca de 500 páginas organizadas em seções, quase uma documentação. Então, em vez de construir tudo do zero, fui atrás de uma ferramenta de documentação, que já resolveria navegação, busca e idiomas. Avaliei Docusaurus, Fumadocs e Nextra, e escolhi o Nextra 4: é feito em Next.js, tem internacionalização nativa e busca com Pagefind.
Mantive as seções do site original. Só arrumei as URLs de instrutores e academias, que estavam espalhadas, para um formato mais claro: /federacao/instrutores/nome e /academias/pais/estado/unidade.
- 01 Conteúdo primeiro Página por página, só texto e imagem, deixando carrosséis para depois.
- 02 Componentes Com os padrões claros, cards, lightbox e carrosséis com shadcn/ui e Embla.
- 03 Pente-fino Desktop e mobile, rodapé com mapa do site e imagens otimizadas.
O resultado
No PageSpeed (desktop), medindo os dois sites no mesmo dia:
- Performance
- 77 → 91
- Acessibilidade
- 74 → 96
- Boas práticas
- 74 → 100
- Speed Index
- 4,4 s → 0,9 s
E nenhum deslocamento de layout durante o carregamento.
O que aprendi
Começar pelo conteúdo, e não pelos componentes, mostra quais componentes você realmente precisa.
Uma coisa ainda me incomoda: o /pt obrigatório nas URLs em português. Se eu retomar o projeto, é o primeiro ajuste.
The itch
The federation’s website was heavy, slow and hard to read. The menu blurred its sections together, and the cards had low-contrast text and were only clickable on a thin red strip.
The insight
A real site with real problems was the chance I wanted to go deeper into Next.js, accessibility and componentization with shadcn/ui. Better than any tutorial: if it worked, the result would be visible to the people who use the site.
What I did
I crawled the site and found around 500 pages organized into sections, almost like documentation. So instead of building everything from scratch, I looked for a documentation tool, which would already handle navigation, search and languages. I compared Docusaurus, Fumadocs and Nextra, and picked Nextra 4: it’s built on Next.js, has native internationalization and search with Pagefind.
I kept the original site’s sections. I only tidied up the URLs for instructors and gyms, which were scattered, into a clearer format: /federacao/instrutores/name and /academias/country/state/gym.
- 01 Content first Page by page, just text and images, leaving carousels for later.
- 02 Components Once the patterns were clear, cards, a lightbox and carousels with shadcn/ui and Embla.
- 03 Polish Desktop and mobile, a footer with a sitemap, and optimized images.
The result
On PageSpeed (desktop), measuring both sites on the same day:
- Performance
- 77 → 91
- Accessibility
- 74 → 96
- Best practices
- 74 → 100
- Speed Index
- 4.4 s → 0.9 s
And no layout shift while loading.
What I learned
Starting with content, not components, shows you which components you actually need.
One thing still bugs me: the mandatory /pt in Portuguese URLs. If I pick the project back up, that’s the first fix.