diff --git a/images/portfolio-item-1.jpg b/images/portfolio-item-1.jpg
new file mode 100644
index 0000000..e5cf433
Binary files /dev/null and b/images/portfolio-item-1.jpg differ
diff --git a/images/portfolio-item-2.jpg b/images/portfolio-item-2.jpg
new file mode 100644
index 0000000..0b5263b
Binary files /dev/null and b/images/portfolio-item-2.jpg differ
diff --git a/images/portfolio-item-3.jpg b/images/portfolio-item-3.jpg
new file mode 100644
index 0000000..8fdc71c
Binary files /dev/null and b/images/portfolio-item-3.jpg differ
diff --git a/scripts/v2.js b/scripts/v2.js
index 2f9b127..39dbf00 100644
--- a/scripts/v2.js
+++ b/scripts/v2.js
@@ -30,4 +30,99 @@ window.addEventListener("scroll", () => {
 window.addEventListener("load", () => {
     document.getElementById("skewed-bg").classList.add("skewed-bg");
     document.getElementById("preloader").className = "preloader";
-});
\ No newline at end of file
+    document.getElementById("hero-graphic-container").className = "hero-graphic-wrapper";
+});
+
+
+
+
+
+
+
+//##########################################################################################################
+
+var targets = document.querySelector("#section-2");
+var windowRect = {
+    rootMargin: "0px 0px -400px 0px",
+    delay: 100,
+    trackVisibility: true,
+};
+
+var navColors = new IntersectionObserver(navColorFunction, windowRect);
+
+function navColorFunction(entries, navColors) {
+    
+    entries.forEach(entry => {
+        if(entry.isIntersecting) {
+            document.querySelector("header").style.color = "white";
+            document.querySelector(".hero-graphic-wrapper").style.opacity = "0";
+//            translate[3].dataset.speed = .2;
+        } else {
+            document.querySelector("header").style.color = "#222";
+            document.querySelector(".hero-graphic-wrapper").style.opacity = "1";
+        }
+    });
+}
+
+navColors.observe(targets);
+
+
+//##########################################################################################################
+
+var scrollIntoViewItems = document.querySelectorAll(".scroll-into-view");
+
+var windowRect2 = {
+    rootMargin: "0px 0px -200px 0px",
+};
+var scrollIntoView = new IntersectionObserver(function(entries, scrollIntoView) {
+    entries.forEach(entry => {
+       if(entry.isIntersecting) {
+           entry.target.classList.add("fade-in-bottom");
+       }
+    });
+}, windowRect2);
+
+
+scrollIntoViewItems.forEach(item => {
+    scrollIntoView.observe(item);
+});
+
+
+//##########################################################################################################
+
+//var sectionOneText = document.querySelector("#section-2");
+
+var sectionOneIo = new IntersectionObserver(sect1Function, windowRect);
+
+function sect1Function(entries, sectionOneIo) {
+    
+    entries.forEach(entry => {
+        if(entry.isIntersecting) {
+//            windowRect.thresholds = [0, 0.25, 0.5, 0.75, 1];
+//            if (windowRect.thresholds < 0.25) {
+//                translate[3].dataset.speed = .1;
+//            } else if (windowRect.thresholds > 0.25 && windowRect.thresholds < 0.5) {
+//                translate[3].dataset.speed = .2;
+//            } else if (windowRect.thresholds > 0.5 && windowRect.thresholds < 1) {
+//                translate[3].dataset.speed = .3;
+//            }
+            translate[4].dataset.speed = .2;
+            translate[4].style.transition = "all 1.8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";
+        } else {
+            translate[4].style.transition = "all 1.8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";
+            translate[4].dataset.speed = 0;
+            setTimeout(()=> {translate[4].style.transition = "all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";}, 1000);
+        }
+    });
+}
+
+sectionOneIo.observe(translate[4]);
+
+
+
+
+
+
+
+
+
diff --git a/v2.css b/v2.css
index 0119d1f..86aebea 100644
--- a/v2.css
+++ b/v2.css
@@ -39,14 +39,16 @@ header {
     top: 40px;
     width: 200px;
     z-index: 1000;
+    color: inherit;
 }
 
 header > a {
-    font-family: hennigar;
+    font-family: "hennigar";
     font-size: 24px;
     text-transform: uppercase;
     border: none;
     letter-spacing: 1px;
+    color: inherit;
 }
 
 nav {
@@ -54,11 +56,13 @@ nav {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    color: inherit;
 }
 
 nav > a {
     margin-bottom: 10px;
     font-size: 14px;
+    color: inherit;
 }
 
 nav > a:hover {
@@ -105,7 +109,7 @@ a:hover {
 }
 
 h1, h2, h3, h4 {
-    font-family: hennigar;
+    font-family: "hennigar";
 	margin-top: 0px;
 	margin-bottom: 15px; 
 	width: 100%;    
@@ -130,7 +134,9 @@ h3 {
 }
 
 h4 {
-    
+    font-family: "Lato";
+    text-transform: none;
+    width: auto;
 }
 
 p {
@@ -145,6 +151,9 @@ p {
 
 span {
     font-size: inherit;
+    font-weight: inherit;
+    font-family: inherit;
+    color: inherit;
 }
 
 
@@ -249,6 +258,16 @@ input:focus {
     margin-top: 10px;
 }
 
+.hero-graphic-wrapper-init {
+    width: 400px;
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-right: -20px;
+    opacity: 0;
+}
+
 .hero-graphic-wrapper {
     width: 400px;
     height: 600px;
@@ -256,10 +275,20 @@ input:focus {
     flex-direction: column;
     align-items: center;
     margin-right: -20px;
+    animation: herographicintro 1.5s;
+/*    animation-fill-mode: both;*/
+    animation-delay: 1.3s;
+    animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 );
+    transition: all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 );
+}
+
+@keyframes herographicintro {
+    0% {transform: translateY(100px) rotateX(5deg); opacity: 0;}
+    100% {transform: none; opacity: 1;}
 }
 
 #benjamin-hero-text {
-    font-family: hennigar;
+    font-family: "hennigar";
     font-size: 105px;
     text-transform: uppercase;
     letter-spacing: 0px;
@@ -267,7 +296,7 @@ input:focus {
 }
 
 #toby-hero-text {
-    font-family: hennigar;
+    font-family: "hennigar";
     font-size: 205px;
     text-transform: uppercase;
     letter-spacing: 0px;
@@ -293,7 +322,7 @@ input:focus {
 }
 
 .hero-text-wrapper {
-    width: 200px;
+    width: 240px;
     padding-top: 100px;
     align-items: flex-start;
     margin-left: 50px;
@@ -380,13 +409,13 @@ input:focus {
 .hero-watermark {
     position: absolute;
     font-size: 35em;
-    font-family: hennigar;
+    font-family: "hennigar";
     z-index: -1;
     top: -20px;
     left: 50%;
     transform: translateX(-50%);
     color: rgba(0,0,0,0.05);
-    letter-spacing: 2px;
+    letter-spacing: 5px;
 }
 
 .below-fold {
@@ -419,8 +448,109 @@ input:focus {
     display: flex;
     align-items: flex-end;
     text-align: right;
+    position: relative;
+    z-index: 10;
 }
 
+.right-column {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    position: relative;
+    z-index: 10;
+}
+
+.section-watermark {
+    font-family: "hennigar";
+    position: absolute;
+    color: rgba(0,0,0,0.05);
+    font-size: 15em;
+    top: -350px;
+    left: auto;
+    right: auto;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 0;
+}
+
+.portfolio-item {
+    margin-left: 100px;    
+    margin-bottom: 20px;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    transition: all .5s ease-out;
+    border: none;
+}
+
+.portfolio-item:hover {
+    border: none;
+}
+
+.portfolio-item:first-child {
+    margin-top: -100px;
+}
+
+.portfolio-item:last-child {
+    margin-bottom: -300px;
+    color: #222;
+}
+
+.portfolio-item > h4 {
+    transition: all .5s ease-out;
+    border-bottom: 2px solid transparent;
+}
+
+.portfolio-item > div {
+    width: 350px;
+    height: 250px;
+    background-color: #222;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    transition: all .3s ease-out;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.portfolio-item img {
+    position: absolute;
+    width: 100%;
+    transition: all .4s ease-out;
+}
+
+.portfolio-item:hover img {
+    width: 110%;
+    transform: rotate(5deg);
+    filter: brightness(105%);
+}
+
+.portfolio-item:hover > h4 {
+    border-bottom: 2px solid white;
+}
+.portfolio-item:hover > div {
+    box-shadow: 0px 0px 35px -5px rgba(0,0,0,0.4);
+    background-size: 120%;
+}
+
+.portfolio-item:last-child:hover > h4 {
+    border-bottom: 2px solid var(--main-color);
+}
+
+.portfolio-item-image {
+}
+
+
+
+
 
 
 
@@ -438,6 +568,20 @@ input:focus {
     transition: all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 );
 }
 
+.fade-in-bottom {
+    animation: fadeinbottom 1s;
+    animation-fill-mode: both;
+    animation-timing-function: ease-out;
+}
+
+@keyframes fadeinbottom {
+    0% {transform: translateY(100px) rotateX(5deg); opacity: 0;}
+    100% {transform: none; opacity: 1;}
+}
+
+.scroll-into-view {
+    opacity: 0;
+}
 
 
 
diff --git a/v2.html b/v2.html
index 1225660..d52ca84 100644
--- a/v2.html
+++ b/v2.html
@@ -38,20 +38,22 @@
         <a class="social-media-link-block"></a>
     </div>
     
-    <section style="z-index:1;">
-        <div>
-            <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">
-                    <img src="images/placeholder-portrait.png" alt="" width="380px" height="auto">
-                </div>
+    <section style="z-index:1;perspective:400px;">
+        <div style="perspective:400px;transform-style:preserve-3d;">
+            <div class="hero-graphic-wrapper-init" id="hero-graphic-container">
+                <div class="translate" data-speed=".25">
+                    <div id="benjamin-hero-text">Benjamin</div>
+                    <div id="toby-hero-text">Toby</div>
+                    <div class="hero-graphic-block">
+                        <img src="images/placeholder-portrait.png" alt="" width="380px" height="auto">
+                    </div>
+                </div>                
             </div>
             
             <div class="hero-text-wrapper translate" data-speed=".15">
                 <div class="hero-text-block">
                     Hi. I'm a
-                    <h1>
+                    <h1 style="font-family:inherit;">
                         <span>UI/UX Designer</span>, 
                         <span>Web Designer</span>, 
                         <span>Frontend Web Developer</span>, 
@@ -69,11 +71,11 @@
     
     
     
-    <div class="hero-watermark" data-speed=".6">T-BEN</div>
+    <div class="hero-watermark"><span class="translate" data-speed=".6">T-BEN</span></div>
     
-    <div  class="scroll-down-link-block">
+    <a href="#section-2" class="scroll-down-link-block">
             <div class="scroll-link-icon">&rsaquo;</div>
-    </div>
+    </a>
     
     
     
@@ -81,13 +83,31 @@
     
     
     
-    <section class="below-fold translate" data-speed=".1">        
-        <div>
-            <div class="container-darkbg translate" data-speed="0">
-                <h2>Some of my Work</h2>
-                <p style="width: 350px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
+    <section class="below-fold translate" data-speed=".1" id="section-2" style="perspective:600px;">        
+        <div style="perspective:400px;transform-style:preserve-3d;">
+            <div class="container-darkbg translate" data-speed="0" style="transform-style:preserve-3d;">
+                <h2 class="scroll-into-view">Some of my Work</h2>
+                <p style="width: 350px;" class="scroll-into-view">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
             </div>
-            <div></div>
+            
+            <div class="right-column" style="transform-style:preserve-3d;">
+                <a 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">
+                    <div><img src="images/portfolio-item-2.jpg" alt=""></div>
+                    <h4>Portfolio Item Title</h4>
+                </a>
+                
+                <a class="portfolio-item scroll-into-view">
+                    <div><img src="images/portfolio-item-1.jpg" alt=""></div>
+                    <h4>Portfolio Item Title</h4>
+                </a>
+            </div>
+            
+            <div class="section-watermark scroll-into-view"><span class="translate" data-speed=".05">My&nbsp;Work</span></div>
         </div>
         <div id="skewed-bg"></div>
     </section>
@@ -98,7 +118,7 @@
     
     
     
-    <section style="height: 2000px"></section>
+    <section style="height: 2000px;z-index: -100;"></section>