diff --git a/src/data/about.json b/public/data/about.json
similarity index 100%
rename from src/data/about.json
rename to public/data/about.json
diff --git a/src/App.vue b/src/App.vue
index 63511e0..d4d24be 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
     <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 />
@@ -12,13 +12,12 @@
 </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)
 
@@ -26,7 +25,7 @@ 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 {
diff --git a/src/components/Characters/ABiz/ABiz.vue b/src/components/Characters/ABiz/ABiz.vue
index 19f2efe..471cc31 100644
--- a/src/components/Characters/ABiz/ABiz.vue
+++ b/src/components/Characters/ABiz/ABiz.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',
diff --git a/src/components/Characters/ABiz/index.js b/src/components/Characters/ABiz/index.js
index f6aadc2..5d4b36a 100644
--- a/src/components/Characters/ABiz/index.js
+++ b/src/components/Characters/ABiz/index.js
@@ -1 +1 @@
-export { default } from './ABiz.vue'
+// export { default } from './ABiz.vue'
diff --git a/src/components/Characters/ET/ET.vue b/src/components/Characters/ET/ET.vue
index 863d8fc..7c92f63 100644
--- a/src/components/Characters/ET/ET.vue
+++ b/src/components/Characters/ET/ET.vue
@@ -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'
 
diff --git a/src/components/Characters/HolwsCastle/HolwsCastle.vue b/src/components/Characters/HolwsCastle/HolwsCastle.vue
index 3b73e70..379daee 100644
--- a/src/components/Characters/HolwsCastle/HolwsCastle.vue
+++ b/src/components/Characters/HolwsCastle/HolwsCastle.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,12 +361,14 @@ 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%;
@@ -367,6 +376,7 @@ export default {
       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;
diff --git a/src/components/Characters/SuperMario/Block.vue b/src/components/Characters/SuperMario/Block.vue
index 1d4503c..74d4092 100644
--- a/src/components/Characters/SuperMario/Block.vue
+++ b/src/components/Characters/SuperMario/Block.vue
@@ -1,12 +1,9 @@
 <template>
   <div>
-    <div
-      :class="[
-        'mario-box',
-        { '-jumped': hasTouched, '-full': hasCoins, '-off': hasFoundAllCoins },
-      ]"
-      @click="onTouchBlock"
-    >
+    <div :class="[
+      'mario-box',
+      { '-jumped': hasTouched, '-full': hasCoins, '-off': hasFoundAllCoins },
+    ]" @click="onTouchBlock">
       <div class="in"></div>
       <SuperMarioCoin v-for="(item, i) in coinsToBeFound" :key="i" isPlaying />
     </div>
@@ -15,7 +12,7 @@
 
 <script>
 import { TimelineMax, SteppedEase } from 'gsap'
-import { random } from '../../../utils'
+import { random } from '@/utils'
 import AudioStomp from './assets/smw_stomp.ogg'
 import AudioPowerUp from './assets/smw_power-up.ogg'
 import AudioAppears from './assets/smw_power-up_appears.ogg'
@@ -80,7 +77,7 @@ export default {
         this.audioPowerUp.play()
         this.$emit('foundAllCoins')
       }
-      
+
       this.audioAppears.play()
       this.$emit('foundCoin', this.foundCoins)
     },
@@ -123,7 +120,7 @@ export default {
   width: 128px;
   height: 128px;
 
-  .preview > & {
+  .preview>& {
     margin: 30rem auto 10rem;
   }
 
@@ -136,12 +133,15 @@ export default {
       animation: marioBoxEmpty 0.6s steps(4) infinite;
     }
   }
+
   &.-full.-jumped .in {
     animation: none;
     background-position: -512px 0;
   }
+
   &.-off {
     cursor: default;
+
     &:hover {
       filter: none;
     }
@@ -171,14 +171,17 @@ export default {
   from {
     background-position: 0 0;
   }
+
   to {
     background-position: -512px 0;
   }
 }
+
 @keyframes marioBoxEmpty {
   from {
     background-position: 0 -128px;
   }
+
   to {
     background-position: -512px -128px;
   }
diff --git a/src/components/Characters/index.js b/src/components/Characters/index.js
deleted file mode 100644
index fa4c1f8..0000000
--- a/src/components/Characters/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export { default as ABiz } from './ABiz'
-export { default as Astronaut } from './Astronaut'
-export { default as CoffeeMug } from './CoffeeMug'
-export { default as Dino } from './Dino'
-export { default as ET } from './ET'
-export { default as HolwsCastle } from './HolwsCastle'
-export { default as Ocean } from './Ocean'
-export { default as Octopus } from './Octopus'
-export { default as Pepe } from './Pepe'
-export { default as Potion } from './Potion'
-export { default as Shapes } from './Shapes'
-export { default as Shrimp } from './Shrimp'
-export { default as Zen } from './Zen'
-export * from './SuperMario'
diff --git a/src/components/Footer.vue b/src/components/FooterSection.vue
similarity index 100%
rename from src/components/Footer.vue
rename to src/components/FooterSection.vue
diff --git a/src/components/Gap.vue b/src/components/GapBlock.vue
similarity index 100%
rename from src/components/Gap.vue
rename to src/components/GapBlock.vue
diff --git a/src/components/Header.vue b/src/components/HeaderSection.vue
similarity index 93%
rename from src/components/Header.vue
rename to src/components/HeaderSection.vue
index 97b7598..5549558 100644
--- a/src/components/Header.vue
+++ b/src/components/HeaderSection.vue
@@ -29,7 +29,9 @@
         </button>
 
         <ul>
-          <li><router-link to="/" title="Home">.is()</router-link></li>
+          <li>
+            <router-link to="/" title="Home">.is()</router-link>
+          </li>
           <li>
             <router-link to="/about" title="About me">.about()</router-link>
           </li>
@@ -41,7 +43,7 @@
           <li v-for="link in data.links" :key="link.url" class="social-link">
             <a :href="link.url" :title="link.title" target="_blank">
               {{ link.label || null }}
-              <Component v-if="link.icon" :is="link.icon" />
+              <component v-if="link.icon" :is="link.icon" />
             </a>
           </li>
         </ul>
@@ -51,17 +53,21 @@
 </template>
 
 <script>
-import data from '../data/about.json'
-import LinkedInIcon from './LinkedInIcon.vue'
-import GithubIcon from './GithubIcon.vue'
+import { fetchData } from '@/utils'
+import LinkedInIcon from './Icon/LinkedInIcon.vue'
+import GithubIcon from './Icon/GithubIcon.vue'
+
 export default {
   name: 'HeaderSection',
   components: { LinkedInIcon, GithubIcon },
   data() {
     return {
-      data,
+      data: {},
     }
   },
+  async mounted() {
+    this.data = await fetchData()
+  },
   methods: {
     openMenu() {
       document.body.classList.add('is-nav-open')
@@ -83,6 +89,7 @@ export default {
   height: 8rem;
   padding: 0 1rem 5rem;
 }
+
 .header-container {
   display: flex;
   align-items: center;
@@ -119,6 +126,7 @@ export default {
   .label {
     display: none;
   }
+
   .dots {
     flex: 0 0 auto;
     position: relative;
@@ -275,9 +283,11 @@ export default {
     .wrapper {
       opacity: 0.1 !important;
     }
+
     .header-nav-button {
       opacity: 0;
     }
+
     .header-nav {
       transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1);
       transform: translate3d(0, 0, 0);
@@ -299,6 +309,7 @@ export default {
     rgba(var(--bg-rgb), 0) 100%
   );
 }
+
 body.blue-background {
   .header-bg {
     background: linear-gradient(
@@ -307,12 +318,15 @@ body.blue-background {
       rgba(4, 151, 209, 0) 100%
     );
   }
+
   .header-nav-button .dots {
     background: #000;
   }
+
   .header-nav a {
     color: #000;
   }
+
   .header-nav a svg,
   .header-breadcrumb,
   .header-nav-close-button {
diff --git a/src/components/Home/Biz.vue b/src/components/Home/BizScene.vue
similarity index 79%
rename from src/components/Home/Biz.vue
rename to src/components/Home/BizScene.vue
index 8a8bf1c..b8e869a 100644
--- a/src/components/Home/Biz.vue
+++ b/src/components/Home/BizScene.vue
@@ -4,7 +4,7 @@
       <TitleFunction params="2011,2019">biz</TitleFunction>
     </TitleSection>
 
-    <Scene id="biz1">
+    <SceneSection id="biz1">
       <TextBlock>
         <p class="-big">
           From 2011 to 2019 I was
@@ -34,8 +34,8 @@
         <Zen v-if="!$viewport.isMobile" :isPlaying="isPlaying" />
         <Shapes :isPlaying="isPlaying" />
       </template>
-    </Scene>
-    <Scene id="biz2">
+    </SceneSection>
+    <SceneSection id="biz2">
       <TextBlock>
         <p>
           Throughout these years we delivered hundreds of
@@ -45,8 +45,8 @@
           for online stores and service providers.
         </p>
       </TextBlock>
-    </Scene>
-    <Scene id="biz3">
+    </SceneSection>
+    <SceneSection id="biz3">
       <TextBlock>
         <p>
           biz currently runs
@@ -57,26 +57,24 @@
           </span>
         </p>
       </TextBlock>
-    </Scene>
+    </SceneSection>
   </div>
 </template>
 
 <script>
-import {
-  ABiz,
-  Dino,
-  Astronaut,
-  CoffeeMug,
-  Shrimp,
-  Octopus,
-  ET,
-  Zen,
-  Shapes,
-} from '../Characters'
-import TitleSection from './TitleSection.vue'
-import TitleFunction from './TitleFunction.vue'
+import ABiz from '../Characters/ABiz/ABiz.vue'
+import Dino from '../Characters/Dino/Dino.vue'
+import Astronaut from '../Characters/Astronaut/Astronaut.vue'
+import CoffeeMug from '../Characters/CoffeeMug/CoffeeMug.vue'
+import Shrimp from '../Characters/Shrimp/Shrimp.vue'
+import Octopus from '../Characters/Octopus/Octopus.vue'
+import ET from '../Characters/ET/ET.vue'
+import Zen from '../Characters/Zen/Zen.vue'
+import Shapes from '../Characters/Shapes/Shapes.vue'
+import TitleSection from '../TitleSection.vue'
+import TitleFunction from '../TitleFunction.vue'
 import TextBlock from '../TextBlock.vue'
-import Scene from '../Scene.vue'
+import SceneSection from '../SceneSection.vue'
 
 export default {
   name: 'BizScene',
@@ -93,7 +91,7 @@ export default {
     TitleSection,
     TitleFunction,
     TextBlock,
-    Scene,
+    SceneSection,
   },
   props: {
     isPlaying: Boolean,
@@ -108,13 +106,16 @@ export default {
       position: relative;
       z-index: 2;
     }
+
     .container {
       z-index: unset;
     }
+
     svg {
       overflow: visible;
     }
   }
+
   #abiz {
     position: absolute;
     left: -5vw;
@@ -124,16 +125,17 @@ export default {
     z-index: 10;
     transform: rotateY(180deg);
 
-    @media screen and (max-width: 1024px){
+    @media screen and (max-width: 1024px) {
       top: auto;
       bottom: 0;
     }
 
-    @media screen and (max-width: 768px){
+    @media screen and (max-width: 768px) {
       width: 50vw;
       height: 50vh;
     }
   }
+
   #zen {
     position: absolute;
     left: calc(100% - 30vw);
@@ -143,12 +145,13 @@ export default {
     height: 80vh;
     transform: scale(2);
 
-    @media screen and (max-width: 768px){
+    @media screen and (max-width: 768px) {
       top: 65vh;
       width: 50vw;
       height: 60vh;
     }
   }
+
   #et {
     position: absolute;
     right: 15vw;
@@ -157,6 +160,7 @@ export default {
     width: 20vw;
     height: 40vw;
   }
+
   #dino {
     position: fixed;
     right: 0;
@@ -171,6 +175,7 @@ export default {
         stroke-dasharray: 36;
         stroke-dashoffset: 72;
       }
+
       to {
         stroke-dasharray: 36;
         stroke-dashoffset: 0;
@@ -187,14 +192,14 @@ export default {
       }
     }
 
-    @media screen and (max-width: 1024px){
+    @media screen and (max-width: 1024px) {
       right: -5vw;
       bottom: -20vh;
       width: 70vh;
       height: 70vh;
     }
 
-    @media screen and (max-width: 768px){
+    @media screen and (max-width: 768px) {
       width: 60vh;
       height: 60vh;
     }
@@ -205,6 +210,7 @@ export default {
       stroke-dashoffset: 0;
     }
   }
+
   #astro {
     position: absolute;
     right: 0;
@@ -212,13 +218,14 @@ export default {
     width: 20vw;
     height: 20vw;
 
-    @media screen and (max-width: 568px){
+    @media screen and (max-width: 568px) {
       right: 0;
       bottom: 55vh;
       width: 20vh;
       height: 20vh;
     }
   }
+
   #coffee {
     position: absolute;
     right: 15vw;
@@ -226,13 +233,14 @@ export default {
     width: 5vw;
     height: 5vw;
 
-    @media screen and (max-width: 568px){
+    @media screen and (max-width: 568px) {
       right: 15vh;
       top: 20vh;
       width: 5vh;
       height: 5vh;
     }
   }
+
   #filomena {
     position: absolute;
     right: 40vw;
@@ -240,6 +248,7 @@ export default {
     width: 10vw;
     height: 10vw;
   }
+
   #octo {
     position: absolute;
     right: 30vw;
@@ -247,6 +256,7 @@ export default {
     width: 7vw;
     height: 7vw;
   }
+
   #open {
     position: absolute;
     left: -20vw;
@@ -260,11 +270,12 @@ export default {
       bottom: -10vw;
     }
 
-    @media screen and (max-width: 768px){
+    @media screen and (max-width: 768px) {
       width: 60vw;
       height: 60vh;
     }
   }
+
   #smart {
     position: absolute;
     left: 5vw;
@@ -274,11 +285,11 @@ export default {
     height: 20vw;
     filter: brightness(0.7);
 
-    @media screen and (max-width: 1024px){
+    @media screen and (max-width: 1024px) {
       left: 10vw;
     }
 
-    @media screen and (max-width: 768px){
+    @media screen and (max-width: 768px) {
       width: 30vw;
       height: 30vw;
       left: 20vw;
diff --git a/src/components/Home/EarlyDays.vue b/src/components/Home/EarlyDaysScene.vue
similarity index 82%
rename from src/components/Home/EarlyDays.vue
rename to src/components/Home/EarlyDaysScene.vue
index 473e39a..268232a 100644
--- a/src/components/Home/EarlyDays.vue
+++ b/src/components/Home/EarlyDaysScene.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="earlyDays">
     <TitleSection scene="earlyTitle">
-      <TitleFunction params="2008,2011" subtitle="&lt;table&gt;&lt;tr&gt;&lt;td&gt;..."
+      <TitleFunction
+        params="2008,2011"
+        subtitle="&lt;table&gt;&lt;tr&gt;&lt;td&gt;..."
         >earlyDays</TitleFunction
       >
 
@@ -12,7 +14,7 @@
       <Ocean v-bind="{ isPlaying }" />
     </TitleSection>
 
-    <Scene id="early-days">
+    <SceneSection id="early-days">
       <TextBlock>
         <p>Design & illustration.</p>
         <p class="-big">
@@ -20,8 +22,8 @@
           <span class="-purple">with one foothold in arts.</span>
         </p>
       </TextBlock>
-    </Scene>
-    <Scene id="early-days2">
+    </SceneSection>
+    <SceneSection id="early-days2">
       <TextBlock>
         <p class="-big">
           <span class="-purple">Freelancing</span> &
@@ -35,8 +37,8 @@
           web studio.<br />
         </p>
       </TextBlock>
-    </Scene>
-    <Scene id="early-days3">
+    </SceneSection>
+    <SceneSection id="early-days3">
       <TextBlock>
         <p>
           We've proudly fueled the starring<br />
@@ -48,16 +50,17 @@
           among many others...
         </p>
       </TextBlock>
-    </Scene>
+    </SceneSection>
   </div>
 </template>
 
 <script>
-import { Pepe, Ocean } from '../Characters'
-import TitleSection from './TitleSection.vue'
-import TitleFunction from './TitleFunction.vue'
+import Pepe from '../Characters/Pepe/Pepe.vue'
+import Ocean from '../Characters/Ocean/Ocean.vue'
+import TitleSection from '../TitleSection.vue'
+import TitleFunction from '../TitleFunction.vue'
 import TextBlock from '../TextBlock.vue'
-import Scene from '../Scene.vue'
+import SceneSection from '../SceneSection.vue'
 
 export default {
   name: 'EarlyDaysScene',
@@ -67,7 +70,7 @@ export default {
     Ocean,
     TitleFunction,
     TextBlock,
-    Scene,
+    SceneSection,
   },
   props: {
     isPlaying: Boolean,
@@ -105,6 +108,7 @@ export default {
     &.cloud-2 {
       background-image: url('../Characters/Pepe/assets/clouds-2.png');
     }
+
     &.cloud-3 {
       background-image: url('../Characters/Pepe/assets/clouds-3.png');
       width: 100vw;
diff --git a/src/components/Home/Ghibli.vue b/src/components/Home/GhibliScene.vue
similarity index 89%
rename from src/components/Home/Ghibli.vue
rename to src/components/Home/GhibliScene.vue
index 45a6941..652cfdf 100644
--- a/src/components/Home/Ghibli.vue
+++ b/src/components/Home/GhibliScene.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="ghibliScene">
-    <Scene id="Ghibli">
+    <SceneSection id="Ghibli">
       <TextBlock>
         <p>
           Before designing for web, I was creating
@@ -22,9 +22,9 @@
         <div class="grass1"></div>
         <div class="grass2"></div>
       </template>
-    </Scene>
-    <Scene id="Ghibli2" />
-    <Scene id="Ghibli3">
+    </SceneSection>
+    <SceneSection id="Ghibli2" />
+    <SceneSection id="Ghibli3">
       <TextBlock>
         <p class="-big">
           And studying
@@ -38,21 +38,22 @@
           today.
         </p>
       </TextBlock>
-    </Scene>
-    <Scene id="Ghibli4" />
+    </SceneSection>
+    <SceneSection id="Ghibli4" />
   </div>
 </template>
 
 <script>
+import HolwsCastle from '../Characters/HolwsCastle/HolwsCastle.vue'
+import SceneSection from '../SceneSection.vue'
 import TextBlock from '../TextBlock.vue'
-import Scene from '../Scene.vue'
-import HolwsCastle from '../Characters/HolwsCastle'
+
 export default {
   name: 'GhibliScene',
   props: {
     isPlaying: Boolean,
   },
-  components: { TextBlock, Scene, HolwsCastle },
+  components: { TextBlock, SceneSection, HolwsCastle },
 }
 </script>
 
@@ -68,6 +69,7 @@ export default {
       transform: scale(0.3);
     }
   }
+
   .sky {
     position: absolute;
     top: 0;
@@ -108,6 +110,7 @@ export default {
       }
     }
   }
+
   .grass1 {
     transform-origin: left bottom;
     position: absolute;
@@ -121,6 +124,7 @@ export default {
     background-size: contain;
     filter: blur(2px);
   }
+
   .grass2 {
     transform-origin: right bottom;
     position: absolute;
diff --git a/src/components/Home/Intro.vue b/src/components/Home/IntroScene.vue
similarity index 99%
rename from src/components/Home/Intro.vue
rename to src/components/Home/IntroScene.vue
index 680d1fd..dccc4a0 100644
--- a/src/components/Home/Intro.vue
+++ b/src/components/Home/IntroScene.vue
@@ -16,6 +16,7 @@
 
 <script>
 import TextBlock from '../TextBlock.vue'
+
 export default {
   name: 'IntroScene',
   components: { TextBlock },
diff --git a/src/components/Home/SuperMario.vue b/src/components/Home/SuperMarioScene.vue
similarity index 94%
rename from src/components/Home/SuperMario.vue
rename to src/components/Home/SuperMarioScene.vue
index 5bf4312..707aa3b 100644
--- a/src/components/Home/SuperMario.vue
+++ b/src/components/Home/SuperMarioScene.vue
@@ -1,5 +1,5 @@
 <template>
-  <Scene id="Mario" role="img" aria-labelledby="marioDesc">
+  <SceneSection id="Mario" role="img" aria-labelledby="marioDesc">
     <p class="ariaLabel" id="marioDesc">
       Three boxes with a question mark, from the Super Mario Bros game, are
       standing in the center of the screen ... try to find the coin in one of
@@ -45,19 +45,20 @@
         </div>
       </div>
     </template>
-  </Scene>
+  </SceneSection>
 </template>
 
 <script>
 import { TimelineMax, SteppedEase } from 'gsap'
 import { random } from '@/utils'
-import { SuperMarioBlock, SuperMarioMario } from '@/components/Characters'
-import AudioExit from '@/components/Characters/SuperMario/assets/smw_keyhole_exit.ogg'
-import Scene from '../Scene.vue'
+import AudioExit from '../Characters/SuperMario/assets/smw_keyhole_exit.ogg'
+import SuperMarioBlock from '../Characters/SuperMario/Block.vue'
+import SuperMarioMario from '../Characters/SuperMario/Mario.vue'
+import SceneSection from '../SceneSection.vue'
 
 export default {
   name: 'SuperMarioScene',
-  components: { Scene, SuperMarioBlock, SuperMarioMario },
+  components: { SceneSection, SuperMarioBlock, SuperMarioMario },
   data() {
     return {
       foundCoins: 0,
@@ -202,14 +203,17 @@ body.is-playing-mario {
     gap: max(2rem, 6vw);
     margin-top: 35vh;
   }
+
   .mario-box {
     left: calc(50% - 64px);
   }
+
   .mario {
     position: fixed !important;
     top: calc(100% - 248px);
     left: calc(50% - 64px);
   }
+
   .mario-coin-counter {
     position: fixed;
     top: 7rem;
@@ -265,6 +269,7 @@ body.is-playing-mario {
   height: 100%;
   z-index: 9999;
 }
+
 .mario-msg {
   position: fixed;
   top: 50%;
@@ -311,6 +316,7 @@ body.is-playing-mario {
     }
   }
 }
+
 .mario-msg-close {
   position: absolute;
   bottom: 100%;
diff --git a/src/components/Home/Thanks.vue b/src/components/Home/ThanksScene.vue
similarity index 89%
rename from src/components/Home/Thanks.vue
rename to src/components/Home/ThanksScene.vue
index 687d085..6315449 100644
--- a/src/components/Home/Thanks.vue
+++ b/src/components/Home/ThanksScene.vue
@@ -1,5 +1,5 @@
 <template>
-  <Scene id="thanks">
+  <SceneSection id="thanks">
     <TextBlock>
       <Potion isPlaying />
 
@@ -27,7 +27,7 @@
             </li>
             <li v-for="song in SONGS" :key="song.id">
               <a
-                :href="LINK + song.id"
+                :href="SPOTIFY_TRACK + song.id"
                 :title="`Listen to ${song.label}`"
                 target="_blank"
                 >{{ song.label }}</a
@@ -37,16 +37,16 @@
         </div>
       </div>
     </TextBlock>
-  </Scene>
+  </SceneSection>
 </template>
 
 <script>
+import MusicIcon from '../Icon/MusicIcon.vue'
+import Potion from '../Characters/Potion/Potion.vue'
 import TextBlock from '../TextBlock.vue'
-import MusicIcon from '../MusicIcon.vue'
-import Scene from '../Scene.vue'
-import { Potion } from '../Characters'
+import SceneSection from '../SceneSection.vue'
 
-const LINK = 'https://open.spotify.com/track/'
+const SPOTIFY_TRACK = 'https://open.spotify.com/track/'
 const SONGS = [
   {
     id: '1pYBTRBbp3PCcdqoke2QSN',
@@ -86,13 +86,13 @@ const SONGS = [
 
 export default {
   name: 'ThanksScene',
-  components: { TextBlock, Scene, Potion, MusicIcon },
+  components: { TextBlock, SceneSection, Potion, MusicIcon },
   props: {
     isPlaying: Boolean,
   },
   data() {
     return {
-      LINK,
+      SPOTIFY_TRACK,
       SONGS,
     }
   },
@@ -152,6 +152,7 @@ export default {
     display: block;
     min-height: 2rem;
   }
+
   ul,
   li {
     list-style: none;
@@ -175,6 +176,7 @@ export default {
       a {
         color: var(--purple);
       }
+
       a:hover {
         color: var(--light);
       }
diff --git a/src/components/Home/Wrapper.vue b/src/components/Home/WrapperScene.vue
similarity index 65%
rename from src/components/Home/Wrapper.vue
rename to src/components/Home/WrapperScene.vue
index d22d0c2..cbccca6 100644
--- a/src/components/Home/Wrapper.vue
+++ b/src/components/Home/WrapperScene.vue
@@ -1,14 +1,15 @@
 <template>
-  <Scene class="scene" id="wrapperTitle">
+  <SceneSection class="scene" id="wrapperTitle">
     <h1 class="title">&lt;/wrapper&gt;</h1>
-  </Scene>
+  </SceneSection>
 </template>
 
 <script>
-import Scene from '../Scene.vue'
+import SceneSection from '../SceneSection.vue'
+
 export default {
   name: 'WrapperBlock',
-  components: { Scene },
+  components: { SceneSection },
 }
 </script>
 
@@ -17,9 +18,11 @@ export default {
   .title {
     color: var(--purple);
   }
+
   .std {
     font-size: 1rem;
   }
+
   .-answer {
     opacity: 0.6;
   }
diff --git a/src/components/CVIcon.vue b/src/components/Icon/CVIcon.vue
similarity index 83%
rename from src/components/CVIcon.vue
rename to src/components/Icon/CVIcon.vue
index c6d873d..1803788 100644
--- a/src/components/CVIcon.vue
+++ b/src/components/Icon/CVIcon.vue
@@ -9,3 +9,9 @@
     />
   </svg>
 </template>
+
+<script>
+export default {
+  name: 'CVIcon',
+}
+</script>
diff --git a/src/components/GithubIcon.vue b/src/components/Icon/GithubIcon.vue
similarity index 92%
rename from src/components/GithubIcon.vue
rename to src/components/Icon/GithubIcon.vue
index 96d71f7..8514d49 100644
--- a/src/components/GithubIcon.vue
+++ b/src/components/Icon/GithubIcon.vue
@@ -15,3 +15,9 @@
     />
   </svg>
 </template>
+
+<script>
+export default {
+  name: 'GithubIcon',
+}
+</script>
diff --git a/src/components/LinkedInIcon.vue b/src/components/Icon/LinkedInIcon.vue
similarity index 90%
rename from src/components/LinkedInIcon.vue
rename to src/components/Icon/LinkedInIcon.vue
index f9f2fed..71ba340 100644
--- a/src/components/LinkedInIcon.vue
+++ b/src/components/Icon/LinkedInIcon.vue
@@ -13,3 +13,9 @@
     />
   </svg>
 </template>
+
+<script>
+export default {
+  name: 'LinkedInIcon',
+}
+</script>
diff --git a/src/components/MusicIcon.vue b/src/components/Icon/MusicIcon.vue
similarity index 87%
rename from src/components/MusicIcon.vue
rename to src/components/Icon/MusicIcon.vue
index 928b210..c6648ee 100644
--- a/src/components/MusicIcon.vue
+++ b/src/components/Icon/MusicIcon.vue
@@ -7,3 +7,9 @@
     />
   </svg>
 </template>
+
+<script>
+export default {
+  name: 'MusicIcon',
+}
+</script>
diff --git a/src/components/Scene.vue b/src/components/SceneSection.vue
similarity index 100%
rename from src/components/Scene.vue
rename to src/components/SceneSection.vue
diff --git a/src/components/Spine.vue b/src/components/SpineLine.vue
similarity index 100%
rename from src/components/Spine.vue
rename to src/components/SpineLine.vue
diff --git a/src/components/Home/TitleFunction.vue b/src/components/TitleFunction.vue
similarity index 91%
rename from src/components/Home/TitleFunction.vue
rename to src/components/TitleFunction.vue
index 4d189e7..3660049 100644
--- a/src/components/Home/TitleFunction.vue
+++ b/src/components/TitleFunction.vue
@@ -14,7 +14,8 @@
 </template>
 
 <script>
-import TextBlock from '../TextBlock.vue'
+import TextBlock from './TextBlock.vue'
+
 export default {
   name: 'TitleFunction',
   props: {
diff --git a/src/components/Home/TitleSection.vue b/src/components/TitleSection.vue
similarity index 100%
rename from src/components/Home/TitleSection.vue
rename to src/components/TitleSection.vue
diff --git a/src/utils.js b/src/utils.js
index 5c4a56f..cd70d6d 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,14 +1,28 @@
+export async function fetchData() {
+  try {
+    const response = await fetch('./data/about.json')
+    const json = await response.json()
+    return json
+  } catch (error) {
+    console.error(new Error(error))
+    return {}
+  }
+}
+
+// returns a random integer between the min/max
 export function random(min, max) {
   min = Math.ceil(min)
   max = Math.floor(max)
   return Math.floor(Math.random() * (max - min + 1)) + min
 }
 
+// document element selector
 export const DOM = {
   get: (selector) => document.querySelector(selector),
   getAll: (selector) => [...document.querySelectorAll(selector)],
 }
 
+// converts text to camelCase
 export function camelCase(str) {
   return str
     .toLowerCase()
@@ -17,6 +31,23 @@ export function camelCase(str) {
     )
 }
 
+/**
+ * returns an object with all existing selectable elements inside the given selector.
+ * eg:
+ *
+ * <div class="foo">
+ *   <div class="bar">
+ *     <svg class="svg"></svg>
+ *   </div>
+ *   <span class="baz"></span>
+ * </div>
+ *
+ * const foo = getNodes('.foo')
+ * foo // <div class="foo"></div>
+ * foo.bar // <div class="bar"></div>
+ * foo.baz // <span class="baz"></span>
+ * foo.svg // <svg class="svg"></svg>
+ */
 export function getNodes(parentSelector) {
   const el = DOM.get(parentSelector)
 
@@ -55,4 +86,4 @@ export function isReverse(e) {
 
 export function isForward(e) {
   return e.scrollDirection === 'FORWARD'
-}
\ No newline at end of file
+}
diff --git a/src/views/404.vue b/src/views/404.vue
index 86211a5..a74f43c 100644
--- a/src/views/404.vue
+++ b/src/views/404.vue
@@ -1,7 +1,9 @@
 <template>
   <div id="err404" class="wrapper">
     <div class="static-container">
-      <h1 class="title"><span class="params">new</span> Error(<span class="params">404</span>)</h1>
+      <h1 class="title">
+        <span class="params">new</span> Error(<span class="params">404</span>)
+      </h1>
 
       <TextBlock>
         <p>The page you requested could not be found.</p>
@@ -20,8 +22,9 @@
 </template>
 
 <script>
-import { Astronaut, CoffeeMug } from '@/components/Characters'
-import TextBlock from '@/components/TextBlock.vue'
+import Astronaut from '../components/Characters/Astronaut/Astronaut.vue'
+import CoffeeMug from '../components/Characters/CoffeeMug/CoffeeMug.vue'
+import TextBlock from '../components/TextBlock.vue'
 
 export default {
   name: 'NotFound',
@@ -43,6 +46,7 @@ export default {
     height: 60vh;
     overflow: visible;
   }
+
   #coffee {
     position: absolute;
     right: 30vw;
diff --git a/src/views/About.vue b/src/views/About.vue
index 9aa21d3..e8355ad 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -10,10 +10,10 @@
             <li v-for="link in data.links" :key="link.url">
               <a :href="link.url" :title="link.title" target="_blank">
                 {{ link.label || null }}
-                <Component v-if="link.icon" :is="link.icon" />
+                <component v-if="link.icon" :is="link.icon" />
               </a>
             </li>
-            <li>
+            <li v-if="data.cv">
               Download my
               <a
                 :href="`./${data.cv.file}`"
@@ -21,7 +21,8 @@
                 target="_blank"
                 class="bt"
               >
-                {{ data.cv.label }} <CVIcon />
+                {{ data.cv.label }}
+                <CVIcon />
               </a>
             </li>
           </ul>
@@ -31,7 +32,7 @@
               {{ line }}<br />
             </span>
           </p>
-          <p class="-gray">
+          <p class="-gray" v-if="data.experiences">
             <span v-for="(line, i) in data.subtitles" :key="i">
               // {{ line }}<br />
             </span>
@@ -91,10 +92,10 @@
 import { TimelineMax, Power3, Power0 } from 'gsap'
 import * as ScrollMagic from 'scrollmagic'
 import TextBlock from '../components/TextBlock.vue'
-import LinkedInIcon from '../components/LinkedInIcon.vue'
-import GithubIcon from '../components/GithubIcon.vue'
-import CVIcon from '../components/CVIcon.vue'
-import data from '../data/about.json'
+import LinkedInIcon from '../components/Icon/LinkedInIcon.vue'
+import GithubIcon from '../components/Icon/GithubIcon.vue'
+import CVIcon from '../components/Icon/CVIcon.vue'
+import { fetchData } from '@/utils'
 
 export default {
   name: 'AboutView',
@@ -103,17 +104,18 @@ export default {
     return {
       introTimeline: new TimelineMax(),
       headerTimeline: new TimelineMax(),
-      scroller: new ScrollMagic.Controller(),
-      data,
+      scrollMagicController: new ScrollMagic.Controller(),
+      data: {},
     }
   },
-  mounted() {
+  async mounted() {
+    this.data = await fetchData()
     this.playIntro()
     this.playHeaderBg()
   },
   beforeUnmount() {
-    this.scroller.destroy()
-    this.scroller = null
+    this.scrollMagicController.destroy()
+    this.scrollMagicController = null
     this.introTimeline.kill()
     this.introTimeline = null
     this.headerTimeline.kill()
@@ -159,7 +161,7 @@ export default {
         duration: duration,
       })
         .setTween(this.headerTimeline)
-        .addTo(this.scroller)
+        .addTo(this.scrollMagicController)
         .reverse(true)
     },
   },
@@ -173,6 +175,7 @@ export default {
     visibility: hidden;
   }
 }
+
 #about {
   .pic {
     pointer-events: none;
@@ -222,6 +225,7 @@ export default {
       margin: 0 1rem 0 0;
       color: var(--gray);
     }
+
     a {
       flex: 0 0 auto;
       display: flex;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 071ecc6..c6df3e8 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="home" class="wrapper">
-    <Intro />
-    <Gap />
+    <IntroScene />
+    <GapBlock />
 
     <TitleSection scene="curriculum">
       <TitleFunction params="/^.*$/gi" subtitle="&lt;WorkShowcase&gt;"
@@ -9,11 +9,11 @@
       >
     </TitleSection>
 
-    <Biz :isPlaying="isPlaying.Biz" />
-    <Gap />
+    <BizScene :isPlaying="isPlaying.Biz" />
+    <GapBlock />
 
-    <EarlyDays :isPlaying="isPlaying.EarlyDays" />
-    <Gap />
+    <EarlyDaysScene :isPlaying="isPlaying.EarlyDays" />
+    <GapBlock />
 
     <TitleSection scene="ArtPhiGamesTitle">
       <TitleFunction subtitle="background.bmp">
@@ -27,14 +27,14 @@
       </TitleFunction>
     </TitleSection>
 
-    <SuperMario />
-    <Gap />
+    <SuperMarioScene />
+    <GapBlock />
 
-    <Ghibli :isPlaying="isPlaying.Ghibli" />
+    <GhibliScene :isPlaying="isPlaying.Ghibli" />
 
-    <Wrapper />
+    <WrapperScene />
 
-    <Thanks :isPlayng="isPlaying.Potion" />
+    <ThanksScene :isPlayng="isPlaying.Potion" />
   </div>
 </template>
 
@@ -48,38 +48,38 @@ import {
   isReverse,
   isForward,
 } from '@/utils'
-import AudioMarioStart from '@/components/Characters/SuperMario/assets/smw_princess_help.ogg'
-import Intro from '@/components/Home/Intro.vue'
-import TitleSection from '@/components/Home/TitleSection.vue'
-import TitleFunction from '@/components/Home/TitleFunction.vue'
-import Biz from '@/components/Home/Biz.vue'
-import EarlyDays from '@/components/Home/EarlyDays.vue'
-import SuperMario from '@/components/Home/SuperMario.vue'
-import Ghibli from '@/components/Home/Ghibli.vue'
-import Wrapper from '@/components/Home/Wrapper.vue'
-import Thanks from '@/components/Home/Thanks.vue'
-import Gap from '@/components/Gap.vue'
+import AudioMarioStart from '../components/Characters/SuperMario/assets/smw_princess_help.ogg'
+import IntroScene from '../components/Home/IntroScene.vue'
+import BizScene from '../components/Home/BizScene.vue'
+import EarlyDaysScene from '../components/Home/EarlyDaysScene.vue'
+import SuperMarioScene from '../components/Home/SuperMarioScene.vue'
+import GhibliScene from '../components/Home/GhibliScene.vue'
+import WrapperScene from '../components/Home/WrapperScene.vue'
+import ThanksScene from '../components/Home/ThanksScene.vue'
+import GapBlock from '../components/GapBlock.vue'
+import TitleSection from '../components/TitleSection.vue'
+import TitleFunction from '../components/TitleFunction.vue'
 
 export default {
   name: 'HomeView',
   components: {
-    Intro,
+    IntroScene,
+    BizScene,
+    EarlyDaysScene,
+    SuperMarioScene,
+    GhibliScene,
+    WrapperScene,
+    ThanksScene,
+    GapBlock,
     TitleSection,
     TitleFunction,
-    Biz,
-    EarlyDays,
-    SuperMario,
-    Ghibli,
-    Wrapper,
-    Thanks,
-    Gap,
   },
   data() {
     return {
       audioMarioStart: new Audio(AudioMarioStart),
-      scroller: new ScrollMagic.Controller(),
-      scenes: {},
-      timeLines: {},
+      scrollMagicController: new ScrollMagic.Controller(),
+      scrollMagicScene: {},
+      timelines: {},
       tweeners: {},
       isPlaying: {
         Biz: false,
@@ -123,16 +123,16 @@ export default {
     // to avoid style issues
     removeBodyClass('is-playing-mario', 'blue-background')
     // timelines
-    Object.values(this.timeLines).forEach((timeLine) => timeLine.kill())
-    this.timeLines = {}
+    Object.values(this.timelines).forEach((timeLine) => timeLine.kill())
+    this.timelines = {}
     // tweeners
     Object.values(this.tweeners).forEach((tweener) => tweener.kill())
     this.tweeners = {}
     // scrollMagic
-    this.scroller.destroy(true)
-    this.scroller = null
-    Object.values(this.scenes).forEach((scene) => scene.destroy(true))
-    this.scenes = {}
+    this.scrollMagicController.destroy(true)
+    this.scrollMagicController = null
+    Object.values(this.scrollMagicScene).forEach((scene) => scene.destroy(true))
+    this.scrollMagicScene = {}
   },
   methods: {
     setupScenes() {
@@ -159,16 +159,16 @@ export default {
       Object.entries(scenesElements).forEach(([scene, element]) => {
         // tweeners animate timelines' progress, to add momentum
         this.tweeners[scene] = new TimelineMax()
-        this.timeLines[scene] = new TimelineMax({ paused: true })
+        this.timelines[scene] = new TimelineMax({ paused: true })
 
         // ScrollMagic scenes
-        this.scenes[scene] = new ScrollMagic.Scene({
+        this.scrollMagicScene[scene] = new ScrollMagic.Scene({
           triggerElement: element,
           offset: -this.$viewport.height / 2, // start half screen before
           duration: element.offsetHeight, // lasts for the element height
         })
           .setTween(this.tweeners[scene])
-          .addTo(this.scroller)
+          .addTo(this.scrollMagicController)
           .reverse(true)
           .setClassToggle(element, 'active')
 
@@ -176,7 +176,7 @@ export default {
         this.tweeners[scene]
           .to(element, 1, { autoAlpha: 1 }) // fake, just to have some progress
           .eventCallback('onUpdate', () => {
-            TweenLite.to(this.timeLines[scene], 0.5, {
+            TweenLite.to(this.timelines[scene], 0.5, {
               progress: this.tweeners[scene].progress(),
               ease: Power0.easeNone,
             })
@@ -211,31 +211,34 @@ export default {
     },
     manageLoops() {
       // play & stop loop animations based on each scene
-      this.scenes.myCV.on('enter', () => (this.isPlaying.Biz = false))
-      this.scenes.bizTitle.on('enter', () => (this.isPlaying.Biz = true))
-      this.scenes.biz1.on('enter', () => (this.isPlaying.Biz = true))
-      this.scenes.biz2.on('enter', () => (this.isPlaying.Biz = true))
-      this.scenes.biz3.on('enter', () => (this.isPlaying.Biz = true))
-      this.scenes.earlyTitle.on('enter', () => {
+      this.scrollMagicScene.myCV.on('enter', () => (this.isPlaying.Biz = false))
+      this.scrollMagicScene.bizTitle.on(
+        'enter',
+        () => (this.isPlaying.Biz = true)
+      )
+      this.scrollMagicScene.biz1.on('enter', () => (this.isPlaying.Biz = true))
+      this.scrollMagicScene.biz2.on('enter', () => (this.isPlaying.Biz = true))
+      this.scrollMagicScene.biz3.on('enter', () => (this.isPlaying.Biz = true))
+      this.scrollMagicScene.earlyTitle.on('enter', () => {
         this.isPlaying.Biz = true
         this.isPlaying.EarlyDays = true
       })
-      this.scenes.early1.on('enter', () => {
+      this.scrollMagicScene.early1.on('enter', () => {
         this.isPlaying.Biz = false
         this.isPlaying.EarlyDays = true
       })
-      this.scenes.early2.on('enter', (e) => {
+      this.scrollMagicScene.early2.on('enter', (e) => {
         if (isReverse(e)) {
           this.isPlaying.EarlyDays = true
         }
       })
-      this.scenes.early3.on('enter', () => {
+      this.scrollMagicScene.early3.on('enter', () => {
         removeBodyClass('is-playing-mario', 'blue-background')
       })
-      this.scenes.artPhiGamesTitle.on('enter', () => {
+      this.scrollMagicScene.artPhiGamesTitle.on('enter', () => {
         removeBodyClass('is-playing-mario', 'blue-background')
       })
-      this.scenes.mario
+      this.scrollMagicScene.mario
         .on('enter', (e) => {
           if (isForward(e)) {
             this.isPlaying.EarlyDays = false
@@ -250,34 +253,34 @@ export default {
           }
           removeBodyClass('blue-background')
         })
-      this.scenes.ghibli
+      this.scrollMagicScene.ghibli
         .on('enter', () => {
           this.isPlaying.Ghibli = true
           removeBodyClass('is-playing-mario')
           addBodyClass('blue-background')
         })
         .on('leave', () => removeBodyClass('blue-background'))
-      this.scenes.ghibli2
+      this.scrollMagicScene.ghibli2
         .on('enter', () => addBodyClass('blue-background'))
         .on('leave', () => removeBodyClass('blue-background'))
-      this.scenes.ghibli3
+      this.scrollMagicScene.ghibli3
         .on('enter', () => addBodyClass('blue-background'))
         .on('leave', () => removeBodyClass('blue-background'))
-      this.scenes.ghibli4
+      this.scrollMagicScene.ghibli4
         .on('enter', () => addBodyClass('blue-background'))
         .on('leave', () => removeBodyClass('blue-background'))
-      this.scenes.wrapper.on('enter', () => {
+      this.scrollMagicScene.wrapper.on('enter', () => {
         removeBodyClass('blue-background')
         this.isPlaying.Ghibli = true
         this.isPlaying.Potion = false
       })
-      this.scenes.thanks.on('enter', () => {
+      this.scrollMagicScene.thanks.on('enter', () => {
         this.isPlaying.Ghibli = false
         this.isPlaying.Potion = true
       })
     },
     sceneMyCV() {
-      this.timeLines.myCV
+      this.timelines.myCV
         .set('#curriculum .title-container', { autoAlpha: 1 }) // show animations
         .addLabel('start', 0)
         .from(
@@ -310,7 +313,7 @@ export default {
         })
     },
     sceneBizTitle() {
-      this.timeLines.bizTitle
+      this.timelines.bizTitle
         // next scene characters
         .set('#filomena', {
           autoAlpha: 0,
@@ -369,7 +372,7 @@ export default {
         )
     },
     sceneBizZen() {
-      this.timeLines.biz1
+      this.timelines.biz1
         .addLabel('start', 0)
         .from(
           '#zen',
@@ -403,7 +406,7 @@ export default {
         )
     },
     sceneBizEverybody() {
-      this.timeLines.biz2
+      this.timelines.biz2
         .addLabel('start', 0)
         .to(
           '#zen',
@@ -429,7 +432,7 @@ export default {
         )
     },
     sceneBizEnding() {
-      this.timeLines.biz3
+      this.timelines.biz3
         .addLabel('start', 0)
         .to(
           '#dino',
@@ -545,7 +548,7 @@ export default {
         )
 
       // EarlyDays()
-      this.timeLines.earlyTitle
+      this.timelines.earlyTitle
         .set('.pepe-scenery', { autoAlpha: 0 })
         .set('#biz1 .container', { autoAlpha: 1 })
         .addLabel('start', 0)
@@ -617,20 +620,20 @@ export default {
         'start'
       )
 
-      this.timeLines.early1
+      this.timelines.early1
         .set('#biz1 .container', { autoAlpha: 0 })
         .to('.pepe-scenery', 8, { autoAlpha: 1 })
     },
     sceneFloatingHead() {
-      this.timeLines.early2.addLabel('start', 0)
+      this.timelines.early2.addLabel('start', 0)
     },
     sceneSunset() {
-      this.timeLines.early3
+      this.timelines.early3
         .set('#Mario .container', { autoAlpha: 0 })
         .to('.pepe-scenery', 8, { autoAlpha: 0 })
     },
     sceneArtPhiGames() {
-      this.timeLines.artPhiGamesTitle
+      this.timelines.artPhiGamesTitle
         .set('#Mario .container', { autoAlpha: 0 })
         .addLabel('start', 1)
         .to('#ArtPhiGamesTitle .title-container', 1, { autoAlpha: 1 })
@@ -769,17 +772,17 @@ export default {
         scale: 0.5,
       })
 
-      this.timeLines.ghibli
+      this.timelines.ghibli
         .addLabel('start', 0)
         .to('#Mario .container', 4, { autoAlpha: 0 }, 'start')
         .to('#Ghibli .container', 4, { autoAlpha: 1 }, 'start')
 
-      this.timeLines.ghibli2.addLabel('start', 0)
-      this.timeLines.ghibli3.addLabel('start', 0)
-      this.timeLines.ghibli4.addLabel('start', 0)
+      this.timelines.ghibli2.addLabel('start', 0)
+      this.timelines.ghibli3.addLabel('start', 0)
+      this.timelines.ghibli4.addLabel('start', 0)
     },
     sceneWrapper() {
-      this.timeLines.wrapper
+      this.timelines.wrapper
         .addLabel('start', 0)
         .to('#Ghibli .container', 2, { autoAlpha: 0 }, 'start')
         .from('#wrapperTitle .static-container', 2, { autoAlpha: 1 })
@@ -820,7 +823,7 @@ export default {
         duration,
       })
         .setTween(tweener)
-        .addTo(this.scroller)
+        .addTo(this.scrollMagicController)
 
       return timeline
     },
@@ -837,6 +840,7 @@ export default {
   font-weight: normal;
   font-style: normal;
 }
+
 #home {
   .scene .static-container {
     padding: 0;
diff --git a/src/views/Preview.vue b/src/views/Preview.vue
index afefaac..033f28d 100644
--- a/src/views/Preview.vue
+++ b/src/views/Preview.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="preview">
-    <Component
+    <component
       :is="$route.params.character"
       :isPlaying="isPlaying"
       class="preview"