base '/' and homepage set

src/App.tsx

@@ -33,13 +33,13 @@ function App() {
       <ShoppingCartProvider>
         <Navbar isTopOfPage={isTopOfPage} />
         <Routes>
-          <Route path="https://arositen.github.io/Gumball/" element={<Splash />} />
-          <Route path="/Gumball/mens" element={<Mens />} />
-          <Route path="/Gumball/womens" element={<Womens />} />
-          <Route path="/Gumball/upcoming-artist" element={<UpcomingArtist />} />
-          <Route path="/Gumball/details" element={<Details />} />
-          <Route path="/Gumball/details/:id" element={<Details />} />
-          <Route path="/Gumball/checkout" element={<Checkout />} />
+          <Route path="/" element={<Splash />} />
+          <Route path="/mens" element={<Mens />} />
+          <Route path="/womens" element={<Womens />} />
+          <Route path="/upcoming-artist" element={<UpcomingArtist />} />
+          <Route path="/details" element={<Details />} />
+          <Route path="/details/:id" element={<Details />} />
+          <Route path="/checkout" element={<Checkout />} />
         </Routes>
         <Footer />
       </ShoppingCartProvider>

src/data/shirtDatabase.json

@@ -2,7 +2,7 @@
     {
         "gender": "mens",
         "name": "Classic",
-        "image": "./imgs/ShirtDesign01.jfif",
+        "image": "/imgs/ShirtDesign01.jfif",
         "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit nulla!",
         "price": 21.99,
         "category": "Long Sleeve",
@@ -38,7 +38,7 @@
     {
         "gender": "mens",
         "name": "Bubble",
-        "image": "./imgs/ShirtDesign02.jfif",
+        "image": "/imgs/ShirtDesign02.jfif",
         "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit nulla!",
         "price": 23.99,
         "category": "Button Up",
@@ -74,7 +74,7 @@
     {
         "gender": "mens",
         "name": "Rainbow",
-        "image": "./imgs/ShirtDesign03.jfif",
+        "image": "/imgs/ShirtDesign03.jfif",
         "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit nulla!",
         "price": 20.99,
         "category": "1/4 Button",
@@ -110,7 +110,7 @@
     {
         "gender": "mens",
         "name": "Soda",
-        "image": "./imgs/ShirtDesign04.jfif",
+        "image": "/imgs/ShirtDesign04.jfif",
         "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit nulla!",
         "price": 30.99,
         "category": "Button Up",
@@ -146,7 +146,7 @@
     {
         "gender": "mens",
         "name": "Band",
-        "image": "./imgs/ShirtDesign05.jfif",
+        "image": "/imgs/ShirtDesign05.jfif",
         "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit nulla!",
         "price": 19.99,
         "category": "T-Shirt",
@@ -182,7 +182,7 @@
     {
         "gender": "mens",
         "name": "Puzzle",
-        "image": "./imgs/ShirtDesign06.jfif",
+        "image": "/imgs/ShirtDesign06.jfif",
         "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit nulla!",
         "price": 40.99,
         "category": "T-Shirt",
@@ -218,7 +218,7 @@
     {
         "gender": "womens",
         "name": "Classic",
-        "image": "./imgs/WomensShirtDesign02.jfif",
+        "image": "/imgs/WomensShirtDesign02.jfif",
         "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit nulla!",
         "price": 21.99,
         "category": "T-Shirt",
@@ -254,7 +254,7 @@
     {
         "gender": "womens",
         "name": "Gradient",
-        "image": "./imgs/WomensShirtDesign01.jfif",
+        "image": "/imgs/WomensShirtDesign01.jfif",
         "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit nulla!",
         "price": 30.99,
         "category": "Button Up",
@@ -290,7 +290,7 @@
     {
         "gender": "womens",
         "name": "Space",
-        "image": "./imgs/WomensShirtDesign03.jfif",
+        "image": "/imgs/WomensShirtDesign03.jfif",
         "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit nulla!",
         "price": 25.99,
         "category": "T-Shirt",
@@ -326,7 +326,7 @@
     {
         "gender": "womens",
         "name": "Splatter",
-        "image": "./imgs/WomensShirtDesign04.jfif",
+        "image": "/imgs/WomensShirtDesign04.jfif",
         "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit nulla!",
         "price": 25.99,
         "category": "T-Shirt",
@@ -362,7 +362,7 @@
     {
         "gender": "womens",
         "name": "Material",
-        "image": "./imgs/WomensShirtDesign05.jfif",
+        "image": "/imgs/WomensShirtDesign05.jfif",
         "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit nulla!",
         "price": 44.99,
         "category": "Cardigan",
@@ -398,7 +398,7 @@
     {
         "gender": "womens",
         "name": "Dot",
-        "image": "./imgs/WomensShirtDesign06.jfif",
+        "image": "/imgs/WomensShirtDesign06.jfif",
         "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit nulla!",
         "price": 35.99,
         "category": "Button Up",
@@ -434,7 +434,7 @@
     {
         "gender": "special",
         "name": "Starry Night",
-        "image": "./imgs/SpecialShirtVanGogh.jfif",
+        "image": "/imgs/SpecialShirtVanGogh.jfif",
         "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit nulla!",
         "price": 21.99,
         "category": "Long Sleeve",
@@ -467,13 +467,13 @@
             }
         ],
         "artistName": "Vincent Van Gogh",
-        "artistPortrait": "./imgs/VangoghPortrait.jfif",
+        "artistPortrait": "/imgs/VangoghPortrait.jfif",
         "artistBio": "Vincent Van Gogh, a rising star in the art world, is a Dutch painter known for his emotive brushwork and vibrant colors. With a talent for capturing the essence of his subjects, his work pulsates with raw emotion and energy. Van Gogh's bold style and unwavering passion promise an exciting journey ahead in the world of art."
     },
     {
         "gender": "special",
         "name": "Fracture",
-        "image": "./imgs/SpecialShirtPicasso03.jfif",
+        "image": "/imgs/SpecialShirtPicasso03.jfif",
         "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit nulla!",
         "price": 23.99,
         "category": "Long Sleeve",
@@ -506,13 +506,13 @@
             }
         ],
         "artistName": "Pablo Picasso",
-        "artistPortrait": "./imgs/picassoportrait.jfif",
+        "artistPortrait": "/imgs/picassoportrait.jfif",
         "artistBio": "Pablo Picasso, a rising force in the art scene, revolutionizes the canvas with his avant-garde approach and unparalleled creativity. The Spanish maestro's cubist vision deconstructs reality, reshaping perceptions and challenging artistic conventions. With each stroke, Picasso's bold experimentation pushes the boundaries of expression, marking him as a trailblazer in the art world."
     },
     {
         "gender": "special",
         "name": "Self Portrait",
-        "image": "./imgs/SpecialShirtDali.jfif",
+        "image": "/imgs/SpecialShirtDali.jfif",
         "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit nulla!",
         "price": 25.99,
         "category": "Long Sleeve",
@@ -545,7 +545,7 @@
             }
         ],
         "artistName": "Salvador Dali",
-        "artistPortrait": "./imgs/daliPortrait.jpg",
+        "artistPortrait": "/imgs/daliPortrait.jpg",
         "artistBio": "Salvador Dali, an emerging iconoclast of surrealism, mesmerizes audiences with his uncanny ability to transform the ordinary into the extraordinary. The Spanish painter's dreamlike landscapes and melting clocks evoke a sense of wonder and intrigue, inviting viewers into the depths of his subconscious. Dali's eccentricity and boundless imagination promise a surreal journey into the unknown realms of artistry."
     }
 ]

src/scenes/navbar/index.tsx

@@ -29,21 +29,21 @@ function Navbar({ isTopOfPage }: Props) {
                 {isAboveSmallScreens && (
                     <div className="flex justify-center mx-4">
                         <div className={navStyles}>
-                            <Link to='/Gumball'><img className='h-12 md:h-16' src={GumballLogo} alt="" /></Link>
+                            <Link to='/'><img className='h-12 md:h-16' src={GumballLogo} alt="" /></Link>
                         </div>
                     </div>
                 )}
                 {/* Options */}
                 {isAboveSmallScreens ? (
                     <div className="flex justify-center mx-4">
                         <div className={navStyles}>
-                            <Link to='/Gumball/mens'>Men's</Link>
+                            <Link to='/mens'>Men's</Link>
                         </div>
                         <div className={navStyles}>
-                            <Link to='/Gumball/womens'>Women's</Link>
+                            <Link to='/womens'>Women's</Link>
                         </div>
                         <div className={navStyles}>
-                            <Link to='/Gumball/upcoming-artist'>Upcoming Artist Series</Link>
+                            <Link to='/upcoming-artist'>Upcoming Artist Series</Link>
                         </div>
                     </div>) : (
                     <div className="flex justify-center mx-4">
@@ -60,7 +60,7 @@ function Navbar({ isTopOfPage }: Props) {
             {!isAboveSmallScreens && (
                 <div className="flex justify-center mx-4">
                     <div className={navStyles}>
-                        <Link to='/Gumball'><img className='h-10' src={GBLogoSmall} alt="" /></Link>
+                        <Link to='/'><img className='h-10' src={GBLogoSmall} alt="" /></Link>
                     </div>
                 </div>
             )}
@@ -90,9 +90,9 @@ function Navbar({ isTopOfPage }: Props) {
                     </div>
                     {/* MENU ITEMS  */}
                     <div className="mx-5 my-4 mb-10 px-5 flex flex-col gap-10 text-lg">
-                        <Link to='/Gumball/mens' onClick={() => setIsMenuToggled(!isMenuToggled)}>Men's</Link>
-                        <Link to='/Gumball/womens' onClick={() => setIsMenuToggled(!isMenuToggled)}>Women's</Link>
-                        <Link to='/Gumball/upcoming-artist' onClick={() => setIsMenuToggled(!isMenuToggled)}>Upcoming Artist Series</Link>
+                        <Link to='/mens' onClick={() => setIsMenuToggled(!isMenuToggled)}>Men's</Link>
+                        <Link to='/womens' onClick={() => setIsMenuToggled(!isMenuToggled)}>Women's</Link>
+                        <Link to='/upcoming-artist' onClick={() => setIsMenuToggled(!isMenuToggled)}>Upcoming Artist Series</Link>
                     </div>
                 </div>
             )}

src/scenes/shared/ArtistProductCard.tsx

@@ -23,7 +23,7 @@ function ArtistProductCard({ product }: Props) {
                 <div className='-skew-x-6 bg-[#e9c46a] h-full w-1/4 -mx-1 p-0'></div>
             </div>
 
-            <Link to={`/Gumball/details/${product.productID}`} state={{ from: product, id: product.productID }}>
+            <Link to={`/details/${product.productID}`} state={{ from: product, id: product.productID }}>
                 <div className='flex justify-center items-center h-full'>
                     <img className='h-full object-cover object-center rounded-xl' src={product.image} alt="" />
                 </div>
@@ -56,7 +56,7 @@ function ArtistProductCard({ product }: Props) {
                     )}
                 </div>
                 <div className='flex justify-end'>
-                    <Link to={`/Gumball/details/${product.productID}`} state={{ from: product, id: product.productID }}
+                    <Link to={`/details/${product.productID}`} state={{ from: product, id: product.productID }}
                         className={greenButtonStyle}>
                         Buy Now
                     </Link>

src/scenes/shared/CartSlideOver.tsx

@@ -56,7 +56,7 @@ function CartSlideOver() {
                                                                     <div>
                                                                         <div className="flex justify-between text-base font-medium text-gray-900">
                                                                             <h3>
-                                                                                <Link to={`/Gumball/details/${item.parentID}`} state={{ from: item, id: item.parentID }} onClick={closeCart}>{item.name}</Link>
+                                                                                <Link to={`/details/${item.parentID}`} state={{ from: item, id: item.parentID }} onClick={closeCart}>{item.name}</Link>
                                                                             </h3>
                                                                             <p className="ml-4">{formatCurrency(item.price * item.quantity)}</p>
                                                                         </div>
@@ -84,7 +84,7 @@ function CartSlideOver() {
                                             </div>
                                             <p className="mt-0.5 text-sm text-gray-500">Shipping and taxes calculated at checkout.</p>
                                             <div className="mt-6">
-                                                <Link to={'/Gumball/checkout/'}>
+                                                <Link to={'/checkout/'}>
                                                     <button className={`flex ${isEmpty ? 'opacity-50' : 'opacity-100 hover:bg-indigo-700'} w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-6 py-3 text-base font-medium text-white shadow-sm`}
                                                         disabled={isEmpty}
                                                         onClick={closeCart}>

src/scenes/shared/ProductCard.tsx

@@ -13,7 +13,7 @@ function ProductCard({ product }: Props) {
     const isAboveSmallScreens = useMediaQuery("(min-width:800px)");
 
     return (
-        <Link to={`/Gumball/details/${product.productID}`} state={{ from: product, id: product.productID }} className="flex flex-col justify-center max-w-96 mt-5 mx-auto border-solid border-2 border-black rounded-xl shadow-lg hover:scale-105 transition-all ease-in-out duration-300">
+        <Link to={`/details/${product.productID}`} state={{ from: product, id: product.productID }} className="flex flex-col justify-center max-w-96 mt-5 mx-auto border-solid border-2 border-black rounded-xl shadow-lg hover:scale-105 transition-all ease-in-out duration-300">
             <img src={product.image} className="w-full object-contain rounded-lg" alt="" />
             <div className='p-2'>
                 <div className='text-lg sm:text-xl font-bold my-1 mx-3'>{product.name}</div>

vite.config.ts

@@ -5,8 +5,8 @@ import path from 'path';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  base: '/Gumball/',
+  base: '/',
   resolve: {
-    alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }]
+    alias: [{ find: "@", replacement: path.resolve(__dirname, "./src") }]
   }
 })