diff --git a/public/vite.svg b/public/vite.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ab39c96..736dc57 100644
--- a/src/index.css
+++ b/src/index.css
@@ -36,6 +36,19 @@
color 0s;
}
+.hidden {
+ display: none;
+}
+
+.hidden-animate {
+ display: none;
+ animation: hide-animation 0.5s
+}
+
+.slide-right {
+ animation: slide-right 0.5s;
+}
+
.header-link:hover {
text-shadow: 0px 0px 12px var(--text-color);
transform: translateY(-5%) scale(1.12, 1.12);
@@ -52,12 +65,24 @@
}
.profile-picture {
- display: block;
- margin: 0 auto;
+ display: inline-block;
+ margin: 0;
cursor: pointer;
transition: transform 0.15s;
}
+.easter-egg-box {
+ display: flex;
+ align-self: center;
+ justify-content: center;
+}
+
+.easter-egg {
+ text-align: center;
+ margin: auto 20px;
+ animation: fade-slide-left 0.5s
+}
+
.profile-picture:hover {
transform: scale(1.1, 1.1);
}
diff --git a/src/keyframes.css b/src/keyframes.css
index 879936b..2dcd5cd 100644
--- a/src/keyframes.css
+++ b/src/keyframes.css
@@ -9,3 +9,56 @@
opacity: 1;
}
}
+
+@keyframes fade-slide-left {
+ 0% {
+ transform: translateX(-30px);
+ opacity: 0;
+ }
+ 100% {
+ transform: translateX(0px);
+ opacity: 1;
+ }
+}
+
+@keyframes fade-slide-right {
+ 0% {
+ transform: translateX(30px);
+ opacity: 0;
+ }
+ 50% {
+ opacity: 0;
+ }
+ 100% {
+ transform: translateX(0px);
+ opacity: 1;
+ }
+}
+
+@keyframes slide-left {
+ 0% {
+ transform: translateX(-30px);
+ }
+ 100% {
+ transform: translateX(0px);
+ }
+}
+
+@keyframes slide-right {
+ 0% {
+ transform: translateX(30px);
+ }
+ 100% {
+ transform: translateX(0px);
+ }
+}
+
+@keyframes hide-animation {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(0.5, 0.5);
+ opacity: 0;
+ }
+}
diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx
index 6833ef3..4a5ed52 100644
--- a/src/pages/Main.tsx
+++ b/src/pages/Main.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
import {
Buttons,
ButtonRow,
@@ -51,11 +52,22 @@ export function Main() {
},
];
+ const [timesClicked, changeTimesClicked] = useState(0);
+ const handlePictureClick = () => {
+ changeTimesClicked((timesClicked) => timesClicked + 1);
+ }
+ const checkTimesClicked = () => {
+ return timesClicked >= 10;
+ }
+
return (
<>
Stop that!
+