media queries added

src/App.css

@@ -9,11 +9,24 @@
 }
 main {
   width: 1200px;
-  height: 1200px;
+  max-width: calc(90% - 2 * var(--gap));
   margin-top: 100px;
 }
 
 section {
   position: relative;
   margin-bottom: 120px;
 }
+
+@media screen and (max-width: 1280px) {
+  main {
+    width: calc(90% - 2 * var(--gap));
+  }
+}
+
+@media screen and (max-width: 780px) {
+  main {
+    max-width: calc(100% - 2 * var(--gap));
+    width: calc(100% - 2 * var(--gap));
+  }
+}

src/App.jsx

@@ -13,6 +13,9 @@ function App() {
   const [activeLink, setActiveLink] = useState("#home");
 
   const handleLinkClick = (link) => {
+    if (document.getElementById("hamburger-menu").classList.contains("close")) {
+      document.getElementById("hamburger-menu").click();
+    }
     setActiveLink(link);
   };
   return (

src/components/About/About.scss

@@ -34,3 +34,30 @@
     }
   }
 }
+
+@media screen and (max-width: 1080px) {
+  #about-container {
+    align-items: center;
+  }
+  #about-container #about-hero {
+    width: calc(90% - 2 * var(--gap));
+    flex-direction: column;
+    gap: calc(3 * var(--gap));
+
+    #about-img {
+      height: auto;
+      img {
+        width: 100%;
+      }
+    }
+    #about-info {
+      max-width: 100%;
+    }
+  }
+}
+
+@media screen and (max-width: 780px) {
+  #about-container #about-hero {
+    width: 100%;
+  }
+}

src/components/Contact/Contact.scss

@@ -23,3 +23,16 @@
     }
   }
 }
+
+@media screen and (max-width: 1080px) {
+  #contact-container {
+    margin: 0px auto;
+    width: calc(90% - 2 * var(--gap));
+  }
+}
+
+@media screen and (max-width: 780px) {
+  #contact-container {
+    width: 100%;
+  }
+}

src/components/Header/Header.jsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import "./Header.scss";
 
 const Header = (props) => {

src/components/Header/Header.scss

@@ -89,7 +89,7 @@ header {
   display: none;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 780px) {
   header {
     nav {
       border-radius: var(--border-radius) 0px 0px var(--border-radius);

src/components/Hero/Hero.scss

@@ -23,3 +23,38 @@
   position: absolute;
   top: 0px;
 }
+
+@media screen and (max-width: 1080px) {
+  #hero h1 {
+    font-size: 6rem;
+  }
+  #hero h2 {
+    font-size: 3.5rem;
+  }
+}
+
+@media screen and (max-width: 780px) {
+  #hero h1 {
+    font-size: 5rem;
+  }
+  #hero h2 {
+    font-size: 3rem;
+  }
+}
+@media screen and (max-width: 615px) {
+  #hero h1 {
+    font-size: 4rem;
+  }
+  #hero h2 {
+    font-size: 2rem;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  #hero h1 {
+    font-size: 3rem;
+  }
+  #hero h2 {
+    font-size: 1.6rem;
+  }
+}

src/components/Projects/Projects.scss

@@ -265,3 +265,36 @@
   display: block;
   height: 90px; /* Height equal to the offset you want */
 }
+
+@media screen and (max-width: 1080px) {
+  #about-container #about-hero {
+    flex-direction: row;
+  }
+  #projects-container #projects-hero #projects-titles {
+    flex-direction: column;
+  }
+  .project-container {
+    .project-image-container {
+      width: calc(90% - 2 * var(--gap));
+    }
+    .project-info-container {
+      width: calc(90% - 2 * var(--gap));
+    }
+    flex-direction: column;
+    height: auto;
+    &.reversed-flex-direction {
+      flex-direction: column;
+    }
+  }
+}
+
+@media screen and (max-width: 780px) {
+  .project-container {
+    .project-image-container {
+      width: 100%;
+    }
+    .project-info-container {
+      width: 100%;
+    }
+  }
+}

src/components/Settings/Settings.scss

@@ -37,5 +37,15 @@
   }
 }
 
-@media (prefers-color-scheme: Dark) {
+@media screen and (max-width: 780px) {
+  #settings-bar {
+    z-index: 999;
+    top: 20px;
+    right: 100px;
+    bottom: auto;
+    left: auto;
+    #mode-text-container {
+      display: none;
+    }
+  }
 }

src/components/Skills/Skills.scss

@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
   gap: calc(5 * var(--gap));
 
   #skills-list {
@@ -39,3 +39,16 @@
     }
   }
 }
+
+@media screen and (max-width: 1080px) {
+  #skills-container {
+    margin: 0px auto 120px;
+    width: calc(90% - 2 * var(--gap));
+  }
+}
+
+@media screen and (max-width: 780px) {
+  #skills-container {
+    width: 100%;
+  }
+}