BeforeIDieCode · XanderRubio · Aug 29, 2023 · Aug 25, 2023
diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx
@@ -1,15 +1,30 @@
-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"]}>
         Made with{" "}
         <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
@@ -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
@@ -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
@@ -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
@@ -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']}>