Personal Site
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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

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.

src/assets/circle.png

This is a binary file and will not be displayed.

+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