added some styling for bg + added tallContent component + animation

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>
   );
 };

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;

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;

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 {

src/css/TallContent.css

@@ -0,0 +1,3 @@
+.tallContent {
+  grid-area: 1 / 5 / 8 / 9;
+}

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%
+  );
 }