diff --git a/OliverBooth/Pages/Index.cshtml b/OliverBooth/Pages/Index.cshtml
index 265e9d0..0f85b37 100644
--- a/OliverBooth/Pages/Index.cshtml
+++ b/OliverBooth/Pages/Index.cshtml
@@ -9,7 +9,7 @@
-
+
diff --git a/src/img/avatar_512x512.jpg b/src/img/avatar_512x512.jpg
new file mode 100644
index 0000000..08a3e79
Binary files /dev/null and b/src/img/avatar_512x512.jpg differ
diff --git a/src/scss/app.scss b/src/scss/app.scss
index 70a3270..0542b64 100644
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -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;
+ }
}
\ No newline at end of file
diff --git a/src/ts/app.ts b/src/ts/app.ts
index 9d0723e..fc7b176 100644
--- a/src/ts/app.ts
+++ b/src/ts/app.ts
@@ -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);
+ }
+ });
})();