Minor changes

src/App.svelte

@@ -3,44 +3,16 @@
   import StartVideo from './assets/StartVideo.gif'
   import ScrollTextComponent from './lib/ScrollTextComponent.svelte'
   import { Parallax, ParallaxLayer, StickyLayer } from 'svelte-parallax';
-  import ZSpacer from './lib/ZSpacer.svelte';
+  import ZSpacer from './lib/Universal/ZSpacer.svelte';
+  import Cube3D from './lib/Cube3D.svelte';
+  import WeAreText from './lib/WeAreText.svelte';
 
   window.onload = function() {
-    window.scrollTo(0, 100);
+    window.scrollTo(0, 100); // Real
+    //window.scrollTo(0, 3000); // debug
   };
 
   let scrollPos: number = 0;
-  let rotation: number = 0;
-
-  let startPosAnim: number = 150;
-  let endPosAnim: number = 1600;
-
-  function rotateCube() {
-    //incremtent
-    rotation += 90;
-  }
-  
-
-  $: {
-    let time = (scrollPos - startPosAnim)/endPosAnim;
-    rotation = lerp(0, 360, clamp(time, 0, 1), true);
-    console.log(time + " -> " + rotation);
-  }
-
-
-  function lerp(from: number, to: number, time: number, clamped: boolean = false) : number {
-    const lerped: number = from + (to - from) * time;
-    
-    if (clamped) {
-      return from < to ? clamp(lerped, from, to) : clamp(lerped, to, from);
-    }
-
-    return lerped;
-  }
-
-  function clamp(value: number, min: number, max: number): number {
-      return Math.min(Math.max(value, min), max);
-  }
 </script>
 
 <svelte:window bind:scrollY={scrollPos} />
@@ -53,31 +25,29 @@
     <a href="#about">About</a>
   </div> 
 
-  <Parallax sections={3} config={{stiffness: 0.2, damping: 0.3}}>
+  <Parallax sections={10} config={{stiffness: 0.2, damping: 0.3}}>
     <ParallaxLayer rate={0} span={3} style="background-color: #242424;" />
 
-    <StickyLayer offset={{ top: 0, bottom: 2 }}>
-      <button on:click={rotateCube}>
-        Rotate
-      </button>
-
-      <div class="horizontal" style="padding: 200px;">
-        <div>
-          test {scrollPos}
-        </div>
-    
+    <StickyLayer class="align-center" offset={{ top: 1, bottom: 6.5 }}>
+      <div class="horizontal" style="padding: 200px;">    
         <ZSpacer/>
-    
-        <div id="cube-3d-container">
-          <div id="cube3d" style="transform:rotateY({rotation}deg);">
-            <div class="front">1</div>
-            <div class="back">2</div>
-            <div class="right">3</div>
-            <div class="left">4</div>
-            <div class="top">5</div>
-            <div class="bottom">6</div>
-          </div>
-        </div>
+        <Cube3D/>
+      </div>
+    </StickyLayer>
+
+    <StickyLayer class="align-center" offset={{ top: 0, bottom: 6.5 }}>
+      <WeAreText/>
+    </StickyLayer>
+
+    <StickyLayer offset={{ top: 0, bottom: 10 }}>
+      <div>
+        {scrollPos}
+      </div>
+    </StickyLayer>
+
+    <StickyLayer offset={{ top: 5.4, bottom: 10 }} style="background-color: #242424;">
+      <div class="align-center" style="font-size: 100px; padding-top: 200px;">
+        The deprived devs
       </div>
     </StickyLayer>
   </Parallax>
@@ -106,6 +76,6 @@
 </main>
 
 <style>
-@import './cube3d.css';
+
 </style>