troylusty.com/src/pages/index.astro

---
import Layout from "@layouts/Layout.astro";
import { HOME } from "@consts";
import { getCollection } from "astro:content";
import ShowcaseProject from "@components/ShowcaseProject.astro";
import ShowcasePost from "@components/ShowcasePost.astro";
import Hero from "@components/Hero.astro";

const posts = (await getCollection("posts"))
  .filter((post) => !post.data.draft)
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
  .slice(0, HOME.HOMESETTINGS?.NUM_POSTS_ON_HOMEPAGE);

const projects = (await getCollection("projects"))
  .filter((project) => !project.data.draft && project.data.featured)
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
  .slice(0, HOME.HOMESETTINGS?.NUM_PROJECTS_ON_HOMEPAGE);
---

<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
  <Hero />
  <section class="mb-32" aria-labelledby="featured-projects">
    <div class="group flex w-fit flex-row items-center justify-between gap-6">
      <a href="/projects">
        <h2
          class="animate-reveal break-words text-4xl font-semibold capitalize opacity-0 transition-colors duration-500 group-hover:text-tertiary"
          id="featured-projects"
        >
          Featured projects
        </h2>
      </a>
    </div>
    <ol
      class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
    >
      {projects.map((project) => <ShowcaseProject collection={project} />)}
    </ol>
    {
      projects.length > 1 ? (
        <a href="/projects">
          {" "}
          <div class="mt-8 flex animate-reveal flex-row items-center gap-1 justify-self-center rounded-full bg-tertiary px-3 py-2 font-medium capitalize text-primary opacity-0 transition-colors duration-300 [animation-delay:0.1s] hover:bg-accent">
            View all
          </div>
        </a>
      ) : null
    }
  </section>
  <section aria-labelledby="recent-posts">
    <div class="group flex w-fit flex-row items-center justify-between gap-6">
      <a href="/posts">
        <h2
          class="animate-reveal break-words text-4xl font-semibold capitalize opacity-0 transition-colors duration-500 [animation-delay:0.2s] group-hover:text-tertiary"
          id="featured-projects"
        >
          Recent posts
        </h2>
      </a>
    </div>
    <ol
      class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.3s]"
    >
      {posts.map((post) => <ShowcasePost collection={post} />)}
    </ol>
    {
      posts.length > 1 ? (
        <a href="/posts">
          {" "}
          <div class="mt-8 flex animate-reveal flex-row items-center gap-1 justify-self-center rounded-full bg-tertiary px-3 py-2 font-medium capitalize text-primary opacity-0 transition-colors duration-300 [animation-delay:0.1s] hover:bg-accent">
            View all
          </div>
        </a>
      ) : null
    }
  </section>
</Layout>