new style for experiences section

README.md

@@ -2,7 +2,6 @@
 
 ## For V1 :
 - Revoir les titres de section (+espace au dessus des titres)
-- Revoir ma section experiences
 
 ## For V2 :
 - Mettre la base de donnée en place

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

src/styles/Experiences.css

@@ -3,23 +3,22 @@
     flex-direction: column;
     align-items: center;
     width: 100%;
-    scroll-margin-top: 40px;
 }
 
 .experiences-container {
-    width: 90%;
+    width: 50%;
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
-
 .experiences-container::before {
     content: '';
     position: absolute;
+    left: 50%;
     transform: translateX(-50%);
     width: 2px;
     height: 100%;
     background-color: rgba(176, 176, 176, 0.2);
-}
+}

src/styles/SingleExperience.css

@@ -1,40 +1,39 @@
 .experience-card {
     position: relative;
-    width: 50%;
+    width: 100%;
     margin-bottom: 3rem;
-    box-sizing: border-box;
-    border-radius: 12px;
-    background-color: rgba(255, 255, 255, 0.03);
-    transition: all 0.3s ease;
     padding: 1.5rem;
-}
-
-.experience-card.left {
-    align-self: flex-start;
-    border-left: 3px solid #D95F46;
-}
-
-.experience-card.right {
-    align-self: flex-end;
-    border-right: 3px solid #D95F46;
-}
-
-.experience-card:hover {
-    transform: translateY(-5px);
-    background-color: rgba(255, 255, 255, 0.05);
-}
-
-.experience-card-header {
     display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 1rem;
-    margin-bottom: 1rem;
 }
 
-.experience-card-header-left {
-    display: flex;
-    flex-direction: column;
+.experience-card::before {
+    content: '';
+    position: absolute;
+    top: 25px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background-color: #D95F46;
+    border: 3px solid rgba(176, 176, 176, 0.2);
+}
+
+
+.experience-card-left {
+    width: 50%;
+    text-align: end;
+    margin-right: 8rem;
+}
+
+.experience-card-right {
+    width: 50%;
+}
+
+.experience-company {
+    color: #D95F46;
+    font-size: 1.2rem;
+    margin: 0;
 }
 
 .experience-role {
@@ -43,9 +42,6 @@
     color: #EAEAEA;
     margin: 0;
 }
-.experience-location{
-    font-weight: 600;
-}
 
 .experience-location,
 .experience-duration {
@@ -53,7 +49,6 @@
     color: #B0B0B0;
     margin: 0.25rem 0 0;
     white-space: nowrap;
-
 }
 
 .experience-tasks {
@@ -64,15 +59,19 @@
 
 .experience-tasks li {
     position: relative;
-    padding-left: 1.2rem;
+    padding-left: 1.5rem;
     margin-bottom: 0.5rem;
     color: #B0B0B0;
+    text-align: left;
 }
 
 .experience-tasks li::before {
     content: '›';
     position: absolute;
     left: 0;
+    top: 0;
     color: #D95F46;
     font-weight: bold;
-}
+    font-size: 1.2rem;
+    line-height: 1;
+}

src/styles/SingleProject.css

@@ -20,9 +20,9 @@
     width: 100%;
     display: flex;
     justify-content: center;
-    align-items: center;
+    align-items: start;
     overflow: hidden;
-    max-height: 225px;
+    height: 210px;
 }
 
 .single-project-left img {
@@ -32,7 +32,6 @@
     transition: opacity 0.3s ease-in-out;
     opacity: 1;
     object-fit: cover;
-
 }
 
 .single-project-left img.fade-out {