This commit is contained in:
powermaker450 2024-08-15 20:12:05 -04:00
parent 0ba9c8c175
commit be35a0a7c1
3 changed files with 18 additions and 7 deletions

View file

@ -48,7 +48,7 @@ body {
.hidden-animate {
display: none;
animation: hide-animation 0.5s
animation: hide-animation 0.5s;
}
.slide-right {
@ -87,7 +87,7 @@ body {
.easter-egg {
text-align: center;
margin: auto 20px;
animation: fade-slide-left 0.5s
animation: fade-slide-left 0.5s;
}
.profile-picture:hover {

View file

@ -25,7 +25,7 @@
@keyframes zoom-in {
0% {
transform: scale(1.12, 1.12);
opacity: 0;
opacity: 0;
}
100% {
transform: scale(1, 1);

View file

@ -55,18 +55,29 @@ export function Main() {
const [timesClicked, changeTimesClicked] = useState(0);
const handlePictureClick = () => {
changeTimesClicked((timesClicked) => timesClicked + 1);
}
};
const checkTimesClicked = () => {
return timesClicked >= 10;
}
};
return (
<>
<Header links={links} />
<div className="easter-egg-box">
<img className={checkTimesClicked() ? "profile-picture slide-right" : "profile-picture"} onClick={handlePictureClick} height={130} src="/potato.png" />
<p className={checkTimesClicked() ? "easter-egg" : "easter-egg hidden"}>Stop that!</p>
<img
className={
checkTimesClicked()
? "profile-picture slide-right"
: "profile-picture"
}
onClick={handlePictureClick}
height={130}
src="/potato.png"
/>
<p className={checkTimesClicked() ? "easter-egg" : "easter-egg hidden"}>
Stop that!
</p>
</div>
<div className="head">