Merge pull request #4 from bdfin/add-home-page-interactivity

Track if homepage has been rendered

BeauFindlay/BeauFindlay/Components/Typewriter/ITypewriterNotificationService.cs

@@ -0,0 +1,7 @@
+namespace BeauFindlay.Components.Typewriter;
+
+public interface ITypewriterNotificationService
+{
+    event EventHandler<TypingCompletedEventArgs>? TypingCompleted;
+    void NotifyTypingCompleted(TypingCompletedEventArgs args);
+}

BeauFindlay/BeauFindlay/Components/Typewriter/Typewriter.razor

@@ -1,5 +1,7 @@
 @using System.Timers
 
+@inject ITypewriterNotificationService NotificationService
+
 @if (DisplayCursor)
 {
     <span>@currentText<span class="blinking-cursor">|</span></span>
@@ -10,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 = [];
@@ -23,6 +25,9 @@ else
     [Parameter]
     public string Text { get; set; } = "";
     
+    [Parameter]
+    public string? Name { get; set; }
+    
     public static event Action? OnAllTypingCompleted;
 
     protected override void OnInitialized()
@@ -76,6 +81,11 @@ else
             UpdateCursorVisibility();
             StartNextInstanceTyping();
 
+            if (!string.IsNullOrWhiteSpace(Name))
+            {
+                NotificationService.NotifyTypingCompleted(new TypingCompletedEventArgs(Name));
+            }
+            
             if (!instances.Any())
             {
                 OnAllTypingCompleted?.Invoke();

BeauFindlay/BeauFindlay/Components/Typewriter/TypewriterConstants.cs

@@ -0,0 +1,9 @@
+namespace BeauFindlay.Components.Typewriter;
+
+public static class TypewriterConstants
+{
+    public static class Name
+    {
+        public const string IntroComplete = nameof(IntroComplete);
+    }
+}

BeauFindlay/BeauFindlay/Components/Typewriter/TypewriterNotificationService.cs

@@ -0,0 +1,13 @@
+namespace BeauFindlay.Components.Typewriter;
+
+public class TypewriterNotificationService : ITypewriterNotificationService
+{
+    public event EventHandler<TypingCompletedEventArgs>? TypingCompleted;
+
+    public void NotifyTypingCompleted(TypingCompletedEventArgs args) => TypingCompleted?.Invoke(this, args);
+}
+
+public class TypingCompletedEventArgs(string typewriterInstanceId) : EventArgs
+{
+    public string TypewriterInstanceId { get; set; } = typewriterInstanceId;
+}

BeauFindlay/BeauFindlay/Layout/Footer.razor

@@ -0,0 +1,19 @@
+<footer class="mt-auto fade-in">
+    <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="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-xl"></i>
+                </a>
+                <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-xl"></i>
+                </a>
+            </div>
+            <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

@@ -1,3 +1,11 @@
 @inherits LayoutComponentBase
 
-@Body
+<div class="flex flex-col min-h-screen">
+    <NavBar/>
+    
+    <div class="px-4 md:px-8">
+        @Body
+    </div>
+
+    <Footer></Footer>
+</div>

BeauFindlay/BeauFindlay/Layout/NavBar.razor

@@ -0,0 +1,11 @@
+<nav class="flex items-center justify-center py-12 space-x-8 fade-in">
+    <NavLink href="/" Match="NavLinkMatch.All" ActiveClass="border-l-2 border-r-2 px-2 rounded">
+        Home
+    </NavLink>
+    <NavLink href="/contact" Match="NavLinkMatch.All" ActiveClass="border-l-2 border-r-2 px-2 rounded">
+        Contact
+    </NavLink>
+    <NavLink href="/this" Match="NavLinkMatch.All" ActiveClass="border-l-2 border-r-2 px-2 rounded">
+        This App
+    </NavLink>
+</nav>

BeauFindlay/BeauFindlay/Pages/Home.razor

@@ -2,35 +2,71 @@
 
 @implements IDisposable
 
+@inject IJSRuntime JSRuntime
+
 <PageTitle>Home - Beau Findlay</PageTitle>
 
-<div>
+@if (!hasPreviouslyRendered)
-    <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 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 font-semibold">
         <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've built 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-3xl mt-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 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>
+}
+
 
 @code {
+    private const string ComponentKey  = "ComponentRendered_Home";
+    private bool hasPreviouslyRendered;
     
-    protected override void OnInitialized()
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
         {
             Typewriter.OnAllTypingCompleted += HandleTypingCompleted;
+            
+            var renderedBeforeAsString = await JSRuntime.InvokeAsync<string>("localStorage.getItem", ComponentKey);
+
+            var previousValue = hasPreviouslyRendered;
+            hasPreviouslyRendered = !string.IsNullOrEmpty(renderedBeforeAsString) && bool.Parse(renderedBeforeAsString);
+
+            if (!hasPreviouslyRendered)
+            {
+                await JSRuntime.InvokeVoidAsync("localStorage.setItem", ComponentKey, "true");
+            }
+            
+            if (previousValue != hasPreviouslyRendered)
+            {
+                StateHasChanged();
+            }
+        }
     }
 
     private static void HandleTypingCompleted()

BeauFindlay/BeauFindlay/Pages/ThisApp.razor

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

BeauFindlay/BeauFindlay/Program.cs

@@ -1,4 +1,5 @@
 using BeauFindlay;
+using BeauFindlay.Components.Typewriter;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 
@@ -8,4 +9,6 @@ builder.RootComponents.Add<HeadOutlet>("head::after");
 
 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
 
+builder.Services.AddSingleton<ITypewriterNotificationService, TypewriterNotificationService>();
+
 await builder.Build().RunAsync();

BeauFindlay/BeauFindlay/wwwroot/css/app.css

@@ -10,3 +10,14 @@
 .blinking-cursor {
     animation: blink 1s step-end infinite;
 }
+
+.fade-in {
+    animation: fadeInAnimation ease 6s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fadeInAnimation {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}

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

@@ -544,12 +544,29 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .static {
   position: static;
 }
 
-.mt-10 {
+.mx-auto {
-  margin-top: 2.5rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mt-16 {
+  margin-top: 4rem;
 }
 
 .mt-4 {
@@ -560,14 +577,34 @@ video {
   margin-top: 2rem;
 }
 
+.mt-auto {
+  margin-top: auto;
+}
+
+.mt-10 {
+  margin-top: 2.5rem;
+}
+
 .flex {
   display: flex;
 }
 
+.h-20 {
+  height: 5rem;
+}
+
+.h-full {
+  height: 100%;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
 
+.flex-col {
+  flex-direction: column;
+}
+
 .items-center {
   align-items: center;
 }
@@ -576,6 +613,30 @@ video {
   justify-content: center;
 }
 
+.space-x-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(2rem * var(--tw-space-x-reverse));
+  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.border-l-2 {
+  border-left-width: 2px;
+}
+
+.border-r-2 {
+  border-right-width: 2px;
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -585,6 +646,36 @@ video {
   padding: 2rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
+.py-28 {
+  padding-top: 7rem;
+  padding-bottom: 7rem;
+}
+
+.py-20 {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+}
+
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
 .font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -594,14 +685,9 @@ video {
   line-height: 2rem;
 }
 
-.text-3xl {
+.text-4xl {
-  font-size: 1.875rem;
+  font-size: 2.25rem;
-  line-height: 2.25rem;
+  line-height: 2.5rem;
-}
-
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
 }
 
 .text-xl {
@@ -609,10 +695,34 @@ video {
   line-height: 1.75rem;
 }
 
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .font-semibold {
   font-weight: 600;
 }
 
+.leading-5 {
+  line-height: 1.25rem;
+}
+
+.text-slate-100 {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity));
+}
+
+.text-slate-200 {
+  --tw-text-opacity: 1;
+  color: rgb(226 232 240 / var(--tw-text-opacity));
+}
+
 .text-slate-50 {
   --tw-text-opacity: 1;
   color: rgb(248 250 252 / var(--tw-text-opacity));
@@ -622,17 +732,13 @@ video {
   text-decoration-line: underline;
 }
 
-.underline-offset-2 {
-  text-underline-offset: 2px;
-}
-
 .underline-offset-4 {
   text-underline-offset: 4px;
 }
 
-.subpixel-antialiased {
+.antialiased {
-  -webkit-font-smoothing: auto;
+  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: auto;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 @keyframes blink {
@@ -648,3 +754,61 @@ video {
 .blinking-cursor {
   animation: blink 1s step-end infinite;
 }
+
+.fade-in {
+  animation: fadeInAnimation ease 6s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+
+@keyframes fadeInAnimation {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.hover\:text-slate-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
+@media (min-width: 768px) {
+  .md\:order-1 {
+    order: 1;
+  }
+
+  .md\:order-2 {
+    order: 2;
+  }
+
+  .md\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:items-center {
+    align-items: center;
+  }
+
+  .md\:justify-between {
+    justify-content: space-between;
+  }
+
+  .md\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:p-8 {
+    padding: 2rem;
+  }
+}

BeauFindlay/BeauFindlay/wwwroot/index.html

@@ -2,22 +2,29 @@
 <html lang="en">
 
 <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0"/>
     <title>Beau Findlay</title>
-    <base href="/" />
+    <base href="/"/>
-    <link rel="stylesheet" href="css/app.min.css" />
+    <link rel="stylesheet"
-    <!-- If you add any scoped CSS files, uncomment the following to load them
+          href="css/app.min.css"/>
-    <link href="BeauFindlay.styles.css" rel="stylesheet" /> -->
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+          integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+          crossorigin="anonymous"
+          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="p-8">
+<div id="app" class="h-full">
-        <div class="flex items-center justify-center text-xl">
+    <div class="flex items-center justify-center text-2xl">
-            <p>Loading beaufindlay.com<span class="blinking-cursor">|</span></p>
+        <p class="py-10">
+            Loading beaufindlay.com<span class="blinking-cursor">|</span>
+        </p>
     </div>
-    </div>
+</div>
-    <script src="_framework/blazor.webassembly.js"></script>
+<script src="_framework/blazor.webassembly.js"></script>
 </body>
 
 </html>