From 0ef74dabfe7b2dea0d93db28de2d5109ebecf8e3 Mon Sep 17 00:00:00 2001
From: dertyp7 <dertyp7@tealfire.de>
Date: Sun, 14 Jan 2024 17:35:20 +0100
Subject: [PATCH] Add active class to target and its children elements when
 intersecting, and remove active class when not intersecting. Adjust threshold
 for intersection observer. Add slideIn animation to elements with active
 class.

---
 src/App.tsx               | 13 ++++++++++++-
 src/sections/Projects.tsx |  6 +++---
 src/styles/About.scss     | 17 +++++++++++++++++
 src/styles/App.scss       | 17 +++++++++++++++++
 src/styles/Projects.scss  | 16 ++++++++++++++++
 src/styles/Skills.scss    | 21 ++++++++++++++++++++-
 6 files changed, 85 insertions(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d0fc5f7..126fb46 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,10 +19,21 @@ export default function App() {
 				entries.forEach((entry) => {
 					if (entry.isIntersecting) {
 						window.location.hash = entry.target.id;
+						entry.target.classList.add("active");
+
+						Array.from(entry.target.children).forEach((child) => {
+							child.classList.add("active");
+						});
+					} else {
+						entry.target.classList.remove("active");
+
+						Array.from(entry.target.children).forEach((child) => {
+							child.classList.remove("active");
+						});
 					}
 				});
 			},
-			{ threshold: 0.5 }
+			{ threshold: 0.2 }
 		);
 
 		if (aboutRef.current) {
diff --git a/src/sections/Projects.tsx b/src/sections/Projects.tsx
index 41a0ed3..368bc5f 100644
--- a/src/sections/Projects.tsx
+++ b/src/sections/Projects.tsx
@@ -54,17 +54,17 @@ export default function Projects() {
 					name="Website"
 					description="This website"
 					link="https://github.com/DerTyp7?tab=repositories"
-				/>{" "}
+				/>
 				<Project
 					name="Website"
 					description="This website"
 					link="https://github.com/DerTyp7?tab=repositories"
-				/>{" "}
+				/>
 				<Project
 					name="Website"
 					description="This website"
 					link="https://github.com/DerTyp7?tab=repositories"
-				/>{" "}
+				/>
 				<Project
 					name="Website"
 					description="This website"
diff --git a/src/styles/About.scss b/src/styles/About.scss
index fc9634d..5145726 100644
--- a/src/styles/About.scss
+++ b/src/styles/About.scss
@@ -35,6 +35,23 @@
 		}
 	}
 
+	&.active {
+		@keyframes slideIn {
+			from {
+				opacity: 0;
+				transform: translateY(20px);
+			}
+			to {
+				opacity: 1;
+				transform: translateY(0);
+			}
+		}
+
+		animation-name: slideIn;
+		animation-duration: 650ms;
+		animation-fill-mode: forwards;
+	}
+
 	@media (max-width: 1150px) {
 		padding: 5rem 2rem;
 	}
diff --git a/src/styles/App.scss b/src/styles/App.scss
index d24d191..bdcdd08 100644
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
@@ -14,5 +14,22 @@
 			align-items: center;
 			justify-content: center;
 		}
+
+		// @keyframes slideIn {
+		// 	from {
+		// 		opacity: 0;
+		// 		transform: translateY(20px);
+		// 	}
+		// 	to {
+		// 		opacity: 1;
+		// 		transform: translateY(0);
+		// 	}
+		// }
+
+		// &.active {
+		// 	animation-name: slideIn;
+		// 	animation-duration: 1s;
+		// 	animation-fill-mode: forwards;
+		// }
 	}
 }
diff --git a/src/styles/Projects.scss b/src/styles/Projects.scss
index d572980..401d61c 100644
--- a/src/styles/Projects.scss
+++ b/src/styles/Projects.scss
@@ -1,3 +1,12 @@
+@keyframes fadeIn {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
 .projects {
 	padding: 0 2rem;
 
@@ -5,6 +14,12 @@
 		padding: 0 15rem;
 	}
 
+	&.active {
+		.project {
+			animation: fadeIn 300ms ease-in-out forwards;
+		}
+	}
+
 	.grid {
 		padding: 1rem 0;
 		display: flex;
@@ -24,6 +39,7 @@
 			cursor: pointer;
 			max-width: 500px;
 			min-width: 300px;
+			opacity: 0;
 
 			&:hover {
 				border-color: var(--color-accent-background);
diff --git a/src/styles/Skills.scss b/src/styles/Skills.scss
index 72c713a..bd41e96 100644
--- a/src/styles/Skills.scss
+++ b/src/styles/Skills.scss
@@ -1,9 +1,28 @@
+@keyframes slideInFromLeft {
+	0% {
+		transform: translateX(-100%);
+		opacity: 0;
+	}
+	100% {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+
 .skills {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	gap: 30px;
 
+	&.active {
+		@media (min-width: 768px) {
+			.skill {
+				animation: slideInFromLeft 300ms ease-in-out forwards;
+			}
+		}
+	}
+
 	.grid {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
@@ -12,6 +31,7 @@
 		.skill {
 			display: flex;
 			flex-direction: row;
+			justify-content: center;
 			align-items: center;
 			background-color: var(--color-background-foreground);
 			border-radius: 5px;
@@ -25,7 +45,6 @@
 			// &:hover {
 			// 	border-color: var(--color-accent-background);
 			// }
-
 			img {
 				width: 32px;
 				height: 32px;