53 lines
1.8 KiB
Text
53 lines
1.8 KiB
Text
---
|
|
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: "jpeg",
|
|
quality: 60,
|
|
width: 680,
|
|
});
|
|
---
|
|
<style is:inline>
|
|
image-set(
|
|
url("image1.avif") type("image/avif"),
|
|
url("image2.jpg") type("image/jpeg")
|
|
);
|
|
</style>
|
|
<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={320}
|
|
height={320}
|
|
quality={70}
|
|
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>
|
|
<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="/other buttons" class="nav-btn">Moar 88x31</a>
|
|
</Partition>
|