new style for experiences section

src/components/Experiences.jsx

@@ -4,7 +4,6 @@ import SingleExperience from './SingleExperience';
 function Experiences() {
     const experiencesData = [
         {
-            id: 1,
             role: "Web Development Intern",
             company: "Pandora",
             duration: "April 2024",
@@ -16,7 +15,6 @@ function Experiences() {
             ]
         },
         {
-            id: 2,
             role: "IT Support Intern",
             company: "INRAE",
             duration: "April 2023",
@@ -34,8 +32,8 @@ function Experiences() {
         <section id="experiences-section">
             <h1>Experiences</h1>
             <div className="experiences-container">
-                {experiencesData.map((exp, index) => (
-                    <SingleExperience experience={exp} whichSide={index % 2 !== 0}/>
+                {experiencesData.map((exp) => (
+                    <SingleExperience experience={exp}/>
                 ))}
             </div>
         </section>

src/components/SingleExperience.jsx

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