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