Refactor scroll functionality in App component

src/App.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef } from "react";
 import "@styles/App.scss";
 import Header from "@components/Header";
 import About from "@components/About";
-import ScrollToTop from "@components/ScrollToTop";
+import SectionScroll from "@components/SectionScroll";
 import Skills from "@components/Skills";
 import SectionLine from "@components/SectionLine";
 
@@ -68,7 +68,7 @@ export default function App() {
 			</div>
 
 			<h4>Website under construction 🚧👷</h4>
-			<ScrollToTop />
+			<SectionScroll sections={["about", "skills", "projects"]} />
 		</div>
 	);
 }

src/components/ScrollToTop.tsx

@@ -1,56 +0,0 @@
-import { useState, useEffect } from "react";
-import "@styles/ScrollToTop.scss";
-
-export default function ScrollToTop() {
-	const [isScrolledUp, setIsScrolledUp] = useState(false);
-
-	const toggleVisibilityAndDirection = () => {
-		if (window.scrollY < 100) {
-			setIsScrolledUp(false);
-		} else {
-			setIsScrolledUp(window.scrollY === 0 ? false : true);
-		}
-	};
-
-	const scrollTo = () => {
-		if (isScrolledUp) {
-			window.scrollTo({
-				top: 0,
-				behavior: "smooth",
-			});
-		} else {
-			const skillsElement = document.getElementById("skills");
-			if (skillsElement) {
-				skillsElement.scrollIntoView({ behavior: "smooth" });
-			}
-		}
-	};
-
-	useEffect(() => {
-		window.addEventListener("scroll", toggleVisibilityAndDirection);
-		return () =>
-			window.removeEventListener("scroll", toggleVisibilityAndDirection);
-	}, []);
-
-	return (
-		<div className="scrollToTop">
-			<div onClick={scrollTo}>
-				<svg
-					className={`arrow ${isScrolledUp ? "up" : "down"}`}
-					xmlns="http://www.w3.org/2000/svg"
-					width="32"
-					height="32"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					strokeWidth="2"
-					strokeLinecap="round"
-					strokeLinejoin="round"
-				>
-					<line x1="12" y1="19" x2="12" y2="5"></line>
-					<polyline points="5 12 12 5 19 12"></polyline>
-				</svg>
-			</div>
-		</div>
-	);
-}

src/components/SectionScroll.tsx

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import "@styles/SectionScroll.scss";
+
+export default function SectionScroll({ sections }: { sections: string[] }) {
+	const [currentSectionIndex, setCurrentSectionIndex] = useState(0);
+
+	function scrollTo(direction: number) {
+		let newIndex = currentSectionIndex + direction;
+		if (newIndex < 0) newIndex = sections.length - 1;
+		if (newIndex >= sections.length) newIndex = 0;
+
+		const sectionElement = document.getElementById(sections[newIndex]);
+		if (sectionElement) {
+			sectionElement.scrollIntoView({ behavior: "smooth" });
+		}
+
+		setCurrentSectionIndex(newIndex);
+	}
+
+	return (
+		<div className="sectionScroll">
+			{currentSectionIndex > 0 && (
+				<div onClick={() => scrollTo(-1)}>
+					<svg
+						className="arrow up"
+						xmlns="http://www.w3.org/2000/svg"
+						width="32"
+						height="32"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<line x1="12" y1="19" x2="12" y2="5"></line>
+						<polyline points="5 12 12 5 19 12"></polyline>
+					</svg>
+				</div>
+			)}
+			{currentSectionIndex < sections.length - 1 && (
+				<div onClick={() => scrollTo(1)}>
+					<svg
+						className="arrow down"
+						xmlns="http://www.w3.org/2000/svg"
+						width="32"
+						height="32"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<line x1="12" y1="5" x2="12" y2="19"></line>
+						<polyline points="19 12 12 19 5 12"></polyline>
+					</svg>
+				</div>
+			)}
+		</div>
+	);
+}

src/styles/ScrollToTop.scss

@@ -1,70 +0,0 @@
-.scrollToTop {
-	position: fixed;
-	bottom: 20px;
-	right: 20px;
-	cursor: pointer;
-
-	.arrow {
-		&.up {
-			transform: rotate(0deg);
-
-			&:hover {
-				animation: pulseUp 1s 2;
-			}
-
-			@media screen and (min-width: 768px) {
-				&:hover {
-					animation: pulseUp 1s infinite;
-				}
-			}
-		}
-
-		&.down {
-			transform: rotate(-180deg);
-
-			&:hover {
-				animation: pulseDown 1s 2;
-			}
-
-			@media screen and (min-width: 768px) {
-				width: 50px;
-				height: 50px;
-				position: fixed;
-				bottom: 15px;
-				right: 50%;
-
-				&:hover {
-					animation: pulseDown 1s infinite;
-				}
-			}
-		}
-	}
-
-	&:hover {
-		color: var(--color-accent);
-	}
-
-	@keyframes pulseUp {
-		0% {
-			transform: scale(1);
-		}
-		50% {
-			transform: scale(1.4);
-		}
-		100% {
-			transform: scale(1);
-		}
-	}
-
-	@keyframes pulseDown {
-		0% {
-			transform: scale(1) rotate(-180deg);
-		}
-		50% {
-			transform: scale(1.4) rotate(-180deg);
-		}
-		100% {
-			transform: scale(1) rotate(-180deg);
-		}
-	}
-}

src/styles/SectionScroll.scss

@@ -0,0 +1,43 @@
+.sectionScroll {
+	position: fixed;
+	bottom: 20px;
+	right: 20px;
+	cursor: pointer;
+
+	div {
+		.arrow {
+			&.up {
+				&:hover {
+					animation: pulse 1s 2;
+				}
+
+				@media screen and (min-width: 768px) {
+					&:hover {
+						animation: pulse 1s infinite;
+					}
+				}
+			}
+
+			&.down {
+				&:hover {
+					animation: pulse 1s 2;
+				}
+			}
+			&:hover {
+				color: var(--color-accent);
+			}
+		}
+	}
+
+	@keyframes pulse {
+		0% {
+			transform: scale(1);
+		}
+		50% {
+			transform: scale(1.4);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+}