---
import { Image } from "astro:assets";

import Layout from "../layouts/Layout.astro";

import Card from "../components/Card.astro";

import fursonaImage from "../images/fursona.png";
---

<Layout title="about me">
    <Card title="about me">
        <aside class="fursona">
            <figure>
                <Image id="fursona" src={fursonaImage} alt="my fursona, Riko, a deer-dog hybrid. she has light orange fur with white speckles and accents throughout. a deeper orange color is used on the dog ears and ends of the limbs, and he has small horns. she wears a purple-blue scarf containing a moon symbol, and similarly styled arm/leg warmers on the right arm and left leg one (featuring stars) respectively." loading="eager" />
                <figcaption><p>my fursona, drawn by <a href="https://www.tumblr.com/karticatyt" target="_blank">KarticatYT</a></p></figcaption>
            </figure>
        </aside>
        <p>hai! i'm <strong>reid</strong> <i>(any pronouns)</i>, known online as reidlab. i'm a <em>programmer</em>, <em>system administrator</em>, amateur <em>artist</em>, and terminally online furry</p>
        <p>my favorite programming languages include <em>rust</em>, <em>lua</em>, and <em>typescript</em>. i'm an avid <em>nix</em> user! i don't specialize in creating anything specific, it all just comes into my head as really dumb ideas that i later on execute in the strangest way i can imagine</p>
    </Card>
</Layout>
<style>
    .fursona {
        float: left;
        max-width: 30%;
    }
    .fursona img {
        scale: 1;
        transition: scale 0.05s ease-in-out;
        animation:
            popin 2s cubic-bezier(0.22, 1, 0.33, 1),
            sway 2s ease-in-out infinite alternate 2s;
    }
    .fursona img:hover {
        cursor: pointer;
    }
    .fursona img:active {
        scale: 0.9;
    }

    @keyframes popin {
        from {
            transform: scale(0) rotate(-1deg);
        }
        to {
            transform: scale(1) rotate(1deg);
        }
    }

    @keyframes sway {
        from {
            transform: rotate(1deg);
        }
        to {
            transform: rotate(-1deg);
        }
    }

    @media screen and (prefers-reduced-motion: reduce) {
        .fursona img {
            animation: none;
        }
    }
</style>
<script>
    document.querySelectorAll("#fursona").forEach((v) => {
        v.addEventListener("click", () => {
            const audio = new Audio("/sounds/squeak.mp3");

            audio.volume = 0.5;
            audio.play();
        });
    });
</script>
