Better versions of project images, optimized

index-new.html

@@ -44,7 +44,7 @@
         <div class="projects-grid">
           <div class="project-card">
             <div class="project-image">
-              <img src="./thumbs/24.PNG" alt="Wargate Heroes">
+              <img src="./images/resized/wargate.jpg" alt="Wargate Heroes">
             </div>
             <div class="project-info">
               <h2>Wargate Heroes</h2>
@@ -58,7 +58,7 @@
           </div>
           <div class="project-card">
             <div class="project-image">
-              <img src="./thumbs/12.PNG" alt="Jaws.io">
+              <img src="./images/resized/jaws.jpg" alt="Jaws.io">
             </div>
             <div class="project-info">
               <h2>Jaws.io</h2>
@@ -72,7 +72,7 @@
           </div>
           <div class="project-card">
             <div class="project-image">
-              <img src="./thumbs/01.PNG" alt="BreachTD">
+              <img src="./images/resized/breachtd.jpg" alt="BreachTD">
             </div>
             <div class="project-info">
               <h2>BreachTD</h2>
@@ -80,13 +80,13 @@
               <div class="project-tech">Unity, C#, uLink, Mobile</div>
               <div class="project-links">
                 <a href="https://www.youtube.com/watch?v=8wfprDgj_1Y" target="_blank" class="project-link">Trailer</a>
-                <a href="https://www.youtube.com/watch?v=Tlk1mdh0Btc" target="_blank" class="project-link">Gameplay</a>
+                <a href="https://www.youtube.com/watch?v=QulMTsbj-Xk" target="_blank" class="project-link">Gameplay</a>
               </div>
             </div>
           </div>
           <div class="project-card">
             <div class="project-image">
-              <img src="./thumbs/27.PNG" alt="Startship Troopers: Mobile Invasion">
+              <img src="./images/resized/starship-troopers.jpg" alt="Startship Troopers: Mobile Invasion">
             </div>
             <div class="project-info">
               <h2>Startship Troopers: Invasion Mobile Infantry</h2>

new.css

@@ -183,8 +183,8 @@ nav a:hover {
 }
 
 .project-image img {
-    width: 100%;
+    width: 400px;
-    height: 200px;
+    height: 100%;
     object-fit: cover;
 }