Fix: Prevent background page scroll when modal is open - lock html and body overflow

website/public/portfolio.html

@@ -270,26 +270,24 @@
         height: 100%;
         background: rgba(0, 0, 0, 0.85);
         z-index: 9999;
-        overflow: hidden;
+        overflow-y: auto;
-        padding: 0;
+        overflow-x: hidden;
+        padding: 40px 0;
       "
+      onclick="if(event.target.id === 'projectModal') closeProjectModal();"
     >
       <div
         style="
-          position: absolute;
+          position: relative;
-          top: 50%;
+          margin: auto;
-          left: 50%;
-          transform: translate(-50%, -50%);
           width: 90%;
           max-width: 900px;
-          max-height: 90vh;
           background: white;
           border-radius: 20px;
           overflow: hidden;
           box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-          display: flex;
-          flex-direction: column;
         "
+        onclick="event.stopPropagation();"
       >
         <button
           onclick="closeProjectModal()"
@@ -318,12 +316,6 @@
         </button>
         <div
           id="modalContent"
-          style="
-            overflow-y: auto;
-            overflow-x: hidden;
-            flex: 1;
-            scroll-behavior: smooth;
-          "
         ></div>
       </div>
     </div>