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;