test routes

src/components/Project.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let project
+</script>
+
+<div>{project.title}</div>

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;

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>

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))
+}

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>

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;