Add footer and create typewriter event service

2024-03-07 09:20:48 +00:00
parent d63ac83624
commit ffcfa02cdd
12 changed files with 217 additions and 26 deletions
--- a/BeauFindlay/BeauFindlay/Features/Typewriter/ITypewriterNotificationService.cs
+++ b/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);
+}
--- a/BeauFindlay/BeauFindlay/Components/Typewriter/Typewriter.razor
+++ b/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>
@@ -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();
--- a/BeauFindlay/BeauFindlay/Features/Typewriter/TypewriterConstants.cs
+++ b/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);
+    }
+}
--- a/BeauFindlay/BeauFindlay/Features/Typewriter/TypewriterNotificationService.cs
+++ b/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;
+}
--- a/BeauFindlay/BeauFindlay/Layout/Footer.razor
+++ b/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>
--- a/BeauFindlay/BeauFindlay/Layout/MainLayout.razor
+++ b/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 {
+
+
+}
--- a/BeauFindlay/BeauFindlay/Pages/Home.razor
+++ b/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">
--- a/BeauFindlay/BeauFindlay/Program.cs
+++ b/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();
--- a/BeauFindlay/BeauFindlay/_Imports.razor
+++ b/BeauFindlay/BeauFindlay/_Imports.razor
@@ -8,4 +8,4 @@
@using Microsoft.JSInterop
@using BeauFindlay
@using BeauFindlay.Layout
-@using BeauFindlay.Components.Typewriter
+@using BeauFindlay.Features.Typewriter
--- a/BeauFindlay/BeauFindlay/wwwroot/css/app.css
+++ b/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; }
+}
--- a/BeauFindlay/BeauFindlay/wwwroot/css/app.min.css
+++ b/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 {
-  font-weight: 600;
+.text-xs {
+  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;
+  }
+}
--- a/BeauFindlay/BeauFindlay/wwwroot/index.html
+++ b/BeauFindlay/BeauFindlay/wwwroot/index.html
@@ -2,22 +2,30 @@
 <html lang="en">

 <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Beau Findlay</title>
-    <base href="/" />
-    <link rel="stylesheet" href="css/app.min.css" />
-    <!-- If you add any scoped CSS files, uncomment the following to load them
-    <link href="BeauFindlay.styles.css" rel="stylesheet" /> -->
+    <meta charset="utf-8"/>
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0"/>
+    <title>Beau
+        Findlay</title>
+    <base href="/"/>
+    <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 class="flex items-center justify-center text-xl">
-            <p>Loading beaufindlay.com<span class="blinking-cursor">|</span></p>
+<div id="app" class="h-full">
+    <div class="flex items-center justify-center text-2xl">
+        <p class="py-10">
+            Loading beaufindlay.com<span class="blinking-cursor">|</span>
+        </p>
    </div>
-    </div>
-    <script src="_framework/blazor.webassembly.js"></script>
+</div>
+<script src="_framework/blazor.webassembly.js"></script>
 </body>

 </html>