Compare commits
19 Commits
36b1224127
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| cc96a5044e | |||
|
4188b7982b | ||
|
|
e9293854b4 | ||
|
|
3bbf61ccaa | ||
|
|
f3dcee5660 | ||
|
|
c358e5fb85 | ||
|
|
341795973b | ||
|
|
7457f6b4c4 | ||
| dcd116940c | |||
| fad16cb46f | |||
|
|
014fc042a0 | ||
|
|
b8e1bf8467 | ||
|
|
e4a11cadab | ||
|
|
eae66518c8 | ||
|
|
3eb1798972 | ||
|
|
9e282f7ce5 | ||
|
|
fb438c8287 | ||
|
|
fbec8a00fd | ||
|
|
64e0b88a5e |
25
.dockerignore
Normal file
25
.dockerignore
Normal file
@@ -0,0 +1,25 @@
|
||||
**/.dockerignore
|
||||
**/.env
|
||||
**/.git
|
||||
**/.gitignore
|
||||
**/.project
|
||||
**/.settings
|
||||
**/.toolstarget
|
||||
**/.vs
|
||||
**/.vscode
|
||||
**/.idea
|
||||
**/*.*proj.user
|
||||
**/*.dbmdl
|
||||
**/*.jfm
|
||||
**/azds.yaml
|
||||
**/bin
|
||||
**/charts
|
||||
**/docker-compose*
|
||||
**/Dockerfile*
|
||||
**/node_modules
|
||||
**/npm-debug.log
|
||||
**/obj
|
||||
**/secrets.dev.yaml
|
||||
**/values.dev.yaml
|
||||
LICENSE
|
||||
README.md
|
||||
49
.gitea/workflows/deploy.yml
Normal file
49
.gitea/workflows/deploy.yml
Normal file
@@ -0,0 +1,49 @@
|
||||
name: Build and Deploy
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
|
||||
- name: Build image
|
||||
run: |
|
||||
docker build -t portfolio:latest .
|
||||
docker save portfolio:latest | gzip > portfolio.tar.gz
|
||||
|
||||
- name: Deploy to server
|
||||
uses: appleboy/scp-action@v0.1.7
|
||||
with:
|
||||
host: ${{ secrets.SERVER_HOST }}
|
||||
username: ${{ secrets.SERVER_USER }}
|
||||
key: ${{ secrets.SERVER_SSH_KEY }}
|
||||
source: "portfolio.tar.gz"
|
||||
target: "/mnt/apps/docker-config/portfolio/"
|
||||
|
||||
- name: Restart container
|
||||
uses: appleboy/ssh-action@v1.0.3
|
||||
with:
|
||||
host: ${{ secrets.SERVER_HOST }}
|
||||
username: ${{ secrets.SERVER_USER }}
|
||||
key: ${{ secrets.SERVER_SSH_KEY }}
|
||||
script: |
|
||||
cd /mnt/apps/docker-config/portfolio
|
||||
sudo sh -c "gunzip -c portfolio.tar.gz | docker load"
|
||||
sudo docker compose down
|
||||
sudo docker compose up -d
|
||||
|
||||
- name: Purge Cloudflare cache
|
||||
run: |
|
||||
curl -X POST "https://api.cloudflare.com/client/v4/zones/${{ secrets.CLOUDFLARE_ZONE_ID }}/purge_cache" \
|
||||
-H "Authorization: Bearer ${{ secrets.CLOUDFLARE_API_TOKEN }}" \
|
||||
-H "Content-Type: application/json" \
|
||||
--data '{"purge_everything":true}'
|
||||
45
.github/workflows/azure-static-web-apps.yml
vendored
45
.github/workflows/azure-static-web-apps.yml
vendored
@@ -1,45 +0,0 @@
|
||||
name: Azure Static Web Apps CI/CD
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
pull_request:
|
||||
types: [opened, synchronize, reopened, closed]
|
||||
branches:
|
||||
- main
|
||||
|
||||
jobs:
|
||||
build_and_deploy_job:
|
||||
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
|
||||
runs-on: ubuntu-latest
|
||||
name: Build and Deploy Job
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
with:
|
||||
submodules: true
|
||||
lfs: false
|
||||
- name: Build And Deploy
|
||||
id: builddeploy
|
||||
uses: Azure/static-web-apps-deploy@v1
|
||||
with:
|
||||
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_VICTORIOUS_TREE_0B68B6103 }}
|
||||
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
|
||||
action: "upload"
|
||||
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
|
||||
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
|
||||
app_location: "/src/Client" # App source code path
|
||||
output_location: "dist" # Built app content directory - optional
|
||||
###### End of Repository/Build Configurations ######
|
||||
|
||||
close_pull_request_job:
|
||||
if: github.event_name == 'pull_request' && github.event.action == 'closed'
|
||||
runs-on: ubuntu-latest
|
||||
name: Close Pull Request Job
|
||||
steps:
|
||||
- name: Close Pull Request
|
||||
id: closepullrequest
|
||||
uses: Azure/static-web-apps-deploy@v1
|
||||
with:
|
||||
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_VICTORIOUS_TREE_0B68B6103 }}
|
||||
action: "close"
|
||||
29
Dockerfile
Normal file
29
Dockerfile
Normal file
@@ -0,0 +1,29 @@
|
||||
FROM mcr.microsoft.com/dotnet/aspnet:10.0 AS base
|
||||
WORKDIR /app
|
||||
EXPOSE 5000
|
||||
|
||||
FROM mcr.microsoft.com/dotnet/sdk:10.0 AS build
|
||||
ARG BUILD_CONFIGURATION=Release
|
||||
WORKDIR /src
|
||||
COPY ["src/BlazorApp/BlazorApp.csproj", "src/BlazorApp/"]
|
||||
RUN dotnet restore "src/BlazorApp/BlazorApp.csproj"
|
||||
COPY . .
|
||||
WORKDIR "/src/src/BlazorApp"
|
||||
RUN dotnet build "./BlazorApp.csproj" -c $BUILD_CONFIGURATION -o /app/build
|
||||
|
||||
FROM build AS publish
|
||||
ARG BUILD_CONFIGURATION=Release
|
||||
RUN dotnet publish "./BlazorApp.csproj" -c $BUILD_CONFIGURATION -o /app/publish /p:UseAppHost=false
|
||||
|
||||
FROM base AS final
|
||||
WORKDIR /app
|
||||
|
||||
# Install curl for health checks
|
||||
RUN apt-get update && apt-get install -y curl && rm -rf /var/lib/apt/lists/*
|
||||
|
||||
COPY --from=publish /app/publish .
|
||||
|
||||
HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
|
||||
CMD curl -f http://localhost:5000/health || exit 1
|
||||
|
||||
ENTRYPOINT ["dotnet", "BlazorApp.dll"]
|
||||
@@ -1,2 +1,2 @@
|
||||
# [beaufindlay.com](https://beaufindlay.com)
|
||||
My personal site built in React with TypeScript and published to an Azure Static Web App.
|
||||
My personal site built in .NET Blazor and published to a self-hosted docker container via a self-hosted Gitea runner. This code repo is also on a self-hosted instance of Gitea running on a headless linux server.
|
||||
766
migration.md
766
migration.md
@@ -1,766 +0,0 @@
|
||||
# Blazor SSR Migration Plan
|
||||
|
||||
## Project Overview
|
||||
Migrating a React/TypeScript portfolio website to a **minimal, dependency-free** .NET Blazor application with static server-side rendering.
|
||||
|
||||
**Current Stack:**
|
||||
- React 18.2 + TypeScript
|
||||
- Vite build tool
|
||||
- Tailwind CSS (to be replaced with vanilla CSS)
|
||||
- React Router DOM
|
||||
- Headless UI components (Dialog/Tabs - to be replaced with vanilla HTML/CSS/JS)
|
||||
- React Icons (to be replaced with SVG icons)
|
||||
- Azure Static Web Apps hosting
|
||||
|
||||
**Target Stack:**
|
||||
- .NET 10 Blazor with Static SSR (no WebSockets/SignalR)
|
||||
- C# Razor components (server-rendered only)
|
||||
- **Vanilla CSS only** (no frameworks, no preprocessors)
|
||||
- Blazor Router (built-in)
|
||||
- **No external component libraries**
|
||||
- **No icon dependencies** (inline SVG)
|
||||
- Azure App Service or Azure Container Apps hosting
|
||||
|
||||
**Migration Philosophy:**
|
||||
- Zero external dependencies beyond .NET runtime
|
||||
- Simple, maintainable vanilla CSS
|
||||
- Static server-side rendering (no interactivity circuits)
|
||||
- Modern CSS features (Grid, Flexbox, CSS Variables, Container Queries)
|
||||
- Native HTML elements with custom styling
|
||||
- **Zero JavaScript** - pure CSS solutions for all interactivity (checkbox hack, :target pseudo-class)
|
||||
|
||||
---
|
||||
|
||||
## Phase 1: Project Setup
|
||||
|
||||
### 1.1 .NET Project Initialization
|
||||
- [ ] Install .NET 10 SDK
|
||||
- [ ] Create new Blazor Web App project with SSR only: `dotnet new blazor -o src/BlazorApp -int None`
|
||||
- Note: `-int None` disables interactivity (no SignalR/WebSockets)
|
||||
- [ ] Verify project builds: `dotnet build`
|
||||
- [ ] Review generated files: `Program.cs`, `App.razor`, `Components/_Imports.razor`, `appsettings.json`
|
||||
- [ ] Confirm `Program.cs` does NOT include `AddInteractiveServerComponents()` or SignalR setup
|
||||
|
||||
### 1.2 Solution Structure
|
||||
- [ ] Create solution file: `dotnet new sln -n my-portfolio`
|
||||
- [ ] Add project to solution: `dotnet sln add src/BlazorApp/BlazorApp.csproj`
|
||||
- [ ] Configure project properties (nullable, implicit usings)
|
||||
- [ ] Ensure render modes are set to static SSR only
|
||||
|
||||
### 1.3 Git Configuration
|
||||
- [ ] Update `.gitignore` for .NET (bin/, obj/, .vs/)
|
||||
- [ ] Archive React project (move to `archive/react-version/` or create `pre-blazor-migration` tag)
|
||||
- [ ] Commit initial Blazor project structure
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: CSS Architecture & Design System
|
||||
|
||||
### 2.1 CSS Variables Setup
|
||||
- [ ] Create `wwwroot/css/variables.css` with design tokens:
|
||||
- Colors (black: #000, white: #fff, gray shades)
|
||||
- Spacing scale (0.25rem, 0.5rem, 1rem, 1.5rem, 2rem, etc.)
|
||||
- Typography (font-family: monospace, font-sizes, line-heights)
|
||||
- Breakpoints (mobile-first: 640px, 768px, 1024px, 1280px)
|
||||
- Z-index scale
|
||||
- Border radius values
|
||||
- Transition durations
|
||||
|
||||
### 2.2 Base Styles
|
||||
- [ ] Create `wwwroot/css/reset.css` with modern CSS reset
|
||||
- [ ] Create `wwwroot/css/base.css`:
|
||||
- Body styles (background: black, color: slate-50, font: monospace)
|
||||
- Typography defaults
|
||||
- Link styles
|
||||
- Focus styles for accessibility
|
||||
- Custom scrollbar styles
|
||||
- Selection styles
|
||||
|
||||
### 2.3 Layout Utilities
|
||||
- [ ] Create `wwwroot/css/layout.css`:
|
||||
- Container classes (max-width, centering)
|
||||
- Flexbox utilities (flex, flex-col, items-center, justify-between, gap, etc.)
|
||||
- Grid utilities (grid, grid-cols)
|
||||
- Spacing utilities (padding, margin classes)
|
||||
- Responsive utilities
|
||||
|
||||
### 2.4 Component Styles
|
||||
- [ ] Create `wwwroot/css/components.css`:
|
||||
- Button styles (primary, secondary, hover, focus, disabled states)
|
||||
- Input/textarea styles
|
||||
- Card styles
|
||||
- Navigation styles
|
||||
- Footer styles
|
||||
- Link styles
|
||||
- [ ] Create `wwwroot/css/animations.css`:
|
||||
- Fade-in animation
|
||||
- Hover transitions
|
||||
- Loading spinner animation
|
||||
|
||||
### 2.5 Compile CSS
|
||||
- [ ] Create `wwwroot/css/app.css` that imports all CSS files
|
||||
- [ ] Reference in `index.html`: `<link href="css/app.css" rel="stylesheet" />`
|
||||
- [ ] Test CSS loads correctly
|
||||
|
||||
---
|
||||
|
||||
## Phase 3: SVG Icon System
|
||||
|
||||
### 3.1 Extract Icons
|
||||
- [ ] Identify all react-icons used:
|
||||
- FaBars (hamburger menu)
|
||||
- FaXmark (close X)
|
||||
- FaGithub
|
||||
- FaLinkedin
|
||||
- FaEnvelope
|
||||
- FaDatabase
|
||||
- FaDocker
|
||||
- FaReact
|
||||
- SiCsharp
|
||||
- SiMicrosoftazure
|
||||
- SiBlazor
|
||||
- [ ] Download SVG paths from icon sources (FontAwesome, Simple Icons)
|
||||
- [ ] Create reusable Icon component: `Components/Icon.razor`
|
||||
|
||||
### 3.2 Icon Component
|
||||
- [ ] Implement `Icon.razor` with parameters:
|
||||
- `Name` (string): icon identifier
|
||||
- `Size` (int, default 24): icon size in pixels
|
||||
- `CssClass` (string): additional CSS classes
|
||||
- [ ] Store SVG paths in C# dictionary or switch statement
|
||||
- [ ] Test all icons render correctly
|
||||
|
||||
---
|
||||
|
||||
## Phase 4: Core Application Structure
|
||||
|
||||
### 4.1 Routing Setup
|
||||
- [ ] Configure routes in `App.razor`:
|
||||
- `/` → Home page
|
||||
- `/work` → Work page
|
||||
- `/about` → About page
|
||||
- `NotFound` → 404/Error page
|
||||
- [ ] Test routing and navigation
|
||||
|
||||
### 4.2 Layout Component
|
||||
- [ ] Create `Shared/MainLayout.razor`
|
||||
- [ ] Implement structure:
|
||||
- Header with NavBar
|
||||
- Main content area with `@Body`
|
||||
- Footer
|
||||
- [ ] Apply CSS classes (container, flex layout, min-height)
|
||||
- [ ] Add fade-in animation class
|
||||
- [ ] Test layout renders correctly
|
||||
|
||||
### 4.3 Navigation Component
|
||||
- [ ] Create `Shared/NavBar.razor`
|
||||
- [ ] Implement desktop navigation:
|
||||
- Logo image
|
||||
- Navigation links (Home, Work, About)
|
||||
- [ ] Implement mobile navigation:
|
||||
- Hamburger button (toggle mobile menu)
|
||||
- Mobile menu overlay with links
|
||||
- Close button
|
||||
- Social icons in mobile menu
|
||||
- [ ] Use Blazor's built-in `NavLink` component with custom styling
|
||||
- [ ] Implement mobile menu state with C# boolean property
|
||||
- [ ] Style with pure CSS (no Headless UI)
|
||||
|
||||
### 4.4 Footer Component
|
||||
- [ ] Create `Shared/Footer.razor`
|
||||
- [ ] Port footer content
|
||||
- [ ] Apply styling
|
||||
|
||||
---
|
||||
|
||||
## Phase 5: Page Components
|
||||
|
||||
### 5.1 Home Page
|
||||
- [ ] Create `Pages/Home.razor` with `@page "/"`
|
||||
- [ ] Port content from `HomePage.tsx`
|
||||
- [ ] Reference child components (Title, Text, TechIcons)
|
||||
- [ ] Test rendering
|
||||
|
||||
### 5.2 Work Page
|
||||
- [ ] Create `Pages/Work.razor` with `@page "/work"`
|
||||
- [ ] Port content from `WorkPage.tsx`
|
||||
- [ ] Test rendering
|
||||
|
||||
### 5.3 About Page
|
||||
- [ ] Create `Pages/About.razor` with `@page "/about"`
|
||||
- [ ] Port content from `AboutPage.tsx`
|
||||
- [ ] Test rendering
|
||||
|
||||
### 5.4 Error/404 Page
|
||||
- [ ] Create `Pages/NotFound.razor` with `@page "/404"`
|
||||
- [ ] Port content from `ErrorPage.tsx`
|
||||
- [ ] Configure as NotFound in router
|
||||
- [ ] Test 404 handling
|
||||
|
||||
---
|
||||
|
||||
## Phase 6: Reusable UI Components
|
||||
|
||||
### 6.1 Typography Components (7)
|
||||
- [ ] `Components/Title.razor` - H1 heading
|
||||
- [ ] `Components/Subtitle.razor` - H2 heading
|
||||
- [ ] `Components/Text.razor` - Paragraph with margin
|
||||
- [ ] `Components/Label.razor` - Form label
|
||||
- [ ] `Components/List.razor` - UL wrapper
|
||||
- [ ] `Components/ListItem.razor` - LI element
|
||||
- [ ] `Components/AnchorLink.razor` - External link with styling
|
||||
|
||||
### 6.2 Form Components (3)
|
||||
- [ ] `Components/Button.razor` - Button with hover/focus states
|
||||
- [ ] `Components/TextInput.razor` - Input field with label
|
||||
- [ ] `Components/TextAreaInput.razor` - Textarea with label
|
||||
|
||||
### 6.3 Display Components (5)
|
||||
- [ ] `Components/TechIcons.razor` - Tech stack grid with icons
|
||||
- [ ] `Components/SocialIcons.razor` - Social media links with icons
|
||||
- [ ] `Components/WorkTimeline.razor` - Work experience timeline
|
||||
- [ ] `Components/Loading.razor` - Loading state wrapper
|
||||
- [ ] `Components/LoadingSpinner.razor` - Spinner animation
|
||||
|
||||
### 6.4 Feature Components (2)
|
||||
- [ ] `Components/ContactMe.razor` - Contact form
|
||||
- [ ] `Components/AboutTabs.razor` - Tab interface (vanilla CSS/JS)
|
||||
|
||||
---
|
||||
|
||||
## Phase 7: Interactive Components (Pure CSS - No JavaScript)
|
||||
|
||||
### 7.1 Mobile Menu (CSS Checkbox Hack)
|
||||
- [ ] Implement in `NavBar.razor`:
|
||||
- Add hidden checkbox: `<input type="checkbox" id="mobile-menu-toggle" class="menu-toggle" />`
|
||||
- Add label for hamburger: `<label for="mobile-menu-toggle">☰</label>`
|
||||
- Add label for close button inside menu: `<label for="mobile-menu-toggle">✕</label>`
|
||||
- Render menu panel as sibling to checkbox
|
||||
- [ ] Style with CSS:
|
||||
- Hide checkbox: `.menu-toggle { display: none; }`
|
||||
- Show/hide menu based on checkbox state: `.menu-toggle:checked ~ .mobile-menu { ... }`
|
||||
- Show/hide overlay: `.menu-toggle:checked ~ .overlay { ... }`
|
||||
- Slide-in animation using `transform: translateX()`
|
||||
- Transparent overlay with backdrop-filter blur
|
||||
- Z-index layering for proper stacking
|
||||
- [ ] Test keyboard navigation (checkbox is focusable)
|
||||
|
||||
### 7.2 Tabs Component (CSS :target Pseudo-Class or Radio Buttons)
|
||||
- [ ] **Option A - Radio Button Approach (Recommended):**
|
||||
- Create `AboutTabs.razor`:
|
||||
- Hidden radio inputs: `<input type="radio" name="tabs" id="tab1" checked />`
|
||||
- Label buttons: `<label for="tab1">Tab 1</label>`
|
||||
- Tab panels as siblings to inputs
|
||||
- Style with CSS:
|
||||
- Hide radio buttons: `input[type="radio"] { display: none; }`
|
||||
- Active tab styling: `#tab1:checked ~ .tabs-labels label[for="tab1"] { ... }`
|
||||
- Show panel: `#tab1:checked ~ .tab-panels .panel1 { display: block; }`
|
||||
- Hide other panels by default
|
||||
- [ ] **Option B - :target Pseudo-Class:**
|
||||
- Use anchor links: `<a href="#tab1">Tab 1</a>`
|
||||
- Panel IDs: `<div id="tab1" class="tab-panel">...</div>`
|
||||
- Style: `.tab-panel:target { display: block; }`
|
||||
- Note: Changes URL hash
|
||||
- [ ] Choose approach and implement
|
||||
- [ ] Add smooth transitions with CSS
|
||||
|
||||
### 7.3 Form Handling (Traditional POST)
|
||||
- [ ] Implement form submission in `ContactMe.razor`
|
||||
- [ ] Use standard HTML `<form>` with POST action
|
||||
- [ ] Server-side endpoint to handle form submission
|
||||
- [ ] Redirect after post pattern (PRG)
|
||||
- [ ] Add HTML5 validation attributes
|
||||
- [ ] Style validation states with CSS (`:invalid`, `:valid`)
|
||||
|
||||
---
|
||||
|
||||
## Phase 8: Tailwind CSS to Vanilla CSS Conversion
|
||||
|
||||
### 8.1 Analyze Tailwind Usage
|
||||
- [ ] Document all Tailwind classes used in current app:
|
||||
- Layout: `flex`, `flex-col`, `items-center`, `justify-between`, `max-w-7xl`, etc.
|
||||
- Spacing: `px-6`, `py-8`, `mt-4`, `mb-6`, `space-x-6`, etc.
|
||||
- Typography: `text-sm`, `text-xl`, `font-semibold`, `font-mono`, etc.
|
||||
- Colors: `bg-black`, `text-white`, `text-gray-200`, `ring-gray-300`, etc.
|
||||
- Responsive: `lg:flex`, `md:order-2`, `sm:max-w-sm`, etc.
|
||||
- Effects: `hover:bg-gray-800`, `focus-visible:outline`, etc.
|
||||
|
||||
### 8.2 Create CSS Equivalents
|
||||
- [ ] Create utility classes in `layout.css`:
|
||||
```css
|
||||
.flex { display: flex; }
|
||||
.flex-col { flex-direction: column; }
|
||||
.items-center { align-items: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.max-w-7xl { max-width: 80rem; margin: 0 auto; }
|
||||
.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
|
||||
```
|
||||
- [ ] Create spacing utilities:
|
||||
```css
|
||||
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
|
||||
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
|
||||
.mt-4 { margin-top: 1rem; }
|
||||
/* etc. */
|
||||
```
|
||||
- [ ] Create responsive utilities using media queries:
|
||||
```css
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:flex { display: flex; }
|
||||
}
|
||||
```
|
||||
- [ ] Alternative: Use component-specific classes instead of utilities
|
||||
|
||||
### 8.3 Choose Approach
|
||||
- [ ] **Option A (Recommended):** Component-specific CSS classes
|
||||
- More maintainable for small projects
|
||||
- Better for this portfolio site (20 components)
|
||||
- Example: `.nav-bar {}`, `.nav-bar__logo {}`, `.nav-bar__menu {}`
|
||||
- [ ] **Option B:** Minimal utility classes
|
||||
- Create only the most-used utilities (flex, grid, spacing)
|
||||
- Combine with component classes
|
||||
- [ ] Document chosen approach in README
|
||||
|
||||
---
|
||||
|
||||
## Phase 9: SEO & Meta Tags
|
||||
|
||||
### 9.1 HTML Head Configuration
|
||||
- [ ] Update `wwwroot/index.html` with meta tags:
|
||||
- Charset, viewport
|
||||
- Description, author
|
||||
- Open Graph tags (og:title, og:description, og:image, og:url)
|
||||
- Favicon reference
|
||||
- [ ] Ensure all tags from React version are migrated
|
||||
- [ ] Test with social media preview tools
|
||||
|
||||
### 9.2 Analytics Integration
|
||||
- [ ] Add Google Analytics script to `index.html`
|
||||
- [ ] Add CookieYes consent script to `index.html`
|
||||
- [ ] Test analytics on navigation (use `NavigationManager.LocationChanged` if needed)
|
||||
- [ ] Verify GDPR compliance
|
||||
|
||||
---
|
||||
|
||||
## Phase 10: Build & Optimization
|
||||
|
||||
### 10.1 Build Configuration
|
||||
- [ ] Configure `.csproj` for optimizations:
|
||||
```xml
|
||||
<PropertyGroup>
|
||||
<PublishReadyToRun>true</PublishReadyToRun>
|
||||
<PublishReadyToRunShowWarnings>true</PublishReadyToRunShowWarnings>
|
||||
</PropertyGroup>
|
||||
```
|
||||
- [ ] Test production build: `dotnet publish -c Release`
|
||||
- [ ] Analyze output in `bin/Release/net10.0/publish/`
|
||||
- [ ] Verify CSS is minimal and unminified (easy to debug)
|
||||
- [ ] Verify NO JavaScript files present
|
||||
|
||||
### 10.2 CSS Optimization
|
||||
- [ ] Remove unused CSS
|
||||
- [ ] Combine CSS files if beneficial
|
||||
- [ ] Consider minification (optional - Azure handles this)
|
||||
- [ ] Test CSS loads and applies correctly
|
||||
- [ ] Verify CSS-only menu and tabs work in all browsers
|
||||
|
||||
### 10.3 Image Optimization
|
||||
- [ ] Verify `logo.webp` is optimized
|
||||
- [ ] Add width/height attributes to prevent layout shift
|
||||
- [ ] Test image loading
|
||||
|
||||
### 10.4 Zero JavaScript Verification
|
||||
- [ ] Confirm no `.js` files in `wwwroot/js/`
|
||||
- [ ] Confirm no `<script>` tags in layouts/pages
|
||||
- [ ] Test site functions without JavaScript enabled in browser
|
||||
|
||||
---
|
||||
|
||||
## Phase 11: Deployment Configuration
|
||||
|
||||
### 11.1 Azure App Service Configuration
|
||||
- [ ] Create Azure App Service (Linux or Windows)
|
||||
- [ ] Configure environment variables in Azure portal:
|
||||
- `ASPNETCORE_ENVIRONMENT=Production`
|
||||
- [ ] Enable HTTPS only
|
||||
- [ ] Configure health check endpoint
|
||||
- [ ] Set up Application Insights (optional)
|
||||
|
||||
### 11.2 GitHub Actions Workflow
|
||||
- [ ] Create/update `.github/workflows/azure-deploy.yml`:
|
||||
```yaml
|
||||
name: Deploy to Azure App Service
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ main ]
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
build-and-deploy:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- name: Setup .NET
|
||||
uses: actions/setup-dotnet@v3
|
||||
with:
|
||||
dotnet-version: '10.0.x'
|
||||
|
||||
- name: Build
|
||||
run: dotnet build src/BlazorApp/BlazorApp.csproj -c Release
|
||||
|
||||
- name: Publish
|
||||
run: dotnet publish src/BlazorApp/BlazorApp.csproj -c Release -o ${{env.DOTNET_ROOT}}/myapp
|
||||
|
||||
- name: Deploy to Azure Web App
|
||||
uses: azure/webapps-deploy@v2
|
||||
with:
|
||||
app-name: 'your-app-name'
|
||||
publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
|
||||
package: ${{env.DOTNET_ROOT}}/myapp
|
||||
```
|
||||
- [ ] Set up Azure publish profile in GitHub secrets
|
||||
- [ ] Test workflow on branch
|
||||
|
||||
### 11.3 Local Development Setup
|
||||
- [ ] Document commands:
|
||||
- Run: `dotnet watch` (hot reload enabled)
|
||||
- Build: `dotnet build`
|
||||
- Publish: `dotnet publish -c Release`
|
||||
- [ ] Test hot reload functionality
|
||||
- [ ] Configure HTTPS for local dev (trust cert)
|
||||
- [ ] Verify no SignalR scripts loaded (check browser network tab)
|
||||
- [ ] Test CSS-only interactivity (menu, tabs) during development
|
||||
|
||||
---
|
||||
|
||||
## Phase 12: Testing & Quality Assurance
|
||||
|
||||
### 12.1 Visual Testing
|
||||
- [ ] Compare React site vs Blazor site side-by-side
|
||||
- [ ] Test all pages render identically
|
||||
- [ ] Test all components display correctly
|
||||
- [ ] Test responsive design:
|
||||
- Mobile (320px, 375px, 414px)
|
||||
- Tablet (768px, 1024px)
|
||||
- Desktop (1280px, 1920px)
|
||||
- [ ] Test cross-browser:
|
||||
- Chrome/Edge (Chromium)
|
||||
- Firefox
|
||||
- Safari (if available)
|
||||
|
||||
### 12.2 Functional Testing
|
||||
- [ ] Test navigation between pages (full page reloads)
|
||||
- [ ] Test mobile menu open/close (CSS checkbox)
|
||||
- [ ] Test tab switching in About page (CSS radio/target)
|
||||
- [ ] Test all external links
|
||||
- [ ] Test form submission with POST/redirect
|
||||
- [ ] Test 404 page navigation
|
||||
- [ ] Test with JavaScript disabled in browser
|
||||
- [ ] Verify no JavaScript errors (should be none)
|
||||
|
||||
### 12.3 Accessibility Testing
|
||||
- [ ] Test keyboard navigation (Tab, Enter, Space for checkboxes/radios)
|
||||
- [ ] Test screen reader compatibility (aria-labels, proper label associations)
|
||||
- [ ] Test focus indicators (especially on hidden checkbox/radio controls)
|
||||
- [ ] Test color contrast (black/white theme)
|
||||
- [ ] Verify checkbox and radio button labels are properly associated
|
||||
- [ ] Run Lighthouse accessibility audit
|
||||
|
||||
### 12.4 Performance Testing
|
||||
- [ ] Test server response times for page requests
|
||||
- [ ] Test First Contentful Paint (FCP)
|
||||
- [ ] Test Time to Interactive (TTI)
|
||||
- [ ] Test with throttled network (3G)
|
||||
- [ ] Verify no WebSocket connections in network tab
|
||||
- [ ] Verify no JavaScript downloads
|
||||
- [ ] Run Lighthouse performance audit
|
||||
- [ ] Target: FCP < 1s, TTI < 1.5s (server-rendered, zero JavaScript, instant interactive)
|
||||
|
||||
### 12.5 SEO Testing
|
||||
- [ ] Test meta tags with social media debuggers:
|
||||
- Facebook Sharing Debugger
|
||||
- Twitter Card Validator
|
||||
- LinkedIn Post Inspector
|
||||
- [ ] Test robots.txt accessibility
|
||||
- [ ] Test favicon in browser tabs
|
||||
- [ ] Run Lighthouse SEO audit
|
||||
|
||||
---
|
||||
|
||||
## Phase 13: Documentation & Cleanup
|
||||
|
||||
### 13.1 Update Documentation
|
||||
- [ ] Update README.md:
|
||||
```markdown
|
||||
# beaufindlay.com
|
||||
|
||||
My personal portfolio site built with .NET Blazor WebAssembly.
|
||||
|
||||
## Tech Stack
|
||||
- .NET 10 Blazor SSR (static server-side rendering)
|
||||
- Pure CSS only (zero JavaScript)
|
||||
- Hosted on Azure App Service
|
||||
|
||||
## Development
|
||||
- Run: `dotnet watch`
|
||||
- Build: `dotnet build`
|
||||
- Publish: `dotnet publish -c Release`
|
||||
|
||||
## Features
|
||||
- Zero external dependencies (no npm, no frameworks, no JavaScript)
|
||||
- Static server-side rendering (no WebSockets)
|
||||
- Pure CSS interactivity (checkbox hack for menu, radio buttons for tabs)
|
||||
- Mobile-first responsive design
|
||||
- Accessible and SEO-optimized
|
||||
- Works with JavaScript disabled
|
||||
```
|
||||
- [ ] Document CSS architecture in comments
|
||||
- [ ] Add migration notes (lessons learned, gotchas)
|
||||
|
||||
### 13.2 Clean Up React Files
|
||||
- [ ] Archive React project:
|
||||
- Option A: Move to `archive/react-version/`
|
||||
- Option B: Create git tag `pre-blazor-migration` and delete
|
||||
- Option C: Keep in separate branch
|
||||
- [ ] Remove Node.js files from root:
|
||||
- Delete `src/Client/package.json`
|
||||
- Delete `src/Client/package-lock.json`
|
||||
- Delete `src/Client/node_modules/`
|
||||
- Delete `src/Client/tsconfig*.json`
|
||||
- Delete `src/Client/vite.config.ts`
|
||||
- Delete `src/Client/tailwind.config.js`
|
||||
- Delete `src/Client/postcss.config.js`
|
||||
- Delete `src/Client/.eslintrc.cjs`
|
||||
- [ ] Update `.gitignore` (remove Node.js entries)
|
||||
|
||||
### 13.3 Code Quality
|
||||
- [ ] Run `dotnet format` on all files
|
||||
- [ ] Add XML documentation comments to public components
|
||||
- [ ] Ensure consistent naming conventions
|
||||
- [ ] Remove unused using statements
|
||||
- [ ] Remove commented-out code
|
||||
|
||||
---
|
||||
|
||||
## Phase 14: Production Deployment
|
||||
|
||||
### 14.1 Pre-Deployment Checklist
|
||||
- [ ] All components migrated and tested ✓
|
||||
- [ ] All routes working ✓
|
||||
- [ ] Mobile menu functional ✓
|
||||
- [ ] Tabs functional ✓
|
||||
- [ ] Analytics configured ✓
|
||||
- [ ] SEO tags verified ✓
|
||||
- [ ] Performance acceptable ✓
|
||||
- [ ] No console errors ✓
|
||||
- [ ] Cross-browser tested ✓
|
||||
|
||||
### 14.2 Deploy to Production
|
||||
- [ ] Merge `blazor-refactor` branch to `main`
|
||||
- [ ] Monitor GitHub Actions workflow
|
||||
- [ ] Verify deployment succeeds
|
||||
- [ ] Test production site at beaufindlay.com
|
||||
|
||||
### 14.3 Post-Deployment
|
||||
- [ ] Verify site loads correctly in production
|
||||
- [ ] Test all functionality in production
|
||||
- [ ] Verify analytics tracking
|
||||
- [ ] Monitor for errors (first 24-48 hours)
|
||||
- [ ] Check browser console for any warnings
|
||||
- [ ] Verify SSL certificate
|
||||
- [ ] Test social media sharing previews
|
||||
|
||||
---
|
||||
|
||||
## Component Migration Checklist
|
||||
|
||||
### Pages (5)
|
||||
- [ ] Layout (MainLayout.razor)
|
||||
- [ ] Home (Pages/Home.razor)
|
||||
- [ ] Work (Pages/Work.razor)
|
||||
- [ ] About (Pages/About.razor)
|
||||
- [ ] Error/404 (Pages/NotFound.razor)
|
||||
|
||||
### Typography Components (7)
|
||||
- [ ] Title.razor
|
||||
- [ ] Subtitle.razor
|
||||
- [ ] Text.razor
|
||||
- [ ] Label.razor
|
||||
- [ ] List.razor
|
||||
- [ ] ListItem.razor
|
||||
- [ ] AnchorLink.razor
|
||||
|
||||
### Form Components (3)
|
||||
- [ ] Button.razor
|
||||
- [ ] TextInput.razor
|
||||
- [ ] TextAreaInput.razor
|
||||
|
||||
### Display Components (5)
|
||||
- [ ] TechIcons.razor
|
||||
- [ ] SocialIcons.razor
|
||||
- [ ] WorkTimeline.razor
|
||||
- [ ] Loading.razor
|
||||
- [ ] LoadingSpinner.razor
|
||||
|
||||
### Feature Components (3)
|
||||
- [ ] NavBar.razor (in Shared/)
|
||||
- [ ] Footer.razor (in Shared/)
|
||||
- [ ] ContactMe.razor
|
||||
- [ ] AboutTabs.razor
|
||||
|
||||
### Shared/Infrastructure (2)
|
||||
- [ ] Icon.razor (new - SVG icon system)
|
||||
- [ ] CssHelper.cs (optional - CSS class utilities)
|
||||
|
||||
**Total: 25 components**
|
||||
|
||||
---
|
||||
|
||||
## CSS File Structure
|
||||
|
||||
```
|
||||
wwwroot/
|
||||
├── css/
|
||||
│ ├── variables.css # CSS custom properties (design tokens)
|
||||
│ ├── reset.css # Modern CSS reset
|
||||
│ ├── base.css # Base typography and body styles
|
||||
│ ├── layout.css # Layout utilities (flex, grid, container)
|
||||
│ ├── components.css # Component-specific styles
|
||||
│ ├── animations.css # Animations and transitions
|
||||
│ └── app.css # Main file that imports all others
|
||||
├── logo.webp
|
||||
├── robots.txt
|
||||
└── index.html
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Key Syntax Conversions
|
||||
|
||||
| React/JSX | Blazor/Razor |
|
||||
|-----------|--------------|
|
||||
| `className="..."` | `class="..."` |
|
||||
| `{variable}` | `@variable` |
|
||||
| `{condition && <Element />}` | `@if (condition) { <Element /> }` |
|
||||
| `{items.map(item => ...)}` | `@foreach (var item in items) { ... }` |
|
||||
| `const [state, setState] = useState()` | `private bool state;` + `StateHasChanged()` |
|
||||
| `onClick={handler}` | `@onclick="Handler"` |
|
||||
| `onChange={handler}` | `@onchange="Handler"` |
|
||||
| `<Component prop={value} />` | `<Component Prop="@value" />` |
|
||||
| Props interface | `[Parameter]` properties |
|
||||
| `import Component from './Component'` | `@using` or implicit |
|
||||
|
||||
---
|
||||
|
||||
## Dependencies Eliminated
|
||||
|
||||
### Removed Libraries
|
||||
- ❌ Tailwind CSS → ✅ Vanilla CSS
|
||||
- ❌ PostCSS → ✅ None
|
||||
- ❌ Autoprefixer → ✅ Modern browsers only
|
||||
- ❌ React Icons → ✅ Inline SVG
|
||||
- ❌ Headless UI → ✅ Native HTML + CSS
|
||||
- ❌ React Router DOM → ✅ Blazor Router (built-in)
|
||||
- ❌ Vite → ✅ .NET SDK
|
||||
- ❌ TypeScript → ✅ C#
|
||||
- ❌ ESLint → ✅ Roslyn analyzers (built-in)
|
||||
- ❌ Node.js → ✅ None
|
||||
|
||||
### Added Technology
|
||||
- ✅ Static server-side rendering (Blazor SSR mode)
|
||||
- ✅ Pure CSS interactivity techniques (checkbox hack, radio buttons, :target pseudo-class)
|
||||
|
||||
### Build Dependencies
|
||||
- Before: Node.js, npm, Vite, TypeScript compiler, Tailwind CLI
|
||||
- After: .NET SDK only
|
||||
|
||||
### Hosting Requirements
|
||||
- Before: Static hosting (Azure Static Web Apps, any CDN)
|
||||
- After: ASP.NET Core server (Azure App Service, Container Apps, or any host supporting .NET)
|
||||
|
||||
---
|
||||
|
||||
## Risk Assessment
|
||||
|
||||
### High Risk (Requires Testing)
|
||||
- **Mobile menu with CSS checkbox hack:** CSS-only implementation complexity
|
||||
- *Mitigation:* Well-established pattern, test thoroughly across browsers
|
||||
- **Tabs with CSS (radio buttons or :target):** CSS-only implementation complexity
|
||||
- *Mitigation:* Test both approaches, choose most accessible
|
||||
- **Icon system:** 11 icons need SVG paths
|
||||
- *Mitigation:* Download from FontAwesome/Simple Icons, test early
|
||||
- **CSS-only accessibility:** Ensuring keyboard navigation works properly
|
||||
- *Mitigation:* Thorough accessibility testing with screen readers
|
||||
|
||||
### Medium Risk
|
||||
- **CSS conversion from Tailwind:** Large effort
|
||||
- *Mitigation:* Component-specific CSS, test each component
|
||||
- **Server hosting:** Requires server infrastructure instead of static hosting
|
||||
- *Mitigation:* Azure App Service is straightforward to configure
|
||||
- **Browser compatibility for CSS tricks:** Checkbox hack and advanced selectors
|
||||
- *Mitigation:* Test on all major browsers, provide fallbacks if needed
|
||||
|
||||
### Low Risk
|
||||
- **Basic component migration:** Straightforward
|
||||
- **Routing:** Blazor router is similar to React Router
|
||||
- **Static assets:** Simple copy operation
|
||||
|
||||
---
|
||||
|
||||
## Success Criteria
|
||||
|
||||
- [ ] Zero npm/Node.js dependencies
|
||||
- [ ] Zero CSS framework dependencies
|
||||
- [ ] Zero JavaScript (pure CSS interactivity)
|
||||
- [ ] All pages render identically to React version
|
||||
- [ ] Mobile menu works smoothly (CSS checkbox hack)
|
||||
- [ ] Tabs work smoothly (CSS radio buttons or :target)
|
||||
- [ ] Site loads in < 2 seconds on 4G (server-rendered)
|
||||
- [ ] Site works with JavaScript disabled
|
||||
- [ ] No WebSocket connections present
|
||||
- [ ] No SignalR scripts loaded
|
||||
- [ ] No JavaScript files served
|
||||
- [ ] Analytics functional (server-side or noscript fallback)
|
||||
- [ ] SEO tags correct
|
||||
- [ ] Mobile responsive
|
||||
- [ ] Cross-browser compatible (including CSS-only features)
|
||||
- [ ] Keyboard accessible (Tab/Enter/Space navigation)
|
||||
- [ ] Lighthouse score: 95+ (Performance, Accessibility, SEO)
|
||||
- [ ] Server resource usage minimal (stateless requests only)
|
||||
|
||||
---
|
||||
|
||||
## Estimated Timeline
|
||||
|
||||
- **Phase 1-2 (Setup & CSS):** 2-3 days
|
||||
- **Phase 3 (Icons):** 0.5-1 day
|
||||
- **Phase 4 (Core Structure):** 1-2 days
|
||||
- **Phase 5-6 (Pages & Components):** 3-4 days
|
||||
- **Phase 7 (Interactive - CSS only):** 1-2 days
|
||||
- **Phase 8 (CSS Conversion):** 2-3 days
|
||||
- **Phase 9 (SEO & Analytics):** 0.5-1 day
|
||||
- **Phase 10-11 (Build & Deploy):** 1-2 days (server configuration)
|
||||
- **Phase 12 (Testing):** 2-3 days (including CSS-only interactivity testing)
|
||||
- **Phase 13-14 (Docs & Deploy):** 1 day
|
||||
|
||||
**Total: 14-22 days** (depending on CSS approach and server setup complexity)
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
- This plan prioritizes **simplicity** and **maintainability** over feature richness
|
||||
- No external dependencies means **no breaking changes** from library updates
|
||||
- Vanilla CSS may take longer initially but is **easier to maintain** long-term
|
||||
- Static SSR provides **instant page loads** with server-side rendering and excellent SEO
|
||||
- **Zero JavaScript** - pure CSS interactivity (checkbox hack, radio buttons) - **no framework hydration, no parsing overhead**
|
||||
- The site will be **future-proof** with minimal maintenance requirements
|
||||
- Focus on **modern CSS features** (Grid, Flexbox, Custom Properties) rather than utility classes
|
||||
- Test frequently throughout migration - **don't wait until the end**
|
||||
- **Tradeoff:** Requires server hosting instead of static hosting, but provides better initial load performance
|
||||
- **Key Benefits:**
|
||||
- No WebSocket connections = lower server resource usage, simpler architecture, no reconnection issues
|
||||
- No JavaScript = works with JS disabled, faster TTI, smaller payload, privacy-friendly
|
||||
- Accessible by default (native HTML form controls)
|
||||
@@ -5,10 +5,23 @@
|
||||
<Nullable>enable</Nullable>
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
<BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException>
|
||||
<DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<_ContentIncludedByDefault Remove="Components\Shared\Icon.razor"/>
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<Content Include="..\..\.dockerignore">
|
||||
<Link>.dockerignore</Link>
|
||||
</Content>
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="OpenTelemetry.Exporter.Prometheus.AspNetCore" Version="1.15.0-beta.1" />
|
||||
<PackageReference Include="OpenTelemetry.Extensions.Hosting" Version="1.15.0" />
|
||||
<PackageReference Include="OpenTelemetry.Instrumentation.AspNetCore" Version="1.15.0" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
@switch (Type)
|
||||
{
|
||||
case IconType.Github:
|
||||
<svg viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
case IconType.Gitea:
|
||||
<svg fill="currentColor"
|
||||
viewBox="0 0 32 32"
|
||||
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"/>
|
||||
<path d="M5.583 7.229c-2.464-0.005-5.755 1.557-5.573 5.479 0.281 6.125 6.557 6.693 9.068 6.745 0.271 1.146 3.224 5.109 5.411 5.318h9.573c5.74-0.38 10.036-17.365 6.854-17.427-5.271 0.25-8.396 0.375-11.073 0.396v5.297l-0.839-0.365-0.005-4.932c-3.073 0-5.781-0.141-10.917-0.396-0.646-0.005-1.542-0.115-2.5-0.115zM5.927 9.396h0.297c0.349 3.141 0.917 4.974 2.068 7.781-2.938-0.349-5.432-1.198-5.891-4.38-0.24-1.646 0.563-3.365 3.526-3.401zM17.339 12.479c0.198 0.005 0.406 0.042 0.594 0.13l1 0.432-0.714 1.302c-0.109 0-0.219 0.016-0.323 0.052-0.464 0.151-0.708 0.604-0.542 1.021 0.036 0.083 0.089 0.161 0.151 0.229l-1.234 2.25c-0.099 0-0.203 0.016-0.297 0.052-0.464 0.146-0.708 0.604-0.542 1.016 0.172 0.417 0.682 0.63 1.151 0.479 0.464-0.146 0.703-0.604 0.536-1.021-0.047-0.109-0.115-0.208-0.208-0.292l1.203-2.188c0.13 0.010 0.26 0 0.391-0.042 0.104-0.031 0.198-0.083 0.281-0.151 0.464 0.198 0.844 0.354 1.12 0.49 0.406 0.203 0.552 0.339 0.599 0.49 0.042 0.146-0.005 0.427-0.24 0.922-0.172 0.37-0.458 0.896-0.797 1.51-0.115 0-0.229 0.016-0.333 0.052-0.469 0.151-0.708 0.604-0.542 1.021 0.167 0.411 0.682 0.625 1.146 0.479 0.469-0.151 0.708-0.604 0.542-1.021-0.042-0.099-0.104-0.193-0.182-0.271 0.333-0.609 0.62-1.135 0.807-1.526 0.25-0.536 0.38-0.938 0.266-1.323s-0.469-0.635-0.932-0.865c-0.307-0.151-0.693-0.313-1.146-0.505 0.005-0.109-0.010-0.214-0.052-0.318s-0.109-0.198-0.193-0.281l0.703-1.281 3.901 1.682c0.703 0.307 0.995 1.057 0.651 1.682l-2.682 4.906c-0.339 0.625-1.182 0.885-1.885 0.578l-5.516-2.38c-0.703-0.307-0.995-1.057-0.656-1.682l2.682-4.906c0.234-0.432 0.708-0.688 1.208-0.708h0.083z"/>
|
||||
</svg>
|
||||
break;
|
||||
case IconType.LinkedIn:
|
||||
|
||||
@@ -2,7 +2,7 @@ namespace BlazorApp.Components.Icons;
|
||||
|
||||
public enum IconType
|
||||
{
|
||||
Github,
|
||||
Gitea,
|
||||
LinkedIn,
|
||||
Email,
|
||||
Code,
|
||||
|
||||
@@ -1,18 +1,21 @@
|
||||
@* 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 href="https://git.beaufindlay.com/beau"
|
||||
class="social-icon-link"
|
||||
target="_blank">
|
||||
<span class="sr-only">Gitea</span>
|
||||
<Icon Type="IconType.Gitea"/>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/in/beau-findlay/"
|
||||
class="social-icon-link">
|
||||
class="social-icon-link"
|
||||
target="_blank">
|
||||
<span class="sr-only">LinkedIn</span>
|
||||
<Icon Type="IconType.LinkedIn"/>
|
||||
</a>
|
||||
<a href="mailto:me@beaufindlay.com"
|
||||
class="social-icon-link">
|
||||
class="social-icon-link"
|
||||
target="_blank">
|
||||
<span class="sr-only">Email</span>
|
||||
<Icon Type="IconType.Email"/>
|
||||
</a>
|
||||
|
||||
@@ -4,10 +4,14 @@
|
||||
<footer>
|
||||
<div class="footer-container">
|
||||
<div class="footer-content">
|
||||
<SocialIcons/>
|
||||
<a href="/privacy-policy"
|
||||
class="footer-link">Privacy Policy</a>
|
||||
|
||||
<p class="footer-text">
|
||||
© @DateTime.Now.Year Beau Findlay. All rights reserved.
|
||||
</p>
|
||||
|
||||
<SocialIcons/>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
</label>
|
||||
</div>
|
||||
<div class="desktop-nav">
|
||||
<NavLink href="/experience">Experience</NavLink>
|
||||
<NavLink href="/experience">My Experience</NavLink>
|
||||
<NavLink href="/about">This app</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -55,7 +55,7 @@
|
||||
</div>
|
||||
<div class="mobile-menu-body">
|
||||
<div class="mobile-nav-links">
|
||||
<NavLink href="/experience">Experience</NavLink>
|
||||
<NavLink href="/experience">My Experience</NavLink>
|
||||
<NavLink href="/about">This App</NavLink>
|
||||
</div>
|
||||
<div class="mobile-social-divider">
|
||||
|
||||
@@ -7,13 +7,13 @@
|
||||
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 Href="https://git.beaufindlay.com/beau/my-portfolio">
|
||||
Gitea
|
||||
</AnchorLink>.
|
||||
</Text>
|
||||
|
||||
<section>
|
||||
<Subtitle>App</Subtitle>
|
||||
<Subtitle>The App</Subtitle>
|
||||
|
||||
<Text>
|
||||
This app was originally made using
|
||||
@@ -22,8 +22,17 @@
|
||||
<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.
|
||||
as a learning exercise. I've now migrated it back to .NET Blazor to take advantage of
|
||||
<AnchorLink Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#static-server-side-rendering-static-ssr">
|
||||
SSR (static server-side rendering)
|
||||
</AnchorLink>
|
||||
for maximum performance and to remove unnecessary dependencies on large JS and CSS libraries.
|
||||
</Text>
|
||||
<Text>
|
||||
Although SSR sacrifices client-side interactivity, for simple sites like this it means that page loads are
|
||||
practically instant and appear to function similarly to SPAs (the browser doesn't reload on navigations, new
|
||||
content is simply swapped in) but without the initial large download of the full application and it's
|
||||
dependencies.
|
||||
</Text>
|
||||
<Text>
|
||||
This version uses pure vanilla CSS with CSS variables for theming, eliminating all JavaScript and external
|
||||
@@ -35,7 +44,32 @@
|
||||
<Subtitle>Hosting & Deployment</Subtitle>
|
||||
|
||||
<Text>
|
||||
TODO: This section
|
||||
When this app was written in Blazor WASM and then React (both client-side-only technologies) it was hosted on an
|
||||
<AnchorLink Href="https://learn.microsoft.com/en-us/azure/static-web-apps/overview">Azure Static Web App
|
||||
</AnchorLink>
|
||||
and deployed via
|
||||
<AnchorLink Href="https://github.com/features/actions">GitHub Actions</AnchorLink>. This provided an easy and cost effective way to get something out there without worrying too much about the
|
||||
infrastructure. With this being a personal project I needed to keep the costs minimal and even though I would've
|
||||
preferred a server to work with there wasn't many free options.
|
||||
</Text>
|
||||
<Text>
|
||||
I've always been a bit of a networking/home-lab/server nerd so as soon as Cloudflare announced their
|
||||
<AnchorLink Href="https://developers.cloudflare.com/cloudflare-one/networks/connectors/cloudflare-tunnel/">
|
||||
Tunnels
|
||||
</AnchorLink>
|
||||
feature I decided to revisit this site, rebuild in a server-side technology and host it myself on server I setup at home running a headless linux server operating system. I configured the server with
|
||||
<AnchorLink Href="https://www.docker.com/">Docker</AnchorLink>
|
||||
and
|
||||
<AnchorLink Href="https://docs.docker.com/compose/">Docker Compose</AnchorLink>, built a Docker container for the .NET app to run from, copied it to my server and created a <code>docker-compose.yml</code>
|
||||
file to run it with the Cloudflare Tunnel
|
||||
<AnchorLink Href="https://hub.docker.com/r/cloudflare/cloudflared">Docker image</AnchorLink>.
|
||||
</Text>
|
||||
<Text>
|
||||
After ensuring the app was working correctly I decided to migrate the code repo from GitHub to a locally hosted
|
||||
<AnchorLink Href="https://about.gitea.com/">Gitea</AnchorLink>
|
||||
instance running on the same server. I also setup a self-hosted runner and created a
|
||||
<AnchorLink Href="https://git.beaufindlay.com/beau/my-portfolio/src/branch/main/.gitea/workflows/deploy.yml">build and deploy workflow</AnchorLink>
|
||||
that creates a new docker image, copies it to the app server, runs the <code>docker-compose.yml</code> file and busts the Cloudflare cache to ensure a clean deployment when new changes are pushed to the main branch.
|
||||
</Text>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
<PageTitle>Beau Findlay - Experience</PageTitle>
|
||||
|
||||
<Title CssClass="text-center">Experience</Title>
|
||||
<Title CssClass="text-center">My Experience</Title>
|
||||
|
||||
<p class="text-center text-xl font-semibold mb-10 ">
|
||||
Software Engineer since 2018
|
||||
|
||||
@@ -10,9 +10,12 @@
|
||||
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>.
|
||||
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.
|
||||
I believe in a privacy-first, information-focussed and performant internet. You won't find any trackers, analytics
|
||||
or the need for a cookie banner here.
|
||||
</Text>
|
||||
|
||||
53
src/BlazorApp/Components/Pages/PrivacyPolicy.razor
Normal file
53
src/BlazorApp/Components/Pages/PrivacyPolicy.razor
Normal file
@@ -0,0 +1,53 @@
|
||||
@page "/privacy-policy"
|
||||
|
||||
<PageTitle>Beau Findlay - Privacy Policy</PageTitle>
|
||||
|
||||
<Title CssClass="text-center mb-6">Privacy Policy</Title>
|
||||
<i>Last updated: 31 January 2025</i>
|
||||
|
||||
<section>
|
||||
<Subtitle>About this website</Subtitle>
|
||||
|
||||
<Text>This is a personal website operated by Beau Findlay.</Text>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<Subtitle>Information collection</Subtitle>
|
||||
|
||||
<Text>This website does not collect, store, or process any personal data and I will never track you or collect your
|
||||
information.
|
||||
</Text>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<Subtitle>Cookies</Subtitle>
|
||||
|
||||
<Text>
|
||||
This website uses Cloudflare for security and performance. Cloudflare may set cookies on your device under
|
||||
certain circumstances (such as when verifying you're not a bot):
|
||||
</Text>
|
||||
<ul class="mb-6">
|
||||
<li><em class="font-bold">__cf_bm</em> - Used for bot detection (expires after 30 minutes)</li>
|
||||
<li><em class="font-bold">cf_clearance</em> - Stores proof you passed a security challenge (expires within 24
|
||||
hours)
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Text>
|
||||
These cookies are only set when needed, are strictly necessary for the website to function securely, and are not
|
||||
used for tracking or advertising. Under normal browsing, no cookies are set.
|
||||
</Text>
|
||||
|
||||
<Text>Cloudflare may process technical data to provide these services. See
|
||||
<AnchorLink Href="https://www.cloudflare.com/privacypolicy/">Cloudflare's Privacy Policy</AnchorLink>
|
||||
for details.
|
||||
</Text>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<Subtitle>Contact</Subtitle>
|
||||
|
||||
<Text>If you have questions about this policy, you can reach me by <a href="mailto:me@beaufindlay.com"
|
||||
class="underline">email</a>.
|
||||
</Text>
|
||||
</section>
|
||||
@@ -1,17 +1,31 @@
|
||||
using BlazorApp.Components;
|
||||
using OpenTelemetry.Metrics;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
// Add services to the container.
|
||||
builder.Services.AddRazorComponents();
|
||||
|
||||
builder.Services.AddOpenTelemetry()
|
||||
.WithMetrics(metrics =>
|
||||
{
|
||||
metrics.AddAspNetCoreInstrumentation();
|
||||
metrics.AddPrometheusExporter();
|
||||
});
|
||||
|
||||
|
||||
var app = builder.Build();
|
||||
|
||||
// Configure the HTTP request pipeline.
|
||||
app.MapGet("/health", () => Results.Ok(new
|
||||
{
|
||||
status = "healthy",
|
||||
timestamp = DateTime.UtcNow
|
||||
}));
|
||||
|
||||
app.MapPrometheusScrapingEndpoint();
|
||||
|
||||
if (!app.Environment.IsDevelopment())
|
||||
{
|
||||
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();
|
||||
}
|
||||
|
||||
|
||||
@@ -6,8 +6,6 @@ body {
|
||||
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 */
|
||||
@@ -37,6 +35,28 @@ p {
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: var(--space-4);
|
||||
}
|
||||
|
||||
ul li {
|
||||
position: relative;
|
||||
padding-left: var(--space-6);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
ul li::before {
|
||||
content: ">";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--color-slate-400);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: 1.5;
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: var(--color-slate-50);
|
||||
|
||||
@@ -221,7 +221,7 @@
|
||||
|
||||
.mobile-menu-body {
|
||||
margin-top: var(--space-6);
|
||||
flex: 1 1 0%;
|
||||
flex: 1 1 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
@@ -236,9 +236,7 @@
|
||||
margin-right: -0.75rem;
|
||||
display: block;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 0.75rem;
|
||||
padding-top: var(--space-2);
|
||||
padding-bottom: var(--space-2);
|
||||
padding: var(--space-2) 0.75rem;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: 1.75;
|
||||
@@ -268,13 +266,12 @@ body:has(.menu-toggle:checked) {
|
||||
.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%;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.navbar .mobile-menu-button-container {
|
||||
@@ -307,12 +304,18 @@ body:has(.menu-toggle:checked) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.page-footer .footer-link {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-slate-50);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.page-footer .footer-text {
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: 1.25;
|
||||
color: var(--color-slate-50);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -320,13 +323,7 @@ body:has(.menu-toggle:checked) {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -440,7 +437,7 @@ body:has(.menu-toggle:checked) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
border: 1px solid var(--color-slate-700);
|
||||
border: 1px solid var(--color-white);
|
||||
background-color: var(--color-black);
|
||||
padding: 0.625rem 0.875rem;
|
||||
margin-top: var(--space-2);
|
||||
@@ -597,3 +594,16 @@ body:has(.menu-toggle:checked) {
|
||||
#tab3:checked ~ .tab-panels #panel3 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-family: var(--font-mono), monospace;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.9em;
|
||||
padding: 0.125rem 0.375rem;
|
||||
background-color: rgba(15, 23, 42, 0.8);
|
||||
border: 1px solid rgba(100, 116, 139, 0.3);
|
||||
border-radius: var(--radius-base);
|
||||
color: var(--color-slate-50);
|
||||
}
|
||||
@@ -1,2 +1,2 @@
|
||||
User-agent: *
|
||||
Disallow:
|
||||
Allow: /
|
||||
@@ -1,18 +0,0 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
}
|
||||
24
src/Client/.gitignore
vendored
24
src/Client/.gitignore
vendored
@@ -1,24 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -1,30 +0,0 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
|
||||
|
||||
- Configure the top-level `parserOptions` property like this:
|
||||
|
||||
```js
|
||||
export default {
|
||||
// other rules...
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module',
|
||||
project: ['./tsconfig.json', './tsconfig.node.json'],
|
||||
tsconfigRootDir: __dirname,
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
|
||||
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
|
||||
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
|
||||
@@ -1,40 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script id="cookieyes"
|
||||
type="text/javascript"
|
||||
src="https://cdn-cookieyes.com/client_data/a05e8ecc917e725a2226b46a/script.js"></script>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-958BPT37HR"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-958BPT37HR');
|
||||
</script>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta
|
||||
property="description"
|
||||
content="I'm Beau. A software engineer, tech enthusianst and music lover."
|
||||
/>
|
||||
<meta property="author" content="Beau Findlay" />
|
||||
<meta property="og:title" content="Beau Findlay" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="I'm Beau. A software engineer, tech enthusianst and music lover"
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://beaufindlay.com/logo.webp"
|
||||
/>
|
||||
<meta property="og:url" content="https://beaufindlay.com" />
|
||||
<title>Beau Findlay</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/logo.webp" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
4372
src/Client/package-lock.json
generated
4372
src/Client/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,35 +0,0 @@
|
||||
{
|
||||
"name": "client",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^1.7.19",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^5.1.0",
|
||||
"react-router-dom": "^6.23.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.12.7",
|
||||
"@types/react": "^18.2.66",
|
||||
"@types/react-dom": "^18.2.22",
|
||||
"@typescript-eslint/eslint-plugin": "^7.2.0",
|
||||
"@typescript-eslint/parser": "^7.2.0",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.6",
|
||||
"postcss": "^8.4.38",
|
||||
"tailwindcss": "^3.4.3",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.2.0"
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
@@ -1,137 +0,0 @@
|
||||
import { Tab } from "@headlessui/react";
|
||||
import { Fragment, ReactNode } from "react";
|
||||
import { SiMicrosoftazure, SiReact } from "react-icons/si";
|
||||
import buildClassNames from "../helpers/cssClassFormatter";
|
||||
import AnchorLink from "./AnchorLink";
|
||||
import Subtitle from "./Subtitle";
|
||||
import Text from "./Text";
|
||||
|
||||
interface AboutTab {
|
||||
tabName: string;
|
||||
title: ReactNode;
|
||||
subtitle: string;
|
||||
content: ReactNode[];
|
||||
}
|
||||
|
||||
const tabs: AboutTab[] = [
|
||||
{
|
||||
tabName: "Front-end",
|
||||
title: (
|
||||
<Subtitle>
|
||||
Front-end <SiReact className="ml-2" />
|
||||
</Subtitle>
|
||||
),
|
||||
subtitle: "React + TypeScript",
|
||||
content: [
|
||||
<Text>
|
||||
This app was originally made using{" "}
|
||||
<AnchorLink href="https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor">
|
||||
.NET Blazor WASM
|
||||
</AnchorLink>{" "}
|
||||
however I recently decided to start learning{" "}
|
||||
<AnchorLink href="https://react.dev/">React</AnchorLink> and saw this as
|
||||
a good oppurtunity to solidify some knowledge by re-writing this app
|
||||
from the ground up using React with{" "}
|
||||
<AnchorLink href="https://www.typescriptlang.org/">
|
||||
TypeScript
|
||||
</AnchorLink>
|
||||
.
|
||||
</Text>,
|
||||
<Text>
|
||||
Overall I've found building front-end apps far more enjoyable using
|
||||
React & TypeScript dispite the steep learning-curve coming from a purely
|
||||
.NET & C# background. Both the developer experience and performance of
|
||||
the app have improved dramatically after switching front-end
|
||||
technologies.
|
||||
</Text>,
|
||||
<Text>
|
||||
This app is styled using a cool CSS framework called{" "}
|
||||
<AnchorLink href="https://tailwindcss.com/">TailwindCSS</AnchorLink>.{" "}
|
||||
<AnchorLink href="https://postcss.org/">PostCSS</AnchorLink> is used
|
||||
alongside Tailwind to generate a lightweight stylesheet based only on
|
||||
the parts of the framework that are used, as oppose to including a
|
||||
everything the framework offers.
|
||||
</Text>,
|
||||
],
|
||||
},
|
||||
{
|
||||
tabName: "Hosting",
|
||||
title: (
|
||||
<Subtitle>
|
||||
Hosting <SiMicrosoftazure className="ml-2" />
|
||||
</Subtitle>
|
||||
),
|
||||
subtitle: "Microsoft Azure Static Web App",
|
||||
content: [
|
||||
<Text>
|
||||
The goal of this project was to learn some new technologies and host the
|
||||
app as cheaply as possible. With this in mind I decided to go with a{" "}
|
||||
<AnchorLink href="https://azure.microsoft.com/en-gb/products/app-service/static">
|
||||
Static Web App
|
||||
</AnchorLink>{" "}
|
||||
hosted on Microsoft Azure. Static Web Apps offer global distribution of
|
||||
static assets (the Blazor Webassembly app in this case) and offer
|
||||
integrated hosting for Azure Function App APIs.
|
||||
</Text>,
|
||||
<Text>
|
||||
Another cool feature of Static Web Apps is Azure's integration with
|
||||
GitHub actions to deploy both the client and server simultaneously and
|
||||
provide automatically deployed staging environments for pull-requests
|
||||
opened to the main branch. This made testing deployed changes much
|
||||
easier and cheaper than deploying an isolated testing/GA environment
|
||||
before releasing to the live version of the app.
|
||||
</Text>,
|
||||
<Text>
|
||||
Using Static Web Apps on Azure has meant that I have been able to build,
|
||||
deploy and serve this site completely free (with the exception of the
|
||||
domain name). The next thing on the roadmap is building a simple blog
|
||||
using an{" "}
|
||||
<AnchorLink href="https://azure.microsoft.com/en-gb/products/azure-sql/database">
|
||||
Azure SQL database
|
||||
</AnchorLink>{" "}
|
||||
where I'll document the full process of writing and deploying this app
|
||||
so check back again soon.
|
||||
</Text>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function AboutTabs() {
|
||||
return (
|
||||
<Tab.Group as="div" className="mt-4">
|
||||
<div className="-mx-4 flex overflow-x-auto sm:mx-0">
|
||||
<div className="flex-auto border-b border-gray-200 px-4 sm:px-0">
|
||||
<Tab.List className="-mb-px flex space-x-8">
|
||||
{tabs.map((tab) => (
|
||||
<Tab
|
||||
key={tab.tabName}
|
||||
className={({ selected }) =>
|
||||
buildClassNames(
|
||||
selected
|
||||
? "border-gray-300 text-gray-200"
|
||||
: "border-transparent hover:border-gray-300 hover:text-gray-200",
|
||||
"whitespace-nowrap border-b-4 py-6 text-sm font-medium"
|
||||
)
|
||||
}
|
||||
>
|
||||
{tab.tabName}
|
||||
</Tab>
|
||||
))}
|
||||
</Tab.List>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tab.Panels as={Fragment}>
|
||||
{tabs.map((tab) => (
|
||||
<Tab.Panel key={tab.tabName} className="pt-10">
|
||||
{tab.title}
|
||||
<p className="font-bold text-lg my-4">Tech: {tab.subtitle}</p>
|
||||
{tab.content.map((content, index) => (
|
||||
<Fragment key={index}>{content}</Fragment>
|
||||
))}
|
||||
</Tab.Panel>
|
||||
))}
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
);
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import buildClassNames from "../helpers/cssClassFormatter";
|
||||
|
||||
interface Props {
|
||||
children: string;
|
||||
href?: string;
|
||||
target?: "_blank" | "";
|
||||
className?: string | null;
|
||||
}
|
||||
|
||||
export default function AnchorLink({
|
||||
children,
|
||||
href,
|
||||
target,
|
||||
className,
|
||||
}: Props) {
|
||||
const defaultStyles = "underline underline-offset-2 hover:underline-offset-4";
|
||||
const styles = buildClassNames(className ? className : "", defaultStyles);
|
||||
|
||||
return (
|
||||
<a href={href} target={target} className={styles}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
import { ReactNode } from "react";
|
||||
|
||||
interface Props {
|
||||
type: "submit" | "button";
|
||||
children: ReactNode;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export default function Button({ type, children, onClick }: Props) {
|
||||
return (
|
||||
<button
|
||||
type={type}
|
||||
onClick={onClick}
|
||||
className="flex items-center justify-center border-0 ring-1 ring-inset ring-gray-300 bg-black px-3.5 py-2.5 text-sm font-semibold text-white shadow hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600 disabled:bg-gray-800 disabled:cursor-progress"
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import { FaRegPaperPlane } from "react-icons/fa6";
|
||||
import Text from "../components/Text";
|
||||
|
||||
export default function ContactMe() {
|
||||
return (
|
||||
<div className="mb-10 mt-12 text-center">
|
||||
<Text>If you think I can help with your project...</Text>
|
||||
<a
|
||||
href="mailto:me@beaufindlay.com"
|
||||
className="inline-flex items-center border-0 ring-1 ring-inset ring-gray-300 bg-black px-3.5 py-2.5 mt-2 text-sm font-semibold text-white shadow hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600"
|
||||
>
|
||||
Get in touch <FaRegPaperPlane className="ml-2" />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
import SocialIcons from "./SocialIcons";
|
||||
|
||||
export default function Footer() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
return (
|
||||
<footer className="mt-auto">
|
||||
<div className="mx-auto py-8">
|
||||
<div className="md:flex md:items-center md:justify-between">
|
||||
<SocialIcons />
|
||||
<p className="mt-4 text-xs leading-5 text-gray-100 md:order-1 md:mt-0">
|
||||
© {currentYear} Beau Findlay. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
interface Props {
|
||||
htmlFor: string;
|
||||
children: string;
|
||||
}
|
||||
|
||||
export default function Label({ htmlFor, children }: Props) {
|
||||
return (
|
||||
<label htmlFor={htmlFor} className="block font-semibold leading-6">
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { ReactElement } from "react";
|
||||
import buildClassNames from "../helpers/cssClassFormatter";
|
||||
import { ListItemProps } from "./ListItem";
|
||||
|
||||
interface Props {
|
||||
className?: string | null;
|
||||
children: ReactElement<ListItemProps> | Array<ReactElement<ListItemProps>>;
|
||||
}
|
||||
|
||||
export default function List({ className, children }: Props) {
|
||||
const defaultStyles = "list-disc pl-8 space-y-2";
|
||||
const styles = buildClassNames(className ? className : "", defaultStyles);
|
||||
|
||||
return <ul className={styles}>{children}</ul>;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import { ReactNode } from "react";
|
||||
|
||||
export interface ListItemProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export default function ListItem({ children }: ListItemProps) {
|
||||
return <li>{children}</li>;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import LoadingSpinner from "./LoadingSpinner";
|
||||
import logo from "../assets/logo.webp";
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="bg-black font-mono text-slate-50 antialiased px-6 lg:px-8">
|
||||
<div className="flex flex-col min-h-screen mx-auto max-w-7xl items-center justify-center fade-in">
|
||||
<img className="h-20 w-auto" src={logo} alt="Logo" />
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
export default function LoadingSpinner() {
|
||||
return (
|
||||
<div role="status">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="w-8 h-8 text-gray-500 animate-spin fill-white"
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
||||
fill="currentFill"
|
||||
/>
|
||||
</svg>
|
||||
<span className="sr-only">Loading...</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
import { Dialog, Popover } from "@headlessui/react";
|
||||
import { useState } from "react";
|
||||
import { FaBars, FaXmark } from "react-icons/fa6";
|
||||
import { Link } from "react-router-dom";
|
||||
import logo from "../assets/logo.webp";
|
||||
import SocialIcons from "./SocialIcons";
|
||||
import NavLink from "./NavLink";
|
||||
|
||||
export default function NavBar() {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<header className="pt-6">
|
||||
<nav
|
||||
className="mx-auto flex max-w-7xl items-center justify-between"
|
||||
aria-label="Global"
|
||||
>
|
||||
<div className="flex lg:flex-1">
|
||||
<Link to="/" className="-m-1.5 p-1.5">
|
||||
<span className="sr-only">Beau Findlay</span>
|
||||
<img className="h-16 w-auto" src={logo} alt="Logo" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex lg:hidden">
|
||||
<button
|
||||
type="button"
|
||||
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5"
|
||||
onClick={() => setMobileMenuOpen(true)}
|
||||
>
|
||||
<span className="sr-only">Open main menu</span>
|
||||
<FaBars className="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<Popover.Group className="hidden lg:flex lg:gap-x-12">
|
||||
<NavLink to="/work">Work</NavLink>
|
||||
<NavLink to="/about">This App</NavLink>
|
||||
</Popover.Group>
|
||||
</nav>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="lg:hidden"
|
||||
open={mobileMenuOpen}
|
||||
onClose={setMobileMenuOpen}
|
||||
>
|
||||
<div className="fixed inset-0 z-10" />
|
||||
<Dialog.Panel className="fixed inset-y-0 right-0 z-10 bg-black w-full overflow-y-auto px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 text-white sm:border-l-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link
|
||||
to="/"
|
||||
className="-m-1.5 p-1.5"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
<span className="sr-only">Beau Findlay</span>
|
||||
<img className="h-16 w-auto" src={logo} alt="Logo" />
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className="-m-2.5 rounded-md p-2.5"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
<span className="sr-only">Close menu</span>
|
||||
<FaXmark className="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-6 flow-root">
|
||||
<div className="-my-6 divide-y divide-gray-200/10">
|
||||
<div className="space-y-2 py-6">
|
||||
<NavLink
|
||||
to="/work"
|
||||
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Work
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/about"
|
||||
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
This App
|
||||
</NavLink>
|
||||
</div>
|
||||
<div className="flex justify-center items-center py-8">
|
||||
<SocialIcons size={24} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Dialog>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import { NavLink as ReactNavLink } from "react-router-dom";
|
||||
|
||||
interface Props {
|
||||
children: string;
|
||||
to: string;
|
||||
className?: string | null;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export default function NavLink({ children, to, className, onClick }: Props) {
|
||||
const defaultStyles = "text-base font-semibold leading-6 hover:text-gray-300";
|
||||
const styles = className ? className : defaultStyles;
|
||||
|
||||
return (
|
||||
<ReactNavLink
|
||||
to={to}
|
||||
onClick={onClick}
|
||||
className={({ isActive }) =>
|
||||
isActive ? `${styles} underline underline-offset-4` : styles
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</ReactNavLink>
|
||||
);
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import { FaEnvelope, FaGithub, FaLinkedin } from "react-icons/fa6";
|
||||
|
||||
interface Props {
|
||||
size?: number;
|
||||
}
|
||||
|
||||
export default function SocialIcons({ size = 20 }: Props) {
|
||||
const socialIcons = [
|
||||
{
|
||||
name: "GitHub",
|
||||
href: "https://github.com/bdfin",
|
||||
icon: <FaGithub size={size} />,
|
||||
},
|
||||
{
|
||||
name: "LinkedIn",
|
||||
href: "https://www.linkedin.com/in/beau-findlay/",
|
||||
icon: <FaLinkedin size={size} />,
|
||||
},
|
||||
{
|
||||
name: "Email",
|
||||
href: "mailto:me@beaufindlay.com",
|
||||
icon: <FaEnvelope size={size} />,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex space-x-6 md:order-2">
|
||||
{socialIcons.map((socialIcon) => (
|
||||
<a
|
||||
key={socialIcon.name}
|
||||
href={socialIcon.href}
|
||||
className="text-gray-100 hover:text-gray-300"
|
||||
>
|
||||
<span className="sr-only">{socialIcon.name}</span>
|
||||
{socialIcon.icon}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import { ReactNode } from "react";
|
||||
import buildClassNames from "../helpers/cssClassFormatter";
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
className?: string | null;
|
||||
}
|
||||
|
||||
export default function Subtitle({ children, className }: Props) {
|
||||
const defaultStyles = "flex items-center text-2xl py-4 font-semibold";
|
||||
const styles = buildClassNames(className ? className : "", defaultStyles);
|
||||
|
||||
return <h2 className={styles}>{children}</h2>;
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
import { FaDatabase, FaDocker, FaReact } from "react-icons/fa6";
|
||||
import { SiBlazor, SiCsharp, SiMicrosoftazure } from "react-icons/si";
|
||||
import buildClassNames from "../helpers/cssClassFormatter";
|
||||
|
||||
const iconSize = 34;
|
||||
const iconCss = "mx-auto";
|
||||
|
||||
const techIcons = [
|
||||
{
|
||||
name: "C#/.NET",
|
||||
icon: <SiCsharp size={iconSize} className={iconCss} />,
|
||||
},
|
||||
{
|
||||
name: "Microsoft Azure",
|
||||
icon: <SiMicrosoftazure size={iconSize} className={iconCss} />,
|
||||
},
|
||||
{
|
||||
name: "Blazor",
|
||||
icon: <SiBlazor size={iconSize} className={iconCss} />,
|
||||
},
|
||||
{
|
||||
name: "React",
|
||||
icon: <FaReact size={iconSize} className={iconCss} />,
|
||||
},
|
||||
{
|
||||
name: "Databases",
|
||||
icon: <FaDatabase size={iconSize} className={iconCss} />,
|
||||
},
|
||||
{
|
||||
name: "Docker",
|
||||
icon: <FaDocker size={iconSize} className={iconCss} />,
|
||||
},
|
||||
];
|
||||
|
||||
interface Props {
|
||||
className?: string | null;
|
||||
}
|
||||
|
||||
export default function TechIcons({ className }: Props) {
|
||||
const defaultStyles = "mx-auto max-w-4xl";
|
||||
const styles = buildClassNames(className ? className : "", defaultStyles);
|
||||
|
||||
return (
|
||||
<div className={styles}>
|
||||
<p className="text-xl text-center mb-10 font-semibold">
|
||||
Tech i'm working with at the moment:
|
||||
</p>
|
||||
<div className="flex flex-col md:flex-row md:justify-evenly space-y-10 md:space-y-0 text-center mx-auto mt-4">
|
||||
{techIcons.map((techIcon, index) => (
|
||||
<div key={index}>
|
||||
{techIcon.icon}
|
||||
<p className="mt-2 text-sm">{techIcon.name}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import { ReactNode } from "react";
|
||||
import buildClassNames from "../helpers/cssClassFormatter";
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
className?: string | null;
|
||||
}
|
||||
|
||||
export default function Text({ children, className }: Props) {
|
||||
const defaultStyles = "text-lg py-3";
|
||||
const styles = buildClassNames(className ? className : "", defaultStyles);
|
||||
|
||||
return <p className={styles}>{children}</p>;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
interface Props {
|
||||
id: string;
|
||||
rows?: number;
|
||||
}
|
||||
|
||||
export default function TextAreaInput({ id, rows = 4 }: Props) {
|
||||
return (
|
||||
<textarea
|
||||
id={id}
|
||||
rows={rows}
|
||||
className="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600"
|
||||
></textarea>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
interface Props {
|
||||
id: string;
|
||||
type: "text" | "email";
|
||||
}
|
||||
|
||||
export default function TextInput({ id, type }: Props) {
|
||||
return (
|
||||
<input
|
||||
id={id}
|
||||
type={type}
|
||||
className="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600"
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import buildClassNames from "../helpers/cssClassFormatter";
|
||||
|
||||
interface Props {
|
||||
children: string;
|
||||
className?: string | null;
|
||||
}
|
||||
|
||||
export default function Title({ children, className }: Props) {
|
||||
const defaultStyles = "text-4xl py-4";
|
||||
const styles = buildClassNames(className ? className : "", defaultStyles);
|
||||
|
||||
return <h1 className={styles}>{children}</h1>;
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
import AnchorLink from "./AnchorLink";
|
||||
import Text from "./Text";
|
||||
|
||||
interface WorkTimelineItem {
|
||||
startDate: string;
|
||||
endDate?: string | null;
|
||||
title: string;
|
||||
companyName: string;
|
||||
companyUrl: string;
|
||||
content: string[];
|
||||
}
|
||||
|
||||
const workTimelineItems: WorkTimelineItem[] = [
|
||||
{
|
||||
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-diciplinary team building on the Azure cloud using a .NET backend, React web front-end and a Swift native iOS app.",
|
||||
],
|
||||
},
|
||||
{
|
||||
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.",
|
||||
],
|
||||
},
|
||||
{
|
||||
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.",
|
||||
],
|
||||
},
|
||||
{
|
||||
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.",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function WorkTimeline() {
|
||||
return (
|
||||
<ol className="relative border-s border-gray-600">
|
||||
{workTimelineItems.map((item, index) => (
|
||||
<li key={index} className="mb-10 ms-4">
|
||||
<div className="absolute w-3 h-3 rounded-full mt-1.5 -start-1.5 borderborder-gray-900 bg-gray-600"></div>
|
||||
<time className="mb-1 text-sm font-normal leading-none text-gray-400">
|
||||
{item.startDate} - {item.endDate ? item.endDate : "Present"}
|
||||
</time>
|
||||
<h3 className="text-2xl font-semibold text-gray-900 dark:text-white">
|
||||
{item.title} @{" "}
|
||||
<AnchorLink href={item.companyUrl}>{item.companyName}</AnchorLink>
|
||||
</h3>
|
||||
{item.content.map((content, index) => (
|
||||
<Text key={index}>{content}</Text>
|
||||
))}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
export default function buildClassNames(...classes: string[]) {
|
||||
return classes.filter(Boolean).join(" ");
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.fade-in {
|
||||
animation: fadeInAnimation ease 1s;
|
||||
animation-iteration-count: 1;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInAnimation {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-track {
|
||||
background: white;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background-color: black;
|
||||
border: 1px solid white;
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { RouterProvider } from "react-router-dom";
|
||||
import "./index.css";
|
||||
import router from "./routes.tsx";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<React.StrictMode>
|
||||
<RouterProvider router={router} />
|
||||
</React.StrictMode>
|
||||
);
|
||||
@@ -1,22 +0,0 @@
|
||||
import AboutTabs from "../components/AboutTabs";
|
||||
import AnchorLink from "../components/AnchorLink";
|
||||
import Text from "../components/Text";
|
||||
import Title from "../components/Title";
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<>
|
||||
<Title className="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>
|
||||
<AboutTabs />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
import { isRouteErrorResponse, useRouteError } from "react-router-dom";
|
||||
import Footer from "../components/Footer";
|
||||
import NavBar from "../components/NavBar";
|
||||
|
||||
export default function ErrorPage() {
|
||||
const error = useRouteError();
|
||||
|
||||
let errorCode = "Oops";
|
||||
let errorTitle = "Something went wrong.";
|
||||
let errorMessage = "This error has been automatically logged.";
|
||||
|
||||
if (isRouteErrorResponse(error)) {
|
||||
errorCode = "404";
|
||||
errorTitle = "Page not found";
|
||||
errorMessage = "Sorry, this page dosen't exist.";
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-black font-mono text-slate-50 antialiased px-6 lg:px-8">
|
||||
<div className="flex flex-col min-h-screen mx-auto max-w-7xl fade-in">
|
||||
<NavBar />
|
||||
<main className="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
|
||||
<div className="text-center">
|
||||
<p className="text-base font-semibold ">{errorCode}</p>
|
||||
<h1 className="mt-4 text-4xl font-bold tracking-tight">
|
||||
{errorTitle}
|
||||
</h1>
|
||||
<p className="mt-6 text-base leading-7 ">{errorMessage}</p>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import AnchorLink from "../components/AnchorLink";
|
||||
import TechIcons from "../components/TechIcons";
|
||||
import Text from "../components/Text";
|
||||
import Title from "../components/Title";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<Title className="text-center mb-6">Hi, I'm Beau.</Title>
|
||||
<Text>
|
||||
I'm a UK-based software engineer and I love building cool stuff.
|
||||
</Text>
|
||||
<Text>
|
||||
I mostly specialise in back-end 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>
|
||||
|
||||
<TechIcons className="mt-28" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import { Outlet } from "react-router-dom";
|
||||
import NavBar from "../components/NavBar";
|
||||
import Footer from "../components/Footer";
|
||||
|
||||
export default function Layout() {
|
||||
return (
|
||||
<div className="bg-black font-mono text-slate-50 antialiased px-6 lg:px-10">
|
||||
<div className="flex flex-col min-h-screen mx-auto max-w-7xl fade-in">
|
||||
<NavBar />
|
||||
<div className="flex-1 py-8">
|
||||
<Outlet />
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import ContactMe from "../components/ContactMe";
|
||||
import Title from "../components/Title";
|
||||
import WorkTimeline from "../components/WorkTimeline";
|
||||
|
||||
export default function WorkPage() {
|
||||
return (
|
||||
<>
|
||||
<Title className="text-center mb-4">Work</Title>
|
||||
<p className="text-center text-2xl font-semibold mb-12">
|
||||
Freelance Software Engineer since 2018
|
||||
</p>
|
||||
<WorkTimeline />
|
||||
<ContactMe />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import { createBrowserRouter } from "react-router-dom";
|
||||
import AboutPage from "./pages/AboutPage";
|
||||
import ErrorPage from "./pages/ErrorPage";
|
||||
import HomePage from "./pages/HomePage";
|
||||
import Layout from "./pages/Layout";
|
||||
import WorkPage from "./pages/WorkPage";
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: "/",
|
||||
element: <Layout />,
|
||||
errorElement: <ErrorPage />,
|
||||
children: [
|
||||
{ index: true, element: <HomePage /> },
|
||||
{ path: "work", element: <WorkPage /> },
|
||||
{ path: "about", element: <AboutPage /> },
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
export default router;
|
||||
1
src/Client/src/vite-env.d.ts
vendored
1
src/Client/src/vite-env.d.ts
vendored
@@ -1 +0,0 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -1,9 +0,0 @@
|
||||
{
|
||||
"navigationFallback": {
|
||||
"rewrite": "index.html",
|
||||
"exclude": ["/static/media/*.{png,jpg,jpeg,gif,bmp}", "/static/css/*"]
|
||||
},
|
||||
"mimeTypes": {
|
||||
".json": "text/json"
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Reference in New Issue
Block a user