From 62bb8f3574fecf65523b8be1d6fc73f0444196ad Mon Sep 17 00:00:00 2001
From: Gregory Campbell <gjcampbell777@users.noreply.github.com>
Date: Wed, 3 Jun 2026 23:01:54 -0400
Subject: [PATCH] Use public URL fallback to relative paths for public images

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

diff --git a/src/Home.js b/src/Home.js
index 81d84ae07..ce332cc1a 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -2,6 +2,8 @@ import React from 'react';
 import { Helmet } from 'react-helmet-async';
 
 export const Home = () => {
+  const publicUrl = process.env.PUBLIC_URL || '.';
+
   return (
     <main className="home-page">
       <Helmet>
@@ -25,8 +27,8 @@ export const Home = () => {
 
       <section>
         <img
-          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`}
+          src={`${publicUrl}/images/Me-640.webp`}
+          srcSet={`${publicUrl}/images/Me-320.webp 320w, ${publicUrl}/images/Me-640.webp 640w, ${publicUrl}/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 0c6c00f6e..c98c870a3 100644
--- a/src/Resume.js
+++ b/src/Resume.js
@@ -26,8 +26,8 @@ export const Resume = () => {
       <section>
         <h2>Written Resume</h2>
         <img
-          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`}
+          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 203e225a1..4cea5f3c0 100644
--- a/src/components/ProjectCard.js
+++ b/src/components/ProjectCard.js
@@ -1,11 +1,12 @@
 import React from 'react';
 
 export const ProjectCard = ({ title, description, imgSrc, imgName, imgAlt, link, children }) => {
+  const publicUrl = process.env.PUBLIC_URL || '.';
   const webpSources = imgName
-    ? `${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`
+    ? `${publicUrl}/images/${imgName}-320.webp 320w, ${publicUrl}/images/${imgName}-640.webp 640w, ${publicUrl}/images/${imgName}-1024.webp 1024w`
     : null;
 
-  const srcFallback = imgName ? `${process.env.PUBLIC_URL}/images/${imgName}-640.webp` : imgSrc;
+  const srcFallback = imgName ? `${publicUrl}/images/${imgName}-640.webp` : imgSrc;
 
   return (
     <article className="project-card">