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}>

src/components/ProjectCard.tsx

@@ -1,4 +1,5 @@
 import { motion, Variants } from "framer-motion";
+import "../styles/components/cards.css";
 
 export interface Project {
     id: number;

src/components/contentCard.tsx

@@ -1,3 +1,5 @@
+import "../styles/components/cards.css";
+
 interface ContentCardProps {
   children: React.ReactNode;
   className?: string;

src/components/floatingHeader.tsx

@@ -1,4 +1,5 @@
 import { Link, useLocation } from "react-router-dom";
+import "../styles/components/header.css";
 
 export default function FloatingHeader() {
     const location = useLocation();
@@ -34,7 +35,7 @@ export default function FloatingHeader() {
                     to="/about"
                     className={`nav-link ${location.pathname === "/about" ? "active" : ""}`}
                 >
-                    About Me
+                    Personal About Me
                 </Link>
 
             </nav>