113 lines
3.3 KiB
JavaScript
113 lines
3.3 KiB
JavaScript
import React from "react";
|
|
import "../../css/Home.css";
|
|
import "animate.css";
|
|
import "../../css/GridContainer.css";
|
|
import LangSelect from "../LangSelect";
|
|
import Mail from "../Mail";
|
|
import Switch from "../Switch";
|
|
import Navigation from "../Navigation";
|
|
import LinkedInIcon from "../../assets/icons/socials/linkedin.svg?react";
|
|
import GitHubIcon from "../../assets/icons/socials/square-github.svg?react";
|
|
import Location from "../Location";
|
|
import { useState } from "react";
|
|
import ProjectsMain from "../subComponents/Projects/ProjectsMain";
|
|
import inkspireImg from "../../assets/img/projects/inkspire.png";
|
|
import debImg from "../../assets/img/projects/deb.png";
|
|
import animeDBImg from "../../assets/img/projects/animeDB.png";
|
|
import animedbImg1 from "../../assets/img/projects/animedb1.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";
|
|
|
|
const Projects = () => {
|
|
const {language} = useLang()
|
|
|
|
const projectArr = [
|
|
{
|
|
name: "inkspire.",
|
|
urls: { ghUrl: "https://github.com/yousifpa98/inkspire" },
|
|
year: "2024",
|
|
job: language === "en-GB" ? "freelance" : "freiberuflich",
|
|
imgs: [inkspireImg],
|
|
id: 1,
|
|
},
|
|
{
|
|
name: "Client Website",
|
|
urls: {
|
|
ghUrl: "N/A",
|
|
liveUrl: "https://druckerei-eberwein.de/",
|
|
},
|
|
year: "2024",
|
|
job: language === "en-GB" ? "freelance" : "freiberuflich",
|
|
imgs: [debImg],
|
|
id: 2,
|
|
},
|
|
{
|
|
name: "Otaku Critics",
|
|
urls: {
|
|
ghUrl: "https://github.com/yousifpa98/animeDB-react",
|
|
liveUrl: "https://otakucritics.netlify.app/",
|
|
},
|
|
year: "2024",
|
|
job: language === "en-GB" ? "personal project" : "pers. Projekt",
|
|
imgs: [animeDBImg],
|
|
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,
|
|
},
|
|
];
|
|
|
|
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 (
|
|
<div className="gridContainer">
|
|
<Navigation />
|
|
<Location />
|
|
<div
|
|
className="linkedIn container"
|
|
onClick={social("https://www.linkedin.com/in/yousifpaulus/")}
|
|
>
|
|
<LinkedInIcon className="linkedInIcon" />
|
|
</div>
|
|
<div
|
|
className="github container"
|
|
onClick={social("https://github.com/yousifpa98")}
|
|
>
|
|
<GitHubIcon className="githubIcon" />
|
|
</div>
|
|
<Switch />
|
|
<Mail />
|
|
<LangSelect />
|
|
<ProjectsMain
|
|
projects={projectArr}
|
|
initialAnimation="animate__bounceInDown"
|
|
onMouseEnter={handleMouseEnter}
|
|
onAnimationEnd={handleAnimationEnd}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Projects;
|