Built skeleton for the web site.

Need to write the text and make the quiz console.
2022-08-28 07:07:52 +01:00
parent d15a4efbc8
commit fd1c4ee14d
27 changed files with 737 additions and 59 deletions
--- a/client/index.html
+++ b/client/index.html
@@ -4,10 +4,10 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wanderhome Personality Quiz | V.S.</title>
+    <title>Wanderhome Quiz | V.S.</title>
  </head>
-  <body class="bg-green-100 h-screen">
-    <div class="bg-green-100" id="app"></div>
+  <body class="bg-lime-100 h-screen">
+    <div class="bg-lime-100" id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -14,6 +14,7 @@
        "vue-router": "^4.1.4"
      },
      "devDependencies": {
+        "@tailwindcss/typography": "^0.5.4",
        "@vitejs/plugin-vue": "^3.0.3",
        "autoprefixer": "^10.4.8",
        "postcss": "^8.4.16",
@@ -93,6 +94,20 @@
        "node": ">= 8"
      }
    },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.4.tgz",
+      "integrity": "sha512-QEdg40EmGvE7kKoDei8zr5sf4D1pIayHj4R31bH3lX8x2BtTiR+jNejYPOkhbmy3DXgkMF9jC8xqNiGFAuL9Sg==",
+      "dev": true,
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
    "node_modules/@vitejs/plugin-vue": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.0.3.tgz",
@@ -1013,6 +1028,24 @@
        "node": ">=10"
      }
    },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
    "node_modules/magic-string": {
      "version": "0.25.9",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -1621,6 +1654,17 @@
        "fastq": "^1.6.0"
      }
    },
+    "@tailwindcss/typography": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.4.tgz",
+      "integrity": "sha512-QEdg40EmGvE7kKoDei8zr5sf4D1pIayHj4R31bH3lX8x2BtTiR+jNejYPOkhbmy3DXgkMF9jC8xqNiGFAuL9Sg==",
+      "dev": true,
+      "requires": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2"
+      }
+    },
    "@vitejs/plugin-vue": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.0.3.tgz",
@@ -2207,6 +2251,24 @@
      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
      "dev": true
    },
+    "lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
    "magic-string": {
      "version": "0.25.9",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
--- a/client/package.json
+++ b/client/package.json
@@ -15,6 +15,7 @@
    "vue-router": "^4.1.4"
  },
  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.4",
    "@vitejs/plugin-vue": "^3.0.3",
    "autoprefixer": "^10.4.8",
    "postcss": "^8.4.16",
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,16 +1,22 @@
 <script setup>
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import Navbar from '@/components/Navbar.vue'
+import Navbar from '@/components/navbar/Index.vue'
 </script>

 <template>
  <Navbar />
-  <div class="container p-3 max-w-5xl mx-auto">
-    <router-view></router-view>
+  <div class="container px-3 py-20 max-w-5xl mx-auto overflow-hidden">
+    <router-view v-slot="{ Component, route }" ref="main">
+      <transition mode="out-in"
+        :enter-active-class="route.meta.mainEnterActiveClass"
+        :enter-from-class="route.meta.mainEnterFromClass"
+        :leave-active-class="route.meta.mainLeaveActiveClass"
+        :leave-to-class="route.meta.mainLeaveToClass"
+      >
+        <component :is="Component" />
+      </transition>
+    </router-view>
  </div>
 </template>

 <style scoped>
-
 </style>
--- a/client/src/components/Content.vue
+++ b/client/src/components/Content.vue
@@ -0,0 +1,19 @@
+<script>
+    export default {
+        props: ['contentTitle']
+    }
+</script>
+<template>
+    <div class="max-w-2xl mx-auto bg-lime-50 p-3 rounded-xl">
+        <h1 class="text-4xl text-center pb-1 border-b-2 border-solid border-lime-600 mb-6 uncial-antiqua">
+            <slot name="header"></slot>
+        </h1>
+        <div>
+            <slot name="content">
+                <p>Where will the text go?</p>
+            </slot>
+        </div>
+    </div>
+</template>
+<style>
+</style>
--- a/client/src/components/Navbar.vue
+++ b/client/src/components/Navbar.vue
@@ -1,17 +0,0 @@
-<template>
-    <nav class="relative bg-lime-900 text-white">
-        <div class="flex max-w-5xl mx-auto items-center justify-between">
-            <!-- Logo -->
-            <div class="inline-flex justify-center items-center">
-                <img src="@/assets/vue.svg" class="p-2" alt="Vite Logo" >
-                <router-link to="/"><span class="text-m md:text-lg h-fit align-middle p-1"><em>Wanderhome</em> Personality Quiz | V.S.</span></router-link>
-            </div>
-            <!-- Menu Items -->
-            <div class="hidden md:flex space-x-3 justify-center items-center">
-                <router-link class="hover:text-orange-500 active:text-blue-500 p-3 h-fit align-middle" to="/">Home</router-link>
-                <router-link class="hover:text-orange-500 active:text-blue-500 p-3 h-fit align-middle" to="/quiz">Take the Quiz</router-link>
-                <router-link class="hover:text-orange-500 active:text-blue-500 p-3 h-fit align-middle" to="/about">About</router-link>
-            </div>
-        </div>
-    </nav>
-</template>
--- a/client/src/components/icons/AccountQuestion.vue
+++ b/client/src/components/icons/AccountQuestion.vue
@@ -0,0 +1,23 @@
+<template>
+  <svg-icon type="mdi" :path="path"></svg-icon>
+</template>
+
+
+<script>
+import SvgIcon from '@jamescoyle/vue-icon'
+import { mdiAccountQuestion } from '@mdi/js'
+
+export default {
+    name: "MdiAccountQuestion",
+
+    components: {
+        SvgIcon
+    },
+
+    data() {
+        return {
+            path: mdiAccountQuestion,
+        }
+    }
+}
+</script>
--- a/client/src/components/icons/Home.vue
+++ b/client/src/components/icons/Home.vue
@@ -0,0 +1,23 @@
+<template>
+  <svg-icon type="mdi" :path="path"></svg-icon>
+</template>
+
+
+<script>
+import SvgIcon from '@jamescoyle/vue-icon'
+import { mdiHome } from '@mdi/js'
+
+export default {
+    name: "MdiHome",
+
+    components: {
+        SvgIcon
+    },
+
+    data() {
+        return {
+            path: mdiHome,
+        }
+    }
+}
+</script>
--- a/client/src/components/icons/Information.vue
+++ b/client/src/components/icons/Information.vue
@@ -0,0 +1,23 @@
+<template>
+  <svg-icon type="mdi" :path="path"></svg-icon>
+</template>
+
+
+<script>
+import SvgIcon from '@jamescoyle/vue-icon'
+import { mdiInformation } from '@mdi/js'
+
+export default {
+    name: "MdiInformation",
+
+    components: {
+        SvgIcon
+    },
+
+    data() {
+        return {
+            path: mdiInformation,
+        }
+    }
+}
+</script>
--- a/client/src/components/icons/Menu.vue
+++ b/client/src/components/icons/Menu.vue
@@ -8,7 +8,7 @@ import SvgIcon from '@jamescoyle/vue-icon'
 import { mdiMenu } from '@mdi/js'

 export default {
-    name: "menu",
+    name: "MdiMenu",

    components: {
        SvgIcon
@@ -16,7 +16,7 @@ export default {

    data() {
        return {
-            path: mdiMenu,
+            path: mdiMenu
        }
    }
 }
--- a/client/src/components/navbar/Index.vue
+++ b/client/src/components/navbar/Index.vue
@@ -0,0 +1,38 @@
+<script>
+    import { mdiAccountQuestion, mdiHome, mdiInformation } from '@mdi/js'
+    import mdiMenu from '@/components/icons/Menu.vue'
+    import Navlink from '@/components/navbar/Navlink.vue'
+    export default {
+        name: 'Navbar',
+        components: {
+            mdiMenu,
+            Navlink
+        }
+    }
+
+</script>
+<template>
+    <nav class="fixed bg-lime-900 text-white shadow-xl w-full">
+        <div class="flex relative px-2 max-w-5xl mx-auto items-center justify-between">
+            <!-- Logo -->
+            <div class="inline-flex justify-center items-center">
+                <img src="@/assets/vue.svg" class="p-2" alt="Vite Logo" >
+                <router-link class-active="" class="transition-all ease-in-out duration-500 hover:text-orange-300 active:text-orange-500" to="/"><span class="text-m md:text-lg h-fit align-middle p-1"><span class="uncial-antiqua">Wanderhome</span> Quiz | V.S.</span></router-link>
+            </div>
+            <!-- Menu Items -->
+            <div class="hidden md:flex space-x-3 justify-center items-center">
+                <Navlink :svgPath="route.meta.svgPath" :text="route.meta.title" :to="route.path" v-for="route in $router.options.routes" :key="route.path" />
+            </div>
+        <button id="menu-btn" class="block md:hidden focus:outline-none">
+            <mdiMenu />
+        </button>
+        </div>
+        <div class="hidden md:hidden">
+            <div id="menu" class="absolute flex flex-col self-end font-bold sm:w-auto drop-shadow-md">
+                <Navlink :svgPath="route.meta.svgPath" :text="route.meta.title" :to="route.path" v-for="route in $router.options.routes" :key="route.path" />
+            </div>
+        </div>
+    </nav>
+</template>
+<style scoped>
+</style>
--- a/client/src/components/navbar/MobileLink.vue
+++ b/client/src/components/navbar/MobileLink.vue
@@ -0,0 +1,56 @@
+<script>
+import SvgIcon from '@jamescoyle/vue-icon'
+
+export default {
+    name: "MobileLink",
+    components: {
+        SvgIcon
+    },
+    props: [
+        "path",
+        "text",
+        "to"
+    ]
+}
+</script>
+<template>
+    <a :href="to" class="navlink" target="_blank" rel="noopener noreferrer" v-if="to.startsWith('http')">
+        <div class="inline-flex px-3 py-1">
+            <span class="scale-75">
+                <svg-icon type="mdi" :path="path"></svg-icon>
+            </span>
+            <span>{{ text }}</span>
+        </div>
+    </a>
+    <div class="relative flex" v-else>
+        <div class="relative flex">
+            <router-link active-class="active-link" class="navlink" :to="to">
+                <div class="inline-flex px-3 py-1">
+                    <span class="scale-75">
+                        <svg-icon type="mdi" :path="path"></svg-icon>
+                    </span>
+                    <span>{{ text }}</span>
+                </div>
+            </router-link>
+        </div>
+    </div>
+</template>
+<style>
+    .navlink.active-link, .navlink.exact-active-link {
+        @apply bg-orange-500;
+        @apply text-white;
+        @apply hover:bg-orange-600;
+        @apply hover:text-white;
+    }
+    .navlink {
+        @apply hover:text-orange-300;
+        @apply bg-lime-800;
+        @apply active:text-orange-500;
+        @apply rounded-lg;
+        @apply h-fit;
+        @apply align-middle;
+        @apply transition-all;
+        @apply ease-in-out;
+        @apply duration-500;
+    }
+</style>
--- a/client/src/components/navbar/Navlink.vue
+++ b/client/src/components/navbar/Navlink.vue
@@ -0,0 +1,59 @@
+<script>
+import SvgIcon from '@jamescoyle/vue-icon'
+
+export default {
+    name: "Navlink",
+    components: {
+        SvgIcon
+    },
+    props: [
+        "svgPath",
+        "text",
+        "to"
+    ]
+}
+</script>
+
+<template>
+    <a :href="to" class="navlink" target="_blank" rel="noopener noreferrer" v-if="to.startsWith('http')">
+        <div class="inline-flex px-3 py-1 space-x-1">
+            <span class="scale-75">
+                <svg-icon type="mdi" :path="svgPath"></svg-icon>
+            </span>
+            <span>{{ text }}</span>
+        </div>
+    </a>
+    <div class="relative flex" v-else>
+        <div class="relative flex">
+            <router-link active-class="active-link" class="navlink" :to="to">
+                <div class="inline-flex px-3 py-1 space-x-1">
+                    <span class="scale-75">
+                        <svg-icon type="mdi" :path="svgPath"></svg-icon>
+                    </span>
+                    <span>{{ text }}</span>
+                </div>
+            </router-link>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .navlink.active-link, .navlink.exact-active-link {
+        @apply bg-amber-600;
+        @apply text-white;
+        @apply hover:bg-orange-500;
+        @apply hover:text-white;
+    }
+    .navlink {
+        @apply hover:text-orange-300;
+        @apply hover:bg-lime-700;
+        @apply bg-lime-800;
+        @apply active:text-orange-500;
+        @apply rounded-lg;
+        @apply h-fit;
+        @apply align-middle;
+        @apply transition-all;
+        @apply ease-in-out;
+        @apply duration-1000;
+    }
+</style>
--- a/client/src/components/sidebar/Index.vue
+++ b/client/src/components/sidebar/Index.vue
@@ -0,0 +1,26 @@
+<script>
+    import Navlink from '@/components/sidebar/Navlink.vue'
+    
+    export default {
+        name: 'Sidebar',
+        components: {
+            Navlink
+        },
+        props: [
+            'prefix',
+            'routes'
+        ]
+    }
+</script>
+<template>
+    <div class="flex flex-col bg-lime-50 px-3 py-5 rounded-xl">
+        <h1 class="text-xl my-2 border-b-2 border-lime-600 border-solid text-center uncial-antiqua md:text-left">
+            <slot name="header"></slot>
+        </h1>
+        <div class="flex flex-col text-md">
+            <Navlink :svgPath="route.meta.svgPath" :text="route.meta.title" :prefix="prefix" :to="route.path" v-for="route in routes" :key="route.path" />
+        </div>
+    </div>
+</template>
+<style>
+</style>
--- a/client/src/components/sidebar/Navlink.vue
+++ b/client/src/components/sidebar/Navlink.vue
@@ -0,0 +1,52 @@
+<script>
+import SvgIcon from '@jamescoyle/vue-icon'
+export default {
+    name: 'SideLink',
+    components: {
+        SvgIcon
+    },
+    props: [
+        'prefix',
+        'svgPath',
+        'text',
+        'to'
+    ]
+}
+</script>
+<template>
+    <a :href="to" class="navlink" target="_blank" rel="noopener noreferrer" v-if="to.startsWith('http')">
+        <div class="inline-flex px-2 py-1 items-center space-x-1">
+            <span class="scale-75">
+                <svg-icon type="mdi" :path="svgPath"></svg-icon>
+            </span>
+            <span>{{ text }}</span>
+        </div>
+    </a>
+    <router-link exact-active-class="active-link" class="navlink" :to="prefix + '/' + to" v-else>
+        <div class="inline-flex px-2 py-1 items-center space-x-1">
+            <span class="scale-75">
+                <svg-icon type="mdi" :path="svgPath"></svg-icon>
+            </span>
+            <span>{{ text }}</span>
+        </div>
+    </router-link>
+</template>
+<style scoped>
+    .navlink.active-link, .navlink.exact-active-link {
+        @apply border-l-2;
+        @apply border-solid;
+        @apply border-lime-600;
+        @apply drop-shadow-md;
+    }
+    .navlink {
+        font-family: UncialAntiqua;
+        @apply hover:text-orange-600;
+        @apply hover:drop-shadow-lg;
+        @apply active:text-orange-800;
+        @apply h-fit;
+        @apply align-middle;
+        @apply transition-all;
+        @apply ease-in-out;
+        @apply duration-500;
+    }
+</style>
--- a/client/src/fonts/UncialAntiqua-Regular.ttf
+++ b/client/src/fonts/UncialAntiqua-Regular.ttf
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
 import '@/style.css'
 import App from '@/App.vue'
-import router from '@/router'
-createApp(App).use(router).mount('#app')
+import Router from '@/router'
+const app = createApp(App)
+app.use(Router)
+app.mount('#app')
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -1,30 +1,127 @@
 import { createRouter, createWebHistory } from 'vue-router'
-
+import { mdiAccountGroupOutline, mdiAccountQuestion, mdiCodeTags, mdiHandCoin, mdiHome, mdiInformation } from '@mdi/js'
+import About from '@/views/about/Index.vue'
+import AboutPage from '@/views/about/About.vue'
+import Acknowledgements from '@/views/about/Acknowledgements.vue'
+import Wanderhome from '@/views/about/Wanderhome.vue'
 import Home from '@/views/Home.vue'
-import About from '@/views/About.vue'
 import Quiz from '@/views/Quiz.vue'

 const routes = [
    {
        path: '/',
        name: 'Home',
-        component: Home
-    },
-    {
-        path: '/about',
-        name: 'About',
-        component: About
+        component: Home,
+        meta: {
+            index: 0,
+            svgPath: mdiHome,
+            title: 'Home'
+        }
    },
    {
        path: '/quiz',
        name: 'Quiz',
-        component: Quiz
+        component: Quiz,
+        meta: {
+            index: 1,
+            svgPath: mdiAccountQuestion,
+            title: 'Take the Quiz'
+        }
+    },
+    {
+        path: '/about',
+        name: 'About',
+        component: About,
+        meta: {
+            index: 2,
+            svgPath: mdiInformation,
+            title: 'About'
+        },
+        children: [
+            {
+                path: '',
+                name: 'About',
+                component: AboutPage,
+                meta: {
+                    index: 0,
+                    parentIndex: 2,
+                    svgPath: mdiInformation,
+                    title: 'Background'
+                }
+            },
+            {
+                path: 'wanderhome',
+                name: 'Wanderhome',
+                component: Wanderhome,
+                meta: {
+                    index: 1,
+                    parentIndex: 2,
+                    svgPath: mdiHandCoin,
+                    title: 'About Wanderhome'
+                }
+            },
+            {
+                path: 'acknowledgements',
+                name: 'Acknowledgements',
+                component: Acknowledgements,
+                meta: {
+                    index: 2,
+                    parentIndex: 2,
+                    svgPath: mdiAccountGroupOutline,
+                    title: 'Acknowledgements'
+                }
+            },
+            {
+                path: 'https://git.vsnt.uk/',
+                name: 'SourceCode',
+                meta: {
+                    index: 3,
+                    parentIndex: 2,
+                    svgPath: mdiCodeTags,
+                    title: 'View Source Code'
+                }
+            }
+        ]
    }
 ]

-const router = createRouter({
+const Router = createRouter({
    history: createWebHistory(),
    routes
 })

-export default router
+Router.beforeEach((to, from, next) => {
+    if (to.meta.title != 'Home') {
+        document.title = `Wanderhome Quiz | V.S. - ${to.meta.title}`
+    } else {
+        document.title = `Wanderhome Quiz | V.S.`
+    }
+    next()
+})
+
+Router.afterEach( (to, from) => {
+    const enterActiveClass = 'transition-all duration-300 ease-in'
+    const leaveActiveClass = 'transition-all duration-300 ease-out'
+    const baseFromClass = 'transform opacity-0 scale-75'
+    if ( to.fullPath.split('/')[1] !== from.fullPath.split('/')[1] || !from.matched.length ) {
+        const fromIndex = from.meta.parentIndex ? from.meta.parentIndex : from.meta.index
+        const toIndex = to.meta.parentIndex ? to.meta.parentIndex : to.meta.index
+        const slideInDirection = toIndex < fromIndex ? '-translate-x-1/3' : 'translate-x-1/3'
+        const slideOutDirection = toIndex < fromIndex ? 'translate-x-1/3' : '-translate-x-1/3'
+        to.meta.mainEnterActiveClass = enterActiveClass
+        to.meta.mainLeaveActiveClass = leaveActiveClass
+        to.meta.mainEnterFromClass = baseFromClass + ' ' + slideInDirection
+        to.meta.mainLeaveToClass = baseFromClass + ' ' + slideOutDirection
+    } else if ( to.fullPath.split('/')[1] == from.fullPath.split('/')[1] && from.matched.length ) {
+        const fromIndex = from.meta.index
+        const toIndex = to.meta.index
+        const slideInDirection = toIndex < fromIndex ? '-translate-y-1/3' : 'translate-y-1/3'
+        const slideOutDirection = toIndex < fromIndex ? 'translate-y-1/3' : '-translate-y-1/3'
+        to.meta.panelEnterActiveClass = enterActiveClass
+        to.meta.panelLeaveActiveClass = leaveActiveClass
+        to.meta.panelEnterFromClass = baseFromClass + ' ' + slideInDirection
+        to.meta.panelLeaveToClass = baseFromClass + ' ' + slideOutDirection
+    }
+})
+
+export default Router
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -1,3 +1,28 @@
@tailwind base;
@tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@font-face {
+    font-family: UncialAntiqua;
+    src: local("Uncial Antiqua"),url("./fonts/UncialAntiqua-Regular.ttf");
+}
+
+.uncial-antiqua {
+    font-family: 'UncialAntiqua';
+}
+
+.text-leader {
+    @apply text-lg;
+    @apply font-light;
+    @apply leading-relaxed;
+    @apply mt-6;
+    @apply mb-4;
+    @apply text-orange-900;
+}
+
+p {
+    @apply text-base;
+    @apply leading-relaxed;
+    @apply mt-4;
+    @apply mb-4;
+}
--- a/client/src/views/About.vue
+++ b/client/src/views/About.vue
@@ -1,7 +0,0 @@
-<template>
-
-    <div class="home">
-        <h1>About</h1>
-    </div>
-
-</template>
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -1,7 +1,47 @@
+<script>
+    import Content from '@/components/Content.vue'
+    import AccountQuestion from '@/components/icons/AccountQuestion.vue'
+    export default {
+        components: {
+            AccountQuestion,
+            Content
+        }
+    }
+</script>
 <template>
-
-    <div class="home">
-        <h1>Home</h1>
-    </div>
-
+    <Content>
+        <template v-slot:header>
+            home
+        </template>
+        <template v-slot:content>
+            <article class="prose mx-auto">
+                <p class="text-leader">
+                    The road ahead is long and meandering.
+                    But the journey shapes us as much as we shape it.
+                </p>
+                <p>
+                    <em class="uncial-antiqua">Wanderhome</em> by Jay Dragon, published by Possum Creek Games, is a pastoral fantasy table-top role-playing game about anthropomorphic animals journeying across a vast landscape, and what they discover about themselves and the world they inhabit along the way.
+                </p>
+                <p>
+                    This quiz will help determine what playbook, or character archetype, you are.
+                    You can take the quiz by clicking on the following link:
+                </p>
+                <div class="w-fit mx-auto">
+                    <router-link active-class="active-link" class="navlink" to="/quiz">
+                        <div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-lime-800 text-white hover:bg-lime-600">
+                            <span class="scale-75">
+                                <AccountQuestion/>
+                            </span>
+                            <span>Take the Quiz</span>
+                        </div>
+                    </router-link>
+                </div>
+                <p class="text-sm">
+                    This quiz is not affiliated with, endorsed by, or in any way connected to Possum Creek Games.
+                    It is a fan project and a programming exercise by someone who loves Jay&rsquo;s game.
+                    I would nevertheless implore you to play <em>Wanderhome</em> if you haven&rsquo;t already.
+                </p>
+            </article>
+        </template>
+    </Content>
 </template>
--- a/client/src/views/Quiz.vue
+++ b/client/src/views/Quiz.vue
@@ -1,7 +1,20 @@
+<script>
+    import Content from '@/components/Content.vue'
+    export default {
+        components: {
+            Content
+        }
+    }
+</script>
 <template>
-
-    <div class="quiz">
-        <h1>Quiz</h1>
+    <div>
+        <Content>
+            <template v-slot:header>
+                Take the Quiz
+            </template>
+            <template v-slot:content>
+                This is the Quiz Console
+            </template>
+        </Content>
    </div>
-
 </template>
--- a/client/src/views/about/About.vue
+++ b/client/src/views/about/About.vue
@@ -0,0 +1,46 @@
+<script>
+    import Content from '@/components/Content.vue'
+    export default {
+        components: {
+            Content
+        }
+    }
+</script>
+<template>
+    <div >
+        <Content>
+            <template v-slot:header>
+                Background
+            </template>
+            <template v-slot:content>
+                <article class="prose mx-auto">
+                    <h2>Why I Made This</h2>
+                    <p>
+                        Teaching myself programming.
+                    </p>
+                    <h2>
+                        Technical shite
+                    </h2>
+                </article>
+            </template>
+        </Content>
+    </div>
+</template>
+<style scoped>
+    .navlink.active-link, .navlink.exact-active-link {
+        @apply bg-orange-500;
+        @apply text-white;
+        @apply hover:bg-orange-600;
+        @apply hover:text-white;
+    }
+    .navlink {
+        @apply hover:text-orange-300;
+        @apply active:text-orange-500;
+        @apply rounded-lg;
+        @apply h-fit;
+        @apply align-middle;
+        @apply transition-all;
+        @apply ease-in-out;
+        @apply duration-500;
+    }
+</style>
--- a/client/src/views/about/Acknowledgements.vue
+++ b/client/src/views/about/Acknowledgements.vue
@@ -0,0 +1,30 @@
+<script>
+    import Content from '@/components/Content.vue'
+    export default {
+        components: {
+            Content
+        }
+    }
+</script>
+<template>
+    <div>
+        <Content>
+            <template v-slot:header>
+                Acknowledgements
+            </template>
+            <template v-slot:content>
+                <article class="prose mx-auto">
+                    <p>
+                        First and foremost, my thanks to Jay Dragon and Possum Creek Games for creating such a magnificent work of art.
+                    </p>
+                    <p>
+                        I would also like to thank 8bit for his inspiring enthusiasm: I would have arrived at this game a whole lot later if it weren&rsquo; for his shilling for it.
+                    </p>
+                    <p>
+                        And I am deeply grateful to my friends along the way: Claire Bath for being the first playtester of the quiz, and 
+                    </p>
+                </article>
+            </template>
+        </Content>
+    </div>
+</template>
--- a/client/src/views/about/Index.vue
+++ b/client/src/views/about/Index.vue
@@ -0,0 +1,35 @@
+<script>
+    import Content from '@/components/Content.vue'
+    import Sidebar from '@/components/sidebar/Index.vue'
+    export default {
+        components: {
+            Content,
+            Sidebar
+        }
+    }
+</script>
+<template>
+    <div>
+        <div class="flex flex-col md:flex-row space-x-6">
+            <div class="flex flex-col w-full md:w-1/3 h-fit">
+                <Sidebar :prefix="$router.options.routes[2].path" :routes="$router.options.routes[2].children">
+                    <template v-slot:header>
+                        About
+                    </template>
+                </Sidebar>
+            </div>
+            <div class="flex w-full md:w-2/3">
+                <router-view v-slot="{ Component, route }" class="w-full" ref="panel" appear>
+                    <Transition mode="out-in"
+                        :enter-active-class="route.meta.panelEnterActiveClass"
+                        :enter-from-class="route.meta.panelEnterFromClass"
+                        :leave-active-class="route.meta.panelLeaveActiveClass"
+                        :leave-to-class="route.meta.panelLeaveToClass"
+                    >
+                        <component :is="Component" />
+                    </Transition>    
+                </router-view>
+            </div>
+        </div>
+    </div>
+</template>
--- a/client/src/views/about/Wanderhome.vue
+++ b/client/src/views/about/Wanderhome.vue
@@ -0,0 +1,24 @@
+<script>
+    import Content from '@/components/Content.vue'
+    export default {
+        components: {
+            Content
+        }
+    }
+</script>
+<template>
+    <div>
+        <Content>
+            <template v-slot:header>
+                About <em>Wanderhome</em>
+            </template>
+            <template v-slot:content>
+                <article class="prose mx-auto">
+                    <p>
+                        <em class="uncial-antiqua">Wanderhome</em> is a pastoral fantasy table-top role-playing game by Jay Dragon, published by Possum Creek Games.
+                    </p>
+                </article>
+            </template>
+        </Content>
+    </div>
+</template>
--- a/client/tailwind.config.cjs
+++ b/client/tailwind.config.cjs
@@ -13,5 +13,7 @@ module.exports = {
    },
    extend: {},
  },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
 }