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 = () => {
+
);
};
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
Location
;
+ return located @Cologne, Germany
;
};
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 (
+ onMouseEnter(setAnimation)}
+ onAnimationEnd={() => onAnimationEnd(setAnimation)}
+ >
+ TallContent
+
+ );
+};
+
+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%
+ );
}