From 80b80329bc9b4a336dd7584753e5d16231e76297 Mon Sep 17 00:00:00 2001
From: Local Server <server@skyartshop.local>
Date: Wed, 14 Jan 2026 07:33:38 -0600
Subject: [PATCH] Fix: Portfolio page layout and image loading - use
 featuredimage field

---
 website/public/portfolio.html | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/website/public/portfolio.html b/website/public/portfolio.html
index ab574dc..c571592 100644
--- a/website/public/portfolio.html
+++ b/website/public/portfolio.html
@@ -325,8 +325,9 @@
           // Safe template with validated data
           modalContent.innerHTML = `
           <div class="project-image" style="width: 100%; height: 450px; overflow: hidden; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); flex-shrink: 0;">
-            <img src="${project.imageurl || "/assets/images/placeholder.svg"}" 
+            <img src="${project.featuredimage || project.imageurl || "/assets/images/placeholder.svg"}" 
                  alt="${project.title}" 
+                 onerror="this.src='/assets/images/placeholder.svg'"
                  style="width: 100%; height: 100%; object-fit: cover;" />
           </div>
           <div style="padding: 40px; background: white;">
@@ -341,7 +342,9 @@
             <div style="color: #555; font-size: 17px; line-height: 1.9; margin-bottom: 32px; font-weight: 400;">
               ${project.description || "No description available."}
             </div>
-            <div style="padding-top: 24px; border-top: 2px solid #f0f0f0; color: #888; font-size: 15px; display: flex; align-items: center; gap: 8px;">
+            ${
+              project.createdat
+                ? `<div style="padding-top: 24px; border-top: 2px solid #f0f0f0; color: #888; font-size: 15px; display: flex; align-items: center; gap: 8px;">
               <i class="bi bi-calendar3" style="font-size: 18px;"></i> 
               <span style="font-weight: 500;">Created on ${new Date(
                 project.createdat
@@ -350,7 +353,9 @@
                 month: "long",
                 day: "numeric",
               })}</span>
-            </div>
+            </div>`
+                : ""
+            }
           </div>
         `;
         modal.style.display = "block";
@@ -416,11 +421,12 @@
               }')" style="background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.3s; cursor: pointer;">
                 <div class="product-image" style="position: relative; padding-top: 100%; overflow: hidden; background: #f5f5f5;">
                   <img src="${
-                    project.imageurl || "/assets/images/placeholder.svg"
+                    project.featuredimage || project.imageurl || "/assets/images/placeholder.svg"
                   }" 
                        alt="${project.title}" 
                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s;"
                        loading="lazy"
+                       onerror="this.src='/assets/images/placeholder.svg'"
                        onmouseover="this.style.transform='scale(1.05)'" 
                        onmouseout="this.style.transform='scale(1)'" />
                   ${
@@ -433,6 +439,11 @@
                   <h3 style="font-size: 18px; font-weight: 600; margin: 0; color: #333;">${
                     project.title
                   }</h3>
+                  ${
+                    project.description && project.description.replace(/<[^>]*>/g, '').trim()
+                      ? `<p style="font-size: 14px; color: #666; margin: 8px 0 0 0; line-height: 1.5;">${project.description.replace(/<[^>]*>/g, '').substring(0, 80)}${project.description.length > 80 ? '...' : ''}</p>`
+                      : ""
+                  }
                 </div>
               </div>
             `