A few tweaks

scripts/v2.js

@@ -0,0 +1,19 @@
+
+
+
+
+const translate = document.querySelectorAll(".translate");
+var watermark = document.querySelector(".hero-watermark");
+var skewedBg = document.querySelector(".skewed-bg");
+
+
+
+window.addEventListener("scroll", () => {
+   
+    var scroll = window.pageYOffset;
+    translate.forEach(element => {
+        let speed = element.dataset.speed;
+        element.style.transform = "translateY(" + (scroll * speed) + "px)";
+    });
+    
+});

v2.css

@@ -14,6 +14,7 @@ html {
     font-size: 18px;
     line-height: 1.5;
     color: #222;
+    position: relative;
 }
 
 :root {
@@ -222,7 +223,7 @@ input:focus {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-right: 50px;
+    margin-right: -20px;
 }
 
 #benjamin-hero-text {
@@ -260,7 +261,7 @@ input:focus {
 }
 
 .hero-text-wrapper {
-    width: 300px;
+    width: 200px;
     padding-top: 100px;
     align-items: flex-start;
     margin-left: 50px;
@@ -280,6 +281,38 @@ input:focus {
     padding: 12px 23px;
 }
 
+.scroll-down-link-block {
+    position: absolute;
+    background-color: white;
+    color: #222;
+    font-size: 36px;
+    font-weight: 700;
+    top: -200px;;
+    right: 40vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 70px;
+    height: 80px;
+    border-radius: 10px;
+    padding-top: 20px;
+    cursor: pointer;
+}
+
+.scroll-link-icon {
+    transform: rotate(90deg);
+    font-size: inherit;
+    font-weight: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    line-height: 1;
+    left: 3px;
+}
+
 .hero-text-block {
     font-size: 24px;
     font-weight: 500;
@@ -350,6 +383,22 @@ input:focus {
 
 
 
+/*Animations*/
+
+.translate {
+    
+}
+
+
+
+
+
+
+
+
+
+
+
 
 
 

v2.html

@@ -36,7 +36,7 @@
     
     <section style="z-index:1;">
         <div>
-            <div class="hero-graphic-wrapper">
+            <div class="hero-graphic-wrapper translate" data-speed=".3">
                 <div id="benjamin-hero-text">Benjamin</div>
                 <div id="toby-hero-text">Toby</div>
                 <div class="hero-graphic-block">
@@ -59,9 +59,25 @@
         </div>
     </section>
     
-    <div class="hero-watermark">T-BEN</div>
     
-    <section style="background-color:var(--main-color);">
+    
+    
+    
+    
+    
+    <div class="hero-watermark" data-speed=".2">T-BEN</div>
+    
+    
+    
+    
+    
+    
+    
+    <section style="background-color:var(--main-color);" class="translate" data-speed=".15">
+        <div  class="scroll-down-link-block">
+                <div class="scroll-link-icon">&rsaquo;</div>
+        </div>
+        
         <div>
             <div class="container-darkbg">
                 <h2>Some of my Work</h2>
@@ -69,11 +85,25 @@
             </div>
             <div></div>
         </div>
-        <div class="skewed-bg"></div>
+        <div class="skewed-bg"  data-speed=".6"></div>
     </section>
     
+    
+    
+    
+    
+    
+    
     <section style="height: 2000px"></section>
     
+    
+    
+    
+    
+    
+    
+    <script src="scripts/v2.js"></script>
+    
 </body>