update of experiences section and add of single experience

src/components/Experiences.jsx

@@ -1,10 +1,45 @@
+import '../styles/Experiences.css';
+import SingleExperience from './SingleExperience';
+
 function Experiences() {
+    const experiencesData = [
+        {
+            id: 1,
+            role: "Web Development Intern",
+            company: "Pandora",
+            duration: "April 2024",
+            location: "Rennes (Ille-et-Vilaine), France",
+            tasks: [
+                "Development of a dynamic website with database integration (HTML, CSS, PHP, SQL)",
+                "Created a reusable interface used as an internal learning resource",
+                "Introduction to GitHub Actions"
+            ]
+        },
+        {
+            id: 2,
+            role: "IT Support Intern",
+            company: "INRAE",
+            duration: "April 2023",
+            location: "Rennes (Ille-et-Vilaine), France",
+            tasks: [
+                "Introduction to ProxMox Backup and UpdateEngine tools",
+                "Preparation of two workstations",
+                "Setup of a Wi-Fi hotspot using a Raspberry Pi",
+                "Installation of a RAID 1 system"
+            ]
+        }
+    ];
+
     return (
         <section id="experiences-section">
-            <h1>Experiences</h1>
+            <h1>Expériences</h1>
+            <div className="experiences-container">
+                {experiencesData.map((exp, index) => (
+                    <SingleExperience experience={exp} whichSide={index % 2 !== 0}/>
+                ))}
+            </div>
         </section>
-    )
+    );
 }
 
-
-export default Experiences
+export default Experiences;

src/components/SingleExperience.jsx

@@ -0,0 +1,23 @@
+import '../styles/SingleExperience.css';
+
+function SingleExperience({ experience, whichSide }) {
+    return (
+        <div className={`experience-card ${whichSide ? 'right' : 'left'}`}>
+            <div className="experience-card-header">
+                <div className="experience-primary-info">
+                    <h3 className="experience-role">{experience.role}</h3>
+                    <p className="experience-company-location">
+                        {experience.company} • {experience.location}
+                    </p>
+                </div>
+                <p className="experience-duration">{experience.duration}</p>
+            </div>
+            <ul className="experience-tasks">
+                {experience.tasks.map((task, index) => (
+                    <li key={index}>{task}</li>
+                ))}
+            </ul>
+        </div>
+    );
+}
+export default SingleExperience;

src/components/SingleProject.jsx

@@ -16,7 +16,7 @@ function SingleProject({image, title, description, skills, color}) {
                 </p>
                 <ul className="single-project-skills-list">
                     {skills.map(skill => (
-                        <li key={skill}><SkillCard text={skill}/></li>
+                        <li><SkillCard text={skill}/></li>
                     ))}
                 </ul>
                 <p className="single-project-link">