better components names + data json fetch

Author: iuridepaula

src/data/about.json public/data/about.jsonsrc/data/about.json renamed to public/data/about.json

@@ -4,29 +4,28 @@
     <transition appear mode="out-in" :css="false" @leave="leave" @enter="enter">
       <router-view />
     </transition>
-    <Spine :isPlaying="isSpinePlaying" />
+    <SpineLine :isPlaying="isSpinePlaying" />
     <div class="tweenerElement"></div>
 
     <FooterSection />
   </div>
 </template>
 
 <script>
-// GSAP + ScrollMagic
 import * as ScrollMagic from 'scrollmagic'
 import { TweenMax, TimelineMax, Power3 } from 'gsap'
 import { ScrollMagicPluginGsap } from 'scrollmagic-plugin-gsap'
-import HeaderSection from '@/components/Header.vue'
-import Spine from '@/components/Spine.vue'
-import FooterSection from './components/Footer.vue'
+import HeaderSection from './components/HeaderSection.vue'
+import FooterSection from './components/FooterSection.vue'
+import SpineLine from './components/SpineLine.vue'
 
 ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax)
 
 export default {
   name: 'App',
   components: {
     HeaderSection,
-    Spine,
+    SpineLine,
     FooterSection,
   },
   data() {
@@ -134,16 +133,20 @@ html {
   word-break: normal;
   color: #888;
 }
+
 body {
   min-height: 100vh;
+
   &.locked {
     overflow: hidden;
   }
 }
+
 #app {
   overflow: hidden;
   margin: 0 auto;
 }
+
 .wrapper {
   position: relative;
   z-index: 1;
@@ -170,12 +173,15 @@ body {
 li {
   list-style: none;
 }
+
 a {
   text-decoration: none;
 }
+
 button {
   border: 0;
 }
+
 svg {
   title,
   desc {
@@ -194,9 +200,11 @@ body {
     .header-nav-button .dots {
       background: #000;
     }
+
     .header-nav a {
       color: #000;
     }
+
     .header-nav a svg,
     .header-breadcrumb,
     .header-nav-close-button {
@@ -220,10 +228,13 @@ body {
 
   &.-blank {
     vertical-align: middle;
-  } // default
+  }
+
+  // default
   &.-prev {
     transform: rotate(-180deg);
   }
+
   &.-next {
     transform: rotate(90deg);
   }
@@ -253,6 +264,7 @@ body {
   .func {
     color: var(--purple);
   }
+
   .params {
     color: var(--purple);
     font-weight: 400;
@@ -308,6 +320,7 @@ body {
 // NProgress custom CSS
 #nprogress {
   pointer-events: none;
+
   .bar {
     background: var(--purple);
     position: fixed;
@@ -317,6 +330,7 @@ body {
     width: 100%;
     height: 2px;
   }
+
   .peg {
     display: block;
     position: absolute;
@@ -331,6 +345,7 @@ body {
 .nprogress-custom-parent {
   overflow: hidden;
   position: relative;
+
   #nprogress {
     .spinner,
     .bar {

src/App.vue

@@ -5,10 +5,9 @@
 </template>
 
 <script>
-import { LOOP_EASE_IN_OUT } from '@/constants'
+import { LOOP_EASE_IN_OUT, LOOP_EASE_OUT } from '@/constants'
 import { character } from '../character.mixin'
 import ABizSVG from './ABizSVG.vue'
-import { LOOP_EASE_OUT } from '../../../constants'
 
 export default {
   name: 'BizCharacter',

src/components/Characters/ABiz/ABiz.vue

@@ -1 +1 @@
-export { default } from './ABiz.vue'
+// export { default } from './ABiz.vue'

src/components/Characters/ABiz/index.js

@@ -5,9 +5,8 @@
 </template>
 
 <script>
-import { LOOP_EASE_IN_OUT } from '@/constants'
+import { LOOP_EASE_IN_OUT, LOOP } from '@/constants'
 import { random } from '@/utils'
-import { LOOP } from '../../../constants'
 import { character } from '../character.mixin'
 import ETSVG from './ETSVG.vue'
 

src/components/Characters/ET/ET.vue

@@ -50,10 +50,9 @@
 
 <script>
 import { RoughEase, Power0 } from 'gsap'
+import { LOOP_EASE_IN_OUT, LOOP } from '@/constants'
 import { getNodes } from '@/utils'
-import { LOOP_EASE_IN_OUT } from '@/constants'
 import { character } from '../character.mixin'
-import { LOOP } from '../../../constants'
 
 export default {
   name: 'HolwsCastleCharacter',
@@ -264,6 +263,7 @@ export default {
     width: 596px;
     height: 420px;
   }
+
   .top-top {
     top: 0;
     left: 0;
@@ -272,6 +272,7 @@ export default {
     @include pieces-img;
     background-position: 0 0;
   }
+
   .top-tower {
     top: -58px;
     left: 102px;
@@ -280,6 +281,7 @@ export default {
     @include pieces-img;
     background-position: -596px 0;
   }
+
   .top-clothes {
     top: 36px;
     left: 500px;
@@ -303,6 +305,7 @@ export default {
     height: 54px;
     background: url('./assets/bucket.png') 0 0;
   }
+
   .mouth {
     .back-lip {
       top: 550px;
@@ -312,6 +315,7 @@ export default {
       @include pieces-img;
       background-position: 0 -563px;
     }
+
     .front-lip {
       top: 551px;
       left: 72px;
@@ -330,6 +334,7 @@ export default {
     @include pieces-img;
     background-position: -727px -140px;
   }
+
   .r-leg {
     top: 668px;
     left: 462px;
@@ -338,6 +343,7 @@ export default {
     @include pieces-img;
     background-position: -300px -563px;
   }
+
   .l-arm {
     top: 697px;
     left: 191px;
@@ -346,6 +352,7 @@ export default {
     @include pieces-img;
     background-position: -388px -420px;
   }
+
   .body {
     top: 0;
     left: 0;
@@ -354,19 +361,22 @@ export default {
     background: url('./assets/body.png') no-repeat 0 0;
     background-size: 100% 100%;
   }
+
   .fans {
     top: 0;
     left: 0;
     z-index: -1;
     width: 100%;
     height: 100%;
+
     .fan2 {
       width: 100%;
       height: 100%;
       background: url('./assets/fan-2.png') 0 0 no-repeat;
       background-size: 2199px 824px;
       animation: fan1 0.3s steps(3) infinite;
     }
+
     .fan1 {
       width: 100%;
       height: 100%;
@@ -380,6 +390,7 @@ export default {
         }
       }
     }
+
     .fix-tail {
       top: 0;
       left: 0;
@@ -395,6 +406,7 @@ export default {
     left: 0;
     width: 100%;
     height: 100%;
+
     .r-arm {
       top: 643px;
       left: 254px;
@@ -403,6 +415,7 @@ export default {
       @include pieces-img;
       background-position: 0 -420px;
     }
+
     .fix-shoulder {
       top: 0;
       left: 0;
@@ -420,11 +433,13 @@ export default {
     height: 53px;
     background: url('./assets/ear.png') 0 0;
   }
+
   .lower-foliage {
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
+
     .foliage2 {
       top: 360px;
       left: 244px;
@@ -433,6 +448,7 @@ export default {
       @include pieces-img;
       background-position: -727px -250px;
     }
+
     .foliage1 {
       top: 417px;
       left: 307px;
@@ -441,6 +457,7 @@ export default {
       @include pieces-img;
       background-position: -727px -349px;
     }
+
     .fix-balcony {
       top: 0;
       left: 0;
@@ -466,11 +483,13 @@ export default {
       }
     }
   }
+
   .higher-foliage {
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
+
     .foliage3 {
       top: 183px;
       left: 290px;
@@ -479,6 +498,7 @@ export default {
       @include pieces-img;
       background-position: -727px 0;
     }
+
     .foliage2 {
       top: 239px;
       left: 357px;
@@ -487,6 +507,7 @@ export default {
       @include pieces-img;
       background-position: -177px -420px;
     }
+
     .foliage1 {
       top: 320px;
       left: 438px;
@@ -495,6 +516,7 @@ export default {
       @include pieces-img;
       background-position: -727px -411px;
     }
+
     .fix-roof {
       top: 0;
       left: 0;