Project Ocean

• 

  Home page (teammate's artwork)

• 

  Facts example

• 

  Resources page

Inspiration

"Not one square mile of surface ocean anywhere on Earth is free of plastic pollution." After hearing that statement, we were taken aback. How could this have happened right under our very noses? This world faces a problem of ocean pollution and we were too blind to see the destruction and disruption of life on Earth. From then on, we were inspired to create a web application for the general public educating and exposing the dangers of ocean pollution and providing resources to join the fight for Earth as we know it.

What it does

Project Ocean informs others about the urgency of ocean deterioration and the effects of pollution on marine life on all ocean levels. As you scroll down, the web application will take you on a seamless descent into the ocean depths, starting from the Sunlight Zone to the lowest point of Earth, the Trenches. Additionally, you will be able to hover each icon in order to learn more about the plastic and pollution effects on marine species. Furthermore, the web application provides a page of resources for those who would like to join the cause to preserve our oceans and save our futures. In the form of air bubbles, each resource will redirect you a different call to action. For example, one bubble will transport you to a petition that can be signed in under 5 minutes and another may take you to a site where you can donate and vote with your wallet.

How we built it

We built the website through a combination of HTML, CSS, and JavaScript. We also used a member’s original artwork for the background.

Challenges we ran into

The biggest issue that we ran into on our project was figuring out how to use react hooks in our website to create an interactive scroll bar that brings you to specific places on our page as well as using hooks to change aspects of the website depending on where the cursor is. After a lot of thinking and reading the documentation we were finally able to understand it.

Accomplishments that we are proud of

Despite operating in three different time zones, we were able to brainstorm new ideas, implement and troubleshoot, construct the layout and design of our project, and ultimately in the end, create a web application worth the 36 hours spent at our computers and desks.

What we learned

We learned a lot about how to use React to build the front-end of a website.

What's next for Project Ocean

We are hoping to implement more interactive features such as: Representations of more species of marine life, live animation of the marine life and trash in the water A measure of the number of meters the user has “traveled” on the web application A real-time count of the number of plastics by weight that has been dumped into the ocean while the user has been on our web application.

Built With

• css3
• html5
• javascript
• react
• vscode