feat: Dynamic data loading & project structure improvements

- **Removed macOS & visionOS mockups** to streamline the portfolio design, focusing only on the iPhone mockup.
- **Refactored all pages to load data dynamically from data json**, eliminating hardcoded content.
- **Updated project details page** to fetch data based on os and id from the URL.
- **Fixed data fetching bugs** where apps.find failed due to incorrect structure handling.
- **Implemented structured OS-based navigation** for projects (iOS & macOS removed).
- **Refactored project listing to display apps dynamically**, grouping them by OS category.
- **Enhanced error handling & debugging logs** for better issue tracking.
- **Pending: Contact screen dynamic data integration.**

Author: csprasad

Portfolio/DashBoard/dashboard.html

@@ -33,14 +33,6 @@ <h2>Hi, I'm Brahmendraprasad 👋</h2>
             </section>
         </div>
 
-        <!-- Middle Panel: OS Selector -->
-        <div class="middle-panel">
-            <button class="os-btn" data-platform="iPhone">iPhone</button>
-            <button class="os-btn" data-platform="MacOS">macOS</button>
-            <button class="os-btn" data-platform="VisionPro">visionOS</button>
-            <button class="os-btn" data-platform="TabOS">TabOS</button>
-        </div>
-
         <!-- Right Panel: Dynamic Screen Display -->
         <div class="right-panel">
             <iframe id="os-display" src="../iPhone/index.html" frameborder="0"></iframe>

Portfolio/DashBoard/data/data.json

@@ -12,7 +12,7 @@
 
 /* Left Panel */
 .left-panel {
-    width: 25%;
+    width: 35%;
     background-color: #1e1e1e;
     color: white;
     display: flex;
@@ -23,30 +23,6 @@
     /* text-align: center; */
 }
 
-/* Middle Panel */
-.middle-panel {
-    width: 10%;
-    background-color: #2c2c2c;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 15px;
-}
-
-.os-btn {
-    background-color: #444;
-    color: white;
-    border: none;
-    padding: 10px 15px;
-    cursor: pointer;
-    border-radius: 5px;
-    transition: 0.3s;
-}
-
-.os-btn:hover {
-    background-color: #666;
-}
 
 /* Right Panel */
 .right-panel {
@@ -69,15 +45,6 @@
     .left-panel {
         display: none;
     }
-    
-    .middle-panel {
-        width: 100%;
-        flex-direction: row;
-        justify-content: center;
-        gap: 10px;
-        padding: 10px;
-    }
-
     .right-panel {
         width: 100%;
     }