Migrate backend

README.md

@@ -23,7 +23,7 @@ It showcases my **iOS development skills, projects, and experience** in a mobile
 ## 📸 Preview
 
 🔗 [**Visit Live Site**](https://csprasad.github.io/landing.html)
-![webpage](data/webpage.png)
+![webpage](https://portfolio-backend-p1.vercel.app/project-assets/webpage.png)
 
 ---
 
@@ -41,4 +41,4 @@ It showcases my **iOS development skills, projects, and experience** in a mobile
 
 ---
 
-## Contact - [LinkedIn](https://linkedin.com/in/csprasadios) | [GitHub](https://github.com/csprasad) | [Email](mailto:codealligator.csprasad@gmail.com)
+## Contact - [LinkedIn](https://linkedin.com/in/csprasadios) | [GitHub](https://github.com/csprasad) | [Email](mailto:codealligator.csprasad@gmail.com)

iPhone/home.html

@@ -86,6 +86,8 @@ <h1>
             </div>
          </div>
       </div>
+
+      <script src="../scripts/dataLoader.js"></script>
       <script src="scripts/home.js"></script>
    </body>
 </html>

iPhone/project-details.html

@@ -81,6 +81,7 @@
 
 
   <!-- Include Central JavaScript -->
+  <script src="../scripts/dataLoader.js"></script>
   <script src="scripts/project-details.js"></script>
   <script src="scripts/image-modal-helper.js"></script>
 </body>

iPhone/projects.html

@@ -37,6 +37,7 @@
   </div>
 
   <!-- Include Central JavaScript -->
+  <script src="../scripts/dataLoader.js"></script>
   <script src="scripts/project.js"></script>
 </body>
 </html>

iPhone/scripts/home.js

@@ -1,39 +1,43 @@
-document.addEventListener("DOMContentLoaded", function () {
-    fetch("../data/portfolio.json") // Adjusted path
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`HTTP error! Status: ${response.status}`);
-            }
-            return response.json();
-        })
-        .then(data => {
-            if (!data.profile) throw new Error("Profile data is missing!");
-
-            const profile = data.profile;
-
-            // Update profile picture
-            const profileImage = document.querySelector(".widget-content img");
-            if (profileImage && profile.profile_picture) {
-                profileImage.src = profile.profile_picture;
-            }
-
-            // Update name and alias
-            const nameElement = document.querySelector(".magic-text");
-            if (nameElement) {
-                nameElement.textContent = profile.name || "Username";
-            }
-
-            // Update intro
-            const introElement = document.querySelector(".widget-content p");
-            if (introElement) {
-                introElement.textContent = profile.intro || "Intro here";
-            }
-        })
-        .catch(error => console.error("Error loading profile data:", error));
+document.addEventListener("DOMContentLoaded", async () => {
+  try {
+    const data = await getPortfolio();
+    const base = data.BASE_URL;
+
+    if (!data.profile) throw new Error("Profile data is missing!");
+
+    const profile = data.profile;
+
+    // Update profile picture
+    const profileImage = document.querySelector(".widget-content img");
+    if (profileImage && profile.profile_picture) {
+      profileImage.src = base + profile.profile_picture;
+    }
+
+    // .home-screen 
+    const homeScreen = document.querySelector(".home-screen");
+    console.log(homeScreen); // Should not be null
+    if (homeScreen && profile.background_mock) {
+        homeScreen.style.backgroundImage = `url('${base}${profile.background_mock}')`;
+        homeScreen.style.backgroundSize = "cover";
+        homeScreen.style.backgroundPosition = "center";
+    }
+
+    // Update name and alias
+    const nameElement = document.querySelector(".magic-text");
+    if (nameElement) {
+      nameElement.textContent = profile.name || "Username";
+    }
+
+    // Update intro
+    const introElement = document.querySelector(".widget-content p");
+    if (introElement) {
+      introElement.textContent = profile.intro || "Intro here";
+    }
+  } catch (error) {
+    console.error("Error loading profile data:", error);
+  }
 });
 
-
-
 // Sparkeling Effect 
 let index = 0,
     interval = 2000;

iPhone/scripts/project-details.js

@@ -1,44 +1,49 @@
 // project-details.js
 document.addEventListener("DOMContentLoaded", async () => {
-  const urlParams = new URLSearchParams(window.location.search);
-  const projectId = urlParams.get("id");
-  const osType = urlParams.get("os");
-
-  // If this file is included on landing.html, quietly bail.
-  if (!projectId || !osType) return;
-
-  try {
-    const response = await fetch("../data/portfolio.json");
-    const data = await response.json();
-    const apps = data.apps[`${osType}_apps`];
-
-    const project = apps.find(app => String(app.app_id) === String(projectId));
-    if (!project) throw new Error("Project not found.");
-
-    // Update UI
-    document.getElementById("app-icon").src = project.icon;
-    document.getElementById("app-name").textContent = project.name;
-    document.getElementById("app-category").textContent = project.category;
-    document.getElementById("description").textContent = project.description;
-    document.getElementById("action-button").href = project.app_store_link;
-
-    // Render screenshots
-    const screenshotContainer = document.getElementById("screenshot-container");
-    screenshotContainer.innerHTML = "";
-    project.screenshots.forEach(image => {
-      const img = document.createElement("img");
-      img.src = image;
-      img.alt = "Screenshot";
-      img.classList.add("screenshot");
-      screenshotContainer.appendChild(img);
-    });
-
-    // Hook up the modal (works here and in popup)
-    window.initScreenshotModal(screenshotContainer, project.screenshots);
-
-  } catch (error) {
-    console.error(error);
-    const holder = document.querySelector(".app-container");
-    if (holder) holder.innerHTML = `<p>${error.message}</p>`;
-  }
+    const urlParams = new URLSearchParams(window.location.search);
+    const projectId = urlParams.get("id");
+    const osType = urlParams.get("os");
+
+    // If this file is included on a page without parameters, bail.
+    if (!projectId || !osType) return;
+
+    try {
+        // Fetch portfolio from backend (cached by dataLoader.js)
+        const data = await getPortfolio();
+        const base = data.BASE_URL;
+
+        const apps = data.apps[`${osType}_apps`];
+        if (!apps) throw new Error(`No apps found for OS: ${osType}`);
+
+        const project = apps.find(app => String(app.app_id) === String(projectId));
+        if (!project) throw new Error("Project not found.");
+
+        // Update UI
+        document.getElementById("app-icon").src = base + project.icon;
+        document.getElementById("app-name").textContent = project.name;
+        document.getElementById("app-category").textContent = project.category;
+        document.getElementById("description").textContent = project.description;
+        document.getElementById("action-button").href = project.app_store_link;
+
+        // Render screenshots
+        const screenshotContainer = document.getElementById("screenshot-container");
+        screenshotContainer.innerHTML = "";
+        project.screenshots.forEach(image => {
+            const img = document.createElement("img");
+            img.src = base + image; // prepend base URL
+            img.alt = "Screenshot";
+            img.classList.add("screenshot");
+            screenshotContainer.appendChild(img);
+        });
+
+        // Hook up the modal (works here and in popup)
+        if (typeof window.initScreenshotModal === "function") {
+            window.initScreenshotModal(screenshotContainer, project.screenshots.map(img => base + img));
+        }
+
+    } catch (error) {
+        console.error(error);
+        const holder = document.querySelector(".app-container");
+        if (holder) holder.innerHTML = `<p>${error.message}</p>`;
+    }
 });