feat!: switch to Nuxt, complete overhaul

app/pages/about.vue

@@ -0,0 +1,63 @@
+<!-- <template>
+  <div>
+    <BBreadcrumb :items="breadcrumbs" />
+    <BCard>
+      <h3>What is this?</h3>
+      <p>
+        This app is a quote viewing and searching app centered around the hit workplace comedy and
+        sitcom 'The Office'. I made it in order to learn Vue, API creation and a variety of
+        techniques and frameworks. Since inception, it's evolved and improved from something simple
+        to a passion project where I have poured a great deal of work into.
+      </p>
+      <h3>How does it work?</h3>
+      <p>Most of the UI is self-explanatory and designed to be easy to use.</p>
+      <ul>
+        <li>You can select episodes with the drop-down based selector on the left.</li>
+        <li>You can search for quotes with the search bar at the top left.</li>
+        <li>
+          You can browse characters by clicking the 'Characters' link at the top or by finding and
+          clicking on individual characters inside the episodes themselves.
+        </li>
+      </ul>
+      <h3>I found an error in the quotes, how can I help fix it?</h3>
+      <p>
+        Currently, this part of the application is rather difficult to explain the workings of.
+        There will be a system in place to explain how errors can be amended and taken care of, but
+        that will be explained and added later once I have time. For now, please open a new issue on
+        <a href="https://github.com/Xevion/the-office/issues/new">the github</a>.
+      </p>
+    </BCard>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BBreadcrumb } from 'bootstrap-vue-next'
+
+export default defineComponent({
+  name: 'AboutComponent',
+
+  components: {
+    BBreadcrumb,
+  },
+
+  computed: {
+    breadcrumbs() {
+      return [
+        { text: 'Home', to: { name: 'Home' } },
+        { text: 'About', active: true },
+      ]
+    },
+  },
+})
+</script>
+
+<style scoped></style> -->
+
+
+<script setup lang="ts"></script>
+<template>
+  <div>
+    <h1>About</h1>
+  </div>
+</template>