Site interativo e portfólio sobre a Copa do Mundo FIFA 2026
EUA · Canadá · México — 48 seleções, 12 grupos, 104 jogos
🌐 Acessar o site ao vivo · 📦 Repositório
Este projeto nasceu da vontade de unir duas paixões: futebol e desenvolvimento web. Com a chegada da maior Copa do Mundo da história — a primeira com 48 seleções e sediada por três países (Estados Unidos, Canadá e México) — quis construir mais do que uma página estática: um site completo, interativo e profissional que servisse tanto de homenagem ao torneio quanto de peça de portfólio.
A versão inicial foi feita em JavaScript puro (HTML/CSS/JS). Conforme o projeto cresceu, foi migrado para React + TypeScript com Vite, ganhando componentização, tipagem forte e um build moderno. O grande destaque é o Simulador da Copa, que implementa de verdade os critérios oficiais de desempate da FIFA para calcular os classificados de cada grupo a partir dos placares — exatamente como os simuladores dos grandes portais esportivos.
💡 Um detalhe técnico curioso: as bandeiras usam imagens do FlagCDN em vez de emojis, porque o Windows 10 não renderiza emojis de bandeiras de países (mostra apenas os códigos, ex.: "US", "BR"). A solução com imagens garante que o site fique perfeito em qualquer sistema operacional.
- 🎬 Hero animado — abertura com contadores animados (48 seleções, 12 grupos, 104 jogos, 3 sedes)
- ⏳ Contagem regressiva em tempo real — timer (dias/horas/min/seg) até a abertura, 11/06/2026 às 16h (Brasília)
- 🌎 Sobre o torneio — países-sede, datas e o novo formato de 48 seleções
🅰️ Fase de grupos — os 12 grupos oficiais do sorteio de 2026, com modal de detalhes por seleção- ⭐ Seleções — cards das principais favoritas, com fotos de jogadores via API da Wikipédia
- 🐐 Craques (Hall da Fama) — Top 5 maiores da história das Copas + as estrelas de 2026
- 🎮 Simulador interativo — o coração do projeto (veja abaixo)
- 📜 História — linha do tempo com todas as edições da Copa, de 1930 a 2026
Um simulador completo em 3 fases, com lógica de negócio separada da interface (src/lib/groupSimulator.ts):
- Fase de Grupos — você digita os placares das 6 partidas de cada grupo e a classificação é calculada ao vivo, aplicando estritamente os critérios oficiais da FIFA:
- Pontos · 2. Saldo de gols · 3. Gols pró
- Confronto direto (pontos → saldo → gols pró entre os empatados)
- Fair play · 6. Sorteio
- Terceiros colocados — ranking unificado dos 12 terceiros; os 8 melhores avançam (pontos → saldo → gols pró → fair play).
- Mata-mata — chaveamento automático dos 16-avos de final (Rodada de 32) à final, passando por oitavas, quartas e semifinais, com disputa de 3º lugar e campeão.
Inclui botões para sortear resultados (aleatórios) e limpar, facilitando testar cenários.
| Categoria | Stack |
|---|---|
| Front-end | React 18, TypeScript 5 |
| Build | Vite 7 |
| Estilo | CSS puro com Custom Properties (design system próprio) |
| Ícones | Tabler Icons |
| Bandeiras | FlagCDN |
| Fotos | API REST da Wikipédia |
| Deploy | GitHub Pages |
- Node.js 18 ou superior
- npm (já vem com o Node)
# 1. Clone o repositório
git clone https://github.com/CaiqueCrepaldi/FifaWorldCup.git
# 2. Entre na pasta do projeto
cd FifaWorldCup
# 3. Instale as dependências
npm install
# 4. Rode o servidor de desenvolvimento
npm run devAbra http://localhost:5173 no navegador. Pronto! 🎉
npm run build # Gera a build de produção em dist/
npm run preview # Pré-visualiza a build de produção localmenteFifaWorldCup/
├── index.html # Entrada da aplicação
├── src/
│ ├── main.tsx # Bootstrap do React
│ ├── App.tsx # Composição das seções
│ ├── components/ # Componentes de UI
│ │ ├── Hero.tsx # Abertura animada
│ │ ├── Countdown.tsx # Contagem regressiva em tempo real
│ │ ├── About.tsx # Sobre o torneio
│ │ ├── Groups.tsx # Fase de grupos
│ │ ├── Teams.tsx # Seleções + TeamModal
│ │ ├── Legends.tsx # Hall da Fama
│ │ ├── Simulator.tsx # Simulador interativo
│ │ ├── History.tsx # Linha do tempo
│ │ ├── Nav.tsx # Navegação
│ │ └── Footer.tsx
│ ├── lib/
│ │ └── groupSimulator.ts # Motor de cálculo (regras FIFA)
│ ├── data/ # Dados (grupos, seleções, história, jogadores)
│ ├── hooks/ # usePlayerPhoto, useScrollReveal
│ ├── assets/ # Logo oficial 2026 (SVG)
│ ├── styles/
│ │ └── globals.css # Design system + estilos
│ └── types/ # Tipagens TypeScript
├── deploy.sh # Script de publicação no GitHub Pages
├── LICENSE # Licença MIT
└── vite.config.ts
O site é publicado no GitHub Pages a partir da branch gh-pages.
Para republicar após alterações (via Git Bash, na raiz do projeto):
bash deploy.shO script roda o build e envia o conteúdo de dist/ para a branch gh-pages.
🔗 Online: https://caiquecrepaldi.github.io/FifaWorldCup/
Caique Crepaldi
- Emblema da Copa do Mundo FIFA 2026 — Wikimedia Commons, licença CC BY-SA 4.0
- Bandeiras — FlagCDN
- Ícones — Tabler Icons
- Fotos de jogadores — API REST da Wikipédia
.svg){kind=link}
O código deste projeto é distribuído sob a licença MIT (veja o arquivo LICENSE). Marcas, emblemas e nomes relacionados à FIFA pertencem aos seus respectivos detentores e são usados aqui apenas para fins ilustrativos/educacionais.
Feito com ⚽ e muito ☕ — porque futebol e código combinam.