src/assets/box-circle-mask.png

This is a binary file and will not be displayed.

src/assets/box-rounded-top.png

This is a binary file and will not be displayed.

+15 -1

src/components/home/Landing.astro

··· 1 --- 2 import { socials } from "/site-config"; 3 0 0 0 4 const avatar = await fetch( 5 "https://api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=" + 6 socials.atproto, ··· 17 console.error("Got error", e); 18 return undefined; 19 }); 20 - console.log(avatar); 21 --- 0 0 0 0 22 23 <section class="landing"> 24 <h2>Hello World 🏳️‍⚧️</h2> 0 0 0 0 0 0 0 0 25 <p> 26 Hi! I'm Kai/Nico/Alex/Jen [she/it] and I make silly websites! I'm a big fan 27 of progressive enhancement, open source, and linux. (I use arch btw)

··· 1 --- 2 import { socials } from "/site-config"; 3 4 + import boxRoundedTop from "/assets/box-rounded-top.png"; 5 + import boxCircleMask from "/assets/box-circle-mask.png"; 6 + 7 const avatar = await fetch( 8 "https://api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=" + 9 socials.atproto, ··· 20 console.error("Got error", e); 21 return undefined; 22 }); 0 23 --- 24 + 25 + <link rel="preload" href={boxRoundedTop.src} as="image" /> 26 + <link rel="preload" href={boxCircleMask.src} as="image" /> 27 + <link rel="preload" href={avatar ?? "http://undefined"} as="image" /> 28 29 <section class="landing"> 30 <h2>Hello World 🏳️‍⚧️</h2> 31 + <figure style={`--box-rounded-top-png: url("${boxRoundedTop.src}")`}> 32 + <img 33 + src={avatar ?? "http://undefined"} 34 + alt="" 35 + style={`--box-circle-mask-png: url("${boxCircleMask.src}")`} 36 + /> 37 + <figcaption>bsky pfp</figcaption> 38 + </figure> 39 <p> 40 Hi! I'm Kai/Nico/Alex/Jen [she/it] and I make silly websites! I'm a big fan 41 of progressive enhancement, open source, and linux. (I use arch btw)