Personal Site
Remove the "bsky pfp" caption. screen readers dont need to see the avatar its purely visual decoration which adds nothing to the page
+22
-23
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.
src/assets/circle.png
src/assets/circle.png
This is a binary file and will not be displayed.
+22
-23
src/components/home/Landing.astro
+22
-23
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";
4
+
import Circle from "/assets/circle.png";
6
5
import line from "/assets/line.png";
7
6
8
7
const avatar = await fetch(
···
26
25
<article
27
26
class="landing"
28
27
style={`--line-png: url("${line.src}");
29
-
--box-rounded-top-png: url("${boxRoundedTop.src}");
30
-
--box-circle-mask-png: url("${boxCircleMask.src}");`}
28
+
--circle-png: url("${Circle.src}");`}
31
29
>
32
30
<h2>Hello World 🏳️⚧️</h2>
33
31
<p class="no-anchor-warning">
34
32
⚠️ Your browser doesnt support anchor positioning or javascript!
35
33
</p>
36
-
<figure>
37
-
<img src={avatar ?? "http://undefined"} alt="" />
38
-
<figcaption>bsky pfp</figcaption>
39
-
</figure>
34
+
{
35
+
avatar && (
36
+
<div class="avatar">
37
+
<img src={avatar} alt="" />
38
+
</div>
39
+
)
40
+
}
40
41
<p>
41
42
<!-- todo update this content -->
42
43
Hi! I'm Kai<wbr />/<wbr />Nico<wbr />/<wbr />Alex<wbr />/<wbr />Jen [she<wbr
···
74
75
}
75
76
}
76
77
77
-
figure {
78
+
.avatar {
78
79
float: right;
79
80
box-sizing: border-box;
80
81
width: 120px;
81
-
height: 180px;
82
-
margin: 0 0 10px 10px;
82
+
height: 120px;
83
+
margin: 20px;
84
+
85
+
--outline-size: 10px;
83
86
84
-
background-image: var(--box-rounded-top-png);
85
-
background-repeat: no-repeat;
86
-
background-size: 100% 100%;
87
+
filter: drop-shadow(var(--outline-size) 0 black)
88
+
drop-shadow(calc(-1 * var(--outline-size)) 0 black)
89
+
drop-shadow(0 var(--outline-size) black)
90
+
drop-shadow(0 calc(-1 * var(--outline-size)) black);
87
91
88
92
img {
89
-
aspect-ratio: 1;
90
93
width: 100%;
94
+
aspect-ratio: 1;
91
95
background-color: #008282;
92
-
mask-image: var(--box-circle-mask-png);
96
+
mask-image: var(--circle-png);
93
97
mask-size: 120px 120px;
94
98
}
95
-
96
-
figcaption {
97
-
margin: auto;
98
-
width: fit-content;
99
-
margin-block: 10px;
100
-
}
101
99
}
102
100
103
101
p {
···
105
103
}
106
104
107
105
@keyframes fade-in {
108
-
from, to {
106
+
from,
107
+
to {
109
108
height: auto;
110
109
}
111
110