+
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 *@
+
+
+
@Body
-
-
+
+
+
+
+
+
+ @* Mobile menu using CSS checkbox hack *@
+
+
+
+
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 @@
-
+
-
+
+
+
+
+
+ Beau Findlay
+ 
+
+
+
+
+
+
+
+
+
+ Experience
+ This App
+
+
+
+
+
+
+
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"
+
+Beau Findlay - About
+
+This App
+
+ 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
+
+ GitHub
+ .
+
+
+
+ App
+
+
+ This app was originally made using
+ .NET Blazor WASM
+ and then re-written in
+ React
+ with
+ TypeScript
+ 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.
+
+
+ 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.
+
+
+
+
+ Hosting & Deployment
+
+
+ TODO: This 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 @@
Beau Findlay - Experience
+
+Experience
+
+ 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 "/"
-Home
+Beau Findlay - Home
-Hi, I'm Beau.
+
+ I'm a UK-based software engineer and I love building cool stuff.
+
+
+ I specialise in C#/.NET development and I've built systems that scale for hundreds-of-thousands of global users.
+
+
+ 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 music .
+
+
+ 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.
+
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
-Beau Findlay - Not Found
+
+
+
\ 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]
-
-Weather
-
-
-
-
-}
-
-@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 @@
-
+@using BlazorApp.Components.Pages
+
-
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 *@
+
+();
-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);
}
Development Mode
- Swapping to Development environment will display more detailed information about the error that occurred. + Swapping to Development environment will display more detailed information about the error that + occurred.
The Development environment shouldn't be enabled for deployed applications. It can result in displaying sensitive information from exceptions to end users. - For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development + For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT + environment variable to Development and restarting the app.
@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" + ++ Software Engineer since 2018 +
+ +-
+ @foreach (var item in experienceTimelineItems)
+ {
+
-
+
+
+ @item.Title @("@")
+ @foreach (var content in item.Content) + { +@item.CompanyName +@content + } +
+ }
+
Hello, world!
- -Welcome to your new app. +Not Found
-Sorry, the content you are looking for does not exist.
\ No newline at end of file +
+
+404
++ Page not found +
+Sorry, this page doesn't exist.
+Weather
- -This component demonstrates showing data.
- -@if (forecasts == null) -{ -Loading...
-} -else -{ -| Date | -Temp. (C) | -Temp. (F) | -Summary | -
|---|---|---|---|
| @forecast.Date.ToShortDateString() | -@forecast.TemperatureC | -@forecast.TemperatureF | -@forecast.Summary | -
@ChildContent
+ +@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 *@ + +@ChildContent
+ +@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 *@ + +