From 7458d3e36559f2c820c26a661a237fffb9670363 Mon Sep 17 00:00:00 2001
From: Chu Seng <yongchuseng@gmail.com>
Date: Fri, 25 Aug 2023 11:12:44 +0800
Subject: [PATCH] Fix mobile responsiveness based on tasks listed.

---
 src/Components/Footer/Footer.jsx              |  17 ++-
 src/Components/Header/Header.jsx              |  26 +++--
 src/Components/Header/Header.module.css       | 106 +++++++++++-------
 .../MasonryBox/MasonryBox.module.css          |  59 +++++++---
 src/Components/Nav/Nav.jsx                    |   2 +-
 src/Components/Nav/Nav.module.css             |  96 +++++++++-------
 6 files changed, 195 insertions(+), 111 deletions(-)

diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx
index f6a69bdb..5faeefd7 100644
--- a/src/Components/Footer/Footer.jsx
+++ b/src/Components/Footer/Footer.jsx
@@ -1,8 +1,22 @@
-import React from "react";
+import React, {useState, useEffect} from "react";
+
 
 import styles from "./Footer.module.css";
 
 const Footer = () => {
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 640);
+
+  useEffect(() => {
+    function handleSize() {
+      setIsMobile(window.innerWidth < 640);
+    }
+    window.addEventListener("resize", handleSize);
+
+    return () => {
+      window.removeEventListener("resize", handleSize);
+    }
+  }, [])
+
   return (
     <footer className={styles["footer"]}>
       <p className={styles["footer-message"]}>
@@ -10,6 +24,7 @@ const Footer = () => {
         <span className={styles["emoji"]} role='img' aria-label='heart'>
           💙
         </span>{" "}
+        {isMobile && <br />}
         by the{" "}
         <a
           className={styles["footer-message-link"]}
diff --git a/src/Components/Header/Header.jsx b/src/Components/Header/Header.jsx
index b332fff8..ea93efd1 100644
--- a/src/Components/Header/Header.jsx
+++ b/src/Components/Header/Header.jsx
@@ -1,3 +1,4 @@
+import React, {useState, useEffect} from "react";
 // import styles of this component
 import styles from "./Header.module.css"
 
@@ -12,24 +13,31 @@ import { Typewriter } from 'react-simple-typewriter'
 
 // Header component
 const Header = () => {
+  const [isMobile, setIsMobile] = useState(window.innerWidth > 640)
+
+  useEffect(() => {
+    function handleSize() {
+      setIsMobile(window.innerWidth > 640);
+    }
+    window.addEventListener("resize", handleSize);
+
+    return () => {
+      window.removeEventListener("resize", handleSize);
+    }
+  }, [])
   return (
     <header className={`${styles.header} flex justify-content-center`}>
       <ContainerCard className="flex flex-column">
         <div className={styles["blur-circle-shape"]}></div>
         <Nav />
-        <BrickLayout />
+        {isMobile && <BrickLayout />}
         <div className={styles["blur-circle-shape-two"]}></div>
         <div className={`${styles["headings-header"]} flex justify-content-center flex-column`}>
           <h1 className={styles["heading-header-second-title"]}>
-            <p className="text_open-source-project" style={{ fontSize: '55px' }}>
+            <p className={styles["text_open-source-project"]} >
               <span
-                style={{
-                  color: '#006DFF',
-                  fontWeight: 'bolder',
-                  textDecoration: 'underline',
-                  textDecorationColor: '#FEEA3A',
-                  fontSize: '125px',
-                }}
+                className={styles["span_open-source-project"]}
+                style={{ color: "#006dff"}}
               >
                 An Open
                 <br />
diff --git a/src/Components/Header/Header.module.css b/src/Components/Header/Header.module.css
index faf24db8..bb9376e4 100644
--- a/src/Components/Header/Header.module.css
+++ b/src/Components/Header/Header.module.css
@@ -1,66 +1,86 @@
 .header {
-    position: relative;
-    height: 1000px;
+  position: relative;
+  height: 1000px;
 }
 
 .blur-circle-shape {
-    position: absolute;
-    top: -125px;
-    left: -125px;
-    border-bottom: 500px;
-    border-radius: 100%;
-    width: 861px;
-    height: 351px;
-    background: yellow;
-    z-index: 0;
-    filter: blur(250px);
+  position: absolute;
+  top: -125px;
+  left: -125px;
+  border-bottom: 500px;
+  border-radius: 100%;
+  width: 861px;
+  height: 351px;
+  background: yellow;
+  z-index: 0;
+  filter: blur(250px);
 }
 
 .headings-header {
-    height: 100%;
-    margin-left: 40px;
-    z-index: 2;
+  height: 100%;
+  margin-left: 40px;
+  z-index: 2;
 }
 
 .heading-header-title {
-    position: relative;
-    font-size: 1.2rem;
-    color: var(--green-400);
-    margin-left: 70px;
+  position: relative;
+  font-size: 1.2rem;
+  color: var(--green-400);
+  margin-left: 70px;
 }
 
 .heading-header-title::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: -70px;
-    transform: translateY(-50%);
-    width: 60px;
-    height: 2px;
-    background-color: var(--green-400);
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: -70px;
+  transform: translateY(-50%);
+  width: 60px;
+  height: 2px;
+  background-color: var(--green-400);
 }
 
 .heading-header-title::after {
-    content: '';
-    position: relative;
-    top: 50%;
-    left: -28px;
-    transform: translateY(-50%) rotate(45deg);
-    width: 10px;
-    height: 10px;
-    background-color: var(--green-400);
-    box-shadow: 0 0 1px 3px var(--dark-900);
-    border-radius: 4px;
+  content: "";
+  position: relative;
+  top: 50%;
+  left: -28px;
+  transform: translateY(-50%) rotate(45deg);
+  width: 10px;
+  height: 10px;
+  background-color: var(--green-400);
+  box-shadow: 0 0 1px 3px var(--dark-900);
+  border-radius: 4px;
 }
 
 .heading-header-second-title {
-    color: #004AAD;
-    font-size: 2.3rem;
-    margin-top: 0; /* Updated */
-    font-weight: bolder;
-    line-height: 50px;
+  color: #004aad;
+  font-size: 2.3rem;
+  margin-top: 0; /* Updated */
+  font-weight: bolder;
+  line-height: 50px;
+}
+
+.text_open-source-project {
+  font-size: 55px;
+}
+
+.span_open-source-project {
+  font-weight: bolder;
+  text-decoration: underline;
+  text-decoration-color: #feea3a;
+  font-size: 125px;
+}
+
+@media (max-width: 640px) {
+  .text_open-source-project {
+    font-size: 25px;
+  }
+  .span_open-source-project {
+    font-size: 75px;
+  }
 }
 
 .heading-header-second-title span {
-    color: var(--white-100);
+  color: var(--white-100);
 }
diff --git a/src/Components/MasonryLayout/MasonryBox/MasonryBox.module.css b/src/Components/MasonryLayout/MasonryBox/MasonryBox.module.css
index 236622ab..24e25cb1 100644
--- a/src/Components/MasonryLayout/MasonryBox/MasonryBox.module.css
+++ b/src/Components/MasonryLayout/MasonryBox/MasonryBox.module.css
@@ -9,7 +9,7 @@
 }
 
 .my-masonry img:hover {
-  border: 7px solid #004AAD;
+  border: 7px solid #004aad;
 }
 
 .enlargedPhoto {
@@ -26,24 +26,40 @@
 }
 
 .enlargedPhotoImage {
-  max-width: 90%;
-  max-height: 90%;
+  max-width: 50%;
+  max-height: 50%;
 }
 
 .enlargedPhotoText {
   color: black;
   font-size: 18px;
-  margin-top: 20px;
-  padding: 30px;
+  padding: 20px;
   background: linear-gradient(to right, #006dff, rgb(254, 234, 58));
-  float: right;
-  width: 20%;
+  max-width: 50%;
+  width: auto;
   /* adjust the width as needed */
   margin-left: 50px;
   /* adjust the margin as needed */
   text-align: center;
   /* add this property to center the text */
+}
+
+@media (max-width: 640px) {
+  /* When screen & mobile size less than 640px */
+  .enlargedPhoto {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .enlargedPhotoImage {
+    width: auto;
+    height: auto;
+  }
 
+  .enlargedPhotoText {
+    margin: 0;
+    max-width: 100%;
+  }
 }
 
 .enlargedPhotoTextBox {
@@ -73,7 +89,7 @@
   justify-content: center;
   opacity: 0;
   visibility: hidden;
-  transition: .7s;
+  transition: 0.7s;
   background-color: rgba(255, 255, 255, 0.3);
 }
 
@@ -83,7 +99,7 @@
   margin-bottom: 20px;
   column-gap: 20px;
   margin-bottom: -80px;
-  transition: .5s;
+  transition: 0.5s;
 }
 
 .my-masnry-user-prof {
@@ -107,21 +123,20 @@
   font-size: 1.5rem;
   text-transform: capitalize;
   font-weight: bold;
-
 }
 
 .my-masnry-user-prof-desc h1 {
   color: var(--green-400);
-  text-shadow: -1px -1px 5px #FEEA3A, 1px -1px 5px #FEEA3A, -1px 1px 5px #FEEA3A, 1px 1px 5px #FEEA3A;
+  text-shadow: -1px -1px 5px #feea3a, 1px -1px 5px #feea3a, -1px 1px 5px #feea3a,
+    1px 1px 5px #feea3a;
 }
 
-
 .my-masnry-user-prof-desc h3 {
-  color: #FEEA3A;
-  text-shadow: -1px -1px 5px #004AAD, 1px -1px 5px #004AAD, -1px 1px 5px #004AAD, 1px 1px 5px #004AAD;
+  color: #feea3a;
+  text-shadow: -1px -1px 5px #004aad, 1px -1px 5px #004aad, -1px 1px 5px #004aad,
+    1px 1px 5px #004aad;
 }
 
-
 .my-masonry:hover .my-masnry-description {
   visibility: visible;
   opacity: 1;
@@ -131,12 +146,22 @@
   margin-bottom: 15px;
 }
 
+@media (max-width: 640px) {
+  .my-masnry-description {
+    height: auto;
+  }
+  .my-masnry-user-prof {
+    width: 100px;
+    height: 100px;
+  }
+  .my-masnry-user-prof-desc {
+    font-size: 1rem;
+  }
+}
 
 .boldText {
   font-weight: bolder;
   font-size: 25px;
   /* Adjust the font size as desired */
   text-align: center;
-
-
 }
diff --git a/src/Components/Nav/Nav.jsx b/src/Components/Nav/Nav.jsx
index 1b4ce7b1..560f22d4 100644
--- a/src/Components/Nav/Nav.jsx
+++ b/src/Components/Nav/Nav.jsx
@@ -11,7 +11,7 @@ const Nav = () => {
       <img
         src="./img/Logo.gif"
         alt="Before I Die Logo"
-        className="img-fluid"
+        className={styles.imgfluid}
       />
 
       <div className={styles['navbar-buttons']}>
diff --git a/src/Components/Nav/Nav.module.css b/src/Components/Nav/Nav.module.css
index 82ab8331..79dece91 100644
--- a/src/Components/Nav/Nav.module.css
+++ b/src/Components/Nav/Nav.module.css
@@ -1,78 +1,94 @@
 .nav {
-    padding: 40px 40px 0 40px;
-    z-index: 2;
+  padding: 40px 40px 0 40px;
+  z-index: 2;
 }
-.github-link {
-    color: black;
+
+@media (max-width: 769px) {
+  .nav {
+    z-index: 2;
     display: flex;
-    align-items: center;
-    font-size: 30px;
-    font: bolder;
+    flex-direction: column;
   }
+  .imgfluid {
+    width: 100%;
+  }
+  .navbar-buttons {
+  margin: 20px auto;
+  column-gap: 20px;
+}
+}
+
+.github-link {
+  color: black;
+  display: flex;
+  align-items: center;
+  font-size: 30px;
+  font: bolder;
+}
 
 .github-link:hover {
-    color: #006DFF
+  color: #006dff;
 }
 .nav-title {
-    font-size: 1.8rem;
-    color: var(--green-400);
+  font-size: 1.8rem;
+  color: var(--green-400);
 }
 
 .navbar-nav {
-    margin-left: 140px;
-    column-gap: 25px;
+  margin-left: 140px;
+  column-gap: 25px;
 }
 
 .nav-item {
-    color: var(--dark-600);
+  color: var(--dark-600);
 }
 
 .nav-item.active {
-    color: var(--green-white-100);
-    position: relative;
+  color: var(--green-white-100);
+  position: relative;
 }
 
 .nav-item.active::before {
-    content: '';
-    position: absolute;
-    width: 14px;
-    height: 14px;
-    top: 50%;
-    left: -30px;
-    background: var(--green-400);
-    border-radius: 5px;
-    transform: rotate(45deg) translateY(-70%);
+  content: "";
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  top: 50%;
+  left: -30px;
+  background: var(--green-400);
+  border-radius: 5px;
+  transform: rotate(45deg) translateY(-70%);
 }
 
 .nav-link {
-    color: inherit;
+  color: inherit;
 }
 
 .navbar-buttons {
-    margin-left: auto;
-    column-gap: 20px;
+  margin-left: auto;
+  column-gap: 20px;
 }
 
 .navbar-responsive-menu {
-    display: none !important;
+  display: none !important;
 }
 
 @media screen and (max-width: 1100px) {
-    .d-none-1100 {
-        display: none;
-    }
+  .d-none-1100 {
+    display: none;
+  }
 
-    .navbar-responsive-menu {
-        display: block !important;
-    }
+  .navbar-responsive-menu {
+    display: block !important;
+  }
 
-    .navbar-nav {
-        margin-left: 90px;
-    }
+  .navbar-nav {
+    margin-left: 90px;
+  }
 }
 
 @media screen and (max-width: 960px) {
-    .navbar-nav {
-        display: none !important;
-    }
+  .navbar-nav {
+    display: none !important;
+  }
 }