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>
+                <a href="#section3" style="background-color: #0f1a52;">
+                    <center>
+                        <h2>Work in progress</h2>
+                    </center>
                 </a>
             </div>
             <div class="grid-item">
@@ -59,7 +61,7 @@
         <h3>you can find most of my project <i><b><u><a href="https://git.ksan.dev/ksan">here</a></u></b></i></h3>
         <h6>There are only a few for now, still need to migrate the rest..</h6>
         <div class="grid-container">
-             <div class="grid-item image-background" style="background-image: url('images/missing1080.jpg');">
+            <div class="grid-item image-background" style="background-image: url('images/missing1080.jpg');">
 
                 <a href="https://git.ksan.dev/ksan">
                     <h2 class="default">will add soon...</h2>
@@ -80,40 +82,40 @@
     <div id="section2" class="section section-video">
         <video autoplay muted loop playsinline class="bg-video">
             <source src="videos/background4.mp4" type="video/mp4">
-            
+
         </video>
         <div class="content">
             <h1>My Skills</h1>
 
             <div class="skills">
-            <div class="skills-column">
-                <h3>Programming Languages</h3>
-                <ul>
-                    <li>C/C++</li>
-                    <li>Java</li>
-                    <li>C#</li>
-                    <li>Python</li>
-                    <li>JavaScript(still learning)</li>
-                </ul>
+                <div class="skills-column">
+                    <h3>Programming Languages</h3>
+                    <ul>
+                        <li>C/C++</li>
+                        <li>Java</li>
+                        <li>C#</li>
+                        <li>Python</li>
+                        <li>JavaScript(still learning)</li>
+                    </ul>
+                </div>
+                <div class="skills-column">
+                    <h3>Tools & Technologies</h3>
+                    <ul>
+                        <li>Linux</li>
+                        <li>Git</li>
+                        <li>Bash</li>
+                        <li>Docker</li>
+                        <li>Vim</li>
+                    </ul>
+                </div>
             </div>
-            <div class="skills-column">
-                <h3>Tools & Technologies</h3>
-                <ul>
-                    <li>Linux</li>
-                    <li>Git</li>
-                    <li>Bash</li>
-                    <li>Docker</li>
-                    <li>Vim</li>
-                </ul>
-            </div>
-        </div>
         </div>
     </div>
     <div id="section3" class="section section-image">
         Work in progress,
         go to: <a href="#section4"> contact</a>
     </div>
-    
+
     <div id="section4" class="section section-video">
         <video autoplay muted loop playsinline class="bg-video">
             <source src="videos/background.mp4" type="video/mp4">
@@ -122,12 +124,11 @@
         <div class="content">
             <h1>You can contact me at:<br>
                 <a href="mailto:djordjec@ksan.dev">djordje@ksan.dev</a>
-                </h1>
+            </h1>
         </div>
     </div>
 
     <script src="scripts.js"></script>
 </body>
 
-</html>
-
+</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,16 +1,21 @@
 const gridItems = document.querySelectorAll('.grid-item');
 
 gridItems.forEach(item => {
-    const video = item.querySelector('video');
-    
-    video.currentTime = 0; 
-    video.pause();
-    item.addEventListener('mouseenter', () => {
-        video.play();
-    });
 
-    item.addEventListener('mouseleave', () => {
+    const video = item.querySelector('video');
+
+    if (video) {
+        video.currentTime = 0;
         video.pause();
-        //video.currentTime = 0;
-    });
+        item.addEventListener('mouseenter', () => {
+
+
+            video.play();
+        });
+
+        item.addEventListener('mouseleave', () => {
+            video.pause();
+            //video.currentTime = 0;
+        });
+    }
 });