This was fun and really challenging, it took me a good 15-20 hours of coding, watching tutorials and reading docs, but i got there at the end. The design is not original, i just wanted to practice coding and generally to understand the workflow.
Here are the links:
GitHub
Live Website
Hi, Ali!
This is a great starting template. There are two things I noticed. First, when hovering over the light/dark mode button, the rest of the page shifts up. Second, between 991px and 767px, your hero image is pushed all the way to the left of the screen. I do not know if either of these were intentional, but they were the only small things I noticed.
Outside of design, I also wanted to comment on two accessibility concerns for future projects. First, your “buttons.” At the moment, you have the dark/light mode button and your contact me links styled as buttons. People have differing opinions on whether this is an acceptable method. My only suggestion is that if you are going to use this styling method, use aria-role=“button” along with href=“#” so the “button” is tababble and can be accessed via the enter button. Second, if you want your hero image to be strictly decorative, be sure to use aria-hidden=“true” so screen readers ignore it. Otherwise, I would suggest using an <img> with an alt. 
Great work!~
Thank you for your feedback! For the toggle and contact button, I don’t experience page shifting up on my side which is weird. Not sure how to replicate what you are seeing.
The hero image shift is intentional between 991px and 767px.
For the aria-roles I will definitely look into and change that.
So, the page shifting is a 1px shift that comes from removing the border on hover. Here is the height (69px) of the div without the hover:
And here is the height (68px) with hover active:
This does not occur with the contact me button because it is 68px, so when the border is removed, the height of the div is not impacted.
