env variablkes and public paths

.env.development

@@ -0,0 +1,3 @@
+# for development only
+NEXT_PUBLIC_PUBLIC_PATH=""
+# for example public_path/assets/image.jpg

.env.production

@@ -0,0 +1,2 @@
+# for production only
+NEXT_PUBLIC_PUBLIC_PATH=https://gdg-oncampus-bu.github.io/landing-page-WIP/

src/app/page.jsx

@@ -6,11 +6,11 @@ import EventsSection from "@/components/EventsSection";
 import Links from "@/components/Links";
 
 export default function Home() {
+  const publicPath = process.env.NEXT_PUBLIC_PUBLIC_PATH ;
   const [eventsData, setEventsData] = useState([]);
-
   useEffect(() => {
     const fetchEventsData = async () => {
-      const response = await fetch("/data/events.json");
+      const response = await fetch(publicPath+"/data/events.json");
       const data = await response.json();
       setEventsData(data);
     };
@@ -30,15 +30,15 @@ export default function Home() {
       }, 600);
     }
   };
-
   return (
     <>
       <Navbar />
 
       <div
         className="flex flex-col items-center justify-center min-h-screen p-8 pb-20 gap-8 sm:p-20 text-center"
         style={{
-          backgroundImage: `url('/assets/image1.png')`,
+          // we are hardcoding the image url here due to gh pages and next contraints
+          backgroundImage: `url('https://gdg-oncampus-bu.github.io/landing-page-WIP/assets/image1.png')`,
           backgroundSize: "contain",
           backgroundRepeat: "no-repeat",
           backgroundPosition: "bottom",

src/components/Navbar.jsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import Image from "next/image";
-import gdg_logo from "../../public/assets/logo_gdg.png";
 
 export default function Navbar() {
+  const public_path = process.env.NEXT_PUBLIC_PUBLIC_PATH
   const [visible, setVisible] = useState(false);
   const [scrollPosition, setScrollPosition] = useState(0);
 
@@ -36,7 +36,7 @@ export default function Navbar() {
             className="flex items-center space-x-3 rtl:space-x-reverse"
           >
             <Image
-              src={gdg_logo}
+              src={public_path + "/assets/logo_gdg.png"}
               alt="GDG Logo"
               width={32}
               height={32}