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