About This Site

---

This is a responsive static single-page application utilizing HTML, CSS(Bootstrap), and vanilla JavaScript that is hosted with Github pages.

The Projects, Courses, and Experience pages are fully loaded using JavaScript, allowing for easy updates.

The responsive carousel feature for the icons and projects on the home(this) page and the scrollspy feature on the prohjects page were fully created with vanilla JavaScript.

Projects Page

---

The Projects page utilizes Bootstrap's container property to display the projects and project navbar. This is responsive and the navbar disappears when the screen is small enough.

The Projects page also features a scrollspy functionality on the projects navbar, created with vanilla Javascript. This means that the projects navbar will activate in response to what is on the screen.

This is done by adding a function to JavaScript's window.onscroll, which is called whenever the screen is scrolled. The function then checks if the top of any project's container is in the range of 60-200px from the top of the screen, with 60px being slightly above the bottom of the main nav bar. Because this function is called whenever the screen is moved, clicking on a project's link will cause the projects inbetween that project and the current project on the screen to be highlighted.

Courses Page

---

The Courses page utilizies Bootstrap's container property to collapse and change the view of each classes' information when screen shrinks.

If a course has more information, clicking on it will change the display of the container holding that information to 'block', and displaying that information.