Add animations and polish existing ones

(+ accessibility with reduced motion)

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 {

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;
     }