Wow, I was highly impressed by the dynamic background, the spinning planets, and the small details like the tabs underline effect.
Your solution is nearly perfect so I would only make a few isolated comments:
Your mobile navigation menu doesn't close after the user navigates elsewhere. Luckily it's a quick one to solve, you only need to update the menu on click:
<NavLink
to="/"
onClick={updateMenu}
>
<span>00</span> Home
</NavLink>
I think you overengineered a bit here. You don't need this:
setBurgerClass("burger clicked");
setMenuClass("navbar mobile-menu");
You can have only one variable like:
const [isMenuOpen, toggleMenu] = useState(false);
And set your classes according to it:
<img
className={`${isMenuOpen ? 'burger unclicked' : ''} other-classes`}
src={burger}
onClick={updateMenu}
alt="hamburger menu"
/>
This is how you can smartly use React!
And it can apply in other cases as well. For example, here's how you can easily display a list of elements:
{listOfElements.map((element, index) => (
<div
key={index}
data-index={index}
onClick={techChange}
className={`num ${index === 0 ? 'num-active' : ''}`}
>
{element}
</div>
))}
Overall it's a great solution from the styling standpoint. I can't send this comment without complimenting your CSS skills, the smart use of rem/vh units, grid, and the great structure of your SCSS files. Keep it up!
