From 681d5ad98c29549740c4272d954aaf3adf9caab5 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Sat, 23 Aug 2025 00:34:39 +0200 Subject: [PATCH] update of experiences section and add of single experience --- src/App.css | 40 +-------------- src/components/Experiences.jsx | 43 ++++++++++++++-- src/components/SingleExperience.jsx | 23 +++++++++ src/components/SingleProject.jsx | 2 +- src/index.css | 52 ++----------------- src/styles/Experiences.css | 25 +++++++++ src/styles/SingleExperience.css | 78 +++++++++++++++++++++++++++++ 7 files changed, 172 insertions(+), 91 deletions(-) create mode 100644 src/components/SingleExperience.jsx create mode 100644 src/styles/Experiences.css create mode 100644 src/styles/SingleExperience.css diff --git a/src/App.css b/src/App.css index b9d355d..e5ed727 100644 --- a/src/App.css +++ b/src/App.css @@ -1,42 +1,4 @@ #root { - max-width: 1280px; margin: 0 auto; padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} +} \ No newline at end of file diff --git a/src/components/Experiences.jsx b/src/components/Experiences.jsx index 2047cf3..7f3fd03 100644 --- a/src/components/Experiences.jsx +++ b/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 (
-

Experiences

+

Expériences

+
+ {experiencesData.map((exp, index) => ( + + ))} +
- ) + ); } - -export default Experiences \ No newline at end of file +export default Experiences; diff --git a/src/components/SingleExperience.jsx b/src/components/SingleExperience.jsx new file mode 100644 index 0000000..67f9c2d --- /dev/null +++ b/src/components/SingleExperience.jsx @@ -0,0 +1,23 @@ +import '../styles/SingleExperience.css'; + +function SingleExperience({ experience, whichSide }) { + return ( +
+
+
+

{experience.role}

+

+ {experience.company} • {experience.location} +

+
+

{experience.duration}

+
+ +
+ ); +} +export default SingleExperience; \ No newline at end of file diff --git a/src/components/SingleProject.jsx b/src/components/SingleProject.jsx index 8269901..a109e36 100644 --- a/src/components/SingleProject.jsx +++ b/src/components/SingleProject.jsx @@ -16,7 +16,7 @@ function SingleProject({image, title, description, skills, color}) {

diff --git a/src/index.css b/src/index.css index 1ab2071..b256db2 100644 --- a/src/index.css +++ b/src/index.css @@ -2,25 +2,9 @@ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); background-color: #121212; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} body { margin: 0; @@ -33,36 +17,10 @@ body { h1 { font-size: 3.2em; line-height: 1.1; + color: #EAEAEA; + text-align: center; } -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} +h2{ + color: #EAEAEA; +} \ No newline at end of file diff --git a/src/styles/Experiences.css b/src/styles/Experiences.css new file mode 100644 index 0000000..eb0d314 --- /dev/null +++ b/src/styles/Experiences.css @@ -0,0 +1,25 @@ +#experiences-section { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 5rem; + width: 100%; +} + +.experiences-container { + width: 90%; + position: relative; + display: flex; + flex-direction: column; + align-items: center; +} + + +.experiences-container::before { + content: ''; + position: absolute; + transform: translateX(-50%); + width: 2px; + height: 100%; + background-color: rgba(176, 176, 176, 0.2); +} \ No newline at end of file diff --git a/src/styles/SingleExperience.css b/src/styles/SingleExperience.css new file mode 100644 index 0000000..f00ade7 --- /dev/null +++ b/src/styles/SingleExperience.css @@ -0,0 +1,78 @@ +.experience-card { + position: relative; + width: 50%; + 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-primary-info { + display: flex; + flex-direction: column; +} + +.experience-role { + font-size: 1.5rem; + font-weight: bold; + color: #EAEAEA; + margin: 0; +} +.experience-company-location{ + font-weight: 600; +} + +.experience-company-location, +.experience-duration { + font-size: 0.95rem; + color: #B0B0B0; + margin: 0.25rem 0 0; + white-space: nowrap; + +} + +.experience-tasks { + list-style: none; + padding: 0; + margin-top: 1rem; +} + +.experience-tasks li { + position: relative; + padding-left: 1.2rem; + margin-bottom: 0.5rem; + color: #B0B0B0; +} + +.experience-tasks li::before { + content: '›'; + position: absolute; + left: 0; + color: #D95F46; + font-weight: bold; +} -- 2.47.2