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

@@ -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) {

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"

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;
 	}

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;
+		// }
 	}
 }

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);

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;