Add anchor component
This commit is contained in:
@@ -13,16 +13,16 @@ else
|
||||
<h1 class="text-4xl">This app<span class="blinking-cursor">|</span></h1>
|
||||
}
|
||||
|
||||
<p class="py-4 text-xl">Below is a brief outline of how this app is made and what technologies are used. If you'd like to dive straight in then full project is available on my <a href="https://github.com/bdfin/my-portfolio" target="_blank" class="underline underline-offset-2">GitHub</a>.</p>
|
||||
<p class="py-4 text-xl">Below is a brief outline of how this app is made and what technologies are used. If you'd like to dive straight in then full project is available on my <Anchor Href="https://github.com/bdfin/my-portfolio">GitHub</Anchor>.</p>
|
||||
|
||||
<section class="py-6" id="@FrontEndSection">
|
||||
<h2 class="text-2xl">Front-end</h2>
|
||||
|
||||
<p class="py-4">I wanted to create a decent, modern client-side experience for this app and given my <em class="text-xs">(very...)</em> limited front-end expertise I decided to choose <a href="https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor" target="_blank" class="underline underline-offset-2">.NET Blazor Webassembly</a>. Blazor is Microsoft's take on component-based SPAs (single page applications) and offers us back-end focussed devs a way of producing decent client experiences without needing to dive into another front-end specific technology.</p>
|
||||
<p class="py-4">I wanted to create a decent, modern client-side experience for this app and given my <em class="text-xs">(very...)</em> limited front-end expertise I decided to choose <Anchor Href="https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor">.NET Blazor Webassembly</Anchor>. Blazor is Microsoft's take on component-based SPAs (single page applications) and offers us back-end focussed devs a way of producing decent client experiences without needing to dive into another front-end specific technology.</p>
|
||||
|
||||
<p class="py-4">Blazor traditionally came in two flavours, server and webassembly with an additional third option (Blazor Web App) recently released with .NET 8 which is an amalgamation of both. <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-8.0#blazor-server" target="_blank" class="underline underline-offset-2">Blazor Server</a> initially generates content on the server and utilises web-sockets to communicate dynamic UI updates with the client without requiring a page load, whereas <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-8.0#blazor-webassembly" target="_blank" class="underline underline-offset-2">Blazor Webassembly</a> downloads the entire app to the client browser on first load alongside a light-weight .NET run-time to execute code directly on the browsers UI thread.</p>
|
||||
<p class="py-4">Blazor traditionally came in two flavours, server and webassembly with an additional third option (Blazor Web App) recently released with .NET 8 which is an amalgamation of both. <Anchor Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-8.0#blazor-server">Blazor Server</Anchor> initially generates content on the server and utilises web-sockets to communicate dynamic UI updates with the client without requiring a page load, whereas <Anchor Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-8.0#blazor-webassembly">Blazor Webassembly</Anchor> downloads the entire app to the client browser on first load alongside a light-weight .NET run-time to execute code directly on the browsers UI thread.</p>
|
||||
|
||||
<p class="py-4">As Blazor server requires a dedicated server to host the application, I chose Blazor webassembly to enable me to host this app for free using an <a href="https://azure.microsoft.com/en-gb/products/app-service/static" target="_blank" class="underline underline-offset-2">Azure Static Web App</a>. You can read more about this in the <a @onclick="() => ScrollToElementAsync(HostingSection)" class="underline underline-offset-2 cursor-pointer">hosting</a> section.</p>
|
||||
<p class="py-4">As Blazor server requires a dedicated server to host the application, I chose Blazor webassembly to enable me to host this app for free using an <Anchor Href="https://azure.microsoft.com/en-gb/products/app-service/static">Azure Static Web App</Anchor>. You can read more about this in the <a @onclick="() => ScrollToElementAsync(HostingSection)" class="underline underline-offset-2 cursor-pointer">hosting</a> section.</p>
|
||||
</section>
|
||||
|
||||
<section class="py-6" id="@BackEndSection">
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
@page "/contact"
|
||||
@using BeauFindlay.Shared.Contracts
|
||||
|
||||
@inject HttpClient HttpClient
|
||||
@inject IJSRuntime JSRuntime
|
||||
@@ -40,7 +39,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<small>This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy" class="underline underline-offset-2">Privacy Policy</a> and <a href="https://policies.google.com/terms" class="underline underline-offset-2">Terms of Service</a> apply.</small>
|
||||
<small>This site is protected by reCAPTCHA and the Google <Anchor Href="https://policies.google.com/privacy" Target="_blank">Privacy Policy</Anchor> and <Anchor Href="https://policies.google.com/terms" Target="_blank">Terms of Service</Anchor> apply.</small>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center justify-center">
|
||||
<Button Type="submit" IsLoading="@isSubmitting">
|
||||
|
||||
@@ -25,12 +25,12 @@
|
||||
</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."/>
|
||||
<Typewriter Text="I've worked with businesses at all sizes and stages and I'm currently heading up the tech as CTO at a cool startup called un:hurd."/>
|
||||
</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<h1 class="text-4xl">Hi, I'm Beau.<span class="blinking-cursor">|</span></h1>
|
||||
<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>
|
||||
|
||||
@@ -38,7 +38,7 @@ else
|
||||
|
||||
<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>
|
||||
<p class="text-xl mt-4">I've worked with businesses at all sizes and stages and I'm currently heading up the tech as CTO at a cool startup called <Anchor Href="https://unhurd.co.uk">un:hurd</Anchor>.</p>
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user