add logo and links to social networks

components/Logo.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="full-width">
+    <transition name="slide-vertical" mode="out-in">
+      <div class="logo" :key="debouncedLogoText">
+        <span class="text">{{ debouncedLogoText }}</span>
+        <div class="underline full-width"></div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+  import { mapState } from "vuex";
+  import _debounce from "lodash.debounce";
+
+  const debounceLogoText = _debounce((self, newValue) => {
+    self.debouncedLogoText = newValue;
+  }, 100);
+
+  export default {
+    name: "Logo",
+    created() {
+      this.debouncedLogoText = this.$store.state.logoText;
+    },
+    data() {
+      return {
+        debouncedLogoText: ""
+      }
+    },
+    computed: {
+      ...mapState(["logoText"])
+    },
+    watch: {
+      logoText(newValue) {
+        debounceLogoText(this, newValue);
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  @import "~@/assets/_mq.scss";
+
+  .slide-vertical-enter-active {
+    transition: all 0.5s ease-out;
+  }
+
+  .slide-vertical-leave-active {
+    transition: all 0.5s ease-in;
+  }
+
+  .slide-vertical-enter-to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  .slide-vertical-enter {
+    transform: translateY(-100px);
+    opacity: 0;
+  }
+
+  .slide-vertical-leave-to {
+    transform: translateY(100px);
+    opacity: 0;
+  }
+
+  .logo {
+    margin: 0 auto;
+    width: fit-content;
+
+    & > .text {
+      font-family: 'Montserrat Alternates', sans-serif;
+
+      font-size: 5em;
+
+      color: #c34545;
+      text-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
+
+      @include mq($from: tablet) {
+        font-size: 12em;
+      }
+    }
+
+    & > .underline {
+      transition: width 1s ease-in-out;
+
+      transform: translateY(-0.7em);
+
+      height: 3px;
+
+      background: white;
+      box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.75);
+
+      @include mq($from: tablet) {
+        transform: translateY(-2em);
+
+        height: 5px;
+      }
+    }
+  }
+</style>

components/README.md

@@ -0,0 +1,7 @@
+# COMPONENTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+The components directory contains your Vue.js Components.
+
+_Nuxt.js doesn't supercharge these components._

components/SocialIcon.vue

@@ -0,0 +1,98 @@
+<template>
+  <a id="root" rel="noopener" :href="to" target="_blank"
+     @mouseenter="$store.commit('setLogoText', username)"
+     @mouseleave="$store.commit('resetLogoText', username)"
+  >
+    <div class="box" :style="{'background-color': '#' + simpleIcon.hex}">
+      <div class="icon" v-html="simpleIcon.svg" :class="{inverted: invert}">
+      </div>
+    </div>
+    <span class="title">{{ simpleIcon.title }}</span>
+  </a>
+</template>
+
+<script>
+  export default {
+    name: "SocialIcon",
+    props: {
+      icon: String,
+      to: String,
+      username: String,
+      invert: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        simpleIcon: require(`simple-icons/icons/${this.icon}`)
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  @import "~@/assets/_mq";
+
+  #root {
+    display: inline-block;
+
+    margin: 5px;
+    text-decoration: none;
+    height: 50px;
+    width: 50px;
+
+    @include mq($from: tablet) {
+      height: 70px;
+      width: 70px;
+    }
+
+    .box {
+      border-radius: 50px;
+      padding: 10px;
+      height: 100%;
+      width: 100%;
+
+      transition: 0.5s ease-out;
+      transform: scale(1);
+
+      .icon {
+        height: 100%;
+        width: auto;
+
+        // Hide tooltips
+        pointer-events: none;
+
+        &.inverted {
+          filter: invert(1);
+        }
+      }
+    }
+
+    .title {
+      display: inline-block;
+      white-space: nowrap;
+      width: 200%;
+      text-align: center;
+
+      opacity: 0;
+      transition: opacity 0.5s ease-out;
+
+      color: #ffffff;
+
+      position: relative;
+      top: 13px;
+      left: -50%;
+    }
+
+    &:hover {
+      .box {
+        transform: scale(1.1);
+      }
+
+      .title {
+        opacity: 1;
+      }
+    }
+  }
+</style>