From f4859124d2227359f0de6d24c0b5b88c96da203f Mon Sep 17 00:00:00 2001
From: yousifpa98 <yousif.paulus@dci-student.org>
Date: Sat, 21 Dec 2024 02:15:51 +0100
Subject: [PATCH] pre techstack show more

---
 src/assets/icons/navIcons/location-pin.svg |  1 +
 src/components/Home.jsx                    | 13 +++++++++++--
 src/components/Location.jsx                | 10 +++++++++-
 src/css/Home.css                           |  5 +++--
 src/css/Location.css                       |  5 +++++
 5 files changed, 29 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/icons/navIcons/location-pin.svg

diff --git a/src/assets/icons/navIcons/location-pin.svg b/src/assets/icons/navIcons/location-pin.svg
new file mode 100644
index 0000000..5e6e033
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
index 4f21190..7a428c7 100644
--- a/src/components/Home.jsx
+++ b/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 />
diff --git a/src/components/Location.jsx b/src/components/Location.jsx
index f0bcc56..0c9153b 100644
--- a/src/components/Location.jsx
+++ b/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;
diff --git a/src/css/Home.css b/src/css/Home.css
index 3957301..34a10a5 100644
--- a/src/css/Home.css
+++ b/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;
 }
+
diff --git a/src/css/Location.css b/src/css/Location.css
index d2e48ab..dc30378 100644
--- a/src/css/Location.css
+++ b/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;
 }