From ffcfa02cdd4420d3085f0f0f1e437740b81ace61 Mon Sep 17 00:00:00 2001 From: Beau Findlay Date: Thu, 7 Mar 2024 09:20:48 +0000 Subject: [PATCH 1/4] Add footer and create typewriter event service --- .../ITypewriterNotificationService.cs | 7 + .../Typewriter/Typewriter.razor | 10 ++ .../Typewriter/TypewriterConstants.cs | 9 ++ .../TypewriterNotificationService.cs | 13 ++ BeauFindlay/BeauFindlay/Layout/Footer.razor | 17 +++ .../BeauFindlay/Layout/MainLayout.razor | 17 ++- BeauFindlay/BeauFindlay/Pages/Home.razor | 2 +- BeauFindlay/BeauFindlay/Program.cs | 3 + BeauFindlay/BeauFindlay/_Imports.razor | 2 +- BeauFindlay/BeauFindlay/wwwroot/css/app.css | 11 ++ .../BeauFindlay/wwwroot/css/app.min.css | 120 ++++++++++++++++-- BeauFindlay/BeauFindlay/wwwroot/index.html | 32 +++-- 12 files changed, 217 insertions(+), 26 deletions(-) create mode 100644 BeauFindlay/BeauFindlay/Features/Typewriter/ITypewriterNotificationService.cs rename BeauFindlay/BeauFindlay/{Components => Features}/Typewriter/Typewriter.razor (89%) create mode 100644 BeauFindlay/BeauFindlay/Features/Typewriter/TypewriterConstants.cs create mode 100644 BeauFindlay/BeauFindlay/Features/Typewriter/TypewriterNotificationService.cs create mode 100644 BeauFindlay/BeauFindlay/Layout/Footer.razor diff --git a/BeauFindlay/BeauFindlay/Features/Typewriter/ITypewriterNotificationService.cs b/BeauFindlay/BeauFindlay/Features/Typewriter/ITypewriterNotificationService.cs new file mode 100644 index 0000000..0bb711a --- /dev/null +++ b/BeauFindlay/BeauFindlay/Features/Typewriter/ITypewriterNotificationService.cs @@ -0,0 +1,7 @@ +namespace BeauFindlay.Features.Typewriter; + +public interface ITypewriterNotificationService +{ + event EventHandler? TypingCompleted; + void NotifyTypingCompleted(TypingCompletedEventArgs args); +} \ No newline at end of file diff --git a/BeauFindlay/BeauFindlay/Components/Typewriter/Typewriter.razor b/BeauFindlay/BeauFindlay/Features/Typewriter/Typewriter.razor similarity index 89% rename from BeauFindlay/BeauFindlay/Components/Typewriter/Typewriter.razor rename to BeauFindlay/BeauFindlay/Features/Typewriter/Typewriter.razor index 6ee47ac..c90e0da 100644 --- a/BeauFindlay/BeauFindlay/Components/Typewriter/Typewriter.razor +++ b/BeauFindlay/BeauFindlay/Features/Typewriter/Typewriter.razor @@ -1,5 +1,7 @@ @using System.Timers +@inject ITypewriterNotificationService NotificationService + @if (DisplayCursor) { @currentText| @@ -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() @@ -75,6 +80,11 @@ else delayTimer.Dispose(); UpdateCursorVisibility(); StartNextInstanceTyping(); + + if (!string.IsNullOrWhiteSpace(Name)) + { + NotificationService.NotifyTypingCompleted(new TypingCompletedEventArgs(Name)); + } if (!instances.Any()) { diff --git a/BeauFindlay/BeauFindlay/Features/Typewriter/TypewriterConstants.cs b/BeauFindlay/BeauFindlay/Features/Typewriter/TypewriterConstants.cs new file mode 100644 index 0000000..57ea318 --- /dev/null +++ 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); + } +} \ No newline at end of file diff --git a/BeauFindlay/BeauFindlay/Features/Typewriter/TypewriterNotificationService.cs b/BeauFindlay/BeauFindlay/Features/Typewriter/TypewriterNotificationService.cs new file mode 100644 index 0000000..8c00ca7 --- /dev/null +++ b/BeauFindlay/BeauFindlay/Features/Typewriter/TypewriterNotificationService.cs @@ -0,0 +1,13 @@ +namespace BeauFindlay.Features.Typewriter; + +public class TypewriterNotificationService : ITypewriterNotificationService +{ + public event EventHandler? TypingCompleted; + + public void NotifyTypingCompleted(TypingCompletedEventArgs args) => TypingCompleted?.Invoke(this, args); +} + +public class TypingCompletedEventArgs(string typewriterInstanceId) : EventArgs +{ + public string TypewriterInstanceId { get; set; } = typewriterInstanceId; +} \ No newline at end of file diff --git a/BeauFindlay/BeauFindlay/Layout/Footer.razor b/BeauFindlay/BeauFindlay/Layout/Footer.razor new file mode 100644 index 0000000..f9ac34c --- /dev/null +++ b/BeauFindlay/BeauFindlay/Layout/Footer.razor @@ -0,0 +1,17 @@ + \ No newline at end of file diff --git a/BeauFindlay/BeauFindlay/Layout/MainLayout.razor b/BeauFindlay/BeauFindlay/Layout/MainLayout.razor index e1a9a75..70c5977 100644 --- a/BeauFindlay/BeauFindlay/Layout/MainLayout.razor +++ b/BeauFindlay/BeauFindlay/Layout/MainLayout.razor @@ -1,3 +1,18 @@ @inherits LayoutComponentBase -@Body +@inject ITypewriterNotificationService TypingNotification + +
+
+ @Body +
+ +
+ +
+ + +@code { + + +} \ No newline at end of file diff --git a/BeauFindlay/BeauFindlay/Pages/Home.razor b/BeauFindlay/BeauFindlay/Pages/Home.razor index 71f4631..74538d8 100644 --- a/BeauFindlay/BeauFindlay/Pages/Home.razor +++ b/BeauFindlay/BeauFindlay/Pages/Home.razor @@ -10,7 +10,7 @@

- +

diff --git a/BeauFindlay/BeauFindlay/Program.cs b/BeauFindlay/BeauFindlay/Program.cs index ee6f99b..f59c195 100644 --- 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("head::after"); builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); +builder.Services.AddSingleton(); + await builder.Build().RunAsync(); diff --git a/BeauFindlay/BeauFindlay/_Imports.razor b/BeauFindlay/BeauFindlay/_Imports.razor index 6c21cbd..58fe83c 100644 --- 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 \ No newline at end of file +@using BeauFindlay.Features.Typewriter \ No newline at end of file diff --git a/BeauFindlay/BeauFindlay/wwwroot/css/app.css b/BeauFindlay/BeauFindlay/wwwroot/css/app.css index 1475925..9879179 100644 --- a/BeauFindlay/BeauFindlay/wwwroot/css/app.css +++ b/BeauFindlay/BeauFindlay/wwwroot/css/app.css @@ -9,4 +9,15 @@ .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; } } \ No newline at end of file diff --git a/BeauFindlay/BeauFindlay/wwwroot/css/app.min.css b/BeauFindlay/BeauFindlay/wwwroot/css/app.min.css index 8db0cbb..0ffebbe 100644 --- 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; } @@ -647,4 +692,57 @@ 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; + } } \ No newline at end of file diff --git a/BeauFindlay/BeauFindlay/wwwroot/index.html b/BeauFindlay/BeauFindlay/wwwroot/index.html index 9360eef..aa58011 100644 --- a/BeauFindlay/BeauFindlay/wwwroot/index.html +++ b/BeauFindlay/BeauFindlay/wwwroot/index.html @@ -2,22 +2,30 @@ - - - Beau Findlay - - - + + + Beau + Findlay + + + -
-
-

Loading beaufindlay.com|

-
+
+
+

+ Loading beaufindlay.com| +

- +
+ From 48a78dd2413c9e211b4c88e0184c18febfcfb316 Mon Sep 17 00:00:00 2001 From: Beau Findlay Date: Thu, 7 Mar 2024 16:00:01 +0000 Subject: [PATCH 2/4] Update footer and home content --- .../Features/Typewriter/Typewriter.razor | 2 +- BeauFindlay/BeauFindlay/Layout/Footer.razor | 16 ++-- .../BeauFindlay/Layout/MainLayout.razor | 14 ++-- BeauFindlay/BeauFindlay/Pages/Home.razor | 52 +++++++++--- BeauFindlay/BeauFindlay/Pages/ThisApp.razor | 7 ++ .../BeauFindlay/wwwroot/css/app.min.css | 80 +++++++++++++++++-- BeauFindlay/BeauFindlay/wwwroot/index.html | 5 +- 7 files changed, 143 insertions(+), 33 deletions(-) create mode 100644 BeauFindlay/BeauFindlay/Pages/ThisApp.razor diff --git a/BeauFindlay/BeauFindlay/Features/Typewriter/Typewriter.razor b/BeauFindlay/BeauFindlay/Features/Typewriter/Typewriter.razor index c90e0da..a85104f 100644 --- a/BeauFindlay/BeauFindlay/Features/Typewriter/Typewriter.razor +++ b/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 instances = []; diff --git a/BeauFindlay/BeauFindlay/Layout/Footer.razor b/BeauFindlay/BeauFindlay/Layout/Footer.razor index f9ac34c..906da2b 100644 --- a/BeauFindlay/BeauFindlay/Layout/Footer.razor +++ b/BeauFindlay/BeauFindlay/Layout/Footer.razor @@ -1,17 +1,19 @@ -