mobile home done

src/App.css

@@ -4,5 +4,11 @@ main {
   display: flex;
   align-items: center;
   justify-content: center;
-  /* padding: 2rem; */
+  padding: 2rem;
+}
+
+@media screen and (max-width: 450px) {
+  main {
+    height: fit-content;
+  }
 }

src/components/Home.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Hero from "./Hero";
 import "../css/Home.css";
 import TechStack from "./TechStack";
@@ -10,16 +10,20 @@ import LinkedInIcon from "../assets/icons/socials/linkedin.svg?react";
 import GitHubIcon from "../assets/icons/socials/square-github.svg?react";
 import Location from "./Location";
 import "animate.css";
-import { useState } from "react";
+import { useTheme } from "../Context/ThemeContext";
 import TallContent from "./TallContent";
 import "../css/GridContainer.css";
 
 const Home = () => {
   const [isExpanded, setIsExpanded] = useState(false);
+  const [showLocation, setShowLocation] = useState(window.innerWidth > 450);
+  const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= 450);
+  const { colormode } = useTheme();
 
   const social = (url) => () => {
     window.open(url, "_blank", "noopener,noreferrer");
   };
+
   const [hoverAnimation, setHoverAnimation] = useState("animate__headShake");
 
   const handleMouseEnter = (setAnimation) => {
@@ -29,6 +33,21 @@ const Home = () => {
   const handleAnimationEnd = (setAnimation) => {
     setAnimation(""); // Clear animation to prevent re-triggering
   };
+
+  useEffect(() => {
+    const handleResize = () => {
+      const isSmall = window.innerWidth <= 450;
+      setShowLocation(!isSmall);
+      setIsSmallScreen(isSmall);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   return (
     <div className="gridContainer">
       <Hero
@@ -38,36 +57,30 @@ const Home = () => {
       />
       <TechStack
         initialAnimation="animate__backInLeft"
-        /* onMouseEnter={handleMouseEnter} */
         onAnimationEnd={handleAnimationEnd}
         isExpanded={isExpanded}
         onExpandToggle={() => setIsExpanded(!isExpanded)}
       />
-
+      {!isExpanded && (
-      {isExpanded ? (
+        <>
-        ""
-      ) : (
           <LangSelect
             initialAnimation="animate__zoomIn"
-          /*  onMouseEnter={handleMouseEnter} */
             onAnimationEnd={handleAnimationEnd}
           />
-      )}
-      {isExpanded ? (
-        ""
-      ) : (
           <Mail
             initialAnimation="animate__zoomIn"
-          /*  onMouseEnter={handleMouseEnter} */
             onAnimationEnd={handleAnimationEnd}
           />
-      )}
-      {isExpanded ? (
-        ""
-      ) : (
           <Switch
             initialAnimation="animate__zoomIn"
-          /*  onMouseEnter={handleMouseEnter} */
+            onAnimationEnd={handleAnimationEnd}
+          />
+        </>
+      )}
+      {(!isSmallScreen || !isExpanded) && (
+        <TallContent
+          initialAnimation="animate__flipInY"
+          onMouseEnter={handleMouseEnter}
           onAnimationEnd={handleAnimationEnd}
         />
       )}
@@ -77,23 +90,18 @@ const Home = () => {
         onAnimationEnd={handleAnimationEnd}
       />
       <div
-        className="linkedIn container animate__animated animate__jackInTheBox"
+        className={`linkedIn container animate__animated animate__jackInTheBox `}
         onClick={social("https://www.linkedin.com/in/yousifpaulus/")}
       >
         <LinkedInIcon className="linkedInIcon" />
       </div>
       <div
-        className="github container animate__animated animate__jackInTheBox"
+        className={`github container animate__animated animate__jackInTheBox `}
         onClick={social("https://github.com/yousifpa98")}
       >
         <GitHubIcon className="githubIcon" />
       </div>
-      <Location />
+      {showLocation && <Location />}
-      <TallContent
-        initialAnimation="animate__flipInY"
-        onMouseEnter={handleMouseEnter}
-        onAnimationEnd={handleAnimationEnd}
-      />
     </div>
   );
 };

src/components/Navigation.jsx

@@ -25,12 +25,12 @@ const Navigation = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
       icon: AddressCardIcon,
       id: 2,
     },
-    {
+    /* {
       name: { enGB: "Experience", deDE: "Erfahrung" },
       to: "/workExp",
       icon: SuitcaseIcon,
       id: 3,
-    },
+    }, */
     {
       name: { enGB: "Projects", deDE: "Projekte" },
       to: "/projects",

src/components/Switch.jsx

@@ -31,8 +31,13 @@ const SwitchContainer = styled.div`
   border: 1px solid
     ${(props) => (props.colormode === "dark" ? "#1e2be0" : "#9bdfff")};
   position: relative;
+
+  @media (max-width: 450px) {
+    grid-area: 18 / 4 / 20 / 5;
+  }
 `;
 
+
 const StyledSunIcon = styled(SunIcon)`
   fill: #fff145;
 `;

src/css/GridContainer.css

@@ -53,3 +53,25 @@
   justify-content: center;
   align-items: center;
 }
+
+@media screen and (max-width: 450px) {
+  .gridContainer {
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(19, 1fr);
+    min-width: 350px;
+    width: 100%;
+  }
+
+  .gridContainer .github {
+    grid-area: 16 / 3 / 18 / 5;
+  }
+  .gridContainer .linkedIn {
+    grid-area: 16 / 1 / 18 / 3;
+  }
+
+  .gridContainer .linkedIn .linkedInIcon,
+  .gridContainer .github .githubIcon {
+    width: 60%;
+    height: auto;
+  }
+}

src/css/Hero.css

@@ -4,6 +4,7 @@
   transition: all 0.3s ease;
 }
 
+
 .hero p span {
   color: white;
   font-weight: bold;
@@ -17,3 +18,9 @@
 .hero.light p span {
   color: rgb(40, 40, 40);
 }
+
+@media screen and (max-width: 450px) {
+  .hero {
+   grid-area: 2 / 1 / 5 / 5;
+  }
+ }

src/css/LangSelect.css

@@ -6,7 +6,15 @@
   gap: 1rem;
 }
 
+
+
 .eng,
 .ger {
   font-size: 1.5rem;
 }
+
+@media (max-width: 450px) {
+  .langSelect {
+    grid-area: 18/1/19/4;
+  }
+}

src/css/Location.css

@@ -14,3 +14,13 @@
 .location.light .navIcon {
   fill: #333;
 }
+
+@media screen and (max-width: 450px) {
+  .location {
+    display: none;
+  }
+
+  .location.container {
+    display: none;
+  }
+}

src/css/Mail.css

@@ -4,9 +4,11 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  gap: .5rem;
+  gap: 0.5rem;
 }
 
+
+
 .emailAnchor {
   color: white;
   text-decoration: none;
@@ -18,7 +20,6 @@
   font-size: 0.8rem;
 }
 
-
 .eMail.light .emailAnchor {
   color: #333;
 }
@@ -26,3 +27,9 @@
 .eMail.light .copyright {
   color: rgb(102, 102, 102);
 }
+
+@media (max-width: 450px) {
+  .eMail {
+    grid-area: 19/1/20/4;
+  }
+}

src/css/Navigation.css

@@ -2,6 +2,7 @@
   grid-area: 1 / 9 / 9 / 12;
 }
 
+
 .navList {
   display: flex;
   flex-direction: column;
@@ -57,3 +58,18 @@
 .navigation.light .navIcon {
   fill: #333;
 }
+
+
+@media screen and (max-width: 450px) {
+  .navigation {
+    grid-area: 1/1/2/5;
+  }
+
+  .navList {
+    flex-direction: row;
+  }
+  .navLink span {
+    display: none; /* Hide the text */
+  }
+
+}

src/css/TallContent.css

@@ -3,6 +3,7 @@
   position: relative;
 }
 
+
 .particleCanvas {
   position: absolute;
   top: 0;
@@ -10,3 +11,9 @@
   width: 100%;
   height: 100%;
 }
+
+@media screen and (max-width: 450px) {
+  .tallContent {
+    grid-area: 9 / 1 / 16 / 5;
+  }
+}

src/css/TechStack.css

@@ -111,3 +111,16 @@
   visibility: visible;
   opacity: 1;
 }
+
+
+@media screen and (max-width: 450px) {
+  .techStackContainer {
+    grid-area: 5 / 1 / 9 / 5;
+    max-height: 1110px;
+  }
+
+  .techStackContainer.expanded {
+    grid-area: 5 / 1 / 11 / 5;
+  }
+}
+