Updated landing page. New background, changed mono space font to Hack, added different animation of text

css/fonts.css

@@ -1,33 +1,13 @@
-/* Generated by Font Squirrel (http://www.fontsquirrel.com) */
-
 /*
- * Monosans
+ * Hack
 ================================================================================ */
 @font-face {
-  font-family: 'Space Mono';
+    font-family: 'hackregular';
-  font-style: normal;
+    src: url('fonts/hack/Hack-Regular-webfont.woff2') format('woff2'),
-  font-weight: 400;
+         url('fonts/hack/Hack-Regular-webfont.woff') format('woff'),
-  src: url('../fonts/monosans/space-mono-v2-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local('Space Mono'), local('SpaceMono-Regular'),
-       url('fonts/monosans/space-mono-v2-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('fonts/monosans/space-mono-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('fonts/monosans/space-mono-v2-latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('fonts/monosans/space-mono-v2-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('fonts/monosans/space-mono-v2-latin-regular.svg#SpaceMono') format('svg'); /* Legacy iOS */
-}
-
-/*
- * DroidSans
-================================================================================ */
-@font-face {
-    font-family: 'droid_sans_monoregular';
-    src: url('fonts/DroidFonts/DroidSansMono-webfont.eot');
-    src: url('fonts/DroidFonts/DroidSansMono-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/DroidFonts/DroidSansMono-webfont.woff') format('woff'),
-         url('fonts/DroidFonts/DroidSansMono-webfont.ttf') format('truetype'),
-         url('fonts/DroidFonts/DroidSansMono-webfont.svg#droid_sans_monoregular') format('svg');
     font-weight: normal;
     font-style: normal;
+
 }
 
 /*

css/layout.css

@@ -24,56 +24,36 @@
 
 body { background: #0f0f0f; }
 
+.icon-down-circle {
+    opacity: 0;
+    -webkit-transition: opacity 2s ease-in;
+       -moz-transition: opacity 2s ease-in;
+        -ms-transition: opacity 2s ease-in;
+         -o-transition: opacity 2s ease-in;
+            transition: opacity 2s ease-in;
+}
+
+.icon-down-circle.load {
+    opacity: 1;
+}
+
 /* ------------------------------------------------------------------ */
 /* b. Header Styles
 /* ------------------------------------------------------------------ */
 
-#header-hi {
+#header-eng-div p {
-   float: left;
+    opacity: 0;
-   color: #11ABB0;
+    -webkit-transition: opacity 1.5s ease-in;
+       -moz-transition: opacity 1.5s ease-in;
+        -ms-transition: opacity 1.5s ease-in;
+         -o-transition: opacity 1.5s ease-in;
+            transition: opacity 1.5s ease-in;
 }
 
-#header-eng {
+#header-eng-div p.load {
-   float: left;
+    opacity: 1;
-   display: none;
-   color: #11ABB0;
 }
 
-#header-scr {
-   float: left;
-   color: #11ABB0;
-   display: none;
-}
-
-#header-empt {
-   float: left;
-   color: #11ABB0;
-   display: none;
-}
-
-#header-hi-div {
-}
-
-@media (max-width: 768px) {
-  #header-eng-div {
-    word-break: break-all;
-  }
-  #header-scr-div {
-    word-break: break-all;
-  }
-}
-
-#header-eng-div {
-  margin-top: 4px;
-}
-
-#header-scr-div {
-  margin-top: 4px;
-}
-
-#header-empt-div {
-  margin-top: 4px;
-}
 header {
    position: relative;
    height: 800px;
@@ -105,29 +85,30 @@ header .banner {
 
 header .banner-text { width: 100%; }
 header .banner-text h1 {
-   font: 60px/1.1em 'droid_sans_monoregular', monospace;
+   font: 100px/1.1em 'hackregular', monospace;
-   color: #fff;
+   color: #303030;
    letter-spacing: -2px;
-   margin: 0 auto 18px auto;
+   margin: 500px auto 50px auto;
-   text-shadow: 0px 1px 3px rgba(0, 0, 0, .8);
+   text-align: center;
-   text-align: left;
+   vertical-align: center;
-   vertical-align: top;
+   min-height: 20px;
-   min-height: 270px;
    width: 100%;
+   font-weight: bold;
 }
 header .banner-text a, a:visited{ color: #FFFFFF; }
 header .banner-text a:hover{ color: #11ABB0; }
 
 header .banner-text h3 {
-   font: 18px/1.9em 'librebaskerville-regular', serif;
+   font: 40px/1.1em 'hackregular', monospace;
-   color: #A8A8A8;
+   color: #606060;
-   margin: 0 auto;
+   margin: 0 auto 50px auto;
-   width: 70%;
+   width: 100%;
-   text-shadow: 0px 1px 2px rgba(0, 0, 0, .5);
+   text-align: center;
+   vertical-align: center;
 }
 header .banner-text h3 span,
 header .banner-text h3 a {
-   color: #fff;
+   color: #606060;
 }
 header .banner-text hr {
    width: 60%;
@@ -138,17 +119,29 @@ header .banner-text hr {
 
 /* header social links */
 header .social {
+   opacity: 0;
    margin: 24px 0;
    padding: 0;
    font-size: 30px;
-   text-shadow: 0px 1px 2px rgba(0, 0, 0, .8);
+
+    -webkit-transition: opacity 2s ease-in;
+       -moz-transition: opacity 2s ease-in;
+        -ms-transition: opacity 2s ease-in;
+         -o-transition: opacity 2s ease-in;
+            transition: opacity 2s ease-in;
 }
 header .social li {
    display: inline-block;
+   text-align: center;
    margin: 0 15px;
    padding: 0;
 }
-header .social li a { color: #fff; }
+
+header .social.load {
+    opacity: 1;
+}
+
+header .social li a { color: #606060; }
 header .social li a:hover { color: #11ABB0; }
 
 /* scrolldown link */
@@ -157,13 +150,12 @@ header .scrolldown a {
    bottom: 30px;
    left: 50%;
    margin-left: -29px;
-   color: #fff;
+   color: #606060;
    display: block;
    height: 42px;
    width: 42px;
    font-size: 42px;
    line-height: 42px;
-   color: #fff;
    border-radius: 100%;
 
    -webkit-transition: all .3s ease-in-out;
@@ -223,7 +215,7 @@ ul#nav li a {
    line-height: 32px;
 	text-decoration: none;
    text-align: left;
-   color: #fff;
+   color: #606060;
 
 	-webkit-transition: color .2s ease-in-out;
 	-moz-transition: color .2s ease-in-out;
@@ -1020,7 +1012,7 @@ call-to-action .button {
 #contact-pgp {
    float: left;
    margin-left: 7px;
-   font:20px/1.1em 'droid_sans_monoregular', monospace;
+   font:20px/1.1em 'hackregular', monospace;
    margin-top: -4px;
 }
 

css/media-queries.css

@@ -14,9 +14,15 @@
     /* header styles
    ------------------------------------------------------------------ */
    header .banner-text h1 {
-      font: 80px/1.1em 'DroidSansMono', monospace;
+      font: 100px/1.1em 'hackregular', monospace;
+      margin: 150px auto 30px auto;
       letter-spacing: -1px;      
-      margin: 0 auto 12px auto;
+      font-weight: bold;
+   }
+   header .banner-text h3 {
+      font: 17px/1.9em 'hackregular', monospace;
+      margin: 0 auto 30px auto;
+      width: 100%;
    }
 
 }
@@ -29,12 +35,15 @@
    ------------------------------------------------------------------ */
    header .banner { padding-bottom: 12px; }
    header .banner-text h1 {
-      font: 78px/1.1em 'DroidSansMono', monospace;
+      font: 100px/1.1em 'hackregular', monospace;
+      margin: 45px auto 30px auto;
       letter-spacing: -1px;      
+      font-weight: bold;
    }
    header .banner-text h3 {
-      font: 17px/1.9em 'librebaskerville-regular', serif;
+      font: 17px/1.9em 'hackregular', monospace;
-      width: 80%;
+      margin: 0 auto 30px auto;
+      width: 100%;
    }
    header .banner-text hr {
       width: 65%;
@@ -112,7 +121,7 @@
 	   width: 48px;
 		height: 48px;
 		text-align: left;
-		background-color: #11ABB0;
+		background-color: #303030;
 		position: relative;
       border: none;
       float: right;
@@ -191,9 +200,13 @@
       padding-bottom: 12px;
       padding-top: 6px;
    }
-   header .banner-text h1 { font: 68px/1.1em 'DroidSansMono', monospace; }
+   header .banner-text h1 { 
+      font: 68px/1.1em 'hackregular', monospace; 
+      margin: 0 auto 30px auto;
+  }
    header .banner-text h3 { 
-      font: 16px/1.9em 'librebaskerville-regular', serif;
+      font: 16px/1.0em 'hackregular', monospace;
+      margin: 0 auto 30px auto;
       width: 85%;
    }
    header .banner-text hr {
@@ -351,13 +364,14 @@
    -------------------------------------------------------------------- */
    header .banner { padding-top: 24px; }
    header .banner-text h1 {
-      font: 25px/1.1em 'DroidSansMono', monospace;      
+      font: 65px/1.1em 'hackregular', monospace;      
-      margin: 0 auto 24px auto;
+      margin: 175px auto 30px auto;
-      min-height: 230px;
+      min-height: 20px;
-      margin-top: 20px;
+      font-weight: bold;
    }
    header .banner-text h3 {
-      font: 14px/1.9em 'librebaskerville-regular', sans-serif;
+      font: 14px/1.2em 'hackregular', monospace;
+      margin: 0 auto 30px auto;
       width: 90%;
    }
   
@@ -373,17 +387,3 @@
    footer .social-links li { margin-left: 14px; }   
 
 }
-
-@media only screen and (max-width: 400px) {
-header .banner-text h1 {
-	min-height: 160px;
-}
-}
-
-
-
-
-
-
-
-

index.html

@@ -58,25 +58,17 @@
 
       <div class="row banner">
          <div class="banner-text">
-            <h1 class="responsive-headline">
+             <h1 class="responsive-headline">
-		      <div id="header-hi-div">
+		      <div class="header-hi-div">
-		        <span id="header-hi">[~]$&nbsp;</span>
+				    <span id="header-hi-text"></span>
-				<span id="header-hi-text"></span>
 			  </div>
+             </h1>
+
+             <h3 class="responsive-headline">
 		      <div id="header-eng-div">
-				<span id="header-eng">[~]$&nbsp;</span>
+				<p>Electrical Engineer & Computer Scientist</p>
-				<span id="header-eng-text"></span>
 			  </div>
-			  <div id="header-scr-div">
+             </h4>
-		        <span id="header-scr">[~]$&nbsp;</span>
-				<span id="header-scr-text"></span>
-			  </div>
-              <div id="header-empt-div">
-			    <span id="header-empt">[~]$
-				  <span style="color: #ffffff;">█</span>
-				</span>
-			  </div>
-            </h1>
 	    
 
             <ul class="social">
@@ -175,9 +167,7 @@
                 <p class="info">Gymnasium<span>&bull;</span>
                 <em class="date">September 2005 - July 2011</em></p>
 
-                <p>
+                <p>Comparable to a university-preparatory school with Latin as additional language.</p>
-      	  Comparable to a university-preparatory school with Latin or Ancient Greek as additional language.
-                </p>
 
              </div>
 
@@ -619,64 +609,6 @@
    <script src="js/init.js"></script>
    <script src="js/typed.js"></script>
 
-   <script>
-    function toggle(id) {
-      document.getElementById(id).style.display = 'inline-block';
-    } 
-
-    function sleep(milliseconds) {
-	  var start = new Date().getTime();
-	    for (var i = 0; i < 1e7; i++) {
-	      if ((new Date().getTime() - start) > milliseconds){
-	        break;
-	      }
-	    }
-      }
-
-      /** YAKS, RECURSION **/
-      var typed = new Typed('#header-hi-text', {
-      strings: ["Hi, I'm Dennis"],
-      typeSpeed: 45,
-	  startDelay: 200,
-      onComplete: function(){
-        $( "span" ).siblings( ".typed-cursor" ).css( "animation", "none" );
-        $( "span" ).siblings( ".typed-cursor" ).css( "opacity", "0" );
-        $( "span" ).siblings( ".typed-cursor" ).css( "position", "fixed" );
-
-	    sleep(200);
-	    toggle('header-eng');
-
-        var typed = new Typed('#header-eng-text', {
-          strings: ["I'm an electrical engineer and computer scientist"],
-          typeSpeed: 45,
-          startDelay: 500,
-          onComplete: function(){
-              $( "span" ).siblings( ".typed-cursor" ).css( "opacity", "0" );
-              $( "span" ).siblings( ".typed-cursor" ).css( "position", "fixed" );
-              $( "span" ).siblings( ".typed-cursor" ).css( "animation", "none" );
-
-			  sleep(200);
-              toggle('header-scr')
-              var typed = new Typed('#header-scr-text', {
-                strings: ["Scroll down and learn more"],
-                typeSpeed: 45,
-                startDelay: 500,
-                onComplete: function(){
-                  $( "span" ).siblings( ".typed-cursor" ).css( "animation", "none" );
-                  $( "span" ).siblings( ".typed-cursor" ).css( "opacity", "0" );
-                  $( "span" ).siblings( ".typed-cursor" ).css( "position", "fixed" );
-
-				  sleep(200);
-                  toggle('header-empt')
-                }
-              });
-          }
-        });
-      }
-      });
-   </script>
-
-
 </body>
 
 </html>

js/init.js

@@ -6,16 +6,37 @@
 
  jQuery(document).ready(function($) {
 
+/*----------------------------------------------------*/
+/* Typed Header    
+------------------------------------------------------ */
+
+    var typed = new Typed('#header-hi-text', {
+        strings: ["Hi, I'm Dennis "],
+        typeSpeed: 45,
+	    startDelay: 200,
+        onComplete: function() {
+            $('#header-eng-div p').addClass('load');
+            setTimeout(function() { 
+                $('.social').addClass('load');
+            }, 1000);
+            setTimeout(function() { 
+                $('.icon-down-circle').addClass('load');
+            }, 1000);
+        }
+
+    });
+
+
 /*----------------------------------------------------*/
 /* FitText Settings
 ------------------------------------------------------ */
 
     setTimeout(function() {
-	   $('h1.responsive-headline').fitText(1, { minFontSize: '8px', maxFontSize: '45px' });
+	   $('h1.responsive-headline').fitText(1, { minFontSize: '30px', maxFontSize: '75px' });
+	   $('h3.responsive-headline').fitText(1, { minFontSize: '8px', maxFontSize: '20px' });
 	 }, 100);
 
 
-
 /*----------------------------------------------------*/
 /* Smooth Scrolling
 ------------------------------------------------------ */