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;