Feature - adding responsiveness #287

CONTRIBUTORS.md

@@ -852,5 +852,17 @@
   </a>
 </td>
 <!-- End of column-3 -->
+<!-- Start of column-4 -->
+<td align="center">
+  <a href="https://github.com/N-Dijkstra">
+    <img
+      src="https://avatars.githubusercontent.com/u/118537280?v=4"
+      width="100px"
+    />
+    <br />
+    <sub>Nina Dijkstra</sub>
+  </a>
+</td>
+<!-- End of column-4 -->
   </tr>
 </table>

src/Components/Header/Header.jsx

@@ -14,57 +14,81 @@ import RandomContributors from "../randomcontributor/RandomContributors";
 
 // Header component
 const Header = () => {
-  const [isMobile, setIsMobile] = useState(window.innerWidth > 640);
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 900);
+  const [menuOpen, setMenuOpen] = useState(false);
 
   useEffect(() => {
-    function handleSize() {
-      setIsMobile(window.innerWidth > 640);
+    function handleResize() {
+      setIsMobile(window.innerWidth <= 900);
     }
-    window.addEventListener("resize", handleSize);
-
+    window.addEventListener("resize", handleResize);
     return () => {
-      window.removeEventListener("resize", handleSize);
+      window.removeEventListener("resize", handleResize);
     };
   }, []);
-  return (
-    <header className={`flex`}>
-      <div className="text__container">
-        <div className="opensource__title">
-          <span>
-            An Open<br></br> Source<br></br> Project
-          </span>
-        </div>
 
-        <div className="github__section">
-          <div>
+  const toggleMenu = () => {
+    setMenuOpen(!menuOpen);
+  };
+
+  return (
+    <header className={`header flex ${menuOpen ? 'menu-open' : ''}`}>
+      {isMobile ? (
+        <>
+          <div className="navbar">
+            <div className="opensource__title">
+              <span>
+                An Open Source Project
+              </span>
+            </div>
+            <div className="hamburger" onClick={toggleMenu}>
+              <div className={`bar ${menuOpen ? "open" : ""}`}></div>
+              <div className={`bar ${menuOpen ? "open" : ""}`}></div>
+              <div className={`bar ${menuOpen ? "open" : ""}`}></div>
+            </div>
+            {menuOpen && (
+              <div className="menu">
+                <a href="https://github.com/BeforeIDieCode/BeforeIDieAchievements" target="_blank" rel="noopener noreferrer">GitHub Repo</a>
+                <a href="https://before-i-die-achievements.vercel.app/Contributors" target="_blank" rel="noopener noreferrer">Contributors List</a>
+                <a href="https://before-i-die-achievements.vercel.app/contributors-map" target="_blank" rel="noopener noreferrer">Contributors Map</a>
+              </div>
+            )}
+          </div>
+        </>
+      ) : (
+        <div className="text__container">
+          <div className="opensource__title">
             <span>
-              {" "}
-              Join us and <br></br>share your wish
+              An Open<br></br> Source<br></br> Project
             </span>
           </div>
-          <a
-            className="button"
-            href="https://github.com/BeforeIDieCode/BeforeIDieAchievements"
-            target="/black"
-          >
-            GitHub Repo
-          </a>
-          <a
-            className="button"
-            href="https://before-i-die-achievements.vercel.app/Contributors"
-            target="/black"
-          >
-            Contributors List
-          </a>
-          <a
-            className="button"
-            href="https://before-i-die-achievements.vercel.app/contributors-map"
-            target="/black"
-          >
-            Contributors Map
-          </a>
+
+          <div className="github__section">
+            <span>Join us and <br></br>share your wish</span>
+            <a
+              className="button"
+              href="https://github.com/BeforeIDieCode/BeforeIDieAchievements"
+              target="/black"
+            >
+              GitHub Repo
+            </a>
+            <a
+              className="button"
+              href="https://before-i-die-achievements.vercel.app/Contributors"
+              target="/black"
+            >
+              Contributors List
+            </a>
+            <a
+              className="button"
+              href="https://before-i-die-achievements.vercel.app/contributors-map"
+              target="/black"
+            >
+              Contributors Map
+            </a>
+          </div>
         </div>
-      </div>
+      )}
       <div className={"animation__container flex justify-content-center"}>
         <div className={"untitled"}>
           <div className="untitled__slides">
@@ -127,4 +151,4 @@ const Header = () => {
   );
 };
 
-export default Header;
+export default Header;

src/Components/Header/Header.scss

@@ -16,35 +16,48 @@ $images: url("../../../public/img/dummy_image/1.jpg")
 header {
   background-color: #09090a;
   height: 100vh;
+  width: 100%;
+  display: flex;
   flex-direction: row-reverse;
+
+  @media (max-width: 900px) {
+    flex-direction: row;
+  }
 }
+
 .text__container {
   flex-basis: 30%;
   display: flex;
   flex-direction: column;
-  gap: 10vmax;
+  gap: 5vmax;
   padding: 5vmin;
+
   @media (max-width: $width) {
     align-items: center;
     justify-content: center;
-    // height: 100vh; // Optionally, set the height to 100vh to take up the full viewport height.
   }
+
+  @media (max-width: 900px) {
+    display: none;
+  }
+
   .opensource__title {
     span {
       color: $color;
       font-family: "Mefika", sans-serif;
-      font-size: 5vmax;
+      font-size: 4vmax;
       animation: rotateHue infinite $t * $slides * 2 linear;
       animation-delay: calc($t / 17);
     }
   }
+
   .github__section {
     font-family: "Roboto Mono", sans-serif;
     font-size: 3vmin;
     font-weight: 800;
     color: #efe4e4;
-    position: relative;
     top: -80px;
+
     span {
       line-height: 2vmax;
       letter-spacing: 0.5vmax;
@@ -67,6 +80,7 @@ header {
       line-height: 1;
       transform: translate3d(0.5vmin, -0.5vmin, 0);
       transition: all 100ms linear;
+
       &:hover {
         transform: translate3d(1vmin, -1vmin, 0);
         box-shadow: -1vmin 1vmin 0 rgba(white, 0.5);
@@ -80,9 +94,89 @@ header {
     }
   }
 }
+
+.navbar {
+  display: none; 
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  width: 100%;
+  background-color: #09090a;
+  position: absolute; 
+  top: 0; 
+  z-index: 10; 
+
+  @media (max-width: 900px) {
+    display: flex; 
+    width: 100%; 
+  }
+
+  .opensource__title {
+    span {
+      color: $color;
+      font-family: "Mefika", sans-serif;
+      font-size: 4vmax;
+      animation: rotateHue infinite $t * $slides * 2 linear;
+      animation-delay: calc($t / 17);
+    }
+  }
+
+  .hamburger {
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+
+    .bar {
+      width: 25px;
+      height: 3px;
+      background-color: white;
+      transition: 0.3s;
+    }
+
+    .bar.open:nth-child(1) {
+      transform: rotate(45deg) translate(5px, 5px);
+    }
+
+    .bar.open:nth-child(2) {
+      opacity: 0;
+    }
+
+    .bar.open:nth-child(3) {
+      transform: rotate(-45deg) translate(5px, -5px);
+    }
+  }
+
+  .menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: #09090a;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    a {
+      color: white;
+      padding: 1rem;
+      text-decoration: none;
+      width: 100%; 
+      text-align: center; 
+
+      &:hover {
+        color: $color;
+      }
+    }
+  }
+}
+
+//Animations part of the header
 .animation__container {
   position: relative;
-  flex-basis: 70%;
+  flex-basis: 100%;
+  width: 100%;
 }
 
 .untitled {
@@ -183,8 +277,13 @@ header {
       font-family: "Mefika", sans-serif;
     }
   }
+
+  @media (max-width: 900px) {
+    flex-basis: 100%; 
+  }
 }
 
+//Animations
 @keyframes openTop {
   0% {
     transform: translate3d(-50%, 0, 0);

src/Components/randomcontributor/RandomContributor.module.css

@@ -64,14 +64,13 @@
 }
 
 
-
+/* Media Query */
 @media (max-width: 768px) {
   .card-container{
     flex-direction: column;
     background: #fff;
-    margin: 0 1vmax; 
-   width: 90%; 
-   transform: translateX(3%);
+    width: 90%; 
+    transform: translateX(3%);
   }
 
   .image{
@@ -82,4 +81,26 @@
     font-weight:800;
 
   }
-}
+}
+
+@media (max-width: 400px) {
+  .card-container {
+    width: 85%; 
+    margin: auto;
+    transform: translateX(0);
+  }
+
+  .image {
+    height: 120px;
+    width: 120px;
+  }
+
+  .heading {
+    font-size: 2.5vmax; 
+    font-weight: 800;
+  }
+
+  .name {
+    font-size: 12px; 
+  }
+}

src/Jsons/Contributors.json

@@ -628,5 +628,14 @@
     "location": "Kaduna, Nigeria 🇳🇬",
     "GitHub": "https://github.com/Luwa-Tech",
     "text": "I want to contribute massively to my nation. For my friends, family, and future generations. I want to acheive my dreams."
+  },
+  {
+    "id": "Nina Dijkstra",
+    "image": "img/bid_image/Nina_Dijkstra.jpg",
+    "avatar": "img/avatar/Nina_Dijkstra.jpg",
+    "name": "Nina Dijkstra",
+    "location": "Roosendaal, Netherlands 🇳🇱",
+    "GitHub": "https://github.com/N-Dijkstra",
+    "text": "Travel the world and make a difference."
   }
 ]