I've been building this World Cup fan site as a passion project
for a while now, and I finally got it to a place worth sharing.
Live Demo:https://world-cup-two-indol.vercel.app/
GitHub: https://github.com/AnshumanSharma69-bit/world-cup
What it does
- Pick-em Bracket — click teams to predict winners round by round. The bracket auto-updates as you pick.
- VS Battle Mode — select any 2 teams and get a full head-to-head stat comparison with animated radar charts
- Team Cards — 3D tilt effect on hover, glowing borders, stat breakdowns
- Player Database — browse players with individual stat cards
- Particle Background — Three.js powered, runs in the hero section
- Fully Mobile Responsive — works on all screen sizes
Tech Stack
No frameworks. No React. No Vue. Just:
- Vanilla HTML, CSS, JavaScript
- Three.js (particle background only)
- CSS custom properties for theming
- clip-path for the geometric button shapes
- CSS animations for the orbit rings, glitch effects, and card reveals
I wanted to challenge myself to build something visually complex
without reaching for a framework. Honestly it taught me more about
the DOM and CSS than any tutorial ever did.
The Hardest Part
The bracket re-rendering was the trickiest bit. Every time you pick
a winner, the next round needs to update — but only if both matches
in that pair are decided. Getting that logic right without it
feeling janky took a few rewrites.
The VS radar chart was also fun to build from scratch using Canvas
API — no chart library involved.
What I'd Add Next
- Real match data from a live API
- User accounts so picks are saved
- Multiplayer bracket challenges
What would you add? Drop it in the comments — I'm actively
still building this. Give me feedback
If you find it useful or fun, a star on GitHub means a lot —
this is a solo project built in free time.
Top comments (0)