Added Linting

Author: HxnDev

src/App.jsx

@@ -90,7 +90,7 @@ function App() {
           setLoading(false);
         }, 500);
       })
-      .catch(err => {
+      .catch(() => {
         // Continue anyway after a timeout
         setTimeout(() => {
           setLoading(false);

src/components/about/Timeline.jsx

@@ -123,7 +123,8 @@ const Timeline = ({ experiences = [] }) => {
     if (!timelineRef.current) return;
 
     const timelineItems = timelineRef.current.querySelectorAll('.timeline-item');
-    const timelineTop = timelineRef.current.getBoundingClientRect().top;
+    // 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

src/components/common/LoadingScreen.jsx

@@ -47,16 +47,19 @@ const LoadingScreen = ({ progress = 0, isComplete = false, minDisplayTime = 1000
   useEffect(() => {
     if (!loadingRef.current) return;
 
+    // Capture the ref at the top of the effect function
+    const currentRef = loadingRef.current;
+
     // Create entrance animation
     gsap.fromTo(
-      loadingRef.current.querySelectorAll('.animate-item'),
+      currentRef.querySelectorAll('.animate-item'),
       { y: 20, opacity: 0 },
       { y: 0, opacity: 1, stagger: 0.1, duration: 0.5, ease: 'power3.out' }
     );
 
     return () => {
-      if (loadingRef.current) {
-        gsap.to(loadingRef.current, {
+      if (currentRef) {
+        gsap.to(currentRef, {
           opacity: 0,
           duration: 0.5,
         });

src/components/common/NavigationPulsar.jsx

@@ -20,10 +20,6 @@ const NavigationPulsar = () => {
     { path: '/hxndev.github.io/contact', label: 'Contact', icon: <IconMail size={20} /> },
   ];
 
-  // Get current section
-  const currentPath =
-    navigationItems.find(item => item.path === location.pathname) || navigationItems[0];
-
   // Handle navigation click
   const handleNavigate = path => {
     setExpanded(false);

src/components/contact/ContactForm.jsx

@@ -20,7 +20,7 @@ const ContactForm = () => {
   });
 
   const [errors, setErrors] = useState({});
-  const [focused, setFocused] = useState(null);
+  const [_focused, setFocused] = useState(null);
   const [loading, setLoading] = useState(false);
   const [submitted, setSubmitted] = useState(false);
 

src/components/projects/ProjectDetail.jsx

@@ -25,7 +25,7 @@ import { useAnimationContext } from '../../context/AnimationContext';
 
 const ProjectDetail = ({ project, onBack }) => {
   const containerRef = useRef(null);
-  const { colorScheme, quantumColors } = useColorScheme();
+  const { colorScheme } = useColorScheme();
   const { reducedMotion } = useAnimationContext();
   const isDark = colorScheme === 'dark';
 

src/components/projects/ProjectGallery.jsx

@@ -5,7 +5,7 @@ import { gsap } from 'gsap';
 import ProjectCard from './ProjectCard';
 import { useAnimationContext } from '../../context/AnimationContext';
 
-const ProjectGallery = ({ projects, filteredProjects, searchQuery, onViewDetails }) => {
+const ProjectGallery = ({ filteredProjects, searchQuery, onViewDetails }) => {
   const galleryRef = useRef(null);
   const { reducedMotion } = useAnimationContext();
   const [animationComplete, setAnimationComplete] = useState(false);

src/components/utils/browserDetection.jsx

@@ -80,7 +80,7 @@ export const detectFeatures = () => {
           window.WebGLRenderingContext &&
           (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
         );
-      } catch (e) {
+      } catch {
         return false;
       }
     })(),
@@ -89,7 +89,7 @@ export const detectFeatures = () => {
       try {
         const canvas = document.createElement('canvas');
         return !!(window.WebGL2RenderingContext && canvas.getContext('webgl2'));
-      } catch (e) {
+      } catch {
         return false;
       }
     })(),

src/context/AnimationContext.jsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useEffect, useReducer } from 'react';
+import React, { createContext, useContext, useEffect, useReducer } from 'react';
 import { configureGsap } from '../animations/gsap';
 
 // Initial state
@@ -139,10 +139,10 @@ export function AnimationProvider({ children }) {
 
     mediaQuery.addEventListener('change', handleChange);
     return () => mediaQuery.removeEventListener('change', handleChange);
-  }, []);
+  }, [state.reducedMotion]);
 
   return <AnimationContext.Provider value={state}>{children}</AnimationContext.Provider>;
 }
 
-// Hook to use animation context
+// eslint-disable-next-line react-refresh/only-export-components
 export const useAnimationContext = () => useContext(AnimationContext);

src/hooks/useAnimation.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext, useRef } from 'react';
+import { useState, useEffect } from 'react';
 import { useScrollVelocity } from './useScrollVelocity';
 
 /**