Project Name

F1 Mythos

Walk the legends. Challenge the myths.

A bilingual interactive Formula 1 museum that turns motorsport history into an experience—and then proves what you've learned.

Elevator Pitch

Most Formula 1 websites ask you to read.

F1 Mythos asks you to explore.

Instead of scrolling through articles or statistics, visitors walk through ten immersive museum halls filled with legendary stories, infamous scandals, forgotten engineering tricks, iconic radio moments, bizarre regulations, and the human side of Formula 1.

Then the experience changes.

The museum seamlessly transforms into Throttle or Brake, a reaction-based trivia simulator where players must decide—under time pressure—whether each unbelievable F1 story is fact or myth.

The result is an educational experience that feels closer to visiting an interactive exhibition than browsing a website.

Inspiration

Formula 1 is full of stories that sound completely fictional.

A world champion won by half a point.

A driver literally stopped his own race to save another driver's life.

A team became world champion after being purchased for £1.

The first Safety Car accidentally led the wrong driver.

The problem is that these stories are scattered across interviews, documentaries, Wikipedia pages and decades of racing history.

I wanted to build the experience I always wished existed:

a place where someone who knows nothing about Formula 1 could walk in curious—and leave genuinely fascinated.

Rather than making another statistics page or highlight compilation, I designed F1 Mythos as an interactive museum where exploration comes first and learning happens naturally.

What it does

F1 Mythos consists of two connected experiences.

The Interactive Museum

Ten curated halls transform Formula 1 history into a digital exhibition.

Visitors can explore:

Legendary drivers and forgotten stories
Scandals that changed the sport
Radio messages that became internet culture
Engineering loopholes
Team family trees
Strange regulations
Records that sound fake—but aren't
Physics and biology behind driving
Rituals and superstitions
Historic Safety Cars

Instead of long paragraphs, every section uses purpose-built visual storytelling:

animated statistics
museum-style information plaques
interactive timelines
responsive diagrams
animated charts
embedded official Formula 1 footage

Every interaction is designed to encourage curiosity instead of passive reading.

Throttle or Brake

Learning is immediately converted into play.

Players face 30 incredible Formula 1 stories.

Swipe right.

Throttle.

"I think that's true."

Swipe left.

Brake.

"That has to be a myth."

A real five-light starting sequence launches the game before the first question.

Every answer is timed.

Correct streaks increase the score multiplier.

At the finish line players receive their own paddock identity—from Back of the Grid all the way to Paddock Historian.

Instead of asking players what they remember, the simulator measures how much the museum actually taught them.

Native bilingual experience

Every sentence, exhibit and interaction exists as handcrafted English and Spanish content.

Nothing is machine translated.

The language switch instantly rebuilds the interface without reloading the page, making both languages first-class citizens rather than an afterthought.

How I built it

One design constraint shaped the entire project:

Zero installation. Zero setup. Zero dependencies.

The museum and simulator are delivered as two completely self-contained HTML files.

No framework.

No npm.

No bundler.

No backend.

No build process.

Open the file.

The experience starts.

Behind that simplicity sits a custom architecture:

vanilla JavaScript rendering engine
shared bilingual content model
component-style template rendering
IntersectionObserver-powered reveal animations
requestAnimationFrame animation loops
pointer-event gesture engine
SVG reaction timer
lazy-loaded video embeds for performance

The result is a project that behaves like a modern web application while remaining completely portable.

Challenges I ran into

Designing for "wow" without frameworks

Most interactive experiences rely on animation libraries.

I wanted the opposite.

Everything—from museum transitions to swipe physics and animated counters—was written manually in vanilla JavaScript and CSS.

The final experience feels polished without requiring a single external runtime.

Making the project impossible to break

Originally the trivia simulator depended on multiple external files.

If someone opened only the HTML file, everything silently failed.

That is exactly the kind of first impression that hurts during judging.

I redesigned the architecture so each experience became entirely self-contained.

Every HTML file now contains everything it needs.

No missing assets.

No missing scripts.

No installation.

Mobile interactions

Desktop swipe gestures worked perfectly.

Phones didn't.

The browser interpreted every drag as page scrolling.

The solution was surprisingly small—a missing touch-action: none declaration—but it completely transformed the mobile experience.

Accomplishments I'm proud of

Built an entire interactive museum inside a single ~76 KB HTML file.
Created a complete educational experience with 10 themed exhibition halls.
Curated 30 real Formula 1 stories that genuinely sound fictional.
Integrated 11 official Formula 1 videos without sacrificing loading performance.
Designed a trivia experience that feels like a game rather than a quiz.
Delivered everything in two portable files with zero installation required.
Wrote every piece of content natively in English and Spanish.