(fix): fix gh links in projects

(update): new pojects && favicon
(feat): Add satsu tracking script
2025-04-13 00:11:40 +02:00 · 2025-04-13 00:08:20 +02:00 · 2025-03-29 21:46:31 +01:00 · 2025-01-22 15:59:56 +01:00 · 2025-01-22 14:24:53 +01:00 · 2025-01-21 21:49:52 +01:00
30 changed files with 338 additions and 87 deletions
--- a/README.md
+++ b/README.md
@@ -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
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Plugins
+- [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! 😊
--- a/index.html
+++ b/index.html
@@ -1,10 +1,14 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
  <head>
    <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" />
-    <title>Vite + React</title>
+    <script
+      src="https://cdn.yousifpaulus.dev/tracker.js"
+      data-site="QoKt2boKTQ"
+    ></script>
+    <title>Yousif Paulus | Full-Stack Dev.</title>
  </head>
  <body>
    <div id="root"></div>
--- a/netlify.toml
+++ b/netlify.toml
@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
--- a/public/favicon.png
+++ b/public/favicon.png
--- 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;
+  }
 }
--- a/src/assets/img/projects/deb.png
+++ b/src/assets/img/projects/deb.png
--- a/src/assets/img/projects/inkspire.png
+++ b/src/assets/img/projects/inkspire.png
--- a/src/assets/img/projects/redovolt.png
+++ b/src/assets/img/projects/redovolt.png
--- a/src/assets/img/projects/satsu.png
+++ b/src/assets/img/projects/satsu.png
--- a/src/assets/img/projects/webklar.png
+++ b/src/assets/img/projects/webklar.png
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -16,7 +16,7 @@ const Hero = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
    >
      <p>
        <span>
-          {language === "en-GB" ? "Hi, I'm Yousif." : "Hi, ich bin Yousif."}{" "}
+          {language === "en-GB" ? "Hi, I'm Yousif. 👋🏽" : "Hi, ich bin Yousif. 👋🏽"}{" "}
          <br />
        </span>{" "}
        {language === "en-GB"
--- 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 (
    <div className="gridContainer">
      <Hero
@@ -38,36 +57,30 @@ const Home = () => {
      />
      <TechStack
        initialAnimation="animate__backInLeft"
-        /* onMouseEnter={handleMouseEnter} */
        onAnimationEnd={handleAnimationEnd}
        isExpanded={isExpanded}
        onExpandToggle={() => setIsExpanded(!isExpanded)}
      />
-
-      {isExpanded ? (
-        ""
-      ) : (
-        <LangSelect
-          initialAnimation="animate__zoomIn"
-          /*  onMouseEnter={handleMouseEnter} */
-          onAnimationEnd={handleAnimationEnd}
-        />
+      {!isExpanded && (
+        <>
+          <LangSelect
+            initialAnimation="animate__zoomIn"
+            onAnimationEnd={handleAnimationEnd}
+          />
+          <Mail
+            initialAnimation="animate__zoomIn"
+            onAnimationEnd={handleAnimationEnd}
+          />
+          <Switch
+            initialAnimation="animate__zoomIn"
+            onAnimationEnd={handleAnimationEnd}
+          />
+        </>
      )}
-      {isExpanded ? (
-        ""
-      ) : (
-        <Mail
-          initialAnimation="animate__zoomIn"
-          /*  onMouseEnter={handleMouseEnter} */
-          onAnimationEnd={handleAnimationEnd}
-        />
-      )}
-      {isExpanded ? (
-        ""
-      ) : (
-        <Switch
-          initialAnimation="animate__zoomIn"
-          /*  onMouseEnter={handleMouseEnter} */
+      {(!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 />
-      <TallContent
-        initialAnimation="animate__flipInY"
-        onMouseEnter={handleMouseEnter}
-        onAnimationEnd={handleAnimationEnd}
-      />
+      {showLocation && <Location />}
    </div>
  );
 };
--- 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",
--- a/src/components/Switch.jsx
+++ b/src/components/Switch.jsx
@@ -21,7 +21,7 @@ const SwitchBtn = styled.button`
 `;

 const SwitchContainer = styled.div`
-  grid-area: 8 / 4 / 10 / 5;
+  grid-area: 8 / 4 / 10 / 5; /* Default grid-area */
  transition: background-color 1s ease;
  background-color: ${(props) =>
    props.colormode === "dark" ? "#131862" : "#69d0ff"};
@@ -31,6 +31,18 @@ const SwitchContainer = styled.div`
  border: 1px solid
    ${(props) => (props.colormode === "dark" ? "#1e2be0" : "#9bdfff")};
  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)`
@@ -63,15 +75,21 @@ const Switch = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
    >
      <div className="wrapper">
        <PlanetsContainer rotation={rotation} className="planets">
+          <StyledMoonIcon
+            colormode={colormode}
+            className={`moon1 toggleIcon ${
+              colormode === "dark" ? "setting" : "rising"
+            }`}
+          />
          <StyledSunIcon
            colormode={colormode}
            className={`sun1 toggleIcon ${
-              colormode === "dark" ? "setting" : "rising"
+              colormode === "dark" ? "rising" : "setting"
            }`}
          />
          <StyledMoonIcon
            colormode={colormode}
-            className={`moon1 toggleIcon ${
+            className={`moon2 toggleIcon ${
              colormode === "dark" ? "rising" : "setting"
            }`}
          />
@@ -81,12 +99,6 @@ const Switch = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
              colormode === "dark" ? "setting" : "rising"
            }`}
          />
-          <StyledMoonIcon
-            colormode={colormode}
-            className={`moon2 toggleIcon ${
-              colormode === "dark" ? "rising" : "setting"
-            }`}
-          />
        </PlanetsContainer>
      </div>
      <SwitchBtn
--- a/src/components/TechStack.jsx
+++ b/src/components/TechStack.jsx
@@ -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 NestjsIcon from "../assets/icons/skill-icons/icons/NestJS-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 { Link } from "react-router-dom";
@@ -92,6 +93,13 @@ const TechStack = ({
      id: 14,
      needExpand: true,
    },
+    {
+      name: "JavaScript",
+      component: JavaScript,
+      className: "jsIcon",
+      id: 15,
+      needExpand: true,
+    },
  ];

  const [animation, setAnimation] = useState(initialAnimation);
--- a/src/components/mainViews/Contact.jsx
+++ b/src/components/mainViews/Contact.jsx
@@ -26,7 +26,7 @@ const Contact = () => {
    setAnimation(""); // Clear animation to prevent re-triggering
  };
  return (
-    <div className="gridContainer">
+    <div className="gridContainer contact">
      <LangSelect />
      <Mail />
      <Switch />
--- a/src/components/mainViews/Projects.jsx
+++ b/src/components/mainViews/Projects.jsx
@@ -12,57 +12,51 @@ 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 redovoltImg from "../../assets/img/projects/redovolt.png";
+import satsuImg from "../../assets/img/projects/satsu.png";
+import webklarImg from "../../assets/img/projects/webklar.png";
 import { useLang } from "../../Context/LangContext";

 const Projects = () => {
-const {language} = useLang()
+  const { language } = useLang();

  const projectArr = [
    {
-      name: "inkspire.",
+      name: "inkspire",
      urls: { ghUrl: "https://github.com/yousifpa98/inkspire" },
      year: "2024",
      job: language === "en-GB" ? "freelance" : "freiberuflich",
-      imgs: [inkspireImg], 
+      imgs: [inkspireImg],
      id: 1,
    },
    {
-      name: "Client Website",
+      name: "Redovolt",
      urls: {
-        ghUrl: "N/A",
-        liveUrl: "https://druckerei-eberwein.de/",
+        liveUrl: "https://redovolt.de/",
      },
-      year: "2024",
+      year: "2025",
      job: language === "en-GB" ? "freelance" : "freiberuflich",
-      imgs: [debImg],
+      imgs: [redovoltImg],
      id: 2,
    },
    {
-      name: "Otaku Critics",
+      name: "Webklar.app",
      urls: {
-        ghUrl: "https://github.com/yousifpa98/animeDB-react",
-        liveUrl: "https://otakucritics.netlify.app/",
+        liveUrl: "https://www.webklar.app",
      },
-      year: "2024",
+      year: "2025",
      job: language === "en-GB" ? "personal project" : "pers. Projekt",
-      imgs: [animeDBImg],
+      imgs: [webklarImg],
      id: 3,
    },
    {
-      name: "Strogaso",
+      name: "Satsu",
      urls: {
-        ghUrl: "https://github.com/yousifpa98/strogaso-react",
-        liveUrl: "https://www.strogaso.de",
+        liveUrl: "https://www.satsu.pro",
      },
-      year: "2023/24",
-      job: "Salescape",
-      imgs: [strogasoImg],
+      year: "2025",
+      job: language === "en-GB" ? "personal project" : "pers. Projekt",
+      imgs: [satsuImg],
      id: 4,
    },
  ];
@@ -79,7 +73,7 @@ const {language} = useLang()
  const handleAnimationEnd = (setAnimation) => {
    setAnimation(""); // Clear animation to prevent re-triggering
  };
-  
+
  return (
    <div className="gridContainer">
      <Navigation />
--- a/src/css/ContactTile.css
+++ b/src/css/ContactTile.css
@@ -161,3 +161,9 @@
    transform: translate(-25%, -25%) rotate(30deg) scale(1.05);
  }
 }
+
+@media screen and (max-width: 450px) {
+  .contactTile {
+    grid-area: 2/1/6/5;
+  }
+}
--- a/src/css/GridContainer.css
+++ b/src/css/GridContainer.css
@@ -53,3 +53,36 @@
  justify-content: 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;
+  }
+}
--- 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 / 4 / 5;
+  }
+ }
--- a/src/css/LangSelect.css
+++ b/src/css/LangSelect.css
@@ -6,7 +6,19 @@
  gap: 1rem;
 }

+
+
 .eng,
 .ger {
  font-size: 1.5rem;
 }
+
+@media (max-width: 450px) {
+  .langSelect {
+    grid-area: 14/1/15/4;
+  }
+
+  .gridContainer.contact .langSelect {
+    grid-area: 8/1/9/4;
+  }
+}
--- 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;
+  }
+}
--- 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,20 @@
  font-size: 0.8rem;
 }

-
 .eMail.light .emailAnchor {
  color: #333;
 }

 .eMail.light .copyright {
  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;
+  }
 }
--- 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 */
+  }
+
+}
--- a/src/css/ProjectCard.css
+++ b/src/css/ProjectCard.css
@@ -67,7 +67,8 @@
  gap: 0.5rem;
 }

-.projectCard.light .projectInfo h3 span, .projectCard.light .projectJob{
+.projectCard.light .projectInfo h3 span,
+.projectCard.light .projectJob {
  color: rgb(90, 90, 90);
 }

@@ -77,4 +78,12 @@

 .projectCard.light .socialIcon:hover {
  fill: #6e6e6e;
-}
+}
+
+@media screen and (max-width: 450px) {
+  .projectCard {
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+}
--- a/src/css/ProjectsMain.css
+++ b/src/css/ProjectsMain.css
@@ -15,3 +15,19 @@
  gap: 1rem;
  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%;
+  }
+}
--- a/src/css/Specialties.css
+++ b/src/css/Specialties.css
@@ -11,3 +11,11 @@
 .specialties.light .specialtyText {
  color: #333;
 }
+
+@media screen and (max-width: 450px) {
+  .specialties {
+    grid-area: 4 / 1 / 7 / 5;
+  }
+
+}
+
--- 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: 7 / 1 / 12 / 5;
+  }
 }
--- a/src/css/TallContentAbout.css
+++ b/src/css/TallContentAbout.css
@@ -39,3 +39,10 @@
 .tallContentAbout.light .funFactList li p {
  color: #333;
 }
+
+@media screen and (max-width: 450px) {
+  .tallContentAbout {
+    grid-area: 7 / 1 / 12 / 5;
+    /* height: fit-content; */
+  }
+}
--- 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: 4 / 1 / 7 / 5;
+    max-height: 1110px;
+  }
+
+  .techStackContainer.expanded {
+    grid-area: 5 / 1 / 11 / 5;
+  }
+}
+
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