From ecd7a6af01c5e60be2c23f08dffdeee4b3db068c Mon Sep 17 00:00:00 2001
From: yousifpa98 <yousif.paulus@dci-student.org>
Date: Fri, 20 Dec 2024 03:04:56 +0100
Subject: [PATCH] added some styling for bg + added tallContent component +
 animation

---
 src/components/Home.jsx        |  6 ++++++
 src/components/Location.jsx    |  2 +-
 src/components/TallContent.jsx | 18 ++++++++++++++++++
 src/css/Home.css               |  3 ++-
 src/css/TallContent.css        |  3 +++
 src/index.css                  |  9 ++++++++-
 6 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 src/components/TallContent.jsx
 create mode 100644 src/css/TallContent.css

diff --git a/src/components/Home.jsx b/src/components/Home.jsx
index d5f863c..4f21190 100644
--- a/src/components/Home.jsx
+++ b/src/components/Home.jsx
@@ -11,6 +11,7 @@ import GitHubIcon from "../assets/icons/socials/square-github.svg?react";
 import Location from "./Location";
 import "animate.css";
 import { useState } from "react";
+import TallContent from "./TallContent";
 
 const Home = () => {
   const [hoverAnimation, setHoverAnimation] = useState("animate__headShake");
@@ -49,6 +50,11 @@ const Home = () => {
         <GitHubIcon className="githubIcon" />
       </div>
       <Location />
+      <TallContent
+        initialAnimation="animate__flipInY"
+        onMouseEnter={handleMouseEnter}
+        onAnimationEnd={handleAnimationEnd}
+      />
     </div>
   );
 };
diff --git a/src/components/Location.jsx b/src/components/Location.jsx
index b7c7753..f0bcc56 100644
--- a/src/components/Location.jsx
+++ b/src/components/Location.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import "../css/Location.css";
 
 const Location = () => {
-  return <div className="location container">Location</div>;
+  return <div className="location container">located @Cologne, Germany</div>;
 };
 
 export default Location;
diff --git a/src/components/TallContent.jsx b/src/components/TallContent.jsx
new file mode 100644
index 0000000..2df331a
--- /dev/null
+++ b/src/components/TallContent.jsx
@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+import "../css/TallContent.css";
+
+const TallContent = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
+  const [animation, setAnimation] = useState(initialAnimation);
+
+  return (
+    <div
+      className={`container tallContent animate__animated ${animation}`}
+      onMouseEnter={() => onMouseEnter(setAnimation)}
+      onAnimationEnd={() => onAnimationEnd(setAnimation)}
+    >
+      TallContent
+    </div>
+  );
+};
+
+export default TallContent;
diff --git a/src/css/Home.css b/src/css/Home.css
index 809f8c1..d566aa8 100644
--- a/src/css/Home.css
+++ b/src/css/Home.css
@@ -12,11 +12,12 @@
   padding: 2rem;
   border-radius: 1rem;
   border: 0.5px solid rgb(73, 73, 73);
+  box-shadow: 0 0 10px -5px rgba(184, 184, 184, .2);
 }
 
 .container:hover {
   cursor: pointer;
-  animation-duration: .5s;
+  animation-duration: 0.5s;
 }
 
 h2 {
diff --git a/src/css/TallContent.css b/src/css/TallContent.css
new file mode 100644
index 0000000..8a28ade
--- /dev/null
+++ b/src/css/TallContent.css
@@ -0,0 +1,3 @@
+.tallContent {
+  grid-area: 1 / 5 / 8 / 9;
+}
diff --git a/src/index.css b/src/index.css
index 7152ed4..c5083ff 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6,5 +6,12 @@
 
 body {
   font-family: "SF Pro Display", sans-serif;
-  background-color: black;
+  background-color: #000000;
+  background-color: #000000;
+  background-image: linear-gradient(
+    43deg,
+    #000000 29%,
+    #454545 89%,
+    #2d2d2d 100%
+  );
 }