Documentation
My approach to coding the website was to design the landing page and then the rest of the site around that general design. I spent a lot of time making sure the website was mobile-friendly - that images, text, and buttons scale correctly along with the navbar that switches to a drop-down at screen-size of 840px. I wrote a JavaScript function to properly resize the "HUMAN EXPERIENCE" section of the landing page so that it would take up the entire page whenever the user resizes the page. I also used the JavaScript ASO library to animate the landing page when the user scrolls. After coding the homepage, I went on to code each application.
The site's overall theme is about experiencing things that the average human doesn't typically get to experience. On the landing page, the user can choose from 3 different "experiences". The three applications, or "experiences", I coded are: space travel, exploring the depths of the ocean, and what it would be like to be standing on the side of a mountain.
Each of the application pages used the same general wireframe of HTML, the only difference between the pages being the applications. I largely used code applications I found online however, not without changing the JS, HTML, and CSS generously and learning a great deal in doing so. I modified the specifications of each application so fit into the theme I was going for properly. I also modified the CSS and HTML to make the application fit onto the webpage correctly.
For the space application, I used HTML canvas as well as JavaScript. The application works by following the user's cursor and generates "stars" accordingly and animating them "toward" the inverse of the cursor's x and y coordinate locations. The user can also click the screen using any mouse buttons to create a trail behind each star and go into "hyperspeed". The Marianas Trench application heavily relied on CSS animations as all the keyframing was done CSS. This application works by setting a clear photo to the background and setting the same background image to the various bubbles. A blurry image is then coded inline to the original, creating a mask while the bubbles provide some clarity. The user can click the buttons in the top-left corner to toggle the blurry photo's style display. Setting it to none and be greeted by your friendly neighborhood shark! The Mount Everest application relied almost entirely on JavaScript. The JavaScript wraps a photo to create a sphere, allowing the user to feel like they are there. The application automatically alsoautomatically pans to the right while listening for a click event to which allows the user to drag the picture.
Upon working on this project, I learned a lot about classes, divs, animations, and inheritance - especially when coding the homepage. Throughout this project learned about how children inherit attributes from the parents, how priority works, and how to go about implementing meaningful code around the concept. I learned how HTML canvas works as well as how to implement it. In terms of JavaScript, I learned more about its syntax, how it's implemented and how it reacts to HTML.