beautify index page

assets/global.scss

@@ -1,4 +1,5 @@
 @import "./colors";
+@import url('https://fonts.googleapis.com/css?family=Raleway');
 
 html, body, #__nuxt, #__layout {
   width: 100%;
@@ -25,3 +26,19 @@ a {
   color: $c-link;
   text-decoration: none;
 }
+
+.button {
+  border: 2px solid white;
+  width: fit-content;
+  padding: 10px;
+
+  color: white;
+
+  transition: 400ms;
+
+  &:hover {
+    background-color: white;
+    color: $c-background;
+    font-weight: 400;
+  }
+}

components/CtexxxLogo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="full-width">
+  <div>
     <transition name="slide-vertical" mode="out-in">
       <div class="logo" :key="debouncedLogoText">
         <span class="text">{{ debouncedLogoText }}</span>
@@ -14,7 +14,7 @@
 
   const debounceLogoText = _debounce((self, newValue) => {
     self.debouncedLogoText = newValue;
-  }, 200);
+  }, 100);
 
   export default {
     name: "CtexxxLogo",
@@ -39,27 +39,21 @@
 
 <style scoped lang="scss">
   @import "~@/assets/_responsive";
+  @import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates');
 
   .slide-vertical-enter-active {
-    transition: all 0.5s ease-out;
+    transition: all 0.3s ease-out;
   }
 
   .slide-vertical-leave-active {
-    transition: all 0.5s ease-in;
+    transition: all 0.3s 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);
+  .slide-vertical-enter, .slide-vertical-leave-to {
     opacity: 0;
   }
 

components/SocialIcon.vue

@@ -53,7 +53,6 @@
       width: 100%;
 
       transition: 0.5s ease-out;
-      transform: scale(1);
 
       .icon {
         height: 100%;
@@ -85,10 +84,6 @@
     }
 
     &:hover {
-      .box {
-        transform: scale(1.1);
-      }
-
       .title {
         opacity: 1;
       }

nuxt.config.js

@@ -13,7 +13,6 @@ module.exports = {
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Montserrat+Alternates|Raleway'}
     ]
   },
 
@@ -22,7 +21,9 @@ module.exports = {
     author: "Moritz Ruth",
     mobileAppIOS: false,
     nativeUI: true,
-    "short_name": "ctexxx"
+    "short_name": "ctexxx",
+    "background_color": "#212121",
+    "theme_color": "#212121"
   },
 
   /*

pages/index.vue

@@ -8,6 +8,9 @@
         @mouseover.native="logoText = account.username" @mouseleave.native="logoText = null"
       />
     </div>
+    <div class="link-section">
+      <nuxt-link class="button" to="/projects">My Projects</nuxt-link>
+    </div>
   </div>
 </template>
 
@@ -58,5 +61,29 @@
     flex-direction: column;
     justify-content: center;
     align-content: center;
+
+    .link-section {
+      position: absolute;
+      bottom: 30px;
+      left: 0;
+      right: 0;
+
+      display: flex;
+      align-content: center;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+
+      .button {
+        margin: 10px;
+
+        &::before {
+          content: "→";
+          transform: translateY(-4px) scale(1.7);
+          display: inline-block;
+          margin-right: 5px;
+        }
+      }
+    }
   }
 </style>