Cards with featured projects

index-new.html

@@ -40,23 +40,63 @@
       </section>
 
       <section id="work" class="portfolio-section">
-        <h2 class="section-title">MAIN RELEASED GAMES</h2>
+        <h2 class="section-title">FEATURED GAMES</h2>
         <div class="projects-grid">
           <div class="project-card">
-            <div class="thumbnail">Project Thumbnail</div>
+            <div class="project-image">
-            <h3>Project One</h3>
+              <img src="./thumbs/24.PNG" alt="Wargate Heroes">
+            </div>
+            <div class="project-info">
+              <h2>Wargate Heroes</h2>
+              <p class="project-description">Mobile Multiplayer Online Battle Arena (MOBA)</p>
+              <div class="project-tech">Unity, C#, uLink, Mobile</div>
+              <div class="project-links">
+                <a href="https://www.youtube.com/watch?v=kUcSleqOLCA" target="_blank" class="project-link">Trailer</a>
+                <a href="https://www.youtube.com/watch?v=RLPWUH4RKd8" target="_blank" class="project-link">Gameplay</a>
+              </div>
+            </div>
           </div>
           <div class="project-card">
-            <div class="thumbnail">Project Thumbnail</div>
+            <div class="project-image">
-            <h3>Project Two</h3>
+              <img src="./thumbs/12.PNG" alt="Jaws.io">
+            </div>
+            <div class="project-info">
+              <h2>Jaws.io</h2>
+              <p class="project-description">Online IO game where you play as the legendary shark!</p>
+              <div class="project-tech">Unity, C#, Photon, Mobile</div>
+              <div class="project-links">
+                <a href="https://www.youtube.com/watch?v=uWEXo278UmQ" target="_blank" class="project-link">Trailer</a>
+                <a href="https://www.youtube.com/watch?v=LGnM5aAwFHw" target="_blank" class="project-link">Gameplay</a>
+              </div>
+            </div>
           </div>
           <div class="project-card">
-            <div class="thumbnail">Project Thumbnail</div>
+            <div class="project-image">
-            <h3>Experiment One</h3>
+              <img src="./thumbs/01.PNG" alt="BreachTD">
+            </div>
+            <div class="project-info">
+              <h2>BreachTD</h2>
+              <p class="project-description">Mobile Online Multiplayer Tower Defense</p>
+              <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>
+              </div>
+            </div>
           </div>
           <div class="project-card">
-            <div class="thumbnail">Project Thumbnail</div>
+            <div class="project-image">
-            <h3>Experiment Two</h3>
+              <img src="./thumbs/27.PNG" alt="Startship Troopers: Mobile Invasion">
+            </div>
+            <div class="project-info">
+              <h2>Startship Troopers: Invasion Mobile Infantry</h2>
+              <p class="project-description">Cover shooter with runner mechanics and cinematics</p>
+              <div class="project-tech">Unity, C#, iOS</div>
+              <div class="project-links">
+                <a href="https://www.youtube.com/watch?v=ZPdTqhgWhaQ" target="_blank" class="project-link">Trailer</a>
+                <a href="https://www.youtube.com/watch?v=T5DXcvSaR-w" target="_blank" class="project-link">Gameplay</a>
+              </div>
+            </div>
           </div>
         </div>
       </section>

new.css

@@ -148,7 +148,8 @@ nav a:hover {
 
 .projects-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    /* grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); */
+    grid-template-columns: 1fr;
     gap: 40px;
     max-width: 900px;
     margin: 0 auto;
@@ -158,37 +159,91 @@ nav a:hover {
     background-color: #f7f7f7;
     border: 1px solid #e0e0e0;
     padding: 20px;
-    min-height: 200px;
+    /* min-height: 200px; */
     display: flex;
-    flex-direction: column;
+    /* flex-direction: column; */
-    justify-content: center;
+    /* justify-content: center; */
+    gap: 30px;
     align-items: center;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     cursor: pointer;
 }
 
 .project-card:hover {
-    transform: translateY(-5px);
+    /* transform: translateY(-5px); */
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }
 
+.project-card:nth-child(even) {
+    flex-direction: row-reverse;
+}
+
+.project-image {
+    flex: 0 0 300px;
+}
+
+.project-image img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+}
+
+.project-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
 .project-card h3 {
     font-size: 14px;
     color: #555555;
     font-weight: 400;
+    margin: 0;
 }
 
-/* Project thumbnail placeholder - replace with your actual thumbnails */
+/* .thumbnail { */
-.thumbnail {
+/*     width: 100%; */
-    width: 100%;
+/*     height: 120px; */
-    height: 120px;
+/*     background-color: #e0e0e0; */
-    background-color: #e0e0e0;
+/*     margin-bottom: 15px; */
-    margin-bottom: 15px;
+/*     display: flex; */
-    display: flex;
+/*     align-items: center; */
-    align-items: center;
+/*     justify-content: center; */
-    justify-content: center;
+/*     font-size: 12px; */
+/*     color: #777; */
+/* } */
+
+.project-description {
+    font-size: 13px;
+    color: #666;
+    line-height: 1.5;
+    margin: 0;
+}
+
+.project-tech {
     font-size: 12px;
-    color: #777;
+    color: #888;
+    font-style: italic;
+}
+
+.project-links {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+}
+
+.project-link {
+    font-size: 12px;
+    color: #333;
+    text-decoration: none;
+    padding: 5px 10px;
+    border: 1px solid #ddd;
+    transition: background-color 0.3s ease;
+}
+
+.project-link:hover {
+    background-color: #f0f0f0;
 }
 
 /* Footer */