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

<div
    class="rounded-2xl flex flex-col shadow-xl shadow-black py-8 mb-8 items-center backdrop-blur-3xl bg-center bg-[url('/static/img/sites/avatar-ht-f.webp')]"
    style="width: 670px; border: 1px solid var(--border);"
    >
    <Image
        src={pfp}
        class="size-40 rounded-full shadow shadow-black m-4"
        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>
    <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="/tags" class="nav-btn">Tags</a> |
    <a href="/friends" class="nav-btn">Friends</a> |
    <a href="/other buttons" class="nav-btn">Moar 33x31</a>
</Partition>