Fix (Featured Projects routing issue)

Author: HxnDev

src/App.jsx

@@ -143,13 +143,27 @@ function App() {
                   }
                 >
                   <Routes>
+                    {/* Base routes */}
                     <Route path="/" element={<Home />} />
+                    <Route path="/projects" element={<Projects />} />
+                    <Route path="/about" element={<About />} />
+                    <Route path="/contact" element={<Contact />} />
+
+                    {/* Support for both base routes and resolved paths */}
                     <Route path={resolvePath('/')} element={<Home />} />
                     <Route path={resolvePath('/projects')} element={<Projects />} />
                     <Route path={resolvePath('/about')} element={<About />} />
                     <Route path={resolvePath('/contact')} element={<Contact />} />
 
                     {/* Redirect to JobFit application */}
+                    <Route
+                      path="/JobFit"
+                      element={<Navigate to="https://hxndev.github.io/JobFit/" replace />}
+                    />
+                    <Route
+                      path="/JobFit/*"
+                      element={<Navigate to="https://hxndev.github.io/JobFit/" replace />}
+                    />
                     <Route
                       path={resolvePath('/JobFit')}
                       element={<Navigate to="https://hxndev.github.io/JobFit/" replace />}
@@ -158,6 +172,9 @@ function App() {
                       path={resolvePath('/JobFit/*')}
                       element={<Navigate to="https://hxndev.github.io/JobFit/" replace />}
                     />
+
+                    {/* Catch-all route */}
+                    <Route path="*" element={<Navigate to="/" replace />} />
                   </Routes>
                 </Suspense>
               </PageTransition>

src/components/projects/EnhancedProjectCard.jsx

@@ -60,7 +60,7 @@ const EnhancedProjectCard = ({
   const handleCardClick = e => {
     e.preventDefault();
     if (onViewDetails && projectId) {
-      onViewDetails(projectId);
+      onViewDetails(projectId, 'page');
     }
   };
 
@@ -69,7 +69,7 @@ const EnhancedProjectCard = ({
     e.preventDefault();
     e.stopPropagation();
     if (onViewDetails && projectId) {
-      onViewDetails(projectId);
+      onViewDetails(projectId, 'page');
     }
   };
 

src/components/utils/paths.jsx

@@ -1,11 +1,13 @@
 // Detect if we're in production or development
 const _isProd = import.meta.env.PROD;
 
-// Base path should be empty for username.github.io repos
+// For GitHub Pages repository project sites, this should be the repo name
+// For username.github.io personal sites, this should be empty
 export const BASE_PATH = '';
 
 /**
  * Resolves a path based on environment
+ * This handles routing correctly for GitHub Pages
  */
 export function resolvePath(path) {
   // If already has the base path or is an external URL, return as is

src/pages/Home.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Title, Text, Container, Button, Grid, Loader, Box, SimpleGrid } from '@mantine/core';
+import { useNavigate } from 'react-router-dom';
+import { resolvePath } from '../components/utils/paths';
 import HeroSection from '../components/home/HeroSection';
 import EnhancedProjectCard from '../components/projects/EnhancedProjectCard';
 import SponsorshipSection from '../components/SponsorshipSection';
@@ -8,6 +10,7 @@ import AnimatedSection from '../components/common/AnimatedSection';
 import { useColorScheme } from '../theme/ThemeProvider';
 
 const Home = () => {
+  const navigate = useNavigate();
   const {
     projects: allProjects,
     loading: projectsLoading,
@@ -24,7 +27,11 @@ const Home = () => {
   }, [allProjects]);
 
   const handleViewDetails = projectId => {
-    window.location.href = `/projects?project=${projectId}`;
+    // Pass the projectId and action to our handler
+    navigate({
+      pathname: resolvePath('/projects'),
+      search: `?project=${projectId}`,
+    });
   };
 
   return (

vite.config.js

@@ -5,7 +5,7 @@ import path from 'path';
 export default defineConfig({
   plugins: [react()],
 
-  // For username.github.io repos, the base URL should be '/' in production
+  // For username.github.io personal sites, the base URL should be '/'
   base: '/',
 
   build: {