Welcome to the PhysicalSizeOfTheInternetSite repository! Explore the intricacies of the internet's physical size with real-time updates on the live website.
Have you ever wondered about the physical size of the internet? This project originated from a simple, yet intriguing, thought during a moment of boredom. Picture this: pondering with friends about the possibility of downloading the entire internet onto local drives. A few Google searches, some mathematical calculations, and a spark of curiosity later, the idea evolved into a fully automated website. Now, it's here for anyone else who might be crazy enough to ask, "How big is the internet—physically?". I also mention this on the disclaimer page
Although it started as me simply thinking "oh how big is the internet physically" and me punching in numbers to a calculator, once I started to actually look at the calculations for the size physically, it just didn't make sense. This along with the fact that I wanted to make the calculations dynamic to variables such as how many storage mediums are stacked and lined up made me realize how complex the math would actually be.
So aside from learning HTML, CSS, and Javascript, I was mainly stumped for a while on this project figuring out how I want to calculate everything until, after being the thinker for a little bit (lol), I finally formulated a math formula that would adapt the width and length of this hypothetical datacenter storing the internet based on the amount of layers or devices you want to stack. This was very important to keep the same amount of devices when calculating the new width and height all the while making this width and height follow the golden ratio for optimum hypothetical datacenter shape 😄. I outline this main math portion and how it's all calculated on the calculations page
- 🔄 Real-time updates: Witness the dynamic changes in the physical size of the internet and the cost it takes to store the entire internet.
- 📊 Multiple Storage Statistics: Explore internet sizes stored in various devices, from M.2 SSDs to floppy disks!
- 📏 Adjustable units and values: From Terabytes to kilobytes, miles to inches, thousands of stacked devices to tens—customize units for all your curiosities.
- 📐 Golden Ratio Integration: Ensure a visually appealing datacenter with calculations following the golden ratio, detailed in the calculations page.
- ℹ️ Detailed help page: Navigate confusion with the help page, explaining every option, button, and feature across all storage device pages.
- 🔄 Unique navigation: Utilize a fancy drag-to-move parallax carousel menu to navigate through pages.
- 🎨 Homemade Vanilla JS Animations: Enjoy animations and moving parts made purely with vanilla JavaScript and CSS, excluding the main navigation page which utilizes gsap.
- 🌈 Visually enjoyable pages: Each page is packed with either fancy and unique navigation or colors specific to that page.
- 👨💻 Self-taught journey: This project serves as a testament to the my journey into web development and javascript. Crafted with vanilla HTML, CSS, and JavaScript as a beginner with limited skills.
- 🎨 Learning from the best: Drawing inspiration from CodePen, the design elements reflect the learning process, showcasing creative implementations discovered while exploring CSS.
- 🐣 Easter eggs: Discover hidden features! Hint: >! You may find a button that runs away as you click it...
Main Navigation Page - Landing
Main Navigation Page - Shifted Right
Price Landing Preview - Internet Price
Stats Page Preview - Landing for M.2 SSD Stats
Price Page Preview - Currency Adjustment
Device Compatibility and Bugs Alert: As my project was created with limited web development experience, the website might not be optimized for all devices. Users may need to adjust zoom settings on their devices to ensure proper display. Additionally, there is a known bug affecting the main navigation on some devices, causing glitches. I appreciate your understanding and patience, and my condolences to mobile users who won't be able to check this out for themselves 😢. (P.S. RealStr1ke is NOT actually a contributor to this project, I'm pretty sure github just says that as I might've accidentally pushed a commit to this repository with his github credentials 😅)
Given my passion for this project, future improvements are possible in the future. First of all I would eventually love to rewrite this entire website using a proper js framework and maybe with a backend and more features. But to be specific on what's lacking, here's a glimpse of what's to come:
- Mobile Support: A recreation using a proper JavaScript framework is in consideration to provide enhanced mobile responsiveness.
- Bug Fixes and Glitch Solutions: Expect a smoother experience with fewer bugs and glitches for a seamless exploration of internet size.
- Code Refinement: I aim to refactor the code for better readability, maintainability, and adherence to best practices.
- URL Aesthetics: Look forward to cleaner and more aesthetically pleasing URLs for an improved user experience. This is referring to how there's no proper routing and each URL ends with index.html.
- Visual Perfection: Embracing frontend strategies for visual perfection, the goal is to create a rounder, cleaner experience and not at the cost of this websites quirky features.
To explore the site and its real-time statistics, visit this site. If you're interested in contributing or diving into the code, follow the steps below:
- Clone the repository.
git clone https://github.com/your-username/PhysicalSizeOfTheInternetSite.git
- Open the
index.htmlfile in your preferred browser.
- CodePen Community: A source of inspiration and learning for creative CSS implementations.
- Stack Overflow: An invaluable resource for problem-solving during the development journey.
If you have ideas or improvements to enhance the PhysicalSizeOfTheInternetSite project, feel free to contribute. Check out the Contribution Guidelines for more details.
This project is licensed under the MIT License. Feel free to use and modify it as needed.
Happy exploring the physical size of the internet! 😄😄