Fix (Light Mode Fixes)

Author: HxnDev

src/components/ConnectSection.jsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Box, Title, SimpleGrid, Paper, ThemeIcon, Text, Group } from '@mantine/core';
+import { IconBrandGithub, IconBrandLinkedin, IconMail } from '@tabler/icons-react';
+import { useColorScheme } from '../theme/ThemeProvider';
+
+const ConnectSection = () => {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === 'dark';
+  
+  const connectOptions = [
+    {
+      title: 'GitHub',
+      description: 'Check out my projects and contributions',
+      icon: <IconBrandGithub size={30} color={isDark ? "white" : "#333"} />,
+      link: 'https://github.com/HxnDev',
+      color: 'rgba(155, 0, 255, 0.8)'
+    },
+    {
+      title: 'LinkedIn',
+      description: 'Connect with me professionally',
+      icon: <IconBrandLinkedin size={30} color={isDark ? "white" : "#0077B5"} />,
+      link: 'https://www.linkedin.com/in/hassan-shahzad-2a6617212/',
+      color: '#0077B5'
+    },
+    {
+      title: 'Email',
+      description: 'Send me a direct message',
+      icon: <IconMail size={30} color={isDark ? "white" : "#00B5AD"} />,
+      link: 'mailto:[email protected]',
+      color: '#00B5AD'
+    }
+  ];
+
+  return (
+    <Box my={60}>
+      <Title 
+        order={2} 
+        mb={40} 
+        align="center"
+        style={{
+          backgroundImage: 'linear-gradient(45deg, #6200EE, #03DAC5)',
+          backgroundClip: 'text',
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+          fontSize: '2rem',
+          fontWeight: 700
+        }}
+      >
+        Connect With Me
+      </Title>
+      
+      <SimpleGrid 
+        cols={3} 
+        spacing="lg"
+        breakpoints={[
+          { maxWidth: 'md', cols: 3 },
+          { maxWidth: 'sm', cols: 1 }
+        ]}
+      >
+        {connectOptions.map((option, index) => (
+          <Paper
+            key={index}
+            component="a"
+            href={option.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            p={30}
+            radius="md"
+            withBorder
+            style={{
+              backgroundColor: isDark ? 'rgba(28, 29, 34, 0.7)' : 'rgba(245, 245, 250, 0.7)',
+              borderColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
+              textDecoration: 'none',
+              transition: 'all 0.3s ease',
+              cursor: 'pointer',
+              textAlign: 'center'
+            }}
+            sx={{
+              '&:hover': {
+                transform: 'translateY(-5px)',
+                boxShadow: '0 10px 20px rgba(0, 0, 0, 0.1)',
+                borderColor: option.color
+              }
+            }}
+          >
+            <Group position="center" mb={15}>
+              <ThemeIcon size={60} radius={60} style={{ backgroundColor: option.color }}>
+                {option.icon}
+              </ThemeIcon>
+            </Group>
+            
+            <Title order={4} align="center" mb={10} color={isDark ? "white" : "dark"}>
+              {option.title}
+            </Title>
+            
+            <Text align="center" color={isDark ? "dimmed" : "dark.6"} size="sm">
+              {option.description}
+            </Text>
+          </Paper>
+        ))}
+      </SimpleGrid>
+    </Box>
+  );
+};
+
+export default ConnectSection;

src/components/SponsorshipSection.jsx

@@ -1,16 +1,22 @@
 import React from 'react';
-import { Text, Stack, Group, Button, Paper } from '@mantine/core';
+import { Text, Stack, Group, Button, Paper, Title } from '@mantine/core';
 import { IconHeart, IconCoffee } from '@tabler/icons-react';
+import { useColorScheme } from '../theme/ThemeProvider';
 
 const SponsorshipSection = () => {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === 'dark';
+
   return (
     <Paper 
       p="xl" 
       radius="xl" 
       withBorder
       style={{
-        background: 'linear-gradient(145deg, rgba(28, 29, 34, 0.7), rgba(20, 21, 25, 0.9))',
-        borderColor: 'rgba(155, 0, 255, 0.3)',
+        background: isDark
+          ? 'linear-gradient(145deg, rgba(28, 29, 34, 0.7), rgba(20, 21, 25, 0.9))'
+          : 'linear-gradient(145deg, rgba(245, 245, 250, 0.7), rgba(235, 235, 240, 0.9))',
+        borderColor: isDark ? 'rgba(155, 0, 255, 0.3)' : 'rgba(155, 0, 255, 0.2)',
         boxShadow: '0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(155, 0, 255, 0.2)',
         overflow: 'hidden',
         position: 'relative'
@@ -33,19 +39,20 @@ const SponsorshipSection = () => {
       />
 
       <Stack align="center" style={{ position: 'relative', zIndex: 1 }}>
-        <Text 
-          size="xl" 
-          fw={700}
+        <Title 
+          order={3}
           style={{
             background: 'linear-gradient(45deg, #9B00FF, #00F5FF)',
             WebkitBackgroundClip: 'text',
-            WebkitTextFillColor: 'transparent'
+            WebkitTextFillColor: 'transparent',
+            marginBottom: '1rem',
+            fontWeight: 700
           }}
         >
           Support My Work
-        </Text>
+        </Title>
 
-        <Text ta="center" c="dimmed" maw={600} mx="auto">
+        <Text ta="center" c={isDark ? "dimmed" : "dark.6"} maw={600} mx="auto">
           If you find my projects helpful, consider supporting their continued development and maintenance.
         </Text>
 

src/components/about/BiographySection.jsx

@@ -100,7 +100,8 @@ const BiographySection = ({ bio, image }) => {
         background: isDark 
           ? 'linear-gradient(145deg, rgba(28, 29, 34, 0.9), rgba(15, 16, 20, 1))' 
           : 'linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(245, 245, 250, 1))',
-        position: 'relative'
+        position: 'relative',
+        borderColor: isDark ? 'rgba(155, 0, 255, 0.3)' : 'rgba(155, 0, 255, 0.2)'
       }}
     >
       {/* Background decoration */}
@@ -120,7 +121,18 @@ const BiographySection = ({ bio, image }) => {
         />
       )}
 
-      <Title order={2} mb="lg">Bio</Title>
+      <Title 
+        order={2} 
+        mb="lg"
+        style={{
+          backgroundImage: 'linear-gradient(45deg, #6200EE, #03DAC5)',
+          backgroundClip: 'text',
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+        }}
+      >
+        Bio
+      </Title>
 
       <Grid gutter={50}>
         <Grid.Col md={4}>
@@ -197,7 +209,8 @@ const BiographySection = ({ bio, image }) => {
                 size="lg"
                 style={{
                   lineHeight: 1.7,
-                  opacity: reducedMotion ? 1 : 0 // Set initial opacity for animation
+                  opacity: reducedMotion ? 1 : 0, // Set initial opacity for animation
+                  color: isDark ? 'white' : '#1A1B1E'
                 }}
               >
                 {paragraph}

src/components/home/HeroSection.jsx

@@ -2,12 +2,15 @@ import React, { useRef, useEffect } from 'react';
 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';
 
 const HeroSection = () => {
   const containerRef = useRef(null);
   const textRef = useRef(null);
   const imageRef = useRef(null);
   const ctaRef = useRef(null);
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === 'dark';
 
   // Animation on component mount
   useEffect(() => {
@@ -78,7 +81,9 @@ const HeroSection = () => {
         position: 'relative',
         padding: '80px 0 100px',
         overflow: 'hidden',
-        background: 'radial-gradient(circle at 30% 50%, rgba(155, 0, 255, 0.15), transparent 70%)'
+        background: isDark 
+          ? 'radial-gradient(circle at 30% 50%, rgba(155, 0, 255, 0.15), transparent 70%)'
+          : 'radial-gradient(circle at 30% 50%, rgba(155, 0, 255, 0.05), transparent 70%)'
       }}
     >
       {/* Floating orbs background decoration */}
@@ -123,7 +128,7 @@ const HeroSection = () => {
             <Text 
               className="animate-item"
               size="xl" 
-              color="dimmed"
+              color={isDark ? "dimmed" : "dark"}
               style={{ 
                 maxWidth: '600px',
                 lineHeight: 1.6,
@@ -162,19 +167,20 @@ const HeroSection = () => {
                 href="https://github.com/HxnDev"
                 target="_blank"
                 size="lg"
-                variant="outline"
+                variant={isDark ? "outline" : "filled"}
                 leftSection={<IconBrandGithub size={20} />}
                 rightSection={<IconArrowRight size={16} />}
                 radius="xl"
                 style={{
                   borderColor: '#9B00FF',
-                  color: '#00F5FF',
+                  color: isDark ? '#00F5FF' : 'white',
+                  backgroundColor: isDark ? 'transparent' : '#9B00FF',
                   transition: 'all 0.3s ease'
                 }}
                 sx={{
                   '&:hover': {
                     transform: 'translateY(-3px)',
-                    background: 'rgba(155, 0, 255, 0.1)',
+                    background: isDark ? 'rgba(155, 0, 255, 0.1)' : '#8100d9',
                     boxShadow: '0 8px 20px rgba(0, 0, 0, 0.1)'
                   }
                 }}

src/components/projects/EnhancedProjectCard.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Paper, Text, Title, Group, Badge, Box } from '@mantine/core';
 import { IconBrandGithub, IconExternalLink, IconInfoCircle } from '@tabler/icons-react';
+import { useColorScheme } from '../../theme/ThemeProvider';
 
 const EnhancedProjectCard = ({ 
   title, 
@@ -18,6 +19,8 @@ const EnhancedProjectCard = ({
   const [imageError, setImageError] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const cardRef = useRef(null);
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === 'dark';
 
   // Determine image source
   const imgSrc = imageError 
@@ -89,7 +92,7 @@ const EnhancedProjectCard = ({
         transform: isHovered ? 'translateY(-5px)' : 'translateY(0)',
         boxShadow: isHovered ? '0 10px 25px rgba(155, 0, 255, 0.15)' : '0 4px 12px rgba(0, 0, 0, 0.1)',
         border: featured ? '2px solid rgba(155, 0, 255, 0.5)' : undefined,
-        backgroundColor: 'rgba(28, 29, 34, 0.7)',
+        backgroundColor: isDark ? 'rgba(28, 29, 34, 0.7)' : 'rgba(245, 245, 250, 0.7)',
         position: 'relative',
         overflow: 'hidden',
         cursor: 'pointer' // Add pointer cursor to indicate clickable
@@ -180,8 +183,8 @@ const EnhancedProjectCard = ({
 
       {/* Content */}
       <Box style={{ flex: 1, display: 'flex', flexDirection: 'column', position: 'relative', zIndex: 1 }}>
-        <Title order={4} mb="xs" style={{ color: '#e0e0e0' }}>{title}</Title>
-        <Text size="sm" color="dimmed" mb="md" style={{ flex: 1 }}>{description}</Text>
+        <Title order={4} mb="xs" style={{ color: isDark ? '#e0e0e0' : '#1A1B1E' }}>{title}</Title>
+        <Text size="sm" color={isDark ? "dimmed" : "dark.6"} mb="md" style={{ flex: 1 }}>{description}</Text>
 
         <Group spacing="xs" mb="md">
           {technologies && technologies.slice(0, 3).map((tech, index) => (
@@ -264,8 +267,8 @@ const EnhancedProjectCard = ({
               padding: '8px 12px',
               borderRadius: '25px',
               marginLeft: 'auto',
-              color: '#00F5FF',
-              backgroundColor: isHovered ? 'rgba(0, 245, 255, 0.1)' : 'transparent',
+              color: isDark ? '#00F5FF' : '#6200EE',
+              backgroundColor: isHovered ? (isDark ? 'rgba(0, 245, 255, 0.1)' : 'rgba(98, 0, 238, 0.1)') : 'transparent',
               fontSize: '14px',
               display: 'flex',
               alignItems: 'center',

src/components/projects/FilterControls.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Group, Button, TextInput, Box, Transition, Paper } from '@mantine/core';
 import { IconSearch, IconFilter, IconX } from '@tabler/icons-react';
+import { useColorScheme } from '../../theme/ThemeProvider';
 
 const FilterControls = ({ 
   categories = [], 
@@ -11,6 +12,8 @@ const FilterControls = ({
   onReset
 }) => {
   const [showFilters, setShowFilters] = useState(false);
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === 'dark';
 
   // Handle search input clearing
   const handleClearSearch = () => {
@@ -41,9 +44,9 @@ const FilterControls = ({
       p="md" 
       mb="xl"
       style={{
-        background: 'rgba(28, 29, 34, 0.8)',
+        background: isDark ? 'rgba(28, 29, 34, 0.8)' : 'rgba(245, 245, 250, 0.8)',
         backdropFilter: 'blur(12px)',
-        border: '1px solid rgba(155, 0, 255, 0.15)'
+        border: isDark ? '1px solid rgba(155, 0, 255, 0.15)' : '1px solid rgba(155, 0, 255, 0.3)'
       }}
     >
       {/* Filter toggle button */}
@@ -95,8 +98,9 @@ const FilterControls = ({
                 width: '100%',
                 transition: 'all 0.3s ease',
                 input: {
-                  backgroundColor: 'rgba(40, 40, 45, 0.8)',
-                  borderRadius: '30px' // Ensure input field is also rounded
+                  backgroundColor: isDark ? 'rgba(40, 40, 45, 0.8)' : 'rgba(255, 255, 255, 0.8)',
+                  borderRadius: '30px', // Ensure input field is also rounded
+                  color: isDark ? 'white' : 'black'
                 }
               }}
             />