feat: reduce images size, adding tooltip for button, adding paginatio…

…n for experience and Education, adding description and changing title for personal and educational projects, adding the title of the projects, removing the span that was visible only in dark mode for github and linkedin icons

src/App.tsx

@@ -22,13 +22,13 @@ export default function App() {
             <div aria-hidden="true"
                  className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0">
                 <img
-                    src="/gradients/docs-left.png"
+                    src="/gradients/docs-left.webp"
                     className="relative z-10 opacity-0 shadow-black/5 data-[loaded=true]:opacity-100 shadow-none transition-transform-opacity motion-reduce:transition-none !duration-300 rounded-large"
                     alt="docs left background" data-loaded="true"/>
             </div>
             <div aria-hidden="true"
                  className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12">
-                <img src="/gradients/docs-right.png"
+                <img src="/gradients/docs-right.webp"
                      className="relative z-10 opacity-0 shadow-black/5 data-[loaded=true]:opacity-100 shadow-none transition-transform-opacity motion-reduce:transition-none !duration-300 rounded-large"
                      alt="docs right background" data-loaded="true"/>
             </div>

src/modules/DownloadCVComponent.tsx

@@ -1,4 +1,4 @@
-import {Button} from "@nextui-org/react";
+import {Button, Tooltip} from "@nextui-org/react";
 import React from "react";
 
 interface DownloadCVComponentProps {
@@ -14,8 +14,10 @@ export const DownloadCVComponent: React.FC<DownloadCVComponentProps> = ({variant
     };
 
     return (
-        <Button color={"primary"} variant={variant} onClick={handleDownload}>
-            Download CV
-        </Button>
+        <Tooltip content="Download my CV">
+            <Button color={"primary"} variant={variant} onClick={handleDownload}>
+                Download CV
+            </Button>
+        </Tooltip>
     );
 };

src/modules/ExperienceCard.tsx

@@ -1,12 +1,11 @@
-import {Card, CardBody} from "@nextui-org/react";
-import {PolytechIcon} from "./icons/formationIcons/PolytechIcon.tsx";
-import * as React from "react";
-import {AirbusIcon} from "./icons/formationIcons/AirbusIcon.tsx";
-import {BusitIcon} from "./icons/formationIcons/BusitIcon.tsx";
-import {IUTIcon} from "./icons/formationIcons/IUTIcon.tsx";
-
+import { Card, CardBody, Button } from "@nextui-org/react";
+import { PolytechIcon } from "./icons/formationIcons/PolytechIcon.tsx";
+import { AirbusIcon } from "./icons/formationIcons/AirbusIcon.tsx";
+import { BusitIcon } from "./icons/formationIcons/BusitIcon.tsx";
+import { IUTIcon } from "./icons/formationIcons/IUTIcon.tsx";
 import { motion } from "framer-motion";
 import { useInView } from "react-intersection-observer";
+import React, {useState} from "react";
 
 interface ExperienceCardProps {
     icon: JSX.Element;
@@ -20,7 +19,7 @@ interface ExperienceCardProps {
 const ExperienceCard: React.FC<ExperienceCardProps> = ({ icon, title, company, description, years, isOdd }) => {
     const { ref, inView } = useInView({
         triggerOnce: true,
-        threshold: 0.8, // 10% of the card needs to be visible to trigger the animation
+        threshold: 0.8,
     });
 
     const cardVariants = {
@@ -42,7 +41,6 @@ const ExperienceCard: React.FC<ExperienceCardProps> = ({ icon, title, company, d
                     isOdd ? "flex-row-reverse" : "flex-row"
                 } items-start p-6 space-x-6 shadow-lg rounded-xl w-2/3 overflow-visible dark:border-1 dark:border-amber-50`}
             >
-                {/* Left or Right Section with Icon (Based on isOdd) */}
                 <div
                     className={`absolute ${
                         isOdd ? "-right-10" : "-left-10"
@@ -51,14 +49,12 @@ const ExperienceCard: React.FC<ExperienceCardProps> = ({ icon, title, company, d
                     {icon}
                 </div>
 
-                {/* Content Section */}
                 <CardBody className={`${isOdd ? "lg:pr-16 text-right" : "lg:pl-16"}`}>
                     <h2 className="text-2xl font-semibold text-gray-800 mt-4 max-lg:mt-5 dark:text-blue-700">{title}</h2>
                     <p className="text-md text-gray-600 dark:text-blue-400">{company}</p>
                     <p className="text-gray-500 mt-2 dark:text-white">{description}</p>
                 </CardBody>
 
-                {/* Right or Left Section (Date, based on isOdd) */}
                 <div className={`absolute top-5 ${isOdd ? "left-5" : "right-5"}`}>
                     <span className="px-4 py-2 bg-blue-50 text-blue-500 dark:bg-blue-500 dark:text-white rounded-md font-semibold">{years}</span>
                 </div>
@@ -67,43 +63,93 @@ const ExperienceCard: React.FC<ExperienceCardProps> = ({ icon, title, company, d
     );
 };
 
-
 export const ExperienceList: React.FC = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    const educationData = [
+        {
+            icon: <PolytechIcon />,
+            title: "Polytech Nice Sophia",
+            company: "Master's degree - In computer engineering",
+            description: "Studying computer engineering at Polytech Nice Sophia, specializing in software engineering.",
+            years: "2023 - 2026",
+            isOdd: true,
+        },
+        {
+            icon: <IUTIcon />,
+            title: "IUT Nice Côte d'Azur",
+            company: "BUT - Computer Science",
+            description: "Graduated with a DUT in computer science from IUT Nice Côte d'Azur, specializing in software development.",
+            years: "2021 - 2023",
+            isOdd: false,
+        },
+    ];
+
+    const experienceData = [
+        {
+            icon: <AirbusIcon className={"rounded-full"} />,
+            title: "Airbus Defense and Space",
+            company: "Apprentice - Software Engineer",
+            description: "Working as an apprentice software engineer at Airbus Defense and Space, specializing in software development.",
+            years: "2023 - 2026",
+            isOdd: false,
+        },
+        {
+            icon: <BusitIcon />,
+            title: "Busit SAS",
+            company: "Internship - Software Developer",
+            description: "Internship as a full stack developer at Busit SAS, specializing in web development.",
+            years: "4 month - 2023",
+            isOdd: true,
+        },
+    ];
+
     return (
         <div className="flex flex-col items-center justify-center p-4 w-full lg:p-6">
-            <ExperienceCard
-                icon={<PolytechIcon/>}
-                title="Polytech Nice Sophia"
-                company="Master's degree - In computer engineering"
-                description="Studying computer engineering at Polytech Nice Sophia, specializing in software engineering."
-                years="2023 - 2026"
-                isOdd={true}
-            />
-            <ExperienceCard
-                icon={<AirbusIcon className={"rounded-full"} />}
-                title="Airbus Defense and Space"
-                company="Apprentice - Software Engineer"
-                description="Working as an apprentice software engineer at Airbus Defense and Space, specializing in software development."
-                years="2023 - 2026"
-                isOdd={false}
-            />
-            <ExperienceCard
-                icon={<BusitIcon />}
-                title="Busit SAS"
-                company="Internship - Software Developer"
-                description="Internship as a full stack developer at Busit SAS, specializing in web development."
-                years="4 month - 2023"
-                isOdd={true}
-            />
-            <ExperienceCard
-                icon={<IUTIcon />}
-                title="IUT Nice Côte d'Azur"
-                company="BUT - Computer Science"
-                description="Graduated with a DUT in computer science from IUT Nice Côte d'Azur, specializing in software development."
-                years="2021 - 2023"
-                isOdd={false}
-            />
+            {currentPage === 1 &&
+                educationData.map((item, index) => (
+                    <ExperienceCard
+                        key={index}
+                        icon={item.icon}
+                        title={item.title}
+                        company={item.company}
+                        description={item.description}
+                        years={item.years}
+                        isOdd={item.isOdd}
+                    />
+                ))}
+
+            {currentPage === 2 &&
+                experienceData.map((item, index) => (
+                    <ExperienceCard
+                        key={index}
+                        icon={item.icon}
+                        title={item.title}
+                        company={item.company}
+                        description={item.description}
+                        years={item.years}
+                        isOdd={item.isOdd}
+                    />
+                ))}
+
+            <div className="flex mt-6 space-x-4">
+                <Button
+                    onPress={() => setCurrentPage(1)}
+                    className={`${
+                        currentPage === 1 ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-700"
+                    } hover:bg-blue-500 hover:text-white transition-colors px-4 py-2 rounded-lg`}
+                >
+                    Education
+                </Button>
+                <Button
+                    onPress={() => setCurrentPage(2)}
+                    className={`${
+                        currentPage === 2 ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-700"
+                    } hover:bg-blue-500 hover:text-white transition-colors px-4 py-2 rounded-lg`}
+                >
+                    Experience
+                </Button>
+            </div>
         </div>
     );
 };
-

src/modules/FormationComponent.tsx

@@ -10,7 +10,7 @@ export const FormationComponent: React.FC = () => {
             <div className="w-full lg:w-2/3 p-4 bg-white dark:bg-transparent">
                 <Card className="w-full lg dark:border-1 dark:border-amber-50 rounded-lg ml-0 sm:m-4 p-4">
                     <CardHeader className="pb-0">
-                        <h1 className="text-xl lg:text-2xl font-bold text-gray-700 dark:text-blue-700">Personal Details</h1>
+                        <h1 className="text-xl lg:text-2xl font-bold text-gray-700 dark:text-blue-700">Education & Experience</h1>
                     </CardHeader>
                     <Divider className="my-3 opacity-50" />
                     <CardBody className="space-y-4">

src/modules/Home.tsx

@@ -5,7 +5,7 @@ import {
     CardBody,
     CardFooter,
     CardHeader,
-    Divider,
+    Divider, Tooltip,
 } from "@nextui-org/react";
 import TypingAnimation from "./TypingAnimation.tsx";
 import {EmailIcon} from "./icons/personalDetailsIcons/EmailIcon.tsx";
@@ -67,9 +67,13 @@ export const Home = () => {
                                 </CardBody>
                                 <CardFooter>
                                     <div className="flex space-x-4">
-                                        <Button color={"primary"}>
-                                            <ProtectedEmailLink message={'Hire Me !'}/>
-                                        </Button>
+                                        <a href={"https://www.linkedin.com/in/lacroix-baptiste/"} target={"_blank"}>
+                                            <Tooltip content="Visit my Linkedin">
+                                                <Button color={"primary"}>
+                                                    Hire Me !
+                                                </Button>
+                                            </Tooltip>
+                                        </a>
                                         <DownloadCVComponent variant={"bordered"}/>
                                     </div>
                                 </CardFooter>

src/modules/MenuComponent.tsx

@@ -8,9 +8,8 @@ import {
     NavbarMenu,
     NavbarMenuItem,
     Link,
-    Badge
 } from "@nextui-org/react";
-import { DarkModeToggle } from "./DarkModeToggle";
+import {DarkModeToggle} from "./DarkModeToggle";
 import {GithubIcon} from "./icons/navIcons/GithubIcon.tsx";
 import {LinkedinIcon} from "./icons/navIcons/LinkedinIcon.tsx"; // Import your DarkModeToggle component
 
@@ -30,10 +29,10 @@ export const MenuComponent: React.FC<MenuComponentProps> = ({
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
 
     const menuItems = [
-        { name: "Home", onClick: onHomeClick },
-        { name: "Formation", onClick: onFormationClick },
-        { name: "Portfolio", onClick: onPortfolioClick },
-        { name: "Skills", onClick: onSkillsClick },
+        {name: "Home", onClick: onHomeClick},
+        {name: "Formation", onClick: onFormationClick},
+        {name: "Portfolio", onClick: onPortfolioClick},
+        {name: "Skills", onClick: onSkillsClick},
     ];
 
     return (
@@ -61,27 +60,21 @@ export const MenuComponent: React.FC<MenuComponentProps> = ({
                     </NavbarItem>
                 ))}
                 <NavbarItem>
-                    <DarkModeToggle />
+                    <DarkModeToggle/>
                 </NavbarItem>
             </NavbarContent>
 
             {/* Social Icons and Dark Mode Toggle */}
             <NavbarContent className="flex items-center space-x-4 ml-auto" justify="end">
-                <NavbarItem
-                    className="cursor-pointer"
-                    onClick={() => window.open("https://github.com/BaptisteLacroix", "_blank")}
-                >
-                    <Badge color="primary" className="hover:bg-blue-100 dark:hover:bg-gray-800 transition duration-200">
-                        <GithubIcon className="w-6 h-6 text-gray-700 dark:text-gray-200 hover:text-blue-600" />
-                    </Badge>
+                <NavbarItem className="cursor-pointer">
+                    <a href={"https://github.com/BaptisteLacroix"} target={"_blank"}>
+                        <GithubIcon className="w-6 h-6 text-gray-700 dark:text-gray-200 hover:text-blue-600"/>
+                    </a>
                 </NavbarItem>
-                <NavbarItem
-                    className="cursor-pointer"
-                    onClick={() => window.open("https://www.linkedin.com/in/lacroix-baptiste/", "_blank")}
-                >
-                    <Badge color="primary" className="hover:bg-blue-100 dark:hover:bg-gray-800 transition duration-200">
-                        <LinkedinIcon className="w-6 h-6 text-gray-700 dark:text-gray-200 hover:text-blue-600" />
-                    </Badge>
+                <NavbarItem className="cursor-pointer">
+                    <a href={"https://www.linkedin.com/in/lacroix-baptiste/"} target={"_blank"}>
+                        <LinkedinIcon className="w-6 h-6 text-gray-700 dark:text-gray-200 hover:text-blue-600"/>
+                    </a>
                 </NavbarItem>
             </NavbarContent>
 
@@ -99,7 +92,7 @@ export const MenuComponent: React.FC<MenuComponentProps> = ({
                     </NavbarMenuItem>
                 ))}
                 <NavbarMenuItem>
-                    <DarkModeToggle />
+                    <DarkModeToggle/>
                 </NavbarMenuItem>
             </NavbarMenu>
         </Navbar>