contact

2025-01-15 02:14:01 +01:00
parent 7729eb247a
commit 7e11f16a8f
3 changed files with 318 additions and 6 deletions
--- a/src/components/subComponents/Contact/ContactTile.jsx
+++ b/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;