Refactor styles and restructure CSS files

- Removed App.css and migrated styles to individual component and page-specific CSS files.
- Created base styles in base.css for layout utilities and common elements.
- Added component-specific styles in cards.css, header.css, and other relevant files.
- Updated imports in App.tsx and other components to reflect new CSS structure.
- Enhanced responsiveness and visual consistency across various components and pages.

src/components/BioSection.tsx

@@ -25,6 +25,12 @@ export default function BioSection({ imageSrc, imageAlt, text, reversed = false
         return () => clearInterval(interval);
     }, [images.length, currentIndex]);
 
+    const handleImageClick = () => {
+        if (images.length <= 1) return;
+        setPrevIndex(currentIndex);
+        setCurrentIndex((prev) => (prev + 1) % images.length);
+    };
+
     const slideVariants = {
         enter: {
             x: "-100%",
@@ -52,6 +58,7 @@ export default function BioSection({ imageSrc, imageAlt, text, reversed = false
                 initial={{ x: reversed ? 30 : -30, opacity: 0 }}
                 animate={{ x: 0, opacity: 1 }}
                 transition={{ delay: 0.4, duration: 0.6 }}
+                onClick={handleImageClick}
                 style={{
                     position: "relative",
                     width: "250px",
@@ -60,6 +67,7 @@ export default function BioSection({ imageSrc, imageAlt, text, reversed = false
                     borderRadius: "20px",
                     border: "3px solid rgba(255, 255, 255, 0.8)",
                     boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
+                    cursor: images.length > 1 ? "pointer" : "default",
                 }}
             >
                 <AnimatePresence initial={false}>