Inspiration
The idea for this project was born from a fascination with the internet's striking visual evolution. I was inspired by the distinct aesthetics of different web eras—from the stark, text-based terminals of the early days to the vibrant chaos of the GeoCities era, and the sleek, minimalist designs of the modern web. I wanted to create a simple, elegant way to showcase this history, offering a nostalgic trip for those who remember these eras and an educational experience for those who don't.
What it does
Time Traveler's Web is an interactive, single-page website that serves as a digital time capsule. It allows users to experience the distinct design eras of the internet's history. When a user clicks a year on the timeline, the entire website's visual style instantly changes to match that era, complete with unique sounds and design elements. A key feature is the hidden easter egg: entering the classic Konami code triggers a rapid, animated journey through all the eras.
How I built it
The project is built entirely with vanilla HTML, CSS, and JavaScript. This allowed me to focus on core web fundamentals and keep the project lightweight. I used CSS custom properties to define an entire theme (colors, fonts, shadows) that updates instantly when a user clicks a year. The era-appropriate sound effects were created using the Web Audio API, and all interactive logic, including the Konami code, is handled with plain JavaScript.
Challenges I ran into
One of my main challenges was a technical one related to the Konami code. The variable that tracked the user's key sequence wasn't retaining its value between keypresses. I discovered this was a JavaScript variable scope issue and solved it by declaring the variable in the global scope. This experience was a great lesson in debugging and variable management. I also found it challenging to decide which features to include to keep the project focused and polished.
Accomplishments that I proud of
I'm most proud of the project's elegant and clean architecture. Building with just vanilla code to create a dynamic, single-page application felt like a significant accomplishment. I'm also particularly proud of the CSS custom properties implementation, which makes the entire website’s visual theme instantly changeable. And, of course, the Konami code easter egg is a playful and unique feature that I am excited to showcase.
What I learned
This project was a great opportunity to reinforce my understanding of core web technologies. I gained a deeper appreciation for the history of web design and the technical limitations that shaped it. On a technical level, I learned a crucial lesson about JavaScript variable scope and had fun exploring the capabilities of the Web Audio API to enhance the user experience.
What's next for Time Traveler's Web
The current project is a strong foundation, and I have many ideas to expand it. My next steps are to: Make it Interactive: I want to let users create their own GeoCities-style pages with custom colors and GIFs. Expand the Timeline: I'll add more design eras, such as the early days of mobile internet in the late 2000s. Increase Immersion: I plan to integrate more era-specific features, such as a "Top 8 Friends" list for the 2005 theme, to make the experience feel even more authentic.
Log in or sign up for Devpost to join the conversation.