How I built a timeline of universal events

AEON: An Interactive Timeline of Universal History

I wanted to build a tool that visualizes the vast scale of time. AEON is a web-based interactive timeline that spans from the Big Bang (13.8 billion years ago) to the present day.

By combining scientific milestones, world history, and digital evolution, it provides a unique perspective on how our universe and society have developed.

The Project

The goal was to create a responsive, easily navigable experience where users can explore different eras through a single, continuous scroll.

• Live Site: https://bingkahu.github.io/the-universal-timeline/
• Source Code: https://github.com/bingkahu/the-universal-timeline

Technical Features

1. Automated Chronological Sorting

To manage a massive dataset spanning billions of years, I used a JavaScript sorting algorithm. This ensures that every event is perfectly placed in time, regardless of the order in which it was added to the code:
history.sort((a, b) => a.year - b.year);

2. Categorized Events

To make the data digestible, I categorized events into distinct types:

• Cosmic: Major astronomical events and the origin of the universe.
• Ancient: Key milestones in early human civilization.
• Modern: Recent historical developments and scientific breakthroughs.
• Digital/Media: The evolution of technology, gaming, and cinema.

3. Real-Time Search & Filtering

The application features a robust search engine. Users can type any keyword to instantly filter the timeline, making it a functional reference tool for specific historical or scientific data points.

How It Was Built

• Frontend: Built with Vanilla JavaScript, HTML5, and CSS3 to ensure high performance and fast load times.
• Data Structure: Organized as a scalable array of objects, allowing for easy updates and additions.
• Responsive Design: Optimized for both desktop and mobile viewing to ensure accessibility for all users.

I am continuously adding new data points to make this the most comprehensive universal timeline available on the web.

Collaboration

I am currently looking for a partner to help me. Somebody who knows HTML and JavaScript would be preferable. See my profile for contact info.