From 8743849feeed3665ba485ade2e5a63d9ba75132a Mon Sep 17 00:00:00 2001
From: Beau Findlay <me@beaufindlay.com>
Date: Tue, 12 Mar 2024 21:50:22 +0000
Subject: [PATCH 1/5] Hide recaptcha badge

---
 .../src/BeauFindlay.Client/Pages/Contact.razor    | 15 +++++++--------
 BeauFindlay/src/BeauFindlay.Client/_Imports.razor |  3 ++-
 .../src/BeauFindlay.Client/wwwroot/css/app.css    |  7 ++++++-
 .../BeauFindlay.Client/wwwroot/css/app.min.css    | 11 ++++++++---
 .../src/BeauFindlay.Client/wwwroot/index.html     |  3 +++
 5 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/BeauFindlay/src/BeauFindlay.Client/Pages/Contact.razor b/BeauFindlay/src/BeauFindlay.Client/Pages/Contact.razor
index de4e9b4..9ed2d5f 100644
--- a/BeauFindlay/src/BeauFindlay.Client/Pages/Contact.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/Pages/Contact.razor
@@ -2,7 +2,7 @@
 @using BeauFindlay.Shared.Contracts
 
 @inject HttpClient HttpClient
-@inject IJSRuntime JsRuntime
+@inject IJSRuntime JSRuntime
 
 <div class="text-center">
     <h1 class="text-4xl">Contact</h1>
@@ -12,7 +12,7 @@
     </p>
 </div>
 
-<div class="mx-auto max-w-xl pt-10 pb-4">
+<div class="mx-auto max-w-xl pt-8 pb-4">
     <EditForm Model="contactInput" OnValidSubmit="HandleValidSubmit">
         <DataAnnotationsValidator/>
 
@@ -39,7 +39,10 @@
                 </div>
             </div>
         </div>
-        <div class="mt-8 flex items-center justify-center">
+        <div class="mt-4">
+            <small>This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy" class="underline underline-offset-2">Privacy Policy</a> and <a href="https://policies.google.com/terms" class="underline underline-offset-2">Terms of Service</a> apply.</small>
+        </div>
+        <div class="mt-4 flex items-center justify-center">
             <Button Type="submit" IsLoading="@isSubmitting">
                 <i class="fa-solid fa-paper-plane"></i> Send
             </Button>
@@ -66,10 +69,6 @@
     </div>
 }
 
-<script src="https://www.google.com/recaptcha/api.js?render=6LcvxZIpAAAAAOIP5L6kGngwDZRpwkTdMezPn06x" async
-        defer></script>
-<script src="js/recaptcha.js"></script>
-
 @code {
     private readonly ContactInputModel contactInput = new();
 
@@ -96,7 +95,7 @@
     {
         isSubmitting = true;
         
-        var recaptchaResponse = await JsRuntime.InvokeAsync<string>("executeRecaptcha");
+        var recaptchaResponse = await JSRuntime.InvokeAsync<string>("executeRecaptcha");
 
         if (string.IsNullOrWhiteSpace(recaptchaResponse))
         {
diff --git a/BeauFindlay/src/BeauFindlay.Client/_Imports.razor b/BeauFindlay/src/BeauFindlay.Client/_Imports.razor
index f0ed136..aaeab63 100644
--- a/BeauFindlay/src/BeauFindlay.Client/_Imports.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/_Imports.razor
@@ -12,4 +12,5 @@
 @using BeauFindlay.Client.Components.Alert
 @using BeauFindlay.Client.Components.Typewriter
 @using BeauFindlay.Client.Components.Button
-@using BeauFindlay.Client.Components.LoadingSpinner
\ No newline at end of file
+@using BeauFindlay.Client.Components.LoadingSpinner
+@using BeauFindlay.Shared.Contracts
\ No newline at end of file
diff --git a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.css b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.css
index 9879179..f01f334 100644
--- a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.css
+++ b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.css
@@ -20,4 +20,9 @@
 @keyframes fadeInAnimation {
     from { opacity: 0; }
     to { opacity: 1; }
-}
\ No newline at end of file
+}
+
+.grecaptcha-badge {
+    visibility: hidden !important;
+}
+
diff --git a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
index 4c5ec61..31843cc 100644
--- a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
+++ b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
@@ -809,8 +809,8 @@ video {
   padding-bottom: 1rem;
 }
 
-.pt-10 {
-  padding-top: 2.5rem;
+.pt-8 {
+  padding-top: 2rem;
 }
 
 .text-center {
@@ -980,6 +980,10 @@ video {
   }
 }
 
+.grecaptcha-badge {
+  visibility: hidden !important;
+}
+
 .placeholder\:text-gray-400::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -1090,4 +1094,5 @@ video {
     --tw-text-opacity: 1;
     color: rgb(75 85 99 / var(--tw-text-opacity));
   }
-}
\ No newline at end of file
+}
+
diff --git a/BeauFindlay/src/BeauFindlay.Client/wwwroot/index.html b/BeauFindlay/src/BeauFindlay.Client/wwwroot/index.html
index 92a81b4..a53ac4e 100644
--- a/BeauFindlay/src/BeauFindlay.Client/wwwroot/index.html
+++ b/BeauFindlay/src/BeauFindlay.Client/wwwroot/index.html
@@ -26,6 +26,9 @@
 </div>
 <script src="js/smoothScroll.js"></script>
 <script src="_framework/blazor.webassembly.js"></script>
+<script src="https://www.google.com/recaptcha/api.js?render=6LcvxZIpAAAAAOIP5L6kGngwDZRpwkTdMezPn06x" async
+        defer></script>
+<script src="js/recaptcha.js"></script>
 </body>
 
 </html>

From 1cb93655db15dd30dfa2f234a7bf6b9ee53b7569 Mon Sep 17 00:00:00 2001
From: Beau Findlay <me@beaufindlay.com>
Date: Tue, 12 Mar 2024 21:50:47 +0000
Subject: [PATCH 2/5] Add scrollbar style

---
 .../src/BeauFindlay.Client/wwwroot/css/app.css   | 12 ++++++++++++
 .../BeauFindlay.Client/wwwroot/css/app.min.css   | 16 ++++++++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.css b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.css
index f01f334..2e4bccb 100644
--- a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.css
+++ b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.css
@@ -26,3 +26,15 @@
     visibility: hidden !important;
 }
 
+body::-webkit-scrollbar {
+    width: 14px;
+}
+
+body::-webkit-scrollbar-track {
+    background: white;
+}
+
+body::-webkit-scrollbar-thumb {
+    background-color: black;
+    border: 1px solid white;
+}
\ No newline at end of file
diff --git a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
index 31843cc..59cb078 100644
--- a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
+++ b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
@@ -984,6 +984,19 @@ video {
   visibility: hidden !important;
 }
 
+body::-webkit-scrollbar {
+  width: 14px;
+}
+
+body::-webkit-scrollbar-track {
+  background: white;
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: black;
+  border: 1px solid white;
+}
+
 .placeholder\:text-gray-400::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -1094,5 +1107,4 @@ video {
     --tw-text-opacity: 1;
     color: rgb(75 85 99 / var(--tw-text-opacity));
   }
-}
-
+}
\ No newline at end of file

From 878423aeff0b889b75eadc9f500eb547ffa47632 Mon Sep 17 00:00:00 2001
From: Beau Findlay <me@beaufindlay.com>
Date: Tue, 12 Mar 2024 22:09:43 +0000
Subject: [PATCH 3/5] Remove template function

---
 BeauFindlay/src/BeauFindlay.Api/Function1.cs | 25 --------------------
 1 file changed, 25 deletions(-)
 delete mode 100644 BeauFindlay/src/BeauFindlay.Api/Function1.cs

diff --git a/BeauFindlay/src/BeauFindlay.Api/Function1.cs b/BeauFindlay/src/BeauFindlay.Api/Function1.cs
deleted file mode 100644
index 9260290..0000000
--- a/BeauFindlay/src/BeauFindlay.Api/Function1.cs
+++ /dev/null
@@ -1,25 +0,0 @@
-using System.Net;
-using Microsoft.Azure.Functions.Worker;
-using Microsoft.Azure.Functions.Worker.Http;
-using Microsoft.Extensions.Logging;
-
-namespace BeauFindlay.Api
-{
-    public class Function1(ILoggerFactory loggerFactory)
-    {
-        private readonly ILogger _logger = loggerFactory.CreateLogger<Function1>();
-
-        [Function("Function1")]
-        public HttpResponseData Run([HttpTrigger(AuthorizationLevel.Function, "get", "post")] HttpRequestData req)
-        {
-            _logger.LogInformation("C# HTTP trigger function processed a request.");
-
-            var response = req.CreateResponse(HttpStatusCode.OK);
-            response.Headers.Add("Content-Type", "text/plain; charset=utf-8");
-
-            response.WriteString("Welcome to Azure Functions!");
-
-            return response;
-        }
-    }
-}

From d5bad76fb0ab5c0c2905e4aad82c7322ffd8f456 Mon Sep 17 00:00:00 2001
From: Beau Findlay <me@beaufindlay.com>
Date: Tue, 12 Mar 2024 22:09:53 +0000
Subject: [PATCH 4/5] Add anchor component

---
 .../Components/Anchor/Anchor.razor             | 18 ++++++++++++++++++
 .../src/BeauFindlay.Client/Layout/Footer.razor |  2 +-
 .../BeauFindlay.Client/Layout/MainLayout.razor |  2 +-
 .../src/BeauFindlay.Client/Layout/NavBar.razor |  2 +-
 .../src/BeauFindlay.Client/Pages/About.razor   |  8 ++++----
 .../src/BeauFindlay.Client/Pages/Contact.razor |  3 +--
 .../src/BeauFindlay.Client/Pages/Home.razor    |  6 +++---
 .../src/BeauFindlay.Client/_Imports.razor      |  1 +
 .../src/BeauFindlay.Client/wwwroot/css/app.css |  2 +-
 .../BeauFindlay.Client/wwwroot/css/app.min.css |  2 +-
 10 files changed, 32 insertions(+), 14 deletions(-)
 create mode 100644 BeauFindlay/src/BeauFindlay.Client/Components/Anchor/Anchor.razor

diff --git a/BeauFindlay/src/BeauFindlay.Client/Components/Anchor/Anchor.razor b/BeauFindlay/src/BeauFindlay.Client/Components/Anchor/Anchor.razor
new file mode 100644
index 0000000..af28abc
--- /dev/null
+++ b/BeauFindlay/src/BeauFindlay.Client/Components/Anchor/Anchor.razor
@@ -0,0 +1,18 @@
+<a href="@Href"
+   target="@Target"
+   class="underline underline-offset-2">
+   @ChildContent
+</a>
+
+@code {
+
+    [Parameter]
+    public string Href { get; set; } = string.Empty;
+
+    [Parameter]
+    public string Target { get; set; } = "_blank";
+    
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+}
\ No newline at end of file
diff --git a/BeauFindlay/src/BeauFindlay.Client/Layout/Footer.razor b/BeauFindlay/src/BeauFindlay.Client/Layout/Footer.razor
index da00afd..23549bc 100644
--- a/BeauFindlay/src/BeauFindlay.Client/Layout/Footer.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/Layout/Footer.razor
@@ -1,4 +1,4 @@
-<footer class="mt-auto fade-in">
+<footer class="mt-auto">
     <div class="mx-auto py-8 px-4 md:px-12">
         <div class="md:flex md:items-center md:justify-between">
             <div class="flex space-x-6 md:order-2">
diff --git a/BeauFindlay/src/BeauFindlay.Client/Layout/MainLayout.razor b/BeauFindlay/src/BeauFindlay.Client/Layout/MainLayout.razor
index 5574a1f..9a486ee 100644
--- a/BeauFindlay/src/BeauFindlay.Client/Layout/MainLayout.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/Layout/MainLayout.razor
@@ -1,6 +1,6 @@
 @inherits LayoutComponentBase
 
-<div class="flex flex-col min-h-screen">
+<div class="flex flex-col min-h-screen fade-in">
     <NavBar/>
     
     <div class="px-4 md:px-12 py-4">
diff --git a/BeauFindlay/src/BeauFindlay.Client/Layout/NavBar.razor b/BeauFindlay/src/BeauFindlay.Client/Layout/NavBar.razor
index f6684b3..74d932b 100644
--- a/BeauFindlay/src/BeauFindlay.Client/Layout/NavBar.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/Layout/NavBar.razor
@@ -1,4 +1,4 @@
-<nav class="flex items-center justify-center py-12 space-x-8 fade-in">
+<nav class="flex items-center justify-center py-12 space-x-8">
     <NavLink href="/" Match="NavLinkMatch.All" ActiveClass="border-l-2 border-r-2 px-2 rounded">
         Home
     </NavLink>
diff --git a/BeauFindlay/src/BeauFindlay.Client/Pages/About.razor b/BeauFindlay/src/BeauFindlay.Client/Pages/About.razor
index 9ad5f4d..c71ccbd 100644
--- a/BeauFindlay/src/BeauFindlay.Client/Pages/About.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/Pages/About.razor
@@ -13,16 +13,16 @@ else
     <h1 class="text-4xl">This app<span class="blinking-cursor">|</span></h1>
 }
 
-<p class="py-4 text-xl">Below is a brief outline of how this app is made and what technologies are used. If you'd like to dive straight in then full project is available on my <a href="https://github.com/bdfin/my-portfolio" target="_blank" class="underline underline-offset-2">GitHub</a>.</p>
+<p class="py-4 text-xl">Below is a brief outline of how this app is made and what technologies are used. If you'd like to dive straight in then full project is available on my <Anchor Href="https://github.com/bdfin/my-portfolio">GitHub</Anchor>.</p>
 
 <section class="py-6" id="@FrontEndSection">
     <h2 class="text-2xl">Front-end</h2>
     
-    <p class="py-4">I wanted to create a decent, modern client-side experience for this app and given my <em class="text-xs">(very...)</em> limited front-end expertise I decided to choose <a href="https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor" target="_blank" class="underline underline-offset-2">.NET Blazor Webassembly</a>. Blazor is Microsoft's take on component-based SPAs (single page applications) and offers us back-end focussed devs a way of producing decent client experiences without needing to dive into another front-end specific technology.</p>
+    <p class="py-4">I wanted to create a decent, modern client-side experience for this app and given my <em class="text-xs">(very...)</em> limited front-end expertise I decided to choose <Anchor Href="https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor">.NET Blazor Webassembly</Anchor>. Blazor is Microsoft's take on component-based SPAs (single page applications) and offers us back-end focussed devs a way of producing decent client experiences without needing to dive into another front-end specific technology.</p>
     
-    <p class="py-4">Blazor traditionally came in two flavours, server and webassembly with an additional third option (Blazor Web App) recently released with .NET 8 which is an amalgamation of both. <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-8.0#blazor-server" target="_blank" class="underline underline-offset-2">Blazor Server</a> initially generates content on the server and utilises web-sockets to communicate dynamic UI updates with the client without requiring a page load, whereas <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-8.0#blazor-webassembly" target="_blank" class="underline underline-offset-2">Blazor Webassembly</a> downloads the entire app to the client browser on first load alongside a light-weight .NET run-time to execute code directly on the browsers UI thread.</p>
+    <p class="py-4">Blazor traditionally came in two flavours, server and webassembly with an additional third option (Blazor Web App) recently released with .NET 8 which is an amalgamation of both. <Anchor Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-8.0#blazor-server">Blazor Server</Anchor> initially generates content on the server and utilises web-sockets to communicate dynamic UI updates with the client without requiring a page load, whereas <Anchor Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-8.0#blazor-webassembly">Blazor Webassembly</Anchor> downloads the entire app to the client browser on first load alongside a light-weight .NET run-time to execute code directly on the browsers UI thread.</p>
     
-    <p class="py-4">As Blazor server requires a dedicated server to host the application, I chose Blazor webassembly to enable me to host this app for free using an <a href="https://azure.microsoft.com/en-gb/products/app-service/static" target="_blank" class="underline underline-offset-2">Azure Static Web App</a>. You can read more about this in the <a @onclick="() => ScrollToElementAsync(HostingSection)" class="underline underline-offset-2 cursor-pointer">hosting</a> section.</p>
+    <p class="py-4">As Blazor server requires a dedicated server to host the application, I chose Blazor webassembly to enable me to host this app for free using an <Anchor Href="https://azure.microsoft.com/en-gb/products/app-service/static">Azure Static Web App</Anchor>. You can read more about this in the <a @onclick="() => ScrollToElementAsync(HostingSection)" class="underline underline-offset-2 cursor-pointer">hosting</a> section.</p>
 </section>
 
 <section class="py-6" id="@BackEndSection">
diff --git a/BeauFindlay/src/BeauFindlay.Client/Pages/Contact.razor b/BeauFindlay/src/BeauFindlay.Client/Pages/Contact.razor
index 9ed2d5f..a40cf8b 100644
--- a/BeauFindlay/src/BeauFindlay.Client/Pages/Contact.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/Pages/Contact.razor
@@ -1,5 +1,4 @@
 @page "/contact"
-@using BeauFindlay.Shared.Contracts
 
 @inject HttpClient HttpClient
 @inject IJSRuntime JSRuntime
@@ -40,7 +39,7 @@
             </div>
         </div>
         <div class="mt-4">
-            <small>This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy" class="underline underline-offset-2">Privacy Policy</a> and <a href="https://policies.google.com/terms" class="underline underline-offset-2">Terms of Service</a> apply.</small>
+            <small>This site is protected by reCAPTCHA and the Google <Anchor Href="https://policies.google.com/privacy" Target="_blank">Privacy Policy</Anchor> and <Anchor Href="https://policies.google.com/terms" Target="_blank">Terms of Service</Anchor> apply.</small>
         </div>
         <div class="mt-4 flex items-center justify-center">
             <Button Type="submit" IsLoading="@isSubmitting">
diff --git a/BeauFindlay/src/BeauFindlay.Client/Pages/Home.razor b/BeauFindlay/src/BeauFindlay.Client/Pages/Home.razor
index e9418a5..85371db 100644
--- a/BeauFindlay/src/BeauFindlay.Client/Pages/Home.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/Pages/Home.razor
@@ -25,12 +25,12 @@
     </p>
 
     <p class="text-xl mt-4">
-        <Typewriter Text="I'm currently heading up the tech as CTO at a cool startup called un:hurd."/>
+        <Typewriter Text="I've worked with businesses at all sizes and stages and I'm currently heading up the tech as CTO at a cool startup called un:hurd."/>
     </p>
 }
 else
 {
-    <h1 class="text-4xl">Hi, I'm Beau.<span class="blinking-cursor">|</span></h1>
+    <h1 class="text-4xl">Hi, I'm Beau.</h1>
 
     <p class="text-xl mt-4">I'm a UK-based software engineer and I love building cool stuff.</p>
 
@@ -38,7 +38,7 @@ else
 
     <p class="text-xl mt-4">I mostly specialise in back-end C#/.NET development and I've built systems that scale for hundreds-of-thousands of global users.</p>
 
-    <p class="text-xl mt-4">I'm currently heading up the tech as CTO at a cool startup called <a href="https://unhurd.co.uk" target="_blank" class="underline">un:hurd</a>.</p>
+    <p class="text-xl mt-4">I've worked with businesses at all sizes and stages and I'm currently heading up the tech as CTO at a cool startup called <Anchor Href="https://unhurd.co.uk">un:hurd</Anchor>.</p>
 }
 
 
diff --git a/BeauFindlay/src/BeauFindlay.Client/_Imports.razor b/BeauFindlay/src/BeauFindlay.Client/_Imports.razor
index aaeab63..f279519 100644
--- a/BeauFindlay/src/BeauFindlay.Client/_Imports.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/_Imports.razor
@@ -10,6 +10,7 @@
 @using BeauFindlay.Client
 @using BeauFindlay.Client.Layout
 @using BeauFindlay.Client.Components.Alert
+@using BeauFindlay.Client.Components.Anchor
 @using BeauFindlay.Client.Components.Typewriter
 @using BeauFindlay.Client.Components.Button
 @using BeauFindlay.Client.Components.LoadingSpinner
diff --git a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.css b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.css
index 2e4bccb..e93f0ec 100644
--- a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.css
+++ b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.css
@@ -12,7 +12,7 @@
 }
 
 .fade-in {
-    animation: fadeInAnimation ease 6s;
+    animation: fadeInAnimation ease 3s;
     animation-iteration-count: 1;
     animation-fill-mode: forwards;
 }
diff --git a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
index 59cb078..562a466 100644
--- a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
+++ b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
@@ -965,7 +965,7 @@ video {
 }
 
 .fade-in {
-  animation: fadeInAnimation ease 6s;
+  animation: fadeInAnimation ease 3s;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
 }

From caf3718b0e506fb1bcef9800d0a0dec42ad547e6 Mon Sep 17 00:00:00 2001
From: Beau Findlay <me@beaufindlay.com>
Date: Tue, 12 Mar 2024 22:32:14 +0000
Subject: [PATCH 5/5] Change about page to coming soon

---
 .../Layout/MainLayout.razor                   |  2 +-
 .../src/BeauFindlay.Client/Pages/About.razor  | 76 +++++++++++--------
 .../BeauFindlay.Client/Pages/Contact.razor    |  4 +-
 .../wwwroot/css/app.min.css                   |  4 +
 4 files changed, 51 insertions(+), 35 deletions(-)

diff --git a/BeauFindlay/src/BeauFindlay.Client/Layout/MainLayout.razor b/BeauFindlay/src/BeauFindlay.Client/Layout/MainLayout.razor
index 9a486ee..d7ef8e5 100644
--- a/BeauFindlay/src/BeauFindlay.Client/Layout/MainLayout.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/Layout/MainLayout.razor
@@ -3,7 +3,7 @@
 <div class="flex flex-col min-h-screen fade-in">
     <NavBar/>
     
-    <div class="px-4 md:px-12 py-4">
+    <div class="flex-1 px-4 md:px-12 py-4">
         @Body
     </div>
 
diff --git a/BeauFindlay/src/BeauFindlay.Client/Pages/About.razor b/BeauFindlay/src/BeauFindlay.Client/Pages/About.razor
index c71ccbd..bd8e300 100644
--- a/BeauFindlay/src/BeauFindlay.Client/Pages/About.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/Pages/About.razor
@@ -2,50 +2,61 @@
 
 @inject IJSRuntime JSRuntime
 
-@if (!hasPreviouslyRendered)
+@if (comingSoon)
 {
-    <h1 class="text-4xl">
-        <Typewriter Text="This app"/>
-    </h1>
+    <div class="text-center">
+        <h1 class="text-4xl">Coming soon...</h1>
+    </div>
 }
 else
 {
-    <h1 class="text-4xl">This app<span class="blinking-cursor">|</span></h1>
+    @if (!hasPreviouslyRendered)
+    {
+        <h1 class="text-4xl">
+            <Typewriter Text="This app"/>
+        </h1>
+    }
+    else
+    {
+        <h1 class="text-4xl">This app<span class="blinking-cursor">|</span></h1>
+    }
+
+    <p class="py-4 text-xl">Below is a brief outline of how this app is made and what technologies are used. If you'd like to dive straight in then full project is available on my <Anchor Href="https://github.com/bdfin/my-portfolio">GitHub</Anchor>.</p>
+
+    <section class="py-6" id="@FrontEndSection">
+        <h2 class="text-2xl">Front-end</h2>
+
+        <p class="py-4">I wanted to create a decent, modern client-side experience for this app and given my <em class="text-xs">(very...)</em> limited front-end expertise I decided to choose <Anchor Href="https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor">.NET Blazor Webassembly</Anchor>. Blazor is Microsoft's take on component-based SPAs (single page applications) and offers us back-end focussed devs a way of producing decent client experiences without needing to dive into another front-end specific technology.</p>
+
+        <p class="py-4">Blazor traditionally came in two flavours, server and webassembly with an additional third option (Blazor Web App) recently released with .NET 8 which is an amalgamation of both. <Anchor Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-8.0#blazor-server">Blazor Server</Anchor> initially generates content on the server and utilises web-sockets to communicate dynamic UI updates with the client without requiring a page load, whereas <Anchor Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-8.0#blazor-webassembly">Blazor Webassembly</Anchor> downloads the entire app to the client browser on first load alongside a light-weight .NET run-time to execute code directly on the browsers UI thread.</p>
+
+        <p class="py-4">As Blazor server requires a dedicated server to host the application, I chose Blazor webassembly to enable me to host this app for free using an <Anchor Href="https://azure.microsoft.com/en-gb/products/app-service/static">Azure Static Web App</Anchor>. You can read more about this in the <a @onclick="() => ScrollToElementAsync(HostingSection)" class="underline underline-offset-2 cursor-pointer">hosting</a> section.</p>
+    </section>
+
+    <section class="py-6" id="@BackEndSection">
+        <h2 class="text-2xl pb-4">Back-end</h2>
+        <p class="my-4">As the </p>
+    </section>
+
+
+    <section class="py-6" id="@HostingSection">
+        <h2 class="text-2xl pb-4">Hosting</h2>
+        <p></p>
+    </section>
 }
 
-<p class="py-4 text-xl">Below is a brief outline of how this app is made and what technologies are used. If you'd like to dive straight in then full project is available on my <Anchor Href="https://github.com/bdfin/my-portfolio">GitHub</Anchor>.</p>
 
-<section class="py-6" id="@FrontEndSection">
-    <h2 class="text-2xl">Front-end</h2>
-    
-    <p class="py-4">I wanted to create a decent, modern client-side experience for this app and given my <em class="text-xs">(very...)</em> limited front-end expertise I decided to choose <Anchor Href="https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor">.NET Blazor Webassembly</Anchor>. Blazor is Microsoft's take on component-based SPAs (single page applications) and offers us back-end focussed devs a way of producing decent client experiences without needing to dive into another front-end specific technology.</p>
-    
-    <p class="py-4">Blazor traditionally came in two flavours, server and webassembly with an additional third option (Blazor Web App) recently released with .NET 8 which is an amalgamation of both. <Anchor Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-8.0#blazor-server">Blazor Server</Anchor> initially generates content on the server and utilises web-sockets to communicate dynamic UI updates with the client without requiring a page load, whereas <Anchor Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-8.0#blazor-webassembly">Blazor Webassembly</Anchor> downloads the entire app to the client browser on first load alongside a light-weight .NET run-time to execute code directly on the browsers UI thread.</p>
-    
-    <p class="py-4">As Blazor server requires a dedicated server to host the application, I chose Blazor webassembly to enable me to host this app for free using an <Anchor Href="https://azure.microsoft.com/en-gb/products/app-service/static">Azure Static Web App</Anchor>. You can read more about this in the <a @onclick="() => ScrollToElementAsync(HostingSection)" class="underline underline-offset-2 cursor-pointer">hosting</a> section.</p>
-</section>
-
-<section class="py-6" id="@BackEndSection">
-    <h2 class="text-2xl pb-4">Back-end</h2>
-    <p class="my-4">As the </p>
-</section>
-
-
-<section class="py-6" id="@HostingSection">
-    <h2 class="text-2xl pb-4">Hosting</h2>
-    <p></p>
-</section>
-
-<AnchorNavigation />
+<AnchorNavigation/>
 
 @code {
-    private const string ComponentKey  = "ComponentRendered_About";
+    private const string ComponentKey = "ComponentRendered_About";
     private const string FrontEndSection = "front-end";
     private const string BackEndSection = "back-end";
     private const string HostingSection = "hosting";
-    
+
     private bool hasPreviouslyRendered;
-    
+    private bool comingSoon = true;
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
@@ -59,7 +70,7 @@ else
             {
                 await JSRuntime.InvokeVoidAsync("localStorage.setItem", ComponentKey, "true");
             }
-            
+
             if (previousValue != hasPreviouslyRendered)
             {
                 StateHasChanged();
@@ -71,4 +82,5 @@ else
     {
         await JSRuntime.InvokeVoidAsync("scrollToElement", elementId);
     }
+
 }
\ No newline at end of file
diff --git a/BeauFindlay/src/BeauFindlay.Client/Pages/Contact.razor b/BeauFindlay/src/BeauFindlay.Client/Pages/Contact.razor
index a40cf8b..c84376c 100644
--- a/BeauFindlay/src/BeauFindlay.Client/Pages/Contact.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/Pages/Contact.razor
@@ -19,14 +19,14 @@
             <div class="sm:col-span-2">
                 <label for="name" class="block font-semibold leading-6">Name</label>
                 <div class="mt-2.5">
-                    <InputText id="name" @bind-Value="contactInput.Name" class="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600"/>
+                    <InputText id="name" @bind-Value="contactInput.Name" class="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600" autocomplete="given-name"/>
                     <ValidationMessage For="() => contactInput.Name" class="text-red-600"/>
                 </div>
             </div>
             <div class="sm:col-span-2">
                 <label for="email" class="block font-semibold leading-6">Email</label>
                 <div class="mt-2.5">
-                    <InputText id="email" @bind-Value="contactInput.Email" class="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600"/>
+                    <InputText id="email" @bind-Value="contactInput.Email" class="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600" autocomplete="email"/>
                     <ValidationMessage For="() => contactInput.Email" class="text-red-600"/>
                 </div>
             </div>
diff --git a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
index 562a466..399f64d 100644
--- a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
+++ b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
@@ -666,6 +666,10 @@ video {
   max-width: 36rem;
 }
 
+.flex-1 {
+  flex: 1 1 0%;
+}
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }