diff --git a/_layouts/nav.html b/_layouts/nav.html
index 66a41dc..e10b7f1 100644
--- a/_layouts/nav.html
+++ b/_layouts/nav.html
@@ -3,8 +3,13 @@ layout: default
 ---
 <header>
   <nav><ul>
-      <li class="sitetitle"><a class="bigger" href="/">depsterr.com</a></li>
+    <li class="sitetitle"><a class="bigger" href="/">depsterr.com</a></li>
   </nav></ul>
-	<hr>
+  <hr>
+  <nav><ul>
+    <li><a href="/">blog</a></li>
+    <li><a href="/about.html">about</a></li>
+  </nav></ul>
+  <hr>
 </header>
 {{ content }}
diff --git a/_layouts/other.html b/_layouts/other.html
new file mode 100644
index 0000000..9f398dd
--- /dev/null
+++ b/_layouts/other.html
@@ -0,0 +1,9 @@
+---
+layout: centered
+---
+<div class="irrelevant">
+<h1>{{ page.title }}</h1>
+<article>
+	{{ content }}
+</article>
+</div>
diff --git a/about.html b/about.html
new file mode 100644
index 0000000..d8bf8a1
--- /dev/null
+++ b/about.html
@@ -0,0 +1,28 @@
+---
+layout: other
+title: "about"
+---
+
+{% katexmm %}
+<article class="aba">
+  <div>
+    <h2>me</h2>
+    <p>My name is Rachel Samuelsson, and my pronouns are she/her. I'm an undergrad at Chalmers University of Technology, studying computer science and engineering. My interests include functional programming, type theory, univalent mathematics, foundations, logic and category theory. I'm a fan of Haskell, Agda, Idris and Scheme. I'm currently living in Emacs, and it's quite cozy.</p>
+
+    <h2>web</h2>
+    <p>This is a website where I post whatever I feel like, the source of which is available at <a href="https://githug.xyz/depsterr/depsterr.com">my git</a>.</p>
+
+    <h2>contact</h2>
+    <ul>
+    <li>Email: <a href="mailto:depsterr@protonmail.com">depsterr@protonmail.com</a></li>
+    <li>Fedi: <a href="https://types.pl/rachelrosen">@rachelrosen@types.pl</a></li>
+    </ul>
+  </div>
+
+    <figure class="rimg">
+	<h2>picture</h2>
+	<img src="/assets/img/me.png" alt="a picture of me">
+	<figcaption>me with π</figcaption>
+    </figure>
+</article>
+{% endkatexmm %}
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 86b3e3d..45c3800 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -5,25 +5,25 @@
 	counter-reset: heading;
 }
 
-h1:before {
+h1:not(.irrelevant *):before {
 	content: counter(heading)" ";
 	counter-increment: heading;
 }
 
-h1 {
+h1:not(.irrelevant *) {
 	counter-reset: subheading;
 }
 
-h2:before {
+h2:not(.irrelevant *):before {
 	content: counter(heading)"." counter(subheading)" ";
 	counter-increment: subheading;
 }
 
-h2 {
+h2:not(.irrelevant *) {
 	counter-reset: subsubheading;
 }
 
-h3:before {
+h3:not(.irrelevant *):before {
 	content: counter(heading)"." counter(subheading)"." counter(subsubheading)" ";
 	counter-increment: subsubheading;
 }
@@ -107,6 +107,37 @@ h1,h2,h3,h4,h5,h6 {
 	float: right;
 }
 
+.aba {
+    display: flex;
+    flex-direction: row;
+    align-items: top;
+    justify-content: center;
+}
+
+.rimg {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 200%;
+    max-width: 200%;
+}
+
+@media only screen and (max-width : 850px) {
+    .aba {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: top;
+    }
+
+    .rimg {
+	margin: 1em 0 0 0;
+	width: 70%;
+	max-width: 70%;
+    }
+}
+
 .post_listing {
 	margin-top: 40px;
 	margin-bottom: 40px;
@@ -119,7 +150,7 @@ nav ul {
 	text-align: center;
 }
 
-nav ul li {
+nav ul li, .sitetitle {
 	display: inline;
 	margin-right: 1em;
 	white-space: nowrap;
diff --git a/assets/img/me.png b/assets/img/me.png
new file mode 100644
index 0000000..bd1b8c9
Binary files /dev/null and b/assets/img/me.png differ