cool animations

Author: linuxjava7

_includes/layouts/base.njk

@@ -89,5 +89,33 @@
 
         <!-- This page `{{ page.url }}` was built on {% currentBuildDate %} -->
         <script type="module" src="{% getBundleFileUrl "js" %}"></script>
+
+        <script>
+          document.addEventListener("DOMContentLoaded", function () {
+            const allElements = document.querySelectorAll(
+              'main h1, main h2, main h3, main h4, main h5, main h6, main p, main li, main .card'
+            );
+
+            let staggerIndex = 0;
+
+            allElements.forEach((el) => {
+              if (el.classList.contains("card")) {
+                el.classList.add("appear");
+                el.style.animationDelay = `${staggerIndex * 150}ms`;
+                el.style.animationDuration = "800ms";
+                staggerIndex++;
+              }
+              else if (!el.closest('.card')) {
+                el.classList.add("appear");
+                el.style.animationDelay = `${staggerIndex * 150}ms`;
+                el.style.animationDuration = "800ms";
+                staggerIndex++;
+              }
+            });
+          });
+        </script>
+
+
+
     </body>
 </html>

content/index.njk

@@ -6,7 +6,7 @@ const eleventyNavigation = {
 };
 ---
 <div class="container" id="intro">
-  <h1>LinuxJava7</h1>
+  <h1 style="animation-duration: 100ms;">LinuxJava7</h1>
   <p><strong>Hey, I'm LinuxJava7. </strong>I'm a hobbyist UX and UI designer, Linux desktop user since 2021, FOSS (Free and Open Source Software) enthusiast, and aspiring full-stack developer.</p>
 </div>
 

css/index.css

@@ -613,8 +613,8 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
 	margin-right: 6px;
 	vertical-align: middle;
 	display: inline-block;
-	width: 20px;
-	height: 20px;
+	width: 1rem;
+	height: auto;
 	fill: currentColor;
 }
 
@@ -676,45 +676,31 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
 	flex-shrink: 0;
 }
 
-/* View Switcher Narrow Specific */
-.view-switcher-narrow {
-	width: 100%;
-	height: 100%;
-	align-content: center;
-	align-items: stretch;
-	margin: 1rem;
-}
-
-.view-switcher-narrow a {
-	flex-direction: column;
-	gap: 0.05rem;
-	font-size: 0.8rem;
-}
+/* View Switcher States */
 
-.view-switcher-narrow svg {
-	margin-top: 0.25rem;
-	width: 1.2rem;
+.view-switcher a {
+	transform: scale(100%);
 }
 
-/* View Switcher States */
 .view-switcher a:hover,
-.view-switcher a:focus,
-.view-switcher-narrow a:hover,
-.view-switcher-narrow a:focus {
+.view-switcher a:focus {
 	background-color: rgba(0, 0, 6, 0.03);
 	color: var(--window-fg-color);
+	transform: scale(102.5%);
+	transition: transform 200ms var(--slickease);
+}
+.view-switcher a:active {
+	transform: scale(97.5%);
+	transition: transform 200ms var(--slickease);
 }
 
-.view-switcher .current,
-.view-switcher-narrow .current {
+.view-switcher .current {
 	background-color: rgba(0, 0, 6, 0.05);
 	color: var(--view-switcher-accent);
 }
 
 .view-switcher .current:hover,
-.view-switcher .current:focus,
-.view-switcher-narrow .current:hover,
-.view-switcher-narrow .current:focus {
+.view-switcher .current:focus {
 	background-color: rgba(0, 0, 6, 0.08);
 	color: var(--view-switcher-accent);
 }
@@ -873,3 +859,23 @@ footer {
 	flex-direction: column;
 	gap: 2rem;
 }
+
+@keyframes appear {
+	from {
+		transform: translateY(16px);
+		opacity: 0;
+	}
+	50% {
+		transform: translateY(-2px);
+		opacity: 100;
+	}
+	to {
+		transform: translateY(0);
+		opacity: 100;
+	}
+}
+
+.appear {
+	opacity: 0;
+	animation: appear ease forwards;
+}