build: add versioning, bump to 1.1.0

OliverBooth/OliverBooth.csproj

@@ -5,6 +5,25 @@
         <Nullable>enable</Nullable>
         <ImplicitUsings>enable</ImplicitUsings>
         <DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
+        <VersionPrefix>1.1.0</VersionPrefix>
+    </PropertyGroup>
+
+    <PropertyGroup Condition="'$(VersionSuffix)' != '' And '$(BuildNumber)' == ''">
+        <Version>$(VersionPrefix)-$(VersionSuffix)</Version>
+        <AssemblyVersion>$(VersionPrefix).0</AssemblyVersion>
+        <FileVersion>$(VersionPrefix).0</FileVersion>
+    </PropertyGroup>
+
+    <PropertyGroup Condition="'$(VersionSuffix)' != '' And '$(BuildNumber)' != ''">
+        <Version>$(VersionPrefix)-$(VersionSuffix).$(BuildNumber)</Version>
+        <AssemblyVersion>$(VersionPrefix).$(BuildNumber)</AssemblyVersion>
+        <FileVersion>$(VersionPrefix).$(BuildNumber)</FileVersion>
+    </PropertyGroup>
+
+    <PropertyGroup Condition="'$(VersionSuffix)' == ''">
+        <Version>$(VersionPrefix)</Version>
+        <AssemblyVersion>$(VersionPrefix).0</AssemblyVersion>
+        <FileVersion>$(VersionPrefix).0</FileVersion>
     </PropertyGroup>
 
     <ItemGroup>

OliverBooth/Pages/Index.cshtml

@@ -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>
 

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;
+  }
 }

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);
+        }
+    });
 })();