contact

src/components/mainViews/Contact.jsx

@@ -1,9 +1,60 @@
-import React from 'react'
+import React from "react";
+import "../../css/Home.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 "animate.css";
+import { useState } from "react";
+import "../../css/GridContainer.css";
+import ContactTile from "../subComponents/Contact/ContactTile";
 
 const Contact = () => {
-  return (
-    <div>Contact</div>
-  )
-}
+  const social = (url) => () => {
+    window.open(url, "_blank", "noopener,noreferrer");
+  };
+  const [hoverAnimation, setHoverAnimation] = useState("animate__headShake");
 
-export default Contact
+  const handleMouseEnter = (setAnimation) => {
+    setAnimation(hoverAnimation); // Trigger hover animation
+  };
+
+  const handleAnimationEnd = (setAnimation) => {
+    setAnimation(""); // Clear animation to prevent re-triggering
+  };
+  return (
+    <div className="gridContainer">
+      <LangSelect />
+      <Mail />
+      <Switch />
+      <Navigation
+      /*  initialAnimation="animate__bounceInDown"
+        onMouseEnter={handleMouseEnter}
+        onAnimationEnd={handleAnimationEnd} */
+      />
+      <ContactTile
+        initialAnimation="animate__bounceInDown"
+        onMouseEnter={handleMouseEnter}
+        onAnimationEnd={handleAnimationEnd}
+      />
+      <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>
+      <Location />
+    </div>
+  );
+};
+
+export default Contact;

src/components/subComponents/Contact/ContactTile.jsx

@@ -0,0 +1,98 @@
+import React, { useState } from "react";
+import "../../../css/ContactTile.css";
+import { useTheme } from "../../../Context/ThemeContext";
+import { useLang } from "../../../Context/LangContext";
+
+const ContactTileTiltFlip = ({
+  initialAnimation,
+  onMouseEnter,
+  onAnimationEnd,
+}) => {
+  const [animation, setAnimation] = useState(initialAnimation);
+  const { colormode } = useTheme();
+  const { language } = useLang();
+  const [isFlipped, setIsFlipped] = useState(false);
+  const [tiltStyle, setTiltStyle] = useState({});
+
+  const handleMouseMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left - rect.width / 2;
+    const y = e.clientY - rect.top - rect.height / 2;
+    const tiltX = (y / rect.height) * 40; // Harter Tilt
+    const tiltY = -(x / rect.width) * 40;
+
+    setTiltStyle({
+      transform: `rotateX(${tiltX}deg) rotateY(${tiltY}deg)`,
+    });
+  };
+
+  const handleMouseLeave = () => {
+    setTiltStyle({ transform: "rotateX(0deg) rotateY(0deg)" });
+  };
+
+  const handleClick = () => {
+    setIsFlipped(!isFlipped);
+  };
+
+  return (
+    <div
+      className={`container contactTile ${colormode} animate__animated ${animation}`}
+      /*       onMouseEnter={() => onMouseEnter(setAnimation)}
+       */ onAnimationEnd={() => onAnimationEnd(setAnimation)}
+    >
+      <div
+        className={`card ${isFlipped ? "flipped" : ""}`}
+        onClick={handleClick}
+        onMouseMove={handleMouseMove}
+        onMouseLeave={handleMouseLeave}
+        style={{
+          transform: `${tiltStyle.transform || "rotateX(0deg) rotateY(0deg)"} ${
+            isFlipped ? "rotateY(180deg)" : ""
+          }`,
+        }}
+      >
+        <div className="card-inner">
+          <div className={`card-front ${colormode}`}>
+            <h2>Yousif Paulus</h2>
+            <p>React | Node.js | TypeScript</p>
+            <p>
+              {language === "en-GB"
+                ? "Full-Stack Developer"
+                : "Full-Stack Entwickler"}
+            </p>
+          </div>
+          <div className={`card-back ${colormode}`}>
+            <p>
+              📧 {/* Email: */}{" "}
+              <a href="mailto:yousif.paulus@hotmail.de">
+                yousif.paulus@hotmail.de
+              </a>
+            </p>
+            <p>
+              📞{" "}
+             {/*  {language === "en-GB" ? "Phone:" : "Tel:"} */}
+              <a href="tel:+4915150717623">
+                {language === "en-GB"
+                  ? "+49 151 50717623"
+                  : "0151 50717623"}
+              </a>
+            </p>
+
+            <p>
+              🌐 {/* Portfolio: */}{" "}
+              <a href="http://www.yousifpaulus.dev">www.yousifpaulus.dev</a>
+            </p>
+            {/*   <p>
+              💬{" "}
+              {language === "en-GB"
+                ? "Let’s Build Something Great."
+                : "Tel: +49 151 50717623"}
+            </p> */}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContactTileTiltFlip;