mobile -450px

src/components/Switch.jsx

@@ -21,7 +21,7 @@ const SwitchBtn = styled.button`
 `;
 
 const SwitchContainer = styled.div`
-  grid-area: 8 / 4 / 10 / 5;
+  grid-area: 8 / 4 / 10 / 5; /* Default grid-area */
   transition: background-color 1s ease;
   background-color: ${(props) =>
     props.colormode === "dark" ? "#131862" : "#69d0ff"};
@@ -32,12 +32,21 @@ const SwitchContainer = styled.div`
     ${(props) => (props.colormode === "dark" ? "#1e2be0" : "#9bdfff")};
   position: relative;
 
+  /* Media query for max-width: 450px */
   @media (max-width: 450px) {
-    grid-area: 18 / 4 / 20 / 5;
+    grid-area: 14 / 4 / 16 / 5;
+  }
+
+  /* Media query for max-width: 450px when parent has .gridContainer.contact */
+  @media (max-width: 450px) {
+    .gridContainer.contact & {
+      grid-area: 8/4/10/4; /* Custom grid-area for this scenario */
+    }
   }
 `;
 
 
+
 const StyledSunIcon = styled(SunIcon)`
   fill: #fff145;
 `;

src/components/mainViews/Contact.jsx

@@ -26,7 +26,7 @@ const Contact = () => {
     setAnimation(""); // Clear animation to prevent re-triggering
   };
   return (
-    <div className="gridContainer">
+    <div className="gridContainer contact">
       <LangSelect />
       <Mail />
       <Switch />

src/css/ContactTile.css

@@ -161,3 +161,9 @@
     transform: translate(-25%, -25%) rotate(30deg) scale(1.05);
   }
 }
+
+@media screen and (max-width: 450px) {
+  .contactTile {
+    grid-area: 2/1/6/5;
+  }
+}

src/css/GridContainer.css

@@ -57,16 +57,27 @@
 @media screen and (max-width: 450px) {
   .gridContainer {
     grid-template-columns: repeat(4, 1fr);
-    grid-template-rows: repeat(19, 1fr);
+    grid-template-rows: repeat(15, 1fr);
     min-width: 350px;
     width: 100%;
   }
 
+  .gridContainer.contact {
+    grid-template-rows: repeat(9, 1fr);
+  }
+
+  .gridContainer.contact .github {
+    grid-area: 6 / 3 / 8 / 5;
+  }
+  .gridContainer.contact .linkedIn {
+    grid-area: 6 / 1 / 8 / 3;
+  }
+
   .gridContainer .github {
-    grid-area: 16 / 3 / 18 / 5;
+    grid-area: 12 / 3 / 14 / 5;
   }
   .gridContainer .linkedIn {
-    grid-area: 16 / 1 / 18 / 3;
+    grid-area: 12 / 1 / 14 / 3;
   }
 
   .gridContainer .linkedIn .linkedInIcon,

src/css/Hero.css

@@ -21,6 +21,6 @@
 
 @media screen and (max-width: 450px) {
   .hero {
-   grid-area: 2 / 1 / 5 / 5;
+   grid-area: 2 / 1 / 4 / 5;
   }
  }

src/css/LangSelect.css

@@ -15,6 +15,10 @@
 
 @media (max-width: 450px) {
   .langSelect {
-    grid-area: 18/1/19/4;
+    grid-area: 14/1/15/4;
+  }
+
+  .gridContainer.contact .langSelect {
+    grid-area: 8/1/9/4;
   }
 }

src/css/Mail.css

@@ -30,6 +30,10 @@
 
 @media (max-width: 450px) {
   .eMail {
-    grid-area: 19/1/20/4;
+    grid-area: 15/1/16/4;
+  }
+
+  .gridContainer.contact .eMail {
+    grid-area: 9/1/10/4;
   }
 }

src/css/ProjectCard.css

@@ -67,7 +67,8 @@
   gap: 0.5rem;
 }
 
-.projectCard.light .projectInfo h3 span, .projectCard.light .projectJob{
+.projectCard.light .projectInfo h3 span,
+.projectCard.light .projectJob {
   color: rgb(90, 90, 90);
 }
 
@@ -77,4 +78,12 @@
 
 .projectCard.light .socialIcon:hover {
   fill: #6e6e6e;
-}
+}
+
+@media screen and (max-width: 450px) {
+  .projectCard {
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+}

src/css/ProjectsMain.css

@@ -15,3 +15,19 @@
   gap: 1rem;
   width: 100%;
 }
+
+@media screen and (max-width: 450px) {
+  .projectsMain {
+    grid-area: 2/1/12/5;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .projectsDiv {
+    flex-wrap: nowrap;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+  }
+}

src/css/Specialties.css

@@ -11,3 +11,11 @@
 .specialties.light .specialtyText {
   color: #333;
 }
+
+@media screen and (max-width: 450px) {
+  .specialties {
+    grid-area: 4 / 1 / 7 / 5;
+  }
+
+}
+

src/css/TallContent.css

@@ -14,6 +14,6 @@
 
 @media screen and (max-width: 450px) {
   .tallContent {
-    grid-area: 9 / 1 / 16 / 5;
+    grid-area: 7 / 1 / 12 / 5;
   }
 }

src/css/TallContentAbout.css

@@ -39,3 +39,10 @@
 .tallContentAbout.light .funFactList li p {
   color: #333;
 }
+
+@media screen and (max-width: 450px) {
+  .tallContentAbout {
+    grid-area: 7 / 1 / 12 / 5;
+    /* height: fit-content; */
+  }
+}

src/css/TechStack.css

@@ -115,7 +115,7 @@
 
 @media screen and (max-width: 450px) {
   .techStackContainer {
-    grid-area: 5 / 1 / 9 / 5;
+    grid-area: 4 / 1 / 7 / 5;
     max-height: 1110px;
   }