style: improve feel of spinner removal

OliverBooth/Pages/Blog/Article.cshtml

@@ -11,6 +11,7 @@
 }
 
 @{
+    ViewData["Title"] = post.Title;
     Author author = Model.Author;
     DateTimeOffset published = post.Published;
 }

OliverBooth/Pages/Blog/Index.cshtml

@@ -1,12 +1,12 @@
 @page
 @model OliverBooth.Pages.Blog.Index
 
+@{
+    ViewData["Title"] = "Blog";
+}
+
 <div id="all-blog-posts">
-    <div id="blog-loading-spinner" class="d-flex justify-content-center">
-        <div class="spinner-border text-light" role="status">
-            <p class="text-center sr-only">Loading...</p>
-        </div>
-    </div>
+    @await Html.PartialAsync("_LoadingSpinner")
 </div>
 
 <script id="blog-post-template" type="text/x-handlebars-template">

OliverBooth/Pages/Contact/Index.cshtml

@@ -3,7 +3,7 @@
     ViewData["Title"] = "Contact";
 }
 
-<h1 class="display-4" xmlns="http://www.w3.org/1999/html">Contact</h1>
+<h1 class="display-4">Contact</h1>
 <p class="lead">What would you like to talk about?</p>
 <ul class="contact-reasons">
     <li><a asp-page="/contact/jobopportunity">💼 Job opportunity / collaboration</a></li>

OliverBooth/Pages/Contact/JobOpportunity.cshtml

@@ -3,12 +3,19 @@
     ViewData["Title"] = "Contact";
 }
 
-<h1 class="display-4">Contact</h1>
-<p class="lead">Job Opportunity</p>
+<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
+    <ol class="breadcrumb">
+        <li class="breadcrumb-item">
+            <a asp-page="/contact/index">Contact</a>
+        </li>
+        <li class="breadcrumb-item active" aria-current="page">Job Opportunity</li>
+    </ol>
+</nav>
+
 <p>
     I am always open to hearing about future opportunities. If you have a position you think I could be a good fit for,
     please feel free to contact me using the form below. At this time, I am only open to positions based in South East
-    Wales or that are 100% remote. 
+    Wales or that are 100% remote.
 </p>
 <p>I look forward to hearing from you!</p>
 

OliverBooth/Pages/Contact/OpenSource.cshtml

@@ -3,8 +3,15 @@
     ViewData["Title"] = "Contact";
 }
 
-<h1 class="display-4">Contact</h1>
-<p class="lead">Open Source Contribution</p>
+<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
+    <ol class="breadcrumb">
+        <li class="breadcrumb-item">
+            <a asp-page="/contact/index">Contact</a>
+        </li>
+        <li class="breadcrumb-item active" aria-current="page">Open Source Contribution</li>
+    </ol>
+</nav>
+
 <p>
     Thank you for taking the time to consider contributing to one of my open source projects! I am always looking for
     ways to improve my code, and I appreciate any and all contributions that I receive. You do not need to contact

OliverBooth/Pages/Contact/Other.cshtml

@@ -3,8 +3,15 @@
     ViewData["Title"] = "Contact";
 }
 
-<h1 class="display-4">Contact</h1>
-<p class="lead">Other</p>
+<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
+    <ol class="breadcrumb">
+        <li class="breadcrumb-item">
+            <a asp-page="/contact/index">Contact</a>
+        </li>
+        <li class="breadcrumb-item active" aria-current="page">Other</li>
+    </ol>
+</nav>
+
 <p>
     Thanks for getting in touch! While I do my best to read to all inquiries, I cannot guarantee that I will be able to
     respond to your message. Nevertheless, I appreciate you taking the time to reach out to me and I will respond if I

OliverBooth/Pages/Contact/Privacy.cshtml

@@ -4,8 +4,15 @@
     ViewData["Title"] = "Contact";
 }
 
-<h1 class="display-4">Contact</h1>
-<p class="lead">Privacy Policy Concerns</p>
+<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
+    <ol class="breadcrumb">
+        <li class="breadcrumb-item">
+            <a asp-page="/contact/index">Contact</a>
+        </li>
+        <li class="breadcrumb-item active" aria-current="page">Privacy Policy Concerns</li>
+    </ol>
+</nav>
+
 <p>
     Thank you for getting in touch. I take your privacy very seriously and will do my best to address any concerns you may have.
     Please outline your concerns in the form below, and I will get back to you as soon as possible.

OliverBooth/Pages/Contact/ProjectIdea.cshtml

@@ -3,8 +3,15 @@
     ViewData["Title"] = "Contact";
 }
 
-<h1 class="display-4">Contact</h1>
-<p class="lead">Project Idea</p>
+<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
+    <ol class="breadcrumb">
+        <li class="breadcrumb-item">
+            <a asp-page="/contact/index">Contact</a>
+        </li>
+        <li class="breadcrumb-item active" aria-current="page">Project Idea</li>
+    </ol>
+</nav>
+
 <p>
     If you have any ideas for a project that you'd like to see me work on, please feel free to contact me using the
     form below. I'm always looking for something new to work on, and I'm open to suggestions!

OliverBooth/Pages/Contact/TechnicalHelp.cshtml

@@ -3,8 +3,15 @@
     ViewData["Title"] = "Contact";
 }
 
-<h1 class="display-4">Contact</h1>
-<p class="lead">Technical Help</p>
+<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
+    <ol class="breadcrumb">
+        <li class="breadcrumb-item">
+            <a asp-page="/contact/index">Contact</a>
+        </li>
+        <li class="breadcrumb-item active" aria-current="page">Technical Help</li>
+    </ol>
+</nav>
+
 <p>
     I'm sorry, but do I not offer help or advice regarding development of any kind outside of my website, and Discord
     servers of which I'm a member. I'm most active in the <a href="https://discord.gg/brackeys">Brackeys Community</a>

OliverBooth/Pages/Donate.cshtml

@@ -4,9 +4,20 @@
 }
 
 <h1 class="display-4">Donate</h1>
+
 <p>
-    If you like what I do and would like to donate money to me and fund my coffee addiction, there are a few options for
-    you!
+    I believe in free and open exchange of information, and I want to keep my educational content free for everyone to
+    access. I will never put ads on my site, and I don't want to put behind a paywall resources that should be available
+    to everybody, regardless of their financial situation.
+</p>
+<p>
+    However, writing tutorials takes time, and I do have to pay for hosting. While I will never ask you for money, I
+    will always appreciate it if you do decide to donate. It also helps me to know that people are finding my content
+    useful, and that I should continue to make more.
+</p>
+<p>
+    If you like what I do and are both willing and able to donate money to me and fund all of this, you can do so using
+    the links below. Thank you for your support!
 </p>
 
 <p>
@@ -15,9 +26,7 @@
 </p>
 
 <p>
-    <a href="https://www.buymeacoffee.com/oliverbooth" target="_blank">
-        <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;">
-    </a>
+    <script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="oliverbooth" data-color="#FFDD00" data-emoji="" data-font="Cookie" data-text="Buy me a coffee" data-outline-color="#000000" data-font-color="#000000" data-coffee-color="#ffffff"></script>
 </p>
 
 <p>I also accept cryptocurrency donations.</p>

OliverBooth/Pages/Index.cshtml

@@ -11,8 +11,9 @@
 </p>
 
 <p>
-    I've also written a few <a asp-page="/tutorials/index">tutorials</a> on various topics, usually involving
-    information not readily available elsewhere. I hope you find them useful.
+    I've also written a few <a asp-page="/tutorials/index">tutorials</a> on various topics, usually involvin information
+    not readily available elsewhere. I hope you find them useful. On occasion, I also write about other topics that I
+    find interesting, such as <a asp-page="/blog/index">my thoughts on the state of the world or the tech industry</a>.
 </p>
 
 <p>

OliverBooth/Pages/Shared/_Layout.cshtml

@@ -4,7 +4,14 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <meta name="color-scheme" content="dark"/>
-    <title>Oliver Booth</title>
+    @if (ViewData["Title"] != null)
+    {
+        <title>@ViewData["Title"] - Oliver Booth</title>
+    }
+    else
+    {
+        <title>Oliver Booth</title>
+    }
     <link rel="shortcut icon" href="~/img/favicon.png">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/css/bootstrap.min.css" integrity="sha512-Z/def5z5u2aR89OuzYcxmDJ0Bnd5V1cKqBEbvLOiUNWdg9PQeXVvXLI90SE4QOHGlfLqUnDNVAYyZi8UwUTmWQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.css" integrity="sha512-7nTa5CnxbzfQgjQrNmHXB7bxGTUVO/DcYX6rpgt06MkzM0rVXP3EYCv/Ojxg5H0dKbY7llbbYaqgfZjnGOAWGA==" crossorigin="anonymous" referrerpolicy="no-referrer">
@@ -74,6 +81,10 @@
 <script src="~/js/prism.min.js" asp-append-version="true" data-manual></script>
 <script src="~/js/app.min.js" asp-append-version="true"></script>
 
+<script id="loading-spinner-template" type="text/x-handlebars-template">
+    @await Html.PartialAsync("_LoadingSpinner")
+</script>
+
 @await RenderSectionAsync("Scripts", required: false)
 </body>
 </html>

OliverBooth/Pages/Shared/_LoadingSpinner.cshtml

@@ -0,0 +1,5 @@
+<div id="blog-loading-spinner" class="d-flex justify-content-center">
+    <div class="spinner-border text-light" role="status">
+        <p class="text-center sr-only">Loading...</p>
+    </div>
+</div>

src/scss/app.scss

@@ -214,25 +214,23 @@ div.alert *:last-child {
 
 #blog-loading-spinner {
   margin: 20px;
+  height: auto;
+  opacity: 1;
 
   &.removed {
-    animation: spinner-removed 2s ease-in-out;
+    margin: 0;
+    height: 0;
+    opacity: 0;
+    transition: all 0.5s ease-in-out;
   }
 }
 
-@keyframes spinner-removed {
-  0% {
-    transform: scaleY(1);
-    opacity: 1;
+a.bmc-btn {
+  &:link, &:visited, &:active {
+    color: #000;
   }
 
-  50% {
-    transform: scaleY(1);
-    opacity: 0;
-  }
-
-  100% {
-    transform: scaleY(0);
-    opacity: 0;
+  &:hover {
+    color: #fff;
   }
 }

src/ts/app.ts

@@ -15,7 +15,7 @@ declare const Prism: any;
             greedy: true
         }
     });
-    
+
     let isCtrl = false;
     document.addEventListener('keyup', (e) => {
         if (e.ctrlKey) isCtrl = false;
@@ -54,7 +54,7 @@ declare const Prism: any;
             const spinner = document.querySelector("#blog-loading-spinner");
             if (spinner) {
                 spinner.classList.add("removed");
-                setTimeout(() => spinner.remove(), 1100);
+                setTimeout(() => spinner.remove(), 1000);
             }
         });
     }