diff --git a/src/components/TheBox.vue b/src/components/TheBox.vue
index 2772689..135153b 100644
--- a/src/components/TheBox.vue
+++ b/src/components/TheBox.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 export interface Props {
   rows?: number
+  columns?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  rows: 1
+  rows: 1,
+  columns: 1
 })
 
 </script>
@@ -21,5 +23,6 @@ const props = withDefaults(defineProps<Props>(), {
   background-color: #e5d9c7;
   padding: 1em;
   grid-row-end: span v-bind(props.rows);
+  grid-column-end: span v-bind(props.columns);
 }
 </style>
diff --git a/src/components/TheBoxGrid.vue b/src/components/TheBoxGrid.vue
new file mode 100644
index 0000000..519b515
--- /dev/null
+++ b/src/components/TheBoxGrid.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const props = defineProps<{
+  templateColumns: string
+  templateColumnsMobile: string
+}>()
+</script>
+
+<template>
+  <div class="section">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped>
+.section {
+    display: grid;
+    grid-template-columns: v-bind(props.templateColumns);
+    gap: 1em;
+    grid-auto-flow: row dense;
+}
+
+@media only screen and (max-width : 850px) {
+  .section {
+      grid-template-columns: v-bind(props.templateColumnsMobile);
+    }
+}
+</style>
diff --git a/src/components/TheFooter.vue b/src/components/TheFooter.vue
index 2cb2fab..a7eeb4f 100644
--- a/src/components/TheFooter.vue
+++ b/src/components/TheFooter.vue
@@ -1,4 +1,5 @@
 <template>
+  <hr>
   <div class="badges">
     <img src="/img/church.gif" alt="church of alonzo">
     <img src="/img/gender.gif" alt="abolish gender">
@@ -7,13 +8,16 @@
 </template>
 
 <style scoped>
+hr {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
 .badges {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;
   row-gap: 1em;
-  margin-top: 2em;
   margin-bottom: 2em;
 }
 
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 9cf6f2a..b673593 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -2,9 +2,8 @@
 import Link from '../components/Link.vue'
 
 const blog  = { title: "blog", path: "/", url: "/" }
-const pics  = { title: "pics", path: "/pics", url: "/pics.html" }
+const gallery  = { title: "gallery", path: "/gallery", url: "/gallery.html" }
 const about = { title: "about", path: "/about", url: "/about.html" }
-const cv    = { title: "cv", path: "/cv", url: "/cv.html" }
 </script>
 
 <template>
@@ -18,9 +17,8 @@ const cv    = { title: "cv", path: "/cv", url: "/cv.html" }
   <hr>
   <nav><ul>
     <li><Link :to="blog"/></li>
-    <li><Link :to="pics"/></li>
+    <li><Link :to="gallery"/></li>
     <li><Link :to="about"/></li>
-    <li><Link :to="cv"/></li>
   </ul></nav>
   <hr>
 </template>
diff --git a/src/pages/about.vue b/src/pages/about.vue
index 6918651..cde0238 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -1,50 +1,139 @@
 <script setup lang="ts">
+import TheBox from '../components/TheBox.vue'
+import TheBoxGrid from '../components/TheBoxGrid.vue'
 </script>
 
 <template>
-<article>
-  <div>
-    <h2>me</h2>
-    <p>My name is Rachel Lambda Samuelsson, my pronouns are she/her. I'm an undergrad at Chalmers University of Technology, studying computer science and engineering. My interests include type theory, univalent mathematics, category theory, logic, and functional programming. If I write code it is probably in Agda, Idris, or Haskell.</p>
-
-    <h2>this site</h2>
-    <p>This site hosts my blog, a gallery of photos I've taken, and a quick informal CV.</p>
-
-    <h2>contact</h2>
-    <ul>
+<h1>about</h1>
+<hr>
+<h2>this site</h2>
+<hr>
+<TheBoxGrid templateColumns="1fr 1fr" templateColumnsMobile="1fr">
+  <TheBox :rows="2">
+  <h3>where am i?</h3>
+  <p>You've arrived at my personal website!</p>
+  <p>This site hosts my blog which covers topics such as functional programming, math, logic, system administration, or whatever else happens to capture my interest.</p>
+  <p>It additionally hosts a gallery of photos which I have taken. I currently take photos with a SONY RX100 and a Polaroid 660 AF.</p>
+  <p>This page also serves as a short CV listing my personal projects, previous work, and areas of expertise.</p>
+  </TheBox>
+  <TheBox>
+  <h3>implementation</h3>
+  <p>This website is written in typescript using vue, and compiled statically using vite-ssg. The sourcecode can be found <a href="https://githug.xyz/rachel/blog-vue">here</a>.</p>
+  </TheBox>
+  <TheBox>
+  <h3>hosting</h3>
+  <p>This website is selfhosted by me on my homeserver, which is running a setup based on declarative NixOS containers utilizing ZFS for storage. The sourcecode can be found <a href="TODO">TODO here</a>, and a blog post explaining it can be found <a href="TODO">TODO here</a>.</p>
+  </TheBox>
+</TheBoxGrid>
+<h2>me</h2>
+<hr>
+<TheBoxGrid templateColumns="1fr 1fr" templateColumnsMobile="1fr">
+  <TheBox :rows="4">
+	<h3>picture</h3>
+  <figure>
+    <img src="/img/me.jpg" alt="a picture of me">
+    <figcaption>rachel in the flesh</figcaption>
+  </figure>
+  </TheBox>
+  <TheBox>
+  <h3>who am i?</h3>
+  <p>My name is Rachel Lambda Samuelsson, my pronouns are she/her.</p>
+  <p>I'm an undergrad at Chalmers University of Technology, studying computer science.</p>
+  </TheBox>
+  <TheBox>
+  <h3>interests</h3>
+  <p>I am interested in programming, type theory, logic, system administration, and reproducible builds.</p>
+  <p>Outside of academia I enjoy casual photography, nature, video games, and music circuitry.</p>
+  </TheBox>
+  <TheBox>
+  <h3>programming languages</h3>
+  <div class="listing">
+    <span>Haskell</span>
+    <span>OCaml</span>
+    <span>Rust</span>
+    <span>TypeScript</span>
+    <span>Vue</span>
+    <span>Agda</span>
+    <span>Idris</span> 
+    <span>Shell</span> 
+    <span>C</span>
+  </div>
+  </TheBox>
+  <TheBox>
+  <h3>technologies</h3>
+  <div class="listing">
+    <span>Linux</span>
+    <span>Git</span>
+    <span>Docker</span>
+    <span>Nomad</span>
+    <span>Nix</span>
+    <span>OpenBSD</span>
+    <span>nginx</span>
+    <span>TODO ZFS</span>
+  </div>
+  </TheBox>
+  <TheBox>
+  <h3>previous work</h3>
+  <ul>
+    <li>
+      Teaching Assistant Work
+      <ul>
+        <li><a href="https://www.student.chalmers.se/sp/course?course_id=33251">Introduction To Functional Programming</a></li>
+        <li><a href="https://www.student.chalmers.se/sp/course?course_id=36133">Introduction To Functional Programming</a></li>
+        <li><a href="https://www.student.chalmers.se/sp/course?course_id=36211">Domain Specific Languages of Mathematics</a></li>
+      </ul>
+    </li>
+  </ul>
+  </TheBox>
+  <TheBox>
+  <h3>links</h3>
+  <div class="links">
+  <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>
+    <li>gitea: <a href="https://githug.xyz/rachel">githug.xyz/rachel</a></li>
+    <li>github: <a href="https://github.com/rachelmbda">github.com/rachelambda</a></li>
+  </ul>
   </div>
-
-  <figure>
-	<h2>picture</h2>
-	<img src="/img/me.jpg" alt="a picture of me">
-	<figcaption>rachel in the flesh</figcaption>
-    </figure>
-</article>
+  </TheBox>
+</TheBoxGrid>
 </template>
 
 <style scoped>
-article {
-    display: flex;
-    flex-direction: row;
-    align-items: top;
-    justify-content: center;
+h3, figcaption {
+  text-align: center;
 }
 
-@media only screen and (max-width : 850px) {
-  article {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: top;
-  }
+figure {
+  margin: 0;
+  padding: 0;
+}
 
-  figure {
-    margin: 1em 0 0 0;
-    width: 70%;
-    max-width: 70%;
-  }
+h3 {
+  margin-top: 0em;
+  margin-bottom: 1em;
+}
+
+img {
+  border-radius: 5px;
+}
+
+.listing {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  row-gap: 0.3em;
+  column-gap: 2em;
+}
+
+.links {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+li ul {
+  padding-left: 1em;
 }
 </style>
diff --git a/src/pages/cv.vue b/src/pages/cv.vue
deleted file mode 100644
index e800b69..0000000
--- a/src/pages/cv.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import TheBox from '../components/TheBox.vue'
-</script>
-
-<template>
-<article>
-  <TheBox :rows="2">
-  mjau mjau mjau
-  mjau mjau mjau
-  </TheBox>
-  <TheBox>
-  mjau mjau mjau
-  </TheBox>
-  <TheBox>
-  mjau mjau mjau
-  </TheBox>
-  <TheBox>
-  mjau mjau mjau
-  </TheBox>
-</article>
-</template>
-
-<style scoped>
-article {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1em;
-    grid-auto-flow: row dense;
-}
-</style>