yousifpa/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: yousifpa:292343a3ae3cdd19c76b795e1199c35b8d022de3
Branches Tags
yousifpa:main
..
compare: yousifpa:9bde8111b2191a51b567c96d5827f12c81ff52c1
Branches Tags
yousifpa:main

10 Commits
292343a3ae ... 9bde8111b2

Author SHA1 Message Date
yousifpa98
9bde8111b2 (fix): fix gh links in projects 2025-04-13 00:11:40 +02:00
yousifpa98
a1d98b1375 (update): new pojects && favicon 2025-04-13 00:08:20 +02:00
yousifpa98
9ee3e25f0a (feat): Add satsu tracking script 2025-03-29 21:46:31 +01:00
yousifpa98
d3ec3755c2 added js icon to techstack 2025-01-22 15:59:56 +01:00
yousifpa98
f888ec18d5 readme 2025-01-22 14:24:53 +01:00
yousifpa98
800c99fac8 mobile -450px 2025-01-21 21:49:52 +01:00
yousifpa98
173db8f199 mobile home done 2025-01-15 22:27:31 +01:00
yousifpa98
5519dbd390 👋 in hr tile 2025-01-15 14:32:17 +01:00
yousifpa98
905e541392 page title 2025-01-15 02:34:42 +01:00
yousifpa98
88d095ce5b netlify.toml 2025-01-15 02:33:34 +01:00
30 changed files with 338 additions and 87 deletions
Expand all files Collapse all files

70
README.md
View File

@@ -1,8 +1,68 @@
# React + Vite # Portfolio of Yousif Paulus
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. This is the repository for my portfolio. It serves as a modern, interactive showcase of my projects and skills.
Currently, two official plugins are available: ## Tech Stack
- **Frontend**: React
- **Styling**: [Animate.css](https://animate.style/) (for animations)
- **Backend**: Node.js
- **Font**: Apple's SF Pro
- **Icons**: FontAwesome
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh ## Plugins
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh - [vite-plugin-svgr](https://github.com/pd4d10/vite-plugin-svgr) (for seamless integration of SVGs as React components)
## Hosting
- Hosted on [Netlify](https://www.netlify.com/).
- Live version: [yousifpaulus.dev](https://yousifpaulus.dev).
## Inspiration
The design is inspired by:
- Apple Keynote presentations
- A "tile" theme with dynamic tiles showcasing specific content.
## Features
- Dynamic and interactive tiles presenting content such as projects, skills, and additional information.
- Animations to ensure a smooth and engaging user experience.
- Modern and minimalist design aligned with Apple's aesthetic.
## Development
### Prerequisites
Ensure the following tools are installed:
- Node.js
- Vite
### Installation
1. Clone the repository:
```bash
git clone https://github.com/yousifpa98/portfolio.git
```
2. Navigate to the project directory:
```bash
cd portfolio
```
3. Install dependencies:
```bash
npm install
```
### Start Development
Run the development server:
```bash
npm run dev
```
The portfolio will be accessible at `http://localhost:3000`.
### Build for Production
Create a production build:
```bash
npm run build
```
The built files will be located in the `dist` folder.
## Feedback and Contact
If you have any feedback or wish to get in touch, you can reach me at:
- GitHub: [yousifpa98](https://github.com/yousifpa98)
---
Enjoy exploring my portfolio! 😊

10
index.html
View File

@@ -1,10 +1,14 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title> <script
src="https://cdn.yousifpaulus.dev/tracker.js"
data-site="QoKt2boKTQ"
></script>
<title>Yousif Paulus | Full-Stack Dev.</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

4
netlify.toml Normal file
View File

@@ -0,0 +1,4 @@
[[redirects]]
from = "/*"
to = "/index.html"
status = 200

BIN
public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

8
src/App.css
View File

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

BIN
src/assets/img/projects/deb.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 456 KiB

BIN
src/assets/img/projects/inkspire.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 141 KiB

BIN
src/assets/img/projects/redovolt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

BIN
src/assets/img/projects/satsu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 163 KiB

BIN
src/assets/img/projects/webklar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

2
src/components/Hero.jsx
View File

@@ -16,7 +16,7 @@ const Hero = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
> >
<p> <p>
<span> <span>
{language === "en-GB" ? "Hi, I'm Yousif." : "Hi, ich bin Yousif."}{" "} {language === "en-GB" ? "Hi, I'm Yousif. 👋🏽" : "Hi, ich bin Yousif. 👋🏽"}{" "}
<br /> <br />
</span>{" "} </span>{" "}
{language === "en-GB" {language === "en-GB"

60
src/components/Home.jsx
View File

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

4
src/components/Navigation.jsx
View File

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

30
src/components/Switch.jsx
View File

@@ -21,7 +21,7 @@ const SwitchBtn = styled.button`
`; `;
const SwitchContainer = styled.div` const SwitchContainer = styled.div`
grid-area: 8 / 4 / 10 / 5; grid-area: 8 / 4 / 10 / 5; /* Default grid-area */
transition: background-color 1s ease; transition: background-color 1s ease;
background-color: ${(props) => background-color: ${(props) =>
props.colormode === "dark" ? "#131862" : "#69d0ff"}; props.colormode === "dark" ? "#131862" : "#69d0ff"};
@@ -31,6 +31,18 @@ const SwitchContainer = styled.div`
border: 1px solid border: 1px solid
${(props) => (props.colormode === "dark" ? "#1e2be0" : "#9bdfff")}; ${(props) => (props.colormode === "dark" ? "#1e2be0" : "#9bdfff")};
position: relative; position: relative;
/* Media query for max-width: 450px */
@media (max-width: 450px) {
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)` const StyledSunIcon = styled(SunIcon)`
@@ -63,15 +75,21 @@ const Switch = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
> >
<div className="wrapper"> <div className="wrapper">
<PlanetsContainer rotation={rotation} className="planets"> <PlanetsContainer rotation={rotation} className="planets">
<StyledMoonIcon
colormode={colormode}
className={`moon1 toggleIcon ${
colormode === "dark" ? "setting" : "rising"
}`}
/>
<StyledSunIcon <StyledSunIcon
colormode={colormode} colormode={colormode}
className={`sun1 toggleIcon ${ className={`sun1 toggleIcon ${
colormode === "dark" ? "setting" : "rising" colormode === "dark" ? "rising" : "setting"
}`} }`}
/> />
<StyledMoonIcon <StyledMoonIcon
colormode={colormode} colormode={colormode}
className={`moon1 toggleIcon ${ className={`moon2 toggleIcon ${
colormode === "dark" ? "rising" : "setting" colormode === "dark" ? "rising" : "setting"
}`} }`}
/> />
@@ -81,12 +99,6 @@ const Switch = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
colormode === "dark" ? "setting" : "rising" colormode === "dark" ? "setting" : "rising"
}`} }`}
/> />
<StyledMoonIcon
colormode={colormode}
className={`moon2 toggleIcon ${
colormode === "dark" ? "rising" : "setting"
}`}
/>
</PlanetsContainer> </PlanetsContainer>
</div> </div>
<SwitchBtn <SwitchBtn

8
src/components/TechStack.jsx
View File

@@ -14,6 +14,7 @@ import TailwindIcon from "../assets/icons/skill-icons/icons/TailwindCSS-Dark.svg
import PostgreSQL from "../assets/icons/skill-icons/icons/PostgreSQL-Dark.svg?react"; import PostgreSQL from "../assets/icons/skill-icons/icons/PostgreSQL-Dark.svg?react";
import NestjsIcon from "../assets/icons/skill-icons/icons/NestJS-Dark.svg?react"; import NestjsIcon from "../assets/icons/skill-icons/icons/NestJS-Dark.svg?react";
import Linux from "../assets/icons/skill-icons/icons/Linux-Dark.svg?react"; import Linux from "../assets/icons/skill-icons/icons/Linux-Dark.svg?react";
import JavaScript from "../assets/icons/skill-icons/icons/JavaScript.svg?react";
import "../css/TechStack.css"; import "../css/TechStack.css";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
@@ -92,6 +93,13 @@ const TechStack = ({
id: 14, id: 14,
needExpand: true, needExpand: true,
}, },
{
name: "JavaScript",
component: JavaScript,
className: "jsIcon",
id: 15,
needExpand: true,
},
]; ];
const [animation, setAnimation] = useState(initialAnimation); const [animation, setAnimation] = useState(initialAnimation);

2
src/components/mainViews/Contact.jsx
View File

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

42
src/components/mainViews/Projects.jsx
View File

@@ -12,20 +12,17 @@ import Location from "../Location";
import { useState } from "react"; import { useState } from "react";
import ProjectsMain from "../subComponents/Projects/ProjectsMain"; import ProjectsMain from "../subComponents/Projects/ProjectsMain";
import inkspireImg from "../../assets/img/projects/inkspire.png"; import inkspireImg from "../../assets/img/projects/inkspire.png";
import debImg from "../../assets/img/projects/deb.png"; import redovoltImg from "../../assets/img/projects/redovolt.png";
import animeDBImg from "../../assets/img/projects/animeDB.png"; import satsuImg from "../../assets/img/projects/satsu.png";
import animedbImg1 from "../../assets/img/projects/animedb1.png"; import webklarImg from "../../assets/img/projects/webklar.png";
import animedbImg2 from "../../assets/img/projects/animedb2.png";
import animedbImg3 from "../../assets/img/projects/animedb3.png";
import strogasoImg from "../../assets/img/projects/strogaso.png";
import { useLang } from "../../Context/LangContext"; import { useLang } from "../../Context/LangContext";
const Projects = () => { const Projects = () => {
const {language} = useLang() const { language } = useLang();
const projectArr = [ const projectArr = [
{ {
name: "inkspire.", name: "inkspire",
urls: { ghUrl: "https://github.com/yousifpa98/inkspire" }, urls: { ghUrl: "https://github.com/yousifpa98/inkspire" },
year: "2024", year: "2024",
job: language === "en-GB" ? "freelance" : "freiberuflich", job: language === "en-GB" ? "freelance" : "freiberuflich",
@@ -33,36 +30,33 @@ const {language} = useLang()
id: 1, id: 1,
}, },
{ {
name: "Client Website", name: "Redovolt",
urls: { urls: {
ghUrl: "N/A", liveUrl: "https://redovolt.de/",
liveUrl: "https://druckerei-eberwein.de/",
}, },
year: "2024", year: "2025",
job: language === "en-GB" ? "freelance" : "freiberuflich", job: language === "en-GB" ? "freelance" : "freiberuflich",
imgs: [debImg], imgs: [redovoltImg],
id: 2, id: 2,
}, },
{ {
name: "Otaku Critics", name: "Webklar.app",
urls: { urls: {
ghUrl: "https://github.com/yousifpa98/animeDB-react", liveUrl: "https://www.webklar.app",
liveUrl: "https://otakucritics.netlify.app/",
}, },
year: "2024", year: "2025",
job: language === "en-GB" ? "personal project" : "pers. Projekt", job: language === "en-GB" ? "personal project" : "pers. Projekt",
imgs: [animeDBImg], imgs: [webklarImg],
id: 3, id: 3,
}, },
{ {
name: "Strogaso", name: "Satsu",
urls: { urls: {
ghUrl: "https://github.com/yousifpa98/strogaso-react", liveUrl: "https://www.satsu.pro",
liveUrl: "https://www.strogaso.de",
}, },
year: "2023/24", year: "2025",
job: "Salescape", job: language === "en-GB" ? "personal project" : "pers. Projekt",
imgs: [strogasoImg], imgs: [satsuImg],
id: 4, id: 4,
}, },
]; ];

6
src/css/ContactTile.css
View File

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

33
src/css/GridContainer.css
View File

@@ -53,3 +53,36 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
@media screen and (max-width: 450px) {
.gridContainer {
grid-template-columns: repeat(4, 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: 12 / 3 / 14 / 5;
}
.gridContainer .linkedIn {
grid-area: 12 / 1 / 14 / 3;
}
.gridContainer .linkedIn .linkedInIcon,
.gridContainer .github .githubIcon {
width: 60%;
height: auto;
}
}

7
src/css/Hero.css
View File

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

12
src/css/LangSelect.css
View File

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

10
src/css/Location.css
View File

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

15
src/css/Mail.css
View File

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

16
src/css/Navigation.css
View File

@@ -2,6 +2,7 @@
grid-area: 1 / 9 / 9 / 12; grid-area: 1 / 9 / 9 / 12;
} }
.navList { .navList {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -57,3 +58,18 @@
.navigation.light .navIcon { .navigation.light .navIcon {
fill: #333; 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 */
}
}

11
src/css/ProjectCard.css
View File

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

16
src/css/ProjectsMain.css
View File

@@ -15,3 +15,19 @@
gap: 1rem; gap: 1rem;
width: 100%; 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%;
}
}

8
src/css/Specialties.css
View File

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

7
src/css/TallContent.css
View File

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

7
src/css/TallContentAbout.css
View File

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

13
src/css/TechStack.css
View File

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