---
import { Image } from "astro:assets";
import me from "../assets/me.jpg";
---

<div class="border border-solid rounded-lg p-6 surface">
  <div class="flex flex-col md:flex-row gap-6 items-center md:items-start">
    <div class="flex-1 space-y-2">
      <h1 class="text-5xl font-bold">Hi, I'm Dustin!</h1>
      <p class="text-lg">
        I'm a senior full stack software engineer from Michigan, currently
        enjoying the time from being <a
          class="link"
          href="https://www.mmorpg.com/news/zenimax-online-studios-laid-off-213-employees-and-166-from-zenimax-media-24-of-all-this-weeks-layoffs-2000138461"
          >laid off</a
        > from Zenimax Online Studios and looking for new opportunities!
      </p>
      <p>
        I love art and music and lately I've been really into photography,
        stories (movies, shows, games, etc. The medium does not particularly
        matter to me), and tennis! I have a lot of other interests and love
        learning about other people's passions, so please chat me up about them!
      </p>
    </div>
    <Image
      class="rounded-full size-40 shrink-0 -order-1 xl:order-1"
      loading="eager"
      src={me}
      alt="A portrait of me smiling and holding my black short-hair cat, Marby"
    />
  </div>
</div>