Routing Updated for Github Pages

Author: HxnDev

src/App.jsx

@@ -8,6 +8,8 @@ import { Box, Container } from '@mantine/core';
 import browserDetection from './components/utils/browserDetection';
 import { preloadCriticalAssets } from './components/utils/assetPreloader';
 import { applyPerformanceOptimizations } from './components/utils/animationOptimizer';
+import { resolvePath } from './components/utils/paths';
+
 
 // Components
 import Header from './components/Header';
@@ -143,10 +145,10 @@ function App() {
                 >
                   <Routes>
                     <Route path="/" element={<Home />} />
-                    <Route path="/hxndev.github.io/" element={<Home />} />
-                    <Route path="/hxndev.github.io/projects" element={<Projects />} />
-                    <Route path="/hxndev.github.io/about" element={<About />} />
-                    <Route path="/hxndev.github.io/contact" element={<Contact />} />
+                    <Route path={resolvePath('/')} element={<Home />} />
+                    <Route path={resolvePath('/projects')} element={<Projects />} />
+                    <Route path={resolvePath('/about')} element={<About />} />
+                    <Route path={resolvePath('/contact')} element={<Contact />} />
                   </Routes>
                 </Suspense>
               </PageTransition>

src/components/Header.jsx

@@ -3,6 +3,7 @@ import { Link, useLocation } from 'react-router-dom';
 import { IconSun, IconMoon } from '@tabler/icons-react';
 import { useColorScheme } from '../theme/ThemeProvider';
 import { useEffect, useRef } from 'react';
+import { resolvePath } from './utils/paths';
 
 const Header = () => {
   const location = useLocation();
@@ -50,7 +51,7 @@ const Header = () => {
       }}
     >
       <Group justify="space-between" align="center">
-        <Link to="/hxndev.github.io/" style={{ textDecoration: 'none' }}>
+        <Link to={resolvePath('/')} style={{ textDecoration: 'none' }}>
           <Title
             ref={titleRef}
             order={2}
@@ -69,10 +70,10 @@ const Header = () => {
 
         <Group>
           {[
-            { path: '/hxndev.github.io/', label: 'Home' },
-            { path: '/hxndev.github.io/projects', label: 'Projects' },
-            { path: '/hxndev.github.io/about', label: 'About' },
-            { path: '/hxndev.github.io/contact', label: 'Contact' },
+            { path: resolvePath('/'), label: 'Home' },
+            { path: resolvePath('/projects'), label: 'Projects' },
+            { path: resolvePath('/about'), label: 'About' },
+            { path: resolvePath('/contact'), label: 'Contact' },
           ].map((item, index) => (
             <Link key={item.path} to={item.path} style={{ textDecoration: 'none' }}>
               <Button
@@ -138,4 +139,4 @@ style.textContent = `
 `;
 document.head.appendChild(style);
 
-export default Header;
+export default Header;

src/components/about/Timeline.jsx

@@ -7,7 +7,7 @@ import { useColorScheme } from '../../theme/ThemeProvider';
 /**
  * Timeline item component with animation effects
  */
-const TimelineItem = ({ title, company, date, description, isActive = false }) => {
+const TimelineItem = ({ title, company, date, description, bullets = [], isActive = false }) => {
   const itemRef = useRef(null);
   const circleRef = useRef(null);
   const contentRef = useRef(null);
@@ -100,9 +100,28 @@ const TimelineItem = ({ title, company, date, description, isActive = false }) =
         <Text className="timeline-content" weight={500} size="md" mb="sm">
           {company}
         </Text>
-        <Text className="timeline-content" mb="md">
-          {description}
-        </Text>
+        
+        {/* Description - can be string or JSX */}
+        <Box className="timeline-content" mb={bullets && bullets.length > 0 ? "sm" : "md"}>
+          {typeof description === 'string' ? (
+            <Text>{description}</Text>
+          ) : (
+            description
+          )}
+        </Box>
+        
+        {/* Bullets list - if provided */}
+        {bullets && bullets.length > 0 && (
+          <Box className="timeline-content" mb="md">
+            <ul style={{ paddingLeft: "20px", margin: "0" }}>
+              {bullets.map((bullet, index) => (
+                <li key={index} style={{ marginBottom: "8px" }}>
+                  <Text component="span">{bullet}</Text>
+                </li>
+              ))}
+            </ul>
+          </Box>
+        )}
       </Box>
     </Box>
   );
@@ -123,8 +142,6 @@ const Timeline = ({ experiences = [] }) => {
     if (!timelineRef.current) return;
 
     const timelineItems = timelineRef.current.querySelectorAll('.timeline-item');
-    // Remove or comment out this line:
-    // const timelineTop = timelineRef.current.getBoundingClientRect().top;
     const viewportHeight = window.innerHeight;
 
     // Calculate which item should be active based on scroll position
@@ -197,6 +214,7 @@ const Timeline = ({ experiences = [] }) => {
               company={experience.company}
               date={experience.date}
               description={experience.description}
+              bullets={experience.bullets}
               isActive={index === activeIndex}
               index={index}
             />
@@ -207,4 +225,4 @@ const Timeline = ({ experiences = [] }) => {
   );
 };
 
-export default Timeline;
+export default Timeline;

src/components/common/NavigationPulsar.jsx

@@ -4,6 +4,7 @@ import { IconMenu2, IconHome, IconCode, IconUser, IconMail } from '@tabler/icons
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useAnimationContext } from '../../context/AnimationContext';
 import { gsap } from 'gsap';
+import { resolvePath } from '../utils/paths';
 
 const NavigationPulsar = () => {
   const [expanded, setExpanded] = useState(false);
@@ -14,10 +15,10 @@ const NavigationPulsar = () => {
   const { scrollVelocity, reducedMotion } = useAnimationContext();
 
   const navigationItems = [
-    { path: '/hxndev.github.io/', label: 'Home', icon: <IconHome size={20} /> },
-    { path: '/hxndev.github.io/projects', label: 'Projects', icon: <IconCode size={20} /> },
-    { path: '/hxndev.github.io/about', label: 'About', icon: <IconUser size={20} /> },
-    { path: '/hxndev.github.io/contact', label: 'Contact', icon: <IconMail size={20} /> },
+    { path: resolvePath('/'), label: 'Home', icon: <IconHome size={20} /> },
+    { path: resolvePath('/projects'), label: 'Projects', icon: <IconCode size={20} /> },
+    { path: resolvePath('/about'), label: 'About', icon: <IconUser size={20} /> },
+    { path: resolvePath('/contact'), label: 'Contact', icon: <IconMail size={20} /> },
   ];
 
   // Handle navigation click

src/components/home/HeroSection.jsx

@@ -3,6 +3,8 @@ import { Title, Text, Container, Button, Group, Grid, Box } from '@mantine/core'
 import { IconDownload, IconBrandGithub, IconArrowRight } from '@tabler/icons-react';
 import { gsap } from 'gsap';
 import { useColorScheme } from '../../theme/ThemeProvider';
+import { resolveAssetPath } from '../utils/paths';
+
 
 const HeroSection = () => {
   const containerRef = useRef(null);
@@ -198,7 +200,7 @@ const HeroSection = () => {
             <div className="profile-container" ref={imageRef}>
               <div className="profile-image-wrapper">
                 <img
-                  src="/hxndev.github.io/images/profile.jpg"
+                  src={resolveAssetPath('images/profile.jpg')}
                   alt="Hassan Shahzad"
                   className="profile-image"
                 />

src/components/utils/assetPreloader.jsx

@@ -1,6 +1,7 @@
 /**
  * Utility for preloading assets to improve performance
  */
+import { resolveAssetPath } from '../utils/paths';
 
 /**
  * Preload an image
@@ -76,38 +77,44 @@ export const preloadFont = (fontFamily, src) => {
  * @returns {Array} Array of critical image URLs
  */
 export const getCriticalImages = () => {
-  return [
+  // Define paths without prefix
+  const imagePaths = [
     // Profile image
-    '/hxndev.github.io/images/profile.jpg',
+    'images/profile.jpg',
 
     // Project images for featured projects
-    '/hxndev.github.io/images/projects/3d-solar-system.jpg',
-    '/hxndev.github.io/images/projects/ai-chess.jpg',
-    '/hxndev.github.io/images/projects/brilliant-pro.jpg',
-    '/hxndev.github.io/images/projects/event-management.jpg',
-    '/hxndev.github.io/images/projects/exam-scheduler.jpg',
-    '/hxndev.github.io/images/projects/face-mesh.jpg',
-    '/hxndev.github.io/images/projects/graphical-password.jpg',
-    '/hxndev.github.io/images/projects/hawkseye.jpg',
-    '/hxndev.github.io/images/projects/image-to-sketch.jpg',
-    '/hxndev.github.io/images/projects/insta-profile.jpg',
-    '/hxndev.github.io/images/projects/job-fit.jpg',
-    '/hxndev.github.io/images/projects/password-cracker.jpg',
-    '/hxndev.github.io/images/projects/phy-app.jpg',
-    '/hxndev.github.io/images/projects/portfolio.jpg',
-    '/hxndev.github.io/images/projects/pose-detection.jpg',
-    '/hxndev.github.io/images/projects/qr-code.jpg',
-    '/hxndev.github.io/images/projects/ripple-effect.jpg',
-    '/hxndev.github.io/images/projects/rock-paper-scissors.jpg',
-    '/hxndev.github.io/images/projects/simple-translator.jpg',
-    '/hxndev.github.io/images/projects/vehicle-buy-sell.jpg',
-    '/hxndev.github.io/images/projects/video-to-gif.jpg',
-    '/hxndev.github.io/images/projects/virtual-drag-and-drop.jpg',
-    '/hxndev.github.io/images/projects/virtual-mouse.jpg',
+    'images/projects/3d-solar-system.jpg',
+    'images/projects/ai-chess.jpg',
+    'images/projects/brilliant-pro.jpg',
+    'images/projects/event-management.jpg',
+    'images/projects/exam-scheduler.jpg',
+    'images/projects/face-mesh.jpg',
+    'images/projects/graphical-password.jpg',
+    'images/projects/hawkseye.jpg',
+    'images/projects/image-to-sketch.jpg',
+    'images/projects/insta-profile.jpg',
+    'images/projects/job-fit.jpg',
+    'images/projects/password-cracker.jpg',
+    'images/projects/phy-app.jpg',
+    'images/projects/portfolio.jpg',
+    'images/projects/pose-detection.jpg',
+    'images/projects/qr-code.jpg',
+    'images/projects/ripple-effect.jpg',
+    'images/projects/rock-paper-scissors.jpg',
+    'images/projects/simple-translator.jpg',
+    'images/projects/vehicle-buy-sell.jpg',
+    'images/projects/video-to-gif.jpg',
+    'images/projects/virtual-drag-and-drop.jpg',
+    'images/projects/virtual-mouse.jpg',
 
     // Fallback images
     'https://placehold.co/600x400/9B00FF/FFFFFF?text=Image+Not+Found',
   ];
+
+  // Resolve all paths
+  return imagePaths.map(path => 
+    path.startsWith('http') ? path : resolveAssetPath(path)
+  );
 };
 
 /**
@@ -127,4 +134,4 @@ export default {
   preloadFont,
   getCriticalImages,
   preloadCriticalAssets,
-};
+};

src/components/utils/imageUtils.jsx

@@ -1,6 +1,7 @@
 /**
  * Utility functions for handling image paths in portfolio
  */
+import { getBasePath as getBasePathUtil, resolveAssetPath } from '../../utils/paths';
 
 /**
  * Gets the correct image path based on environment and image path format
@@ -111,24 +112,11 @@ export const findWorkingImagePath = (imagePath, fallbackPath) => {
  * @returns {string} - The base path for assets
  */
 export const getBasePath = () => {
-  const { hostname, pathname } = window.location;
-
-  // GitHub Pages with custom domain
-  if (!hostname.includes('github.io')) {
-    return '/';
-  }
-
-  // GitHub Pages with username.github.io/repo-name
-  if (pathname.includes('/hxndev.github.io/')) {
-    return '/hxndev.github.io/';
-  }
-
-  // Local development
-  return '/';
+  return getBasePathUtil();
 };
 
 export default {
   getImagePath,
   findWorkingImagePath,
   getBasePath,
-};
+};

src/components/utils/paths.jsx

@@ -0,0 +1,50 @@
+/**
+ * Central path utility for consistent path management throughout the app
+ */
+
+// Base path configuration - edit this value to change path prefix globally
+const BASE_PATH = '/hxndev.github.io';
+
+/**
+ * Get the application base path
+ * @returns {string} The base path for the application
+ */
+export const getBasePath = () => {
+  return BASE_PATH;
+};
+
+/**
+ * Resolve a path using the application base path
+ * @param {string} path - The path to resolve (should start with '/')
+ * @returns {string} - The resolved path
+ */
+export const resolvePath = (path) => {
+  // If already has the base path or is an external URL, return as is
+  if (path.startsWith(BASE_PATH) || path.startsWith('http')) {
+    return path;
+  }
+  
+  // Ensure path starts with slash
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+  
+  // Combine base path with provided path
+  return `${BASE_PATH}${normalizedPath}`;
+};
+
+/**
+ * Resolve an asset path
+ * @param {string} path - The asset path
+ * @returns {string} - The resolved asset path
+ */
+export const resolveAssetPath = (path) => {
+  // Handle external URLs and absolute URLs differently
+  if (path.startsWith('http')) {
+    return path;
+  }
+  
+  // Remove leading slash if present
+  const normalizedPath = path.startsWith('/') ? path.substring(1) : path;
+  
+  // Combine base path with asset path
+  return `${BASE_PATH}/${normalizedPath}`;
+};