From 0a9462095da2be393f85cdf75eb68cf067d82d62 Mon Sep 17 00:00:00 2001
From: dertyp7 <dertyp7@tealfire.de>
Date: Sat, 13 Jan 2024 18:16:12 +0100
Subject: [PATCH] Add ScrollToTop component and skills section

---
 src/App.tsx                    |  9 ++++++
 src/components/ScrollToTop.tsx | 56 ++++++++++++++++++++++++++++++++++
 src/styles/ScrollToTop.scss    | 36 ++++++++++++++++++++++
 3 files changed, 101 insertions(+)
 create mode 100644 src/components/ScrollToTop.tsx
 create mode 100644 src/styles/ScrollToTop.scss

diff --git a/src/App.tsx b/src/App.tsx
index bbbc701..810bbec 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import "@styles/App.scss";
 import Header from "@components/Header";
 import About from "@components/About";
+import ScrollToTop from "@components/ScrollToTop";
 
 export default function App() {
 	return (
@@ -10,6 +11,14 @@ export default function App() {
 			</div>
 			<Header />
 			<About />
+			<About />
+			<div id="skills">
+				<h2>
+					<a href="#skills">Skills</a>
+				</h2>
+				{/* Add your skills content here */}
+			</div>
+			<ScrollToTop />
 		</div>
 	);
 }
diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx
new file mode 100644
index 0000000..6fc8469
--- /dev/null
+++ b/src/components/ScrollToTop.tsx
@@ -0,0 +1,56 @@
+import { useState, useEffect } from "react";
+import "@styles/ScrollToTop.scss";
+
+export default function ScrollToTop() {
+	const [isScrolledUp, setIsScrolledUp] = useState(false);
+
+	const toggleVisibilityAndDirection = () => {
+		if (window.scrollY < 150) {
+			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="24"
+					height="24"
+					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>
+	);
+}
diff --git a/src/styles/ScrollToTop.scss b/src/styles/ScrollToTop.scss
new file mode 100644
index 0000000..a2436e3
--- /dev/null
+++ b/src/styles/ScrollToTop.scss
@@ -0,0 +1,36 @@
+// src/styles/ScrollToTop.scss
+.scrollToTop {
+	position: fixed;
+	bottom: 20px;
+	right: 20px;
+	cursor: pointer;
+
+	.arrow {
+		transition: transform 200ms ease-in-out;
+
+		&.up {
+			transform: rotate(0deg);
+		}
+
+		&.down {
+			transform: rotate(-180deg);
+		}
+	}
+
+	&:hover {
+		animation: pulse 1s infinite;
+		color: var(--color-accent);
+	}
+
+	@keyframes pulse {
+		0% {
+			transform: scale(1);
+		}
+		50% {
+			transform: scale(1.4);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+}