sexy ahh animations

src/components/aboutme.astro

@@ -26,4 +26,19 @@ My Web Framework knowledge includes Sveltekit, React, Astro
 Although not entirely proficient, I also write in Python and Golang from time to time</textarea>
     </div>
   </div>
-</div>
+</div>
+
+<style>
+    #aboutme {
+        animation: createBox 0.2s;
+	}
+
+    @keyframes createBox {
+       	from {
+      		transform: scale(0);
+       	}
+       	to {
+      		transform: scale(1);
+       	}
+    }
+</style>

src/components/contact.astro

@@ -27,8 +27,20 @@ Discord : s1monlol</textarea>
 	/* Default style for mobile and smaller devices */
 	#contact {
 		width: 30%;
+
+		animation: createBox 0.2s;
 	}
 
+ @keyframes createBox {
+    	from {
+    		transform: scale(0);
+    	}
+    	to {
+    		transform: scale(1);
+    	}
+    }
+
+
 	/* Style for tablets, desktops, and larger devices */
 	@media (max-width: 540px) {
 		#contact {

src/components/projects.astro

@@ -63,6 +63,23 @@ let projects = Astro.props.projects;
 		overflow: auto;
 	}
 
+
+
+
+#projects {
+	animation: createBox 0.2s;
+}
+
+@keyframes createBox {
+	from {
+		transform: scale(0);
+	}
+	to {
+		transform: scale(1);
+	}
+}
+
+
 	.project {
 		user-select: none;
 

src/components/projects/imdb.astro

@@ -24,7 +24,7 @@
 
 		</h2>
 
-		<iframe src="https://imdb.simo.ng/?search=invincible" width="800" height="400" frameborder="0" allowfullscreen="">            
+		<iframe src="https://imdb.simo.ng/?search=invincible" width="800" height="400" frameborder="0" allowfullscreen="">
         </iframe>
 		</div>
 		</div>

src/components/redirect.astro

@@ -22,9 +22,24 @@
 </div>
 
 <style>
+
+    #redirect {
+
+    animation: createBox 0.2s;
+	}
+
+    @keyframes createBox {
+       	from {
+       		transform: scale(0);
+       	}
+       	to {
+       		transform: scale(1);
+       	}
+    }
+
     @media (max-width: 540px) {
         #redirect {
-            width: 80% !important;	
+            width: 80% !important;
         }
     }
 
@@ -33,4 +48,4 @@
             width: 60% !important;
         }
     }
-</style>
+</style>

src/pages/index.astro

@@ -264,26 +264,26 @@ apps = apps.map((item) => {
 
 <script define:vars={{ apps, projectsArr, clientFunctions }}>
 	let dino = `
-	            	██████████████  
+	                	██████████████
                       ████░░████████████
                       ██████████████████
                       ██████████████████
                       ██████████████████
-                      ████████          
-                      ██████████████░░  
-                      ██████            
-  ██              ██████████            
-  ██▒▒        ▒▒▒▒██████████▒▒▒▒        
-  ████▓▓      ██████████████  ▒▒        
-  ██████▒▒▒▒████████████████            
-  ██████████████████████████            
-    ██████████████████████              
-        ██████████████████              
-        ▒▒██████████████                
-          ▒▒██████▒▒██▓▓                
-            ████      ▓▓                
-            ██▒▒      ▓▓                
-            ██        ██                
+                      ████████
+                      ██████████████░░
+                      ██████
+  ██              ██████████
+  ██▒▒        ▒▒▒▒██████████▒▒▒▒
+  ████▓▓      ██████████████  ▒▒
+  ██████▒▒▒▒████████████████
+  ██████████████████████████
+    ██████████████████████
+        ██████████████████
+        ▒▒██████████████
+          ▒▒██████▒▒██▓▓
+            ████      ▓▓
+            ██▒▒      ▓▓
+            ██        ██
 `;
 
 	console.log(dino);