diff --git a/src/components/Project.svelte b/src/components/Project.svelte
new file mode 100644
index 0000000..01d45d2
--- /dev/null
+++ b/src/components/Project.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let project
+</script>
+
+<div>{project.title}</div>
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index d05c155..dc30f37 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -8,12 +8,10 @@
   div {
     display: flex;
     flex-direction: row;
-    overflow: hidden;
   }
 
   main {
     position: relative;
-    background-color: white;
     padding: 3em;
     margin: 0 auto;
     box-sizing: border-box;
diff --git a/src/routes/about.svelte b/src/routes/about.svelte
index 9eda717..dd8a973 100644
--- a/src/routes/about.svelte
+++ b/src/routes/about.svelte
@@ -2,6 +2,29 @@
   import SimplePage from '../components/SimplePage.svelte'
 </script>
 
+<style>
+  img {
+    position: absolute;
+    z-index: -1;
+    object-fit: contain;
+    width: 24vw;
+    height: 30vw;
+    left: 35em;
+    top: 12em;
+  }
+
+  @media (max-width: 55em) {
+    img {
+      position: initial;
+      width: 100%;
+      height: 100%;
+      object-position: right;
+      max-height: 20em;
+      margin-top: 4em;
+    }
+  }
+</style>
+
 <svelte:head>
   <title>About</title>
 </svelte:head>
@@ -19,4 +42,5 @@
     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
     sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </p>
+  <img src="/images/about.jpg" alt="decoration" />
 </SimplePage>
diff --git a/src/routes/projects.json.js b/src/routes/projects.json.js
new file mode 100644
index 0000000..5478611
--- /dev/null
+++ b/src/routes/projects.json.js
@@ -0,0 +1,25 @@
+export async function get(req, res, next) {
+  const data = [
+    {
+      name: 'Unbrew',
+      link: 'https://github.com/cupcakearmy/unbrew',
+      title: 'Manage unused dependecies for brew',
+      date: '2020',
+      body:
+        'Well... anyone that has been using brew in macOS for some time will have encountered the issue of doing a simple brew list and discovering loads of packages they have never heard of. Often this is the result of installing some packages that bring dependecies, but since brew does not uninstall them when you delete the package they came with, they will hang around for ever basically.',
+    },
+    {
+      name: 'Autorestic',
+      link: 'https://cupcakearmy.github.io/autorestic/',
+      title: 'High level backup level CLI utility for restic.',
+      date: '2019',
+      body:
+        'Autorestic is a wrapper around the amazing restic. While being amazing the restic cli can be a bit overwhelming and difficoult to manage if you have many different location that you want to backup to multiple locations. This utility is aimed at making this easier.',
+    },
+  ]
+
+  res.writeHead(200, {
+    'Content-Type': 'application/json',
+  })
+  res.end(JSON.stringify(data))
+}
diff --git a/src/routes/projects.svelte b/src/routes/projects.svelte
new file mode 100644
index 0000000..80a66a2
--- /dev/null
+++ b/src/routes/projects.svelte
@@ -0,0 +1,25 @@
+<script context="module">
+  export async function preload({ params }) {
+    const res = await this.fetch('projects.json')
+    const data = await res.json()
+    if (res.status === 200) return { data }
+    else this.error(res.status, 'Not found')
+  }
+</script>
+
+<script>
+  import SimplePage from '../components/SimplePage.svelte'
+  import Project from '../components/Project.svelte'
+
+  export let data
+</script>
+
+<svelte:head>
+  <title>Projects</title>
+</svelte:head>
+
+<SimplePage title="Projects">
+  {#each data as project}
+    <Project {project} />
+  {/each}
+</SimplePage>
diff --git a/static/global.css b/static/global.css
index be0e6bc..91417ca 100644
--- a/static/global.css
+++ b/static/global.css
@@ -3,6 +3,9 @@
 body {
   margin: 0;
   box-sizing: border-box;
+  overflow: hidden;
+
+  background-color: #ffffff;
 
   font-family: 'Jost', Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans,
     Droid Sans, Helvetica Neue, sans-serif;
diff --git a/static/images/about.jpg b/static/images/about.jpg
new file mode 100644
index 0000000..369186c
Binary files /dev/null and b/static/images/about.jpg differ