Make navbar responsive

MrArnaudMichel · Apr 2, 2024 · 21e9a32 · 21e9a32
1 parent a5fcf21
commit 21e9a32
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 3 deletions.
diff --git a/src/components/layoutComponents/NavigationBar.js b/src/components/layoutComponents/NavigationBar.js
@@ -8,7 +8,7 @@ function NavigationBar({t, toggleTheme, currentTheme}) {
 
     useEffect(() => {
         const handleScroll = () => {
-            const isScrolled = window.scrollY > 80;
+            const isScrolled = window.scrollY > 10;
             if (isScrolled !== scrolled) {
                 setScrolled(!scrolled);
             }

diff --git a/src/components/layoutComponents/css/NavigationBar.css b/src/components/layoutComponents/css/NavigationBar.css
@@ -55,4 +55,39 @@ nav {
 
 .content {
     height: 2000px; /* Placeholder pour du contenu de la page */
-}
+}
+
+/*add smooth keyframe effect*/
+
+@keyframes shake {
+    0% {
+        transform: translate(0px, 1px);
+    }
+
+    25% {
+        transform: translate(0px, -1px);
+    }
+
+    50% {
+        transform: translate(0px, 1px);
+    }
+
+    75% {
+        transform: translate(0px, -1px);
+    }
+
+    100% {
+        transform: translate(0px, 1px);
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .sc-dmyCSP {
+        width: 80%;
+    }
+
+    .navbar li {
+        padding: 0 0.5rem;
+    }
+}
+
diff --git a/src/components/projectsPage/css/AllProjects.css b/src/components/projectsPage/css/AllProjects.css
@@ -25,3 +25,22 @@
     height: auto;
 }
 
+@media screen and (max-width: 768px) {
+    .all-projects-container {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .project-item-main {
+        width: 40vw;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .all-projects-container {
+        grid-template-columns: repeat(1, 1fr);
+    }
+
+    .project-item-main {
+        width: 80vw;
+    }
+}
diff --git a/src/components/projectsPage/css/ProjectItemShort.css b/src/components/projectsPage/css/ProjectItemShort.css
@@ -58,3 +58,47 @@
 .project-item-short.double-grid-row {
     grid-row: span 2;
 }
+
+@media screen and (max-width: 768px) {
+    .project-item-short {
+        grid-template-areas:
+        "title logo"
+        "description logo"
+        "image image";
+    }
+
+    .project-item-short .logo, .project-item-short .image {
+        width: 80px; /* Adjust as needed */
+    }
+
+    .project-item-short .image {
+        width: 100%;
+    }
+
+    .project-item-short .image.large {
+        width: 90%;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .project-item-short {
+        grid-template-areas:
+        "title"
+        "logo"
+        "description"
+        "image";
+    }
+
+    .project-item-short .logo, .project-item-short .image {
+        width: 60px; /* Adjust as needed */
+    }
+
+    .project-item-short .image {
+        width: 100%;
+    }
+
+    .project-item-short .image.large {
+        width: 90%;
+    }
+}
+
diff --git a/src/locales/language/fr/translation.json b/src/locales/language/fr/translation.json
@@ -10,7 +10,7 @@
   "Welcome": "Je suis un développeur <strong>full-stack.</strong>",
 
   "WelcomeAboutMeTitle": "Présentation",
-  "WelcomeAboutMeContent": "Je suis m'appelle Arnaud <strong>Michel</strong>, je suis un développeur full-stack. Je suis actuellement en second année de BUT Informatique à l'IUT Robert Schumann (Illkirch-Graffenstaden). J'ai commencé à apprendre la programmation en 2019, et depuis je n'ai pas arrêté d'apprendre et de me perfectionner. J'ai créee ce site web pour vous présenter mes projets, mes compétences et mon parcours.",
+  "WelcomeAboutMeContent": "Je suis m'appelle Arnaud <strong>Michel</strong>, je suis un développeur full-stack. Je suis actuellement en second année de BUT Informatique à l'IUT Robert Schumann (Illkirch-Graffenstaden). J'ai commencé à apprendre la programmation en 2019, et depuis je n'ai pas arrêté d'apprendre et de me perfectionner. J'ai créée ce site web pour vous présenter mes projets, mes compétences et mon parcours.",
 
   "Career": "Mon parcours",
   "company": "Entreprise",