From 2105d3b85d299d80c094de15d77c4acef89f843c Mon Sep 17 00:00:00 2001
From: Beau Findlay <beau.d.findlay@gmail.com>
Date: Sat, 31 Jan 2026 15:51:29 +0000
Subject: [PATCH] Migrate components

---
 src/BlazorApp/BlazorApp.csproj                |  16 +-
 .../Components/AnchorLink/AnchorLink.razor    |  25 +
 src/BlazorApp/Components/App.razor            |  67 +-
 .../Components/Contact/Contact.razor          |  10 +
 src/BlazorApp/Components/Icons/Icon.razor     | 125 ++++
 src/BlazorApp/Components/Icons/IconType.cs    |  16 +
 .../Components/Icons/SocialIcons.razor        |  19 +
 src/BlazorApp/Components/Layout/Footer.razor  |  14 +
 .../Components/Layout/MainLayout.razor        |  20 +-
 src/BlazorApp/Components/Layout/NavBar.razor  |  70 ++
 src/BlazorApp/Components/Layout/NavMenu.razor |  23 +-
 src/BlazorApp/Components/Pages/About.razor    |  41 ++
 src/BlazorApp/Components/Pages/Error.razor    |  12 +-
 .../Components/Pages/Experience.razor         | 107 +++
 src/BlazorApp/Components/Pages/Home.razor     |  19 +-
 src/BlazorApp/Components/Pages/NotFound.razor |  14 +-
 src/BlazorApp/Components/Pages/Weather.razor  |  64 --
 src/BlazorApp/Components/Routes.razor         |   8 +-
 .../Typography/Subtitle/Subtitle.razor        |  17 +
 .../Components/Typography/Text/Text.razor     |  17 +
 .../Components/Typography/Title/Title.razor   |  17 +
 src/BlazorApp/Components/_Imports.razor       |   6 +
 src/BlazorApp/Program.cs                      |   9 +-
 src/BlazorApp/Properties/launchSettings.json  |  36 +-
 src/BlazorApp/wwwroot/css/animations.css      | 110 +--
 src/BlazorApp/wwwroot/css/app.css             |   1 +
 src/BlazorApp/wwwroot/css/base.css            |  60 +-
 src/BlazorApp/wwwroot/css/components.css      | 635 +++++++++++++----
 src/BlazorApp/wwwroot/css/layout.css          | 242 +------
 src/BlazorApp/wwwroot/css/reset.css           |  64 +-
 src/BlazorApp/wwwroot/css/utilities.css       | 641 ++++++++++++++++++
 src/BlazorApp/wwwroot/css/variables.css       | 170 ++---
 32 files changed, 2003 insertions(+), 692 deletions(-)
 create mode 100644 src/BlazorApp/Components/AnchorLink/AnchorLink.razor
 create mode 100644 src/BlazorApp/Components/Contact/Contact.razor
 create mode 100644 src/BlazorApp/Components/Icons/Icon.razor
 create mode 100644 src/BlazorApp/Components/Icons/IconType.cs
 create mode 100644 src/BlazorApp/Components/Icons/SocialIcons.razor
 create mode 100644 src/BlazorApp/Components/Layout/Footer.razor
 create mode 100644 src/BlazorApp/Components/Layout/NavBar.razor
 create mode 100644 src/BlazorApp/Components/Pages/About.razor
 create mode 100644 src/BlazorApp/Components/Pages/Experience.razor
 delete mode 100644 src/BlazorApp/Components/Pages/Weather.razor
 create mode 100644 src/BlazorApp/Components/Typography/Subtitle/Subtitle.razor
 create mode 100644 src/BlazorApp/Components/Typography/Text/Text.razor
 create mode 100644 src/BlazorApp/Components/Typography/Title/Title.razor
 create mode 100644 src/BlazorApp/wwwroot/css/utilities.css

diff --git a/src/BlazorApp/BlazorApp.csproj b/src/BlazorApp/BlazorApp.csproj
index b5f6af0..c1fef06 100644
--- a/src/BlazorApp/BlazorApp.csproj
+++ b/src/BlazorApp/BlazorApp.csproj
@@ -1,10 +1,14 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
-  <PropertyGroup>
-    <TargetFramework>net10.0</TargetFramework>
-    <Nullable>enable</Nullable>
-    <ImplicitUsings>enable</ImplicitUsings>
-    <BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException>
-  </PropertyGroup>
+    <PropertyGroup>
+        <TargetFramework>net10.0</TargetFramework>
+        <Nullable>enable</Nullable>
+        <ImplicitUsings>enable</ImplicitUsings>
+        <BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException>
+    </PropertyGroup>
+
+    <ItemGroup>
+        <_ContentIncludedByDefault Remove="Components\Shared\Icon.razor"/>
+    </ItemGroup>
 
 </Project>
diff --git a/src/BlazorApp/Components/AnchorLink/AnchorLink.razor b/src/BlazorApp/Components/AnchorLink/AnchorLink.razor
new file mode 100644
index 0000000..f048729
--- /dev/null
+++ b/src/BlazorApp/Components/AnchorLink/AnchorLink.razor
@@ -0,0 +1,25 @@
+@* External link component *@
+
+<a href="@Href"
+   target="@Target"
+   class="@CombinedClasses">@ChildContent</a>
+
+@code {
+
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public string? Href { get; set; }
+
+    [Parameter]
+    public string Target { get; set; } = "_blank";
+
+    [Parameter]
+    public string? CssClass { get; set; }
+
+    private string CombinedClasses => string.IsNullOrEmpty(CssClass)
+        ? "underline underline-offset-2"
+        : $"underline underline-offset-2 {CssClass}";
+
+}
diff --git a/src/BlazorApp/Components/App.razor b/src/BlazorApp/Components/App.razor
index c5fff8c..a7b0caf 100644
--- a/src/BlazorApp/Components/App.razor
+++ b/src/BlazorApp/Components/App.razor
@@ -2,19 +2,66 @@
 <html lang="en">
 
 <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <base href="/" />
-    <ResourcePreloader />
-    <link rel="stylesheet" href="css/app.css" />
-    <ImportMap />
-    <link rel="icon" type="image/png" href="favicon.png" />
-    <HeadOutlet />
+      <meta charset="utf-8"/>
+      <meta name="viewport"
+            content="width=device-width, initial-scale=1.0"/>
+
+      <base href="/"/>
+
+      <ResourcePreloader/>
+
+      <!-- Styles -->
+      <link rel="stylesheet"
+            href="css/app.css"/>
+
+      <ImportMap/>
+
+      <!-- Standard Favicons -->
+      <link rel="icon"
+            type="image/x-icon"
+            href="images/favicon.ico"/>
+      <link rel="icon"
+            type="image/png"
+            sizes="16x16"
+            href="images/favicon-16x16.png"/>
+      <link rel="icon"
+            type="image/png"
+            sizes="32x32"
+            href="images/favicon-32x32.png"/>
+
+      <!-- Apple Touch Icons -->
+      <link rel="apple-touch-icon"
+            sizes="180x180"
+            href="images/apple-touch-icon.png"/>
+
+      <!-- Android/Chrome -->
+      <link rel="manifest"
+            href="site.webmanifest"/>
+
+      <!-- Microsoft Tiles -->
+      <meta name="msapplication-TileColor"
+            content="#1a1a1a"/>
+      <meta name="msapplication-config"
+            content="browserconfig.xml"/>
+
+      <!-- Theme Color -->
+      <meta name="theme-color"
+            content="#1a1a1a"/>
+
+      <!-- Open Graph / Social Sharing -->
+      <meta property="og:image"
+            content="images/og-image.png"/>
+      <meta property="og:image:width"
+            content="1200"/>
+      <meta property="og:image:height"
+            content="630"/>
+
+      <HeadOutlet/>
 </head>
 
 <body>
-    <Routes />
-    <script src="@Assets["_framework/blazor.web.js"]"></script>
+<Routes/>
+<script src="@Assets["_framework/blazor.web.js"]"></script>
 </body>
 
 </html>
diff --git a/src/BlazorApp/Components/Contact/Contact.razor b/src/BlazorApp/Components/Contact/Contact.razor
new file mode 100644
index 0000000..de671a1
--- /dev/null
+++ b/src/BlazorApp/Components/Contact/Contact.razor
@@ -0,0 +1,10 @@
+@* Contact call-to-action *@
+
+<div class="contact-section">
+    <Text>If you think I can help with your project...</Text>
+    <a href="mailto:me@beaufindlay.com"
+       class="contact-button">
+        Get in touch
+        <Icon Type="IconType.SendArrow"/>
+    </a>
+</div>
diff --git a/src/BlazorApp/Components/Icons/Icon.razor b/src/BlazorApp/Components/Icons/Icon.razor
new file mode 100644
index 0000000..b08e58a
--- /dev/null
+++ b/src/BlazorApp/Components/Icons/Icon.razor
@@ -0,0 +1,125 @@
+@switch (Type)
+{
+    case IconType.Github:
+        <svg viewBox="0 0 24 24"
+             fill="currentColor"
+             xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+        </svg>
+        break;
+    case IconType.LinkedIn:
+        <svg viewBox="0 0 24 24"
+             fill="currentColor"
+             xmlns="http://www.w3.org/2000/svg">
+            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+        </svg>
+        break;
+    case IconType.Email:
+        <svg xmlns="http://www.w3.org/2000/svg"
+             fill="none"
+             viewBox="0 0 24 24"
+             stroke-width="1.5"
+             stroke="currentColor">
+            <path stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/>
+        </svg>
+        break;
+    case IconType.Code:
+        <svg viewBox="0 0 24 24"
+             fill="none"
+             stroke="currentColor"
+             stroke-width="1.5"
+             xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/>
+        </svg>
+        break;
+    case IconType.Hosting:
+        <svg viewBox="0 0 24 24"
+             fill="currentColor"
+             xmlns="http://www.w3.org/2000/svg">
+            <path d="M3 3h18v18H3V3zm16 16V5H5v14h14zm-8-2h2v-2h2v-2h-2v-2h2V9h-2V7h-2v2H9v2h2v2H9v2h2v2z"/>
+        </svg>
+        break;
+    case IconType.Blazor:
+        <svg viewBox="0 0 24 24"
+             fill="currentColor"
+             xmlns="http://www.w3.org/2000/svg">
+            <path d="M15.5 2.5c-2.5 0-4.5 2-4.5 4.5v2.5l-2.5 2.5c-1.5 1.5-1.5 4 0 5.5s4 1.5 5.5 0L16.5 15V12.5c0-2.5 2-4.5 4.5-4.5V6c-2.5 0-4.5-2-4.5-4.5h-1zm-3 7.5v2l-1.5 1.5c-.8.8-2.2.8-3 0s-.8-2.2 0-3L9.5 9h3zm3-5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5.7-1.5 1.5-1.5z"/>
+        </svg>
+        break;
+    case IconType.React:
+        <svg viewBox="0 0 24 24"
+             fill="currentColor"
+             xmlns="http://www.w3.org/2000/svg">
+            <circle cx="12"
+                    cy="12"
+                    r="2"/>
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
+            <ellipse cx="12"
+                     cy="12"
+                     rx="8"
+                     ry="3"
+                     fill="none"
+                     stroke="currentColor"
+                     stroke-width="1"/>
+            <ellipse cx="12"
+                     cy="12"
+                     rx="3"
+                     ry="8"
+                     fill="none"
+                     stroke="currentColor"
+                     stroke-width="1"/>
+        </svg>
+        break;
+    case IconType.Database:
+        <svg viewBox="0 0 24 24"
+             fill="none"
+             stroke="currentColor"
+             stroke-width="1.5"
+             xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75"/>
+        </svg>
+        break;
+    case IconType.Docker:
+        <svg viewBox="0 0 24 24"
+             fill="currentColor"
+             xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 2v7h7c0-3.87-3.13-7-7-7zm-2 0C7.13 2 4 5.13 4 9h7V2zM4 11c0 3.87 3.13 7 7 7v-7H4zm9 7c3.87 0 7-3.13 7-7h-7v7z"/>
+        </svg>
+        break;
+    case IconType.SendArrow:
+        <svg xmlns="http://www.w3.org/2000/svg"
+             fill="none"
+             viewBox="0 0 24 24"
+             stroke-width="1.5"
+             stroke="currentColor">
+            <path stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/>
+        </svg>
+        break;
+    case IconType.Menu:
+        <svg xmlns="http://www.w3.org/2000/svg"
+             fill="none"
+             viewBox="0 0 24 24"
+             stroke-width="1.5"
+             stroke="currentColor"
+             aria-hidden="true">
+            <path stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
+        </svg>
+        break;
+}
+
+@code {
+
+    [Parameter]
+    public IconType Type { get; set; }
+
+}
\ No newline at end of file
diff --git a/src/BlazorApp/Components/Icons/IconType.cs b/src/BlazorApp/Components/Icons/IconType.cs
new file mode 100644
index 0000000..89d0f3d
--- /dev/null
+++ b/src/BlazorApp/Components/Icons/IconType.cs
@@ -0,0 +1,16 @@
+namespace BlazorApp.Components.Icons;
+
+public enum IconType
+{
+	Github,
+	LinkedIn,
+	Email,
+	Code,
+	Hosting,
+	Blazor,
+	React,
+	Database,
+	Docker,
+	SendArrow,
+	Menu
+}
\ No newline at end of file
diff --git a/src/BlazorApp/Components/Icons/SocialIcons.razor b/src/BlazorApp/Components/Icons/SocialIcons.razor
new file mode 100644
index 0000000..701f4b5
--- /dev/null
+++ b/src/BlazorApp/Components/Icons/SocialIcons.razor
@@ -0,0 +1,19 @@
+@* Social media links *@
+
+<div class="social-icons-container">
+    <a href="https://github.com/bdfin"
+       class="social-icon-link">
+        <span class="sr-only">GitHub</span>
+        <Icon Type="IconType.Github"/>
+    </a>
+    <a href="https://www.linkedin.com/in/beau-findlay/"
+       class="social-icon-link">
+        <span class="sr-only">LinkedIn</span>
+        <Icon Type="IconType.LinkedIn"/>
+    </a>
+    <a href="mailto:me@beaufindlay.com"
+       class="social-icon-link">
+        <span class="sr-only">Email</span>
+        <Icon Type="IconType.Email"/>
+    </a>
+</div>
diff --git a/src/BlazorApp/Components/Layout/Footer.razor b/src/BlazorApp/Components/Layout/Footer.razor
new file mode 100644
index 0000000..9459d1e
--- /dev/null
+++ b/src/BlazorApp/Components/Layout/Footer.razor
@@ -0,0 +1,14 @@
+@* Footer component *@
+
+<div class="page-footer">
+    <footer>
+        <div class="footer-container">
+            <div class="footer-content">
+                <SocialIcons/>
+                <p class="footer-text">
+                    &copy; @DateTime.Now.Year Beau Findlay. All rights reserved.
+                </p>
+            </div>
+        </div>
+    </footer>
+</div>
diff --git a/src/BlazorApp/Components/Layout/MainLayout.razor b/src/BlazorApp/Components/Layout/MainLayout.razor
index 7cd63fe..5aa2bbd 100644
--- a/src/BlazorApp/Components/Layout/MainLayout.razor
+++ b/src/BlazorApp/Components/Layout/MainLayout.razor
@@ -1,17 +1,11 @@
 @inherits LayoutComponentBase
 
-<div class="page">
-    <div class="sidebar">
-        <NavMenu />
-    </div>
-
-    <main>
-        <div class="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
-        </div>
-
-        <article class="content px-4">
+<div class="px-6 lg:px-10">
+    <div class="flex flex-col min-h-screen mx-auto max-w-7xl fade-in">
+        <NavBar/>
+        <div class="flex-1 py-8">
             @Body
-        </article>
-    </main>
+        </div>
+        <Footer/>
+    </div>
 </div>
diff --git a/src/BlazorApp/Components/Layout/NavBar.razor b/src/BlazorApp/Components/Layout/NavBar.razor
new file mode 100644
index 0000000..0f9f880
--- /dev/null
+++ b/src/BlazorApp/Components/Layout/NavBar.razor
@@ -0,0 +1,70 @@
+@* Navigation bar with mobile menu *@
+
+<div class="navbar">
+    <header>
+        <nav aria-label="Global">
+            <div class="logo-container">
+                <a href="/"
+                   class="logo-link">
+                    <span class="sr-only">Beau Findlay</span>
+                    <img src="images/logo.webp"
+                         alt="Logo"/>
+                </a>
+            </div>
+            <div class="mobile-menu-button-container">
+                <label for="mobile-menu-toggle"
+                       class="menu-button">
+                    <span class="sr-only">Open main menu</span>
+                    <Icon Type="IconType.Menu"/>
+                </label>
+            </div>
+            <div class="desktop-nav">
+                <NavLink href="/experience">Experience</NavLink>
+                <NavLink href="/about">This app</NavLink>
+            </div>
+        </nav>
+
+        @* Mobile menu using CSS checkbox hack *@
+        <input type="checkbox"
+               id="mobile-menu-toggle"
+               class="menu-toggle"/>
+        <div class="mobile-menu-overlay"></div>
+        <div class="mobile-menu-content">
+            <div class="mobile-menu-inner">
+                <div class="mobile-menu-header">
+                    <a href="/"
+                       class="logo-link">
+                        <span class="sr-only">Beau Findlay</span>
+                        <img src="images/logo.webp"
+                             alt="Logo"/>
+                    </a>
+                    <label for="mobile-menu-toggle"
+                           class="close-button">
+                        <span class="sr-only">Close menu</span>
+                        <svg xmlns="http://www.w3.org/2000/svg"
+                             fill="none"
+                             viewBox="0 0 24 24"
+                             stroke-width="1.5"
+                             stroke="currentColor"
+                             aria-hidden="true">
+                            <path stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                  d="M6 18L18 6M6 6l12 12"/>
+                        </svg>
+                    </label>
+                </div>
+                <div class="mobile-menu-body">
+                    <div class="mobile-nav-links">
+                        <NavLink href="/experience">Experience</NavLink>
+                        <NavLink href="/about">This App</NavLink>
+                    </div>
+                    <div class="mobile-social-divider">
+                        <div class="mobile-social-container">
+                            <SocialIcons/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+</div>
diff --git a/src/BlazorApp/Components/Layout/NavMenu.razor b/src/BlazorApp/Components/Layout/NavMenu.razor
index 89089a8..81c4486 100644
--- a/src/BlazorApp/Components/Layout/NavMenu.razor
+++ b/src/BlazorApp/Components/Layout/NavMenu.razor
@@ -1,22 +1,31 @@
 <div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
-        <a class="navbar-brand" href="">BlazorApp</a>
+        <a class="navbar-brand"
+           href="">BlazorApp</a>
     </div>
 </div>
 
-<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
+<input type="checkbox"
+       title="Navigation menu"
+       class="navbar-toggler"/>
 
-<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
+<div class="nav-scrollable"
+     onclick="document.querySelector('.navbar-toggler').click()">
     <nav class="nav flex-column">
         <div class="nav-item px-3">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
+            <NavLink class="nav-link"
+                     href=""
+                     Match="NavLinkMatch.All">
+                <span class="bi bi-house-door-fill-nav-menu"
+                      aria-hidden="true"></span> Home
             </NavLink>
         </div>
 
         <div class="nav-item px-3">
-            <NavLink class="nav-link" href="weather">
-                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
+            <NavLink class="nav-link"
+                     href="weather">
+                <span class="bi bi-list-nested-nav-menu"
+                      aria-hidden="true"></span> Weather
             </NavLink>
         </div>
     </nav>
diff --git a/src/BlazorApp/Components/Pages/About.razor b/src/BlazorApp/Components/Pages/About.razor
new file mode 100644
index 0000000..ec4d6be
--- /dev/null
+++ b/src/BlazorApp/Components/Pages/About.razor
@@ -0,0 +1,41 @@
+@page "/about"
+
+<PageTitle>Beau Findlay - About</PageTitle>
+
+<Title CssClass="text-center pb-4">This App</Title>
+<Text>
+    Below is an overview of how this simple app is made and what
+    technologies are used. If you'd like to dive straight in, the full
+    project is available on my
+    <AnchorLink Href="https://github.com/bdfin/my-portfolio">
+        GitHub
+    </AnchorLink>.
+</Text>
+
+<section>
+    <Subtitle>App</Subtitle>
+
+    <Text>
+        This app was originally made using
+        <AnchorLink Href="https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor">.NET Blazor WASM</AnchorLink>
+        and then re-written in
+        <AnchorLink Href="https://react.dev/">React</AnchorLink>
+        with
+        <AnchorLink Href="https://www.typescriptlang.org/">TypeScript</AnchorLink>
+        as a learning exercise. I've now migrated it back to .NET Blazor to take advantage of static server-side
+        rendering for maximum performance and to remove unnecessary dependencies on large JS and CSS libraries.
+    </Text>
+    <Text>
+        This version uses pure vanilla CSS with CSS variables for theming, eliminating all JavaScript and external
+        dependencies; the mobile menu uses a CSS checkbox hack for zero-JavaScript interactivity.
+    </Text>
+</section>
+
+<section class="mt-8">
+    <Subtitle>Hosting & Deployment</Subtitle>
+
+    <Text>
+        TODO: This section
+    </Text>
+</section>
+
diff --git a/src/BlazorApp/Components/Pages/Error.razor b/src/BlazorApp/Components/Pages/Error.razor
index 576cc2d..f72e075 100644
--- a/src/BlazorApp/Components/Pages/Error.razor
+++ b/src/BlazorApp/Components/Pages/Error.razor
@@ -15,22 +15,28 @@
 
 <h3>Development Mode</h3>
 <p>
-    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
+    Swapping to <strong>Development</strong> environment will display more detailed information about the error that
+    occurred.
 </p>
 <p>
     <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
     It can result in displaying sensitive information from exceptions to end users.
-    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong>
+    environment variable to <strong>Development</strong>
     and restarting the app.
 </p>
 
 @code{
+
     [CascadingParameter]
     private HttpContext? HttpContext { get; set; }
 
     private string? RequestId { get; set; }
     private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
 
-    protected override void OnInitialized() =>
+    protected override void OnInitialized()
+    {
         RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
+    }
+
 }
diff --git a/src/BlazorApp/Components/Pages/Experience.razor b/src/BlazorApp/Components/Pages/Experience.razor
new file mode 100644
index 0000000..0b0d6aa
--- /dev/null
+++ b/src/BlazorApp/Components/Pages/Experience.razor
@@ -0,0 +1,107 @@
+@page "/experience"
+
+<PageTitle>Beau Findlay - Experience</PageTitle>
+
+<Title CssClass="text-center">Experience</Title>
+
+<p class="text-center text-xl font-semibold mb-10   ">
+    Software Engineer since 2018
+</p>
+
+<ol class="timeline">
+    @foreach (var item in experienceTimelineItems)
+    {
+        <li class="timeline-item">
+            <time class="timeline-date">
+                @item.StartDate - @(item.EndDate ?? "Present")
+            </time>
+            <h3 class="timeline-title">
+                @item.Title @("@") <AnchorLink Href="@item.CompanyUrl">@item.CompanyName</AnchorLink>
+            </h3>
+            @foreach (var content in item.Content)
+            {
+                <Text>@content</Text>
+            }
+        </li>
+    }
+</ol>
+
+<Contact/>
+
+@code {
+
+    private readonly List<WorkTimelineItem> experienceTimelineItems =
+    [
+        new()
+        {
+            StartDate = "September 2021",
+            Title = "CTO",
+            CompanyName = "un:hurd music",
+            CompanyUrl = "https://unhurdmusic.com",
+            Content =
+            [
+                "As one of the founding developers at un:hurd music and now Chief Technology Officer, I built and scaled un:hurd's back-end and cloud infrastructure that serves automated marketing soloutions for tens-of-thousands of artists and musicians.",
+                "I lead a small but incredibly talented multi-disciplinary team building on the Azure cloud using a .NET backend, React web front-end and a Swift native iOS app."
+            ]
+        },
+        new()
+        {
+            StartDate = "August 2020",
+            EndDate = "September 2021",
+            Title = "Software Development Lead",
+            CompanyName = "Vouch",
+            CompanyUrl = "https://vouch.co.uk/",
+            Content =
+            [
+                "At Vouch I lead the backend build of a new version of their tenant referencing software - an AI enhanced chat-bot based system utlising Azure Cognitive Services and various supporting serverless APIs written in .NET Core and hosted on Microsoft Azure."
+            ]
+        },
+        new()
+        {
+            StartDate = "May 2020",
+            EndDate = "July 2020",
+            Title = "Software Developer",
+            CompanyName = "Paragon ID",
+            CompanyUrl = "https://www.paragon-id.com/en",
+            Content =
+            [
+                "I joined Paragon ID on a short-term contract where I wrote and deployed two key projects: A complex dashboard for a large construction equipment manufacturer to track assets across various manufacturing stages and a medical assets tracking dashboard deployed and used in multiple hospitals across the UK."
+            ]
+        },
+        new()
+        {
+            StartDate = "July 2019",
+            EndDate = "May 2020",
+            Title = "Software Developer",
+            CompanyName = "Osborne Technologies",
+            CompanyUrl = "https://www.osbornetechnologies.co.uk/",
+            Content =
+            [
+                "I joined Osborne Technologies as the only cloud cloud-specialist and lead a project creating the first web-based version of their flag ship visitor management software utilising ASP.NET Core MVC and Microsoft SQL Server on the Microsoft Azure cloud."
+            ]
+        },
+        new()
+        {
+            StartDate = "September 2018",
+            EndDate = "September 2019",
+            Title = " MSc Computing Student",
+            CompanyName = "Sheffield Hallam University",
+            CompanyUrl = "https://www.shu.ac.uk/courses/computing/msc-computing/full-time",
+            Content =
+            [
+                "I joined Sheffield Hallam University to study for a Master of Science in Computing. During my time there I completed modules in computer programming and web development, databases and big data, computer hardware, project management and my software development thesis; a .NET web application that compiles astronomy and space exploration data from various APIs into an accessible calendar."
+            ]
+        }
+    ];
+
+    private class WorkTimelineItem
+    {
+        public string StartDate { get; init; } = string.Empty;
+        public string? EndDate { get; init; }
+        public string Title { get; init; } = string.Empty;
+        public string CompanyName { get; init; } = string.Empty;
+        public string CompanyUrl { get; init; } = string.Empty;
+        public string[] Content { get; init; } = [];
+    }
+
+}
diff --git a/src/BlazorApp/Components/Pages/Home.razor b/src/BlazorApp/Components/Pages/Home.razor
index 9001e0b..878039b 100644
--- a/src/BlazorApp/Components/Pages/Home.razor
+++ b/src/BlazorApp/Components/Pages/Home.razor
@@ -1,7 +1,18 @@
 @page "/"
 
-<PageTitle>Home</PageTitle>
+<PageTitle>Beau Findlay - Home</PageTitle>
 
-<h1>Hello, world!</h1>
-
-Welcome to your new app.
+<Title CssClass="text-center mb-8">Hi, I'm Beau.</Title>
+<Text>
+    I'm a UK-based software engineer and I love building cool stuff.
+</Text>
+<Text>
+    I specialise in C#/.NET development and I've built systems that scale for hundreds-of-thousands of global users.
+</Text>
+<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
+    <AnchorLink Href="https://unhurdmusic.com">un:hurd music</AnchorLink>.
+</Text>
+<Text>
+    I believe in a privacy-first, information-focussed and performant internet. You won't find any trackers, analytics or the need for a cookie consent policy here.
+</Text>
diff --git a/src/BlazorApp/Components/Pages/NotFound.razor b/src/BlazorApp/Components/Pages/NotFound.razor
index 917ada1..72de928 100644
--- a/src/BlazorApp/Components/Pages/NotFound.razor
+++ b/src/BlazorApp/Components/Pages/NotFound.razor
@@ -1,5 +1,13 @@
 @page "/not-found"
-@layout MainLayout
 
-<h3>Not Found</h3>
-<p>Sorry, the content you are looking for does not exist.</p>
\ No newline at end of file
+<PageTitle>Beau Findlay - Not Found</PageTitle>
+
+<main class="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
+    <div class="text-center">
+        <p class="text-base font-semibold">404</p>
+        <h1 class="mt-4 text-4xl font-bold tracking-tight">
+            Page not found
+        </h1>
+        <p class="mt-6 text-base leading-7">Sorry, this page doesn't exist.</p>
+    </div>
+</main>
\ No newline at end of file
diff --git a/src/BlazorApp/Components/Pages/Weather.razor b/src/BlazorApp/Components/Pages/Weather.razor
deleted file mode 100644
index f437e5e..0000000
--- a/src/BlazorApp/Components/Pages/Weather.razor
+++ /dev/null
@@ -1,64 +0,0 @@
-@page "/weather"
-@attribute [StreamRendering]
-
-<PageTitle>Weather</PageTitle>
-
-<h1>Weather</h1>
-
-<p>This component demonstrates showing data.</p>
-
-@if (forecasts == null)
-{
-    <p><em>Loading...</em></p>
-}
-else
-{
-    <table class="table">
-        <thead>
-            <tr>
-                <th>Date</th>
-                <th aria-label="Temperature in Celsius">Temp. (C)</th>
-                <th aria-label="Temperature in Fahrenheit">Temp. (F)</th>
-                <th>Summary</th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach (var forecast in forecasts)
-            {
-                <tr>
-                    <td>@forecast.Date.ToShortDateString()</td>
-                    <td>@forecast.TemperatureC</td>
-                    <td>@forecast.TemperatureF</td>
-                    <td>@forecast.Summary</td>
-                </tr>
-            }
-        </tbody>
-    </table>
-}
-
-@code {
-    private WeatherForecast[]? forecasts;
-
-    protected override async Task OnInitializedAsync()
-    {
-        // Simulate asynchronous loading to demonstrate streaming rendering
-        await Task.Delay(500);
-
-        var startDate = DateOnly.FromDateTime(DateTime.Now);
-        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
-        forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
-        {
-            Date = startDate.AddDays(index),
-            TemperatureC = Random.Shared.Next(-20, 55),
-            Summary = summaries[Random.Shared.Next(summaries.Length)]
-        }).ToArray();
-    }
-
-    private class WeatherForecast
-    {
-        public DateOnly Date { get; set; }
-        public int TemperatureC { get; set; }
-        public string? Summary { get; set; }
-        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
-    }
-}
diff --git a/src/BlazorApp/Components/Routes.razor b/src/BlazorApp/Components/Routes.razor
index 105855d..41098bd 100644
--- a/src/BlazorApp/Components/Routes.razor
+++ b/src/BlazorApp/Components/Routes.razor
@@ -1,6 +1,8 @@
-<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
+@using BlazorApp.Components.Pages
+<Router AppAssembly="typeof(Program).Assembly"
+        NotFoundPage="typeof(NotFound)">
     <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
-        <FocusOnNavigate RouteData="routeData" Selector="h1" />
+        <RouteView RouteData="routeData"
+                   DefaultLayout="typeof(MainLayout)"/>
     </Found>
 </Router>
diff --git a/src/BlazorApp/Components/Typography/Subtitle/Subtitle.razor b/src/BlazorApp/Components/Typography/Subtitle/Subtitle.razor
new file mode 100644
index 0000000..a0a0b27
--- /dev/null
+++ b/src/BlazorApp/Components/Typography/Subtitle/Subtitle.razor
@@ -0,0 +1,17 @@
+@* H2 heading component *@
+
+<h2 class="@CombinedClasses">@ChildContent</h2>
+
+@code {
+
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public string? CssClass { get; set; }
+
+    private string CombinedClasses => string.IsNullOrEmpty(CssClass)
+        ? "flex items-center text-2xl py-4 font-semibold"
+        : $"flex items-center text-2xl py-4 font-semibold {CssClass}";
+
+}
diff --git a/src/BlazorApp/Components/Typography/Text/Text.razor b/src/BlazorApp/Components/Typography/Text/Text.razor
new file mode 100644
index 0000000..1c84a7c
--- /dev/null
+++ b/src/BlazorApp/Components/Typography/Text/Text.razor
@@ -0,0 +1,17 @@
+@* Paragraph component *@
+
+<p class="@CombinedClasses">@ChildContent</p>
+
+@code {
+
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public string? CssClass { get; set; }
+
+    private string CombinedClasses => string.IsNullOrEmpty(CssClass)
+        ? "text-paragraph"
+        : $"text-paragraph {CssClass}";
+
+}
diff --git a/src/BlazorApp/Components/Typography/Title/Title.razor b/src/BlazorApp/Components/Typography/Title/Title.razor
new file mode 100644
index 0000000..8bd2702
--- /dev/null
+++ b/src/BlazorApp/Components/Typography/Title/Title.razor
@@ -0,0 +1,17 @@
+@* H1 heading component *@
+
+<h1 class="@CombinedClasses">@ChildContent</h1>
+
+@code {
+
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public string? CssClass { get; set; }
+
+    private string CombinedClasses => string.IsNullOrEmpty(CssClass)
+        ? "text-4xl py-4"
+        : $"text-4xl py-4 {CssClass}";
+
+}
diff --git a/src/BlazorApp/Components/_Imports.razor b/src/BlazorApp/Components/_Imports.razor
index d4a0061..ec5dda8 100644
--- a/src/BlazorApp/Components/_Imports.razor
+++ b/src/BlazorApp/Components/_Imports.razor
@@ -9,3 +9,9 @@
 @using BlazorApp
 @using BlazorApp.Components
 @using BlazorApp.Components.Layout
+@using BlazorApp.Components.Icons
+@using BlazorApp.Components.AnchorLink
+@using BlazorApp.Components.Contact
+@using BlazorApp.Components.Typography.Title
+@using BlazorApp.Components.Typography.Subtitle
+@using BlazorApp.Components.Typography.Text
\ No newline at end of file
diff --git a/src/BlazorApp/Program.cs b/src/BlazorApp/Program.cs
index d12d259..162930b 100644
--- a/src/BlazorApp/Program.cs
+++ b/src/BlazorApp/Program.cs
@@ -10,10 +10,11 @@ var app = builder.Build();
 // Configure the HTTP request pipeline.
 if (!app.Environment.IsDevelopment())
 {
-    app.UseExceptionHandler("/Error", createScopeForErrors: true);
-    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
-    app.UseHsts();
+	app.UseExceptionHandler("/Error", true);
+	// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+	app.UseHsts();
 }
+
 app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);
 app.UseHttpsRedirection();
 
@@ -22,4 +23,4 @@ app.UseAntiforgery();
 app.MapStaticAssets();
 app.MapRazorComponents<App>();
 
-app.Run();
+app.Run();
\ No newline at end of file
diff --git a/src/BlazorApp/Properties/launchSettings.json b/src/BlazorApp/Properties/launchSettings.json
index cf58186..d06b21e 100644
--- a/src/BlazorApp/Properties/launchSettings.json
+++ b/src/BlazorApp/Properties/launchSettings.json
@@ -1,23 +1,23 @@
 {
   "$schema": "https://json.schemastore.org/launchsettings.json",
-    "profiles": {
-      "http": {
-        "commandName": "Project",
-        "dotnetRunMessages": true,
-        "launchBrowser": true,
-        "applicationUrl": "http://localhost:5064",
-        "environmentVariables": {
-          "ASPNETCORE_ENVIRONMENT": "Development"
-        }
-      },
-      "https": {
-        "commandName": "Project",
-        "dotnetRunMessages": true,
-        "launchBrowser": true,
-        "applicationUrl": "https://localhost:7162;http://localhost:5064",
-        "environmentVariables": {
-          "ASPNETCORE_ENVIRONMENT": "Development"
-        }
+  "profiles": {
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "http://localhost:5064",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "https://localhost:7162;http://localhost:5064",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
       }
     }
   }
+}
diff --git a/src/BlazorApp/wwwroot/css/animations.css b/src/BlazorApp/wwwroot/css/animations.css
index 4101cf5..6427cd7 100644
--- a/src/BlazorApp/wwwroot/css/animations.css
+++ b/src/BlazorApp/wwwroot/css/animations.css
@@ -2,109 +2,109 @@
 
 /* Fade In */
 .fade-in {
-  animation: fadeInAnimation ease 1s;
-  animation-iteration-count: 1;
-  animation-fill-mode: forwards;
+    animation: fadeInAnimation ease 1s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
 }
 
 @keyframes fadeInAnimation {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 /* Slide */
 @keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
+    from {
+        transform: translateX(100%);
+    }
+    to {
+        transform: translateX(0);
+    }
 }
 
 @keyframes slideOutRight {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(100%);
-  }
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(100%);
+    }
 }
 
 @keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 .fade-in-up {
-  animation: fadeInUp var(--transition-slow) var(--transition-timing);
+    animation: fadeInUp var(--transition-slow) var(--transition-timing);
 }
 
 /* Spinner */
 .spinner {
-  display: inline-block;
-  width: 24px;
-  height: 24px;
-  border: 3px solid var(--color-slate-700);
-  border-top-color: var(--color-slate-50);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    border: 3px solid var(--color-slate-700);
+    border-top-color: var(--color-slate-50);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
 }
 
 @keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 /* Pulse */
 .pulse {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 @keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
 }
 
 /* Transitions */
 .transition {
-  transition: all var(--transition-base) var(--transition-timing);
+    transition: all var(--transition-base) var(--transition-timing);
 }
 
 .transition-colors {
-  transition: color var(--transition-base) var(--transition-timing),
-              background-color var(--transition-base) var(--transition-timing),
-              border-color var(--transition-base) var(--transition-timing);
+    transition: color var(--transition-base) var(--transition-timing),
+    background-color var(--transition-base) var(--transition-timing),
+    border-color var(--transition-base) var(--transition-timing);
 }
 
 .transition-transform {
-  transition: transform var(--transition-base) var(--transition-timing);
+    transition: transform var(--transition-base) var(--transition-timing);
 }
 
 .transition-opacity {
-  transition: opacity var(--transition-base) var(--transition-timing);
+    transition: opacity var(--transition-base) var(--transition-timing);
 }
 
 /* Hover */
 .hover-scale:hover {
-  transform: scale(1.05);
+    transform: scale(1.05);
 }
 
 .hover-lift:hover {
-  transform: translateY(-2px);
+    transform: translateY(-2px);
 }
diff --git a/src/BlazorApp/wwwroot/css/app.css b/src/BlazorApp/wwwroot/css/app.css
index 6afa7b4..5449710 100644
--- a/src/BlazorApp/wwwroot/css/app.css
+++ b/src/BlazorApp/wwwroot/css/app.css
@@ -3,6 +3,7 @@
 @import url('variables.css');
 @import url('reset.css');
 @import url('base.css');
+@import url('utilities.css');
 @import url('layout.css');
 @import url('components.css');
 @import url('animations.css');
diff --git a/src/BlazorApp/wwwroot/css/base.css b/src/BlazorApp/wwwroot/css/base.css
index e3a9b35..128ab73 100644
--- a/src/BlazorApp/wwwroot/css/base.css
+++ b/src/BlazorApp/wwwroot/css/base.css
@@ -1,11 +1,13 @@
 /* Base Styles */
 
 body {
-  background-color: var(--color-black);
-  color: var(--color-slate-50);
-  font-family: var(--font-mono);
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-normal);
+    background-color: var(--color-black);
+    color: var(--color-slate-50);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-normal);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 /* Typography */
@@ -15,76 +17,78 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: var(--font-weight-semibold);
-  line-height: var(--line-height-tight);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--line-height-tight);
 }
 
 h1 {
-  font-size: var(--font-size-3xl);
+    font-size: var(--font-size-3xl);
 }
 
 h2 {
-  font-size: var(--font-size-2xl);
+    font-size: var(--font-size-2xl);
 }
 
 h3 {
-  font-size: var(--font-size-xl);
+    font-size: var(--font-size-xl);
 }
 
 p {
-  margin-bottom: var(--space-4);
+    margin-bottom: var(--space-4);
 }
 
 /* Links */
 a {
-  color: var(--color-slate-50);
-  transition: color var(--transition-base) var(--transition-timing);
+    color: var(--color-slate-50);
+    display: inline-block;
+    transition: transform var(--transition-base) var(--transition-timing);
 }
 
 a:hover {
-  color: var(--color-slate-300);
+    transform: translateY(2px);
+    color: var(--color-slate-50);
 }
 
 a:focus-visible {
-  outline: 2px solid var(--color-slate-50);
-  outline-offset: 2px;
+    outline: 2px solid var(--color-slate-50);
+    outline-offset: 2px;
 }
 
 /* Focus */
 *:focus-visible {
-  outline: 2px solid var(--color-slate-50);
-  outline-offset: 2px;
+    outline: 2px solid var(--color-slate-50);
+    outline-offset: 2px;
 }
 
 button:focus-visible,
 input:focus-visible,
 textarea:focus-visible,
 select:focus-visible {
-  outline: 2px solid var(--color-slate-50);
-  outline-offset: 2px;
+    outline: 2px solid var(--color-slate-50);
+    outline-offset: 2px;
 }
 
 /* Selection */
 ::selection {
-  background-color: var(--color-slate-50);
-  color: var(--color-black);
+    background-color: var(--color-slate-50);
+    color: var(--color-black);
 }
 
 /* Scrollbar */
 body::-webkit-scrollbar {
-  width: 10px;
+    width: 10px;
 }
 
 body::-webkit-scrollbar-track {
-  background: var(--color-white);
+    background: var(--color-white);
 }
 
 body::-webkit-scrollbar-thumb {
-  background-color: var(--color-black);
-  border: 1px solid var(--color-white);
+    background-color: var(--color-black);
+    border: 1px solid var(--color-white);
 }
 
 body {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-black) var(--color-white);
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-black) var(--color-white);
 }
diff --git a/src/BlazorApp/wwwroot/css/components.css b/src/BlazorApp/wwwroot/css/components.css
index 1a5377d..a503b6f 100644
--- a/src/BlazorApp/wwwroot/css/components.css
+++ b/src/BlazorApp/wwwroot/css/components.css
@@ -2,213 +2,598 @@
 
 /* Buttons */
 .btn {
-  display: inline-block;
-  padding: var(--space-3) var(--space-6);
-  font-weight: var(--font-weight-medium);
-  text-align: center;
-  border-radius: var(--radius-md);
-  transition: all var(--transition-base) var(--transition-timing);
-  cursor: pointer;
+    display: inline-block;
+    padding: var(--space-3) var(--space-6);
+    font-weight: var(--font-weight-medium);
+    text-align: center;
+    border-radius: var(--radius-md);
+    transition: all var(--transition-base) var(--transition-timing);
+    cursor: pointer;
 }
 
 .btn:focus-visible {
-  outline: 2px solid var(--color-slate-50);
-  outline-offset: 2px;
+    outline: 2px solid var(--color-slate-50);
+    outline-offset: 2px;
 }
 
 .btn-primary {
-  background-color: var(--color-slate-50);
-  color: var(--color-black);
+    background-color: var(--color-slate-50);
+    color: var(--color-black);
 }
 
 .btn-primary:hover {
-  background-color: var(--color-slate-200);
+    background-color: var(--color-slate-200);
 }
 
 .btn-secondary {
-  background-color: transparent;
-  color: var(--color-slate-50);
-  border: 1px solid var(--color-slate-50);
+    background-color: transparent;
+    color: var(--color-slate-50);
+    border: 1px solid var(--color-slate-50);
 }
 
 .btn-secondary:hover {
-  background-color: var(--color-slate-50);
-  color: var(--color-black);
+    background-color: var(--color-slate-50);
+    color: var(--color-black);
 }
 
 .btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+    opacity: 0.5;
+    cursor: not-allowed;
 }
 
 /* Inputs */
 .input {
-  width: 100%;
-  padding: var(--space-3);
-  background-color: var(--color-black);
-  border: 1px solid var(--color-slate-700);
-  border-radius: var(--radius-md);
-  color: var(--color-slate-50);
-  font-size: var(--font-size-base);
+    width: 100%;
+    padding: var(--space-3);
+    background-color: var(--color-black);
+    border: 1px solid var(--color-slate-700);
+    border-radius: var(--radius-md);
+    color: var(--color-slate-50);
+    font-size: var(--font-size-base);
 }
 
 .input:focus {
-  outline: none;
-  border-color: var(--color-slate-50);
+    outline: none;
+    border-color: var(--color-slate-50);
 }
 
 .input:invalid {
-  border-color: #ef4444;
+    border-color: #ef4444;
 }
 
 .input::placeholder {
-  color: var(--color-slate-500);
+    color: var(--color-slate-500);
 }
 
 /* Textareas */
 .textarea {
-  width: 100%;
-  padding: var(--space-3);
-  background-color: var(--color-black);
-  border: 1px solid var(--color-slate-700);
-  border-radius: var(--radius-md);
-  color: var(--color-slate-50);
-  font-size: var(--font-size-base);
-  resize: vertical;
-  min-height: 120px;
+    width: 100%;
+    padding: var(--space-3);
+    background-color: var(--color-black);
+    border: 1px solid var(--color-slate-700);
+    border-radius: var(--radius-md);
+    color: var(--color-slate-50);
+    font-size: var(--font-size-base);
+    resize: vertical;
+    min-height: 120px;
 }
 
 .textarea:focus {
-  outline: none;
-  border-color: var(--color-slate-50);
+    outline: none;
+    border-color: var(--color-slate-50);
 }
 
 /* Labels */
 .label {
-  display: block;
-  margin-bottom: var(--space-2);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
+    display: block;
+    margin-bottom: var(--space-2);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
 }
 
 /* Cards */
 .card {
-  background-color: var(--color-slate-900);
-  border-radius: var(--radius-lg);
-  padding: var(--space-6);
-  border: 1px solid var(--color-slate-800);
+    background-color: var(--color-slate-900);
+    border-radius: var(--radius-lg);
+    padding: var(--space-6);
+    border: 1px solid var(--color-slate-800);
 }
 
-/* Navigation */
-.nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-6) 0;
+/* NavBar */
+.navbar header {
+    padding-top: var(--space-6);
 }
 
-.nav-link {
-  padding: var(--space-2) var(--space-4);
-  color: var(--color-slate-50);
-  font-size: var(--font-size-sm);
-  transition: color var(--transition-base) var(--transition-timing);
+.navbar nav {
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    max-width: 80rem;
+    align-items: center;
+    justify-content: space-between;
 }
 
-.nav-link:hover {
-  color: var(--color-slate-300);
+.navbar .logo-container {
+    display: flex;
 }
 
-.nav-link-active {
-  font-weight: var(--font-weight-semibold);
+.navbar .logo-link {
+    margin: -0.375rem;
+    padding: 0.375rem;
 }
 
-/* Footer */
-.footer {
-  padding: var(--space-8) 0;
-  margin-top: auto;
-  border-top: 1px solid var(--color-slate-800);
-  text-align: center;
-  font-size: var(--font-size-sm);
-  color: var(--color-slate-400);
+.navbar .logo-link img {
+    height: 4rem;
+    width: auto;
+}
+
+.navbar .mobile-menu-button-container {
+    display: flex;
+}
+
+.navbar .menu-button {
+    margin: -0.625rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md);
+    padding: 0.625rem;
+    cursor: pointer;
+}
+
+.navbar .menu-button svg {
+    height: 1.5rem;
+    width: 1.5rem;
+}
+
+.navbar .desktop-nav {
+    display: none;
+}
+
+.navbar .desktop-nav a {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.5;
 }
 
 /* Mobile Menu (CSS-only) */
-.mobile-menu-toggle {
-  display: none;
-}
-
-.mobile-menu-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  cursor: pointer;
-  font-size: var(--font-size-2xl);
+.menu-toggle {
+    display: none;
 }
 
 .mobile-menu-overlay {
-  display: none;
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
-  z-index: var(--z-overlay);
+    display: none;
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    z-index: var(--z-overlay);
 }
 
-.mobile-menu {
-  display: none;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 80%;
-  max-width: 300px;
-  background-color: var(--color-black);
-  border-left: 1px solid var(--color-slate-800);
-  padding: var(--space-6);
-  z-index: var(--z-modal);
-  transform: translateX(100%);
-  transition: transform var(--transition-slow) var(--transition-timing);
+.menu-toggle:checked ~ .mobile-menu-overlay {
+    display: block;
 }
 
-.mobile-menu-toggle:checked ~ .mobile-menu-overlay {
-  display: block;
+.mobile-menu-content {
+    display: none;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: var(--z-modal);
+    background-color: var(--color-black);
+    width: 100%;
+    padding: var(--space-6);
+    color: white;
+    transform: translateX(100%);
+    transition: transform var(--transition-slow) var(--transition-timing);
 }
 
-.mobile-menu-toggle:checked ~ .mobile-menu {
-  display: block;
-  transform: translateX(0);
+.menu-toggle:checked ~ .mobile-menu-content {
+    display: block;
+    transform: translateX(0);
 }
 
-.mobile-menu-close {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: var(--space-6);
-  font-size: var(--font-size-2xl);
-  cursor: pointer;
+.mobile-menu-inner {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.mobile-menu-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.close-button {
+    margin: -0.625rem;
+    border-radius: var(--radius-md);
+    padding: 0.625rem;
+    cursor: pointer;
+}
+
+.close-button svg {
+    height: 1.5rem;
+    width: 1.5rem;
+}
+
+.mobile-menu-body {
+    margin-top: var(--space-6);
+    flex: 1 1 0%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.mobile-nav-links {
+    margin-top: var(--space-2);
+}
+
+.mobile-nav-links a {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+    display: block;
+    border-radius: var(--radius-lg);
+    padding: 0.75rem;
+    padding-top: var(--space-2);
+    padding-bottom: var(--space-2);
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.75;
+}
+
+.mobile-social-divider {
+    border-top: 1px solid rgba(226, 232, 240, 0.1);
+    padding-top: var(--space-8);
+}
+
+.mobile-social-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Prevent body scroll when mobile menu is open */
+.menu-toggle:checked ~ * {
+    overflow: hidden;
+}
+
+body:has(.menu-toggle:checked) {
+    overflow: hidden;
+}
+
+@media (min-width: 640px) {
+    .mobile-menu-content {
+        max-width: 24rem;
+        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
+        border-left: 2px solid var(--color-slate-800);
+    }
+}
+
+@media (min-width: 1024px) {
+    .navbar .logo-container {
+        flex: 1 1 0%;
+    }
+
+    .navbar .mobile-menu-button-container {
+        display: none;
+    }
+
+    .navbar .desktop-nav {
+        display: flex;
+        column-gap: var(--space-12);
+    }
+
+    .mobile-menu-content {
+        display: none;
+    }
+}
+
+/* Footer */
+.page-footer footer {
+    margin-top: auto;
+}
+
+.page-footer .footer-container {
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: var(--space-8);
+    padding-bottom: var(--space-8);
+}
+
+.page-footer .footer-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-4);
+}
+
+.page-footer .footer-text {
+    font-size: var(--font-size-xs);
+    line-height: 1.25;
+    color: var(--color-slate-50);
+    margin-bottom: 0;
+}
+
+@media (min-width: 768px) {
+    .page-footer .footer-content {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0;
+    }
+
+    .page-footer .footer-text {
+        order: 1;
+    }
+}
+
+/* Social Icons */
+.social-icons-container {
+    display: flex;
+    gap: var(--space-6);
+}
+
+.social-icon-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 40px;
+    min-height: 40px;
+    color: var(--color-slate-50);
+    transition: transform var(--transition-base) var(--transition-timing);
+}
+
+.social-icon-link svg {
+    width: 24px;
+    height: 24px;
+}
+
+.social-icon-link:hover {
+    transform: translateY(2px);
+    color: var(--color-slate-50);
+}
+
+@media (min-width: 768px) {
+    .social-icons-container {
+        order: 2;
+    }
+
+    .social-icon-link {
+        min-width: auto;
+        min-height: auto;
+    }
+
+    .social-icon-link svg {
+        width: 20px;
+        height: 20px;
+    }
+}
+
+/* Tech Icons */
+.tech-icons-wrapper {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 64rem;
+}
+
+.tech-icons-title {
+    font-size: var(--font-size-xl);
+    text-align: center;
+    margin-bottom: var(--space-10);
+    font-weight: var(--font-weight-semibold);
+}
+
+.tech-icons-grid {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-6);
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: var(--space-4);
+}
+
+.tech-icon-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.tech-icon-item svg {
+    width: 34px;
+    height: 34px;
+}
+
+.tech-icon-item p {
+    margin-top: var(--space-2);
+    font-size: var(--font-size-sm);
+}
+
+@media (min-width: 768px) {
+    .tech-icons-grid {
+        flex-direction: row;
+        justify-content: space-evenly;
+        gap: 0;
+    }
+}
+
+/* AboutTabs */
+.tabs-subtitle {
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-lg);
+    margin-top: var(--space-4);
+    margin-bottom: var(--space-4);
+}
+
+/* Contact Section */
+.contact-section {
+    margin-bottom: var(--space-10);
+    margin-top: var(--space-12);
+    text-align: center;
+}
+
+.contact-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    border: 1px solid var(--color-slate-700);
+    background-color: var(--color-black);
+    padding: 0.625rem 0.875rem;
+    margin-top: var(--space-2);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-slate-50);
+    transition: transform var(--transition-base) var(--transition-timing);
+}
+
+.contact-button:hover {
+    transform: translateY(2px);
+    color: var(--color-slate-50);
+}
+
+.contact-button:focus-visible {
+    outline: 2px solid var(--color-slate-50);
+    outline-offset: 2px;
+}
+
+.contact-button svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+}
+
+/* Text Paragraph */
+.text-paragraph {
+    font-size: var(--font-size-lg);
+    padding-top: var(--space-4);
+    padding-bottom: var(--space-4);
+}
+
+@media (min-width: 768px) {
+    .text-paragraph {
+        padding-top: var(--space-2);
+        padding-bottom: var(--space-2);
+    }
 }
 
 /* Links */
 .link {
-  color: var(--color-slate-50);
-  text-decoration: underline;
-  text-underline-offset: 2px;
+    color: var(--color-slate-50);
+    text-decoration: underline;
+    text-underline-offset: 2px;
 }
 
 .link:hover {
-  color: var(--color-slate-300);
+    color: var(--color-slate-300);
 }
 
 /* Icon Buttons */
 .icon-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-2);
-  transition: opacity var(--transition-base) var(--transition-timing);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-2);
+    transition: opacity var(--transition-base) var(--transition-timing);
 }
 
 .icon-button:hover {
-  opacity: 0.7;
+    opacity: 0.7;
+}
+
+/* Timeline */
+.timeline {
+    position: relative;
+    border-left: 1px solid var(--color-slate-600);
+    list-style: none;
+    padding-left: 0;
+}
+
+.timeline-item {
+    margin-bottom: var(--space-10);
+    margin-left: var(--space-4);
+    position: relative;
+}
+
+.timeline-marker {
+    position: absolute;
+    width: 0.75rem;
+    height: 0.75rem;
+    background-color: var(--color-slate-600);
+    border-radius: 50%;
+    left: -1.875rem;
+    top: 0.375rem;
+    border: 2px solid var(--color-black);
+}
+
+.timeline-date {
+    display: block;
+    margin-bottom: var(--space-1);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-normal);
+    line-height: 1;
+    color: var(--color-slate-400);
+}
+
+.timeline-title {
+    font-size: var(--font-size-2xl);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-slate-50);
+    margin-bottom: var(--space-2);
+}
+
+/* Tabs (CSS Radio Buttons) */
+.tabs-container {
+    margin-top: var(--space-4);
+}
+
+.tab-radio {
+    display: none;
+}
+
+.tab-labels {
+    display: flex;
+    gap: var(--space-8);
+    border-bottom: 1px solid var(--color-slate-700);
+    margin-bottom: var(--space-10);
+    overflow-x: auto;
+}
+
+.tab-label {
+    padding: var(--space-6) 0;
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-slate-400);
+    border-bottom: 4px solid transparent;
+    margin-bottom: -1px;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all var(--transition-base) var(--transition-timing);
+}
+
+.tab-label:hover {
+    color: var(--color-slate-200);
+    border-bottom-color: var(--color-slate-700);
+}
+
+#tab0:checked ~ .tab-labels label[for="tab0"],
+#tab1:checked ~ .tab-labels label[for="tab1"],
+#tab2:checked ~ .tab-labels label[for="tab2"],
+#tab3:checked ~ .tab-labels label[for="tab3"] {
+    color: var(--color-slate-200);
+    border-bottom-color: var(--color-slate-300);
+}
+
+.tab-panel {
+    display: none;
+}
+
+#tab0:checked ~ .tab-panels #panel0,
+#tab1:checked ~ .tab-panels #panel1,
+#tab2:checked ~ .tab-panels #panel2,
+#tab3:checked ~ .tab-panels #panel3 {
+    display: block;
 }
diff --git a/src/BlazorApp/wwwroot/css/layout.css b/src/BlazorApp/wwwroot/css/layout.css
index 242bc25..531969f 100644
--- a/src/BlazorApp/wwwroot/css/layout.css
+++ b/src/BlazorApp/wwwroot/css/layout.css
@@ -2,239 +2,17 @@
 
 /* Container */
 .container {
-  width: 100%;
-  max-width: var(--container-max-width);
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: var(--space-6);
-  padding-right: var(--space-6);
+    width: 100%;
+    max-width: var(--container-max-width);
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: var(--space-6);
+    padding-right: var(--space-6);
 }
 
 @media (min-width: 1024px) {
-  .container {
-    padding-left: var(--space-10);
-    padding-right: var(--space-10);
-  }
-}
-
-/* Flexbox */
-.flex {
-  display: flex;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.flex-row {
-  flex-direction: row;
-}
-
-.flex-1 {
-  flex: 1 1 0%;
-}
-
-.items-start {
-  align-items: flex-start;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.items-end {
-  align-items: flex-end;
-}
-
-.justify-start {
-  justify-content: flex-start;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.justify-end {
-  justify-content: flex-end;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.gap-1 {
-  gap: var(--space-1);
-}
-
-.gap-2 {
-  gap: var(--space-2);
-}
-
-.gap-3 {
-  gap: var(--space-3);
-}
-
-.gap-4 {
-  gap: var(--space-4);
-}
-
-.gap-6 {
-  gap: var(--space-6);
-}
-
-.gap-8 {
-  gap: var(--space-8);
-}
-
-/* Grid */
-.grid {
-  display: grid;
-}
-
-.grid-cols-1 {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.grid-cols-3 {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.grid-cols-4 {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-@media (min-width: 640px) {
-  .sm\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .sm\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-@media (min-width: 768px) {
-  .md\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-  .md\:grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-}
-
-@media (min-width: 1024px) {
-  .lg\:grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-  .lg\:grid-cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-}
-
-/* Spacing */
-.min-h-screen {
-  min-height: 100vh;
-}
-
-.p-2 { padding: var(--space-2); }
-.p-4 { padding: var(--space-4); }
-.p-6 { padding: var(--space-6); }
-.p-8 { padding: var(--space-8); }
-
-.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
-.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
-.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
-.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
-
-.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
-.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
-.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
-.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
-
-.m-2 { margin: var(--space-2); }
-.m-4 { margin: var(--space-4); }
-.m-6 { margin: var(--space-6); }
-.m-8 { margin: var(--space-8); }
-
-.mx-auto { margin-left: auto; margin-right: auto; }
-
-.mt-2 { margin-top: var(--space-2); }
-.mt-4 { margin-top: var(--space-4); }
-.mt-6 { margin-top: var(--space-6); }
-.mt-8 { margin-top: var(--space-8); }
-
-.mb-2 { margin-bottom: var(--space-2); }
-.mb-4 { margin-bottom: var(--space-4); }
-.mb-6 { margin-bottom: var(--space-6); }
-.mb-8 { margin-bottom: var(--space-8); }
-
-/* Display */
-.hidden {
-  display: none;
-}
-
-.block {
-  display: block;
-}
-
-.inline-block {
-  display: inline-block;
-}
-
-/* Responsive */
-@media (min-width: 1024px) {
-  .lg\:flex {
-    display: flex;
-  }
-  .lg\:hidden {
-    display: none;
-  }
-  .lg\:block {
-    display: block;
-  }
-}
-
-/* Widths */
-.w-full {
-  width: 100%;
-}
-
-.max-w-sm {
-  max-width: 24rem;
-}
-
-.max-w-md {
-  max-width: 28rem;
-}
-
-.max-w-lg {
-  max-width: 32rem;
-}
-
-.max-w-xl {
-  max-width: 36rem;
-}
-
-.max-w-2xl {
-  max-width: 42rem;
-}
-
-.max-w-7xl {
-  max-width: 80rem;
-}
-
-/* Text */
-.text-center {
-  text-align: center;
-}
-
-.text-left {
-  text-align: left;
-}
-
-.text-right {
-  text-align: right;
+    .container {
+        padding-left: var(--space-10);
+        padding-right: var(--space-10);
+    }
 }
diff --git a/src/BlazorApp/wwwroot/css/reset.css b/src/BlazorApp/wwwroot/css/reset.css
index 5b8f715..2412720 100644
--- a/src/BlazorApp/wwwroot/css/reset.css
+++ b/src/BlazorApp/wwwroot/css/reset.css
@@ -3,30 +3,30 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 * {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 
 html {
-  -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  tab-size: 4;
+    -webkit-text-size-adjust: 100%;
+    -moz-tab-size: 4;
+    tab-size: 4;
 }
 
 html:focus-within {
-  scroll-behavior: smooth;
+    scroll-behavior: smooth;
 }
 
 body {
-  min-height: 100vh;
-  line-height: 1.5;
-  text-rendering: optimizeSpeed;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    min-height: 100vh;
+    line-height: 1.5;
+    text-rendering: optimizeSpeed;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 img,
@@ -34,44 +34,44 @@ picture,
 video,
 canvas,
 svg {
-  display: block;
-  max-width: 100%;
+    display: block;
+    max-width: 100%;
 }
 
 input,
 button,
 textarea,
 select {
-  font: inherit;
+    font: inherit;
 }
 
 button {
-  background: none;
-  border: none;
-  cursor: pointer;
+    background: none;
+    border: none;
+    cursor: pointer;
 }
 
 ul,
 ol {
-  list-style: none;
+    list-style: none;
 }
 
 a {
-  text-decoration: none;
-  color: inherit;
+    text-decoration: none;
+    color: inherit;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  html:focus-within {
-    scroll-behavior: auto;
-  }
+    html:focus-within {
+        scroll-behavior: auto;
+    }
 
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
 }
diff --git a/src/BlazorApp/wwwroot/css/utilities.css b/src/BlazorApp/wwwroot/css/utilities.css
new file mode 100644
index 0000000..4cef9f7
--- /dev/null
+++ b/src/BlazorApp/wwwroot/css/utilities.css
@@ -0,0 +1,641 @@
+/* Utility Classes */
+
+/* Display */
+.hidden {
+    display: none;
+}
+
+.block {
+    display: block;
+}
+
+.inline-block {
+    display: inline-block;
+}
+
+.inline-flex {
+    display: inline-flex;
+}
+
+.flow-root {
+    display: flow-root;
+}
+
+/* Flexbox */
+.flex {
+    display: flex;
+}
+
+.flex-col {
+    flex-direction: column;
+}
+
+.flex-row {
+    flex-direction: row;
+}
+
+.flex-1 {
+    flex: 1 1 0;
+}
+
+.items-start {
+    align-items: flex-start;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.items-end {
+    align-items: flex-end;
+}
+
+.justify-start {
+    justify-content: flex-start;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-end {
+    justify-content: flex-end;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+/* Gap */
+.gap-1 {
+    gap: var(--space-1);
+}
+
+.gap-2 {
+    gap: var(--space-2);
+}
+
+.gap-3 {
+    gap: var(--space-3);
+}
+
+.gap-4 {
+    gap: var(--space-4);
+}
+
+.gap-6 {
+    gap: var(--space-6);
+}
+
+.gap-8 {
+    gap: var(--space-8);
+}
+
+/* Grid */
+.grid {
+    display: grid;
+}
+
+.grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.place-items-center {
+    place-items: center;
+}
+
+/* Spacing */
+.min-h-screen {
+    min-height: 100vh;
+}
+
+.min-h-full {
+    min-height: 100%;
+}
+
+.h-full {
+    height: 100%;
+}
+
+.h-6 {
+    height: 1.5rem;
+}
+
+.h-16 {
+    height: 4rem;
+}
+
+.w-6 {
+    width: 1.5rem;
+}
+
+.w-auto {
+    width: auto;
+}
+
+.w-full {
+    width: 100%;
+}
+
+/* Max Widths */
+.max-w-sm {
+    max-width: 24rem;
+}
+
+.max-w-md {
+    max-width: 28rem;
+}
+
+.max-w-lg {
+    max-width: 32rem;
+}
+
+.max-w-xl {
+    max-width: 36rem;
+}
+
+.max-w-2xl {
+    max-width: 42rem;
+}
+
+.max-w-4xl {
+    max-width: 64rem;
+}
+
+.max-w-7xl {
+    max-width: 80rem;
+}
+
+/* Padding */
+.p-2 {
+    padding: var(--space-2);
+}
+
+.p-4 {
+    padding: var(--space-4);
+}
+
+.p-6 {
+    padding: var(--space-6);
+}
+
+.p-8 {
+    padding: var(--space-8);
+}
+
+.p-1\.5 {
+    padding: 0.375rem;
+}
+
+.p-2\.5 {
+    padding: 0.625rem;
+}
+
+.px-2 {
+    padding-left: var(--space-2);
+    padding-right: var(--space-2);
+}
+
+.px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+}
+
+.px-4 {
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+}
+
+.px-6 {
+    padding-left: var(--space-6);
+    padding-right: var(--space-6);
+}
+
+.px-8 {
+    padding-left: var(--space-8);
+    padding-right: var(--space-8);
+}
+
+.py-2 {
+    padding-top: var(--space-2);
+    padding-bottom: var(--space-2);
+}
+
+.py-4 {
+    padding-top: var(--space-4);
+    padding-bottom: var(--space-4);
+}
+
+.py-6 {
+    padding-top: var(--space-6);
+    padding-bottom: var(--space-6);
+}
+
+.py-8 {
+    padding-top: var(--space-8);
+    padding-bottom: var(--space-8);
+}
+
+.py-24 {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+}
+
+.pt-6 {
+    padding-top: var(--space-6);
+}
+
+.pt-8 {
+    padding-top: var(--space-8);
+}
+
+.pb-4 {
+    padding-bottom: var(--space-4);
+}
+
+/* Margins */
+.m-2 {
+    margin: var(--space-2);
+}
+
+.m-4 {
+    margin: var(--space-4);
+}
+
+.m-6 {
+    margin: var(--space-6);
+}
+
+.m-8 {
+    margin: var(--space-8);
+}
+
+.-m-1\.5 {
+    margin: -0.375rem;
+}
+
+.-m-2\.5 {
+    margin: -0.625rem;
+}
+
+.mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.-mx-3 {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+}
+
+.-my-6 {
+    margin-top: -1.5rem;
+    margin-bottom: -1.5rem;
+}
+
+.mt-2 {
+    margin-top: var(--space-2);
+}
+
+.mt-4 {
+    margin-top: var(--space-4);
+}
+
+.mt-6 {
+    margin-top: var(--space-6);
+}
+
+.mt-8 {
+    margin-top: var(--space-8);
+}
+
+.mt-12 {
+    margin-top: var(--space-12);
+}
+
+.mt-auto {
+    margin-top: auto;
+}
+
+.mb-2 {
+    margin-bottom: var(--space-2);
+}
+
+.mb-4 {
+    margin-bottom: var(--space-4);
+}
+
+.mb-6 {
+    margin-bottom: var(--space-6);
+}
+
+.mb-8 {
+    margin-bottom: var(--space-8);
+}
+
+.mb-10 {
+    margin-bottom: var(--space-10);
+}
+
+.mb-12 {
+    margin-bottom: var(--space-12);
+}
+
+/* Space Between */
+.space-x-6 > * + * {
+    margin-left: var(--space-6);
+}
+
+.space-y-2 > * + * {
+    margin-top: var(--space-2);
+}
+
+.space-y-10 > * + * {
+    margin-top: var(--space-10);
+}
+
+/* Typography */
+.text-center {
+    text-align: center;
+}
+
+.text-left {
+    text-align: left;
+}
+
+.text-right {
+    text-align: right;
+}
+
+.text-xs {
+    font-size: var(--font-size-xs);
+}
+
+.text-sm {
+    font-size: var(--font-size-sm);
+}
+
+.text-base {
+    font-size: var(--font-size-base);
+}
+
+.text-lg {
+    font-size: var(--font-size-lg);
+}
+
+.text-xl {
+    font-size: var(--font-size-xl);
+}
+
+.text-2xl {
+    font-size: var(--font-size-2xl);
+}
+
+.text-3xl {
+    font-size: var(--font-size-3xl);
+}
+
+.text-4xl {
+    font-size: var(--font-size-4xl);
+}
+
+.font-normal {
+    font-weight: var(--font-weight-normal);
+}
+
+.font-medium {
+    font-weight: var(--font-weight-medium);
+}
+
+.font-semibold {
+    font-weight: var(--font-weight-semibold);
+}
+
+.font-bold {
+    font-weight: var(--font-weight-bold);
+}
+
+.leading-tight {
+    line-height: var(--line-height-tight);
+}
+
+.leading-normal {
+    line-height: var(--line-height-normal);
+}
+
+.leading-relaxed {
+    line-height: var(--line-height-relaxed);
+}
+
+.leading-6 {
+    line-height: 1.5;
+}
+
+.leading-7 {
+    line-height: 1.75;
+}
+
+.tracking-tight {
+    letter-spacing: -0.025em;
+}
+
+.underline {
+    text-decoration: underline;
+}
+
+.underline-offset-2 {
+    text-underline-offset: 2px;
+}
+
+.underline-offset-4 {
+    text-underline-offset: 4px;
+}
+
+/* Positioning */
+.fixed {
+    position: fixed;
+}
+
+.inset-0 {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.inset-y-0 {
+    top: 0;
+    bottom: 0;
+}
+
+/* Border */
+.border-t {
+    border-top: 1px solid rgba(226, 232, 240, 0.1);
+}
+
+.divide-y > * + * {
+    border-top: 1px solid rgba(226, 232, 240, 0.1);
+}
+
+.rounded-lg {
+    border-radius: var(--radius-lg);
+}
+
+.rounded-md {
+    border-radius: var(--radius-md);
+}
+
+/* Z-index */
+.z-10 {
+    z-index: var(--z-dropdown);
+}
+
+/* Overflow */
+.overflow-y-auto {
+    overflow-y: auto;
+}
+
+/* Cursor */
+.cursor-pointer {
+    cursor: pointer;
+}
+
+/* Screen Reader Only */
+.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;
+}
+
+/* Responsive Utilities */
+@media (min-width: 640px) {
+    .sm\:max-w-sm {
+        max-width: 24rem;
+    }
+
+    .sm\:ring-1 {
+        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
+    }
+
+    .sm\:border-l-2 {
+        border-left: 2px solid var(--color-slate-800);
+    }
+
+    .sm\:py-32 {
+        padding-top: 8rem;
+        padding-bottom: 8rem;
+    }
+
+    .sm\:grid-cols-2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .sm\:grid-cols-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+}
+
+@media (min-width: 768px) {
+    .md\:flex {
+        display: flex;
+    }
+
+    .md\:flex-row {
+        flex-direction: row;
+    }
+
+    .md\:justify-evenly {
+        justify-content: space-evenly;
+    }
+
+    .md\:items-center {
+        align-items: center;
+    }
+
+    .md\:justify-between {
+        justify-content: space-between;
+    }
+
+    .md\:order-1 {
+        order: 1;
+    }
+
+    .md\:order-2 {
+        order: 2;
+    }
+
+    .md\:mt-0 {
+        margin-top: 0;
+    }
+
+    .md\:py-3 {
+        padding-top: var(--space-3);
+        padding-bottom: var(--space-3);
+    }
+
+    .md\:grid-cols-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .md\:grid-cols-4 {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+}
+
+@media (min-width: 1024px) {
+    .lg\:flex {
+        display: flex;
+    }
+
+    .lg\:hidden {
+        display: none;
+    }
+
+    .lg\:block {
+        display: block;
+    }
+
+    .lg\:px-8 {
+        padding-left: var(--space-8);
+        padding-right: var(--space-8);
+    }
+
+    .lg\:px-10 {
+        padding-left: var(--space-10);
+        padding-right: var(--space-10);
+    }
+
+    .lg\:flex-1 {
+        flex: 1 1 0;
+    }
+
+    .lg\:gap-x-12 {
+        column-gap: var(--space-12);
+    }
+
+    .lg\:grid-cols-4 {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .lg\:grid-cols-5 {
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+}
diff --git a/src/BlazorApp/wwwroot/css/variables.css b/src/BlazorApp/wwwroot/css/variables.css
index b1cfc59..d730245 100644
--- a/src/BlazorApp/wwwroot/css/variables.css
+++ b/src/BlazorApp/wwwroot/css/variables.css
@@ -1,97 +1,97 @@
 /* Design Tokens */
 
 :root {
-  /* Colors */
-  --color-black: #000000;
-  --color-white: #ffffff;
-  --color-slate-50: #f8fafc;
-  --color-slate-100: #f1f5f9;
-  --color-slate-200: #e2e8f0;
-  --color-slate-300: #cbd5e1;
-  --color-slate-400: #94a3b8;
-  --color-slate-500: #64748b;
-  --color-slate-600: #475569;
-  --color-slate-700: #334155;
-  --color-slate-800: #1e293b;
-  --color-slate-900: #0f172a;
-  --color-gray-700: #374151;
-  --color-gray-800: #1f2937;
+    /* Colors */
+    --color-black: #000000;
+    --color-white: #ffffff;
+    --color-slate-50: #f8fafc;
+    --color-slate-100: #f1f5f9;
+    --color-slate-200: #e2e8f0;
+    --color-slate-300: #cbd5e1;
+    --color-slate-400: #94a3b8;
+    --color-slate-500: #64748b;
+    --color-slate-600: #475569;
+    --color-slate-700: #334155;
+    --color-slate-800: #1e293b;
+    --color-slate-900: #0f172a;
+    --color-gray-700: #374151;
+    --color-gray-800: #1f2937;
 
-  /* Typography */
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --font-size-xs: 0.75rem;
-  --font-size-sm: 0.875rem;
-  --font-size-base: 1rem;
-  --font-size-lg: 1.125rem;
-  --font-size-xl: 1.25rem;
-  --font-size-2xl: 1.5rem;
-  --font-size-3xl: 1.875rem;
-  --font-size-4xl: 2.25rem;
-  --font-size-5xl: 3rem;
-  --font-size-6xl: 3.75rem;
-  --line-height-tight: 1.25;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.75;
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
+    /* Typography */
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-base: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+    --font-size-2xl: 1.5rem;
+    --font-size-3xl: 1.875rem;
+    --font-size-4xl: 2.25rem;
+    --font-size-5xl: 3rem;
+    --font-size-6xl: 3.75rem;
+    --line-height-tight: 1.25;
+    --line-height-normal: 1.5;
+    --line-height-relaxed: 1.75;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
 
-  /* Spacing */
-  --space-0: 0;
-  --space-1: 0.25rem;
-  --space-2: 0.5rem;
-  --space-3: 0.75rem;
-  --space-4: 1rem;
-  --space-5: 1.25rem;
-  --space-6: 1.5rem;
-  --space-8: 2rem;
-  --space-10: 2.5rem;
-  --space-12: 3rem;
-  --space-16: 4rem;
-  --space-20: 5rem;
-  --space-24: 6rem;
+    /* Spacing */
+    --space-0: 0;
+    --space-1: 0.25rem;
+    --space-2: 0.5rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-6: 1.5rem;
+    --space-8: 2rem;
+    --space-10: 2.5rem;
+    --space-12: 3rem;
+    --space-16: 4rem;
+    --space-20: 5rem;
+    --space-24: 6rem;
 
-  /* Breakpoints */
-  --breakpoint-sm: 640px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 1024px;
-  --breakpoint-xl: 1280px;
-  --breakpoint-2xl: 1536px;
+    /* Breakpoints */
+    --breakpoint-sm: 640px;
+    --breakpoint-md: 768px;
+    --breakpoint-lg: 1024px;
+    --breakpoint-xl: 1280px;
+    --breakpoint-2xl: 1536px;
 
-  /* Container */
-  --container-max-width: 80rem;
+    /* Container */
+    --container-max-width: 80rem;
 
-  /* Border Radius */
-  --radius-sm: 0.125rem;
-  --radius-base: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
-  --radius-2xl: 1rem;
-  --radius-full: 9999px;
+    /* Border Radius */
+    --radius-sm: 0.125rem;
+    --radius-base: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --radius-full: 9999px;
 
-  /* Z-index */
-  --z-base: 0;
-  --z-dropdown: 10;
-  --z-sticky: 20;
-  --z-fixed: 30;
-  --z-overlay: 40;
-  --z-modal: 50;
-  --z-popover: 60;
-  --z-tooltip: 70;
+    /* Z-index */
+    --z-base: 0;
+    --z-dropdown: 10;
+    --z-sticky: 20;
+    --z-fixed: 30;
+    --z-overlay: 40;
+    --z-modal: 50;
+    --z-popover: 60;
+    --z-tooltip: 70;
 
-  /* Transitions */
-  --transition-fast: 150ms;
-  --transition-base: 200ms;
-  --transition-slow: 300ms;
-  --transition-slower: 500ms;
-  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+    /* Transitions */
+    --transition-fast: 150ms;
+    --transition-base: 200ms;
+    --transition-slow: 300ms;
+    --transition-slower: 500ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
 
-  /* Shadows */
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }