pre techstack show more

src/components/Home.jsx

@@ -14,6 +14,9 @@ import { useState } from "react";
 import TallContent from "./TallContent";
 
 const Home = () => {
+  const social = (url) => () => {
+    window.open(url, "_blank", "noopener,noreferrer");
+  };
   const [hoverAnimation, setHoverAnimation] = useState("animate__headShake");
 
   const handleMouseEnter = (setAnimation) => {
@@ -43,10 +46,16 @@ const Home = () => {
         onMouseEnter={handleMouseEnter}
         onAnimationEnd={handleAnimationEnd}
       />
-      <div className="linkedIn container">
+      <div
+        className="linkedIn container animate__animated animate__jackInTheBox"
+        onClick={social("https://www.linkedin.com/in/yousifpaulus/")}
+      >
         <LinkedInIcon className="linkedInIcon" />
       </div>
-      <div className="github container">
+      <div
+        className="github container animate__animated animate__jackInTheBox"
+        onClick={social("https://github.com/yousifpa98")}
+      >
         <GitHubIcon className="githubIcon" />
       </div>
       <Location />

src/components/Location.jsx

@@ -1,8 +1,16 @@
 import React from "react";
 import "../css/Location.css";
+import LocationPin from "../assets/icons/navIcons/location-pin.svg?react";
 
 const Location = () => {
-  return <div className="location container">located @Cologne, Germany</div>;
+  return (
+    <div className="location container">
+      <LocationPin className="navIcon" />
+      <p>
+        <strong>Cologne</strong>, Germany
+      </p>
+    </div>
+  );
 };
 
 export default Location;