From 107c9252ee136ecbf02e9df1335330198709db24 Mon Sep 17 00:00:00 2001
From: kubgus <ja.gustafik@outlook.sk>
Date: Wed, 14 Aug 2024 15:46:23 +0200
Subject: [PATCH] Add animations and polish existing ones (+ accessibility with
 reduced motion)

---
 src/components/tech-marquee.astro | 16 +++++++++++++++-
 src/pages/index.astro             | 10 ++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/tech-marquee.astro b/src/components/tech-marquee.astro
index c6d86c0..f14d1b4 100644
--- a/src/components/tech-marquee.astro
+++ b/src/components/tech-marquee.astro
@@ -45,13 +45,27 @@ pictures = pictures.sort(() => Math.random() - 0.5);
         margin: 2rem 0;
     }
 
+    figure {
+        scrollbar-width: none;
+    }
+
     figure > div {
-        animation: marquee linear 30s infinite;
         width: max-content;
         display: flex;
         align-items: center;
         flex-direction: row;
         gap: 0.5rem;
+        animation: marquee linear 30s infinite;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        figure {
+            overflow: scroll;
+        }
+
+        figure > div {
+            animation: none;
+        }
     }
 
     @keyframes marquee {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7ad37ff..5e8e0b8 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -77,6 +77,16 @@ const title = "Jakub Gustafik";
         font-size: 1.2rem;
     }
 
+    .content > div > * {
+        opacity: 0;
+        scale: 0.9;
+        animation: fade-in ease-out 0.2s forwards;
+    }
+
+    @keyframes fade-in {
+        to { scale: 1; opacity: 1; }
+    }
+
     .content h1 {
         font-size: 1.85rem;
     }