style: add cool spinning headshot for no other reason than I can

This commit is contained in:
Oliver Booth 2024-02-28 19:07:42 +00:00
parent 521d202824
commit 02db44bf2f
Signed by: oliverbooth
GPG Key ID: E60B570D1B7557B5
4 changed files with 82 additions and 3 deletions

View File

@ -9,7 +9,7 @@
</p>
</div>
<div id="landing-page-headshot" class="col-sm-12 col-md-6 justify-content-right">
<img src="~/img/headshot_512x512_2023.jpg" class="rounded-circle" style="width: 50%; max-width: 512px;" alt="Headshot">
<img id="index-headshot" src="~/img/headshot_512x512_2023.jpg" class="rounded-circle" style="width: 50%; max-width: 512px;" alt="Headshot">
</div>
</div>

BIN
src/img/avatar_512x512.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

View File

@ -421,13 +421,13 @@ td.trim-p p:last-child {
#landing-page-intro {
text-align: left;
h1.display-4 {
font-family: "Titillium Web", sans-serif;
font-weight: 600;
font-style: normal;
}
p.lead {
font-family: "Titillium Web", sans-serif;
font-weight: 400;
@ -455,4 +455,53 @@ td.trim-p p:last-child {
#landing-page-headshot {
text-align: center;
}
}
#index-headshot {
cursor: pointer;
}
.headshot-spin {
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
&.headshot-spin-start {
animation-duration: .4s;
animation-timing-function: ease-in;
animation-name: headshot-spin-start;
}
&.headshot-spin-end {
animation-duration: .8s;
animation-timing-function: ease-out;
animation-name: headshot-spin-end;
}
}
@keyframes headshot-spin-start {
0% {
transform: rotateY(0) scale(1.0);
box-shadow: none;
}
100% {
transform: rotateY(90deg) scale(1.2);
box-shadow: 0 5px 5px rgba(#000, 15%);
}
}
@keyframes headshot-spin-end {
0% {
transform: rotateY(90deg) scale(1.2);
box-shadow: 0 5px 5px rgba(#000, 15%);
}
80% {
transform: rotateY(360deg) scale(1.5);
box-shadow: 0 5px 6.25px rgba(#000, 15%);
}
100% {
transform: scale(1.0);
box-shadow: none;
}
}

View File

@ -104,4 +104,34 @@ declare const Prism: any;
UI.updateUsaCountdown(usaCountdown);
setInterval(() => UI.updateUsaCountdown(usaCountdown), 1000);
}
let avatarType = 0;
const headshot = document.getElementById("index-headshot") as HTMLImageElement;
headshot.addEventListener("click", (ev: MouseEvent) => {
if (avatarType === 0) {
headshot.classList.add("headshot-spin", "headshot-spin-start");
setTimeout(() => {
headshot.classList.remove("headshot-spin-start");
headshot.src = "/img/avatar_512x512.jpg"
headshot.classList.add("headshot-spin", "headshot-spin-end");
setTimeout(() => {
headshot.classList.remove("headshot-spin", "headshot-spin-end");
avatarType = 1;
}, 800);
}, 400);
} else if (avatarType === 1) {
headshot.classList.add("headshot-spin", "headshot-spin-start");
setTimeout(() => {
headshot.classList.remove("headshot-spin-start");
headshot.src = "/img/headshot_512x512_2023.jpg"
headshot.classList.add("headshot-spin", "headshot-spin-end");
setTimeout(() => {
headshot.classList.remove("headshot-spin", "headshot-spin-end");
avatarType = 0;
}, 800);
}, 400);
}
});
})();