Initial commit of Astro version

src/pages/about.astro

@@ -0,0 +1,46 @@
+---
+import { Image } from "astro:assets";
+import BaseLayout from "../layouts/BaseLayout.astro";
+import IconArrowUpRightFromSquare from "../components/icons/IconArrowUpRightFromSquare.astro";
+import samStickerJuicebox from "../assets/images/sam_sticker_juicebox.webp";
+---
+
+<BaseLayout pageTitle="About me">
+  <meta slot="head-description" property="og:description" content="About Bad Manners." />
+  <article aria-labelledby="title-about-me">
+    <h1 id="title-about-me" class="text-2xl sm:text-3xl">About me</h1>
+    <section>
+      <p class="my-5 sm:my-6 sm:px-5 md:px-6">
+        You can call me <b>Bad Manners</b>, <b>Manners</b>, <b>BM</b>, <b>Bad</b>, <b>Bananas</b>... many choices to
+        pick from! My pronouns are "he/him". You can also call me <b>Sam</b> &ndash; which is my fursona's name. He is a
+        mimic and maned wolf hybrid, and you can learn more about him by clicking on him below!
+      </p>
+      <div class="mt-4">
+        <a
+          href="/sam_brendan"
+          class="group mx-auto mb-1 block w-max max-w-full pb-0 sm:mb-3"
+          aria-label="Learn more about Sam"
+        >
+          <Image
+            src={samStickerJuicebox}
+            alt="Sam Brendan with googly eyes and fangs showing from his lips, sipping from the straw of a banana juice box as some of the liquid escapes his mouth. Art by OliveCow."
+            class="max-w-full transition-transform group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100"
+            loading="lazy"
+            height={320}
+          />
+        </a>
+        <span class="text-base">
+          A sticker of Sam by
+          <a
+            class="text-link transition-colors motion-reduce:transition-none"
+            href="https://olivecow.carrd.co/"
+            target="_blank"
+          >
+            <span class="underline">OliveCow</span>
+            <IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
+          </a>.
+        </span>
+      </div>
+    </section>
+  </article>
+</BaseLayout>