diff --git a/website/public/portfolio.html b/website/public/portfolio.html
index 03f223b..1ee0e6e 100644
--- a/website/public/portfolio.html
+++ b/website/public/portfolio.html
@@ -335,68 +335,54 @@
     <script src="/assets/js/shopping.js"></script>
     <script>
       let portfolioProjects = [];
+      
       // Open project modal
       function openProjectModal(projectId) {
-        try {
-          const project = portfolioProjects.find((p) => p.id === projectId);
-          if (!project) {
-            console.error('[Portfolio] Project not found:', projectId);
-            return;
-          }
-          
-          // Validate project data
-          if (!project.title) {
-            console.error('[Portfolio] Invalid project data - missing title:', project);
-            return;
-          }
-          
-          const modal = document.getElementById("projectModal");
-          const modalContent = document.getElementById("modalContent");
-          
-          // Safe template with validated data
-          modalContent.innerHTML = `
+        const project = portfolioProjects.find((p) => p.id === projectId);
+        if (!project) {
+          console.error('[Portfolio] Project not found:', projectId);
+          return;
+        }
+        
+        if (!project.title) {
+          console.error('[Portfolio] Invalid project data - missing title:', project);
+          return;
+        }
+        
+        const modal = document.getElementById("projectModal");
+        const modalContent = document.getElementById("modalContent");
+        
+        if (!modal || !modalContent) {
+          console.error('[Portfolio] Modal elements not found');
+          return;
+        }
+        
+        // Build category badge HTML
+        const categoryBadge = project.category 
+          ? `<span style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 8px 18px; border-radius: 24px; font-size: 13px; font-weight: 600; margin-bottom: 24px; letter-spacing: 0.5px; text-transform: uppercase;">${project.category}</span>`
+          : '';
+        
+        // Build modal content
+        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.featuredimage || 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;">
-            ${
-              project.category
-                ? `<span style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 8px 18px; border-radius: 24px; font-size: 13px; font-weight: 600; margin-bottom: 24px; letter-spacing: 0.5px; text-transform: uppercase;">${project.category}</span>`
-                : ""
-            }
-            <h2 style="font-size: 36px; font-weight: 700; margin: 0 0 24px 0; color: #1a1a1a; line-height: 1.2;">${
-              project.title
-            }</h2>
+            ${categoryBadge}
+            <h2 style="font-size: 36px; font-weight: 700; margin: 0 0 24px 0; color: #1a1a1a; line-height: 1.2;">${project.title}</h2>
             <div style="color: #555; font-size: 17px; line-height: 1.9; margin-bottom: 32px; font-weight: 400;">
-              ${project.description || "No description available."}
+              ${project.description || 'No description available.'}
             </div>
-            ${
-              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
-              ).toLocaleDateString("en-US", {
-                year: "numeric",
-                month: "long",
-                day: "numeric",
-              })}</span>
-            </div>`
-                : ""
-            }
           </div>
         `;
+        
         modal.style.display = "block";
         modalContent.scrollTop = 0;
         document.body.style.overflow = "hidden";
-      } catch (error) {
-        console.error('[Portfolio] Error opening modal:', error);
-        alert('Unable to open project details. Please try again.');
       }
-    }
       // Close project modal
       function closeProjectModal() {
         document.getElementById("projectModal").style.display = "none";