feat: respect user's reduced motion preference and update homepage content.

Author: paripsky

src/pages/index.astro

@@ -53,25 +53,19 @@ const posts = Object.values(postsGlob)
     <div
       class="md:sticky md:top-0 md:h-screen flex flex-col justify-center py-12"
     >
-      <section class="flex flex-col gap-6">
+      <section class="flex flex-col gap-6 mt-40 md:mt-0">
         <h1
           class="text-[clamp(2.5rem,5vw,4rem)] leading-tight font-medium tracking-tight motion-preset-slide-up motion-preset-fade-lg"
         >
           Hi, I'm Yonatan.
         </h1>
         <h2
-          class="text-lg font-light text-pretty leading-relaxed text-neutral-300 motion-preset-slide-up motion-preset-fade-lg motion-delay-300"
+          class="text-lg font-light text-pretty leading-relaxed text-neutral-300 motion-preset-slide-up motion-preset-fade-lg motion-reduce:motion-delay-0 motion-delay-300"
         >
-          JavaScript Enthusiast, Software Engineer, and Occasional Post Writer. <br
-          />
-          Read my latest post <a
-            class="underline text-neutral-200"
-            href={posts.at(0).url}
-            title={posts.at(0).title}>here</a
-          >.
+          JavaScript Enthusiast, Software Engineer, and Occasional Post Writer.
         </h2>
         <div
-          class="flex motion-preset-slide-up motion-preset-fade-lg motion-delay-500"
+          class="flex motion-preset-slide-up motion-preset-fade-lg motion-reduce:motion-delay-0 motion-delay-500"
         >
           <Tilt>
             <div class="flex gap-4">
@@ -80,7 +74,7 @@ const posts = Object.values(postsGlob)
           </Tilt>
         </div>
         <span
-          class="text-sm font-light text-pretty leading-relaxed text-neutral-400 motion-preset-slide-up motion-preset-fade-lg motion-delay-700"
+          class="text-sm font-light text-pretty leading-relaxed text-neutral-400 motion-preset-slide-up motion-preset-fade-lg motion-reduce:motion-delay-0 motion-delay-700"
           >Follow me on <a
             class="underline hover:text-white transition-colors"
             href="https://github.com/paripsky"
@@ -112,7 +106,9 @@ const posts = Object.values(postsGlob)
       </section>
     </div>
 
-    <div class="flex flex-col gap-20 py-12">
+    <div
+      class="flex flex-col gap-20 py-12"
+    >
       <section id="posts" class="flex flex-col gap-6">
         <Pill><Icon name="mdi:post" class="size-4" /> Posts</Pill>
         <ul class="flex flex-col gap-4">

src/styles/global.css

@@ -2,7 +2,9 @@
 @plugin "@tailwindcss/typography";
 @plugin "tailwindcss-motion";
 
-html {
-    scroll-behavior: smooth;
-    scroll-padding-top: 3rem;
+@media (prefers-reduced-motion: no-preference) {
+    html {
+        scroll-behavior: smooth;
+        scroll-padding-top: 3rem;
+    }
 }