beau/my-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

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

Browse Source 
Track if homepage has been rendered
This commit is contained in:
Beau Findlay
2024-03-07 20:46:31 +00:00
committed by GitHub
parent d63ac83624 d96e13719a
commit 3affeac196
13 changed files with 347 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
BeauFindlay/BeauFindlay/Components/Typewriter/ITypewriterNotificationService.cs Normal file
View File

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

12
BeauFindlay/BeauFindlay/Components/Typewriter/Typewriter.razor
View File

@@ -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();

9
BeauFindlay/BeauFindlay/Components/Typewriter/TypewriterConstants.cs Normal file
View File

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

13
BeauFindlay/BeauFindlay/Components/Typewriter/TypewriterNotificationService.cs Normal file
View File

@@ -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;
}

19
BeauFindlay/BeauFindlay/Layout/Footer.razor Normal file
View File

@@ -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>

8
BeauFindlay/BeauFindlay/Layout/MainLayout.razor
View File

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

11
BeauFindlay/BeauFindlay/Layout/NavBar.razor Normal file
View File

@@ -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>

54
BeauFindlay/BeauFindlay/Pages/Home.razor
View File

@@ -2,35 +2,71 @@
@implements IDisposable
@inject IJSRuntime JSRuntime
<PageTitle>Home - Beau Findlay</PageTitle>
<div>
<h1 class="text-3xl">
<Typewriter Text="Hi! I'm Beau."/>
@if (!hasPreviouslyRendered)
{
<h1 class="text-4xl">
<Typewriter Text="Hi, I'm Beau."/>
</h1>
<p class="text-xl mt-8">
<Typewriter Text="I'm a software engineer and I love building cool stuff."/>
<p class="text-xl mt-4">
<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()

7
BeauFindlay/BeauFindlay/Pages/ThisApp.razor Normal file
View File

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

3
BeauFindlay/BeauFindlay/Program.cs
View File

@@ -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();

11
BeauFindlay/BeauFindlay/wwwroot/css/app.css
View File

@@ -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; }
}

198
BeauFindlay/BeauFindlay/wwwroot/css/app.min.css vendored
View File

@@ -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 {
margin-top: 2.5rem;
.mx-auto {
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 {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.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 {
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
.antialiased {
-webkit-font-smoothing: antialiased;
-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;
}
}

23
BeauFindlay/BeauFindlay/wwwroot/index.html
View File

@@ -3,18 +3,25 @@
<head>
<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="/"/>
<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" /> -->
<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>
<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">
Loading beaufindlay.com<span class="blinking-cursor">|</span>
</p>
</div>
</div>
<script src="_framework/blazor.webassembly.js"></script>