Added about page.

frontend/src/router.js

@@ -9,6 +9,7 @@ const NewTutor = () => import("./views/NewTutor.vue");
 const ViewObservations = () => import("./views/ViewObservations.vue");
 const ObservationComplete = () => import("./views/ObservationComplete.vue");
 const DBError = () => import("./views/DatabaseUnavailable.vue");
+const About = () => import("./views/About.vue");
 
 Vue.use(Router);
 
@@ -58,6 +59,11 @@ export default new Router({
       path: "/dberror",
       name: "dberror",
       component: DBError
+    },
+    {
+      path: "/about",
+      name: "about",
+      component: About
     }
   ]
 });

frontend/src/views/About.vue

@@ -0,0 +1,148 @@
+<template>
+    <b-container>
+        <b-row>
+            <b-col>
+                <h1 class="display-4 focus-in-expand-fwd">Training Observations Database</h1>
+            </b-col>
+        </b-row>
+        <br/>
+        <b-row>
+            <b-col>
+                <v-icon name="crown" scale="2" class="mb-3 jello-horizontal"></v-icon><p class="lead">Created by Nathan Cannon <a href="mailto:nathan.cannon@edf-energy.com"><v-icon name="envelope"></v-icon></a></p>
+            </b-col>
+        </b-row>
+        <b-row>
+            <b-col>
+                <v-icon name="power-off" scale="2" class="mb-3 jello-horizontal"></v-icon><p class="lead">Powered by Spring Boot and Vue.js</p>
+            </b-col>
+        </b-row>
+    </b-container>
+</template>
+
+<script>
+import "vue-awesome/icons/envelope";
+import "vue-awesome/icons/crown";
+import "vue-awesome/icons/power-off";
+export default {
+  name: "About"
+};
+</script>
+
+<style scoped>
+.fa-icon {
+  width: auto;
+  height: 1em; /* or any other relative font sizes */
+
+  /* You would have to include the following two lines to make this work in Safari */
+  max-width: 100%;
+  max-height: 100%;
+}
+.jello-horizontal {
+    -webkit-animation: jello-horizontal 0.9s both;
+    animation: jello-horizontal 0.9s both;
+}
+.focus-in-expand-fwd {
+    -webkit-animation: focus-in-expand-fwd 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+    animation: focus-in-expand-fwd 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+/* ----------------------------------------------
+ * Generated by Animista on 2018-10-11
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+@-webkit-keyframes jello-horizontal {
+    0% {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+    30% {
+        -webkit-transform: scale3d(1.25, 0.75, 1);
+        transform: scale3d(1.25, 0.75, 1);
+    }
+    40% {
+        -webkit-transform: scale3d(0.75, 1.25, 1);
+        transform: scale3d(0.75, 1.25, 1);
+    }
+    50% {
+        -webkit-transform: scale3d(1.15, 0.85, 1);
+        transform: scale3d(1.15, 0.85, 1);
+    }
+    65% {
+        -webkit-transform: scale3d(0.95, 1.05, 1);
+        transform: scale3d(0.95, 1.05, 1);
+    }
+    75% {
+        -webkit-transform: scale3d(1.05, 0.95, 1);
+        transform: scale3d(1.05, 0.95, 1);
+    }
+    100% {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+}
+@keyframes jello-horizontal {
+    0% {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+    30% {
+        -webkit-transform: scale3d(1.25, 0.75, 1);
+        transform: scale3d(1.25, 0.75, 1);
+    }
+    40% {
+        -webkit-transform: scale3d(0.75, 1.25, 1);
+        transform: scale3d(0.75, 1.25, 1);
+    }
+    50% {
+        -webkit-transform: scale3d(1.15, 0.85, 1);
+        transform: scale3d(1.15, 0.85, 1);
+    }
+    65% {
+        -webkit-transform: scale3d(0.95, 1.05, 1);
+        transform: scale3d(0.95, 1.05, 1);
+    }
+    75% {
+        -webkit-transform: scale3d(1.05, 0.95, 1);
+        transform: scale3d(1.05, 0.95, 1);
+    }
+    100% {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+}
+@-webkit-keyframes focus-in-expand-fwd {
+    0% {
+        letter-spacing: -0.5em;
+        -webkit-transform: translateZ(-800px);
+        transform: translateZ(-800px);
+        -webkit-filter: blur(12px);
+        filter: blur(12px);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        -webkit-filter: blur(0);
+        filter: blur(0);
+        opacity: 1;
+    }
+}
+@keyframes focus-in-expand-fwd {
+    0% {
+        letter-spacing: -0.5em;
+        -webkit-transform: translateZ(-800px);
+        transform: translateZ(-800px);
+        -webkit-filter: blur(12px);
+        filter: blur(12px);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        -webkit-filter: blur(0);
+        filter: blur(0);
+        opacity: 1;
+    }
+}
+
+
+</style>

frontend/src/views/Home.vue

@@ -2,7 +2,7 @@
     <b-container>
         <b-row>
             <b-col>
-                <h1 class="tracking-in-expand-fwd">Training Observations Database</h1>
+                <h1 class="tracking-in-expand-fwd display-4">Training Observations Database</h1>
             </b-col>
         </b-row>
         <b-row class="my-3" align-h="center">