MLH through time

A time machine disguised as a web app to explore the history of MLH and its website

Comment

Inspiration

In celebration of Hacky birthday, I decided to create a mini tribute to mlh by building something which showed how far mlh has come.

At first, I wanted to show the history of MLH in a silly timeline, but when I visited the mlh site, I wondered what mlh website looked like in its initial years. This quickly turned into the idea of actually time travelling on the web with the help of web archive.

Then I wrapped this whole experience with a HUD-like UI with details about the MLH. The inspiration for interface comes from car games I played when I was a kid and macOS terminals

What it does

  • Emulates a time machine which lets you explore history of mlh and its website

How we built it

  • The frontend is built with react, all different parts of UI is built with vanilla CSS!
  • Header MLH animation is made with GSAP
  • Access to old versions of MLH site were made possible with web archive and iframes

Challenges we ran into

  • Sequencing different UI states according to user clicks
  • mobile responsiveness
  • Making fake loading state to emulate a machine
  • building the first load animation with gsap
  • Designing a time-machine like UI

Accomplishments that we're proud of

  • How quickly this website went from paper prototype to an actual website.
  • Overall execution

What we learned

  • Working with iframes
  • Managing Different UI states
  • Working with GSAP in react
  • Building a time machine :)

What's next for MLH through time

  • Unified color palette
  • Mobile responsiveness
  • Adding interactivity to widgets
  • More fake widgets!

Built With

Share this project:

Updates