diff --git a/images/hero-image-ben-2.jpg b/images/hero-image-ben-2.jpg
new file mode 100644
index 0000000..5a82bed
Binary files /dev/null and b/images/hero-image-ben-2.jpg differ
diff --git a/scripts/v2.js b/scripts/v2.js
index a0c414a..0523e9b 100644
--- a/scripts/v2.js
+++ b/scripts/v2.js
@@ -88,7 +88,7 @@ var scrollIntoViewItems = document.querySelectorAll(".scroll-into-view");
 var windowRect2 = {
     rootMargin: "0px 0px -200px 0px",
 };
-var scrollIntoView = new IntersectionObserver(function(entries, scrollIntoView) {
+var scrollIntoView = new IntersectionObserver(function(entries) {
     entries.forEach(entry => {
        if(entry.isIntersecting) {
            entry.target.classList.add("fade-in-bottom");
diff --git a/scripts/v3.js b/scripts/v3.js
index f097c10..cead544 100644
--- a/scripts/v3.js
+++ b/scripts/v3.js
@@ -31,7 +31,7 @@ function intro() {
         translateX: [-20, 0],
 //        rotateY: [50, 0],
         opacity: [0, 1],
-        easing: "easeInOutQuad",
+        easing: "easeOutQuad",
         duration: 800,
         delay: anime.stagger(100, {start: 1000}/* , {easing: 'easeOutQuad'} */),
     });
@@ -48,7 +48,7 @@ function intro() {
     anime({
         targets: myImageBlock,
         translateY: [100, 0],
-        opacity: [0, 1],
+        opacity: [0, 0.8],
         easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
         duration: 1500,
         delay: 2200,
@@ -223,29 +223,61 @@ window.addEventListener("load", () => {
 
 //############################################# -- Secitons intersection Observer
 
-const sections = document.querySelectorAll("section");
-var sectionContainer = document.querySelector("#samp-div");
+var sections = document.querySelectorAll(".scroll-into-view");
+//var sectionContainer = document.querySelector(".my-work-section > div:nth-child(2)");
 
 var windowRect2 = {
-    rootMargin: "0px",
+    rootMargin: "0px 0px -200px 0px",
 };
 
-var sectionsIntersectionObserver = new IntersectionObserver(sectionsObserverFn, windowRect);
+var sectionsIO = new IntersectionObserver(sectionsObserverFn, windowRect2);
 
 function sectionsObserverFn(entries) {
-   if(entries[1].isInersecting) {
-       anime({
-           targets: sectionContainer,
-           width: [0, 500],
-           delay: 1000,
-       });
-   } 
+    
+    entries.forEach(entry => {
+        if(entry.isIntersecting) {
+            entry.target.classList.add("scrolled-into-view");
+            
+//            anime({
+//                targets: contents[entry.target.firstElementChild],
+//                width: [0, "50%"],
+//                easing: "cubicBezier( 0.93, 0, 0.09, 1 )",
+//                opacity: [0, 1],
+//                duration: 1200,
+//            });
+       } 
+    });
+   
 }
 
 
 
-sections.forEach(entry => {
-    sectionsIntersectionObserver.observe(entry);
+sections.forEach(item => {
+    sectionsIO.observe(item);
+});
+
+
+
+//############################################# -- Content intersection Observer
+
+var contents = document.querySelectorAll(".scroll-into-view-content");
+
+var contentsIO = new IntersectionObserver(contentsObserverFn, windowRect2);
+
+function contentsObserverFn(entries) {
+    
+    entries.forEach(entry => {
+        if(entry.isIntersecting) {
+            entry.target.classList.add("scrolled-into-view-content");
+       } 
+    });
+   
+}
+
+
+
+contents.forEach(item => {
+    contentsIO.observe(item);
 });
 
 
diff --git a/v3.css b/v3.css
index a7df8a1..932fea9 100644
--- a/v3.css
+++ b/v3.css
@@ -25,8 +25,8 @@ html {
     --main-color: #747bef;
     --base-color: #222;
     --sec-color-1: #ed7d71;
-    --sec-color-2: #d67772;
-    --sec-color-3: #f5b9eb;
+    --sec-color-2: #faa096;
+    --sec-color-3: #75F0E6;
     --dark-color: #1c3766;
 }
 
@@ -120,6 +120,7 @@ nav > a:not(.social-media-links) {
     background-position: -200px 41px;
     background-image: linear-gradient(90deg, var(--main-color), var(--sec-color-1));
     color: inherit;
+    transition: background .3s ease;
 }
 
 nav > a:not(.social-media-links):hover {
@@ -136,6 +137,7 @@ section {
     margin: 0;
     height: 100vh;
     overflow: hidden;
+    align-items: stretch;
 }
 
 section > div {
@@ -143,9 +145,10 @@ section > div {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    justify-content: center;
     perspective: 500px;
     transform-style: preserve-3d;
-    padding: 60px;
+    padding: 15%;
     position: relative;
 }
 
@@ -167,7 +170,7 @@ a {
 	border: none;
     cursor: pointer;
     font-size: inherit;
-    transition: all .3s ease-out;
+/*    transition: all .3s ease-out;*/
 }
 
 a:hover {
@@ -190,7 +193,8 @@ h1 {
 }
 
 h2 {
-	font-size: 36px;
+	font-size: 32px;
+    width: auto;
 }
 
 h3 {
@@ -206,9 +210,8 @@ p {
 	line-height: 1.5;
 	margin-top: 0px;
 	margin-bottom: 20px;
-	color: rgba(0,0,0,0.8);
 	width: 100%;
-	font-weight: 500;
+	font-weight: 400;
 }
 
 span {
@@ -246,8 +249,7 @@ button {
 	background-color: var(--dark-color);
 	padding: 10px 20px;
 	color: white;
-	cursor: pointer;
-    transition: all .2s ease-out;    
+	cursor: pointer; 
     background-image: linear-gradient(var(--main-color),var(--main-color));
     background-repeat: no-repeat;
     background-position: 0px 67px;
@@ -315,6 +317,28 @@ input:focus {
     margin-right: 0;
 }
 
+.scroll-into-view {
+    padding: 0;
+    width: 0;
+    transition: all .7s cubic-bezier(0.93, 0, 0.09, 1);
+}
+
+.scrolled-into-view {
+    width: 50%;
+    padding: 40px;
+}
+
+.scroll-into-view-content {
+    transform: translateY(80px) rotateX(5deg);
+    transition: all 1s cubic-bezier(0.1, 0.63, 0.355, 1);
+    opacity: 0;
+}
+
+.scrolled-into-view-content {
+    transform: none;
+    opacity: 1;
+}
+
 
 
 
@@ -331,7 +355,6 @@ input:focus {
 }
 
 .hero-section > div:nth-child(1) {
-    
 }
 
 .hero-section > div:nth-child(2) {
@@ -339,6 +362,7 @@ input:focus {
     padding: 25vh 40px 40px 6.2vw;
     font-size: 2.5vw;
     display: inline;
+    z-index: 100;
 /*    opacity: 0;*/
 }
 
@@ -352,10 +376,12 @@ input:focus {
     background-image: linear-gradient(var(--main-color),var(--main-color));
     background-position: 0px 3.2vw;
     background-repeat: no-repeat;
+    transition: all .3s ease-out;
 }
 .main-text-block a:hover {
     color: white;
     background-position: 0px 0px;
+    background-image: linear-gradient(var(--dark-color),var(--dark-color));
     padding: 5px 10px;
 }
 
@@ -394,33 +420,36 @@ input:focus {
     left: 15vw;
     background-image: url("images/hero-image-ben.jpg");
     background-size: cover;
-    opacity: .8;
+    opacity: .2;
     padding: 0;
 }
 
 .benjamin-big-text-block {
     position: absolute;
     font-size: 8.5vw;
-    bottom: -50px;
+    bottom: -40px;
     left: 5%;
     font-weight: 900;
     line-height: 1em;
     color: white;
     mix-blend-mode: overlay;
     filter: drop-shadow(0 0 20px rgba(0,0,0,0.4));
+    padding: 40px;
 }
 
 .main-cta-button {
     font-size: 24px;
     padding: 15px 40px;
     margin-top: 20px;
+    background-color: var(--sec-color-1);
+    transition: all .3s ease-out;
+    background-image: linear-gradient(var(--dark-color),var(--dark-color));
 }
 
 .main-cta-button:hover {
-    background-image: linear-gradient(var(--main-color),var(--main-color));
+    background-image: linear-gradient(var(--dark-color),var(--dark-color));
     background-position: 0px 0px;
     background-repeat: no-repeat;
-    background-color: var(--dark-color);
 }
 
 
@@ -437,8 +466,42 @@ input:focus {
     
 }
 
+.my-work-section > div:nth-child(1) {
+	color: rgba(0,0,0,0.6);
+    align-items: flex-end;
+}
+
 .my-work-section > div:nth-child(2) {
-    background-color: var(--sec-color-1);
+    background-color: var(--sec-color-2);
+/*    width: 20%;*/
+}
+
+.my-work-section h2 {
+    text-align: right;
+    color: rgba(0,0,0,.8);
+}
+
+.my-work-section p {
+    text-align: right;
+}
+
+
+
+
+
+
+
+
+
+/*############################################################# -- About Me -- */
+
+.about-me-section {
+    justify-content: flex-end;
+}
+
+.about-me-section > div:nth-child(1) {
+    background-color: var(--sec-color-3);
+/*    width: 20%;*/
 }
 
 
diff --git a/v3.html b/v3.html
index 0fdd409..285d9ae 100644
--- a/v3.html
+++ b/v3.html
@@ -93,14 +93,34 @@
     
     <section class="my-work-section">
         <div>
+            <h2 class="scroll-into-view-content">Some of My Work</h2>
+            <p class="scroll-into-view-content">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 id="samp-div">
+        <div class="scroll-into-view">
         </div>
     </section>
     
     
     
+  
+    
+    
+    
+    
+    
+    <!-- #################################################################################-- About Me -->
+    
+    <section class="about-me-section">
+        <div class="scroll-into-view">
+        </div>
+        
+        <div>
+        </div>
+    </section>
+    
+    
+