Beneath The Surface

Beneath The Surface

Exploring The Unknown

Upon learning that the theme was "Exploring the Unknown," we both immediately began thinking about what was unknown to us and almost everyone else. Then, after discussing it, we came up with the deep ocean as our theme. Despite the fact that water covers almost all of the Earth, the Earth's oceans are very unknown to many people. There are many mysteries to the deep ocean and many interesting facts that we wanted to share with others to bring attention to the scary-but-fascinating wonders of the deep ocean.

BrainStorm

We decided to create a team name for ourselves and came up with "BrainStorm." Brainstorming is something we spent a lot of time doing to come up with our design and story, and that is why we wanted to incorporate the word into our team. We created the team logo ourselves and you can find it on our website!

Our Site

This website places you in the depths of the ocean, exploring different facts about our largest bodies of water, all while controlling your submarine. On this site, the cursor emits light, limiting visibility and having the user need to move and explore the depths of the website.

The header displays our project name and utilizes a flexbox to encapsulate the title. The body consists of many differently spaced pieces of information that explain different facts about the ocean's mysteries. The footer also utilizes a flexbox to encapsulate the website creators, team name, and hackathon title. The main piece of the site is the responsive mouse flashlight, where the whole website is a 99% opacity display that is only lit around the mouse. Also, the mouse is formatted to be an image of a submarine, further immersing the user.

The flashlight is coded with CSS and Javascript, where the CSS fills the page with darkness and the mouse with light, and the JavaScript moves the flashlight with mouse movements.

Challenges

The hardest challenge that we dealt with, was learning how to create a flashlight that would follow our submarine around our website to light the screen. To resolve this issue, through research, we learned how to code the flashlight with CSS and JavaScript, and we learned that the flashlight is coded with CSS and JavaScript to fill the page with darkness and the mouse with light, and to move the flashlight with the submarine as it travels across the website.

Future Inspiration

This project could be utilized by others to create a webpage that has a flashlight type of system with the mouse. Inspiration can be drawn from the formatting of the site itself, as well as the use of CSS to code the flashlight and JavaScript to alter the page, add light to the mouse, and move the light with the submarine across the page.