diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 4ab0d4c0..754b211f 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -852,5 +852,17 @@ + + + + +
+ Nina Dijkstra + + + diff --git a/public/img/avatar/Nina_Dijkstra.jpg b/public/img/avatar/Nina_Dijkstra.jpg new file mode 100644 index 00000000..44bfae42 Binary files /dev/null and b/public/img/avatar/Nina_Dijkstra.jpg differ diff --git a/public/img/bid_image/Nina_Dijkstra.jpg b/public/img/bid_image/Nina_Dijkstra.jpg new file mode 100644 index 00000000..f15667e1 Binary files /dev/null and b/public/img/bid_image/Nina_Dijkstra.jpg differ diff --git a/src/Components/Header/Header.jsx b/src/Components/Header/Header.jsx index ac96014a..bb0e657a 100644 --- a/src/Components/Header/Header.jsx +++ b/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 ( -
-
-
- - An Open

Source

Project - -
-
-
+ const toggleMenu = () => { + setMenuOpen(!menuOpen); + }; + + return ( +
+ {isMobile ? ( + <> +
+
+ + An Open Source Project + +
+
+
+
+
+
+ {menuOpen && ( + + )} +
+ + ) : ( +
+
- {" "} - Join us and

share your wish + An Open

Source

Project
- - GitHub Repo - - - Contributors List - - - Contributors Map - + +
-
+ )}
@@ -127,4 +151,4 @@ const Header = () => { ); }; -export default Header; +export default Header; \ No newline at end of file diff --git a/src/Components/Header/Header.scss b/src/Components/Header/Header.scss index 5e11b797..8b3168b8 100644 --- a/src/Components/Header/Header.scss +++ b/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); diff --git a/src/Components/randomcontributor/RandomContributor.module.css b/src/Components/randomcontributor/RandomContributor.module.css index e645ad40..5139b340 100644 --- a/src/Components/randomcontributor/RandomContributor.module.css +++ b/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; } -} \ No newline at end of file +} + +@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; + } +} diff --git a/src/Jsons/Contributors.json b/src/Jsons/Contributors.json index 7972089a..d9bd0b0d 100644 --- a/src/Jsons/Contributors.json +++ b/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." } ]