From 01fb09ee20755598d2117626826508bcdf7c57dd Mon Sep 17 00:00:00 2001
From: BenjaminToby <52448020+BenjaminToby@users.noreply.github.com>
Date: Fri, 2 Jul 2021 06:29:43 +0100
Subject: [PATCH] minor changes

---
 index.html      |  2 +-
 main.css        |  9 +++++++--
 scripts/main.js | 45 +++++++++++++++++++++++----------------------
 3 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index 98adfb0..2785b23 100644
--- a/index.html
+++ b/index.html
@@ -164,7 +164,7 @@
                     <!-- <img src="images/my-image-large.jpg" alt=""> -->
                     <div>
                         <h3>Transcend Barriers Animation</h3>
-                        <p>This animations was made for web view. I used aftereffects and bodymoving to accomplish this:
+                        <p>This animation was made for web view. I used aftereffects and bodymoving to accomplish this:
                             the result? High definition svg anmimation that looks crisp on any resolution and maintains
                             a relatively light weight</p>
                     </div>
diff --git a/main.css b/main.css
index 3637ea6..0e29acf 100644
--- a/main.css
+++ b/main.css
@@ -233,7 +233,7 @@ h1, h2, h3, h4 {
 
 h1 {
     
-	font-size: 46px;
+	font-size: 62px;
 }
 
 h2 {
@@ -243,7 +243,7 @@ h2 {
 }
 
 h3 {
-    
+    font-size: 30px;
 }
 
 h4 {
@@ -851,6 +851,7 @@ input:focus {
 
 .portfolio-entry > div:nth-of-type(1) p {
     font-size: 16px;
+    opacity: .8;
 }
 
 .portfolio-entry > div:nth-of-type(2) {
@@ -1742,6 +1743,10 @@ input:focus {
 
 @media (max-width: 430px) {
 
+    h3 {
+        font-size: 24px;
+    }
+
     p {
         font-size: 16px;
     }
diff --git a/scripts/main.js b/scripts/main.js
index b59cb92..a14d188 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -433,7 +433,7 @@ function contentsObserverAboutImg(entries) {
         myImageAbout.animate([
             {
                 transform: "none",
-                opacity: .5,
+                opacity: .8,
             }
         ], {
             duration: 1300,
@@ -656,40 +656,41 @@ const myImage = ben(".benjamin-image-block");
 const myImageOverlay = ben(".benjamin-image-block-overlay");
 const serviceDisplay = ben(".service-display-block");
 
-uiuxDesignerLinks.forEach(item => {
+if (window.innerWidth > 1200) {
 
-    item.addEventListener("mouseover", function (event) {
+    uiuxDesignerLinks.forEach(item => {
 
-        // myImage.style.transform = "rotateX(1deg) rotateY(2deg) rotateZ(-2deg) translateZ(20px) translateX(20px)";
-        myImage.style.width = "20vw";
+        item.addEventListener("mouseover", function (event) {
 
-        if (event.target.className == "uiux-designer-link") {
+            // myImage.style.transform = "rotateX(1deg) rotateY(2deg) rotateZ(-2deg) translateZ(20px) translateX(20px)";
+            myImage.style.width = "20vw";
 
-            myImageOverlay.style.backgroundColor = "rgba(237,125,113,0.8)";
+            if (event.target.className == "uiux-designer-link") {
 
-        } else if (event.target.className == "web-designer-link") {
+                myImageOverlay.style.backgroundColor = "rgba(237,125,113,0.8)";
 
-            myImageOverlay.style.backgroundColor = "rgba(117,240,230,0.8)";
-            // serviceDisplay.style.width = "300px";
-            // serviceDisplay.style.height = "250px";
+            } else if (event.target.className == "web-designer-link") {
 
-        } else if (event.target.className == "frontend-designer-link") {
+                myImageOverlay.style.backgroundColor = "rgba(117,240,230,0.8)";
+                // serviceDisplay.style.width = "300px";
+                // serviceDisplay.style.height = "250px";
 
-            myImageOverlay.style.backgroundColor = "rgba(116,123,239,0.8)";
-            // serviceDisplay.style.width = "250px";
-            // serviceDisplay.style.height = "200px";
+            } else if (event.target.className == "frontend-designer-link") {
 
-        } else if (event.target.className == "graphic-motion-designer-link") {
+                myImageOverlay.style.backgroundColor = "rgba(116,123,239,0.8)";
+                // serviceDisplay.style.width = "250px";
+                // serviceDisplay.style.height = "200px";
 
-            myImageOverlay.style.backgroundColor = "rgba(28,55,102,0.8)";
-            // serviceDisplay.style.width = "200px";
-            // serviceDisplay.style.height = "200px";
+            } else if (event.target.className == "graphic-motion-designer-link") {
 
-        }
+                myImageOverlay.style.backgroundColor = "rgba(28,55,102,0.8)";
+                // serviceDisplay.style.width = "200px";
+                // serviceDisplay.style.height = "200px";
 
+            }
+        });
     });
-
-});
+}
 
 uiuxDesignerLinks.forEach(item => {