scaled down images and fixed video autoplay bug

index.html

@@ -6,7 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>
-        Website
+        Portfolio
     </title>
 </head>
 
@@ -30,19 +30,21 @@
             <div class="grid-item">
                 <a href="#section1">
                     <h2 class="default">My Projects</h2>
-                    <video src="videos/video2.mp4" autoplay muted loop></video>
+                    <video src="videos/video2.mp4"  muted loop></video>
                 </a>
             </div>
             <div class="grid-item">
                 <a href="#section2">
                     <h2 class="default">Skills</h2>
                     <h2 class="under-black">and more...</h2>
-                    <video src="videos/video4.mp4" autoplay muted loop></video>
+                    <video src="videos/video4.mp4"  muted loop></video>
                 </a>
             </div>
             <div class="grid-item">
                 <a href="#section3" style="background-color: #0f1a52;">
-                    <center><h2>Work in progress</h2></center>
+                    <center>
+                        <h2>Work in progress</h2>
+                    </center>
                 </a>
             </div>
             <div class="grid-item">
@@ -130,4 +132,3 @@
 </body>
 
 </html>
-

main.css

@@ -11,7 +11,7 @@ body {
     scroll-behavior: smooth;
 }
 .start{
-    background-image: url(images/grad.png);
+    background: linear-gradient(to bottom, #355b7c, #000000);
     height: 100vh;
     display: flex;
     justify-content: center;
@@ -189,7 +189,8 @@ body {
 }
 
 #section1 {
-  background-image: url('images/output.png'); 
+  background-image: url('images/abstractcode.png'); 
+  background-color: #000000;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -207,12 +208,10 @@ body {
 }
 
 
-#section2 {
 
-}
 
 #section3 {
-    background-color: #142268;
+    background-color: #000000;
 }
 
 .skill-icons img {

scripts.js

@@ -1,11 +1,15 @@
 const gridItems = document.querySelectorAll('.grid-item');
 
 gridItems.forEach(item => {
+
     const video = item.querySelector('video');
 
+    if (video) {
         video.currentTime = 0;
         video.pause();
         item.addEventListener('mouseenter', () => {
+
+
             video.play();
         });
 
@@ -13,4 +17,5 @@ gridItems.forEach(item => {
             video.pause();
             //video.currentTime = 0;
         });
+    }
 });