Personal Site
Add figure caption
+15
-1
src/assets/box-circle-mask.png
src/assets/box-circle-mask.png
This is a binary file and will not be displayed.
src/assets/box-rounded-top.png
src/assets/box-rounded-top.png
This is a binary file and will not be displayed.
+15
-1
src/components/home/Landing.astro
+15
-1
src/components/home/Landing.astro
···
1
1
---
2
2
import { socials } from "/site-config";
3
3
4
+
import boxRoundedTop from "/assets/box-rounded-top.png";
5
+
import boxCircleMask from "/assets/box-circle-mask.png";
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
-
console.log(avatar);
21
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" />
22
28
23
29
<section class="landing">
24
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>
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)