updates

src/content_option.js

@@ -12,7 +12,7 @@ const introdata = {
         third: "Tech Enthusiast",
     },
     description: "I'm passionate about building exceptional digital experiences that make a difference. With expertise in both frontend and backend development, I create scalable and efficient solutions that solve real-world problems.",
-    your_img_url: "https://i.imgur.com/0y00000.png",
+    your_img_url: "/assets/images/new_headshot.png",
 };
 
 const dataabout = {

src/header/style.css

@@ -102,6 +102,7 @@
   top: 0;
   width: 100%;
   visibility: hidden;
+  -webkit-overflow-scrolling: touch;
 }
 
 .menu__opend {
@@ -161,14 +162,71 @@
   position: relative;
   width: 100%;
   height: 100%;
-  overflow: hidden auto;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 .the_menu {
-  padding-top: 40vh;
+  padding-top: 20vh;
   padding-bottom: 10vh;
   padding-left: 0;
   text-align: center;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.the_menu .menu_item {
+  margin: 0.5rem 0;
+}
+
+.the_menu .menu_item > a {
+  color: var(--text-color-2);
+  line-height: 1.2;
+  font-size: 2rem;
+  display: inline-block;
+  position: relative;
+  transition: color 250ms cubic-bezier(0, 0, 0.58, 1) 0s;
+  padding: 0.5rem 0;
+  text-decoration: none;
+  font-family: Marcellus;
+}
+
+@media (max-width: 767px) {
+  .the_menu {
+    padding-top: 15vh;
+  }
+
+  .the_menu .menu_item > a {
+    font-size: 1.8rem;
+    padding: 0.4rem 0;
+  }
+
+  .menu__wrapper {
+    padding-bottom: 70px; /* Add space for menu footer */
+  }
+
+  .site__navigation {
+    position: fixed;
+    height: 100vh;
+    height: -webkit-fill-available;
+  }
+
+  .menu_footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 1rem;
+    z-index: 1000;
+  }
+}
+
+@media (min-width: 768px) {
+  .the_menu .menu_item > a {
+    font-size: 3.5vw;
+  }
 }
 
 @media (min-width: 992px) {
@@ -177,30 +235,18 @@
     text-align: center;
   }
   .the_menu {
-    padding-top: 30vh;
+    padding-top: 25vh;
-    padding-bottom: 10vh;
   }
 }
 
-.the_menu .menu_item > a {
+/* Fix for iOS Safari bottom bar */
-  color: var(--text-color-2);
+@supports (-webkit-touch-callout: none) {
-  line-height: 1;
+  .site__navigation {
-  font-size: 2rem;
+    height: -webkit-fill-available;
-  display: inline-block;
+  }
-  position: relative;
-  transition: color 250ms cubic-bezier(0, 0, 0.58, 1) 0s;
-  padding: 4px 0px;
-  text-decoration: none;
-  font-family: Marcellus;
-}
 
-.the_menu .menu_item > a:hover {
+  .menu__wrapper {
-  color: var(--text-color-3);
+    height: -webkit-fill-available;
-}
-
-@media (min-width: 768px) {
-  .the_menu .menu_item > a {
-    font-size: 4.8vw;
   }
 }
 

src/pages/home/index.js

@@ -47,14 +47,14 @@ export const Home = () => {
         <div className="intro_sec d-block d-lg-flex align-items-center ">
           <div
             className="h_bg-image order-1 order-lg-2 h-100 "
-            style={{ backgroundImage: `url(/assets/images/Image%20with%20Background%20Removed.png)` }}
+            style={{ backgroundImage: `url(/assets/images/new_headshot.png)` }}
           ></div>
           <div className="text order-2 order-lg-1 h-100 d-lg-flex justify-content-center">
             <div className="align-self-center ">
               <div className="intro mx-auto">
                 <div
                   className="mobile-image d-lg-none"
-                  style={{ backgroundImage: `url(/assets/images/Image%20with%20Background%20Removed.png)` }}
+                  style={{ backgroundImage: `url(/assets/images/new_headshot.png)` }}
                 ></div>
                 <h2 className="mb-1x">{introdata.title}</h2>
                 <h1 className="fluidz-48 mb-1x">

src/pages/home/style.css

@@ -65,8 +65,8 @@ section {
     font-size: 14px;
   }
 
-  .intro_sec > .h_bg-image {
+  .intro_sec .h_bg-image {
-    display: none;
+    display: none !important;
   }
 
   .intro_sec .mobile-image {
@@ -77,11 +77,12 @@ section {
     overflow: hidden;
     position: relative;
     background-size: cover;
-    background-position: center 30%;
+    background-position: center;
+    background-repeat: no-repeat;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-    background-color: var(--image-container-bg);
+    background-color: transparent;
     border: 3px solid var(--secondary-color);
-    filter: saturate(0.5);
+    display: block;
   }
 
   .intro_btn-action {
@@ -177,7 +178,8 @@ section {
 
 .intro_sec .h_bg-image {
   background-size: cover;
-  background-position: center 30%;
+  background-position: center;
+  background-repeat: no-repeat;
   min-height: 700px;
   position: relative;
   max-width: 600px;
@@ -186,8 +188,9 @@ section {
   overflow: hidden;
   margin: 0 auto;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-  background-color: var(--image-container-bg);
+  background-color: transparent;
   border: 0.5px solid var(--secondary-color);
+  display: block;
 }
 
 .ac_btn {
@@ -289,6 +292,42 @@ section {
   }
 }
 
-.intro_sec .h_bg-image {
+.intro_sec .mobile-image {
-  filter: saturate(0.5);
+  width: 250px;
+  height: 250px;
+  margin: 0 auto 20px;
+  border-radius: 50%;
+  overflow: hidden;
+  position: relative;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  background-color: transparent;
+  border: 3px solid var(--secondary-color);
+  display: block;
+}
+
+/* Desktop styles */
+@media (min-width: 992px) {
+  .intro_sec .mobile-image {
+    display: none !important;
+  }
+
+  .intro_sec .h_bg-image {
+    display: block;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    min-height: 700px;
+    position: relative;
+    max-width: 600px;
+    max-height: 600px;
+    border-radius: 20px;
+    overflow: hidden;
+    margin: 0 auto;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    background-color: transparent;
+    border: 0.5px solid var(--secondary-color);
+  }
 }