refactor: ♻️ split up App.vue into separate components

src/components/Footer.vue

@@ -0,0 +1,63 @@
+<template>
+  <footer class="footer">
+    <div class="footer__copyright">
+      © {{ new Date().getFullYear() }} Sebin Nyshkim
+    </div>
+    <ul class="footer__linklist">
+      <li class="footer__linkitem" v-for="(link, idx) in links" :key="idx">
+        <a :href="link.href" class="footer__link">
+          {{ link.text }}
+        </a>
+      </li>
+    </ul>
+  </footer>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      links: [
+        { href: "https://twitter.com/SebinNyshkim", text: "Twitter" },
+        { href: "https://t.me/SebinNyshkim", text: "Telegram" },
+        {
+          href: "https://www.furaffinity.net/user/sonofdragons",
+          text: "Fur Affinity"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@scss/_variables.scss";
+
+.footer {
+  background-color: $bg-color-light;
+  padding: 0.5em 0;
+  text-align: center;
+
+  &__copyright {
+    margin: 0;
+  }
+
+  &__linklist {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+  }
+
+  &__linkitem {
+  }
+
+  &__link {
+    color: $copy-color;
+    padding: 0.5em 0.75em;
+  }
+}
+</style>