refactor the index page

components/CtexxxLogo.vue

@@ -10,36 +10,35 @@
 </template>
 
 <script>
-  import { mapState } from "vuex";
   import _debounce from "lodash.debounce";
 
   const debounceLogoText = _debounce((self, newValue) => {
     self.debouncedLogoText = newValue;
-  }, 100);
+  }, 200);
 
   export default {
-    name: "Logo",
+    name: "CtexxxLogo",
     created() {
-      this.debouncedLogoText = this.$store.state.logoText;
+      this.debouncedLogoText = this.text || "ctexxx";
+    },
+    props: {
+      text: String
     },
     data() {
       return {
         debouncedLogoText: ""
       }
     },
-    computed: {
-      ...mapState(["logoText"])
-    },
     watch: {
-      logoText(newValue) {
-        debounceLogoText(this, newValue);
+      text(newValue) {
+        debounceLogoText(this, newValue || "ctexxx");
       }
     }
   };
 </script>
 
 <style scoped lang="scss">
-  @import "~@/assets/_mq.scss";
+  @import "~@/assets/_responsive";
 
   .slide-vertical-enter-active {
     transition: all 0.5s ease-out;
@@ -65,6 +64,8 @@
   }
 
   .logo {
+    user-select: none;
+
     margin: 0 auto;
     width: fit-content;
 
@@ -76,14 +77,12 @@
       color: #c34545;
       text-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
 
-      @include mq($from: tablet) {
+      @include desktop {
         font-size: 12em;
       }
     }
 
     & > .underline {
-      transition: width 1s ease-in-out;
-
       transform: translateY(-0.7em);
 
       height: 3px;
@@ -91,11 +90,13 @@
       background: white;
       box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.75);
 
-      @include mq($from: tablet) {
+      @include desktop {
         transform: translateY(-2em);
 
         height: 5px;
       }
+
+      margin: 0 auto;
     }
   }
 </style>

components/Project.vue

@@ -1,50 +0,0 @@
-<template>
-  <div class="project horizontally-centered">
-    <h2>{{ title }}</h2>
-    <p>
-      <template v-for="(name, index) in Object.keys(links)">
-        <a :href="links[name]" rel="noopener">
-          {{ name }}
-        </a>
-        <template v-if="index + 1 < Object.keys(links).length"> | </template>
-      </template>
-    </p>
-    <div class="line"></div>
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: "Project",
-    props: {
-      title: String,
-      links: Object
-    }
-  };
-</script>
-
-<style scoped lang="scss">
-  @import "~@/assets/_mq.scss";
-
-  .project {
-    width: 75vw;
-
-    h2 {
-      font-size: 40px;
-
-      @include mq($from: tablet) {
-        font-size: 50px;
-      }
-
-      margin-bottom: 10px;
-    }
-
-    .line {
-      width: 150px;
-      height: 1px;
-      background-color: white;
-      margin: 5px auto 10px;
-    }
-  }
-</style>

components/ScrollDownArrow.vue

@@ -1,89 +0,0 @@
-<template>
-  <div class="scroll-down-arrow">
-    <div id="arrow-container" @click="onClick">
-      <div id="left-line"></div>
-      <div id="right-line"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: "ScrollDownArrow",
-    mounted() {
-      this.$nextTick(() => {
-        this.elm = document.querySelector(this.to);
-
-        if(!this.elm) {
-          throw new Error("No matching element found");
-        }
-      });
-    },
-    data: () => ({
-      elm: null
-    }),
-    props: {
-      to: String,
-      container: String
-    },
-    methods: {
-      onClick() {
-        const container = this.container ? document.querySelector(this.container) : window;
-
-        container.scrollTo({
-          'behavior': "smooth",
-          'left': 0,
-          'top': this.elm.offsetTop
-        });
-      }
-    }
-  };
-</script>
-
-<style scoped lang="scss">
-  .scroll-down-arrow {
-    height: 40px;
-
-    position: absolute;
-    bottom: 10px;
-    right: 0;
-    left: 0;
-
-    display: table;
-    margin: 0 auto;
-
-    animation: moveVertical 2s alternate linear infinite;
-  }
-
-  #arrow-container {
-    position: relative;
-
-    margin: 0 auto;
-    width: fit-content;
-  }
-
-  #left-line, #right-line {
-    width: 20px;
-    height: 2px;
-    background-color: white;
-    display: inline-block;
-  }
-
-  #left-line {
-    transform: rotate(45deg) translateX(9px);
-  }
-
-  #right-line {
-    transform: rotate(-45deg) translateX(-9px);
-  }
-
-  @keyframes moveVertical {
-    0% {
-      transform: translateY(-10px);
-    }
-
-    100% {
-      transform: translateY(0);
-    }
-  }
-</style>

components/SocialIcon.vue

@@ -1,8 +1,5 @@
 <template>
-  <a id="root" rel="noopener" :href="`https://go.ctexxx.dev/${name}`" target="_blank"
-     @mouseenter="$store.commit('setLogoText', username)"
-     @mouseleave="$store.commit('resetLogoText', username)"
-  >
+  <a id="root" rel="noopener" :href="`https://go.ctexxx.dev/${name}`" target="_blank">
     <div class="box" :style="{'background-color': '#' + simpleIcon.hex}">
       <div class="icon" v-html="simpleIcon.svg" :class="{inverted: invert}">
       </div>
@@ -34,7 +31,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "~@/assets/_mq";
+  @import "~@/assets/_responsive";
 
   #root {
     display: inline-block;
@@ -44,7 +41,7 @@
     height: 50px;
     width: 50px;
 
-    @include mq($from: tablet) {
+    @include desktop {
       height: 70px;
       width: 70px;
     }