Add scrolling functionality to App component

src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import "@styles/App.scss";
 import Header from "@components/Header";
 import About from "@sections/About";
@@ -13,10 +13,31 @@ export default function App() {
 	const skillsRef = useRef(null);
 	const projectsRef = useRef(null);
 
+	const [isScrolling, setIsScrolling] = useState(false);
+
+	useEffect(() => {
+		const handleScroll = () => {
+			setIsScrolling(true);
+
+			setTimeout(() => {
+				setIsScrolling(false);
+			}, 100);
+		};
+
+		window.addEventListener("scroll", handleScroll);
+
+		return () => {
+			window.removeEventListener("scroll", handleScroll);
+		};
+	}, []);
+
 	useEffect(() => {
 		const observer = new IntersectionObserver(
 			(entries) => {
 				entries.forEach((entry) => {
+					if (isScrolling) {
+						return;
+					}
 					if (entry.isIntersecting) {
 						window.location.hash = entry.target.id;
 						entry.target.classList.add("active");

src/sections/Projects.tsx

@@ -1,6 +1,7 @@
 import "@styles/Projects.scss";
 import Badge from "@components/Badge";
 import { BadgeType } from "@components/BadgeType";
+import { useState, useEffect } from "react";
 
 function Project({
 	name,
@@ -13,10 +14,16 @@ function Project({
 	image?: string;
 	link: string;
 }) {
-	const imageUrl =
+	const [imageUrl, setImageUrl] = useState<string | undefined>(image);
-		image ||
+
-		"https://source.unsplash.com/random/500x400?javascript&sig=" +
+	useEffect(() => {
-			Math.random() * 1000;
+		if (!image) {
+			setImageUrl(
+				"https://source.unsplash.com/random/500x400?javascript&sig=" +
+					Math.random() * 1000
+			);
+		}
+	}, [image]);
 
 	return (
 		<div