minor changes

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>

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;
     }

scripts/main.js

@@ -433,7 +433,7 @@ function contentsObserverAboutImg(entries) {
         myImageAbout.animate([
             {
                 transform: "none",
-                opacity: .5,
+                opacity: .8,
             }
         ], {
             duration: 1300,
@@ -656,6 +656,8 @@ const myImage = ben(".benjamin-image-block");
 const myImageOverlay = ben(".benjamin-image-block-overlay");
 const serviceDisplay = ben(".service-display-block");
 
+if (window.innerWidth > 1200) {
+
     uiuxDesignerLinks.forEach(item => {
 
         item.addEventListener("mouseover", function (event) {
@@ -686,10 +688,9 @@ uiuxDesignerLinks.forEach(item => {
                 // serviceDisplay.style.height = "200px";
 
             }
-
         });
-
     });
+}
 
 uiuxDesignerLinks.forEach(item => {