---

import { getCollection } from "astro:content";

import PageLayout from "@/layouts/Base.astro";

import PostPreview from "@/components/blog/PostPreview.astro";

import SocialList from "@/components/page/SocialList.astro";

import { sortMDByDate } from "@/utils";

import { Image } from "astro:assets";

const MAX_POSTS = 10;

const allPosts = await getCollection("post");

const visiblePosts = allPosts.filter((post) => !post.data.hidden);

const allPostsByDate = sortMDByDate(visiblePosts).slice(0, MAX_POSTS);

---

<PageLayout meta={{ title: "Steve Simkins" }}>

  <h1 class="title mb-4">/</h1>

  <section>

    <p class="mb-4">

      DX Engineer with a passion for developer tooling that advances an open

      web. Currently working at <a

        href="https://stablecore.com"

        target="_blank"

        rel="noopener noreferrer"

        class="style-link">Stablecore</a

      >

      with other <a href="/projects" class="style-link">projects</a>

      in my spare time. This site catalogs my various writings and interests. See

      what I'm up to <a href="/now" class="style-link">now</a>!

    </p>

    <SocialList />

    <p>

      Or anywhere with my handle <span class="text-accent">@stevedylandev</span>

    </p>

  </section>

  <section aria-label="Blog post list" class="mt-16">

    <h2 class="title mb-4 text-xl">Posts</h2>

    <ul class="space-y-4 sm:space-y-2">

      {

        allPostsByDate.map((p) => (

          <li class="flex flex-col gap-x-2 sm:flex-row">

            <PostPreview post={p} />

          </li>

        ))

      }

    </ul>

  </section>

  <section class="mt-16">

    <h2 class="title mb-4 text-xl">Extras</h2>

    <ul class="space-y-4 sm:space-y-2">

      <li>

        <a

          href="https://sequoia.pub"

          target="_blank"

          rel="noopener noreferrer"

          class="style-link inline-block"

          ><Image

            src="https://api.iconify.design/hugeicons:tree-04.svg?color=%23888888"

            class="inline-block h-5 w-5"

            height="100"

            loading="eager"

            width="100"

            alt="Tree icon representing Sequoia"

          /> Sequoia

        </a>:

        <p class="inline-block sm:mt-2">Content publishing CLI for ATProto</p>

      </li>

      <li>

        <a

          href="https://bhvr.dev"

          target="_blank"

          rel="noopener noreferrer"

          class="style-link inline-block"

          ><Image

            src="https://api.iconify.design/fluent-emoji-high-contrast:beaver.svg?color=%23888888"

            class="inline-block h-4 w-4"

            loading="eager"

            height="100"

            width="100"

            alt="Beaver icon representing bhvr"

          /> bhvr

        </a>:

        <p class="inline-block sm:mt-2">

          Modern framework for building web apps using Bun, Hono, Vite, and

          React

        </p>

      </li>

      <li>

        <a

          href="https://ethglobal.com/showcase/cosmic-cowboys-3q0co"

          target="_blank"

          rel="noopener noreferrer"

          class="style-link inline-block"

          ><Image

            height="100"

            width="100"

            loading="lazy"

            src="https://api.iconify.design/ph:cowboy-hat-fill.svg?color=%23888888"

            class="inline-block h-4 w-4"

            alt="Cowboy hat icon representing Cosmic Cowboys"

          /> Cosmic Cowboys

        </a>:

        <p class="inline-block sm:mt-2">

          EthGlobal 2023 hackathon winning project

        </p>

      </li>

      <li>

        <a

          href="https://steve.photo"

          target="_blank"

          rel="noopener noreferrer"

          class="style-link inline-block"

          ><Image

            height="100"

            width="100"

            loading="lazy"

            src="https://api.iconify.design/material-symbols:photo-camera.svg?color=%23888888"

            class="inline-block h-4 w-4"

            alt="Camera icon representing photography portfolio"

          /> Photos

        </a>:

        <p class="inline-block sm:mt-2">My personal photography portfolio</p>

      </li>

      <li>

        <a

          href="https://stablecore.com"

          target="_blank"

          rel="noopener noreferrer"

          class="style-link inline-block"

          ><Image

            height="100"

            width="100"

            loading="lazy"

            src="https://files.stevedylan.dev/stablecore.png"

            class="inline-block h-4 w-4"

            alt="Stablecore company logo"

          /> Stablecore

        </a>:

        <p class="inline-block sm:mt-2">

          Where I'm currently working as a Senior Solutions Engineer

        </p>

      </li>

      <li>

        <a

          href="https://dino.stevedylan.dev"

          target="_blank"

          rel="noopener noreferrer"

          class="style-link inline-block"

          ><Image

            height="100"

            width="100"

            loading="lazy"

            src="https://files.stevedylan.dev/dino-icon-2.png"

            class="inline-block h-4 w-4"

            alt="Pixel art dinosaur icon"

          /> Dino

        </a>:

        <p class="inline-block sm:mt-2">Just the dino</p>

      </li>

    </ul>

  </section>

</PageLayout>