diff --git a/src/assets/icons/socials/globe.svg b/src/assets/icons/socials/globe.svg new file mode 100644 index 0000000..c4f9553 --- /dev/null +++ b/src/assets/icons/socials/globe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/img/projects/animedb1.png b/src/assets/img/projects/animedb1.png new file mode 100644 index 0000000..fb90e03 Binary files /dev/null and b/src/assets/img/projects/animedb1.png differ diff --git a/src/assets/img/projects/animedb2.png b/src/assets/img/projects/animedb2.png new file mode 100644 index 0000000..0095e85 Binary files /dev/null and b/src/assets/img/projects/animedb2.png differ diff --git a/src/assets/img/projects/animedb3.png b/src/assets/img/projects/animedb3.png new file mode 100644 index 0000000..65cf8d6 Binary files /dev/null and b/src/assets/img/projects/animedb3.png differ diff --git a/src/assets/img/projects/deb.png b/src/assets/img/projects/deb.png new file mode 100644 index 0000000..c1927c5 Binary files /dev/null and b/src/assets/img/projects/deb.png differ diff --git a/src/assets/img/projects/inkspire.png b/src/assets/img/projects/inkspire.png new file mode 100644 index 0000000..b7719f1 Binary files /dev/null and b/src/assets/img/projects/inkspire.png differ diff --git a/src/assets/img/projects/strogaso.png b/src/assets/img/projects/strogaso.png new file mode 100644 index 0000000..26cc386 Binary files /dev/null and b/src/assets/img/projects/strogaso.png differ diff --git a/src/components/LangSelect.jsx b/src/components/LangSelect.jsx index d331def..3965fc6 100644 --- a/src/components/LangSelect.jsx +++ b/src/components/LangSelect.jsx @@ -8,7 +8,7 @@ const LangSelect = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => { return (
onMouseEnter(setAnimation)} + /* onMouseEnter={() => onMouseEnter(setAnimation)} */ onAnimationEnd={() => onAnimationEnd(setAnimation)} >
🇬🇧
diff --git a/src/components/Mail.jsx b/src/components/Mail.jsx index cedddad..aac2a31 100644 --- a/src/components/Mail.jsx +++ b/src/components/Mail.jsx @@ -1,16 +1,23 @@ import React from "react"; import "../css/Mail.css"; import { useState } from "react"; +import EnvelopeIcon from "../assets/icons/navIcons/envelope.svg?react"; const Mail = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => { const [animation, setAnimation] = useState(initialAnimation); + const emailUser = "yousif.paulus"; + const domain = "hotmail.de"; return (
onMouseEnter(setAnimation)} + /* onMouseEnter={() => onMouseEnter(setAnimation)} */ onAnimationEnd={() => onAnimationEnd(setAnimation)} > - Mail + {`${emailUser}@${domain}`} +

© 2025 | Yousif Paulus

); }; diff --git a/src/components/Switch.jsx b/src/components/Switch.jsx index e53dcb5..86d76f4 100644 --- a/src/components/Switch.jsx +++ b/src/components/Switch.jsx @@ -6,7 +6,10 @@ import "animate.css"; const Switch = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => { const [animation, setAnimation] = useState(initialAnimation); return ( -
+
onAnimationEnd(setAnimation)} + > switch
); diff --git a/src/components/TechStack.jsx b/src/components/TechStack.jsx index 2cee298..e5c15b9 100644 --- a/src/components/TechStack.jsx +++ b/src/components/TechStack.jsx @@ -21,7 +21,7 @@ import "animate.css"; const TechStack = ({ initialAnimation, - onMouseEnter, + /* onMouseEnter, */ onAnimationEnd, isExpanded, onExpandToggle, // Receive the handler as a prop @@ -105,7 +105,7 @@ const TechStack = ({ animation, { expanded: isExpanded } // Conditional class )} - onMouseEnter={() => onMouseEnter(setAnimation)} + /* onMouseEnter={() => onMouseEnter(setAnimation)} */ onAnimationEnd={() => onAnimationEnd(setAnimation)} >

Tech Stack

diff --git a/src/components/mainViews/About.jsx b/src/components/mainViews/About.jsx index ac8d6bf..8eb4373 100644 --- a/src/components/mainViews/About.jsx +++ b/src/components/mainViews/About.jsx @@ -36,7 +36,7 @@ const About = () => { /> - + { - return ( -
Projects
- ) -} + const projectArr = [ + { + name: "inkspire.", + urls: { ghUrl: "https://github.com/yousifpa98/inkspire" }, + year: "2024", + job: "freelance", + imgs: [inkspireImg], + id: 1, + }, + { + name: "Client Website", + urls: { + ghUrl: "N/A", + liveUrl: "https://druckerei-eberwein.de/", + }, + year: "2024", + job: "freelance", + imgs: [debImg], + id: 2, + }, + { + name: "Otaku Critics", + urls: { + ghUrl: "https://github.com/yousifpa98/animeDB-react", + liveUrl: "https://otakucritics.netlify.app/", + }, + year: "2024", + job: "personal project", + imgs: [animedbImg1, animedbImg2, animedbImg3], + id: 3, + }, + { + name: "strogaso", + urls: { + ghUrl: "https://github.com/yousifpa98/strogaso-react", + liveUrl: "https://www.strogaso.de", + }, + year: "2023/24", + job: "Salescape", + imgs: [strogasoImg], + id: 4, + }, + ]; -export default Projects \ No newline at end of file + const social = (url) => () => { + window.open(url, "_blank", "noopener,noreferrer"); + }; + const [hoverAnimation, setHoverAnimation] = useState("animate__headShake"); + + const handleMouseEnter = (setAnimation) => { + setAnimation(hoverAnimation); // Trigger hover animation + }; + + const handleAnimationEnd = (setAnimation) => { + setAnimation(""); // Clear animation to prevent re-triggering + }; + return ( +
+ + +
+ +
+
+ +
+ + + + +
+ ); +}; + +export default Projects; diff --git a/src/components/subComponents/Projects/ProjectCard.jsx b/src/components/subComponents/Projects/ProjectCard.jsx new file mode 100644 index 0000000..f52790a --- /dev/null +++ b/src/components/subComponents/Projects/ProjectCard.jsx @@ -0,0 +1,52 @@ +import React from "react"; +import "../../../css/ProjectCard.css"; +import GitHubIcon from "../../../assets/icons/socials/square-github.svg?react"; +import GlobeIcon from "../../../assets/icons/socials/globe.svg?react"; + +const ProjectCard = ({ project }) => { + return ( +
+
1 ? "imgs" : "img"}> + {project.imgs.map((img, index) => ( + {`${project.name} 1 + ? { width: `${100 / project.imgs.length}%` } + : {} + } + /> + ))} +
+ +
+

+ {project.name} ({project.year}) +

+

{project.job}

+
+ {Object.entries(project.urls).map(([key, value]) => { + // Determine the correct icon to render based on the key + const Icon = key === "ghUrl" ? GitHubIcon : GlobeIcon; + + return ( + + + + ); + })} +
+
+
+ ); +}; + +export default ProjectCard; diff --git a/src/components/subComponents/Projects/ProjectsMain.jsx b/src/components/subComponents/Projects/ProjectsMain.jsx new file mode 100644 index 0000000..84cfb10 --- /dev/null +++ b/src/components/subComponents/Projects/ProjectsMain.jsx @@ -0,0 +1,30 @@ +import React from "react"; +import "../../../css/ProjectsMain.css"; +import { useState } from "react"; +import ProjectCard from "./ProjectCard"; + +const ProjectsMain = ({ + initialAnimation, + onMouseEnter, + onAnimationEnd, + projects, +}) => { + const [animation, setAnimation] = useState(initialAnimation); + + return ( +
onMouseEnter(setAnimation)} */ + onAnimationEnd={() => onAnimationEnd(setAnimation)} + > +

Some of my latest projects:

+
+ {projects.map((project) => ( + + ))} +
+
+ ); +}; + +export default ProjectsMain; diff --git a/src/css/Mail.css b/src/css/Mail.css index d965571..1f7c4b5 100644 --- a/src/css/Mail.css +++ b/src/css/Mail.css @@ -1,3 +1,19 @@ .eMail { grid-area: 9 / 1 / 10 / 4; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: .5rem; +} + +.emailAnchor { + color: white; + text-decoration: none; + border-bottom: 1px solid; +} + +.copyright { + color: rgb(151, 151, 151); + font-size: 0.8rem; } diff --git a/src/css/ProjectCard.css b/src/css/ProjectCard.css new file mode 100644 index 0000000..d8ff639 --- /dev/null +++ b/src/css/ProjectCard.css @@ -0,0 +1,53 @@ +.projectCard { + width: 33%; + /* height: 200px; */ +} + +.imgs, +.img { + display: flex; + align-items: center; + justify-content: center; +} + +.img img { + width: 100%; +} + +.img img, +.imgs img { + box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2); + margin-bottom: 0.245rem; +} + +.projectInfo h3 { + color: white; +} + +.projectInfo h3 span { + color: rgb(151, 151, 151); + font-size: 1rem; +} + +.projectJob { + color: rgb(151, 151, 151); + margin-bottom: 0.25rem; +} + +.socialIcon { + width: 1.5rem; + height: auto; + fill: white; + transition: fill 0.5s ease; +} + +.socialIcon:hover { + fill: black; +} + +.projectLinks { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 0.5rem; +} diff --git a/src/css/ProjectsMain.css b/src/css/ProjectsMain.css new file mode 100644 index 0000000..a9dba69 --- /dev/null +++ b/src/css/ProjectsMain.css @@ -0,0 +1,17 @@ +.projectsMain { + grid-area: 1 / 1 / 8 / 9; + display: flex; + + align-items: center; + justify-content: center; + flex-direction: column; + gap: 1.5rem; +} + +.projectsDiv { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 1rem; +} diff --git a/src/css/TallContentAbout.css b/src/css/TallContentAbout.css index 3e431eb..6bb4bf8 100644 --- a/src/css/TallContentAbout.css +++ b/src/css/TallContentAbout.css @@ -23,6 +23,10 @@ gap: 0.5rem; } +.funFactList li::marker { + color: white; +} + .funFactList li p { color: rgb(151, 151, 151); }