cleanup

erinnmclaughlin · Nov 24, 2023 · 8f1bdae · 8f1bdae
1 parent dafe018
commit 8f1bdae
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 109 deletions.
diff --git a/PersonalWebsite/Components/ZZZ.razor b/PersonalWebsite/Components/ZZZ.razor
diff --git a/PersonalWebsite/Components/ZZZ.razor.css b/PersonalWebsite/Components/ZZZ.razor.css
diff --git a/PersonalWebsite/Layout/WomanWithCat.razor b/PersonalWebsite/Layout/WomanWithCat.razor
@@ -1,6 +1,7 @@
 <div class="cat-container">
     <div class="snoring-container">
-        <ZZZ />
+        <div class="z">z</div>
+        <div class="zz">z</div>
     </div>
     <lottie-player src="lottie/cat_sleeping.json" background="transparent" speed="1" loop autoplay></lottie-player>
 </div>

diff --git a/PersonalWebsite/Layout/WomanWithCat.razor.css b/PersonalWebsite/Layout/WomanWithCat.razor.css
@@ -16,7 +16,7 @@
         height: 100px;
         width: 100px;
         right: 50px;
-        bottom: 50px;
+        bottom: 33px;
         opacity: 0.6;
     }
 
@@ -31,4 +31,107 @@
     .cat-container {
         margin-right: 200px;
     }
-}
+}
+
+/* zzz animations from CodePen: https://codepen.io/gorenburg/pen/MWwmLYM */
+
+.z {
+    position: absolute;
+    bottom: 50%;
+    right: 10%;
+    animation-name: zzz;
+    animation-duration: 4s;
+    animation-delay: 0;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+.zz {
+    opacity: 0;
+    position: absolute;
+    bottom: 50%;
+    right: 10%;
+    animation-name: zzz-2;
+    animation-duration: 4s;
+    animation-delay: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+@keyframes zzz {
+    0% {
+        bottom: 50%;
+        right: 10%;
+        opacity: 0;
+    }
+
+    20% {
+        bottom: 65%;
+        right: 13%;
+    }
+
+    40% {
+        bottom: 80%;
+        right: 10%;
+    }
+
+    50% {
+        opacity: 1;
+    }
+
+    60% {
+        bottom: 95%;
+        right: 13%;
+    }
+
+    80% {
+        bottom: 110%;
+        right: 10%;
+    }
+
+    100% {
+        bottom: 125%;
+        right: 13%;
+        opacity: 0;
+        font-size: 20px;
+    }
+}
+
+@keyframes zzz-2 {
+    0% {
+        bottom: 50%;
+        right: 0;
+        opacity: 0;
+    }
+
+    20% {
+        bottom: 65%;
+        right: 3%;
+    }
+
+    40% {
+        bottom: 80%;
+        right: 0;
+    }
+
+    50% {
+        opacity: 1;
+    }
+
+    60% {
+        bottom: 95%;
+        right: 3%;
+    }
+
+    80% {
+        bottom: 110%;
+        right: 0;
+    }
+
+    100% {
+        bottom: 125%;
+        right: 3%;
+        opacity: 0;
+        font-size: 20px;
+    }
+}
diff --git a/PersonalWebsite/Pages/Index.razor b/PersonalWebsite/Pages/Index.razor
@@ -1,5 +1,3 @@
 @page "/"
 
-
-
 <StartupProgram />