2026 FIFA World Cup Retrospective
About Pitch26
591,000 lines of code. 77 files. 48 nations. 1,248 players. 104 matches. 9 ways to play. 1,248 collectible cards. Built by one person — three months of obsession, shipped seven weeks after the final whistle. No frameworks. No backend. No excuses.
The Project
What is Pitch26
Not a blog post about football. A software product about football.
Pitch26 is a retrospective archive of the 2026 FIFA World Cup — the first 48-team, 104-match, three-country tournament in FIFA history. Every nation, every squad, every match result, and every key moment — structured as data, rendered as a web experience. No CMS. No framework. No backend server. Just HTML, CSS, JavaScript, and 14 JSON files totaling over 16MB of structured tournament data.
The project started as a question: what happens when you treat a football tournament like a software engineering problem? The answer is 1,248 player records normalized to shirt-number position ranges, 104 match results with xG timelines, momentum graphs, and player ratings, 9 ways to play in the Fan Zone — six games, a 1,248-card collection, and a 15-secret easter egg hunt — with localStorage-based progression and a unified achievement system tracking 57 unlockable badges across all of them.
It's built by one person using an AI-native workflow — Claude, Cursor, Windsurf, and a modular prompt strategy that breaks complex features into granular, token-efficient tasks. No lorem ipsum. No placeholder content. Every stat, every scoreline, every player rating is real data from the tournament, cross-referenced and verified across multiple sources.
And it's completely static. No databases to query. No servers to maintain. No API keys to rotate. It loads on GitHub Pages for free, runs entirely in the browser, and persists user progress through localStorage. That's not a limitation — it's a design decision that makes the site fast, resilient, and genuinely portable.
"teams": [
{
"team_id": 1,
"team_name": "Argentina",
"team_slug": "argentina",
"tla": "ARG",
"group": "C",
"fifa_rank": 1,
"titles": 3,
"world_cup_appearances": 18,
"best_finish": "Champions",
"all_time_xi": { ... },
"iconic_moments": [ ... ],
"path_to_2026": [ ... ]
},
// ... 47 more teams
]"players": [
[
{
"id": 19001,
"name": "Emiliano Martínez",
"team_name": "Argentina",
"position": "GK",
"detailed_position": "GK",
"shirt_number": 23,
"market_value_eur": 28000000,
"form_score": 87
},
// ... 25 more Argentina players
],
// ... 47 more nation squads (1,248 total)
]{
"match_id": 1,
"slug": "mexico_vs_south_africa",
"round": "Group A",
"date": "2026-06-11",
"venue": { "name": "Estadio Banorte", "city": "Mexico City" },
"home_team": { "name": "Mexico", "score": 2, "formation": "4-3-3" },
"away_team": { "name": "South Africa", "score": 0 },
"key_events": [
{ "minute": 9, "type": "goal", "player": "Julián Quiñones" },
{ "minute": 67, "type": "goal", "player": "Raúl Jiménez" }
],
"man_of_the_match": "Raúl Jiménez",
// ... xG timelines, momentum, player ratings, stats
}Transparency
Data & Accuracy
What’s real, what’s illustrative, and what’s coming next.
A soft launch, honestly labelled
Pitch26 launched as a soft launch so the full experience — the archive, the encyclopedia, and the Fan Zone — could go live as one piece. As part of that, a meaningful share of the deeper numbers — individual player statistics, match events, ratings, and head-to-head details — are currently illustrative rather than fully verified.
What’s being refined
Future updates will progressively verify and refine player stats, match data, ratings, and records against reliable sources. Core tournament structure — the 104-match schedule, 48 nations, squads, and final results — is solid; the layers of detail around it are what will get sharper over time.
Found something off?
If a stat looks wrong, it probably is — and it’s on the refinement list. The release notice board on the home page — always reachable via the What’s New button — tracks every batch of data and feature updates as they ship.
Scale
The Numbers
What three months of obsession looks like when you measure it.
The Journey
The Origin Story
Every project has a moment where it goes from "wouldn't it be cool" to "I'm actually doing this."
The Spark
The 2026 World Cup was the biggest edition in FIFA history — 48 teams, 104 matches, 16 venues across three countries. It was the kind of tournament that generates data at a scale no previous World Cup had. Every match had xG timelines, momentum shifts, player ratings, and tactical narratives. Every nation had a story — debutants like Cabo Verde, heavyweights like Argentina, underdogs like Uzbekistan.
Watching it unfold, the question wasn't "can I build a website about this?" — anyone can do that. The question was "what happens if you treat the entire tournament like a software engineering problem?" Not a blog. Not a WordPress site. A product. With a data layer, a design system, interactive features, and user progression.
The Decision
The easy path was to use React, Next.js, and a database. Spin up a Vercel project, use an API for match data, and ship a CRUD app. But that would've been the same as every other tutorial project. Instead, the decision was made to go framework-less — pure HTML, CSS, and JavaScript. No npm install. No webpack config. No node_modules folder. Just files that open in a browser and work.
This wasn't about being contrarian. It was about proving that a solo developer with the right AI tools could build something at the scale of a small product team — without the overhead of a modern JavaScript toolchain. Every constraint was a feature. Every limitation was a design decision.
The Build
Three months. Not three months of weekends — three months of sustained, obsessive, iterative development. The data layer came first: 48 nations with historical stats, All-Time XIs, and iconic moments. Then 1,248 player records with positions, clubs, and tournament stats. Then 104 match results with detailed analytics. Then the Fan Zone — 6 games, a card collection system, achievements, and a progression engine.
The AI-native workflow was central. Instead of writing every line manually, complex tasks were decomposed into granular prompts — research, generation, validation, refinement. Claude handled data architecture. Cursor handled file manipulation. The two-stage prompting strategy (research first, then JSON generation) ensured data accuracy without manual data entry. This wasn't AI writing the site — it was AI amplifying a single developer's output by an order of magnitude.
The Finish Line
The tournament ended July 19. The site wasn't ready. The easy thing would've been to abandon it — the World Cup was over, the traffic window had closed, the "relevance" argument was dead. But that's not how software works. You don't ship when the hype peaks. You ship when it's done.
So the work continued. While the football world moved on, August became about finishing what was started — polishing the Fan Zone, rebuilding the results archive, shipping the achievements system and the stats dashboard, and preparing for launch. Seven weeks after the final whistle, with nobody watching, the site shipped anyway. Not because the moment demanded it — because the work deserved to be finished. The hardest part of this project was never writing the code. It was refusing to stop.
Chronology
The Build Timeline
Three months, four phases, one developer.
Foundation & Data Layer
Built the core architecture: appState pattern in main.js, 48 nations with group assignments, historical performance stats, All-Time XIs, iconic moments, and Path to 2026 narratives. Normalized 1,248 player records to shirt-number position ranges (GK 1-3, DEF 4-8, MID 9-19, FWD 20-26).
Encyclopedia & Results
Built the nation encyclopedia with dynamic filtering and glassmorphism detail pages. Implemented inline SVG pitch graphics for squad views. Created the results page with 104 matches, knockout bracket, tournament awards, and FotMob-style match detail views with xG timelines and momentum graphs.
Fan Zone Games & Cards
Built 6 interactive games: Trivia Challenge, Match Simulator, Who Am I?, Stat Battle, Guess the Score, and Personality Quiz. Implemented the card collection system with 1,248 player cards, 5 rarity tiers, and unlock conditions tied to achievements and game performance.
Polish & Launch Prep
Implemented the achievements system (57 badges across 4 tiers plus Platinum), the stats dashboard with composite Fan Zone Score, settings with nation theme picker, data export/import, and the dynamic nation theming system. Removed deprecated features. Then the launch grind: release notice board, data-accuracy disclosure, this About audit — seven weeks after the final whistle, still shipping.
Engineering
Tech Stack
Everything here is deliberately vanilla. No frameworks, no compilers, no dependencies.
HTML5
Semantic markup across 18 pages. No templating engine — every page is hand-structured with accessibility-first aria attributes, skip links, and proper landmark roles.
CSS3
20 stylesheet files using CSS custom properties (variables), grid, flexbox, backdrop-filter glassmorphism, color-mix(), background-clip: text, and clamp() for fluid typography. Zero preprocessor.
JavaScript (ES6+)
Vanilla JS with no transpiler. Uses fetch API, IntersectionObserver, localStorage, CSS Custom Properties API, and the Web Animations API. The appState architecture in main.js loads data once and shares it across all pages.
JSON Data Layer
14 JSON files totaling 16MB. The largest is players.json at 6.0MB (1,248 records). Every match, every player, every nation — all structured data, fetched client-side and cached in appState.
Inline SVG
All icons, pitch graphics, flag elements, and decorative illustrations are inline SVG — zero external image dependencies for UI components. Player images use API-Sports CDN URLs with initials-fallback generation.
AI-Native Tooling
Claude (data architecture, complex logic), Cursor (file manipulation, refactoring), Windsurf (rapid iteration), and a two-stage prompting strategy: research first, then generate. This isn't AI writing the code — it's AI amplifying output.
Under the Hood
How It Works
The architecture is simple by design — and that simplicity is what makes it resilient.
Pitch26 uses a centralized appState pattern. When a
page loads, main.js fetches the core JSON data files
once, stores them in a global appState object, and
every other script on the page reads from that shared state. No
duplicate fetches. No race conditions. No state management library.
Key Patterns
appState Singleton
main.js initializes a global
appState object by fetching JSON data once. All
page scripts read from this shared state instead of making
duplicate network requests. A initialized flag
prevents redundant fetches.
FZ Core API
fanzone-core.js exposes a single
FZ global object with methods like
getProfile(), addXP(),
recordGameScore(),
checkAchievements(), and
applyNationTheme(). Every Fan Zone page depends
on this API — it's the progression engine.
localStorage Persistence
All user progress — XP, level, game scores, collected cards,
unlocked achievements, settings, nation theme — is stored in
localStorage under fz_* keys. No server. No
account. No login. Your progress lives in your browser.
Dynamic Nation Theming
Selecting a nation in Settings overrides CSS custom properties
(--page-accent, --page-accent-2,
--page-accent-soft) on the
<body> element. Every Fan Zone page
inherits the nation's color pair — 63 nations, 63 unique color
combinations.
Two-Stage Prompt Strategy
Data enrichment uses a research-then-generate pattern: first prompt gathers and validates data, second prompt structures it as JSON. This ensures data accuracy without manual entry across 1,248 player records.
Inline SVG Everything
Pitch layouts, icons, flags, decorative elements — all inline SVG. Zero external icon fonts. Zero image requests for UI components. The site has no dependency on any CDN for its visual identity.
Visual Identity
The Design System
One design language. Every page. Every component. Every interaction.
Dark Navy Base
#0b0f1e — The foundation. Every Fan Zone page,
every nation detail, every game interface. Not black — a deep
navy that's warm enough to feel premium and cold enough to feel
technical.
Electric Blue
#00d4ff — The primary accent. Used for links,
active states, progress bars, and interactive elements. Bright
enough to pop on navy, restrained enough to not overwhelm.
Floodlight Gold
#f2b705 — The achievement color. Bronze, silver,
gold, and legendary tiers all derive from this warm tone.
Reserved for rewards, badges, and progression indicators.
Turf Teal
#2bcf9c — The positive-state color. Used for form
ratings, win indicators, and success states. A green that
references pitch grass without being a cliché football green.
Torch Red
#ef4360 — The alert color. Used sparingly — for
reset buttons, error states, and destructive actions. A red
that's vivid without being aggressive.
Glassmorphism
backdrop-filter: blur() — The signature effect.
Translucent cards with frosted-glass backgrounds, subtle
borders, and depth shadows. The nation detail pages and Fan Zone
hub both use this layering technique.
Typography
Anton
Display font — used for hero titles, stat values, and section headers. Condensed, bold, and impossible to ignore.
Space Grotesk
Body and heading font — used for everything else. Modern, geometric, and readable at every size from 12px labels to 25px subtitles.
Space Mono
Monospace font — used for stats, numbers, labels, and data-heavy elements. Technical aesthetic that reinforces the "software product" feel.
Design Tokens
Every color, font size, spacing value, and border radius is
defined as a CSS custom property in main.css. Change
one variable, and the entire site updates. That's the power of a
token system — it makes the design system maintainable by a single
developer.
Interactive
The Fan Zone
A retro-arcade experience wrapped in a World Cup retrospective. This is where the site stops being a reference and starts being a game.
The Fan Zone is nine ways to play: six interactive games, a 1,248-card collection system, a 15-secret easter egg hunt, and a 57-achievement badge chase — plus a stats dashboard and a settings page with dynamic nation theming, all powered by localStorage. No login. No server. No account. Your progress lives in your browser, and it persists across every page.
The Games
Trivia Challenge
Multiple-choice questions across 5 categories — Tournament History, Nations & Squads, Players & Performances, Matches & Moments, Records & Stats — in four modes: Classic, Daily, Speed, and Marathon. In-game answer streaks multiply your points.
Match Simulator
Simulate matches between any of the 48 nations using a form-based rating system. Features xG generation, momentum shifts, and match commentary. The most complex game at over 4,000 lines of JavaScript.
Who Am I?
Identify players from progressive clues — nation, position, era, club, tournament stats — across four modes: Classic, Expert (3 clues max), Daily, and Endurance (20 puzzles). Every one of the 1,248 players in the archive is a puzzle.
Stat Battle
Compare two players head-to-head across 20 stat categories — from tournament goals to market value. Classic is 10 rounds; Survival is one wrong answer and you’re out. Streak bonuses reward the confident.
Guess the Score
Predict scores from all 104 matches of the 2026 tournament. Points scale with precision — exact scores pay most, correct results and goal margins still score. Three modes: Classic, Expert (with hints), and a locked Daily challenge.
Personality Quiz
Answer 30 questions about your football philosophy and get matched with the 2026 player who embodies it — one of 112 results, each with a full profile of traits, club, and nation.
Progression Systems
Card Collection
1,248 player cards across 5 rarity tiers (Bronze, Silver, Gold, Rainbow, Diamond). Each card has a unique unlock condition — play games, unlock achievements, or reach level milestones. Collected cards are tracked in localStorage with timestamps.
Achievements
57 achievements across 4 tiers (Bronze, Silver, Gold, Legendary) plus a Platinum "World Champion" tier for 100% completion. Each achievement tracks live progress with a 3-state rendering system (Locked, In-Progress, Unlocked).
Stats Dashboard
A composite Fan Zone Score combines XP, level, achievements, cards, and game diversity into a single metric. The breakdown shows exactly how each component contributes to the total score.
Settings & Theming
Dynamic nation theming lets users pick from 63 color pairs (one per nation). The selected nation's colors override every accent across all Fan Zone pages via CSS custom properties. Includes data export/import and double-confirm reset.
XP & Levels
A non-linear leveling system with increasing XP requirements (5-15% per level). XP is earned from games, achievements, and card unlocks. Level titles progress from "Substitute" to "World Champion."
In-Game Streaks
Trivia and Stat Battle feature in-game answer streaks — consecutive correct answers multiply your score. This is session-based game mechanics, not daily-visit streaks. Pure gameplay, pure adrenaline.
Easter Egg Hunt
15 secrets hidden across the entire site — the Konami code, time-of-day triggers, comebacks, perfection, and pure curiosity. Hints stay vague on purpose, and the hub tracks your hunt with a live progress bar.
Data Engineering
The Data Layer
16MB of structured data. No database. No API. Just JSON files and client-side intelligence.
The largest file. 1,248 player records (48 nations × 26 players), each with position, shirt number, club, career history, and tournament_2026 stats. Stored as nested arrays per nation, flattened by main.js on load.
All 104 match results with match_id, slug, round, date, venue, referee, result, xG timeline, momentum, lineups, player ratings, key events, man of the match, post-match analysis, head-to-head, and form guide.
Player statistics for the Fan Zone games — ratings, form scores, and stat categories used by Stat Battle and Who Am I? Each player has position-specific GK stats or outfield stats.
48 nation records with team_id, slug, TLA, group, FIFA rank, titles, World Cup appearances, best finish, All-Time XI, iconic moments, and Path to 2026 narratives.
1,248 collectible player cards with ID, player_id, rarity tier (bronze/silver/gold/legendary), card number, flavor text, and unlock condition. Drives the card collection system.
Tournament metadata — host countries, venues with capacities, dates, champion, runner-up, third place, and a match index with slug/group/knockout structure for the results page.
The Data Pipeline
Research
Tournament data is gathered from multiple sources — official FIFA records, match reports, and statistical databases. The two-stage prompting strategy ensures accuracy: first prompt researches, second prompt generates structured JSON.
Structure
Raw data is normalized into JSON schemas. Player records follow a unified schema with position-based shirt number ranges. Nations follow a merged archive format with consistent keys.
Validate
Automated checks verify data integrity — unique IDs, correct position mappings (GK 1-3, DEF 4-8, MID 9-19, FWD 20-26), squad completeness (26 per nation), and cross-file references.
Load
main.js fetches the core JSON files once on page load and stores them in appState. Page scripts read from this shared state — no duplicate network requests.
Methodology
AI-Native Workflow
This site is proof that AI doesn't replace developers — it amplifies them.
Pitch26 was built using an AI-native workflow — a development methodology where AI tools are integrated into every stage of the process, not just as a code completion tool. This isn't "AI wrote my website." This is "a single developer used AI to operate at the scale of a small product team."
The key insight is that AI isn't a monolith. Different AI tools have different strengths, and using the right tool for each task is what makes the workflow effective:
Claude
Architecture & Data
Used for complex logic, data architecture, JSON schema design, and the two-stage research-then-generate prompting strategy. Claude's ability to handle large context windows made it ideal for processing entire JSON files and generating enrichment across 1,248 player records.
Cursor
File Manipulation
Used for file-level operations — refactoring, multi-file edits, CSS updates, and rapid iteration on UI components. Cursor's file-aware context made it ideal for cross-file consistency changes like updating nav links across 18 pages.
Windsurf
Rapid Iteration
Used for quick prototyping, styling experiments, and incremental feature development. The flow-state interface allowed for fast iteration cycles on game logic and CSS polish.
GitHub Copilot
Inline Completion
Used for boilerplate generation, repetitive code patterns, and inline completions during manual editing sessions. Best for the kind of code that follows obvious patterns but would be tedious to type.
The Two-Stage Prompt Strategy
Data enrichment across 1,248 player records used a structured two-stage approach to ensure accuracy:
Research
Prompt the AI to research a specific nation's 26-man squad — player names, positions, clubs, and tournament stats. The output is unstructured text with citations and confidence levels.
Generate
Feed the research output back into a second prompt that structures it as JSON matching the unified player schema. Validation checks catch position mismatches and missing fields before the data is committed.
Reflection
Lessons Learned
What three months — and shipping seven weeks late and seven weeks better — taught a single developer building a 591,000-line static site.
Constraints are Features
No framework meant no build step, no dependency hell, no version conflicts. No backend meant no server costs, no API rate limits, no database migrations. Every constraint that seemed like a limitation turned out to be a design decision that made the site faster, simpler, and more portable.
Data Before Design
Starting with the data layer — 48 nations, 1,248 players, 104 matches — before building any UI meant every page had real content from day one. No placeholder text. No lorem ipsum. The design served the data, not the other way around.
AI Amplifies, Not Replaces
The AI-native workflow didn't write the site — it amplified a single developer's output by 10×. The two-stage prompting strategy, the modular task decomposition, and the tool-selection discipline are the real skills. AI is a tool. Knowing which tool to use and when is the craft.
Ship When It's Done
The World Cup ended July 19. The site shipped in September — seven weeks after the final, long after the "relevance window" had closed. Giving up would have been the rational move; instead the deadline became an excuse for craft. Shipping an unfinished product on time would've been worse than shipping a finished product late. Software deserves to be completed — not just released.
Scope Kills Projects
The original scope was "a World Cup website." The final scope was 9 ways to play, 1,248 cards, 57 achievements, a progression system, and a design system. Features were added, removed (streaks, voting, fan wall, leaderboard), and re-added. Scope management — knowing what to cut — was more important than knowing what to build.
CSS Custom Properties Changed Everything
The dynamic nation theming system — 63 color pairs that override
every accent on every Fan Zone page — works because of CSS
custom properties. One setProperty() call on
document.body and the entire page transforms. No
class toggling. No JavaScript style logic. Just variables doing
what variables do.
The Person
The Creator
One developer. Three months. 591,097 lines. Refused to quit. This is who built it.
Tadiwa Chopamba
AI-Native Developer
Johannesburg, South Africa
I build software the way most people write essays — start with a thesis, structure the argument, and refine until it's worth reading.
Tadiwa is a Computer Science student at the University of Johannesburg, specializing in AI-native development and web engineering. His portfolio rebuild — 104 git commits, rated from 5.5/10 to 9/10 — taught him that discomfort is the path to visibility. Pitch26 is the next step: not just a portfolio, but a technical manifesto.
His writing style has been identified as "Conversational Dramatic Storytelling" — a blend of self-deprecating humor, emotional honesty, and conversational rhythm. He's a Toastmaster who placed 1st at the Area level and 3rd at the Division level in speech contests. That voice carries into how he builds software: every feature has a narrative, every component has a purpose, every line has intention.
Milestones
Technical Skills
Attribution
Credits & Data Sources
Real data from real sources. No Wikipedia scraping. No fabricated stats.
FIFA Official Records
Tournament structure, group assignments, match schedules, and official award winners (Golden Boot, Golden Glove, Golden Ball, Young Player Award).
API-Sports
Player imagery via API-Sports CDN
(media.api-sports.io). Player IDs cross-referenced
for image URL generation. Stats verified against official
tournament data.
Wikipedia
Player biographical data, career histories, and Wikipedia URLs for the image fallback system. Historical World Cup data for All-Time XI selections and iconic moments.
flagcdn.com
National flag images served via flagcdn.com CDN. Used in the nation directory, squad pages, and match results for visual nation identification.
AI Research Tools
Claude (Anthropic) for data architecture and enrichment. Cursor for file manipulation. Windsurf for rapid iteration. The two-stage prompting strategy ensured data accuracy across 1,248 player records.
Data Accuracy Disclaimer
While every effort has been made to ensure data accuracy through cross-referencing and validation, Pitch26 is an unofficial fan project. Match results, player stats, and historical data may contain minor discrepancies. For official records, consult FIFA.com.
Pitch26 is an unofficial fan platform. Not affiliated with or endorsed by FIFA, any national football association, or any commercial entity. All trademarks, logos, and brand names are the property of their respective owners. Player images sourced via API-Sports CDN. Flag images via flagcdn.com.
The Future
What's Next
The site is built. The roadmap is about refinement, not features.
Core Platform
- 48-nation encyclopedia with All-Time XIs
- 1,248 player records with tournament stats
- 104 match results with detailed analytics
- Fan Zone with 9 ways to play (6 games, cards, eggs)
- 1,248-card collection system
- 57 achievements with 4 tiers + Platinum
- Dynamic nation theming (63 color pairs)
- Stats dashboard with Fan Zone Score
Launch Prep
- Release notice board & data-accuracy disclaimer
- About page audit — this page matches the real site
- Consistent nav & footer across all 18 pages
- Console & broken-image cleanup across all pages
- Favicon, meta descriptions & 404 page
- Pre-launch QA sweep & GitHub Pages deployment
Post-Launch
- Verification passes on illustrative stats (see Data & Accuracy)
- Fixes driven by soft-launch feedback
- Structured data (JSON-LD) for SEO
- Light Mode Theme
- Fan Zone Game Refinement
- More mobile optimization
Connect
Get in Touch
Pitch26 is a portfolio project, not a commercial product. If you're a recruiter, a fellow developer, or just someone who stumbled across this and has thoughts — I'd love to hear from you.