Add page enter transition for body and pfp

src/index.css

@@ -18,6 +18,10 @@
   --text-color: rgb(255, 255, 255);
 }
 
+body {
+  animation: zoom-in 0.3s;
+}
+
 .header {
   margin: 10px auto;
   text-align: center;
@@ -69,6 +73,7 @@
   margin: 0;
   cursor: pointer;
   transition: transform 0.15s;
+  animation: zoom-in-large 0.3s;
 }
 
 .easter-egg-box {
@@ -131,7 +136,6 @@
   transition:
     background-color 0.25s,
     transform 0.25s;
-  animation: fade-in 0.3s;
 }
 
 .social-link-button:hover {

src/keyframes.css

@@ -1,6 +1,6 @@
 @keyframes fade-in {
   0% {
-    transform: scale(0.8, 0.8);
+    transform: scale(0.7, 0.7);
     opacity: 0;
   }
 
@@ -10,6 +10,29 @@
   }
 }
 
+@keyframes zoom-in-large {
+  0% {
+    transform: scale(1.5, 1.5);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+
+@keyframes zoom-in {
+  0% {
+    transform: scale(1.12, 1.12);
+    opacity: 0;  
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+
 @keyframes fade-slide-left {
   0% {
     transform: translateX(-30px);