Fix (Routing Issues)

Author: HxnDev

src/App.jsx

@@ -10,7 +10,6 @@ import { preloadCriticalAssets } from './components/utils/assetPreloader';
 import { applyPerformanceOptimizations } from './components/utils/animationOptimizer';
 import { resolvePath } from './components/utils/paths';
 
-
 // Components
 import Header from './components/Header';
 import Footer from './components/Footer';

src/components/Header.jsx

@@ -139,4 +139,4 @@ style.textContent = `
 `;
 document.head.appendChild(style);
 
-export default Header;
+export default Header;

src/components/about/BiographySection.jsx

@@ -145,7 +145,7 @@ const BiographySection = ({ bio, image }) => {
               }}
             >
               <Image
-                src={image || '/hxndev.github.io/images/profile.jpg'}
+                src={image || '/images/profile.jpg'}
                 alt="Hassan Shahzad"
                 radius="md"
                 height={300}

src/components/about/Timeline.jsx

@@ -100,22 +100,18 @@ const TimelineItem = ({ title, company, date, description, bullets = [], isActiv
         <Text className="timeline-content" weight={500} size="md" mb="sm">
           {company}
         </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 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" }}>
+            <ul style={{ paddingLeft: '20px', margin: '0' }}>
               {bullets.map((bullet, index) => (
-                <li key={index} style={{ marginBottom: "8px" }}>
+                <li key={index} style={{ marginBottom: '8px' }}>
                   <Text component="span">{bullet}</Text>
                 </li>
               ))}
@@ -225,4 +221,4 @@ const Timeline = ({ experiences = [] }) => {
   );
 };
 
-export default Timeline;
+export default Timeline;

src/components/home/HeroSection.jsx

@@ -5,7 +5,6 @@ import { gsap } from 'gsap';
 import { useColorScheme } from '../../theme/ThemeProvider';
 import { resolveAssetPath } from '../utils/paths';
 
-
 const HeroSection = () => {
   const containerRef = useRef(null);
   const textRef = useRef(null);

src/components/utils/assetPreloader.jsx

@@ -112,9 +112,7 @@ export const getCriticalImages = () => {
   ];
 
   // Resolve all paths
-  return imagePaths.map(path => 
-    path.startsWith('http') ? path : resolveAssetPath(path)
-  );
+  return imagePaths.map(path => (path.startsWith('http') ? path : resolveAssetPath(path)));
 };
 
 /**
@@ -134,4 +132,4 @@ export default {
   preloadFont,
   getCriticalImages,
   preloadCriticalAssets,
-};
+};

src/components/utils/imageUtils.jsx

@@ -1,7 +1,7 @@
 /**
  * Utility functions for handling image paths in portfolio
  */
-import { getBasePath as getBasePathUtil, resolveAssetPath } from '../../utils/paths';
+import { getBasePath as getBasePathUtil } from '../../utils/paths';
 
 /**
  * Gets the correct image path based on environment and image path format
@@ -119,4 +119,4 @@ export default {
   getImagePath,
   findWorkingImagePath,
   getBasePath,
-};
+};

src/components/utils/paths.jsx

@@ -1,5 +1,5 @@
 // Detect if we're in production or development
-const isProd = import.meta.env.PROD;
+const _isProd = import.meta.env.PROD;
 
 // Base path should be empty for username.github.io repos
 export const BASE_PATH = '';
@@ -12,10 +12,10 @@ export function resolvePath(path) {
   if (path.startsWith('http')) {
     return path;
   }
-  
+
   // Ensure path starts with slash
   const normalizedPath = path.startsWith('/') ? path : `/${path}`;
-  
+
   // In production (GitHub Pages), use the base path
   // In development, use paths as is
   return `${BASE_PATH}${normalizedPath}`;
@@ -29,10 +29,10 @@ export function resolveAssetPath(path) {
   if (path.startsWith('http')) {
     return path;
   }
-  
+
   // Remove leading slash if present
   const normalizedPath = path.startsWith('/') ? path.substring(1) : path;
-  
+
   // In production, assets are at the root
   return `${BASE_PATH}/${normalizedPath}`;
-}
+}

src/pages/About.jsx

@@ -51,44 +51,54 @@ const About = () => {
       date: 'Mar 2024 - Feb 2025',
       description: (
         <>
-          Designed and deployed scalable data infrastructure for <a href="https://gbdi.org" target="_blank" rel="noopener noreferrer" style={{ color: '#9B00FF', textDecoration: 'underline' }}>GBDI</a> (Global Building Data Initiative), improving data processing speed by 30% through optimized AWS pipelines.
+          Designed and deployed scalable data infrastructure for{' '}
+          <a
+            href="https://gbdi.org"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{ color: '#9B00FF', textDecoration: 'underline' }}
+          >
+            GBDI
+          </a>{' '}
+          (Global Building Data Initiative), improving data processing speed by 30% through
+          optimized AWS pipelines.
         </>
       ),
       // Add a separate bullets array for list items
       bullets: [
         "Engineered ReactJS web applications and APIs to resolve 3 critical user pain points (e.g., fragmented data access, slow query response) for GBDI's global building materials database.",
-        "Built scalable architectures for cross-functional research projects, enhancing system efficiency by 20%."
-      ]
+        'Built scalable architectures for cross-functional research projects, enhancing system efficiency by 20%.',
+      ],
     },
     {
       title: 'Lead Full Stack Developer',
       company: 'IBM',
       date: 'Jul 2022 - Nov 2023',
       description: '', // Empty description since we're only using bullet points
       bullets: [
-        "Led the development of microservices architecture, reducing deployment time by 75%.",
-        "Designed and executed CI/CD pipelines for containerized applications on AWS, resulting in a significant increase in delivery speed."
-      ]
+        'Led the development of microservices architecture, reducing deployment time by 75%.',
+        'Designed and executed CI/CD pipelines for containerized applications on AWS, resulting in a significant increase in delivery speed.',
+      ],
     },
     {
       title: 'Full Stack Developer',
       company: 'Shanghai Zixel',
       date: 'Apr 2022 - Jul 2022',
       description: '', // Empty description since we're only using bullet points
       bullets: [
-        "Developed microservices-based applications, reducing response time by 40%.",
-        "Transformed server-side architecture with cutting-edge technologies including Spring Boot and MySQL."
-      ]
+        'Developed microservices-based applications, reducing response time by 40%.',
+        'Transformed server-side architecture with cutting-edge technologies including Spring Boot and MySQL.',
+      ],
     },
     {
       title: 'Full Stack Developer',
       company: 'Think Vision',
       date: 'Sep 2020 - Mar 2022',
       description: '', // Empty description since we're only using bullet points
       bullets: [
-        "Designed and developed a ReactJS website integrated with a mobile app, achieving real-time notifications via a linked database.",
-        "Built and deployed a microservice on Kubernetes, improving monitoring and updates by 20%."
-      ]
+        'Designed and developed a ReactJS website integrated with a mobile app, achieving real-time notifications via a linked database.',
+        'Built and deployed a microservice on Kubernetes, improving monitoring and updates by 20%.',
+      ],
     },
   ];
 
@@ -128,9 +138,9 @@ const About = () => {
 
   // Bio paragraphs
   const bio = [
-    "I am a results-driven Full Stack Developer with 5 years of experience in designing and deploying scalable applications, optimizing system performance, and leading teams. My expertise spans frontend and backend development, cloud infrastructure, and DevOps, enabling me to build high-impact solutions for both Fortune 50 companies and cutting-edge research projects.",
-    "With a strong foundation in Python, Java, JavaScript, and Rust, I specialize in creating performant, secure, and maintainable applications. My work has included optimizing AWS-based pipelines to enhance data processing speeds, developing ReactJS applications that improve user experience, and architecting microservices to streamline deployment and scalability.",
-    "Passionate about tackling complex engineering challenges, I excel in end-to-end development, from system design to deployment and maintenance. My approach emphasizes both functionality and user experience, ensuring that the solutions I build drive efficiency and real-world impact.",
+    'I am a results-driven Full Stack Developer with 5 years of experience in designing and deploying scalable applications, optimizing system performance, and leading teams. My expertise spans frontend and backend development, cloud infrastructure, and DevOps, enabling me to build high-impact solutions for both Fortune 50 companies and cutting-edge research projects.',
+    'With a strong foundation in Python, Java, JavaScript, and Rust, I specialize in creating performant, secure, and maintainable applications. My work has included optimizing AWS-based pipelines to enhance data processing speeds, developing ReactJS applications that improve user experience, and architecting microservices to streamline deployment and scalability.',
+    'Passionate about tackling complex engineering challenges, I excel in end-to-end development, from system design to deployment and maintenance. My approach emphasizes both functionality and user experience, ensuring that the solutions I build drive efficiency and real-world impact.',
   ];
 
   return (

src/pages/Projects.jsx

@@ -56,7 +56,7 @@ const Projects = () => {
     (projectId, action = 'page') => {
       if (action === 'reset') {
         resetFilters();
-        navigate('/hxndev.github.io/projects');
+        navigate('/projects');
         return;
       }
 
@@ -68,7 +68,7 @@ const Projects = () => {
         openProjectModal(projectId, projectsData);
       } else if (action === 'page') {
         // Update the URL
-        navigate(`/hxndev.github.io/projects?project=${projectId}`);
+        navigate(`/projects?project=${projectId}`);
         // View project details
         viewProjectDetails(projectId, projectsData);
       }