diff --git a/images/placeholder-portrait-2.png b/images/placeholder-portrait-2.png
new file mode 100644
index 0000000..9640303
Binary files /dev/null and b/images/placeholder-portrait-2.png differ
diff --git a/scripts/v2.js b/scripts/v2.js
index 7a00baf..91e6d53 100644
--- a/scripts/v2.js
+++ b/scripts/v2.js
@@ -155,7 +155,6 @@ sectionOneIo.observe(translate[4]);
 //############################################################################## -- Hamburger
 
 document.querySelector(".hamburger-wrapper").addEventListener("click", hamburgerMenuToggle);
-//document.querySelector(".hamburger-wrapper").addEventListener("blur", hamburgerCLickOut);
 
 let hc = 0;
 
@@ -180,11 +179,12 @@ window.addEventListener("resize", () => {
     }
 });
 
-//function hamburgerCLickOut() {
-//    document.querySelector("nav").className = "none";
-//    document.querySelector("#aside-heder-block").className = "aside-header";
-//    hc = 0;
-//}
+
+document.querySelector(".hamburger-wrapper").onblur = () => {
+    document.querySelector("nav").className = "none";
+    document.querySelector("#aside-heder-block").className = "aside-header";
+    hc = 0;
+}
 
 
 
diff --git a/v2.css b/v2.css
index ccbce2a..2fc9a4d 100644
--- a/v2.css
+++ b/v2.css
@@ -45,12 +45,15 @@ header {
 }
 
 header > a {
-    font-family: "Anton";
+    font-family: "Squada One";
     font-size: 36px;
     text-transform: uppercase;
     border: none;
-    letter-spacing: 1px;
+    letter-spacing: -1px;
     color: inherit;
+    position: relative;
+    z-index: 100;
+    line-height: 36px;
 }
 
 nav {
@@ -63,8 +66,9 @@ nav {
 
 nav > a {
     margin-bottom: 10px;
-    font-size: 14px;
+    font-size: 16px;
     color: inherit;
+    font-weight: 600;
 }
 
 nav > a:hover {
@@ -123,7 +127,7 @@ a:hover {
 }
 
 h1, h2, h3, h4 {
-    font-family: "Anton";
+    font-family: "Squada One";
 	margin-top: 0px;
 	margin-bottom: 15px; 
 	width: 100%;    
@@ -172,6 +176,22 @@ span {
     line-height: inherit;
 }
 
+span > a {
+    font-size: inherit;
+    font-weight: inherit;
+    font-family: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+    line-height: inherit;
+    border: inherit;
+    border-color: inherit;
+}
+
+span > a:hover {
+    border: inherit;
+    border-color: inherit;
+}
+
 
 
 
@@ -219,6 +239,10 @@ input:focus {
 
 /*############################################################# -- General classes and IDs -- */
 
+.nav-mobile {
+    
+}
+
 .preloader-init {
     position: fixed;
     width: 100vw;
@@ -368,8 +392,8 @@ input:focus {
 }
 
 @keyframes hamburgershow {
-    0% {display: flex; opacity: 0; transform: translateX(-100);}
-    100% {display: flex; opacity: 1; transform: none;}
+    0% {display: flex; opacity: 0; left: -100px;}
+    100% {display: flex; opacity: 1;left: 0;}
 }
 
 
@@ -422,7 +446,7 @@ input:focus {
 }
 
 #toby-hero-text {
-    font-family: "Anton";
+    font-family: "Squada One";
     font-size: 205px;
     text-transform: uppercase;
     letter-spacing: 0px;
@@ -445,6 +469,7 @@ input:focus {
 .hero-graphic-block > img {
     position: relative;
     top: -40px;
+    width: 400px;
 }
 
 .hero-text-wrapper {
@@ -552,7 +577,7 @@ input:focus {
 .hero-watermark {
     position: absolute;
     font-size: 40em;
-    font-family: "Anton";
+    font-family: "Squada One";
     z-index: -1;
     top: -20px;
     color: rgba(0,0,0,0.05);
@@ -612,7 +637,7 @@ input:focus {
 }
 
 .section-watermark {
-    font-family: "Anton";
+    font-family: "Squada One";
     position: absolute;
     color: rgba(0,0,0,0.05);
     font-size: 15em;
@@ -733,8 +758,9 @@ input:focus {
 }
 
 @keyframes fadeinbottom {
-    0% {transform: translateY(100px) rotateX(5deg); opacity: 0;}
-    100% {transform: none; opacity: 1;}
+    0% {transform: translateY(100px) rotateX(5deg); opacity: 0; pointer-events: none;}
+    99% {transform: none; opacity: 1; pointer-events: none;}
+    100% {transform: none; opacity: 1; pointer-events: auto;}
 }
 
 .scroll-into-view {
@@ -800,7 +826,7 @@ input:focus {
     }
 
     header > a {
-        
+        margin: 0;
     }
 
     nav {
@@ -809,16 +835,28 @@ input:focus {
     }
     
     .nav-mobile {
+        position: fixed;
+        top: 0;
+        left: 0;
         flex-direction: column;
-        align-items: flex-start;
-        margin-top: 10px;
+        align-items: center;
+        margin-top: 0;
         display: flex;
         background-color: white;
-        padding: 20px 20px 140px 20px;
-        width: 150px;
+        padding: 80px 20px 140px 20px;
+        width: 100vw;
+        height: 400px;
         box-shadow: 0 0 40px -10px rgba(0,0,0,0.2);
         border-radius: 5px;
         color: #222;
+        text-align: center;
+        animation: hamburgershow .5s;
+        animation-fill-mode: both;
+        animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 );
+    }
+    
+    .nav-mobile > a {
+        text-align: center;
     }
 
     nav > a {
@@ -898,23 +936,27 @@ input:focus {
         position: fixed;
         top: 240px;
         right: auto;
-        left: 20px;
+        left: 0;
         display: flex;
-        align-items: flex-start;
-        padding: 20px;
+        align-items: center;
+        padding: 20px 0 0 0;
         border-top: 1px solid #ddd;
         flex-direction: column;
         z-index: 1000;
-        width: 150px;
+        width: 100%;
+        animation: hamburgershow .5s;
+        animation-fill-mode: both;
+        animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 );
+        animation-delay: .1s;
     }
 
     .aside-header-mobile > a {
-        font-size: 14px;
         display: flex;
         align-items: center;
         padding: 5px;
         transition: all .3s ease-out;
         position: relative;
+        text-align: center;
     }
     
     .hamburger-wrapper {
@@ -926,7 +968,7 @@ input:focus {
     /*###################################*/
     
     .hero-section {
-        padding: 40px 40px;
+        padding: 60px 40px 40px 40px;
     }
     
     .hero-container {
@@ -942,10 +984,10 @@ input:focus {
     }
 
     .hero-graphic-wrapper {
-        width: 50%;
+        width: 40%;
         height: 600px;
         margin-right: none;
-        margin-left: 0px;
+        margin-left: 20px;
         margin-top: 50px;
     }
     
@@ -962,11 +1004,12 @@ input:focus {
     }
 
     .hero-graphic-block > img {
-        width: 100%;
+        width: 300px;
+        top: -100px;
     }
 
     .hero-text-wrapper {
-        width: 50%;
+        width: 60%;
         padding-top: 40px;
         margin-left: 80px;
     }
@@ -1020,7 +1063,7 @@ input:focus {
 
     .skewed-bg {
         height: 400px;
-        margin-top: -100px;
+        margin-top: -80px;
     }
 
     section > div.container {
@@ -1133,36 +1176,42 @@ input:focus {
     }
 
     .hero-graphic-wrapper {
-        widows: 40%;
-        min-width: 200px;
+        width: 200px;
         height: 600px;
-        margin-left: -20px;
+        margin-left: 0px;
         margin-bottom: -40px;
         top: 0;
         margin-top: 0;
         justify-content: flex-start;
+        align-items: center;
+        display: flex;
     }
     
     #benjamin-hero-text {
-        margin-bottom: 0;
-        width: 100%;
+        margin: 0 0 -10px 0;
+        width: 220px;
         height: 180px;
+        align-self: center;
+        left: 12px;
+        right: 0;
     }
 
     .hero-graphic-block {
-        width: 100%;
-        height: auto;
+        width: 250px;
+        height: 200px;
         margin-top: -25px;
     }
 
     .hero-graphic-block > img {
-        width: 100%;
+        position: absolute;
+        width: 300px;
     }
 
     .hero-text-wrapper {
         width: 50%;
+        min-width: 220px;
         padding-top: 20px;
-        margin-left: 40px;
+        margin-left: 60px;
     }
     
     .hero-text-wrapper > a {
@@ -1253,7 +1302,7 @@ input:focus {
     /*###################################*/
     
     .hero-section {
-        padding: 17vw 20px 0px 20px;
+        padding: 60px 20px 0px 20px;
     }
     
     .hero-container {
@@ -1281,16 +1330,19 @@ input:focus {
         margin-bottom: -50px;
         width: 100%;
         height: 250px;
+        left: auto;
+        right: auto;
     }
 
     .hero-graphic-block {
-        width: 100%;
-        height: auto;
+        width: 250px;
+        height: 250px;
         margin-top: -25px;
     }
 
     .hero-graphic-block > img {
-        width: 100%;
+        width: 280px;
+        position: absolute;
     }
 
     .hero-text-wrapper {
diff --git a/v2.html b/v2.html
index ef4876e..adbd0d5 100644
--- a/v2.html
+++ b/v2.html
@@ -10,7 +10,7 @@
 	<title>Tben Design</title>
     <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|Material+Icons|Anton" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Lato:400,500,700,800|Material+Icons|Anton|Squada+One|Coda" rel="stylesheet">
     <link href="http://fonts.cdnfonts.com/css/hennigar" rel="stylesheet">
 <!--    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
 
@@ -34,19 +34,19 @@
     <!-- #################################################################################-- Header -->  
     
     <header>
-        <a>Tben.Design</a>
+        <a href="#">Tben.Design</a>
         <nav>
-            <a>About Me</a>
-            <a>My Work</a>
-            <a>My Certifications</a>
-            <a>Contact Me</a>
+            <a href="#">About Me</a>
+            <a href="#">My Work</a>
+            <a href="#">My Certifications</a>
+            <a href="#">Contact Me</a>
         </nav>
     </header>
     
     
     <div class="aside-header" id="aside-heder-block">
         <a href="#"><span class="material-icons">face</span>&nbsp;&nbsp;My&nbsp;Resume</a>
-        <a class="email-link-block">
+        <a href="#" class="email-link-block">
             <div>
                 <span class="material-icons" style="margin-left: 3px;">mail</span>
                 &nbsp;&nbsp;&nbsp;Get&nbsp;in&nbsp;touch&nbsp;with&nbsp;me
@@ -56,11 +56,11 @@
         </a>
     </div>
     
-    <div class="hamburger-wrapper">
+    <a class="hamburger-wrapper" href="#">
         <div class="hamburger-line"></div>
         <div class="hamburger-line"></div>
         <div class="hamburger-line"></div>
-    </div>
+    </a>
     
     
     
@@ -75,7 +75,7 @@
                 <div class="hero-graphic-controller translate" data-speed=".25">
                     <div id="benjamin-hero-text"></div>
                     <div class="hero-graphic-block">
-                        <img src="images/placeholder-portrait.png" alt="" width="380px" height="auto">
+                        <img src="images/placeholder-portrait-2.png" alt="" width="380px" height="auto">
                     </div>
                 </div>                
             </div>
@@ -84,10 +84,10 @@
                 <div class="hero-text-block-init" style="transform-style:preserve-3d;" id="hero-text-controller">
                     Hi. I'm a
                     <h1 style="font-family:inherit;">
-                        <span>UI/UX Designer</span>, 
-                        <span>Web Designer</span>, 
-                        <span>Frontend Web Developer</span>, 
-                        <span>Graphic and Motion Designer</span>.
+                        <span><a href="#">UI/UX Designer</a></span>, 
+                        <span><a href="#">Web Designer</a></span>, 
+                        <span><a href="#">Frontend Web Developer</a></span>, 
+                        <span><a href="#">Graphic and Motion Designer</a></span>.
                     </h1>
                 </div>
                 <a href="#" id="linkedin-link-block">Get&nbsp;me&nbsp;on&nbsp;LinkedIn</a>
@@ -115,7 +115,7 @@
     
     <!-- #################################################################################-- My Work Section -->
     
-    <section class="below-fold translate menu-color-change" data-speed=".1" id="section-2" style="perspective:600px;">        
+    <section class="below-fold translate menu-color-change" data-speed=".1" id="section-2">        
         <div style="perspective:400px;transform-style:preserve-3d;">
             <div class="container-darkbg translate" data-speed="0" style="perspective:400px;transform-style:preserve-3d;">
                 <h2 class="scroll-into-view">Some of my Work</h2>
@@ -123,17 +123,17 @@
             </div>
             
             <div class="right-column" style="perspective:400px;transform-style:preserve-3d;">
-                <a class="portfolio-item scroll-into-view">
+                <a href="#" class="portfolio-item scroll-into-view">
                     <div><img src="images/portfolio-item-3.jpg" alt=""></div>
                     <h4>Portfolio Item Title</h4>
                 </a>
                 
-                <a class="portfolio-item scroll-into-view">
+                <a href="#" class="portfolio-item scroll-into-view">
                     <div><img src="images/portfolio-item-2.jpg" alt=""></div>
                     <h4>Portfolio Item Title</h4>
                 </a>
                 
-                <a class="portfolio-item scroll-into-view">
+                <a href="#" class="portfolio-item scroll-into-view">
                     <div><img src="images/portfolio-item-1.jpg" alt=""></div>
                     <h4>Portfolio Item Title</h4>
                 </a>