---
import { Picture, getImage } from "astro:assets";
import pfp from "../img/sites/avatar.png";
import Partition from "./Partition.astro";

import myBackground from "../img/sites/avatar-ht-f.png";

const optimizedBackground = await getImage({
	src: myBackground,
	format: "avif",
	quality: 50,
	width: 680,
});
const optimizedBackgroundLQ = await getImage({
	src: myBackground,
	format: "webp",
	quality: 60,
	width: 512,
});
---
<div
    style={`width: 670px; border: 1px solid var(--border); background-image: image-set(url('${optimizedBackground.src}') type("image/avif"), url('/static/img/sites/avatar-ht-f.webp') type("image/webp"), url('${optimizedBackgroundLQ.src}') type("image/jpeg"));`}
    class="rounded-2xl flex flex-col shadow-xl shadow-black py-8 mb-8 items-center bg-center bg-cover"
    >
    <Picture
        src={pfp}
        class="size-40 rounded-full shadow shadow-black m-4"
        width={192}
        height={192}
        quality={65}
        densities={[1, 1.25, 1.5, 1.75, 2, 3, 4]}
        formats={['avif', 'webp', 'jpeg']}
        alt="Arias's profile picture"
    />
    <div
        class="flex-row p-3 gap-4 text-center text-3xl"
    >
        <h2 class="backdrop-brightness-50 backdrop-blur rounded-lg px-2 pb-1 pt-2 mb-1">Aria (Aka: Mojo)</h2>
        <h3 class="backdrop-brightness-50 backdrop-blur rounded-lg px-2 pb-1 pt-2">🏳️‍🌈 🏳️‍⚧️ • she/her</h3>
    </div>
</div>
<Partition>
    <p class="text-center">
    | <a href="/" class="nav-btn">Home</a> |
    <a href="/blog" class="nav-btn">Blog</a> |
    <a href="/about" class="nav-btn">About</a> |
    <a href="/friends" class="nav-btn">Friends</a> |
    <a href="/directory" class="nav-btn">Other Pages</a> |
    <a href="/portfolio" class="nav-btn">Portfolio</a> |
    </p>
</Partition>