Added intro

scripts/v2.js

@@ -20,4 +20,14 @@ window.addEventListener("scroll", () => {
 //    skewedBg.style.transform = "translateY(" + (scroll * skewedBg.dataset.speed) + "px) skewY(-3deg)";
     watermark.style.transform = "translateY(" + (scroll * watermark.dataset.speed) + "px) translateX(-50%)";
     
+});
+
+//window.scrollBy({
+//	top: -100,
+//	behavior: "smooth"
+//});
+
+window.addEventListener("load", () => {
+    document.getElementById("skewed-bg").classList.add("skewed-bg");
+    document.getElementById("preloader").className = "preloader";
 });

v2.css

@@ -42,11 +42,11 @@ header {
 }
 
 header > a {
-    font-family: Impact;
+    font-family: hennigar;
     font-size: 24px;
     text-transform: uppercase;
     border: none;
-    letter-spacing: 0px;
+    letter-spacing: 1px;
 }
 
 nav {
@@ -105,13 +105,15 @@ a:hover {
 }
 
 h1, h2, h3, h4 {
-    font-family: Impact;
+    font-family: hennigar;
 	margin-top: 0px;
 	margin-bottom: 15px; 
 	width: 100%;    
     line-height: 1.2;    
 	color: inherit;
     text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: normal;
 }
 
 h1 {
@@ -120,7 +122,7 @@ h1 {
 }
 
 h2 {
-	font-size: 24px;
+	font-size: 30px;
 }
 
 h3 {
@@ -192,6 +194,36 @@ input:focus {
 
 /*................................................... General classes and IDs */
 
+.preloader-init {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--main-color);
+    bottom: 0;
+    left: 0;
+    z-index: 2000;
+}
+
+.preloader {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--main-color);
+    bottom: 0;
+    left: 0;
+    z-index: 2000;
+    animation: preloaderexit 1s;
+    animation-fill-mode: both;
+    animation-delay: 1s;
+    animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 );
+}
+
+@keyframes preloaderexit {
+    0%{display: none; transform: none; opacity: 1; height: 100vh;}
+    99%{transform: skewY(-3deg); opacity: 1; height: 0px; bottom: -200px;}
+    100%{display: none; transform: skewY(-3deg); opacity: 0; height: 0px;}
+}
+
 .aside-header {
     position: fixed;
     top: 40px;
@@ -227,21 +259,21 @@ input:focus {
 }
 
 #benjamin-hero-text {
-    font-family: Impact;
+    font-family: hennigar;
-    font-size: 90px;
+    font-size: 105px;
     text-transform: uppercase;
-    letter-spacing: -2px;
+    letter-spacing: 0px;
     color: var(--main-color);
 }
 
 #toby-hero-text {
-    font-family: Impact;
+    font-family: hennigar;
-    font-size: 180px;
+    font-size: 205px;
     text-transform: uppercase;
-    letter-spacing: -4px;
+    letter-spacing: 0px;
     color: var(--main-color);
     line-height: 1;
-    margin-top: -48px;
+    margin-top: -63px;
 }
 
 .hero-graphic-block {
@@ -249,7 +281,7 @@ input:focus {
     height: 300px;
     background-color: var(--main-color);
     border-radius: 20px;
-    margin-top: -30px;
+    margin-top: -35px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -347,13 +379,14 @@ input:focus {
 
 .hero-watermark {
     position: absolute;
-    font-size: 30em;
+    font-size: 35em;
-    font-family: Impact;
+    font-family: hennigar;
     z-index: -1;
-    top: 20px;
+    top: -20px;
     left: 50%;
     transform: translateX(-50%);
-    color: rgba(0,0,0,0.05)
+    color: rgba(0,0,0,0.05);
+    letter-spacing: 2px;
 }
 
 .below-fold {
@@ -370,6 +403,15 @@ input:focus {
     background-color: var(--main-color);
     top: -200px;
     z-index: -1;
+    animation: skewintro 1.2s;
+    animation-fill-mode: both;
+    animation-delay: 1s;
+    animation-timing-function: cubic-bezier( 0.39, 0.575, 0.565, 1 );
+}
+
+@keyframes skewintro {
+    0%{transform: none; top: 0;}
+    100%{transform: skewY(-3deg); top: -200px;}
 }
 
 .container-darkbg {

v2.html

@@ -11,7 +11,7 @@
     <meta name="description" content="Web/Graphic/Motion Designer, UI UX Designer, Frontend Web Developer">
     <link rel="shortcut icon" type="image/x-icon" href="/images-dw/favicon.ico">
     <link href="https://fonts.googleapis.com/css?family=Lato:400,500,700,800|Impact" rel="stylesheet">
-    <link href="http://fonts.cdnfonts.com/css/impacted" rel="stylesheet">
+    <link href="http://fonts.cdnfonts.com/css/hennigar" rel="stylesheet">
 
     <link rel="stylesheet" href="v2.css">
 
@@ -21,6 +21,8 @@
 
 <body><!-- ...................................................................................................................... Body -->
     
+    <div class="preloader-init" id="preloader"></div>
+    
     <header>
         <a>Tben.Design</a>
         <nav>
@@ -38,7 +40,7 @@
     
     <section style="z-index:1;">
         <div>
-            <div class="hero-graphic-wrapper translate" data-speed=".3">
+            <div class="hero-graphic-wrapper translate" data-speed=".25">
                 <div id="benjamin-hero-text">Benjamin</div>
                 <div id="toby-hero-text">Toby</div>
                 <div class="hero-graphic-block">
@@ -46,7 +48,7 @@
                 </div>
             </div>
             
-            <div class="hero-text-wrapper translate" data-speed=".2">
+            <div class="hero-text-wrapper translate" data-speed=".15">
                 <div class="hero-text-block">
                     Hi. I'm a
                     <h1>
@@ -87,7 +89,7 @@
             </div>
             <div></div>
         </div>
-        <div class="skewed-bg"></div>
+        <div id="skewed-bg"></div>
     </section>