···

       
22
       
22
       
 
       


     

       
23
       
23
       
 
       
	<h2 id="about-kat" class="highlight">about kat</h2>

     

       
24
       
24
       
 
       


     

       
25
       
25
       
-
       
	<div class="about-wrapper">

     

       
26
       
26
       
-
       
		<figure class="about-icon tape">	

     

       
25
       
25
       
+
       
	<div class="polaroid-wrapper">

     

       
26
       
26
       
+
       
		<figure class="polaroid-icon tape">	

     

       
27
       
27
       
 
       
			<img src="/assets/images/hcard.png" loading="lazy" alt="selfie of me holding up my camcorder and covering half my face with it as i look into the view finder. the image is black and white, dithered, and covered in spotted half tones">

     

       
28
       
28
       
 
       


     

       
29
       
29
       
 
       
			<figcaption>me with my camcorder <span aria-label="hashtag my camcorder">#mycamcorder</span> (2025)</figcaption>

     

···

       
1
       
1
       
-
       
.about-wrapper {

     

       
1
       
1
       
+
       
.polaroid-wrapper {

     

       
2
       
2
       
 
       
	margin-top: 1.5em;

     

       
3
       
3
       
 
       
}

     

       
4
       
4
       
 
       


     

       
5
       
5
       
-
       
.about-icon {

     

       
5
       
5
       
+
       
.polaroid-icon {

     

       
6
       
6
       
 
       
	background: var(--accent-color);

     

       
7
       
7
       
 
       
	width: fit-content;

     

       
8
       
8
       
 
       
	padding: .2rem 1rem 2rem 1rem;

     
···

       
10
       
10
       
 
       
	display: block;

     

       
11
       
11
       
 
       
}

     

       
12
       
12
       
 
       


     

       
13
       
13
       
-
       
figure.about-icon {

     

       
13
       
13
       
+
       
figure.polaroid-icon {

     

       
14
       
14
       
 
       
	inline-size: fit-content;

     

       
15
       
15
       
 
       
	margin-inline: auto;

     

       
16
       
16
       
 
       
}

     

       
17
       
17
       
 
       


     

       
18
       
18
       
-
       
figure.about-icon img {

     

       
18
       
18
       
+
       
figure.polaroid-icon img {

     

       
19
       
19
       
 
       
	display: block;

     

       
20
       
20
       
 
       
	margin: 1rem auto;

     

       
21
       
21
       
 
       
	width: 200px;

     

       
22
       
22
       
 
       
}

     

       
23
       
23
       
 
       


     

       
24
       
24
       
-
       
figure.about-icon figcaption {

     

       
24
       
24
       
+
       
figure.polaroid-icon figcaption {

     

       
25
       
25
       
 
       
	color: white;

     

       
26
       
26
       
 
       
	contain: inline-size;

     

       
27
       
27
       
 
       
}

     
···

       
32
       
32
       
 
       
	height: 30px;

     

       
33
       
33
       
 
       
	margin: -1em auto .5rem auto;

     

       
34
       
34
       
 
       
	width: 200px;

     

       
35
       
35
       
-
       
	background-color: color-mix(in srgb, lightblue, transparent 10%);

     

       
35
       
35
       
+
       
	background-color: lightblue;

     

       
36
       
36
       
 
       
	border-right: 1px dotted #86c5da;

     

       
37
       
37
       
 
       
	border-left: 1px dotted #86c5da;

     

       
38
       
38
       
 
       
	opacity: 0.5;

     

···

       
31
       
31
       
 
       
		<li><a href="https://bsky.app/profile/did:plc:jl5dgp7xb34xfqlpywt7kcp5/">bluesky</a></li>

     

       
32
       
32
       
 
       
		<li><a href="https://social.lol/@lachesis">fediverse</a></li>

     

       
33
       
33
       
 
       
	</ul>

     

       
34
       
34
       
+
       
	

     

       
35
       
35
       
+
       
	<h2 id="code" class="highlight">code</h2>

     

       
36
       
36
       
+
       


     

       
37
       
37
       
+
       
	<ul class="nav-secondary">

     

       
38
       
38
       
+
       
		<li><a href="https://github.com/xxwhirlpool/">github</a></li>

     

       
39
       
39
       
+
       
		<li><a href="https://git.sr.ht/~chasinglightning/">sourcehut</a></li>

     

       
40
       
40
       
+
       
		<li><a href="https://tangled.org/@did:plc:jl5dgp7xb34xfqlpywt7kcp5">tangled</a></li>

     

       
41
       
41
       
+
       
		<li><a href="https://bytes.4-walls.net/kat">bytes</a> <span class="li-parenthesis">(personal forgejo instance)</span></li>

     

       
42
       
42
       
+
       
	</ul>

     

       
34
       
43
       
 
       


     

       
35
       
44
       
 
       
	<h2 id="contact" class="highlight">contact</h2>

     

       
36
       
45