pre techstack show more

src/assets/icons/navIcons/location-pin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M384 192c0 87.4-117 243-168.3 307.2c-12.3 15.3-35.1 15.3-47.4 0C117 435 0 279.4 0 192C0 86 86 0 192 0S384 86 384 192z"/></svg>

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;

src/css/Home.css

@@ -10,9 +10,9 @@
 .container {
   background-color: #28272a;
   padding: 2rem;
-  border-radius: .5rem;
+  border-radius: 0.5rem;
   border: 0.5px solid rgb(73, 73, 73);
-  box-shadow: 0 0 10px -5px rgba(184, 184, 184, .2);
+  box-shadow: 0 0 10px -5px rgba(184, 184, 184, 0.2);
 }
 
 .container:hover {
@@ -56,3 +56,4 @@ h2 {
   animation: zoomIn;
   animation-duration: 1s;
 }
+

src/css/Location.css

@@ -1,3 +1,8 @@
 .location {
   grid-area: 9 / 9 / 10 / 12;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: white;
+  font-size: 1rem;
 }