Add footer and create typewriter event service

BeauFindlay/BeauFindlay/Features/Typewriter/ITypewriterNotificationService.cs

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

BeauFindlay/BeauFindlay/Features/Typewriter/Typewriter.razor

@@ -1,5 +1,7 @@
 @using System.Timers
 
+@inject ITypewriterNotificationService NotificationService
+
 @if (DisplayCursor)
 {
     <span>@currentText<span class="blinking-cursor">|</span></span>
@@ -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/Features/Typewriter/TypewriterConstants.cs

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

BeauFindlay/BeauFindlay/Features/Typewriter/TypewriterNotificationService.cs

@@ -0,0 +1,13 @@
+namespace BeauFindlay.Features.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,17 @@
+<footer class="mt-auto fade-in" aria-labelledby="footer-heading">
+    <div class="mx-auto max-w-7xl 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">
+                    <span class="sr-only">GitHub</span>
+                    <i class="fa-brands fa-github fa-lg"></i>
+                </a>
+                <a href="#" class="text-slate-200 hover:text-slate-500">
+                    <span class="sr-only">YouTube</span>
+                    <i class="fa-brands fa-linkedin fa-lg"></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>
+        </div>
+    </div>
+</footer>

BeauFindlay/BeauFindlay/Layout/MainLayout.razor

@@ -1,3 +1,18 @@
 @inherits LayoutComponentBase
 
-@Body
+@inject ITypewriterNotificationService TypingNotification
+
+<div class="flex flex-col min-h-screen">
+    <div class="p-8">
+        @Body
+    </div>
+    
+        <Footer></Footer>
+    
+</div>
+
+
+@code {
+
+
+}

BeauFindlay/BeauFindlay/Pages/Home.razor

@@ -10,7 +10,7 @@
     </h1>
 
     <p class="text-xl mt-8">
-        <Typewriter Text="I'm a software engineer and I love building cool stuff."/>
+        <Typewriter Name="@TypewriterConstants.Name.IntroComplete" Text="I'm a software engineer and I love building cool stuff."/>
     </p>
 
     <h2 class="text-2xl mt-10 underline underline-offset-4">

BeauFindlay/BeauFindlay/Program.cs

@@ -1,4 +1,5 @@
 using BeauFindlay;
+using BeauFindlay.Features.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/_Imports.razor

@@ -8,4 +8,4 @@
 @using Microsoft.JSInterop
 @using BeauFindlay
 @using BeauFindlay.Layout
-@using BeauFindlay.Components.Typewriter
+@using BeauFindlay.Features.Typewriter

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,10 +544,27 @@ 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;
 }
 
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .mt-10 {
   margin-top: 2.5rem;
 }
@@ -560,14 +577,30 @@ video {
   margin-top: 2rem;
 }
 
+.mt-auto {
+  margin-top: auto;
+}
+
 .flex {
   display: flex;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
 
+.max-w-7xl {
+  max-width: 80rem;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
 .items-center {
   align-items: center;
 }
@@ -576,6 +609,12 @@ 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)));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -585,6 +624,11 @@ video {
   padding: 2rem;
 }
 
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
 .font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -599,18 +643,23 @@ video {
   line-height: 2.25rem;
 }
 
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
 }
 
-.font-semibold {
+.text-xs {
-  font-weight: 600;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.leading-5 {
+  line-height: 1.25rem;
+}
+
+.text-slate-200 {
+  --tw-text-opacity: 1;
+  color: rgb(226 232 240 / var(--tw-text-opacity));
 }
 
 .text-slate-50 {
@@ -622,10 +671,6 @@ video {
   text-decoration-line: underline;
 }
 
-.underline-offset-2 {
-  text-underline-offset: 2px;
-}
-
 .underline-offset-4 {
   text-underline-offset: 4px;
 }
@@ -648,3 +693,56 @@ 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;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:p-8 {
+    padding: 2rem;
+  }
+}

BeauFindlay/BeauFindlay/wwwroot/index.html

@@ -2,22 +2,30 @@
 <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"
-    <title>Beau Findlay</title>
+          content="width=device-width, initial-scale=1.0"/>
-    <base href="/" />
+    <title>Beau
-    <link rel="stylesheet" href="css/app.min.css" />
+        Findlay</title>
-    <!-- If you add any scoped CSS files, uncomment the following to load them
+    <base href="/"/>
-    <link href="BeauFindlay.styles.css" rel="stylesheet" /> -->
+    <link rel="stylesheet"
+          href="css/app.min.css"/>
+    <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">
-    <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>