diff --git a/content/about/index.md b/content/about/index.md
index cce2211..61d14be 100644
--- a/content/about/index.md
+++ b/content/about/index.md
@@ -4,6 +4,8 @@ date: 2022-09-03T12:14:32-07:00
 draft: true
 ---
 
+{{< circular_image name=me.jpeg class=float-right width=200 >}}
+
 I'm Eryn. My pronouns are [she/her][p]. I'm a queer trans woman. I live in San
 Francisco, CA, on the unceded ancestral lands of the Ramaytush Ohlone people,
 with my [two cats][cats]. I was born in Seattle, WA and grew up in Phoenix, AZ.
diff --git a/content/about/me.jpeg b/content/about/me.jpeg
new file mode 100644
index 0000000..f0f7559
Binary files /dev/null and b/content/about/me.jpeg differ
diff --git a/layouts/shortcodes/circular_image.html b/layouts/shortcodes/circular_image.html
new file mode 100644
index 0000000..c9df3f0
--- /dev/null
+++ b/layouts/shortcodes/circular_image.html
@@ -0,0 +1,5 @@
+{{ $img := (.Page.Resources.GetMatch (.Get "name")) }}
+{{ $classes := .Get "class" }}
+{{ $width := .Get "width" }}
+{{ $resized_img := $img.Resize (printf "%dx%d" $width $width) }}
+<img class="circular {{ $classes }}" src="{{ $img.RelPermalink }}" width="{{ $width }}" height="{{ $width }}">
diff --git a/static/styles/root.css b/static/styles/root.css
index 2541968..8d6c1a4 100644
--- a/static/styles/root.css
+++ b/static/styles/root.css
@@ -202,6 +202,11 @@ html {
     font-size: clamp(var(--font-size-min), 1vw, var(--font-size-max));
 }
 
+img.circular {
+    shape-outside: circle(50%);
+    -webkit-clip-path: circle(50%);
+}
+
 main {
     max-width: var(--content-width);
     margin: 0 auto;
@@ -443,6 +448,7 @@ p:last-child { margin-block-end: 0; }
 /** HELPER CLASSES **/
 
 .centered { text-align: center; }
+.float-right { float: right; }
 .nobreak { white-space: nowrap; }
 
 .platter {