Add about page

BeauFindlay/src/BeauFindlay.Client/Pages/About.razor

@@ -4,7 +4,7 @@
 
 <PageTitle>About - Beau Findlay</PageTitle>
 
-<div class="text-center pb-8">
+<div class="text-center pb-4" id="@TopSection">
     @if (!hasPreviouslyRendered)
     {
         <h1 class="text-4xl">
@@ -17,6 +17,12 @@
     }
 </div>
 
+<nav class="flex items-center justify-center py-8 space-x-8">
+    <a @onclick="() => ScrollToElementAsync(FrontEndSection)" class="underline underline-offset-2 cursor-pointer">Front-end</a>
+    <a @onclick="() => ScrollToElementAsync(BackEndSection)" class="underline underline-offset-2 cursor-pointer">Back-end</a>
+    <a @onclick="() => ScrollToElementAsync(HostingSection)" class="underline underline-offset-2 cursor-pointer">Hosting</a>
+</nav>
+
 <p class="py-4 text-xl">Below is an overview of how this simple app is made and what technologies are used. If you'd like to dive straight in, the full project is available on my <Anchor Href="https://github.com/bdfin/my-portfolio">GitHub</Anchor>.</p>
 
 <p class="pt-4 pb-8 text-xl">I'm planning to integrate a simple blog as part of this app that will dive into more specific implementation details so check back soon for more!</p>
@@ -50,12 +56,19 @@
 </section>
 
 
-<section class="py-12" id="@HostingSection">
+<section class="py-12 text-lg" id="@HostingSection">
     <h2 class="text-3xl pb-4">Hosting: <img src="images/azure-static-web-app-logo.png" class="inline w-auto h-6" alt="azure static web app logo"/> Microsoft Azure Static Web App</h2>
     
-    <p class="py-4"></p>
+    <p class="py-4">The goal of this project was to learn some new technologies and host the app as cheaply as possible. With this in mind I decided to go with a <Anchor Href="https://azure.microsoft.com/en-gb/products/app-service/static">Static Web App</Anchor> hosted on Microsoft Azure. Static Web Apps offer global distribution of static assets (the Blazor Webassembly app in this case) and offer integrated hosting for Azure Function App APIs.</p>
+    
+    <p class="py-4">Another cool feature of Static Web Apps is Azure's integration with GitHub actions to deploy both the client and server simultaneously and provide automatically deployed staging environments for pull-requests opened to the main branch. This made testing deployed changes much easier and cheaper than deploying an isolated testing/GA environment before releasing to the live version of the app.</p>
+    
+    <p class="py-4">Using Static Web Apps on Azure has meant that I have been able to build, deploy and serve this site and API completely free (with the exception of the domain name). The next thing on the roadmap is building a simple blog using an <Anchor Href="https://azure.microsoft.com/en-gb/products/azure-sql/database">Azure SQL database</Anchor> where I'll document the full process of writing and deploying this app so check back again soon.</p>
 </section>
 
+<nav class="flex items-center justify-center pb-8">
+    <a @onclick="() => ScrollToElementAsync(TopSection)" class="underline underline-offset-2 cursor-pointer">Top</a>
+</nav>
 
 <AnchorNavigation/>
 
@@ -64,9 +77,9 @@
     private const string FrontEndSection = "front-end";
     private const string BackEndSection = "back-end";
     private const string HostingSection = "hosting";
+    private const string TopSection = "top";
 
     private bool hasPreviouslyRendered;
-    private bool comingSoon = true;
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {

BeauFindlay/src/BeauFindlay.Client/Pages/Home.razor

@@ -10,19 +10,19 @@
         <Typewriter Text="Hi, I'm Beau."/>
     </h1>
 
-    <p class="text-xl mt-4">
+    <p class="text-xl py-4">
         <Typewriter Name="@TypewriterConstants.Name.IntroComplete" Text="I'm a UK-based software engineer and I love building cool stuff."/>
     </p>
 
-    <h2 class="text-2xl mt-16 font-semibold">
+    <h2 class="text-2xl pt-16 font-semibold">
         <Typewriter Text="A bit about me"/>
     </h2>
 
-    <p class="text-xl mt-4">
+    <p class="text-xl py-4">
         <Typewriter Text="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">
+    <p class="text-xl py-4">
         <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>
 }
@@ -30,13 +30,13 @@ else
 {
     <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>
+    <p class="text-xl py-4">I'm a UK-based software engineer and I love building cool stuff.</p>
 
-    <h2 class="text-3xl mt-16 font-semibold">A bit about me</h2>
+    <h2 class="text-3xl pt-16 font-semibold">A bit about me</h2>
 
-    <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 py-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'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>
+    <p class="text-xl py-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>
 }
 
 

BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css

@@ -801,6 +801,11 @@ video {
   padding-bottom: 2rem;
 }
 
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -825,6 +830,10 @@ video {
   padding-top: 2rem;
 }
 
+.pt-16 {
+  padding-top: 4rem;
+}
+
 .text-center {
   text-align: center;
 }

BeauFindlay/src/BeauFindlay.Client/wwwroot/index.html

@@ -17,8 +17,7 @@
     <title>Beau Findlay</title>
     <base href="/"/>
     <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
+    <link rel="icon" type="image/png" href="images/logo.png">
     <link rel="manifest" href="/site.webmanifest">
     <link rel="stylesheet"
           href="css/app.min.css"/>