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">
+    @await Html.PartialAsync("_LoadingSpinner")
-        <div class="spinner-border text-light" role="status">
-            <p class="text-center sr-only">Loading...</p>
-        </div>
-    </div>
 </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,8 +3,15 @@
     ViewData["Title"] = "Contact";
 }
 
-<h1 class="display-4">Contact</h1>
+<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
-<p class="lead">Job Opportunity</p>
+    <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

OliverBooth/Pages/Contact/OpenSource.cshtml

@@ -3,8 +3,15 @@
     ViewData["Title"] = "Contact";
 }
 
-<h1 class="display-4">Contact</h1>
+<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
-<p class="lead">Open Source Contribution</p>
+    <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>
+<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
-<p class="lead">Other</p>
+    <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>
+<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
-<p class="lead">Privacy Policy Concerns</p>
+    <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>
+<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
-<p class="lead">Project Idea</p>
+    <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>
+<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
-<p class="lead">Technical Help</p>
+    <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
+    I believe in free and open exchange of information, and I want to keep my educational content free for everyone to
-    you!
+    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">
+    <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>
-        <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;">
-    </a>
 </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
+    I've also written a few <a asp-page="/tutorials/index">tutorials</a> on various topics, usually involvin information
-    information not readily available elsewhere. I hope you find them useful.
+    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"/>
+    @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;
-}
-
-@keyframes spinner-removed {
-  0% {
-    transform: scaleY(1);
-    opacity: 1;
-  }
-
-  50% {
-    transform: scaleY(1);
     opacity: 0;
+    transition: all 0.5s ease-in-out;
+  }
 }
 
-  100% {
+a.bmc-btn {
-    transform: scaleY(0);
+  &:link, &:visited, &:active {
-    opacity: 0;
+    color: #000;
+  }
+
+  &:hover {
+    color: #fff;
   }
 }

src/ts/app.ts

@@ -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);
             }
         });
     }