diff --git a/src/App.css b/src/App.css index 701846a..c45f4ad 100644 --- a/src/App.css +++ b/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; + } } diff --git a/src/components/Home.jsx b/src/components/Home.jsx index 83d55a1..fcf7160 100644 --- a/src/components/Home.jsx +++ b/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 (
{ /> setIsExpanded(!isExpanded)} /> - - {isExpanded ? ( - "" - ) : ( - + {!isExpanded && ( + <> + + + + )} - {isExpanded ? ( - "" - ) : ( - - )} - {isExpanded ? ( - "" - ) : ( - )} @@ -77,23 +90,18 @@ const Home = () => { onAnimationEnd={handleAnimationEnd} />
- - + {showLocation && }
); }; diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx index 7a9706b..57e4313 100644 --- a/src/components/Navigation.jsx +++ b/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", diff --git a/src/components/Switch.jsx b/src/components/Switch.jsx index 1be8867..ffb2b25 100644 --- a/src/components/Switch.jsx +++ b/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; `; diff --git a/src/css/GridContainer.css b/src/css/GridContainer.css index ef8caef..c8fa32d 100644 --- a/src/css/GridContainer.css +++ b/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; + } +} diff --git a/src/css/Hero.css b/src/css/Hero.css index 3c7ea8a..5e3286b 100644 --- a/src/css/Hero.css +++ b/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; + } + } diff --git a/src/css/LangSelect.css b/src/css/LangSelect.css index 0d9ffb0..a32a676 100644 --- a/src/css/LangSelect.css +++ b/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; + } +} \ No newline at end of file diff --git a/src/css/Location.css b/src/css/Location.css index 33a307d..70aed6b 100644 --- a/src/css/Location.css +++ b/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; + } +} diff --git a/src/css/Mail.css b/src/css/Mail.css index 59db867..7ee9a9c 100644 --- a/src/css/Mail.css +++ b/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,11 +20,16 @@ font-size: 0.8rem; } - .eMail.light .emailAnchor { color: #333; } .eMail.light .copyright { color: rgb(102, 102, 102); +} + +@media (max-width: 450px) { + .eMail { + grid-area: 19/1/20/4; + } } \ No newline at end of file diff --git a/src/css/Navigation.css b/src/css/Navigation.css index 6a193f7..3a6e093 100644 --- a/src/css/Navigation.css +++ b/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 */ + } + +} \ No newline at end of file diff --git a/src/css/TallContent.css b/src/css/TallContent.css index f25c1e3..50e84f1 100644 --- a/src/css/TallContent.css +++ b/src/css/TallContent.css @@ -3,10 +3,17 @@ position: relative; } + .particleCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; +} + +@media screen and (max-width: 450px) { + .tallContent { + grid-area: 9 / 1 / 16 / 5; + } } \ No newline at end of file diff --git a/src/css/TechStack.css b/src/css/TechStack.css index 4a54de3..23ea8c9 100644 --- a/src/css/TechStack.css +++ b/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; + } +} +