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