From 0feb8cd4972e12fda9905d28d36f1a77c461df48 Mon Sep 17 00:00:00 2001
From: Gregory Campbell <gjcampbell777@users.noreply.github.com>
Date: Wed, 3 Jun 2026 22:53:30 -0400
Subject: [PATCH] Use PUBLIC_URL for public image paths to ensure deployed
 images resolve correctly

---
 src/Home.js                   | 4 ++--
 src/Resume.js                 | 4 ++--
 src/components/ProjectCard.js | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/Home.js b/src/Home.js
index f3f55fb9c..81d84ae07 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -25,8 +25,8 @@ export const Home = () => {
 
       <section>
         <img
-          src="/images/Me-640.webp"
-          srcSet="/images/Me-320.webp 320w, /images/Me-640.webp 640w, /images/Me-1024.webp 1024w"
+          src={`${process.env.PUBLIC_URL}/images/Me-640.webp`}
+          srcSet={`${process.env.PUBLIC_URL}/images/Me-320.webp 320w, ${process.env.PUBLIC_URL}/images/Me-640.webp 640w, ${process.env.PUBLIC_URL}/images/Me-1024.webp 1024w`}
           sizes="(max-width: 600px) 100vw, 640px"
           alt="Portrait of Gregory Campbell"
           className="homeimage"
diff --git a/src/Resume.js b/src/Resume.js
index 9ebaa420d..0c6c00f6e 100644
--- a/src/Resume.js
+++ b/src/Resume.js
@@ -26,8 +26,8 @@ export const Resume = () => {
       <section>
         <h2>Written Resume</h2>
         <img
-          src="/images/Resume-640.webp"
-          srcSet="/images/Resume-320.webp 320w, /images/Resume-640.webp 640w, /images/Resume-1024.webp 1024w"
+          src={`${process.env.PUBLIC_URL}/images/Resume-640.webp`}
+          srcSet={`${process.env.PUBLIC_URL}/images/Resume-320.webp 320w, ${process.env.PUBLIC_URL}/images/Resume-640.webp 640w, ${process.env.PUBLIC_URL}/images/Resume-1024.webp 1024w`}
           sizes="(max-width: 600px) 100vw, 640px"
           alt="Resume preview"
           loading="lazy"
diff --git a/src/components/ProjectCard.js b/src/components/ProjectCard.js
index 59bb9e99b..203e225a1 100644
--- a/src/components/ProjectCard.js
+++ b/src/components/ProjectCard.js
@@ -2,10 +2,10 @@ import React from 'react';
 
 export const ProjectCard = ({ title, description, imgSrc, imgName, imgAlt, link, children }) => {
   const webpSources = imgName
-    ? `/images/${imgName}-320.webp 320w, /images/${imgName}-640.webp 640w, /images/${imgName}-1024.webp 1024w`
+    ? `${process.env.PUBLIC_URL}/images/${imgName}-320.webp 320w, ${process.env.PUBLIC_URL}/images/${imgName}-640.webp 640w, ${process.env.PUBLIC_URL}/images/${imgName}-1024.webp 1024w`
     : null;
 
-  const srcFallback = imgName ? `/images/${imgName}-640.webp` : imgSrc;
+  const srcFallback = imgName ? `${process.env.PUBLIC_URL}/images/${imgName}-640.webp` : imgSrc;
 
   return (
     <article className="project-card">