fix: add back reveal animations on index

src/components/Article.astro

@@ -28,7 +28,7 @@ const listFormatter = new Intl.ListFormat("en-GB", {
   updated={article.data.updated}
   tags={article.data.tags}
 >
-  <div class="mx-auto mb-8 max-w-[65ch]">
+  <div class="mx-auto mb-8">
     <h1
       class="animate-reveal text-start text-2xl font-semibold break-words opacity-0"
     >
@@ -80,7 +80,7 @@ const listFormatter = new Intl.ListFormat("en-GB", {
     </div>
   </div>
   <div
-    class="animate-reveal mx-auto max-w-[65ch] opacity-0 [animation-delay:0.2s]"
+    class="animate-reveal mx-auto opacity-0 [animation-delay:0.2s]"
   >
     <Prose>
       <Content />

src/components/Button.astro

@@ -8,7 +8,7 @@ type Props = {
 const { href, link, class: additionalClasses } = Astro.props;
 
 const baseClasses =
-  "bg-tertiary text-primary hover:bg-accent flex w-fit flex-row items-center gap-1 justify-self-center rounded-md px-2 py-1 text-center text-sm font-medium text-nowrap capitalize";
+  "bg-tertiary text-primary hover:bg-accent flex w-fit flex-row items-center gap-1 justify-self-center rounded-sm px-2 py-1 text-center text-sm font-medium text-nowrap capitalize";
 const combinedClasses = `${baseClasses} ${additionalClasses || ""}`;
 ---
 

src/components/Carousel.astro

@@ -60,7 +60,7 @@ const { data } = Astro.props;
         x-transition.opacity.duration.1000ms
       >
         <img
-          class="absolute inset-0 h-full w-full rounded-md object-cover"
+          class="absolute inset-0 h-full w-full rounded-sm object-cover"
           x-bind:src="slide.data.image.url.src"
           x-bind:alt="slide.data.image.alt"
         />

src/components/Hero.astro

@@ -1,6 +1,8 @@
 ---
 import instrument from "@fontsource/instrument-serif/files/instrument-serif-latin-400-normal.woff2?url";
 import { Icon } from "astro-icon/components";
+import { Image } from "astro:assets";
+import icon from "public/assets/icon.png";
 ---
 
 <link
@@ -20,10 +22,11 @@ import { Icon } from "astro-icon/components";
         class="text-secondary flex items-center justify-center gap-3 font-semibold"
       >
         Hi, I'm Troy,
-        <img
+        <Image
-          src="/assets/icon.png"
+          src={icon}
           class="size-12 rounded-xl md:size-16"
-          alt=""
+          alt="Troy Lusty"
+          loading="eager"
         />
       </div>
       <div class="text-tertiary font-serif font-light tracking-wide italic">

src/components/ShowcaseProject.astro

@@ -1,6 +1,5 @@
 ---
 import { Image } from "astro:assets";
-import FormattedDate from "@components/FormattedDate.astro";
 
 type Props = {
   collection: any;
@@ -12,7 +11,7 @@ const { collection } = Astro.props;
 <li>
   <article class="flex-col overflow-clip">
     <a href={`/${collection.collection}/${collection.slug}`} class="group">
-      <div class="overflow-hidden rounded-md">
+      <div class="overflow-hidden rounded-sm">
         <Image
           src={collection.data.image.url}
           alt={collection.data.image.alt}
@@ -22,19 +21,6 @@ const { collection } = Astro.props;
           fit="cover"
         />
       </div>
-      <article class="flex flex-col">
-        <h3 class="mb-1 font-semibold text-balance">
-          <span class="text-secondary">{collection.data.title}</span><span
-            class="text-tertiary group-hover:text-accent ml-2 transition-colors"
-            >{collection.data.description}</span
-          >
-        </h3>
-        <time class="text-accent block text-sm"
-          ><time>
-            <FormattedDate date={collection.data.date} />
-          </time></time
-        >
-      </article>
     </a>
   </article>
 </li>

src/pages/index.astro

@@ -27,12 +27,12 @@ const projectsJSON = JSON.stringify(projects);
 
 <Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
   <Hero />
-  <section aria-labelledby="featured-projects">
+  <section aria-labelledby="featured-projects" class="animate-reveal opacity-0 [animation-delay:0.1s]">
     <div
       class="mx-auto flex flex-col items-start justify-between sm:flex-row sm:items-center"
     >
       <h2
-        class=" animate-reveal text-2xl font-semibold break-words capitalize opacity-0"
+        class=" text-2xl font-semibold break-words capitalize "
         id="featured-projects"
       >
         Featured projects
@@ -57,16 +57,16 @@ const projectsJSON = JSON.stringify(projects);
     <Carousel data={projectsJSON} />
   </section>
 
-  <section aria-labelledby="recent-posts" class="mt-24">
+  <section aria-labelledby="recent-posts" class="mt-24 animate-reveal opacity-0 [animation-delay:0.2s]">
     <div class="group flex w-fit flex-row items-center">
       <h2
-        class="animate-reveal text-2xl font-semibold break-words capitalize opacity-0"
+        class="text-2xl font-semibold break-words capitalize"
       >
         Recent posts
       </h2>
     </div>
     <ol
-      class="animate-reveal mt-8 grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.3s]"
+      class="mt-8 grid grid-cols-1 gap-6"
     >
       {posts.map((post) => <ShowcasePost collection={post} />)}
     </ol>

src/pages/projects/index.astro

@@ -15,7 +15,7 @@ const projects = (await getCollection("projects"))
       {PROJECTS.TITLE}
     </h1>
     <ol
-      class="animate-reveal mt-8 grid grid-cols-2 gap-6 opacity-0 [animation-delay:0.1s] md:grid-cols-3"
+      class="animate-reveal mt-8 grid grid-cols-2 gap-2 opacity-0 [animation-delay:0.1s] md:grid-cols-3"
     >
       {projects.map((article: any) => <ShowcaseProject collection={article} />)}
     </ol>