Added banner preview image for portfolio gallery

.github/workflows/doc-check-linter.yml

@@ -61,12 +61,17 @@ jobs:
             echo "${{ secrets.GPG_PUBLIC_KEY_1 }}" | gpg --import
             echo "✅ Imported GPG_PUBLIC_KEY_1"
           fi
-          
+
           if [ -n "${{ secrets.GPG_PUBLIC_KEY_2 }}" ]; then
             echo "${{ secrets.GPG_PUBLIC_KEY_2 }}" | gpg --import
             echo "✅ Imported GPG_PUBLIC_KEY_2 (Contributor Account)"
           fi
-
+
+          if [ -n "${{ secrets.GPG_PUBLIC_KEY_3 }}" ]; then
+            echo "${{ secrets.GPG_PUBLIC_KEY_3 }}" | gpg --import
+            echo "✅ Imported GPG_PUBLIC_KEY_3 (Contributor Account)"
+          fi
+
       # ---------- Verify latest commit ----------
       - name: Verify commit signature
         # FIX: Only run strict verification if the PR is from the same repo (internal/trusted) or if it's a direct push
@@ -97,7 +102,7 @@ jobs:
             echo "🔑 Fingerprint: $FINGERPRINT"
 
             # Replaced the short ID with the full 40-character fingerprint
-            TRUSTED_KEYS="83FB991D930D7177F25456C07F4C7CA953E1C09E 5CC01F41CD084AAC0593108DD432152833DA3244 A38379B51EB75EF1877A83ADBE677DAEFE33CB57"
+            TRUSTED_KEYS="83FB991D930D7177F25456C07F4C7CA953E1C09E 5CC01F41CD084AAC0593108DD432152833DA3244 A38379B51EB75EF1877A83ADBE677DAEFE33CB57 1606642895F688C9299B9E0AC97540DA6C9FA85C"
 
             if echo "$TRUSTED_KEYS" | grep -q "$FINGERPRINT"; then
               echo "✅ Trusted key"
@@ -108,7 +113,7 @@ jobs:
           done
 
           echo "🎉 All PR commits are valid and trusted"
-          
+
           else
           echo "🔍 Push to main detected"
           echo "ℹ️ Skipping strict GPG verification for merge/rebase/squash commit"
@@ -118,4 +123,4 @@ jobs:
       # ---------- Optional status for skipped forked PRs ----------
       - name: Skip GPG checks for external PRs
         if: ${{ github.event.pull_request.head.repo.full_name != github.repository && github.event_name == 'pull_request' }}
-        run: echo "🟡 Skipping GPG verification for external PR (no access to secrets)."
+        run: echo "🟡 Skipping GPG verification for external PR (no access to secrets)."

css/portfolio.css

@@ -322,6 +322,20 @@
   transition: opacity 0.4s ease, transform 0.4s ease;
 }
 
+/* This only applies to mobile screens */
+@media (max-width: 576px) {
+  .panel-bg {
+    /* 'contain' forces the whole image to show without zooming or cropping */
+    object-fit: contain; 
+
+    /* Centers the un-zoomed image perfectly */
+    object-position: center; 
+
+    /* Optional: Adds a dark background behind the image if there is any empty space */
+    background-color: #1e293b; 
+  }
+}
+
 .gallery-panel:hover .panel-icon,
 .gallery-panel.active .panel-icon {
   opacity: 0;

portfolio/index.html

@@ -133,7 +133,7 @@ <h1>My Portfolio & <span class="gradient-text">Case Studies</span></h1>
       </p>
       <div class="hero-buttons">
         <a href="#frontend-works" class="btn primary glow-btn">Frontend Interfaces</a>
-        <a href="#case-studies" class="btn secondary glow-btn">Backend Architecture</a>        
+        <a href="#case-studies" class="btn secondary glow-btn">Backend Architecture</a>
       </div>
     </div>
   </section>
@@ -149,8 +149,13 @@ <h2 class="section-title">Live Frontend Interfaces</h2>
 
       <!-- 1. Foodaholic -->
       <div class="gallery-panel active">
-        <img src="/images/foodaholic-preview.png" alt="Foodaholic"
-          onerror="this.src='https://placehold.co/800x600/1e293b/38bdf8?text=Foodaholic'" class="panel-bg">
+        <picture>
+          <!-- Show this mobile screenshot on screens change from 768px to 576px wide or smaller -->
+          <source media="(max-width: 576px)" srcset="/images/foodaholic-mobile.png">
+
+          <!-- Default to this desktop screenshot on larger screens -->
+          <img src="/images/foodaholic-preview.png" alt="Foodaholic" class="panel-bg">
+        </picture>
         <div class="panel-overlay"></div>
 
         <div class="panel-icon"><i class="fas fa-hamburger"></i></div>
@@ -172,8 +177,13 @@ <h3>Foodaholic</h3>
 
       <!-- 2. RED & BLUE Clothing Studio -->
       <div class="gallery-panel">
-        <img src="/images/red-n-blue-preview.png" alt="RED & BLUE"
-          onerror="this.src='https://placehold.co/800x600/1e293b/e23636?text=RED+%26+BLUE'" class="panel-bg">
+        <picture>
+          <!-- Show this mobile screenshot on screens 768px wide or smaller -->
+          <source media="(max-width: 768px)" srcset="/images/red-n-blue-mobile.png">
+
+          <!-- Default to this desktop screenshot on larger screens -->
+          <img src="/images/red-n-blue-preview.png" alt="RED & BLUE" class="panel-bg">
+        </picture>
         <div class="panel-overlay"></div>
 
         <div class="panel-icon"><i class="fas fa-tshirt"></i></div>
@@ -196,8 +206,13 @@ <h3>RED & BLUE Studio</h3>
 
       <!-- 3. Golden Planet Jewellers -->
       <div class="gallery-panel">
-        <img src="/images/golden-planet-preview.png" alt="Golden Planet"
-          onerror="this.src='https://placehold.co/800x600/1e293b/eab308?text=Golden+Planet'" class="panel-bg">
+        <picture>
+          <!-- Show this mobile screenshot on screens 768px wide or smaller -->
+          <source media="(max-width: 768px)" srcset="/images/golden-planet-mobile.png">
+
+          <!-- Default to this desktop screenshot on larger screens -->
+          <img src="/images/golden-planet-preview.png" alt="Golden Planet" class="panel-bg">
+        </picture>
         <div class="panel-overlay"></div>
 
         <div class="panel-icon"><i class="fas fa-gem"></i></div>
@@ -219,8 +234,13 @@ <h3>Golden Planet</h3>
 
       <!-- 4. Hotel Best Inn -->
       <div class="gallery-panel">
-        <img src="/images/hotel-best-inn-preview.png" alt="Hotel Best Inn"
-          onerror="this.src='https://placehold.co/800x600/1e293b/22c55e?text=Hotel+Best+Inn'" class="panel-bg">
+        <picture>
+          <!-- Show this mobile screenshot on screens 768px wide or smaller -->
+          <source media="(max-width: 768px)" srcset="/images/hotel-best-inn-mobile.png">
+
+          <!-- Default to this desktop screenshot on larger screens -->
+          <img src="/images/hotel-best-inn-preview.png" alt="Hotel Best Inn" class="panel-bg">
+        </picture>
         <div class="panel-overlay"></div>
 
         <div class="panel-icon"><i class="fas fa-hotel"></i></div>
@@ -243,8 +263,13 @@ <h3>Hotel Best Inn</h3>
 
       <!-- 5. Jay Ambe Jewellers -->
       <div class="gallery-panel">
-        <img src="/images/jay-ambe-preview.png" alt="Jay Ambe"
-          onerror="this.src='https://placehold.co/800x600/1e293b/a855f7?text=Jay+Ambe'" class="panel-bg">
+                <picture>
+          <!-- Show this mobile screenshot on screens 768px wide or smaller -->
+          <source media="(max-width: 768px)" srcset="/images/jay-ambe-mobile.png">
+
+          <!-- Default to this desktop screenshot on larger screens -->
+          <img src="/images/jay-ambe-preview.png" alt="Jay Ambe" class="panel-bg">
+        </picture>
         <div class="panel-overlay"></div>
 
         <div class="panel-icon"><i class="fas fa-ring"></i></div>
@@ -489,7 +514,7 @@ <h3>
         </ul>
       </div>
     </div>
-    
+
     <div class="footer-bottom">
       <p>&copy; 2026 Vimal Tech. All rights reserved.</p>
     </div>