Update footer and home content

BeauFindlay/BeauFindlay/Features/Typewriter/Typewriter.razor

@@ -12,7 +12,7 @@ else
 }
 
 @code {
-    private const int typingDelayMilliseconds = 80;
+    private const int typingDelayMilliseconds = 50;
     private const int lineEndDelayMilliseconds = 1000;
 
     private static List<Typewriter> instances = [];

BeauFindlay/BeauFindlay/Layout/Footer.razor

@@ -1,17 +1,19 @@
-<footer class="mt-auto fade-in" aria-labelledby="footer-heading">
+<footer class="mt-auto fade-in">
-    <div class="mx-auto max-w-7xl p-8 lg:p-8">
+    <div class="mx-auto p-8 lg:p-8">
         <div class="md:flex md:items-center md:justify-between">
             <div class="flex space-x-6 md:order-2">
-                <a href="#" class="text-slate-200 hover:text-slate-500">
+                <a href="https://github.com/bdfin" class="text-slate-200 hover:text-slate-500">
                     <span class="sr-only">GitHub</span>
-                    <i class="fa-brands fa-github fa-lg"></i>
+                    <i class="fa-brands fa-github fa-xl"></i>
                 </a>
-                <a href="#" class="text-slate-200 hover:text-slate-500">
+                <a href="https://www.linkedin.com/in/beau-findlay/" class="text-slate-200 hover:text-slate-500">
                     <span class="sr-only">YouTube</span>
-                    <i class="fa-brands fa-linkedin fa-lg"></i>
+                    <i class="fa-brands fa-linkedin fa-xl"></i>
                 </a>
             </div>
-            <p class="mt-8 text-xs leading-5 text-slate-200 md:order-1 md:mt-0">&copy; @DateTime.UtcNow.Year Beau Findlay. All rights reserved.</p>
+            <p class="mt-8 text-xs leading-5 text-slate-100 md:order-1 md:mt-0">
+                &copy; @DateTime.UtcNow.Year Beau Findlay. All rights reserved.
+            </p>
         </div>
     </div>
 </footer>

BeauFindlay/BeauFindlay/Layout/MainLayout.razor

@@ -3,14 +3,18 @@
 @inject ITypewriterNotificationService TypingNotification
 
 <div class="flex flex-col min-h-screen">
-    <div class="p-8">
+    <nav class="flex items-center justify-center h-20 space-x-6">
+        <NavLink href="/" Match="NavLinkMatch.All" ActiveClass="border-l-2 border-r-2 px-2 rounded">Home</NavLink>
+        <NavLink href="/this" Match="NavLinkMatch.All" ActiveClass="border-l-2 border-r-2 px-2 rounded">This App</NavLink>
+        <NavLink href="/contact" Match="NavLinkMatch.All" ActiveClass="border-l-2 border-r-2 px-2 rounded">Contact</NavLink>
+    </nav>
+    
+    <div class="px-4 md:px-8">
         @Body
     </div>
-    
-        <Footer></Footer>
-    
-</div>
 
+    <Footer></Footer>
+</div>
 
 @code {
 

BeauFindlay/BeauFindlay/Pages/Home.razor

@@ -4,33 +4,63 @@
 
 <PageTitle>Home - Beau Findlay</PageTitle>
 
-<div>
+@if (isFirstRender)
-    <h1 class="text-3xl">
+{
-        <Typewriter Text="Hi! I'm Beau."/>
+    <h1 class="text-4xl">
+        <Typewriter Text="Hi, I'm Beau."/>
     </h1>
 
-    <p class="text-xl mt-8">
+    <p class="text-xl mt-4">
-        <Typewriter Name="@TypewriterConstants.Name.IntroComplete" Text="I'm a software engineer and I love building cool stuff."/>
+        <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-10 underline underline-offset-4">
+    <h2 class="text-2xl mt-16 underline underline-offset-4">
         <Typewriter Text="A bit about me"/>
     </h2>
 
     <p class="text-xl mt-4">
-        <Typewriter Text="I mostly specialise in back-end .NET development and I build and maintain systems that scale for hundreds-of-thousands of global users."/>
+        <Typewriter Text="I mostly specialise in back-end C#/.NET development and I build systems that scale for hundreds-of-thousands of global users."/>
     </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."/>
     </p>
-</div>
+}
+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>
+
+    <h2 class="text-2xl mt-16 underline underline-offset-4">
+        A bit about me
+    </h2>
+
+    <p class="text-xl mt-4">
+        I mostly specialise in back-end C#/.NET development and I build 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 un:hurd.
+    </p>
+}
+
 
 @code {
-
+    private bool isFirstRender = true;
-    protected override void OnInitialized()
+    
+    protected override void OnAfterRender(bool firstRender)
     {
-        Typewriter.OnAllTypingCompleted += HandleTypingCompleted;
+        if (firstRender)
+        {
+            isFirstRender = false;
+            
+            Typewriter.OnAllTypingCompleted += HandleTypingCompleted;
+        }
     }
 
     private static void HandleTypingCompleted()

BeauFindlay/BeauFindlay/Pages/ThisApp.razor

@@ -0,0 +1,7 @@
+@page "/this"
+
+<h3>ThisApp</h3>
+
+@code {
+    
+}

BeauFindlay/BeauFindlay/wwwroot/css/app.min.css

@@ -565,8 +565,8 @@ video {
   margin-right: auto;
 }
 
-.mt-10 {
+.mt-16 {
-  margin-top: 2.5rem;
+  margin-top: 4rem;
 }
 
 .mt-4 {
@@ -589,12 +589,16 @@ video {
   height: 100%;
 }
 
-.min-h-screen {
+.h-10 {
-  min-height: 100vh;
+  height: 2.5rem;
 }
 
-.max-w-7xl {
+.h-20 {
-  max-width: 80rem;
+  height: 5rem;
+}
+
+.min-h-screen {
+  min-height: 100vh;
 }
 
 .flex-col {
@@ -615,6 +619,27 @@ video {
   margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-l-2 {
+  border-left-width: 2px;
+}
+
+.border-r-2 {
+  border-right-width: 2px;
+}
+
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -624,11 +649,25 @@ video {
   padding: 2rem;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
 .py-10 {
   padding-top: 2.5rem;
   padding-bottom: 2.5rem;
 }
 
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -643,6 +682,11 @@ video {
   line-height: 2.25rem;
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -653,6 +697,11 @@ video {
   line-height: 1rem;
 }
 
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
 .leading-5 {
   line-height: 1.25rem;
 }
@@ -667,6 +716,11 @@ video {
   color: rgb(248 250 252 / var(--tw-text-opacity));
 }
 
+.text-slate-100 {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -675,6 +729,11 @@ video {
   text-underline-offset: 4px;
 }
 
+.antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 .subpixel-antialiased {
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
@@ -739,6 +798,15 @@ video {
   .md\:justify-between {
     justify-content: space-between;
   }
+
+  .md\:p-8 {
+    padding: 2rem;
+  }
+
+  .md\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
 }
 
 @media (min-width: 1024px) {

BeauFindlay/BeauFindlay/wwwroot/index.html

@@ -5,8 +5,7 @@
     <meta charset="utf-8"/>
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0"/>
-    <title>Beau
+    <title>Beau Findlay</title>
-        Findlay</title>
     <base href="/"/>
     <link rel="stylesheet"
           href="css/app.min.css"/>
@@ -17,7 +16,7 @@
           referrerpolicy="no-referrer"/>
 </head>
 
-<body class="bg-black font-mono text-slate-50 min-h-screen subpixel-antialiased">
+<body class="bg-black font-mono text-slate-50 min-h-screen antialiased">
 <div id="app" class="h-full">
     <div class="flex items-center justify-center text-2xl">
         <p class="py-10">