Change logo animation

.eslintrc.js

@@ -1,8 +1,9 @@
 module.exports = {
   "root": true,
   "env": {
-    "browser": true,
-    node: true
+    browser: true,
+    node: true,
+    es6: true
   },
   "parserOptions": {
     "parser": "babel-eslint"

components/AnimatedLogo.vue

@@ -1,88 +1,101 @@
 <template>
   <div class="animated-logo">
-    <div class="animated-logo__bar-1"></div>
-    <div class="animated-logo__bar-2"></div>
-    <MyLogo class="animated-logo__logo"/>
+    <svg class="animated-logo__svg" xmlns="http://www.w3.org/2000/svg" viewBox="76.75 182.661 358.5 146.679" width="358.5pt" height="146.679pt">
+      <path class="animated-logo__m1" d=" M 121.75 182.749 L 166.75 329.339 L 76.75 329.339 L 121.75 182.749 Z " fill-rule="evenodd" fill="currentColor"/>
+      <path class="animated-logo__m2" d=" M 206.75 182.749 L 251.75 329.339 L 161.75 329.339 L 206.75 182.749 Z " fill-rule="evenodd" fill="currentColor"/>
+      <path class="animated-logo__r1" d=" M 327.25 182.705 L 372.25 329.295 L 282.25 329.295 L 327.25 182.705 Z " fill-rule="evenodd" fill="currentColor"/>
+      <path class="animated-logo__r2" d=" M 390.537 329.339 L 345.25 182.837 L 435.25 182.661 L 390.537 329.339 Z " fill-rule="evenodd" fill="currentColor"/>
+    </svg>
+    <div class="animated-logo__name">
+      Moritz Ruth
+    </div>
   </div>
 </template>
 
 <style scoped lang="scss">
-  $logo-width: 270px;
+  $scale-up-duration: 800ms;
+  $slide-duration: 1000ms;
+  $slide-delay: $scale-up-duration / 2;
+  $fade-duration: 400ms;
+  $fade-delay: $slide-delay + 300ms;
+  $slide-length: 37.5%;
 
   .animated-logo {
-    animation: logo-width 800ms 1s ease, logo-height 600ms 1.9s ease;
-    animation-fill-mode: both;
+    width: 350px;
 
-    overflow: hidden;
-    position: relative;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    color: black;
+    animation: scaleUp $scale-up-duration ease-out both;
   }
 
-  @keyframes logo-width {
+  .animated-logo__svg {
+    width: 100%;
+  }
+
+  .animated-logo__name {
+    font-size: 2rem;
+    animation: fadeIn $slide-duration $slide-delay ease both;
+    text-align: center;
+  }
+
+  .animated-logo__m1, .animated-logo__r2 {
+    animation: slideFromRight $slide-duration $slide-delay ease both;
+  }
+
+  .animated-logo__r2 {
+    animation-name: slideFromLeft;
+  }
+
+  .animated-logo__m2, .animated-logo__r1 {
+    animation: fadeIn $fade-duration $fade-delay ease both;
+  }
+
+  .animated-logo__m2 {
+    animation-delay: $fade-delay + 100ms;
+  }
+
+  @keyframes scaleUp {
     from {
-      width: 0;
+      transform: scale(0);
     }
 
     to {
-      width: $logo-width;
+      transform: scale(1);
     }
   }
 
-  @keyframes logo-height {
+  @keyframes slideFromRight {
     from {
-      height: 10px;
+      transform: translateX(#{$slide-length});
     }
 
     to {
-      height: 230px;
+      transform: translateX(0);
     }
   }
 
-  .animated-logo__bar-1, .animated-logo__bar-2 {
-    background-color: currentColor;
-    position: absolute;
-
-    left: 0;
-    right: 0;
-    height: 6px;
-
-    animation: fadeOut 400ms 2.8s ease-in both;
-  }
-
-  .animated-logo__bar-1 {
-    top: 0;
-  }
-
-  .animated-logo__bar-2 {
-    bottom: 0;
-  }
-
-  @keyframes fadeOut {
+  @keyframes slideFromLeft {
     from {
-      opacity: 1;
+      transform: translateX(#{$slide-length * -1});
     }
 
     to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fadeIn {
+    from {
       opacity: 0;
     }
-  }
 
-  .animated-logo__logo {
-    width: $logo-width;
-    flex-shrink: 0;
+    to {
+      opacity: 1;
+    }
   }
 </style>
 
 <script>
-  import MyLogo from "@/assets/media/MyLogo.svg";
-
   export default {
     name: "AnimatedLogo",
-    components: { MyLogo }
+    components: { }
   };
 </script>

nuxt.config.js

@@ -40,7 +40,9 @@ export default {
   ],
 
   kiste: {
-    theme: { contentPadding: "10px" },
+    theme: {
+      contentPadding: "10px"
+    },
     navigationItems: [
       {
         label: "Home",

package.json

@@ -12,22 +12,22 @@
   },
   "dependencies": {
     "@nuxtjs/pwa": "^3.0.0-beta.19",
-    "nuxt": "^2.0.0",
-    "vue": "^2.6.10",
+    "nuxt": "^2.11.0",
+    "vue": "^2.6.11",
     "vue-ripple-directive": "^2.0.1"
   },
   "devDependencies": {
-    "@moritzruth/eslint-config": "1.0.2",
-    "@nuxtjs/eslint-module": "^1.0.0",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^6.1.0",
-    "eslint-import-resolver-webpack": "^0.12.0",
-    "eslint-plugin-nuxt": ">=0.4.2",
+    "@moritzruth/eslint-config": "^1.0.6",
+    "@nuxtjs/eslint-module": "^1.1.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.8.0",
+    "eslint-import-resolver-webpack": "^0.12.1",
+    "eslint-plugin-nuxt": "^0.5.0",
     "fibers": "^4.0.2",
     "kiste": "^1.2.4",
-    "sass": "^1.23.7",
-    "sass-loader": "^8.0.0",
-    "serve": "^11.2.0",
+    "sass": "^1.24.4",
+    "sass-loader": "^8.0.1",
+    "serve": "^11.3.0",
     "svg-to-vue-component": "^0.3.8"
   }
 }

pages/index.vue

@@ -3,9 +3,6 @@
     <KNavigationBar/>
     <AnimatedLogo/>
     <main class="index-page__content">
-      <div class="index-page__name">
-        Moritz Ruth
-      </div>
       <div class="index-page__socials">
         <a class="index-page__social-link" href="https://github.com/moritzruth" title="GitHub">
           <GitHubIcon class="index-page__social-icon"/>
@@ -37,12 +34,6 @@
     height: calc(100vh - var(--x-navbar-height));
   }
 
-  .index-page__name {
-    animation: appear 800ms 3.5s ease both;
-
-    font-size: 2rem;
-  }
-
   @keyframes appear {
     from {
       opacity: 0;