Sunnyside Landing Page (HTML, SCSS, JS)

• use viewbox. eg your social media icons: remove width="20" and height="20" and use viewbox="0 0 20 20" instead. Now use CSS to set width/height in whatever units you like.
• images are displayed as inline elements by default and the gap at the bottom is for text descenders. Use display: block or vertical-align: middle on your img elements.

I didn't look at your semantics and accessibility in much detail; I'm suspicious of aria tags as they're often unnecessary and can make things worse if misused, but hiding the SVG and labelling the link seems like a safe bet to me. Good effort!

I really love the animations and the parallax effect. The code looks semantic as well!

I've found just one little issue when you go to 1800px wide screen and larger: The position of the image of .hero {background-image} is downwards quite too much in my opinion, so that you can barely see the orange fruit. Maybe you can increase the background-position-y and the height of .hero by some vw-units. Usually I try to make my projects responsive/fluid up to 3000px since a lot of my friends have really large screens.

Awesome solution, anyway, my debugging-friend!