Summary
My intent for this project was to keep the content of the page relatively simple, and really focus on styling it to make the simplicity stand out. One of the things I tried to emphasize was tying in the actual topic of the website to its theme. I was able to accomplish this by applying techniques that we have learned about in class, and techniques that are new to me.
Gradient Text
The first new technique I used was creating gradient text. I incoporated this because I wanted some of the text to have a flame like effect which is something I associate with racing. I learned you can do this by selecting a text element and setting the background to a gradient. Then using background-clip: text, and setting the fill color to transparent. As a result of doing this I got some cool gradients on some of my headings within my website.
Hamburger Menu
The next new technique I was able to implement was creating a hamburger menu for the mobile view of my website. I accomplished this by using javascript to toggle the class applied to the nav bar menu so its opacity changes when clicked as well as its position. I was also able to toggle the class for the hamburger itself so the lines turn into an X through rotating and translating the bars.
Image Slideshow
The third new technique I incorporate was an image slideshow on the home page. I wanted to have multiple images on this page but didn't want to take up a lot of room so I referenced other code to create an image slideshow. This ultimately changes the image every 5 seconds and restarts after the last image is shown.
Fade in Animation
The fade in animation happens everytime a new page loads. It was very simple to implement but it makes the website feel more sophisticated. In order to create this style I used @keyframes and set the opacity to 0 at 0% and 1 at 100%.
Transform on hover
Another simple and new thing I implemented was when you hover over the button on the home page it slightly moves upward. In order to do this I just used the transform property and the translateY value to move the button upward when hovered.
Light and Dark Mode
The last thing that I implemented was light and dark mode which you can toggle in the navigation bar. Originally the website was styled in the dark mode however, I thought it would look better lighter. Once I switch the styles to be lighter I realized liked both of them, so I decided to allow the user to experience both. I accomplished this by applying primary and secondary color variables to things like the background-colors and main text color. After that I created another class called darkMode which switched the primary color with the secondary color to create an overall darker website. I then used JavaScript to toggle that class allowing you to change between light and dark mode in the navigation bar.