From 028f7f5b896d1f011a547f5c1922cec239dd688f Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Sun, 21 Sep 2025 18:13:00 +0200 Subject: [PATCH 1/5] set experiences section responsive --- src/components/Experiences/Experiences.css | 14 ++++++++- .../SingleExperience/SingleExperience.css | 30 ++++++++++++++++--- src/index.css | 2 ++ 3 files changed, 41 insertions(+), 5 deletions(-) diff --git a/src/components/Experiences/Experiences.css b/src/components/Experiences/Experiences.css index b85094f..88029e3 100644 --- a/src/components/Experiences/Experiences.css +++ b/src/components/Experiences/Experiences.css @@ -7,7 +7,7 @@ } .experiences-container { - width: 50%; + width: 100%; position: relative; display: flex; flex-direction: column; @@ -23,3 +23,15 @@ height: 100%; background-color: rgba(176, 176, 176, 0.2); } + +@media (max-width: 768px) { + .experiences-container { + width: 90%; + align-items: flex-start; + margin-right: 20px; + } + + .experiences-container::before { + left: 20px; + } +} \ No newline at end of file diff --git a/src/components/SingleExperience/SingleExperience.css b/src/components/SingleExperience/SingleExperience.css index 1b55902..824affd 100644 --- a/src/components/SingleExperience/SingleExperience.css +++ b/src/components/SingleExperience/SingleExperience.css @@ -4,6 +4,8 @@ margin-bottom: 3rem; padding: 1.5rem; display: flex; + gap: 6rem; + justify-content: center; } .experience-card::before { @@ -21,18 +23,17 @@ .experience-card-left { - width: 50%; + width: 25%; text-align: end; - margin-right: 8rem; } .experience-card-right { - width: 50%; + width: 25%; } .experience-company { color: var(--important-color); - font-size: 1.2rem; + font-size: 1.5rem; margin: 0; } @@ -74,4 +75,25 @@ font-weight: bold; font-size: 1.2rem; line-height: 1; +} + + + +@media (max-width: 768px) { + .experience-card{ + display: flex; + flex-direction: column; + gap: 0; + } + .experience-card::before { + left: 20px; + top: 31px; + } + .experience-card-left, .experience-card-right{ + width: fit-content; + margin-left: 20px; + } + .experience-card-left{ + text-align: left; + } } \ No newline at end of file diff --git a/src/index.css b/src/index.css index 8e6af21..6c260b1 100644 --- a/src/index.css +++ b/src/index.css @@ -9,6 +9,7 @@ html{ scroll-behavior: smooth; + overflow-x: hidden; } @@ -16,6 +17,7 @@ body { margin: 0; display: flex; place-items: center; + overflow-x: hidden; } .section-title { From bf42d752a96c141826bf7353c5cf84c9f1decadf Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Sun, 21 Sep 2025 18:23:06 +0200 Subject: [PATCH 2/5] set projects section responsive --- src/components/Projects/Projects.css | 6 +++++- src/components/SingleProject/SingleProject.css | 14 ++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/Projects/Projects.css b/src/components/Projects/Projects.css index 7d6c056..ee99303 100644 --- a/src/components/Projects/Projects.css +++ b/src/components/Projects/Projects.css @@ -55,4 +55,8 @@ .projects-back-link { text-align: center; margin-bottom: 3rem; -} \ No newline at end of file +} + + + + diff --git a/src/components/SingleProject/SingleProject.css b/src/components/SingleProject/SingleProject.css index dcc671e..4b24b48 100644 --- a/src/components/SingleProject/SingleProject.css +++ b/src/components/SingleProject/SingleProject.css @@ -122,4 +122,18 @@ margin-left : 2em; font-weight: bold; font-style: italic; +} + + +@media (max-width: 1366px) { + .single-project { + width: 47%; + } +} + + +@media (max-width: 768px) { + .single-project { + width: 90%; + } } \ No newline at end of file From 61840f76cf6ee9178c192fca408719d30d5ce910 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Sun, 21 Sep 2025 19:00:52 +0200 Subject: [PATCH 3/5] set home section responsive --- src/components/Home/Home.css | 30 +++++++++++++++++++ src/components/NavBar/NavBar.css | 7 +++++ .../thirdParty/Background/Background.css | 10 ++++++- 3 files changed, 46 insertions(+), 1 deletion(-) diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css index 66469ca..64f9cc3 100644 --- a/src/components/Home/Home.css +++ b/src/components/Home/Home.css @@ -12,6 +12,8 @@ #home-section h1{ margin-bottom: 0; + margin-left: 40px; + margin-right: 40px; } #home-section h2 { @@ -49,5 +51,33 @@ } +@media (max-width: 840px) { + .btn { + margin-bottom: 10%; + } + + #home-section p{ + max-width: 60%; + } +} + +@media (max-width: 656px) { + #home-section h1{ + font-size: 3.5rem; + } + #home-section h2 { + font-size: 1.5rem; + } +} + + +@media (max-width: 584px) { + #home-section h1{ + font-size: 3rem; + } +} + + + diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css index 894f63b..ec34e1d 100644 --- a/src/components/NavBar/NavBar.css +++ b/src/components/NavBar/NavBar.css @@ -40,4 +40,11 @@ .nav-link.active { background-color: rgba(217, 95, 70, 0.3); color: var(--important-color); +} + + +@media (max-width: 768px) { + .nav-list{ + gap: 0.5rem; + } } \ No newline at end of file diff --git a/src/components/thirdParty/Background/Background.css b/src/components/thirdParty/Background/Background.css index cd49587..44c51de 100644 --- a/src/components/thirdParty/Background/Background.css +++ b/src/components/thirdParty/Background/Background.css @@ -22,7 +22,7 @@ .planet { position: absolute; - bottom: 0%; + bottom: 0; left: 50%; transform: translateX(-50%); width: 120vw; @@ -102,3 +102,11 @@ opacity: 0.6; } } + + + +@media (max-width: 840px) { + .planet { + display: none; + } +} \ No newline at end of file From b7826715ea1e5bdbb004a53dd7f07e94e4295646 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Sun, 21 Sep 2025 19:04:16 +0200 Subject: [PATCH 4/5] set filter btn responsive --- src/components/Filter/Filter.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/Filter/Filter.css b/src/components/Filter/Filter.css index f1e1937..f931f3c 100644 --- a/src/components/Filter/Filter.css +++ b/src/components/Filter/Filter.css @@ -124,4 +124,11 @@ background-color: rgba(217, 95, 70, 0.3); color: var(--important-color); border-color: var(--important-color); +} + +@media (max-width: 480px) { + .filter-btn { + top: 5em; + right: 20px; + } } \ No newline at end of file From 0c2ea6f01e8bc84ae17e746afe8282ab6763255e Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Sun, 21 Sep 2025 19:09:21 +0200 Subject: [PATCH 5/5] set project details page responsive --- src/components/ProjectDetails/ProjectDetails.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/ProjectDetails/ProjectDetails.css b/src/components/ProjectDetails/ProjectDetails.css index b7dc692..e9a4076 100644 --- a/src/components/ProjectDetails/ProjectDetails.css +++ b/src/components/ProjectDetails/ProjectDetails.css @@ -18,7 +18,7 @@ background-image: url("/public/assets/images/projectDetailsHeadband.png"); background-size: cover; - &::after { /* Utilise un pseudo-élément pour le dégradé */ + &::after { content: ''; position: absolute; bottom: 0; @@ -80,6 +80,7 @@ list-style: none; padding: 0; gap: 1em; + flex-wrap: wrap; } @@ -169,4 +170,13 @@ aside ul li a:hover { display: flex; align-items: center; gap: 0.5em; +} + + + + +@media (max-width: 480px) { + .return-button{ + top: 7em; + } } \ No newline at end of file