BranchesTags

Repository files navigation

CloudZen

A modern Blazor WebAssembly portfolio and consulting showcase built with .NET 8, demonstrating expertise in building scalable, secure cloud applications with Azure integration.

🚀 Features

Portfolio & Presentation

  • Dynamic Project Showcase - Interactive case studies with filtering by technology, status, and project type
  • Professional Portfolio Page - Comprehensive "Who I Am" section with profile header, approach, and highlighted achievements
  • Animated UI Components - Counter circles with gradient fills and smooth animations for metrics display
  • Responsive Design - Mobile-first approach with Tailwind CSS, optimized for all screen sizes
  • Interactive SDLC Process - Visual representation of Planning, Automation, and Deployment phases

Business Features

  • Contact Form - Validated contact form with email integration via Brevo/SendGrid/SMTP providers
  • AI Chatbot - Embedded conversational assistant powered by Anthropic Claude, with knowledge base, lead conversion, and abuse protection (see AI_CHATBOT_DOCUMENTATION.md)
  • Resume Download - Secure resume delivery from Azure Blob Storage with SAS token authentication
  • Service Offerings Display - Dynamic service cards showcasing consulting capabilities
  • Testimonials Section - Client feedback display (currently disabled, ready for activation)
  • Call-to-Action Components - Strategic CTAs throughout the site for lead generation

Technical Features

  • Progressive Web App (PWA) - Service worker enabled for offline capability and fast loading
  • Component-Based Architecture - Reusable Blazor components with clear separation of concerns
  • Secure API Backend - Email and AI chatbot operations routed through Azure Functions API with rate limiting, input validation, and token controls
  • Centralized Data Management - Service layer pattern with ProjectService and PersonalService
  • Type-Safe Event Handling - EventCallback pattern for parent-child component communication
  • Google Calendar Integration - URL service for scheduling consultation bookings
  • Ticket Management System - Dashboard for tracking support incidents (demo implementation)

Cloud & DevOps

  • Azure Static Web Apps - Automated deployment with GitHub Actions workflow
  • Azure Blob Storage - Cloud file storage with CORS configuration for cross-origin access
  • Azure Key Vault Integration - Secrets management via Azure Functions backend with DefaultAzureCredential
  • CI/CD Pipeline - Automated build, test, and deployment on push to master (Static Web Apps + Azure Functions)
  • Service Worker - Automatic caching and offline support for enhanced performance

🛠️ Tech Stack

Frontend Technologies

  • Blazor WebAssembly (.NET 8) - Modern SPA framework with C# instead of JavaScript
  • C# 12 - Latest language features with nullable reference types enabled
  • Tailwind CSS - Utility-first CSS framework for rapid UI development
  • Bootstrap Icons - Comprehensive icon library for UI elements
  • HTML5 & CSS3 - Semantic markup and modern styling capabilities

Cloud Infrastructure (Azure)

  • Azure Static Web Apps - Serverless hosting with global CDN distribution
  • Azure Blob Storage - Scalable object storage for resumes and file assets
  • Azure Key Vault - Centralized secrets management accessed via Functions with DefaultAzureCredential
  • Azure Functions (Isolated Worker, .NET 8) - Serverless backend for secure email API and AI chatbot proxy
  • Azure Table Storage - NoSQL storage for ticket/incident data
  • Azure Application Insights - Real-time monitoring and telemetry with adaptive sampling

External APIs

  • Anthropic Claude API (claude-sonnet-4-20250514) - AI chatbot backend with server-side knowledge base and system prompt

Backend Services & APIs

  • Brevo SMTP Relay - Transactional email delivery via MailKit/MimeKit through Azure Functions API
  • MailKit / MimeKit (v4.15.0) - Cross-platform .NET SMTP client for secure email delivery
  • Polly (v8.6.5) - Resilience and transient fault handling (rate limiting, circuit breaker)
  • Azure Storage SDK - Client libraries for Blob, Queue, File Share, and Table operations
    • Azure.Storage.Blobs (v12.24.0)
    • Azure.Storage.Queues (v12.22.0)
    • Azure.Storage.Files.Shares (v12.22.0)
    • Azure.Data.Tables (v12.10.0)

Authentication & Security

  • Azure Identity - Managed Identity and credential management (v1.13.2 client, v1.18.0 API)
  • Azure Key Vault Configuration - Secure runtime configuration loading via AddAzureKeyVault() in Functions API
  • SAS Tokens - Secure, time-limited access to blob storage resources
  • CORS Configuration - Cross-origin resource sharing with configurable allowed origins in Azure Functions
  • Content Security Policy - HTTP headers for XSS protection configured in staticwebapp.config.json
  • Input Validation & Sanitization - InputValidator with XSS pattern detection in Azure Functions API
  • Rate Limiting - Per-client fixed window rate limiting with Polly in Azure Functions API

Development & Build Tools

  • .NET 8 SDK - Latest LTS version with performance improvements
  • Microsoft.Extensions.Azure (v1.11.0) - Azure SDK client factory extensions
  • User Secrets - Local development secrets management (not deployed)
  • Service Worker - PWA capabilities with offline caching

Tailwind CSS Setup & Architecture

How Tailwind is Set Up

This project uses Tailwind CSS via CDN (zero-configuration approach) loaded in wwwroot/index.html:

<scriptsrc="https://cdn.tailwindcss.com"></script>

What this means:

  • ✅ Zero build complexity - No npm, webpack, PostCSS, or Node.js dependencies required
  • ✅ Instant availability - All Tailwind utility classes work out of the box
  • ✅ Blazor-native - Integrates seamlessly with Blazor WebAssembly static file serving
  • ✅ Fast prototyping - Full Tailwind feature set available immediately
  • ⚠️Larger bundle - ~3.5MB uncompressed CSS (not optimized via PurgeCSS)
  • ⚠️No theme extension - Cannot customize default Tailwind theme without inline config

Usage Pattern: Hybrid Approach

The application combines Tailwind utility classes (primary styling) with custom CSS (wwwroot/css/app.css) for:

  • Blazor-specific styles (#blazor-error-ui, .loading-progress)
  • Custom animations (.hamburger-active, .scroll-to-top)
  • Brand-specific classes (.cloudzen-hover, .progress-bar-fill)
  • Bootstrap compatibility (legacy .btn-primary, form controls)

Tailwind Coverage: 100% of Razor components use Tailwind utilities extensively.

Architecture Decision: Why CDN Instead of npm/Config?

Advantages of CDN approach:

  • Simplicity - Pure .NET 8 project with no JavaScript toolchain
  • Developer experience - No build step delays during development
  • Deployment - Single dotnet publish command with no additional bundling
  • Maintenance - No package.json, node_modules, or npm version conflicts

Trade-offs:

  • Performance - Unoptimized CSS bundle (~3.5MB minified to ~300KB in production)
  • Customization - Limited theme extensions without inline configuration
  • Production optimization - No automatic unused class removal

Recommendations

Option 1: Keep CDN (Current Approach) ✅
Best for: Small-to-medium projects, rapid development, zero build complexity

To optimize current setup:

  1. Add custom theme colors via inline Tailwind config in index.html:
<script>tailwind.config={theme: {extend: {colors: {'cloudzen-teal': '#61C2C8','cloudzen-teal-hover': '#74b7bb',}}}}</script>
  1. Use CSS custom properties for brand consistency (already implemented):
/* app.css */:root {
--cloudzen-primary:#61C2C8;
}

Option 2: Migrate to npm + tailwind.config.js
Best for: Production apps, performance optimization, advanced customization

Benefits:

  • 📦 90% smaller CSS - PurgeCSS removes unused classes (reduces to ~10-30KB)
  • 🎨 Full theme control - Custom colors, fonts, spacing, breakpoints
  • ⚡ JIT mode - Only generate classes you actually use
  • 🔧 Plugins - Access official Tailwind plugins (forms, typography, aspect-ratio)

Migration steps (future enhancement):

# Install Tailwind
npm install -D tailwindcss postcss autoprefixer
# Create config
npx tailwindcss init
# Update tailwind.config.js
module.exports = {
content: ["./**/*.razor", "./**/*.html"],
theme: {
extend: {
colors: {
'cloudzen-teal': '#61C2C8',
}
}
}
}
# Build CSS
npx tailwindcss -i ./wwwroot/css/app.css -o ./wwwroot/css/output.css --minify

Current recommendation: Keep CDN approach for now. The application's current bundle size is acceptable for a portfolio site, and the development simplicity outweighs the performance gains from npm-based setup. Consider migrating when adding significant new features or optimizing for production performance.

Design Patterns & Principles Implemented

SOLID Principles

  • Single Responsibility Principle (SRP)
    • Each service has one reason to change (ProjectService, ResumeService, EmailServiceFactory)
    • Components have single, well-defined purposes (ProfileHeader, ProjectCard)
    • Models represent single entities (ProjectInfo, ServiceInfo, TicketDto)
  • Open/Closed Principle (OCP)
    • IEmailService interface allows alternative email implementations without modifying existing code
    • Azure Functions API extensible via configuration for different SMTP providers
    • Component system supports adding features through composition, not modification
  • Liskov Substitution Principle (LSP)
    • IEmailService implementations are interchangeable (e.g., ApiEmailService could be swapped for a direct provider)
    • ITicketService implementations are interchangeable
  • Interface Segregation Principle (ISP)
    • Focused interfaces (IEmailService, ITicketService, IRateLimiterService) with only necessary methods
    • No client forced to depend on methods it doesn't use
  • Dependency Inversion Principle (DIP)
    • High-level components depend on abstractions (IEmailService, ITicketService, IRateLimiterService), not concrete implementations
    • DI container manages all dependencies via Program.cs registration in both client and API projects
    • Services injected into components via @inject directive

Design Patterns

  • API Gateway Pattern - Blazor WASM delegates sensitive operations to Azure Functions API (ApiEmailService → SendEmailFunction)
  • Options Pattern - Strongly-typed configuration with IOptions<T> (EmailServiceOptions, BlobStorageOptions, EmailSettings, RateLimitOptions)
  • Service Layer Pattern - Business logic separation (ProjectService, PersonalService, ResumeService, TicketService, ApiEmailService)
  • Repository Pattern - Data access abstraction for projects and services with centralized data management
  • Event Callback Pattern - Type-safe parent-child component communication in Blazor
  • Singleton Pattern - Long-lived services (GoogleCalendarUrlService, TicketService, PollyRateLimiterService) registered as singletons
  • Record Pattern - Immutable data transfer objects (ServiceInfo record type)
  • Resilience Pattern - Polly-based rate limiting and circuit breaker in Azure Functions API

Advanced Techniques

  • Async/Await Pattern - Non-blocking operations throughout (SendEmailAsync, DownloadResumeAsync)
  • Managed Identity Authentication - Azure Identity with DefaultAzureCredential for passwordless Azure service access
  • Configuration Abstraction - IConfiguration and IOptions<T> for environment-specific settings across both projects
  • Logging Integration - ILogger<T> for structured logging in services and Azure Functions
  • Error Handling - InvalidOperationException for missing configuration validation
  • Null Safety - Nullable reference types enabled project-wide (string?, IEnumerable?)
  • LINQ Query Composition - Efficient data filtering and sorting in ProjectService
  • JavaScript Interop - Blazor-JS communication for file downloads and animations
  • Input Sanitization - InputValidator with regex-based XSS pattern detection and HTML encoding
  • Correlation ID Tracking - Request tracing across Azure Functions for debugging and monitoring

DevOps & CI/CD

  • GitHub Actions - Automated CI/CD workflows (Static Web Apps + Azure Functions deployment)
  • Azure Static Web Apps CLI - Local development and testing
  • Docker - Container support for reproducible builds (optional)
  • Git - Version control with branch-based deployment strategies

Monitoring & Analytics

  • Application Insights - Performance monitoring with adaptive sampling and QuickPulse metrics in Azure Functions API
  • Azure Monitor - Infrastructure and application health monitoring
  • Logging Framework - ILogger<T> integration throughout services with structured logging
  • Custom telemetry - Track user interactions, feature usage, and performance bottlenecks

Resilience & Error Handling

  • Retry Logic - Implemented in distributed systems projects (RabbitMQ, Azure Functions)
  • Connection Resiliency - Auto-reconnect for messaging systems and database connections
  • Circuit Breaker - Polly-based circuit breaker in Azure Functions API rate limiter service
  • Health Checks - Continuous monitoring of dependent services (databases, message queues, APIs)
  • Graceful Degradation - Application continues functioning when non-critical services fail
  • Exception Handling - Structured error handling with specific exception types
  • Configuration Validation - Throws InvalidOperationException for missing critical settings
  • Timeout Management - Configurable timeouts for HTTP clients (30s default) in Azure Functions API
  • Idempotency - Ensures operations can be safely retried without side effects
  • Polly Integration - Rate limiting (FixedWindowRateLimiter) and circuit breaker via Polly resilience pipelines in API
  • Async-safe Patterns - All async operations properly handle cancellation and exceptions

📚 Documentation

This project includes comprehensive documentation to help you understand the architecture, deploy to Azure, and maintain security:

⚡ Quick Start

# Clone the repository
git clone https://github.com/dariemcarlosdev/CloudZen.git
# Navigate to projectcd CloudZen
# Restore dependencies
dotnet restore
# Run Blazor WASM client
dotnet run --project CloudZen.csproj
# Run Azure Functions API (separate terminal, requires Azure Functions Core Tools)cd Api
func start

🔐 Security First

Important: Blazor WebAssembly runs entirely in the browser. Never store secrets in appsettings.json. Use Azure Functions backend with Key Vault for secure operations. See SECURITY_ALERT.md for details.

🏗️ Architecture

Blazor WASM (Client) ──→ Azure Functions API (Backend) ──→ Brevo SMTP Relay
(CloudZen) (CloudZen.Api) (Email Delivery)
│ │
│ ├──→ Azure Key Vault (Secrets)
│ ├──→ Application Insights (Telemetry)
│ └──→ Anthropic Claude API (AI Chatbot)
│
└──→ Azure Blob Storage (Resume/Files)

See COMPONENT_ARCHITECTURE.md for detailed component breakdown and data flow.

📦 Project Structure

CloudZen/
├── Api/ # Azure Functions API backend (CloudZen.Api)
│ ├── Functions/ # Azure Function endpoints
│ │ ├── SendEmailFunction.cs # Email proxy to Brevo SMTP
│ │ └── ChatFunction.cs # AI chatbot proxy to Anthropic Claude
│ ├── Models/ # API models (EmailRequest, ChatRequest, ChatResponse, RateLimitOptions)
│ ├── Security/ # Input validation and sanitization (InputValidator)
│ ├── Services/ # API services (PollyRateLimiterService)
│ └── Program.cs # Functions host entry point
├── Layout/ # Layout components (MainLayout, Header, Footer)
├── Models/ # Data models (ProjectInfo, ServiceInfo, EmailApiRequest)
│ └── Options/ # IOptions configuration classes
├── Pages/ # Routable pages (Index)
├── Services/ # Business logic (ProjectService, ApiEmailService, ResumeService)
│ └── Abstractions/ # Service interfaces (IEmailService, ITicketService)
├── Shared/ # Reusable Blazor components
│ ├── Chatbot/ # AI chatbot widget (CloudZenChatbot)
│ ├── Common/ # Shared UI (AnimatedCounterCircle, ScrollToTopButton, Tickets)
│ ├── Landing/ # Landing page sections (Hero, Services, CaseStudies, ContactForm, CTA)
│ ├── Profile/ # Profile components (ProfileHeader, ProfileApproach, SDLCProcess, WhoIAm)
│ └── Projects/ # Project display (ProjectCard, ProjectFilter)
├── wwwroot/ # Static assets, configuration, and index.html
├── .github/workflows/ # CI/CD (azure-functions.yml)
└── Program.cs # Blazor WASM entry point

🚀 Deployment

Ready to deploy? Follow these steps:

  1. Read SECURITY_ALERT.md - Critical security information
  2. Follow DEPLOYMENT_GUIDE.md - Complete setup instructions
  3. Follow AZURE_FUNCTION_DEPLOYMENT.md - Deploy the API backend
  4. Use DEPLOYMENT_CHECKLIST.md - Track your progress

GitHub Actions workflows automatically deploy:

  • Blazor WASM → Azure Static Web Apps (on push to master)
  • Azure Functions API → Azure Function App (on push to master when Api/ changes)

📊 Project Highlights

Architecture & Design Excellence

  • 90% code reduction in WhoIAm page through strategic component decomposition
  • 20+ reusable Blazor components with single responsibility principle
    • Profile components: ProfileHeader, ProfileApproach, ProfileHighlights, SDLCProcess, WhoIAm
    • Project components: ProjectCard, ProjectFilter
    • Landing components: Hero, Services, CaseStudies, ContactForm, CTA, Mission, Testimonials, ValueProposition
    • Layout components: MainLayout, Header, Footer
    • Common components: AnimatedCounterCircle, ScrollToTopButton, Tickets
  • Component-based architecture enabling 85% code reusability across pages
  • Centralized business logic with dedicated service layer
    • ProjectService - Portfolio project management and filtering
    • PersonalService - Service offerings and company information
    • ResumeService - Azure Blob integration for document delivery
    • ApiEmailService - Secure email via Azure Functions API backend
    • TicketService - Support incident tracking
    • GoogleCalendarUrlService - Booking integration

Cloud-Native Implementation

  • Serverless architecture with Azure Static Web Apps + Azure Functions (Isolated Worker)
  • Automated deployments via GitHub Actions CI/CD (separate workflows for WASM and Functions)
  • Global CDN distribution for sub-100ms page loads worldwide
  • Auto-scaling infrastructure handling traffic spikes without manual intervention
  • Secure secrets management with Azure Key Vault integration in Azure Functions API
  • CORS-enabled Azure Functions API with configurable allowed origins
  • PWA capabilities with service worker for offline functionality

User Experience & Performance

  • Type-safe filtering with EventCallback pattern for real-time project filtering
  • Animated UI elements including gradient counters and smooth transitions
  • Mobile-first responsive design - Optimized for 320px to 4K displays
  • Accessibility compliance with semantic HTML and ARIA labels
  • Fast page loads - Service worker caching reduces repeat visit load time by 70%
  • Interactive process visualization - SDLC workflow with state management

Security & Best Practices

  • API-first security - Sensitive operations (email, secrets) handled by Azure Functions backend, never in client
  • SOLID principles applied across all services and components for maintainability
  • Dependency injection throughout the application for testability and loose coupling
  • Interface-driven design (IEmailService, ITicketService, IRateLimiterService) for flexibility and testing
  • Nullable reference types enabled project-wide reducing null reference exceptions by 40%
  • Environment-based configuration separating development, staging, and production settings
  • SAS token authentication for secure, time-limited public blob access
  • CSP headers and security-first static web app configuration preventing XSS attacks
  • API key rotation support with zero-downtime provider switching via configuration
  • Validation at boundaries - Input validation in contact form and API (InputValidator with XSS pattern detection)
  • Encapsulation - Private fields with public property accessors (e.g., ResumeService.ResumeBlobUrl)
  • Immutable data models using C# records for thread-safe data transfer (ServiceInfo)
  • Async-first design - All I/O operations use async/await for scalability
  • Resilience patterns - Polly-based rate limiting and circuit breaker in Azure Functions API
  • Configuration validation - Exception throwing for missing critical configuration values

Business Value Delivered

  • Professional portfolio showcasing 8+ real-world projects with measurable results
  • Lead generation via strategic CTAs, validated contact form, and AI chatbot with 5-question conversation cap
  • AI-powered chatbot converting website visitors to consultation leads with knowledge-base-driven responses
  • Automated email delivery with Brevo SMTP relay via secure Azure Functions API backend
  • Resume distribution with download tracking and blob analytics
  • Client onboarding streamlined with Google Calendar integration
  • Support dashboard for incident tracking and response time monitoring

Development Quality

  • Clean Architecture principles with clear layer separation
  • SOLID principles applied to service implementations
  • Comprehensive documentation with inline XML comments and README guides
  • Git workflow with feature branches and protected master
  • Code organization following ASP.NET Core conventions
  • Scalable structure ready for feature expansion (testimonials, blog, admin panel)

Technical Innovations

  • Dynamic case study selection - Automatically surfaces top 3 customer projects with LINQ filtering
  • Business-friendly jargon translation - Converts technical terms for non-technical audiences in real-time
  • Gradient color interpolation - Mathematical color transitions for animated counters using RGB calculations
  • Event-driven architecture - Loose coupling between UI and business logic via EventCallback pattern
  • Secure email pipeline - Client → Azure Functions API → Brevo SMTP relay with rate limiting and input validation
  • AI chatbot pipeline - Blazor WASM → Azure Functions → Anthropic Claude API with token controls, history trimming, and response truncation
  • Multi-layer abuse prevention - Client-side conversation cap + API rate limiting + input validation + system prompt hardening
  • SPA with SEO optimization - Static Web Apps routing and fallback for search engine visibility (staticwebapp.config.json)
  • Retry mechanisms - Implemented in side projects (RabbitMQ connection resiliency, SSIS retry logic)
  • Circuit breaker patterns - Polly-based circuit breaker in Azure Functions rate limiter service
  • Health monitoring - Integrated health checks for distributed systems (RabbitMQ, Azure Functions)
  • Idempotent message processing - Duplicate prevention in event-driven systems
  • Rate limiting - Per-client fixed window rate limiting with Polly in Azure Functions API
  • CQRS pattern - Command-Query Responsibility Segregation with MediatR in microservices
  • Caching strategies - In-memory and distributed caching for performance optimization
  • Delta-based ETL processing - 70% runtime reduction through intelligent data extraction
  • Managed Identity preference - DefaultAzureCredential for passwordless Azure service access

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

👤 Author

Dariem C. Macias
Principal Consultant, CloudZen Inc.
LinkedIn | GitHub

About

modern Blazor WebAssembly project for CloudZen Inc., showcasing expertise in .NET 8, Azure Cloud, DevOps, AI-driven automation, and enterprise application modernization. Features scalable architecture, CI/CD integration, and a professional portfolio for Dariem C. Macias.

www.cloud-zen.net/

Resources

Readme
Activity
Custom properties

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
CloudZen
A modern Blazor WebAssembly portfolio and consulting showcase built with .NET 8, demonstrating expertise in building scalable, secure cloud applications with Azure integration.
🚀 Features
Portfolio & Presentation
  • Dynamic Project Showcase - Interactive case studies with filtering by technology, status, and project type
  • Professional Portfolio Page - Comprehensive "Who I Am" section with profile header, approach, and highlighted achievements
  • Animated UI Components - Counter circles with gradient fills and smooth animations for metrics display
  • Responsive Design - Mobile-first approach with Tailwind CSS, optimized for all screen sizes
  • Interactive SDLC Process - Visual representation of Planning, Automation, and Deployment phases
Business Features
  • Contact Form - Validated contact form with email integration via Brevo/SendGrid/SMTP providers
  • AI Chatbot - Embedded conversational assistant powered by Anthropic Claude, with knowledge base, lead conversion, and abuse protection (see AI_CHATBOT_DOCUMENTATION.md)
  • Resume Download - Secure resume delivery from Azure Blob Storage with SAS token authentication
  • Service Offerings Display - Dynamic service cards showcasing consulting capabilities
  • Testimonials Section - Client feedback display (currently disabled, ready for activation)
  • Call-to-Action Components - Strategic CTAs throughout the site for lead generation
Technical Features
  • Progressive Web App (PWA) - Service worker enabled for offline capability and fast loading
  • Component-Based Architecture - Reusable Blazor components with clear separation of concerns
  • Secure API Backend - Email and AI chatbot operations routed through Azure Functions API with rate limiting, input validation, and token controls
  • Centralized Data Management - Service layer pattern with ProjectService and PersonalService
  • Type-Safe Event Handling - EventCallback pattern for parent-child component communication
  • Google Calendar Integration - URL service for scheduling consultation bookings
  • Ticket Management System - Dashboard for tracking support incidents (demo implementation)
Cloud & DevOps
  • Azure Static Web Apps - Automated deployment with GitHub Actions workflow
  • Azure Blob Storage - Cloud file storage with CORS configuration for cross-origin access
  • Azure Key Vault Integration - Secrets management via Azure Functions backend with DefaultAzureCredential
  • CI/CD Pipeline - Automated build, test, and deployment on push to master (Static Web Apps + Azure Functions)
  • Service Worker - Automatic caching and offline support for enhanced performance
🛠️ Tech Stack
Frontend Technologies
  • Blazor WebAssembly (.NET 8) - Modern SPA framework with C# instead of JavaScript
  • C# 12 - Latest language features with nullable reference types enabled
  • Tailwind CSS - Utility-first CSS framework for rapid UI development
  • Bootstrap Icons - Comprehensive icon library for UI elements
  • HTML5 & CSS3 - Semantic markup and modern styling capabilities
Cloud Infrastructure (Azure)
  • Azure Static Web Apps - Serverless hosting with global CDN distribution
  • Azure Blob Storage - Scalable object storage for resumes and file assets
  • Azure Key Vault - Centralized secrets management accessed via Functions with DefaultAzureCredential
  • Azure Functions (Isolated Worker, .NET 8) - Serverless backend for secure email API and AI chatbot proxy
  • Azure Table Storage - NoSQL storage for ticket/incident data
  • Azure Application Insights - Real-time monitoring and telemetry with adaptive sampling
External APIs
  • Anthropic Claude API (claude-sonnet-4-20250514) - AI chatbot backend with server-side knowledge base and system prompt
Backend Services & APIs
  • Brevo SMTP Relay - Transactional email delivery via MailKit/MimeKit through Azure Functions API
  • MailKit / MimeKit (v4.15.0) - Cross-platform .NET SMTP client for secure email delivery
  • Polly (v8.6.5) - Resilience and transient fault handling (rate limiting, circuit breaker)
  • Azure Storage SDK - Client libraries for Blob, Queue, File Share, and Table operations

    • Azure.Storage.Blobs (v12.24.0)
    • Azure.Storage.Queues (v12.22.0)
    • Azure.Storage.Files.Shares (v12.22.0)
    • Azure.Data.Tables (v12.10.0)
Authentication & Security
  • Azure Identity - Managed Identity and credential management (v1.13.2 client, v1.18.0 API)
  • Azure Key Vault Configuration - Secure runtime configuration loading via AddAzureKeyVault() in Functions API
  • SAS Tokens - Secure, time-limited access to blob storage resources
  • CORS Configuration - Cross-origin resource sharing with configurable allowed origins in Azure Functions
  • Content Security Policy - HTTP headers for XSS protection configured in staticwebapp.config.json
  • Input Validation & Sanitization - InputValidator with XSS pattern detection in Azure Functions API
  • Rate Limiting - Per-client fixed window rate limiting with Polly in Azure Functions API
Development & Build Tools
  • .NET 8 SDK - Latest LTS version with performance improvements
  • Microsoft.Extensions.Azure (v1.11.0) - Azure SDK client factory extensions
  • User Secrets - Local development secrets management (not deployed)
  • Service Worker - PWA capabilities with offline caching
Tailwind CSS Setup & Architecture
How Tailwind is Set Up
This project uses Tailwind CSS via CDN (zero-configuration approach) loaded in wwwroot/index.html:
<scriptsrc="https://cdn.tailwindcss.com"></script>
What this means:
  • ✅ Zero build complexity - No npm, webpack, PostCSS, or Node.js dependencies required
  • ✅ Instant availability - All Tailwind utility classes work out of the box
  • ✅ Blazor-native - Integrates seamlessly with Blazor WebAssembly static file serving
  • ✅ Fast prototyping - Full Tailwind feature set available immediately
  • ⚠️Larger bundle - ~3.5MB uncompressed CSS (not optimized via PurgeCSS)
  • ⚠️No theme extension - Cannot customize default Tailwind theme without inline config
Usage Pattern: Hybrid Approach
The application combines Tailwind utility classes (primary styling) with custom CSS (wwwroot/css/app.css) for:
  • Blazor-specific styles (#blazor-error-ui, .loading-progress)
  • Custom animations (.hamburger-active, .scroll-to-top)
  • Brand-specific classes (.cloudzen-hover, .progress-bar-fill)
  • Bootstrap compatibility (legacy .btn-primary, form controls)
Tailwind Coverage: 100% of Razor components use Tailwind utilities extensively.
Architecture Decision: Why CDN Instead of npm/Config?
Advantages of CDN approach:
  • Simplicity - Pure .NET 8 project with no JavaScript toolchain
  • Developer experience - No build step delays during development
  • Deployment - Single dotnet publish command with no additional bundling
  • Maintenance - No package.json, node_modules, or npm version conflicts
Trade-offs:
  • Performance - Unoptimized CSS bundle (~3.5MB minified to ~300KB in production)
  • Customization - Limited theme extensions without inline configuration
  • Production optimization - No automatic unused class removal
Recommendations
Option 1: Keep CDN (Current Approach) ✅
Best for: Small-to-medium projects, rapid development, zero build complexity
To optimize current setup:
  1. Add custom theme colors via inline Tailwind config in index.html:
<script>tailwind.config={theme: {extend: {colors: {'cloudzen-teal': '#61C2C8','cloudzen-teal-hover': '#74b7bb',}}}}</script>
  1. Use CSS custom properties for brand consistency (already implemented):
/* app.css */:root {
--cloudzen-primary:#61C2C8;
}
Option 2: Migrate to npm + tailwind.config.js
Best for: Production apps, performance optimization, advanced customization
Benefits:
  • 📦 90% smaller CSS - PurgeCSS removes unused classes (reduces to ~10-30KB)
  • 🎨 Full theme control - Custom colors, fonts, spacing, breakpoints
  • ⚡ JIT mode - Only generate classes you actually use
  • 🔧 Plugins - Access official Tailwind plugins (forms, typography, aspect-ratio)
Migration steps (future enhancement):
# Install Tailwind
npm install -D tailwindcss postcss autoprefixer
# Create config
npx tailwindcss init
# Update tailwind.config.js
module.exports = {
content: ["./**/*.razor", "./**/*.html"],
theme: {
extend: {
colors: {
'cloudzen-teal': '#61C2C8',
}
}
}
}
# Build CSS
npx tailwindcss -i ./wwwroot/css/app.css -o ./wwwroot/css/output.css --minify
Current recommendation: Keep CDN approach for now. The application's current bundle size is acceptable for a portfolio site, and the development simplicity outweighs the performance gains from npm-based setup. Consider migrating when adding significant new features or optimizing for production performance.
Design Patterns & Principles Implemented
SOLID Principles
  • Single Responsibility Principle (SRP)
    •  Each service has one reason to change (ProjectService, ResumeService, EmailServiceFactory)
    •  Components have single, well-defined purposes (ProfileHeader, ProjectCard)
    •  Models represent single entities (ProjectInfo, ServiceInfo, TicketDto)
  • Open/Closed Principle (OCP)
    • IEmailService interface allows alternative email implementations without modifying existing code
    •  Azure Functions API extensible via configuration for different SMTP providers
    •  Component system supports adding features through composition, not modification
  • Liskov Substitution Principle (LSP)
    • IEmailService implementations are interchangeable (e.g., ApiEmailService could be swapped for a direct provider)
    • ITicketService implementations are interchangeable
  • Interface Segregation Principle (ISP)
    •  Focused interfaces (IEmailService, ITicketService, IRateLimiterService) with only necessary methods
    •  No client forced to depend on methods it doesn't use
  • Dependency Inversion Principle (DIP)
    •  High-level components depend on abstractions (IEmailService, ITicketService, IRateLimiterService), not concrete implementations
    •  DI container manages all dependencies via Program.cs registration in both client and API projects
    •  Services injected into components via @inject directive
Design Patterns
  • API Gateway Pattern - Blazor WASM delegates sensitive operations to Azure Functions API (ApiEmailService → SendEmailFunction)
  • Options Pattern - Strongly-typed configuration with IOptions<T> (EmailServiceOptions, BlobStorageOptions, EmailSettings, RateLimitOptions)
  • Service Layer Pattern - Business logic separation (ProjectService, PersonalService, ResumeService, TicketService, ApiEmailService)
  • Repository Pattern - Data access abstraction for projects and services with centralized data management
  • Event Callback Pattern - Type-safe parent-child component communication in Blazor
  • Singleton Pattern - Long-lived services (GoogleCalendarUrlService, TicketService, PollyRateLimiterService) registered as singletons
  • Record Pattern - Immutable data transfer objects (ServiceInfo record type)
  • Resilience Pattern - Polly-based rate limiting and circuit breaker in Azure Functions API
Advanced Techniques
  • Async/Await Pattern - Non-blocking operations throughout (SendEmailAsync, DownloadResumeAsync)
  • Managed Identity Authentication - Azure Identity with DefaultAzureCredential for passwordless Azure service access
  • Configuration Abstraction - IConfiguration and IOptions<T> for environment-specific settings across both projects
  • Logging Integration - ILogger<T> for structured logging in services and Azure Functions
  • Error Handling - InvalidOperationException for missing configuration validation
  • Null Safety - Nullable reference types enabled project-wide (string?, IEnumerable?)
  • LINQ Query Composition - Efficient data filtering and sorting in ProjectService
  • JavaScript Interop - Blazor-JS communication for file downloads and animations
  • Input Sanitization - InputValidator with regex-based XSS pattern detection and HTML encoding
  • Correlation ID Tracking - Request tracing across Azure Functions for debugging and monitoring
DevOps & CI/CD
  • GitHub Actions - Automated CI/CD workflows (Static Web Apps + Azure Functions deployment)
  • Azure Static Web Apps CLI - Local development and testing
  • Docker - Container support for reproducible builds (optional)
  • Git - Version control with branch-based deployment strategies
Monitoring & Analytics
  • Application Insights - Performance monitoring with adaptive sampling and QuickPulse metrics in Azure Functions API
  • Azure Monitor - Infrastructure and application health monitoring
  • Logging Framework - ILogger<T> integration throughout services with structured logging
  • Custom telemetry - Track user interactions, feature usage, and performance bottlenecks
Resilience & Error Handling
  • Retry Logic - Implemented in distributed systems projects (RabbitMQ, Azure Functions)
  • Connection Resiliency - Auto-reconnect for messaging systems and database connections
  • Circuit Breaker - Polly-based circuit breaker in Azure Functions API rate limiter service
  • Health Checks - Continuous monitoring of dependent services (databases, message queues, APIs)
  • Graceful Degradation - Application continues functioning when non-critical services fail
  • Exception Handling - Structured error handling with specific exception types
  • Configuration Validation - Throws InvalidOperationException for missing critical settings
  • Timeout Management - Configurable timeouts for HTTP clients (30s default) in Azure Functions API
  • Idempotency - Ensures operations can be safely retried without side effects
  • Polly Integration - Rate limiting (FixedWindowRateLimiter) and circuit breaker via Polly resilience pipelines in API
  • Async-safe Patterns - All async operations properly handle cancellation and exceptions
📚 Documentation
This project includes comprehensive documentation to help you understand the architecture, deploy to Azure, and maintain security:
⚡ Quick Start
# Clone the repository
git clone https://github.com/dariemcarlosdev/CloudZen.git
# Navigate to projectcd CloudZen
# Restore dependencies
dotnet restore
# Run Blazor WASM client
dotnet run --project CloudZen.csproj
# Run Azure Functions API (separate terminal, requires Azure Functions Core Tools)cd Api
func start
🔐 Security First
Important: Blazor WebAssembly runs entirely in the browser. Never store secrets in appsettings.json. Use Azure Functions backend with Key Vault for secure operations. See SECURITY_ALERT.md for details.
🏗️ Architecture
Blazor WASM (Client) ──→ Azure Functions API (Backend) ──→ Brevo SMTP Relay
(CloudZen) (CloudZen.Api) (Email Delivery)
│ │
│ ├──→ Azure Key Vault (Secrets)
│ ├──→ Application Insights (Telemetry)
│ └──→ Anthropic Claude API (AI Chatbot)
│
└──→ Azure Blob Storage (Resume/Files)

See COMPONENT_ARCHITECTURE.md for detailed component breakdown and data flow.
📦 Project Structure
CloudZen/
├── Api/ # Azure Functions API backend (CloudZen.Api)
│ ├── Functions/ # Azure Function endpoints
│ │ ├── SendEmailFunction.cs # Email proxy to Brevo SMTP
│ │ └── ChatFunction.cs # AI chatbot proxy to Anthropic Claude
│ ├── Models/ # API models (EmailRequest, ChatRequest, ChatResponse, RateLimitOptions)
│ ├── Security/ # Input validation and sanitization (InputValidator)
│ ├── Services/ # API services (PollyRateLimiterService)
│ └── Program.cs # Functions host entry point
├── Layout/ # Layout components (MainLayout, Header, Footer)
├── Models/ # Data models (ProjectInfo, ServiceInfo, EmailApiRequest)
│ └── Options/ # IOptions configuration classes
├── Pages/ # Routable pages (Index)
├── Services/ # Business logic (ProjectService, ApiEmailService, ResumeService)
│ └── Abstractions/ # Service interfaces (IEmailService, ITicketService)
├── Shared/ # Reusable Blazor components
│ ├── Chatbot/ # AI chatbot widget (CloudZenChatbot)
│ ├── Common/ # Shared UI (AnimatedCounterCircle, ScrollToTopButton, Tickets)
│ ├── Landing/ # Landing page sections (Hero, Services, CaseStudies, ContactForm, CTA)
│ ├── Profile/ # Profile components (ProfileHeader, ProfileApproach, SDLCProcess, WhoIAm)
│ └── Projects/ # Project display (ProjectCard, ProjectFilter)
├── wwwroot/ # Static assets, configuration, and index.html
├── .github/workflows/ # CI/CD (azure-functions.yml)
└── Program.cs # Blazor WASM entry point

🚀 Deployment
Ready to deploy? Follow these steps:
  1. Read SECURITY_ALERT.md - Critical security information
  2. Follow DEPLOYMENT_GUIDE.md - Complete setup instructions
  3. Follow AZURE_FUNCTION_DEPLOYMENT.md - Deploy the API backend
  4. Use DEPLOYMENT_CHECKLIST.md - Track your progress
GitHub Actions workflows automatically deploy:
  • Blazor WASM → Azure Static Web Apps (on push to master)
  • Azure Functions API → Azure Function App (on push to master when Api/ changes)
📊 Project Highlights
Architecture & Design Excellence
  • 90% code reduction in WhoIAm page through strategic component decomposition
  • 20+ reusable Blazor components with single responsibility principle

    •  Profile components: ProfileHeader, ProfileApproach, ProfileHighlights, SDLCProcess, WhoIAm
    •  Project components: ProjectCard, ProjectFilter
    •  Landing components: Hero, Services, CaseStudies, ContactForm, CTA, Mission, Testimonials, ValueProposition
    •  Layout components: MainLayout, Header, Footer
    •  Common components: AnimatedCounterCircle, ScrollToTopButton, Tickets
  • Component-based architecture enabling 85% code reusability across pages
  • Centralized business logic with dedicated service layer

    • ProjectService - Portfolio project management and filtering
    • PersonalService - Service offerings and company information
    • ResumeService - Azure Blob integration for document delivery
    • ApiEmailService - Secure email via Azure Functions API backend
    • TicketService - Support incident tracking
    • GoogleCalendarUrlService - Booking integration
Cloud-Native Implementation
  • Serverless architecture with Azure Static Web Apps + Azure Functions (Isolated Worker)
  • Automated deployments via GitHub Actions CI/CD (separate workflows for WASM and Functions)
  • Global CDN distribution for sub-100ms page loads worldwide
  • Auto-scaling infrastructure handling traffic spikes without manual intervention
  • Secure secrets management with Azure Key Vault integration in Azure Functions API
  • CORS-enabled Azure Functions API with configurable allowed origins
  • PWA capabilities with service worker for offline functionality
User Experience & Performance
  • Type-safe filtering with EventCallback pattern for real-time project filtering
  • Animated UI elements including gradient counters and smooth transitions
  • Mobile-first responsive design - Optimized for 320px to 4K displays
  • Accessibility compliance with semantic HTML and ARIA labels
  • Fast page loads - Service worker caching reduces repeat visit load time by 70%
  • Interactive process visualization - SDLC workflow with state management
Security & Best Practices
  • API-first security - Sensitive operations (email, secrets) handled by Azure Functions backend, never in client
  • SOLID principles applied across all services and components for maintainability
  • Dependency injection throughout the application for testability and loose coupling
  • Interface-driven design (IEmailService, ITicketService, IRateLimiterService) for flexibility and testing
  • Nullable reference types enabled project-wide reducing null reference exceptions by 40%
  • Environment-based configuration separating development, staging, and production settings
  • SAS token authentication for secure, time-limited public blob access
  • CSP headers and security-first static web app configuration preventing XSS attacks
  • API key rotation support with zero-downtime provider switching via configuration
  • Validation at boundaries - Input validation in contact form and API (InputValidator with XSS pattern detection)
  • Encapsulation - Private fields with public property accessors (e.g., ResumeService.ResumeBlobUrl)
  • Immutable data models using C# records for thread-safe data transfer (ServiceInfo)
  • Async-first design - All I/O operations use async/await for scalability
  • Resilience patterns - Polly-based rate limiting and circuit breaker in Azure Functions API
  • Configuration validation - Exception throwing for missing critical configuration values
Business Value Delivered
  • Professional portfolio showcasing 8+ real-world projects with measurable results
  • Lead generation via strategic CTAs, validated contact form, and AI chatbot with 5-question conversation cap
  • AI-powered chatbot converting website visitors to consultation leads with knowledge-base-driven responses
  • Automated email delivery with Brevo SMTP relay via secure Azure Functions API backend
  • Resume distribution with download tracking and blob analytics
  • Client onboarding streamlined with Google Calendar integration
  • Support dashboard for incident tracking and response time monitoring
Development Quality
  • Clean Architecture principles with clear layer separation
  • SOLID principles applied to service implementations
  • Comprehensive documentation with inline XML comments and README guides
  • Git workflow with feature branches and protected master
  • Code organization following ASP.NET Core conventions
  • Scalable structure ready for feature expansion (testimonials, blog, admin panel)
Technical Innovations
  • Dynamic case study selection - Automatically surfaces top 3 customer projects with LINQ filtering
  • Business-friendly jargon translation - Converts technical terms for non-technical audiences in real-time
  • Gradient color interpolation - Mathematical color transitions for animated counters using RGB calculations
  • Event-driven architecture - Loose coupling between UI and business logic via EventCallback pattern
  • Secure email pipeline - Client → Azure Functions API → Brevo SMTP relay with rate limiting and input validation
  • AI chatbot pipeline - Blazor WASM → Azure Functions → Anthropic Claude API with token controls, history trimming, and response truncation
  • Multi-layer abuse prevention - Client-side conversation cap + API rate limiting + input validation + system prompt hardening
  • SPA with SEO optimization - Static Web Apps routing and fallback for search engine visibility (staticwebapp.config.json)
  • Retry mechanisms - Implemented in side projects (RabbitMQ connection resiliency, SSIS retry logic)
  • Circuit breaker patterns - Polly-based circuit breaker in Azure Functions rate limiter service
  • Health monitoring - Integrated health checks for distributed systems (RabbitMQ, Azure Functions)
  • Idempotent message processing - Duplicate prevention in event-driven systems
  • Rate limiting - Per-client fixed window rate limiting with Polly in Azure Functions API
  • CQRS pattern - Command-Query Responsibility Segregation with MediatR in microservices
  • Caching strategies - In-memory and distributed caching for performance optimization
  • Delta-based ETL processing - 70% runtime reduction through intelligent data extraction
  • Managed Identity preference - DefaultAzureCredential for passwordless Azure service access
📄 License
This project is licensed under the MIT License. See the LICENSE file for details.
👤 Author
Dariem C. Macias

Principal Consultant, CloudZen Inc.
LinkedIn | GitHub
About
modern Blazor WebAssembly project for CloudZen Inc., showcasing expertise in .NET 8, Azure Cloud, DevOps, AI-driven automation, and enterprise application modernization. Features scalable architecture, CI/CD integration, and a professional portfolio for Dariem C. Macias.
www.cloud-zen.net/
Resources
Readme
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
CloudZen
A modern Blazor WebAssembly portfolio and consulting showcase built with .NET 8, demonstrating expertise in building scalable, secure cloud applications with Azure integration.
🚀 Features
Portfolio & Presentation
  • Dynamic Project Showcase - Interactive case studies with filtering by technology, status, and project type
  • Professional Portfolio Page - Comprehensive "Who I Am" section with profile header, approach, and highlighted achievements
  • Animated UI Components - Counter circles with gradient fills and smooth animations for metrics display
  • Responsive Design - Mobile-first approach with Tailwind CSS, optimized for all screen sizes
  • Interactive SDLC Process - Visual representation of Planning, Automation, and Deployment phases
Business Features
  • Contact Form - Validated contact form with email integration via Brevo/SendGrid/SMTP providers
  • AI Chatbot - Embedded conversational assistant powered by Anthropic Claude, with knowledge base, lead conversion, and abuse protection (see AI_CHATBOT_DOCUMENTATION.md)
  • Resume Download - Secure resume delivery from Azure Blob Storage with SAS token authentication
  • Service Offerings Display - Dynamic service cards showcasing consulting capabilities
  • Testimonials Section - Client feedback display (currently disabled, ready for activation)
  • Call-to-Action Components - Strategic CTAs throughout the site for lead generation
Technical Features
  • Progressive Web App (PWA) - Service worker enabled for offline capability and fast loading
  • Component-Based Architecture - Reusable Blazor components with clear separation of concerns
  • Secure API Backend - Email and AI chatbot operations routed through Azure Functions API with rate limiting, input validation, and token controls
  • Centralized Data Management - Service layer pattern with ProjectService and PersonalService
  • Type-Safe Event Handling - EventCallback pattern for parent-child component communication
  • Google Calendar Integration - URL service for scheduling consultation bookings
  • Ticket Management System - Dashboard for tracking support incidents (demo implementation)
Cloud & DevOps
  • Azure Static Web Apps - Automated deployment with GitHub Actions workflow
  • Azure Blob Storage - Cloud file storage with CORS configuration for cross-origin access
  • Azure Key Vault Integration - Secrets management via Azure Functions backend with DefaultAzureCredential
  • CI/CD Pipeline - Automated build, test, and deployment on push to master (Static Web Apps + Azure Functions)
  • Service Worker - Automatic caching and offline support for enhanced performance
🛠️ Tech Stack
Frontend Technologies
  • Blazor WebAssembly (.NET 8) - Modern SPA framework with C# instead of JavaScript
  • C# 12 - Latest language features with nullable reference types enabled
  • Tailwind CSS - Utility-first CSS framework for rapid UI development
  • Bootstrap Icons - Comprehensive icon library for UI elements
  • HTML5 & CSS3 - Semantic markup and modern styling capabilities
Cloud Infrastructure (Azure)
  • Azure Static Web Apps - Serverless hosting with global CDN distribution
  • Azure Blob Storage - Scalable object storage for resumes and file assets
  • Azure Key Vault - Centralized secrets management accessed via Functions with DefaultAzureCredential
  • Azure Functions (Isolated Worker, .NET 8) - Serverless backend for secure email API and AI chatbot proxy
  • Azure Table Storage - NoSQL storage for ticket/incident data
  • Azure Application Insights - Real-time monitoring and telemetry with adaptive sampling
External APIs
  • Anthropic Claude API (claude-sonnet-4-20250514) - AI chatbot backend with server-side knowledge base and system prompt
Backend Services & APIs
  • Brevo SMTP Relay - Transactional email delivery via MailKit/MimeKit through Azure Functions API
  • MailKit / MimeKit (v4.15.0) - Cross-platform .NET SMTP client for secure email delivery
  • Polly (v8.6.5) - Resilience and transient fault handling (rate limiting, circuit breaker)
  • Azure Storage SDK - Client libraries for Blob, Queue, File Share, and Table operations

    • Azure.Storage.Blobs (v12.24.0)
    • Azure.Storage.Queues (v12.22.0)
    • Azure.Storage.Files.Shares (v12.22.0)
    • Azure.Data.Tables (v12.10.0)
Authentication & Security
  • Azure Identity - Managed Identity and credential management (v1.13.2 client, v1.18.0 API)
  • Azure Key Vault Configuration - Secure runtime configuration loading via AddAzureKeyVault() in Functions API
  • SAS Tokens - Secure, time-limited access to blob storage resources
  • CORS Configuration - Cross-origin resource sharing with configurable allowed origins in Azure Functions
  • Content Security Policy - HTTP headers for XSS protection configured in staticwebapp.config.json
  • Input Validation & Sanitization - InputValidator with XSS pattern detection in Azure Functions API
  • Rate Limiting - Per-client fixed window rate limiting with Polly in Azure Functions API
Development & Build Tools
  • .NET 8 SDK - Latest LTS version with performance improvements
  • Microsoft.Extensions.Azure (v1.11.0) - Azure SDK client factory extensions
  • User Secrets - Local development secrets management (not deployed)
  • Service Worker - PWA capabilities with offline caching
Tailwind CSS Setup & Architecture
How Tailwind is Set Up
This project uses Tailwind CSS via CDN (zero-configuration approach) loaded in wwwroot/index.html:
<scriptsrc="https://cdn.tailwindcss.com"></script>
What this means:
  • ✅ Zero build complexity - No npm, webpack, PostCSS, or Node.js dependencies required
  • ✅ Instant availability - All Tailwind utility classes work out of the box
  • ✅ Blazor-native - Integrates seamlessly with Blazor WebAssembly static file serving
  • ✅ Fast prototyping - Full Tailwind feature set available immediately
  • ⚠️Larger bundle - ~3.5MB uncompressed CSS (not optimized via PurgeCSS)
  • ⚠️No theme extension - Cannot customize default Tailwind theme without inline config
Usage Pattern: Hybrid Approach
The application combines Tailwind utility classes (primary styling) with custom CSS (wwwroot/css/app.css) for:
  • Blazor-specific styles (#blazor-error-ui, .loading-progress)
  • Custom animations (.hamburger-active, .scroll-to-top)
  • Brand-specific classes (.cloudzen-hover, .progress-bar-fill)
  • Bootstrap compatibility (legacy .btn-primary, form controls)
Tailwind Coverage: 100% of Razor components use Tailwind utilities extensively.
Architecture Decision: Why CDN Instead of npm/Config?
Advantages of CDN approach:
  • Simplicity - Pure .NET 8 project with no JavaScript toolchain
  • Developer experience - No build step delays during development
  • Deployment - Single dotnet publish command with no additional bundling
  • Maintenance - No package.json, node_modules, or npm version conflicts
Trade-offs:
  • Performance - Unoptimized CSS bundle (~3.5MB minified to ~300KB in production)
  • Customization - Limited theme extensions without inline configuration
  • Production optimization - No automatic unused class removal
Recommendations
Option 1: Keep CDN (Current Approach) ✅
Best for: Small-to-medium projects, rapid development, zero build complexity
To optimize current setup:
  1. Add custom theme colors via inline Tailwind config in index.html:
<script>tailwind.config={theme: {extend: {colors: {'cloudzen-teal': '#61C2C8','cloudzen-teal-hover': '#74b7bb',}}}}</script>
  1. Use CSS custom properties for brand consistency (already implemented):
/* app.css */:root {
--cloudzen-primary:#61C2C8;
}
Option 2: Migrate to npm + tailwind.config.js
Best for: Production apps, performance optimization, advanced customization
Benefits:
  • 📦 90% smaller CSS - PurgeCSS removes unused classes (reduces to ~10-30KB)
  • 🎨 Full theme control - Custom colors, fonts, spacing, breakpoints
  • ⚡ JIT mode - Only generate classes you actually use
  • 🔧 Plugins - Access official Tailwind plugins (forms, typography, aspect-ratio)
Migration steps (future enhancement):
# Install Tailwind
npm install -D tailwindcss postcss autoprefixer
# Create config
npx tailwindcss init
# Update tailwind.config.js
module.exports = {
content: ["./**/*.razor", "./**/*.html"],
theme: {
extend: {
colors: {
'cloudzen-teal': '#61C2C8',
}
}
}
}
# Build CSS
npx tailwindcss -i ./wwwroot/css/app.css -o ./wwwroot/css/output.css --minify
Current recommendation: Keep CDN approach for now. The application's current bundle size is acceptable for a portfolio site, and the development simplicity outweighs the performance gains from npm-based setup. Consider migrating when adding significant new features or optimizing for production performance.
Design Patterns & Principles Implemented
SOLID Principles
  • Single Responsibility Principle (SRP)
    •  Each service has one reason to change (ProjectService, ResumeService, EmailServiceFactory)
    •  Components have single, well-defined purposes (ProfileHeader, ProjectCard)
    •  Models represent single entities (ProjectInfo, ServiceInfo, TicketDto)
  • Open/Closed Principle (OCP)
    • IEmailService interface allows alternative email implementations without modifying existing code
    •  Azure Functions API extensible via configuration for different SMTP providers
    •  Component system supports adding features through composition, not modification
  • Liskov Substitution Principle (LSP)
    • IEmailService implementations are interchangeable (e.g., ApiEmailService could be swapped for a direct provider)
    • ITicketService implementations are interchangeable
  • Interface Segregation Principle (ISP)
    •  Focused interfaces (IEmailService, ITicketService, IRateLimiterService) with only necessary methods
    •  No client forced to depend on methods it doesn't use
  • Dependency Inversion Principle (DIP)
    •  High-level components depend on abstractions (IEmailService, ITicketService, IRateLimiterService), not concrete implementations
    •  DI container manages all dependencies via Program.cs registration in both client and API projects
    •  Services injected into components via @inject directive
Design Patterns
  • API Gateway Pattern - Blazor WASM delegates sensitive operations to Azure Functions API (ApiEmailService → SendEmailFunction)
  • Options Pattern - Strongly-typed configuration with IOptions<T> (EmailServiceOptions, BlobStorageOptions, EmailSettings, RateLimitOptions)
  • Service Layer Pattern - Business logic separation (ProjectService, PersonalService, ResumeService, TicketService, ApiEmailService)
  • Repository Pattern - Data access abstraction for projects and services with centralized data management
  • Event Callback Pattern - Type-safe parent-child component communication in Blazor
  • Singleton Pattern - Long-lived services (GoogleCalendarUrlService, TicketService, PollyRateLimiterService) registered as singletons
  • Record Pattern - Immutable data transfer objects (ServiceInfo record type)
  • Resilience Pattern - Polly-based rate limiting and circuit breaker in Azure Functions API
Advanced Techniques
  • Async/Await Pattern - Non-blocking operations throughout (SendEmailAsync, DownloadResumeAsync)
  • Managed Identity Authentication - Azure Identity with DefaultAzureCredential for passwordless Azure service access
  • Configuration Abstraction - IConfiguration and IOptions<T> for environment-specific settings across both projects
  • Logging Integration - ILogger<T> for structured logging in services and Azure Functions
  • Error Handling - InvalidOperationException for missing configuration validation
  • Null Safety - Nullable reference types enabled project-wide (string?, IEnumerable?)
  • LINQ Query Composition - Efficient data filtering and sorting in ProjectService
  • JavaScript Interop - Blazor-JS communication for file downloads and animations
  • Input Sanitization - InputValidator with regex-based XSS pattern detection and HTML encoding
  • Correlation ID Tracking - Request tracing across Azure Functions for debugging and monitoring
DevOps & CI/CD
  • GitHub Actions - Automated CI/CD workflows (Static Web Apps + Azure Functions deployment)
  • Azure Static Web Apps CLI - Local development and testing
  • Docker - Container support for reproducible builds (optional)
  • Git - Version control with branch-based deployment strategies
Monitoring & Analytics
  • Application Insights - Performance monitoring with adaptive sampling and QuickPulse metrics in Azure Functions API
  • Azure Monitor - Infrastructure and application health monitoring
  • Logging Framework - ILogger<T> integration throughout services with structured logging
  • Custom telemetry - Track user interactions, feature usage, and performance bottlenecks
Resilience & Error Handling
  • Retry Logic - Implemented in distributed systems projects (RabbitMQ, Azure Functions)
  • Connection Resiliency - Auto-reconnect for messaging systems and database connections
  • Circuit Breaker - Polly-based circuit breaker in Azure Functions API rate limiter service
  • Health Checks - Continuous monitoring of dependent services (databases, message queues, APIs)
  • Graceful Degradation - Application continues functioning when non-critical services fail
  • Exception Handling - Structured error handling with specific exception types
  • Configuration Validation - Throws InvalidOperationException for missing critical settings
  • Timeout Management - Configurable timeouts for HTTP clients (30s default) in Azure Functions API
  • Idempotency - Ensures operations can be safely retried without side effects
  • Polly Integration - Rate limiting (FixedWindowRateLimiter) and circuit breaker via Polly resilience pipelines in API
  • Async-safe Patterns - All async operations properly handle cancellation and exceptions
📚 Documentation
This project includes comprehensive documentation to help you understand the architecture, deploy to Azure, and maintain security:
⚡ Quick Start
# Clone the repository
git clone https://github.com/dariemcarlosdev/CloudZen.git
# Navigate to projectcd CloudZen
# Restore dependencies
dotnet restore
# Run Blazor WASM client
dotnet run --project CloudZen.csproj
# Run Azure Functions API (separate terminal, requires Azure Functions Core Tools)cd Api
func start
🔐 Security First
Important: Blazor WebAssembly runs entirely in the browser. Never store secrets in appsettings.json. Use Azure Functions backend with Key Vault for secure operations. See SECURITY_ALERT.md for details.
🏗️ Architecture
Blazor WASM (Client) ──→ Azure Functions API (Backend) ──→ Brevo SMTP Relay
(CloudZen) (CloudZen.Api) (Email Delivery)
│ │
│ ├──→ Azure Key Vault (Secrets)
│ ├──→ Application Insights (Telemetry)
│ └──→ Anthropic Claude API (AI Chatbot)
│
└──→ Azure Blob Storage (Resume/Files)

See COMPONENT_ARCHITECTURE.md for detailed component breakdown and data flow.
📦 Project Structure
CloudZen/
├── Api/ # Azure Functions API backend (CloudZen.Api)
│ ├── Functions/ # Azure Function endpoints
│ │ ├── SendEmailFunction.cs # Email proxy to Brevo SMTP
│ │ └── ChatFunction.cs # AI chatbot proxy to Anthropic Claude
│ ├── Models/ # API models (EmailRequest, ChatRequest, ChatResponse, RateLimitOptions)
│ ├── Security/ # Input validation and sanitization (InputValidator)
│ ├── Services/ # API services (PollyRateLimiterService)
│ └── Program.cs # Functions host entry point
├── Layout/ # Layout components (MainLayout, Header, Footer)
├── Models/ # Data models (ProjectInfo, ServiceInfo, EmailApiRequest)
│ └── Options/ # IOptions configuration classes
├── Pages/ # Routable pages (Index)
├── Services/ # Business logic (ProjectService, ApiEmailService, ResumeService)
│ └── Abstractions/ # Service interfaces (IEmailService, ITicketService)
├── Shared/ # Reusable Blazor components
│ ├── Chatbot/ # AI chatbot widget (CloudZenChatbot)
│ ├── Common/ # Shared UI (AnimatedCounterCircle, ScrollToTopButton, Tickets)
│ ├── Landing/ # Landing page sections (Hero, Services, CaseStudies, ContactForm, CTA)
│ ├── Profile/ # Profile components (ProfileHeader, ProfileApproach, SDLCProcess, WhoIAm)
│ └── Projects/ # Project display (ProjectCard, ProjectFilter)
├── wwwroot/ # Static assets, configuration, and index.html
├── .github/workflows/ # CI/CD (azure-functions.yml)
└── Program.cs # Blazor WASM entry point

🚀 Deployment
Ready to deploy? Follow these steps:
  1. Read SECURITY_ALERT.md - Critical security information
  2. Follow DEPLOYMENT_GUIDE.md - Complete setup instructions
  3. Follow AZURE_FUNCTION_DEPLOYMENT.md - Deploy the API backend
  4. Use DEPLOYMENT_CHECKLIST.md - Track your progress
GitHub Actions workflows automatically deploy:
  • Blazor WASM → Azure Static Web Apps (on push to master)
  • Azure Functions API → Azure Function App (on push to master when Api/ changes)
📊 Project Highlights
Architecture & Design Excellence
  • 90% code reduction in WhoIAm page through strategic component decomposition
  • 20+ reusable Blazor components with single responsibility principle

    •  Profile components: ProfileHeader, ProfileApproach, ProfileHighlights, SDLCProcess, WhoIAm
    •  Project components: ProjectCard, ProjectFilter
    •  Landing components: Hero, Services, CaseStudies, ContactForm, CTA, Mission, Testimonials, ValueProposition
    •  Layout components: MainLayout, Header, Footer
    •  Common components: AnimatedCounterCircle, ScrollToTopButton, Tickets
  • Component-based architecture enabling 85% code reusability across pages
  • Centralized business logic with dedicated service layer

    • ProjectService - Portfolio project management and filtering
    • PersonalService - Service offerings and company information
    • ResumeService - Azure Blob integration for document delivery
    • ApiEmailService - Secure email via Azure Functions API backend
    • TicketService - Support incident tracking
    • GoogleCalendarUrlService - Booking integration
Cloud-Native Implementation
  • Serverless architecture with Azure Static Web Apps + Azure Functions (Isolated Worker)
  • Automated deployments via GitHub Actions CI/CD (separate workflows for WASM and Functions)
  • Global CDN distribution for sub-100ms page loads worldwide
  • Auto-scaling infrastructure handling traffic spikes without manual intervention
  • Secure secrets management with Azure Key Vault integration in Azure Functions API
  • CORS-enabled Azure Functions API with configurable allowed origins
  • PWA capabilities with service worker for offline functionality
User Experience & Performance
  • Type-safe filtering with EventCallback pattern for real-time project filtering
  • Animated UI elements including gradient counters and smooth transitions
  • Mobile-first responsive design - Optimized for 320px to 4K displays
  • Accessibility compliance with semantic HTML and ARIA labels
  • Fast page loads - Service worker caching reduces repeat visit load time by 70%
  • Interactive process visualization - SDLC workflow with state management
Security & Best Practices
  • API-first security - Sensitive operations (email, secrets) handled by Azure Functions backend, never in client
  • SOLID principles applied across all services and components for maintainability
  • Dependency injection throughout the application for testability and loose coupling
  • Interface-driven design (IEmailService, ITicketService, IRateLimiterService) for flexibility and testing
  • Nullable reference types enabled project-wide reducing null reference exceptions by 40%
  • Environment-based configuration separating development, staging, and production settings
  • SAS token authentication for secure, time-limited public blob access
  • CSP headers and security-first static web app configuration preventing XSS attacks
  • API key rotation support with zero-downtime provider switching via configuration
  • Validation at boundaries - Input validation in contact form and API (InputValidator with XSS pattern detection)
  • Encapsulation - Private fields with public property accessors (e.g., ResumeService.ResumeBlobUrl)
  • Immutable data models using C# records for thread-safe data transfer (ServiceInfo)
  • Async-first design - All I/O operations use async/await for scalability
  • Resilience patterns - Polly-based rate limiting and circuit breaker in Azure Functions API
  • Configuration validation - Exception throwing for missing critical configuration values
Business Value Delivered
  • Professional portfolio showcasing 8+ real-world projects with measurable results
  • Lead generation via strategic CTAs, validated contact form, and AI chatbot with 5-question conversation cap
  • AI-powered chatbot converting website visitors to consultation leads with knowledge-base-driven responses
  • Automated email delivery with Brevo SMTP relay via secure Azure Functions API backend
  • Resume distribution with download tracking and blob analytics
  • Client onboarding streamlined with Google Calendar integration
  • Support dashboard for incident tracking and response time monitoring
Development Quality
  • Clean Architecture principles with clear layer separation
  • SOLID principles applied to service implementations
  • Comprehensive documentation with inline XML comments and README guides
  • Git workflow with feature branches and protected master
  • Code organization following ASP.NET Core conventions
  • Scalable structure ready for feature expansion (testimonials, blog, admin panel)
Technical Innovations
  • Dynamic case study selection - Automatically surfaces top 3 customer projects with LINQ filtering
  • Business-friendly jargon translation - Converts technical terms for non-technical audiences in real-time
  • Gradient color interpolation - Mathematical color transitions for animated counters using RGB calculations
  • Event-driven architecture - Loose coupling between UI and business logic via EventCallback pattern
  • Secure email pipeline - Client → Azure Functions API → Brevo SMTP relay with rate limiting and input validation
  • AI chatbot pipeline - Blazor WASM → Azure Functions → Anthropic Claude API with token controls, history trimming, and response truncation
  • Multi-layer abuse prevention - Client-side conversation cap + API rate limiting + input validation + system prompt hardening
  • SPA with SEO optimization - Static Web Apps routing and fallback for search engine visibility (staticwebapp.config.json)
  • Retry mechanisms - Implemented in side projects (RabbitMQ connection resiliency, SSIS retry logic)
  • Circuit breaker patterns - Polly-based circuit breaker in Azure Functions rate limiter service
  • Health monitoring - Integrated health checks for distributed systems (RabbitMQ, Azure Functions)
  • Idempotent message processing - Duplicate prevention in event-driven systems
  • Rate limiting - Per-client fixed window rate limiting with Polly in Azure Functions API
  • CQRS pattern - Command-Query Responsibility Segregation with MediatR in microservices
  • Caching strategies - In-memory and distributed caching for performance optimization
  • Delta-based ETL processing - 70% runtime reduction through intelligent data extraction
  • Managed Identity preference - DefaultAzureCredential for passwordless Azure service access
📄 License
This project is licensed under the MIT License. See the LICENSE file for details.
👤 Author
Dariem C. Macias

Principal Consultant, CloudZen Inc.
LinkedIn | GitHub
About
modern Blazor WebAssembly project for CloudZen Inc., showcasing expertise in .NET 8, Azure Cloud, DevOps, AI-driven automation, and enterprise application modernization. Features scalable architecture, CI/CD integration, and a professional portfolio for Dariem C. Macias.
www.cloud-zen.net/
Resources
Readme
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
CloudZen
A modern Blazor WebAssembly portfolio and consulting showcase built with .NET 8, demonstrating expertise in building scalable, secure cloud applications with Azure integration.
🚀 Features
Portfolio & Presentation
  • Dynamic Project Showcase - Interactive case studies with filtering by technology, status, and project type
  • Professional Portfolio Page - Comprehensive "Who I Am" section with profile header, approach, and highlighted achievements
  • Animated UI Components - Counter circles with gradient fills and smooth animations for metrics display
  • Responsive Design - Mobile-first approach with Tailwind CSS, optimized for all screen sizes
  • Interactive SDLC Process - Visual representation of Planning, Automation, and Deployment phases
Business Features
  • Contact Form - Validated contact form with email integration via Brevo/SendGrid/SMTP providers
  • AI Chatbot - Embedded conversational assistant powered by Anthropic Claude, with knowledge base, lead conversion, and abuse protection (see AI_CHATBOT_DOCUMENTATION.md)
  • Resume Download - Secure resume delivery from Azure Blob Storage with SAS token authentication
  • Service Offerings Display - Dynamic service cards showcasing consulting capabilities
  • Testimonials Section - Client feedback display (currently disabled, ready for activation)
  • Call-to-Action Components - Strategic CTAs throughout the site for lead generation
Technical Features
  • Progressive Web App (PWA) - Service worker enabled for offline capability and fast loading
  • Component-Based Architecture - Reusable Blazor components with clear separation of concerns
  • Secure API Backend - Email and AI chatbot operations routed through Azure Functions API with rate limiting, input validation, and token controls
  • Centralized Data Management - Service layer pattern with ProjectService and PersonalService
  • Type-Safe Event Handling - EventCallback pattern for parent-child component communication
  • Google Calendar Integration - URL service for scheduling consultation bookings
  • Ticket Management System - Dashboard for tracking support incidents (demo implementation)
Cloud & DevOps
  • Azure Static Web Apps - Automated deployment with GitHub Actions workflow
  • Azure Blob Storage - Cloud file storage with CORS configuration for cross-origin access
  • Azure Key Vault Integration - Secrets management via Azure Functions backend with DefaultAzureCredential
  • CI/CD Pipeline - Automated build, test, and deployment on push to master (Static Web Apps + Azure Functions)
  • Service Worker - Automatic caching and offline support for enhanced performance
🛠️ Tech Stack
Frontend Technologies
  • Blazor WebAssembly (.NET 8) - Modern SPA framework with C# instead of JavaScript
  • C# 12 - Latest language features with nullable reference types enabled
  • Tailwind CSS - Utility-first CSS framework for rapid UI development
  • Bootstrap Icons - Comprehensive icon library for UI elements
  • HTML5 & CSS3 - Semantic markup and modern styling capabilities
Cloud Infrastructure (Azure)
  • Azure Static Web Apps - Serverless hosting with global CDN distribution
  • Azure Blob Storage - Scalable object storage for resumes and file assets
  • Azure Key Vault - Centralized secrets management accessed via Functions with DefaultAzureCredential
  • Azure Functions (Isolated Worker, .NET 8) - Serverless backend for secure email API and AI chatbot proxy
  • Azure Table Storage - NoSQL storage for ticket/incident data
  • Azure Application Insights - Real-time monitoring and telemetry with adaptive sampling
External APIs
  • Anthropic Claude API (claude-sonnet-4-20250514) - AI chatbot backend with server-side knowledge base and system prompt
Backend Services & APIs
  • Brevo SMTP Relay - Transactional email delivery via MailKit/MimeKit through Azure Functions API
  • MailKit / MimeKit (v4.15.0) - Cross-platform .NET SMTP client for secure email delivery
  • Polly (v8.6.5) - Resilience and transient fault handling (rate limiting, circuit breaker)
  • Azure Storage SDK - Client libraries for Blob, Queue, File Share, and Table operations

    • Azure.Storage.Blobs (v12.24.0)
    • Azure.Storage.Queues (v12.22.0)
    • Azure.Storage.Files.Shares (v12.22.0)
    • Azure.Data.Tables (v12.10.0)
Authentication & Security
  • Azure Identity - Managed Identity and credential management (v1.13.2 client, v1.18.0 API)
  • Azure Key Vault Configuration - Secure runtime configuration loading via AddAzureKeyVault() in Functions API
  • SAS Tokens - Secure, time-limited access to blob storage resources
  • CORS Configuration - Cross-origin resource sharing with configurable allowed origins in Azure Functions
  • Content Security Policy - HTTP headers for XSS protection configured in staticwebapp.config.json
  • Input Validation & Sanitization - InputValidator with XSS pattern detection in Azure Functions API
  • Rate Limiting - Per-client fixed window rate limiting with Polly in Azure Functions API
Development & Build Tools
  • .NET 8 SDK - Latest LTS version with performance improvements
  • Microsoft.Extensions.Azure (v1.11.0) - Azure SDK client factory extensions
  • User Secrets - Local development secrets management (not deployed)
  • Service Worker - PWA capabilities with offline caching
Tailwind CSS Setup & Architecture
How Tailwind is Set Up
This project uses Tailwind CSS via CDN (zero-configuration approach) loaded in wwwroot/index.html:
<scriptsrc="https://cdn.tailwindcss.com"></script>
What this means:
  • ✅ Zero build complexity - No npm, webpack, PostCSS, or Node.js dependencies required
  • ✅ Instant availability - All Tailwind utility classes work out of the box
  • ✅ Blazor-native - Integrates seamlessly with Blazor WebAssembly static file serving
  • ✅ Fast prototyping - Full Tailwind feature set available immediately
  • ⚠️Larger bundle - ~3.5MB uncompressed CSS (not optimized via PurgeCSS)
  • ⚠️No theme extension - Cannot customize default Tailwind theme without inline config
Usage Pattern: Hybrid Approach
The application combines Tailwind utility classes (primary styling) with custom CSS (wwwroot/css/app.css) for:
  • Blazor-specific styles (#blazor-error-ui, .loading-progress)
  • Custom animations (.hamburger-active, .scroll-to-top)
  • Brand-specific classes (.cloudzen-hover, .progress-bar-fill)
  • Bootstrap compatibility (legacy .btn-primary, form controls)
Tailwind Coverage: 100% of Razor components use Tailwind utilities extensively.
Architecture Decision: Why CDN Instead of npm/Config?
Advantages of CDN approach:
  • Simplicity - Pure .NET 8 project with no JavaScript toolchain
  • Developer experience - No build step delays during development
  • Deployment - Single dotnet publish command with no additional bundling
  • Maintenance - No package.json, node_modules, or npm version conflicts
Trade-offs:
  • Performance - Unoptimized CSS bundle (~3.5MB minified to ~300KB in production)
  • Customization - Limited theme extensions without inline configuration
  • Production optimization - No automatic unused class removal
Recommendations
Option 1: Keep CDN (Current Approach) ✅
Best for: Small-to-medium projects, rapid development, zero build complexity
To optimize current setup:
  1. Add custom theme colors via inline Tailwind config in index.html:
<script>tailwind.config={theme: {extend: {colors: {'cloudzen-teal': '#61C2C8','cloudzen-teal-hover': '#74b7bb',}}}}</script>
  1. Use CSS custom properties for brand consistency (already implemented):
/* app.css */:root {
--cloudzen-primary:#61C2C8;
}
Option 2: Migrate to npm + tailwind.config.js
Best for: Production apps, performance optimization, advanced customization
Benefits:
  • 📦 90% smaller CSS - PurgeCSS removes unused classes (reduces to ~10-30KB)
  • 🎨 Full theme control - Custom colors, fonts, spacing, breakpoints
  • ⚡ JIT mode - Only generate classes you actually use
  • 🔧 Plugins - Access official Tailwind plugins (forms, typography, aspect-ratio)
Migration steps (future enhancement):
# Install Tailwind
npm install -D tailwindcss postcss autoprefixer
# Create config
npx tailwindcss init
# Update tailwind.config.js
module.exports = {
content: ["./**/*.razor", "./**/*.html"],
theme: {
extend: {
colors: {
'cloudzen-teal': '#61C2C8',
}
}
}
}
# Build CSS
npx tailwindcss -i ./wwwroot/css/app.css -o ./wwwroot/css/output.css --minify
Current recommendation: Keep CDN approach for now. The application's current bundle size is acceptable for a portfolio site, and the development simplicity outweighs the performance gains from npm-based setup. Consider migrating when adding significant new features or optimizing for production performance.
Design Patterns & Principles Implemented
SOLID Principles
  • Single Responsibility Principle (SRP)
    •  Each service has one reason to change (ProjectService, ResumeService, EmailServiceFactory)
    •  Components have single, well-defined purposes (ProfileHeader, ProjectCard)
    •  Models represent single entities (ProjectInfo, ServiceInfo, TicketDto)
  • Open/Closed Principle (OCP)
    • IEmailService interface allows alternative email implementations without modifying existing code
    •  Azure Functions API extensible via configuration for different SMTP providers
    •  Component system supports adding features through composition, not modification
  • Liskov Substitution Principle (LSP)
    • IEmailService implementations are interchangeable (e.g., ApiEmailService could be swapped for a direct provider)
    • ITicketService implementations are interchangeable
  • Interface Segregation Principle (ISP)
    •  Focused interfaces (IEmailService, ITicketService, IRateLimiterService) with only necessary methods
    •  No client forced to depend on methods it doesn't use
  • Dependency Inversion Principle (DIP)
    •  High-level components depend on abstractions (IEmailService, ITicketService, IRateLimiterService), not concrete implementations
    •  DI container manages all dependencies via Program.cs registration in both client and API projects
    •  Services injected into components via @inject directive
Design Patterns
  • API Gateway Pattern - Blazor WASM delegates sensitive operations to Azure Functions API (ApiEmailService → SendEmailFunction)
  • Options Pattern - Strongly-typed configuration with IOptions<T> (EmailServiceOptions, BlobStorageOptions, EmailSettings, RateLimitOptions)
  • Service Layer Pattern - Business logic separation (ProjectService, PersonalService, ResumeService, TicketService, ApiEmailService)
  • Repository Pattern - Data access abstraction for projects and services with centralized data management
  • Event Callback Pattern - Type-safe parent-child component communication in Blazor
  • Singleton Pattern - Long-lived services (GoogleCalendarUrlService, TicketService, PollyRateLimiterService) registered as singletons
  • Record Pattern - Immutable data transfer objects (ServiceInfo record type)
  • Resilience Pattern - Polly-based rate limiting and circuit breaker in Azure Functions API
Advanced Techniques
  • Async/Await Pattern - Non-blocking operations throughout (SendEmailAsync, DownloadResumeAsync)
  • Managed Identity Authentication - Azure Identity with DefaultAzureCredential for passwordless Azure service access
  • Configuration Abstraction - IConfiguration and IOptions<T> for environment-specific settings across both projects
  • Logging Integration - ILogger<T> for structured logging in services and Azure Functions
  • Error Handling - InvalidOperationException for missing configuration validation
  • Null Safety - Nullable reference types enabled project-wide (string?, IEnumerable?)
  • LINQ Query Composition - Efficient data filtering and sorting in ProjectService
  • JavaScript Interop - Blazor-JS communication for file downloads and animations
  • Input Sanitization - InputValidator with regex-based XSS pattern detection and HTML encoding
  • Correlation ID Tracking - Request tracing across Azure Functions for debugging and monitoring
DevOps & CI/CD
  • GitHub Actions - Automated CI/CD workflows (Static Web Apps + Azure Functions deployment)
  • Azure Static Web Apps CLI - Local development and testing
  • Docker - Container support for reproducible builds (optional)
  • Git - Version control with branch-based deployment strategies
Monitoring & Analytics
  • Application Insights - Performance monitoring with adaptive sampling and QuickPulse metrics in Azure Functions API
  • Azure Monitor - Infrastructure and application health monitoring
  • Logging Framework - ILogger<T> integration throughout services with structured logging
  • Custom telemetry - Track user interactions, feature usage, and performance bottlenecks
Resilience & Error Handling
  • Retry Logic - Implemented in distributed systems projects (RabbitMQ, Azure Functions)
  • Connection Resiliency - Auto-reconnect for messaging systems and database connections
  • Circuit Breaker - Polly-based circuit breaker in Azure Functions API rate limiter service
  • Health Checks - Continuous monitoring of dependent services (databases, message queues, APIs)
  • Graceful Degradation - Application continues functioning when non-critical services fail
  • Exception Handling - Structured error handling with specific exception types
  • Configuration Validation - Throws InvalidOperationException for missing critical settings
  • Timeout Management - Configurable timeouts for HTTP clients (30s default) in Azure Functions API
  • Idempotency - Ensures operations can be safely retried without side effects
  • Polly Integration - Rate limiting (FixedWindowRateLimiter) and circuit breaker via Polly resilience pipelines in API
  • Async-safe Patterns - All async operations properly handle cancellation and exceptions
📚 Documentation
This project includes comprehensive documentation to help you understand the architecture, deploy to Azure, and maintain security:
⚡ Quick Start
# Clone the repository
git clone https://github.com/dariemcarlosdev/CloudZen.git
# Navigate to projectcd CloudZen
# Restore dependencies
dotnet restore
# Run Blazor WASM client
dotnet run --project CloudZen.csproj
# Run Azure Functions API (separate terminal, requires Azure Functions Core Tools)cd Api
func start
🔐 Security First
Important: Blazor WebAssembly runs entirely in the browser. Never store secrets in appsettings.json. Use Azure Functions backend with Key Vault for secure operations. See SECURITY_ALERT.md for details.
🏗️ Architecture
Blazor WASM (Client) ──→ Azure Functions API (Backend) ──→ Brevo SMTP Relay
(CloudZen) (CloudZen.Api) (Email Delivery)
│ │
│ ├──→ Azure Key Vault (Secrets)
│ ├──→ Application Insights (Telemetry)
│ └──→ Anthropic Claude API (AI Chatbot)
│
└──→ Azure Blob Storage (Resume/Files)

See COMPONENT_ARCHITECTURE.md for detailed component breakdown and data flow.
📦 Project Structure
CloudZen/
├── Api/ # Azure Functions API backend (CloudZen.Api)
│ ├── Functions/ # Azure Function endpoints
│ │ ├── SendEmailFunction.cs # Email proxy to Brevo SMTP
│ │ └── ChatFunction.cs # AI chatbot proxy to Anthropic Claude
│ ├── Models/ # API models (EmailRequest, ChatRequest, ChatResponse, RateLimitOptions)
│ ├── Security/ # Input validation and sanitization (InputValidator)
│ ├── Services/ # API services (PollyRateLimiterService)
│ └── Program.cs # Functions host entry point
├── Layout/ # Layout components (MainLayout, Header, Footer)
├── Models/ # Data models (ProjectInfo, ServiceInfo, EmailApiRequest)
│ └── Options/ # IOptions configuration classes
├── Pages/ # Routable pages (Index)
├── Services/ # Business logic (ProjectService, ApiEmailService, ResumeService)
│ └── Abstractions/ # Service interfaces (IEmailService, ITicketService)
├── Shared/ # Reusable Blazor components
│ ├── Chatbot/ # AI chatbot widget (CloudZenChatbot)
│ ├── Common/ # Shared UI (AnimatedCounterCircle, ScrollToTopButton, Tickets)
│ ├── Landing/ # Landing page sections (Hero, Services, CaseStudies, ContactForm, CTA)
│ ├── Profile/ # Profile components (ProfileHeader, ProfileApproach, SDLCProcess, WhoIAm)
│ └── Projects/ # Project display (ProjectCard, ProjectFilter)
├── wwwroot/ # Static assets, configuration, and index.html
├── .github/workflows/ # CI/CD (azure-functions.yml)
└── Program.cs # Blazor WASM entry point

🚀 Deployment
Ready to deploy? Follow these steps:
  1. Read SECURITY_ALERT.md - Critical security information
  2. Follow DEPLOYMENT_GUIDE.md - Complete setup instructions
  3. Follow AZURE_FUNCTION_DEPLOYMENT.md - Deploy the API backend
  4. Use DEPLOYMENT_CHECKLIST.md - Track your progress
GitHub Actions workflows automatically deploy:
  • Blazor WASM → Azure Static Web Apps (on push to master)
  • Azure Functions API → Azure Function App (on push to master when Api/ changes)
📊 Project Highlights
Architecture & Design Excellence
  • 90% code reduction in WhoIAm page through strategic component decomposition
  • 20+ reusable Blazor components with single responsibility principle

    •  Profile components: ProfileHeader, ProfileApproach, ProfileHighlights, SDLCProcess, WhoIAm
    •  Project components: ProjectCard, ProjectFilter
    •  Landing components: Hero, Services, CaseStudies, ContactForm, CTA, Mission, Testimonials, ValueProposition
    •  Layout components: MainLayout, Header, Footer
    •  Common components: AnimatedCounterCircle, ScrollToTopButton, Tickets
  • Component-based architecture enabling 85% code reusability across pages
  • Centralized business logic with dedicated service layer

    • ProjectService - Portfolio project management and filtering
    • PersonalService - Service offerings and company information
    • ResumeService - Azure Blob integration for document delivery
    • ApiEmailService - Secure email via Azure Functions API backend
    • TicketService - Support incident tracking
    • GoogleCalendarUrlService - Booking integration
Cloud-Native Implementation
  • Serverless architecture with Azure Static Web Apps + Azure Functions (Isolated Worker)
  • Automated deployments via GitHub Actions CI/CD (separate workflows for WASM and Functions)
  • Global CDN distribution for sub-100ms page loads worldwide
  • Auto-scaling infrastructure handling traffic spikes without manual intervention
  • Secure secrets management with Azure Key Vault integration in Azure Functions API
  • CORS-enabled Azure Functions API with configurable allowed origins
  • PWA capabilities with service worker for offline functionality
User Experience & Performance
  • Type-safe filtering with EventCallback pattern for real-time project filtering
  • Animated UI elements including gradient counters and smooth transitions
  • Mobile-first responsive design - Optimized for 320px to 4K displays
  • Accessibility compliance with semantic HTML and ARIA labels
  • Fast page loads - Service worker caching reduces repeat visit load time by 70%
  • Interactive process visualization - SDLC workflow with state management
Security & Best Practices
  • API-first security - Sensitive operations (email, secrets) handled by Azure Functions backend, never in client
  • SOLID principles applied across all services and components for maintainability
  • Dependency injection throughout the application for testability and loose coupling
  • Interface-driven design (IEmailService, ITicketService, IRateLimiterService) for flexibility and testing
  • Nullable reference types enabled project-wide reducing null reference exceptions by 40%
  • Environment-based configuration separating development, staging, and production settings
  • SAS token authentication for secure, time-limited public blob access
  • CSP headers and security-first static web app configuration preventing XSS attacks
  • API key rotation support with zero-downtime provider switching via configuration
  • Validation at boundaries - Input validation in contact form and API (InputValidator with XSS pattern detection)
  • Encapsulation - Private fields with public property accessors (e.g., ResumeService.ResumeBlobUrl)
  • Immutable data models using C# records for thread-safe data transfer (ServiceInfo)
  • Async-first design - All I/O operations use async/await for scalability
  • Resilience patterns - Polly-based rate limiting and circuit breaker in Azure Functions API
  • Configuration validation - Exception throwing for missing critical configuration values
Business Value Delivered
  • Professional portfolio showcasing 8+ real-world projects with measurable results
  • Lead generation via strategic CTAs, validated contact form, and AI chatbot with 5-question conversation cap
  • AI-powered chatbot converting website visitors to consultation leads with knowledge-base-driven responses
  • Automated email delivery with Brevo SMTP relay via secure Azure Functions API backend
  • Resume distribution with download tracking and blob analytics
  • Client onboarding streamlined with Google Calendar integration
  • Support dashboard for incident tracking and response time monitoring
Development Quality
  • Clean Architecture principles with clear layer separation
  • SOLID principles applied to service implementations
  • Comprehensive documentation with inline XML comments and README guides
  • Git workflow with feature branches and protected master
  • Code organization following ASP.NET Core conventions
  • Scalable structure ready for feature expansion (testimonials, blog, admin panel)
Technical Innovations
  • Dynamic case study selection - Automatically surfaces top 3 customer projects with LINQ filtering
  • Business-friendly jargon translation - Converts technical terms for non-technical audiences in real-time
  • Gradient color interpolation - Mathematical color transitions for animated counters using RGB calculations
  • Event-driven architecture - Loose coupling between UI and business logic via EventCallback pattern
  • Secure email pipeline - Client → Azure Functions API → Brevo SMTP relay with rate limiting and input validation
  • AI chatbot pipeline - Blazor WASM → Azure Functions → Anthropic Claude API with token controls, history trimming, and response truncation
  • Multi-layer abuse prevention - Client-side conversation cap + API rate limiting + input validation + system prompt hardening
  • SPA with SEO optimization - Static Web Apps routing and fallback for search engine visibility (staticwebapp.config.json)
  • Retry mechanisms - Implemented in side projects (RabbitMQ connection resiliency, SSIS retry logic)
  • Circuit breaker patterns - Polly-based circuit breaker in Azure Functions rate limiter service
  • Health monitoring - Integrated health checks for distributed systems (RabbitMQ, Azure Functions)
  • Idempotent message processing - Duplicate prevention in event-driven systems
  • Rate limiting - Per-client fixed window rate limiting with Polly in Azure Functions API
  • CQRS pattern - Command-Query Responsibility Segregation with MediatR in microservices
  • Caching strategies - In-memory and distributed caching for performance optimization
  • Delta-based ETL processing - 70% runtime reduction through intelligent data extraction
  • Managed Identity preference - DefaultAzureCredential for passwordless Azure service access
📄 License
This project is licensed under the MIT License. See the LICENSE file for details.
👤 Author
Dariem C. Macias

Principal Consultant, CloudZen Inc.
LinkedIn | GitHub
About
modern Blazor WebAssembly project for CloudZen Inc., showcasing expertise in .NET 8, Azure Cloud, DevOps, AI-driven automation, and enterprise application modernization. Features scalable architecture, CI/CD integration, and a professional portfolio for Dariem C. Macias.
www.cloud-zen.net/
Resources
Readme
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
CloudZen
A modern Blazor WebAssembly portfolio and consulting showcase built with .NET 8, demonstrating expertise in building scalable, secure cloud applications with Azure integration.
🚀 Features
Portfolio & Presentation
  • Dynamic Project Showcase - Interactive case studies with filtering by technology, status, and project type
  • Professional Portfolio Page - Comprehensive "Who I Am" section with profile header, approach, and highlighted achievements
  • Animated UI Components - Counter circles with gradient fills and smooth animations for metrics display
  • Responsive Design - Mobile-first approach with Tailwind CSS, optimized for all screen sizes
  • Interactive SDLC Process - Visual representation of Planning, Automation, and Deployment phases
Business Features
  • Contact Form - Validated contact form with email integration via Brevo/SendGrid/SMTP providers
  • AI Chatbot - Embedded conversational assistant powered by Anthropic Claude, with knowledge base, lead conversion, and abuse protection (see AI_CHATBOT_DOCUMENTATION.md)
  • Resume Download - Secure resume delivery from Azure Blob Storage with SAS token authentication
  • Service Offerings Display - Dynamic service cards showcasing consulting capabilities
  • Testimonials Section - Client feedback display (currently disabled, ready for activation)
  • Call-to-Action Components - Strategic CTAs throughout the site for lead generation
Technical Features
  • Progressive Web App (PWA) - Service worker enabled for offline capability and fast loading
  • Component-Based Architecture - Reusable Blazor components with clear separation of concerns
  • Secure API Backend - Email and AI chatbot operations routed through Azure Functions API with rate limiting, input validation, and token controls
  • Centralized Data Management - Service layer pattern with ProjectService and PersonalService
  • Type-Safe Event Handling - EventCallback pattern for parent-child component communication
  • Google Calendar Integration - URL service for scheduling consultation bookings
  • Ticket Management System - Dashboard for tracking support incidents (demo implementation)
Cloud & DevOps
  • Azure Static Web Apps - Automated deployment with GitHub Actions workflow
  • Azure Blob Storage - Cloud file storage with CORS configuration for cross-origin access
  • Azure Key Vault Integration - Secrets management via Azure Functions backend with DefaultAzureCredential
  • CI/CD Pipeline - Automated build, test, and deployment on push to master (Static Web Apps + Azure Functions)
  • Service Worker - Automatic caching and offline support for enhanced performance
🛠️ Tech Stack
Frontend Technologies
  • Blazor WebAssembly (.NET 8) - Modern SPA framework with C# instead of JavaScript
  • C# 12 - Latest language features with nullable reference types enabled
  • Tailwind CSS - Utility-first CSS framework for rapid UI development
  • Bootstrap Icons - Comprehensive icon library for UI elements
  • HTML5 & CSS3 - Semantic markup and modern styling capabilities
Cloud Infrastructure (Azure)
  • Azure Static Web Apps - Serverless hosting with global CDN distribution
  • Azure Blob Storage - Scalable object storage for resumes and file assets
  • Azure Key Vault - Centralized secrets management accessed via Functions with DefaultAzureCredential
  • Azure Functions (Isolated Worker, .NET 8) - Serverless backend for secure email API and AI chatbot proxy
  • Azure Table Storage - NoSQL storage for ticket/incident data
  • Azure Application Insights - Real-time monitoring and telemetry with adaptive sampling
External APIs
  • Anthropic Claude API (claude-sonnet-4-20250514) - AI chatbot backend with server-side knowledge base and system prompt
Backend Services & APIs
  • Brevo SMTP Relay - Transactional email delivery via MailKit/MimeKit through Azure Functions API
  • MailKit / MimeKit (v4.15.0) - Cross-platform .NET SMTP client for secure email delivery
  • Polly (v8.6.5) - Resilience and transient fault handling (rate limiting, circuit breaker)
  • Azure Storage SDK - Client libraries for Blob, Queue, File Share, and Table operations

    • Azure.Storage.Blobs (v12.24.0)
    • Azure.Storage.Queues (v12.22.0)
    • Azure.Storage.Files.Shares (v12.22.0)
    • Azure.Data.Tables (v12.10.0)
Authentication & Security
  • Azure Identity - Managed Identity and credential management (v1.13.2 client, v1.18.0 API)
  • Azure Key Vault Configuration - Secure runtime configuration loading via AddAzureKeyVault() in Functions API
  • SAS Tokens - Secure, time-limited access to blob storage resources
  • CORS Configuration - Cross-origin resource sharing with configurable allowed origins in Azure Functions
  • Content Security Policy - HTTP headers for XSS protection configured in staticwebapp.config.json
  • Input Validation & Sanitization - InputValidator with XSS pattern detection in Azure Functions API
  • Rate Limiting - Per-client fixed window rate limiting with Polly in Azure Functions API
Development & Build Tools
  • .NET 8 SDK - Latest LTS version with performance improvements
  • Microsoft.Extensions.Azure (v1.11.0) - Azure SDK client factory extensions
  • User Secrets - Local development secrets management (not deployed)
  • Service Worker - PWA capabilities with offline caching
Tailwind CSS Setup & Architecture
How Tailwind is Set Up
This project uses Tailwind CSS via CDN (zero-configuration approach) loaded in wwwroot/index.html:
<scriptsrc="https://cdn.tailwindcss.com"></script>
What this means:
  • ✅ Zero build complexity - No npm, webpack, PostCSS, or Node.js dependencies required
  • ✅ Instant availability - All Tailwind utility classes work out of the box
  • ✅ Blazor-native - Integrates seamlessly with Blazor WebAssembly static file serving
  • ✅ Fast prototyping - Full Tailwind feature set available immediately
  • ⚠️Larger bundle - ~3.5MB uncompressed CSS (not optimized via PurgeCSS)
  • ⚠️No theme extension - Cannot customize default Tailwind theme without inline config
Usage Pattern: Hybrid Approach
The application combines Tailwind utility classes (primary styling) with custom CSS (wwwroot/css/app.css) for:
  • Blazor-specific styles (#blazor-error-ui, .loading-progress)
  • Custom animations (.hamburger-active, .scroll-to-top)
  • Brand-specific classes (.cloudzen-hover, .progress-bar-fill)
  • Bootstrap compatibility (legacy .btn-primary, form controls)
Tailwind Coverage: 100% of Razor components use Tailwind utilities extensively.
Architecture Decision: Why CDN Instead of npm/Config?
Advantages of CDN approach:
  • Simplicity - Pure .NET 8 project with no JavaScript toolchain
  • Developer experience - No build step delays during development
  • Deployment - Single dotnet publish command with no additional bundling
  • Maintenance - No package.json, node_modules, or npm version conflicts
Trade-offs:
  • Performance - Unoptimized CSS bundle (~3.5MB minified to ~300KB in production)
  • Customization - Limited theme extensions without inline configuration
  • Production optimization - No automatic unused class removal
Recommendations
Option 1: Keep CDN (Current Approach) ✅
Best for: Small-to-medium projects, rapid development, zero build complexity
To optimize current setup:
  1. Add custom theme colors via inline Tailwind config in index.html:
<script>tailwind.config={theme: {extend: {colors: {'cloudzen-teal': '#61C2C8','cloudzen-teal-hover': '#74b7bb',}}}}</script>
  1. Use CSS custom properties for brand consistency (already implemented):
/* app.css */:root {
--cloudzen-primary:#61C2C8;
}
Option 2: Migrate to npm + tailwind.config.js
Best for: Production apps, performance optimization, advanced customization
Benefits:
  • 📦 90% smaller CSS - PurgeCSS removes unused classes (reduces to ~10-30KB)
  • 🎨 Full theme control - Custom colors, fonts, spacing, breakpoints
  • ⚡ JIT mode - Only generate classes you actually use
  • 🔧 Plugins - Access official Tailwind plugins (forms, typography, aspect-ratio)
Migration steps (future enhancement):
# Install Tailwind
npm install -D tailwindcss postcss autoprefixer
# Create config
npx tailwindcss init
# Update tailwind.config.js
module.exports = {
content: ["./**/*.razor", "./**/*.html"],
theme: {
extend: {
colors: {
'cloudzen-teal': '#61C2C8',
}
}
}
}
# Build CSS
npx tailwindcss -i ./wwwroot/css/app.css -o ./wwwroot/css/output.css --minify
Current recommendation: Keep CDN approach for now. The application's current bundle size is acceptable for a portfolio site, and the development simplicity outweighs the performance gains from npm-based setup. Consider migrating when adding significant new features or optimizing for production performance.
Design Patterns & Principles Implemented
SOLID Principles
  • Single Responsibility Principle (SRP)
    •  Each service has one reason to change (ProjectService, ResumeService, EmailServiceFactory)
    •  Components have single, well-defined purposes (ProfileHeader, ProjectCard)
    •  Models represent single entities (ProjectInfo, ServiceInfo, TicketDto)
  • Open/Closed Principle (OCP)
    • IEmailService interface allows alternative email implementations without modifying existing code
    •  Azure Functions API extensible via configuration for different SMTP providers
    •  Component system supports adding features through composition, not modification
  • Liskov Substitution Principle (LSP)
    • IEmailService implementations are interchangeable (e.g., ApiEmailService could be swapped for a direct provider)
    • ITicketService implementations are interchangeable
  • Interface Segregation Principle (ISP)
    •  Focused interfaces (IEmailService, ITicketService, IRateLimiterService) with only necessary methods
    •  No client forced to depend on methods it doesn't use
  • Dependency Inversion Principle (DIP)
    •  High-level components depend on abstractions (IEmailService, ITicketService, IRateLimiterService), not concrete implementations
    •  DI container manages all dependencies via Program.cs registration in both client and API projects
    •  Services injected into components via @inject directive
Design Patterns
  • API Gateway Pattern - Blazor WASM delegates sensitive operations to Azure Functions API (ApiEmailService → SendEmailFunction)
  • Options Pattern - Strongly-typed configuration with IOptions<T> (EmailServiceOptions, BlobStorageOptions, EmailSettings, RateLimitOptions)
  • Service Layer Pattern - Business logic separation (ProjectService, PersonalService, ResumeService, TicketService, ApiEmailService)
  • Repository Pattern - Data access abstraction for projects and services with centralized data management
  • Event Callback Pattern - Type-safe parent-child component communication in Blazor
  • Singleton Pattern - Long-lived services (GoogleCalendarUrlService, TicketService, PollyRateLimiterService) registered as singletons
  • Record Pattern - Immutable data transfer objects (ServiceInfo record type)
  • Resilience Pattern - Polly-based rate limiting and circuit breaker in Azure Functions API
Advanced Techniques
  • Async/Await Pattern - Non-blocking operations throughout (SendEmailAsync, DownloadResumeAsync)
  • Managed Identity Authentication - Azure Identity with DefaultAzureCredential for passwordless Azure service access
  • Configuration Abstraction - IConfiguration and IOptions<T> for environment-specific settings across both projects
  • Logging Integration - ILogger<T> for structured logging in services and Azure Functions
  • Error Handling - InvalidOperationException for missing configuration validation
  • Null Safety - Nullable reference types enabled project-wide (string?, IEnumerable?)
  • LINQ Query Composition - Efficient data filtering and sorting in ProjectService
  • JavaScript Interop - Blazor-JS communication for file downloads and animations
  • Input Sanitization - InputValidator with regex-based XSS pattern detection and HTML encoding
  • Correlation ID Tracking - Request tracing across Azure Functions for debugging and monitoring
DevOps & CI/CD
  • GitHub Actions - Automated CI/CD workflows (Static Web Apps + Azure Functions deployment)
  • Azure Static Web Apps CLI - Local development and testing
  • Docker - Container support for reproducible builds (optional)
  • Git - Version control with branch-based deployment strategies
Monitoring & Analytics
  • Application Insights - Performance monitoring with adaptive sampling and QuickPulse metrics in Azure Functions API
  • Azure Monitor - Infrastructure and application health monitoring
  • Logging Framework - ILogger<T> integration throughout services with structured logging
  • Custom telemetry - Track user interactions, feature usage, and performance bottlenecks
Resilience & Error Handling
  • Retry Logic - Implemented in distributed systems projects (RabbitMQ, Azure Functions)
  • Connection Resiliency - Auto-reconnect for messaging systems and database connections
  • Circuit Breaker - Polly-based circuit breaker in Azure Functions API rate limiter service
  • Health Checks - Continuous monitoring of dependent services (databases, message queues, APIs)
  • Graceful Degradation - Application continues functioning when non-critical services fail
  • Exception Handling - Structured error handling with specific exception types
  • Configuration Validation - Throws InvalidOperationException for missing critical settings
  • Timeout Management - Configurable timeouts for HTTP clients (30s default) in Azure Functions API
  • Idempotency - Ensures operations can be safely retried without side effects
  • Polly Integration - Rate limiting (FixedWindowRateLimiter) and circuit breaker via Polly resilience pipelines in API
  • Async-safe Patterns - All async operations properly handle cancellation and exceptions
📚 Documentation
This project includes comprehensive documentation to help you understand the architecture, deploy to Azure, and maintain security:
⚡ Quick Start
# Clone the repository
git clone https://github.com/dariemcarlosdev/CloudZen.git
# Navigate to projectcd CloudZen
# Restore dependencies
dotnet restore
# Run Blazor WASM client
dotnet run --project CloudZen.csproj
# Run Azure Functions API (separate terminal, requires Azure Functions Core Tools)cd Api
func start
🔐 Security First
Important: Blazor WebAssembly runs entirely in the browser. Never store secrets in appsettings.json. Use Azure Functions backend with Key Vault for secure operations. See SECURITY_ALERT.md for details.
🏗️ Architecture
Blazor WASM (Client) ──→ Azure Functions API (Backend) ──→ Brevo SMTP Relay
(CloudZen) (CloudZen.Api) (Email Delivery)
│ │
│ ├──→ Azure Key Vault (Secrets)
│ ├──→ Application Insights (Telemetry)
│ └──→ Anthropic Claude API (AI Chatbot)
│
└──→ Azure Blob Storage (Resume/Files)

See COMPONENT_ARCHITECTURE.md for detailed component breakdown and data flow.
📦 Project Structure
CloudZen/
├── Api/ # Azure Functions API backend (CloudZen.Api)
│ ├── Functions/ # Azure Function endpoints
│ │ ├── SendEmailFunction.cs # Email proxy to Brevo SMTP
│ │ └── ChatFunction.cs # AI chatbot proxy to Anthropic Claude
│ ├── Models/ # API models (EmailRequest, ChatRequest, ChatResponse, RateLimitOptions)
│ ├── Security/ # Input validation and sanitization (InputValidator)
│ ├── Services/ # API services (PollyRateLimiterService)
│ └── Program.cs # Functions host entry point
├── Layout/ # Layout components (MainLayout, Header, Footer)
├── Models/ # Data models (ProjectInfo, ServiceInfo, EmailApiRequest)
│ └── Options/ # IOptions configuration classes
├── Pages/ # Routable pages (Index)
├── Services/ # Business logic (ProjectService, ApiEmailService, ResumeService)
│ └── Abstractions/ # Service interfaces (IEmailService, ITicketService)
├── Shared/ # Reusable Blazor components
│ ├── Chatbot/ # AI chatbot widget (CloudZenChatbot)
│ ├── Common/ # Shared UI (AnimatedCounterCircle, ScrollToTopButton, Tickets)
│ ├── Landing/ # Landing page sections (Hero, Services, CaseStudies, ContactForm, CTA)
│ ├── Profile/ # Profile components (ProfileHeader, ProfileApproach, SDLCProcess, WhoIAm)
│ └── Projects/ # Project display (ProjectCard, ProjectFilter)
├── wwwroot/ # Static assets, configuration, and index.html
├── .github/workflows/ # CI/CD (azure-functions.yml)
└── Program.cs # Blazor WASM entry point

🚀 Deployment
Ready to deploy? Follow these steps:
  1. Read SECURITY_ALERT.md - Critical security information
  2. Follow DEPLOYMENT_GUIDE.md - Complete setup instructions
  3. Follow AZURE_FUNCTION_DEPLOYMENT.md - Deploy the API backend
  4. Use DEPLOYMENT_CHECKLIST.md - Track your progress
GitHub Actions workflows automatically deploy:
  • Blazor WASM → Azure Static Web Apps (on push to master)
  • Azure Functions API → Azure Function App (on push to master when Api/ changes)
📊 Project Highlights
Architecture & Design Excellence
  • 90% code reduction in WhoIAm page through strategic component decomposition
  • 20+ reusable Blazor components with single responsibility principle

    •  Profile components: ProfileHeader, ProfileApproach, ProfileHighlights, SDLCProcess, WhoIAm
    •  Project components: ProjectCard, ProjectFilter
    •  Landing components: Hero, Services, CaseStudies, ContactForm, CTA, Mission, Testimonials, ValueProposition
    •  Layout components: MainLayout, Header, Footer
    •  Common components: AnimatedCounterCircle, ScrollToTopButton, Tickets
  • Component-based architecture enabling 85% code reusability across pages
  • Centralized business logic with dedicated service layer

    • ProjectService - Portfolio project management and filtering
    • PersonalService - Service offerings and company information
    • ResumeService - Azure Blob integration for document delivery
    • ApiEmailService - Secure email via Azure Functions API backend
    • TicketService - Support incident tracking
    • GoogleCalendarUrlService - Booking integration
Cloud-Native Implementation
  • Serverless architecture with Azure Static Web Apps + Azure Functions (Isolated Worker)
  • Automated deployments via GitHub Actions CI/CD (separate workflows for WASM and Functions)
  • Global CDN distribution for sub-100ms page loads worldwide
  • Auto-scaling infrastructure handling traffic spikes without manual intervention
  • Secure secrets management with Azure Key Vault integration in Azure Functions API
  • CORS-enabled Azure Functions API with configurable allowed origins
  • PWA capabilities with service worker for offline functionality
User Experience & Performance
  • Type-safe filtering with EventCallback pattern for real-time project filtering
  • Animated UI elements including gradient counters and smooth transitions
  • Mobile-first responsive design - Optimized for 320px to 4K displays
  • Accessibility compliance with semantic HTML and ARIA labels
  • Fast page loads - Service worker caching reduces repeat visit load time by 70%
  • Interactive process visualization - SDLC workflow with state management
Security & Best Practices
  • API-first security - Sensitive operations (email, secrets) handled by Azure Functions backend, never in client
  • SOLID principles applied across all services and components for maintainability
  • Dependency injection throughout the application for testability and loose coupling
  • Interface-driven design (IEmailService, ITicketService, IRateLimiterService) for flexibility and testing
  • Nullable reference types enabled project-wide reducing null reference exceptions by 40%
  • Environment-based configuration separating development, staging, and production settings
  • SAS token authentication for secure, time-limited public blob access
  • CSP headers and security-first static web app configuration preventing XSS attacks
  • API key rotation support with zero-downtime provider switching via configuration
  • Validation at boundaries - Input validation in contact form and API (InputValidator with XSS pattern detection)
  • Encapsulation - Private fields with public property accessors (e.g., ResumeService.ResumeBlobUrl)
  • Immutable data models using C# records for thread-safe data transfer (ServiceInfo)
  • Async-first design - All I/O operations use async/await for scalability
  • Resilience patterns - Polly-based rate limiting and circuit breaker in Azure Functions API
  • Configuration validation - Exception throwing for missing critical configuration values
Business Value Delivered
  • Professional portfolio showcasing 8+ real-world projects with measurable results
  • Lead generation via strategic CTAs, validated contact form, and AI chatbot with 5-question conversation cap
  • AI-powered chatbot converting website visitors to consultation leads with knowledge-base-driven responses
  • Automated email delivery with Brevo SMTP relay via secure Azure Functions API backend
  • Resume distribution with download tracking and blob analytics
  • Client onboarding streamlined with Google Calendar integration
  • Support dashboard for incident tracking and response time monitoring
Development Quality
  • Clean Architecture principles with clear layer separation
  • SOLID principles applied to service implementations
  • Comprehensive documentation with inline XML comments and README guides
  • Git workflow with feature branches and protected master
  • Code organization following ASP.NET Core conventions
  • Scalable structure ready for feature expansion (testimonials, blog, admin panel)
Technical Innovations
  • Dynamic case study selection - Automatically surfaces top 3 customer projects with LINQ filtering
  • Business-friendly jargon translation - Converts technical terms for non-technical audiences in real-time
  • Gradient color interpolation - Mathematical color transitions for animated counters using RGB calculations
  • Event-driven architecture - Loose coupling between UI and business logic via EventCallback pattern
  • Secure email pipeline - Client → Azure Functions API → Brevo SMTP relay with rate limiting and input validation
  • AI chatbot pipeline - Blazor WASM → Azure Functions → Anthropic Claude API with token controls, history trimming, and response truncation
  • Multi-layer abuse prevention - Client-side conversation cap + API rate limiting + input validation + system prompt hardening
  • SPA with SEO optimization - Static Web Apps routing and fallback for search engine visibility (staticwebapp.config.json)
  • Retry mechanisms - Implemented in side projects (RabbitMQ connection resiliency, SSIS retry logic)
  • Circuit breaker patterns - Polly-based circuit breaker in Azure Functions rate limiter service
  • Health monitoring - Integrated health checks for distributed systems (RabbitMQ, Azure Functions)
  • Idempotent message processing - Duplicate prevention in event-driven systems
  • Rate limiting - Per-client fixed window rate limiting with Polly in Azure Functions API
  • CQRS pattern - Command-Query Responsibility Segregation with MediatR in microservices
  • Caching strategies - In-memory and distributed caching for performance optimization
  • Delta-based ETL processing - 70% runtime reduction through intelligent data extraction
  • Managed Identity preference - DefaultAzureCredential for passwordless Azure service access
📄 License
This project is licensed under the MIT License. See the LICENSE file for details.
👤 Author
Dariem C. Macias

Principal Consultant, CloudZen Inc.
LinkedIn | GitHub
About
modern Blazor WebAssembly project for CloudZen Inc., showcasing expertise in .NET 8, Azure Cloud, DevOps, AI-driven automation, and enterprise application modernization. Features scalable architecture, CI/CD integration, and a professional portfolio for Dariem C. Macias.
www.cloud-zen.net/
Resources
Readme
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
CloudZen
A modern Blazor WebAssembly portfolio and consulting showcase built with .NET 8, demonstrating expertise in building scalable, secure cloud applications with Azure integration.
🚀 Features
Portfolio & Presentation
  • Dynamic Project Showcase - Interactive case studies with filtering by technology, status, and project type
  • Professional Portfolio Page - Comprehensive "Who I Am" section with profile header, approach, and highlighted achievements
  • Animated UI Components - Counter circles with gradient fills and smooth animations for metrics display
  • Responsive Design - Mobile-first approach with Tailwind CSS, optimized for all screen sizes
  • Interactive SDLC Process - Visual representation of Planning, Automation, and Deployment phases
Business Features
  • Contact Form - Validated contact form with email integration via Brevo/SendGrid/SMTP providers
  • AI Chatbot - Embedded conversational assistant powered by Anthropic Claude, with knowledge base, lead conversion, and abuse protection (see AI_CHATBOT_DOCUMENTATION.md)
  • Resume Download - Secure resume delivery from Azure Blob Storage with SAS token authentication
  • Service Offerings Display - Dynamic service cards showcasing consulting capabilities
  • Testimonials Section - Client feedback display (currently disabled, ready for activation)
  • Call-to-Action Components - Strategic CTAs throughout the site for lead generation
Technical Features
  • Progressive Web App (PWA) - Service worker enabled for offline capability and fast loading
  • Component-Based Architecture - Reusable Blazor components with clear separation of concerns
  • Secure API Backend - Email and AI chatbot operations routed through Azure Functions API with rate limiting, input validation, and token controls
  • Centralized Data Management - Service layer pattern with ProjectService and PersonalService
  • Type-Safe Event Handling - EventCallback pattern for parent-child component communication
  • Google Calendar Integration - URL service for scheduling consultation bookings
  • Ticket Management System - Dashboard for tracking support incidents (demo implementation)
Cloud & DevOps
  • Azure Static Web Apps - Automated deployment with GitHub Actions workflow
  • Azure Blob Storage - Cloud file storage with CORS configuration for cross-origin access
  • Azure Key Vault Integration - Secrets management via Azure Functions backend with DefaultAzureCredential
  • CI/CD Pipeline - Automated build, test, and deployment on push to master (Static Web Apps + Azure Functions)
  • Service Worker - Automatic caching and offline support for enhanced performance
🛠️ Tech Stack
Frontend Technologies
  • Blazor WebAssembly (.NET 8) - Modern SPA framework with C# instead of JavaScript
  • C# 12 - Latest language features with nullable reference types enabled
  • Tailwind CSS - Utility-first CSS framework for rapid UI development
  • Bootstrap Icons - Comprehensive icon library for UI elements
  • HTML5 & CSS3 - Semantic markup and modern styling capabilities
Cloud Infrastructure (Azure)
  • Azure Static Web Apps - Serverless hosting with global CDN distribution
  • Azure Blob Storage - Scalable object storage for resumes and file assets
  • Azure Key Vault - Centralized secrets management accessed via Functions with DefaultAzureCredential
  • Azure Functions (Isolated Worker, .NET 8) - Serverless backend for secure email API and AI chatbot proxy
  • Azure Table Storage - NoSQL storage for ticket/incident data
  • Azure Application Insights - Real-time monitoring and telemetry with adaptive sampling
External APIs
  • Anthropic Claude API (claude-sonnet-4-20250514) - AI chatbot backend with server-side knowledge base and system prompt
Backend Services & APIs
  • Brevo SMTP Relay - Transactional email delivery via MailKit/MimeKit through Azure Functions API
  • MailKit / MimeKit (v4.15.0) - Cross-platform .NET SMTP client for secure email delivery
  • Polly (v8.6.5) - Resilience and transient fault handling (rate limiting, circuit breaker)
  • Azure Storage SDK - Client libraries for Blob, Queue, File Share, and Table operations

    • Azure.Storage.Blobs (v12.24.0)
    • Azure.Storage.Queues (v12.22.0)
    • Azure.Storage.Files.Shares (v12.22.0)
    • Azure.Data.Tables (v12.10.0)
Authentication & Security
  • Azure Identity - Managed Identity and credential management (v1.13.2 client, v1.18.0 API)
  • Azure Key Vault Configuration - Secure runtime configuration loading via AddAzureKeyVault() in Functions API
  • SAS Tokens - Secure, time-limited access to blob storage resources
  • CORS Configuration - Cross-origin resource sharing with configurable allowed origins in Azure Functions
  • Content Security Policy - HTTP headers for XSS protection configured in staticwebapp.config.json
  • Input Validation & Sanitization - InputValidator with XSS pattern detection in Azure Functions API
  • Rate Limiting - Per-client fixed window rate limiting with Polly in Azure Functions API
Development & Build Tools
  • .NET 8 SDK - Latest LTS version with performance improvements
  • Microsoft.Extensions.Azure (v1.11.0) - Azure SDK client factory extensions
  • User Secrets - Local development secrets management (not deployed)
  • Service Worker - PWA capabilities with offline caching
Tailwind CSS Setup & Architecture
How Tailwind is Set Up
This project uses Tailwind CSS via CDN (zero-configuration approach) loaded in wwwroot/index.html:
<scriptsrc="https://cdn.tailwindcss.com"></script>
What this means:
  • ✅ Zero build complexity - No npm, webpack, PostCSS, or Node.js dependencies required
  • ✅ Instant availability - All Tailwind utility classes work out of the box
  • ✅ Blazor-native - Integrates seamlessly with Blazor WebAssembly static file serving
  • ✅ Fast prototyping - Full Tailwind feature set available immediately
  • ⚠️Larger bundle - ~3.5MB uncompressed CSS (not optimized via PurgeCSS)
  • ⚠️No theme extension - Cannot customize default Tailwind theme without inline config
Usage Pattern: Hybrid Approach
The application combines Tailwind utility classes (primary styling) with custom CSS (wwwroot/css/app.css) for:
  • Blazor-specific styles (#blazor-error-ui, .loading-progress)
  • Custom animations (.hamburger-active, .scroll-to-top)
  • Brand-specific classes (.cloudzen-hover, .progress-bar-fill)
  • Bootstrap compatibility (legacy .btn-primary, form controls)
Tailwind Coverage: 100% of Razor components use Tailwind utilities extensively.
Architecture Decision: Why CDN Instead of npm/Config?
Advantages of CDN approach:
  • Simplicity - Pure .NET 8 project with no JavaScript toolchain
  • Developer experience - No build step delays during development
  • Deployment - Single dotnet publish command with no additional bundling
  • Maintenance - No package.json, node_modules, or npm version conflicts
Trade-offs:
  • Performance - Unoptimized CSS bundle (~3.5MB minified to ~300KB in production)
  • Customization - Limited theme extensions without inline configuration
  • Production optimization - No automatic unused class removal
Recommendations
Option 1: Keep CDN (Current Approach) ✅
Best for: Small-to-medium projects, rapid development, zero build complexity
To optimize current setup:
  1. Add custom theme colors via inline Tailwind config in index.html:
<script>tailwind.config={theme: {extend: {colors: {'cloudzen-teal': '#61C2C8','cloudzen-teal-hover': '#74b7bb',}}}}</script>
  1. Use CSS custom properties for brand consistency (already implemented):
/* app.css */:root {
--cloudzen-primary:#61C2C8;
}
Option 2: Migrate to npm + tailwind.config.js
Best for: Production apps, performance optimization, advanced customization
Benefits:
  • 📦 90% smaller CSS - PurgeCSS removes unused classes (reduces to ~10-30KB)
  • 🎨 Full theme control - Custom colors, fonts, spacing, breakpoints
  • ⚡ JIT mode - Only generate classes you actually use
  • 🔧 Plugins - Access official Tailwind plugins (forms, typography, aspect-ratio)
Migration steps (future enhancement):
# Install Tailwind
npm install -D tailwindcss postcss autoprefixer
# Create config
npx tailwindcss init
# Update tailwind.config.js
module.exports = {
content: ["./**/*.razor", "./**/*.html"],
theme: {
extend: {
colors: {
'cloudzen-teal': '#61C2C8',
}
}
}
}
# Build CSS
npx tailwindcss -i ./wwwroot/css/app.css -o ./wwwroot/css/output.css --minify
Current recommendation: Keep CDN approach for now. The application's current bundle size is acceptable for a portfolio site, and the development simplicity outweighs the performance gains from npm-based setup. Consider migrating when adding significant new features or optimizing for production performance.
Design Patterns & Principles Implemented
SOLID Principles
  • Single Responsibility Principle (SRP)
    •  Each service has one reason to change (ProjectService, ResumeService, EmailServiceFactory)
    •  Components have single, well-defined purposes (ProfileHeader, ProjectCard)
    •  Models represent single entities (ProjectInfo, ServiceInfo, TicketDto)
  • Open/Closed Principle (OCP)
    • IEmailService interface allows alternative email implementations without modifying existing code
    •  Azure Functions API extensible via configuration for different SMTP providers
    •  Component system supports adding features through composition, not modification
  • Liskov Substitution Principle (LSP)
    • IEmailService implementations are interchangeable (e.g., ApiEmailService could be swapped for a direct provider)
    • ITicketService implementations are interchangeable
  • Interface Segregation Principle (ISP)
    •  Focused interfaces (IEmailService, ITicketService, IRateLimiterService) with only necessary methods
    •  No client forced to depend on methods it doesn't use
  • Dependency Inversion Principle (DIP)
    •  High-level components depend on abstractions (IEmailService, ITicketService, IRateLimiterService), not concrete implementations
    •  DI container manages all dependencies via Program.cs registration in both client and API projects
    •  Services injected into components via @inject directive
Design Patterns
  • API Gateway Pattern - Blazor WASM delegates sensitive operations to Azure Functions API (ApiEmailService → SendEmailFunction)
  • Options Pattern - Strongly-typed configuration with IOptions<T> (EmailServiceOptions, BlobStorageOptions, EmailSettings, RateLimitOptions)
  • Service Layer Pattern - Business logic separation (ProjectService, PersonalService, ResumeService, TicketService, ApiEmailService)
  • Repository Pattern - Data access abstraction for projects and services with centralized data management
  • Event Callback Pattern - Type-safe parent-child component communication in Blazor
  • Singleton Pattern - Long-lived services (GoogleCalendarUrlService, TicketService, PollyRateLimiterService) registered as singletons
  • Record Pattern - Immutable data transfer objects (ServiceInfo record type)
  • Resilience Pattern - Polly-based rate limiting and circuit breaker in Azure Functions API
Advanced Techniques
  • Async/Await Pattern - Non-blocking operations throughout (SendEmailAsync, DownloadResumeAsync)
  • Managed Identity Authentication - Azure Identity with DefaultAzureCredential for passwordless Azure service access
  • Configuration Abstraction - IConfiguration and IOptions<T> for environment-specific settings across both projects
  • Logging Integration - ILogger<T> for structured logging in services and Azure Functions
  • Error Handling - InvalidOperationException for missing configuration validation
  • Null Safety - Nullable reference types enabled project-wide (string?, IEnumerable?)
  • LINQ Query Composition - Efficient data filtering and sorting in ProjectService
  • JavaScript Interop - Blazor-JS communication for file downloads and animations
  • Input Sanitization - InputValidator with regex-based XSS pattern detection and HTML encoding
  • Correlation ID Tracking - Request tracing across Azure Functions for debugging and monitoring
DevOps & CI/CD
  • GitHub Actions - Automated CI/CD workflows (Static Web Apps + Azure Functions deployment)
  • Azure Static Web Apps CLI - Local development and testing
  • Docker - Container support for reproducible builds (optional)
  • Git - Version control with branch-based deployment strategies
Monitoring & Analytics
  • Application Insights - Performance monitoring with adaptive sampling and QuickPulse metrics in Azure Functions API
  • Azure Monitor - Infrastructure and application health monitoring
  • Logging Framework - ILogger<T> integration throughout services with structured logging
  • Custom telemetry - Track user interactions, feature usage, and performance bottlenecks
Resilience & Error Handling
  • Retry Logic - Implemented in distributed systems projects (RabbitMQ, Azure Functions)
  • Connection Resiliency - Auto-reconnect for messaging systems and database connections
  • Circuit Breaker - Polly-based circuit breaker in Azure Functions API rate limiter service
  • Health Checks - Continuous monitoring of dependent services (databases, message queues, APIs)
  • Graceful Degradation - Application continues functioning when non-critical services fail
  • Exception Handling - Structured error handling with specific exception types
  • Configuration Validation - Throws InvalidOperationException for missing critical settings
  • Timeout Management - Configurable timeouts for HTTP clients (30s default) in Azure Functions API
  • Idempotency - Ensures operations can be safely retried without side effects
  • Polly Integration - Rate limiting (FixedWindowRateLimiter) and circuit breaker via Polly resilience pipelines in API
  • Async-safe Patterns - All async operations properly handle cancellation and exceptions
📚 Documentation
This project includes comprehensive documentation to help you understand the architecture, deploy to Azure, and maintain security:
⚡ Quick Start
# Clone the repository
git clone https://github.com/dariemcarlosdev/CloudZen.git
# Navigate to projectcd CloudZen
# Restore dependencies
dotnet restore
# Run Blazor WASM client
dotnet run --project CloudZen.csproj
# Run Azure Functions API (separate terminal, requires Azure Functions Core Tools)cd Api
func start
🔐 Security First
Important: Blazor WebAssembly runs entirely in the browser. Never store secrets in appsettings.json. Use Azure Functions backend with Key Vault for secure operations. See SECURITY_ALERT.md for details.
🏗️ Architecture
Blazor WASM (Client) ──→ Azure Functions API (Backend) ──→ Brevo SMTP Relay
(CloudZen) (CloudZen.Api) (Email Delivery)
│ │
│ ├──→ Azure Key Vault (Secrets)
│ ├──→ Application Insights (Telemetry)
│ └──→ Anthropic Claude API (AI Chatbot)
│
└──→ Azure Blob Storage (Resume/Files)

See COMPONENT_ARCHITECTURE.md for detailed component breakdown and data flow.
📦 Project Structure
CloudZen/
├── Api/ # Azure Functions API backend (CloudZen.Api)
│ ├── Functions/ # Azure Function endpoints
│ │ ├── SendEmailFunction.cs # Email proxy to Brevo SMTP
│ │ └── ChatFunction.cs # AI chatbot proxy to Anthropic Claude
│ ├── Models/ # API models (EmailRequest, ChatRequest, ChatResponse, RateLimitOptions)
│ ├── Security/ # Input validation and sanitization (InputValidator)
│ ├── Services/ # API services (PollyRateLimiterService)
│ └── Program.cs # Functions host entry point
├── Layout/ # Layout components (MainLayout, Header, Footer)
├── Models/ # Data models (ProjectInfo, ServiceInfo, EmailApiRequest)
│ └── Options/ # IOptions configuration classes
├── Pages/ # Routable pages (Index)
├── Services/ # Business logic (ProjectService, ApiEmailService, ResumeService)
│ └── Abstractions/ # Service interfaces (IEmailService, ITicketService)
├── Shared/ # Reusable Blazor components
│ ├── Chatbot/ # AI chatbot widget (CloudZenChatbot)
│ ├── Common/ # Shared UI (AnimatedCounterCircle, ScrollToTopButton, Tickets)
│ ├── Landing/ # Landing page sections (Hero, Services, CaseStudies, ContactForm, CTA)
│ ├── Profile/ # Profile components (ProfileHeader, ProfileApproach, SDLCProcess, WhoIAm)
│ └── Projects/ # Project display (ProjectCard, ProjectFilter)
├── wwwroot/ # Static assets, configuration, and index.html
├── .github/workflows/ # CI/CD (azure-functions.yml)
└── Program.cs # Blazor WASM entry point

🚀 Deployment
Ready to deploy? Follow these steps:
  1. Read SECURITY_ALERT.md - Critical security information
  2. Follow DEPLOYMENT_GUIDE.md - Complete setup instructions
  3. Follow AZURE_FUNCTION_DEPLOYMENT.md - Deploy the API backend
  4. Use DEPLOYMENT_CHECKLIST.md - Track your progress
GitHub Actions workflows automatically deploy:
  • Blazor WASM → Azure Static Web Apps (on push to master)
  • Azure Functions API → Azure Function App (on push to master when Api/ changes)
📊 Project Highlights
Architecture & Design Excellence
  • 90% code reduction in WhoIAm page through strategic component decomposition
  • 20+ reusable Blazor components with single responsibility principle

    •  Profile components: ProfileHeader, ProfileApproach, ProfileHighlights, SDLCProcess, WhoIAm
    •  Project components: ProjectCard, ProjectFilter
    •  Landing components: Hero, Services, CaseStudies, ContactForm, CTA, Mission, Testimonials, ValueProposition
    •  Layout components: MainLayout, Header, Footer
    •  Common components: AnimatedCounterCircle, ScrollToTopButton, Tickets
  • Component-based architecture enabling 85% code reusability across pages
  • Centralized business logic with dedicated service layer

    • ProjectService - Portfolio project management and filtering
    • PersonalService - Service offerings and company information
    • ResumeService - Azure Blob integration for document delivery
    • ApiEmailService - Secure email via Azure Functions API backend
    • TicketService - Support incident tracking
    • GoogleCalendarUrlService - Booking integration
Cloud-Native Implementation
  • Serverless architecture with Azure Static Web Apps + Azure Functions (Isolated Worker)
  • Automated deployments via GitHub Actions CI/CD (separate workflows for WASM and Functions)
  • Global CDN distribution for sub-100ms page loads worldwide
  • Auto-scaling infrastructure handling traffic spikes without manual intervention
  • Secure secrets management with Azure Key Vault integration in Azure Functions API
  • CORS-enabled Azure Functions API with configurable allowed origins
  • PWA capabilities with service worker for offline functionality
User Experience & Performance
  • Type-safe filtering with EventCallback pattern for real-time project filtering
  • Animated UI elements including gradient counters and smooth transitions
  • Mobile-first responsive design - Optimized for 320px to 4K displays
  • Accessibility compliance with semantic HTML and ARIA labels
  • Fast page loads - Service worker caching reduces repeat visit load time by 70%
  • Interactive process visualization - SDLC workflow with state management
Security & Best Practices
  • API-first security - Sensitive operations (email, secrets) handled by Azure Functions backend, never in client
  • SOLID principles applied across all services and components for maintainability
  • Dependency injection throughout the application for testability and loose coupling
  • Interface-driven design (IEmailService, ITicketService, IRateLimiterService) for flexibility and testing
  • Nullable reference types enabled project-wide reducing null reference exceptions by 40%
  • Environment-based configuration separating development, staging, and production settings
  • SAS token authentication for secure, time-limited public blob access
  • CSP headers and security-first static web app configuration preventing XSS attacks
  • API key rotation support with zero-downtime provider switching via configuration
  • Validation at boundaries - Input validation in contact form and API (InputValidator with XSS pattern detection)
  • Encapsulation - Private fields with public property accessors (e.g., ResumeService.ResumeBlobUrl)
  • Immutable data models using C# records for thread-safe data transfer (ServiceInfo)
  • Async-first design - All I/O operations use async/await for scalability
  • Resilience patterns - Polly-based rate limiting and circuit breaker in Azure Functions API
  • Configuration validation - Exception throwing for missing critical configuration values
Business Value Delivered
  • Professional portfolio showcasing 8+ real-world projects with measurable results
  • Lead generation via strategic CTAs, validated contact form, and AI chatbot with 5-question conversation cap
  • AI-powered chatbot converting website visitors to consultation leads with knowledge-base-driven responses
  • Automated email delivery with Brevo SMTP relay via secure Azure Functions API backend
  • Resume distribution with download tracking and blob analytics
  • Client onboarding streamlined with Google Calendar integration
  • Support dashboard for incident tracking and response time monitoring
Development Quality
  • Clean Architecture principles with clear layer separation
  • SOLID principles applied to service implementations
  • Comprehensive documentation with inline XML comments and README guides
  • Git workflow with feature branches and protected master
  • Code organization following ASP.NET Core conventions
  • Scalable structure ready for feature expansion (testimonials, blog, admin panel)
Technical Innovations
  • Dynamic case study selection - Automatically surfaces top 3 customer projects with LINQ filtering
  • Business-friendly jargon translation - Converts technical terms for non-technical audiences in real-time
  • Gradient color interpolation - Mathematical color transitions for animated counters using RGB calculations
  • Event-driven architecture - Loose coupling between UI and business logic via EventCallback pattern
  • Secure email pipeline - Client → Azure Functions API → Brevo SMTP relay with rate limiting and input validation
  • AI chatbot pipeline - Blazor WASM → Azure Functions → Anthropic Claude API with token controls, history trimming, and response truncation
  • Multi-layer abuse prevention - Client-side conversation cap + API rate limiting + input validation + system prompt hardening
  • SPA with SEO optimization - Static Web Apps routing and fallback for search engine visibility (staticwebapp.config.json)
  • Retry mechanisms - Implemented in side projects (RabbitMQ connection resiliency, SSIS retry logic)
  • Circuit breaker patterns - Polly-based circuit breaker in Azure Functions rate limiter service
  • Health monitoring - Integrated health checks for distributed systems (RabbitMQ, Azure Functions)
  • Idempotent message processing - Duplicate prevention in event-driven systems
  • Rate limiting - Per-client fixed window rate limiting with Polly in Azure Functions API
  • CQRS pattern - Command-Query Responsibility Segregation with MediatR in microservices
  • Caching strategies - In-memory and distributed caching for performance optimization
  • Delta-based ETL processing - 70% runtime reduction through intelligent data extraction
  • Managed Identity preference - DefaultAzureCredential for passwordless Azure service access
📄 License
This project is licensed under the MIT License. See the LICENSE file for details.
👤 Author
Dariem C. Macias

Principal Consultant, CloudZen Inc.
LinkedIn | GitHub
About
modern Blazor WebAssembly project for CloudZen Inc., showcasing expertise in .NET 8, Azure Cloud, DevOps, AI-driven automation, and enterprise application modernization. Features scalable architecture, CI/CD integration, and a professional portfolio for Dariem C. Macias.
www.cloud-zen.net/
Resources
Readme
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
CloudZen
A modern Blazor WebAssembly portfolio and consulting showcase built with .NET 8, demonstrating expertise in building scalable, secure cloud applications with Azure integration.
🚀 Features
Portfolio & Presentation
  • Dynamic Project Showcase - Interactive case studies with filtering by technology, status, and project type
  • Professional Portfolio Page - Comprehensive "Who I Am" section with profile header, approach, and highlighted achievements
  • Animated UI Components - Counter circles with gradient fills and smooth animations for metrics display
  • Responsive Design - Mobile-first approach with Tailwind CSS, optimized for all screen sizes
  • Interactive SDLC Process - Visual representation of Planning, Automation, and Deployment phases
Business Features
  • Contact Form - Validated contact form with email integration via Brevo/SendGrid/SMTP providers
  • AI Chatbot - Embedded conversational assistant powered by Anthropic Claude, with knowledge base, lead conversion, and abuse protection (see AI_CHATBOT_DOCUMENTATION.md)
  • Resume Download - Secure resume delivery from Azure Blob Storage with SAS token authentication
  • Service Offerings Display - Dynamic service cards showcasing consulting capabilities
  • Testimonials Section - Client feedback display (currently disabled, ready for activation)
  • Call-to-Action Components - Strategic CTAs throughout the site for lead generation
Technical Features
  • Progressive Web App (PWA) - Service worker enabled for offline capability and fast loading
  • Component-Based Architecture - Reusable Blazor components with clear separation of concerns
  • Secure API Backend - Email and AI chatbot operations routed through Azure Functions API with rate limiting, input validation, and token controls
  • Centralized Data Management - Service layer pattern with ProjectService and PersonalService
  • Type-Safe Event Handling - EventCallback pattern for parent-child component communication
  • Google Calendar Integration - URL service for scheduling consultation bookings
  • Ticket Management System - Dashboard for tracking support incidents (demo implementation)
Cloud & DevOps
  • Azure Static Web Apps - Automated deployment with GitHub Actions workflow
  • Azure Blob Storage - Cloud file storage with CORS configuration for cross-origin access
  • Azure Key Vault Integration - Secrets management via Azure Functions backend with DefaultAzureCredential
  • CI/CD Pipeline - Automated build, test, and deployment on push to master (Static Web Apps + Azure Functions)
  • Service Worker - Automatic caching and offline support for enhanced performance
🛠️ Tech Stack
Frontend Technologies
  • Blazor WebAssembly (.NET 8) - Modern SPA framework with C# instead of JavaScript
  • C# 12 - Latest language features with nullable reference types enabled
  • Tailwind CSS - Utility-first CSS framework for rapid UI development
  • Bootstrap Icons - Comprehensive icon library for UI elements
  • HTML5 & CSS3 - Semantic markup and modern styling capabilities
Cloud Infrastructure (Azure)
  • Azure Static Web Apps - Serverless hosting with global CDN distribution
  • Azure Blob Storage - Scalable object storage for resumes and file assets
  • Azure Key Vault - Centralized secrets management accessed via Functions with DefaultAzureCredential
  • Azure Functions (Isolated Worker, .NET 8) - Serverless backend for secure email API and AI chatbot proxy
  • Azure Table Storage - NoSQL storage for ticket/incident data
  • Azure Application Insights - Real-time monitoring and telemetry with adaptive sampling
External APIs
  • Anthropic Claude API (claude-sonnet-4-20250514) - AI chatbot backend with server-side knowledge base and system prompt
Backend Services & APIs
  • Brevo SMTP Relay - Transactional email delivery via MailKit/MimeKit through Azure Functions API
  • MailKit / MimeKit (v4.15.0) - Cross-platform .NET SMTP client for secure email delivery
  • Polly (v8.6.5) - Resilience and transient fault handling (rate limiting, circuit breaker)
  • Azure Storage SDK - Client libraries for Blob, Queue, File Share, and Table operations

    • Azure.Storage.Blobs (v12.24.0)
    • Azure.Storage.Queues (v12.22.0)
    • Azure.Storage.Files.Shares (v12.22.0)
    • Azure.Data.Tables (v12.10.0)
Authentication & Security
  • Azure Identity - Managed Identity and credential management (v1.13.2 client, v1.18.0 API)
  • Azure Key Vault Configuration - Secure runtime configuration loading via AddAzureKeyVault() in Functions API
  • SAS Tokens - Secure, time-limited access to blob storage resources
  • CORS Configuration - Cross-origin resource sharing with configurable allowed origins in Azure Functions
  • Content Security Policy - HTTP headers for XSS protection configured in staticwebapp.config.json
  • Input Validation & Sanitization - InputValidator with XSS pattern detection in Azure Functions API
  • Rate Limiting - Per-client fixed window rate limiting with Polly in Azure Functions API
Development & Build Tools
  • .NET 8 SDK - Latest LTS version with performance improvements
  • Microsoft.Extensions.Azure (v1.11.0) - Azure SDK client factory extensions
  • User Secrets - Local development secrets management (not deployed)
  • Service Worker - PWA capabilities with offline caching
Tailwind CSS Setup & Architecture
How Tailwind is Set Up
This project uses Tailwind CSS via CDN (zero-configuration approach) loaded in wwwroot/index.html:
<scriptsrc="https://cdn.tailwindcss.com"></script>
What this means:
  • ✅ Zero build complexity - No npm, webpack, PostCSS, or Node.js dependencies required
  • ✅ Instant availability - All Tailwind utility classes work out of the box
  • ✅ Blazor-native - Integrates seamlessly with Blazor WebAssembly static file serving
  • ✅ Fast prototyping - Full Tailwind feature set available immediately
  • ⚠️Larger bundle - ~3.5MB uncompressed CSS (not optimized via PurgeCSS)
  • ⚠️No theme extension - Cannot customize default Tailwind theme without inline config
Usage Pattern: Hybrid Approach
The application combines Tailwind utility classes (primary styling) with custom CSS (wwwroot/css/app.css) for:
  • Blazor-specific styles (#blazor-error-ui, .loading-progress)
  • Custom animations (.hamburger-active, .scroll-to-top)
  • Brand-specific classes (.cloudzen-hover, .progress-bar-fill)
  • Bootstrap compatibility (legacy .btn-primary, form controls)
Tailwind Coverage: 100% of Razor components use Tailwind utilities extensively.
Architecture Decision: Why CDN Instead of npm/Config?
Advantages of CDN approach:
  • Simplicity - Pure .NET 8 project with no JavaScript toolchain
  • Developer experience - No build step delays during development
  • Deployment - Single dotnet publish command with no additional bundling
  • Maintenance - No package.json, node_modules, or npm version conflicts
Trade-offs:
  • Performance - Unoptimized CSS bundle (~3.5MB minified to ~300KB in production)
  • Customization - Limited theme extensions without inline configuration
  • Production optimization - No automatic unused class removal
Recommendations
Option 1: Keep CDN (Current Approach) ✅
Best for: Small-to-medium projects, rapid development, zero build complexity
To optimize current setup:
  1. Add custom theme colors via inline Tailwind config in index.html:
<script>tailwind.config={theme: {extend: {colors: {'cloudzen-teal': '#61C2C8','cloudzen-teal-hover': '#74b7bb',}}}}</script>
  1. Use CSS custom properties for brand consistency (already implemented):
/* app.css */:root {
--cloudzen-primary:#61C2C8;
}
Option 2: Migrate to npm + tailwind.config.js
Best for: Production apps, performance optimization, advanced customization
Benefits:
  • 📦 90% smaller CSS - PurgeCSS removes unused classes (reduces to ~10-30KB)
  • 🎨 Full theme control - Custom colors, fonts, spacing, breakpoints
  • ⚡ JIT mode - Only generate classes you actually use
  • 🔧 Plugins - Access official Tailwind plugins (forms, typography, aspect-ratio)
Migration steps (future enhancement):
# Install Tailwind
npm install -D tailwindcss postcss autoprefixer
# Create config
npx tailwindcss init
# Update tailwind.config.js
module.exports = {
content: ["./**/*.razor", "./**/*.html"],
theme: {
extend: {
colors: {
'cloudzen-teal': '#61C2C8',
}
}
}
}
# Build CSS
npx tailwindcss -i ./wwwroot/css/app.css -o ./wwwroot/css/output.css --minify
Current recommendation: Keep CDN approach for now. The application's current bundle size is acceptable for a portfolio site, and the development simplicity outweighs the performance gains from npm-based setup. Consider migrating when adding significant new features or optimizing for production performance.
Design Patterns & Principles Implemented
SOLID Principles
  • Single Responsibility Principle (SRP)
    •  Each service has one reason to change (ProjectService, ResumeService, EmailServiceFactory)
    •  Components have single, well-defined purposes (ProfileHeader, ProjectCard)
    •  Models represent single entities (ProjectInfo, ServiceInfo, TicketDto)
  • Open/Closed Principle (OCP)
    • IEmailService interface allows alternative email implementations without modifying existing code
    •  Azure Functions API extensible via configuration for different SMTP providers
    •  Component system supports adding features through composition, not modification
  • Liskov Substitution Principle (LSP)
    • IEmailService implementations are interchangeable (e.g., ApiEmailService could be swapped for a direct provider)
    • ITicketService implementations are interchangeable
  • Interface Segregation Principle (ISP)
    •  Focused interfaces (IEmailService, ITicketService, IRateLimiterService) with only necessary methods
    •  No client forced to depend on methods it doesn't use
  • Dependency Inversion Principle (DIP)
    •  High-level components depend on abstractions (IEmailService, ITicketService, IRateLimiterService), not concrete implementations
    •  DI container manages all dependencies via Program.cs registration in both client and API projects
    •  Services injected into components via @inject directive
Design Patterns
  • API Gateway Pattern - Blazor WASM delegates sensitive operations to Azure Functions API (ApiEmailService → SendEmailFunction)
  • Options Pattern - Strongly-typed configuration with IOptions<T> (EmailServiceOptions, BlobStorageOptions, EmailSettings, RateLimitOptions)
  • Service Layer Pattern - Business logic separation (ProjectService, PersonalService, ResumeService, TicketService, ApiEmailService)
  • Repository Pattern - Data access abstraction for projects and services with centralized data management
  • Event Callback Pattern - Type-safe parent-child component communication in Blazor
  • Singleton Pattern - Long-lived services (GoogleCalendarUrlService, TicketService, PollyRateLimiterService) registered as singletons
  • Record Pattern - Immutable data transfer objects (ServiceInfo record type)
  • Resilience Pattern - Polly-based rate limiting and circuit breaker in Azure Functions API
Advanced Techniques
  • Async/Await Pattern - Non-blocking operations throughout (SendEmailAsync, DownloadResumeAsync)
  • Managed Identity Authentication - Azure Identity with DefaultAzureCredential for passwordless Azure service access
  • Configuration Abstraction - IConfiguration and IOptions<T> for environment-specific settings across both projects
  • Logging Integration - ILogger<T> for structured logging in services and Azure Functions
  • Error Handling - InvalidOperationException for missing configuration validation
  • Null Safety - Nullable reference types enabled project-wide (string?, IEnumerable?)
  • LINQ Query Composition - Efficient data filtering and sorting in ProjectService
  • JavaScript Interop - Blazor-JS communication for file downloads and animations
  • Input Sanitization - InputValidator with regex-based XSS pattern detection and HTML encoding
  • Correlation ID Tracking - Request tracing across Azure Functions for debugging and monitoring
DevOps & CI/CD
  • GitHub Actions - Automated CI/CD workflows (Static Web Apps + Azure Functions deployment)
  • Azure Static Web Apps CLI - Local development and testing
  • Docker - Container support for reproducible builds (optional)
  • Git - Version control with branch-based deployment strategies
Monitoring & Analytics
  • Application Insights - Performance monitoring with adaptive sampling and QuickPulse metrics in Azure Functions API
  • Azure Monitor - Infrastructure and application health monitoring
  • Logging Framework - ILogger<T> integration throughout services with structured logging
  • Custom telemetry - Track user interactions, feature usage, and performance bottlenecks
Resilience & Error Handling
  • Retry Logic - Implemented in distributed systems projects (RabbitMQ, Azure Functions)
  • Connection Resiliency - Auto-reconnect for messaging systems and database connections
  • Circuit Breaker - Polly-based circuit breaker in Azure Functions API rate limiter service
  • Health Checks - Continuous monitoring of dependent services (databases, message queues, APIs)
  • Graceful Degradation - Application continues functioning when non-critical services fail
  • Exception Handling - Structured error handling with specific exception types
  • Configuration Validation - Throws InvalidOperationException for missing critical settings
  • Timeout Management - Configurable timeouts for HTTP clients (30s default) in Azure Functions API
  • Idempotency - Ensures operations can be safely retried without side effects
  • Polly Integration - Rate limiting (FixedWindowRateLimiter) and circuit breaker via Polly resilience pipelines in API
  • Async-safe Patterns - All async operations properly handle cancellation and exceptions
📚 Documentation
This project includes comprehensive documentation to help you understand the architecture, deploy to Azure, and maintain security:
⚡ Quick Start
# Clone the repository
git clone https://github.com/dariemcarlosdev/CloudZen.git
# Navigate to projectcd CloudZen
# Restore dependencies
dotnet restore
# Run Blazor WASM client
dotnet run --project CloudZen.csproj
# Run Azure Functions API (separate terminal, requires Azure Functions Core Tools)cd Api
func start
🔐 Security First
Important: Blazor WebAssembly runs entirely in the browser. Never store secrets in appsettings.json. Use Azure Functions backend with Key Vault for secure operations. See SECURITY_ALERT.md for details.
🏗️ Architecture
Blazor WASM (Client) ──→ Azure Functions API (Backend) ──→ Brevo SMTP Relay
(CloudZen) (CloudZen.Api) (Email Delivery)
│ │
│ ├──→ Azure Key Vault (Secrets)
│ ├──→ Application Insights (Telemetry)
│ └──→ Anthropic Claude API (AI Chatbot)
│
└──→ Azure Blob Storage (Resume/Files)

See COMPONENT_ARCHITECTURE.md for detailed component breakdown and data flow.
📦 Project Structure
CloudZen/
├── Api/ # Azure Functions API backend (CloudZen.Api)
│ ├── Functions/ # Azure Function endpoints
│ │ ├── SendEmailFunction.cs # Email proxy to Brevo SMTP
│ │ └── ChatFunction.cs # AI chatbot proxy to Anthropic Claude
│ ├── Models/ # API models (EmailRequest, ChatRequest, ChatResponse, RateLimitOptions)
│ ├── Security/ # Input validation and sanitization (InputValidator)
│ ├── Services/ # API services (PollyRateLimiterService)
│ └── Program.cs # Functions host entry point
├── Layout/ # Layout components (MainLayout, Header, Footer)
├── Models/ # Data models (ProjectInfo, ServiceInfo, EmailApiRequest)
│ └── Options/ # IOptions configuration classes
├── Pages/ # Routable pages (Index)
├── Services/ # Business logic (ProjectService, ApiEmailService, ResumeService)
│ └── Abstractions/ # Service interfaces (IEmailService, ITicketService)
├── Shared/ # Reusable Blazor components
│ ├── Chatbot/ # AI chatbot widget (CloudZenChatbot)
│ ├── Common/ # Shared UI (AnimatedCounterCircle, ScrollToTopButton, Tickets)
│ ├── Landing/ # Landing page sections (Hero, Services, CaseStudies, ContactForm, CTA)
│ ├── Profile/ # Profile components (ProfileHeader, ProfileApproach, SDLCProcess, WhoIAm)
│ └── Projects/ # Project display (ProjectCard, ProjectFilter)
├── wwwroot/ # Static assets, configuration, and index.html
├── .github/workflows/ # CI/CD (azure-functions.yml)
└── Program.cs # Blazor WASM entry point

🚀 Deployment
Ready to deploy? Follow these steps:
  1. Read SECURITY_ALERT.md - Critical security information
  2. Follow DEPLOYMENT_GUIDE.md - Complete setup instructions
  3. Follow AZURE_FUNCTION_DEPLOYMENT.md - Deploy the API backend
  4. Use DEPLOYMENT_CHECKLIST.md - Track your progress
GitHub Actions workflows automatically deploy:
  • Blazor WASM → Azure Static Web Apps (on push to master)
  • Azure Functions API → Azure Function App (on push to master when Api/ changes)
📊 Project Highlights
Architecture & Design Excellence
  • 90% code reduction in WhoIAm page through strategic component decomposition
  • 20+ reusable Blazor components with single responsibility principle

    •  Profile components: ProfileHeader, ProfileApproach, ProfileHighlights, SDLCProcess, WhoIAm
    •  Project components: ProjectCard, ProjectFilter
    •  Landing components: Hero, Services, CaseStudies, ContactForm, CTA, Mission, Testimonials, ValueProposition
    •  Layout components: MainLayout, Header, Footer
    •  Common components: AnimatedCounterCircle, ScrollToTopButton, Tickets
  • Component-based architecture enabling 85% code reusability across pages
  • Centralized business logic with dedicated service layer

    • ProjectService - Portfolio project management and filtering
    • PersonalService - Service offerings and company information
    • ResumeService - Azure Blob integration for document delivery
    • ApiEmailService - Secure email via Azure Functions API backend
    • TicketService - Support incident tracking
    • GoogleCalendarUrlService - Booking integration
Cloud-Native Implementation
  • Serverless architecture with Azure Static Web Apps + Azure Functions (Isolated Worker)
  • Automated deployments via GitHub Actions CI/CD (separate workflows for WASM and Functions)
  • Global CDN distribution for sub-100ms page loads worldwide
  • Auto-scaling infrastructure handling traffic spikes without manual intervention
  • Secure secrets management with Azure Key Vault integration in Azure Functions API
  • CORS-enabled Azure Functions API with configurable allowed origins
  • PWA capabilities with service worker for offline functionality
User Experience & Performance
  • Type-safe filtering with EventCallback pattern for real-time project filtering
  • Animated UI elements including gradient counters and smooth transitions
  • Mobile-first responsive design - Optimized for 320px to 4K displays
  • Accessibility compliance with semantic HTML and ARIA labels
  • Fast page loads - Service worker caching reduces repeat visit load time by 70%
  • Interactive process visualization - SDLC workflow with state management
Security & Best Practices
  • API-first security - Sensitive operations (email, secrets) handled by Azure Functions backend, never in client
  • SOLID principles applied across all services and components for maintainability
  • Dependency injection throughout the application for testability and loose coupling
  • Interface-driven design (IEmailService, ITicketService, IRateLimiterService) for flexibility and testing
  • Nullable reference types enabled project-wide reducing null reference exceptions by 40%
  • Environment-based configuration separating development, staging, and production settings
  • SAS token authentication for secure, time-limited public blob access
  • CSP headers and security-first static web app configuration preventing XSS attacks
  • API key rotation support with zero-downtime provider switching via configuration
  • Validation at boundaries - Input validation in contact form and API (InputValidator with XSS pattern detection)
  • Encapsulation - Private fields with public property accessors (e.g., ResumeService.ResumeBlobUrl)
  • Immutable data models using C# records for thread-safe data transfer (ServiceInfo)
  • Async-first design - All I/O operations use async/await for scalability
  • Resilience patterns - Polly-based rate limiting and circuit breaker in Azure Functions API
  • Configuration validation - Exception throwing for missing critical configuration values
Business Value Delivered
  • Professional portfolio showcasing 8+ real-world projects with measurable results
  • Lead generation via strategic CTAs, validated contact form, and AI chatbot with 5-question conversation cap
  • AI-powered chatbot converting website visitors to consultation leads with knowledge-base-driven responses
  • Automated email delivery with Brevo SMTP relay via secure Azure Functions API backend
  • Resume distribution with download tracking and blob analytics
  • Client onboarding streamlined with Google Calendar integration
  • Support dashboard for incident tracking and response time monitoring
Development Quality
  • Clean Architecture principles with clear layer separation
  • SOLID principles applied to service implementations
  • Comprehensive documentation with inline XML comments and README guides
  • Git workflow with feature branches and protected master
  • Code organization following ASP.NET Core conventions
  • Scalable structure ready for feature expansion (testimonials, blog, admin panel)
Technical Innovations
  • Dynamic case study selection - Automatically surfaces top 3 customer projects with LINQ filtering
  • Business-friendly jargon translation - Converts technical terms for non-technical audiences in real-time
  • Gradient color interpolation - Mathematical color transitions for animated counters using RGB calculations
  • Event-driven architecture - Loose coupling between UI and business logic via EventCallback pattern
  • Secure email pipeline - Client → Azure Functions API → Brevo SMTP relay with rate limiting and input validation
  • AI chatbot pipeline - Blazor WASM → Azure Functions → Anthropic Claude API with token controls, history trimming, and response truncation
  • Multi-layer abuse prevention - Client-side conversation cap + API rate limiting + input validation + system prompt hardening
  • SPA with SEO optimization - Static Web Apps routing and fallback for search engine visibility (staticwebapp.config.json)
  • Retry mechanisms - Implemented in side projects (RabbitMQ connection resiliency, SSIS retry logic)
  • Circuit breaker patterns - Polly-based circuit breaker in Azure Functions rate limiter service
  • Health monitoring - Integrated health checks for distributed systems (RabbitMQ, Azure Functions)
  • Idempotent message processing - Duplicate prevention in event-driven systems
  • Rate limiting - Per-client fixed window rate limiting with Polly in Azure Functions API
  • CQRS pattern - Command-Query Responsibility Segregation with MediatR in microservices
  • Caching strategies - In-memory and distributed caching for performance optimization
  • Delta-based ETL processing - 70% runtime reduction through intelligent data extraction
  • Managed Identity preference - DefaultAzureCredential for passwordless Azure service access
📄 License
This project is licensed under the MIT License. See the LICENSE file for details.
👤 Author
Dariem C. Macias

Principal Consultant, CloudZen Inc.
LinkedIn | GitHub
About
modern Blazor WebAssembly project for CloudZen Inc., showcasing expertise in .NET 8, Azure Cloud, DevOps, AI-driven automation, and enterprise application modernization. Features scalable architecture, CI/CD integration, and a professional portfolio for Dariem C. Macias.
www.cloud-zen.net/
Resources
Readme
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
CloudZen
A modern Blazor WebAssembly portfolio and consulting showcase built with .NET 8, demonstrating expertise in building scalable, secure cloud applications with Azure integration.
🚀 Features
Portfolio & Presentation
  • Dynamic Project Showcase - Interactive case studies with filtering by technology, status, and project type
  • Professional Portfolio Page - Comprehensive "Who I Am" section with profile header, approach, and highlighted achievements
  • Animated UI Components - Counter circles with gradient fills and smooth animations for metrics display
  • Responsive Design - Mobile-first approach with Tailwind CSS, optimized for all screen sizes
  • Interactive SDLC Process - Visual representation of Planning, Automation, and Deployment phases
Business Features
  • Contact Form - Validated contact form with email integration via Brevo/SendGrid/SMTP providers
  • AI Chatbot - Embedded conversational assistant powered by Anthropic Claude, with knowledge base, lead conversion, and abuse protection (see AI_CHATBOT_DOCUMENTATION.md)
  • Resume Download - Secure resume delivery from Azure Blob Storage with SAS token authentication
  • Service Offerings Display - Dynamic service cards showcasing consulting capabilities
  • Testimonials Section - Client feedback display (currently disabled, ready for activation)
  • Call-to-Action Components - Strategic CTAs throughout the site for lead generation
Technical Features
  • Progressive Web App (PWA) - Service worker enabled for offline capability and fast loading
  • Component-Based Architecture - Reusable Blazor components with clear separation of concerns
  • Secure API Backend - Email and AI chatbot operations routed through Azure Functions API with rate limiting, input validation, and token controls
  • Centralized Data Management - Service layer pattern with ProjectService and PersonalService
  • Type-Safe Event Handling - EventCallback pattern for parent-child component communication
  • Google Calendar Integration - URL service for scheduling consultation bookings
  • Ticket Management System - Dashboard for tracking support incidents (demo implementation)
Cloud & DevOps
  • Azure Static Web Apps - Automated deployment with GitHub Actions workflow
  • Azure Blob Storage - Cloud file storage with CORS configuration for cross-origin access
  • Azure Key Vault Integration - Secrets management via Azure Functions backend with DefaultAzureCredential
  • CI/CD Pipeline - Automated build, test, and deployment on push to master (Static Web Apps + Azure Functions)
  • Service Worker - Automatic caching and offline support for enhanced performance
🛠️ Tech Stack
Frontend Technologies
  • Blazor WebAssembly (.NET 8) - Modern SPA framework with C# instead of JavaScript
  • C# 12 - Latest language features with nullable reference types enabled
  • Tailwind CSS - Utility-first CSS framework for rapid UI development
  • Bootstrap Icons - Comprehensive icon library for UI elements
  • HTML5 & CSS3 - Semantic markup and modern styling capabilities
Cloud Infrastructure (Azure)
  • Azure Static Web Apps - Serverless hosting with global CDN distribution
  • Azure Blob Storage - Scalable object storage for resumes and file assets
  • Azure Key Vault - Centralized secrets management accessed via Functions with DefaultAzureCredential
  • Azure Functions (Isolated Worker, .NET 8) - Serverless backend for secure email API and AI chatbot proxy
  • Azure Table Storage - NoSQL storage for ticket/incident data
  • Azure Application Insights - Real-time monitoring and telemetry with adaptive sampling
External APIs
  • Anthropic Claude API (claude-sonnet-4-20250514) - AI chatbot backend with server-side knowledge base and system prompt
Backend Services & APIs
  • Brevo SMTP Relay - Transactional email delivery via MailKit/MimeKit through Azure Functions API
  • MailKit / MimeKit (v4.15.0) - Cross-platform .NET SMTP client for secure email delivery
  • Polly (v8.6.5) - Resilience and transient fault handling (rate limiting, circuit breaker)
  • Azure Storage SDK - Client libraries for Blob, Queue, File Share, and Table operations

    • Azure.Storage.Blobs (v12.24.0)
    • Azure.Storage.Queues (v12.22.0)
    • Azure.Storage.Files.Shares (v12.22.0)
    • Azure.Data.Tables (v12.10.0)
Authentication & Security
  • Azure Identity - Managed Identity and credential management (v1.13.2 client, v1.18.0 API)
  • Azure Key Vault Configuration - Secure runtime configuration loading via AddAzureKeyVault() in Functions API
  • SAS Tokens - Secure, time-limited access to blob storage resources
  • CORS Configuration - Cross-origin resource sharing with configurable allowed origins in Azure Functions
  • Content Security Policy - HTTP headers for XSS protection configured in staticwebapp.config.json
  • Input Validation & Sanitization - InputValidator with XSS pattern detection in Azure Functions API
  • Rate Limiting - Per-client fixed window rate limiting with Polly in Azure Functions API
Development & Build Tools
  • .NET 8 SDK - Latest LTS version with performance improvements
  • Microsoft.Extensions.Azure (v1.11.0) - Azure SDK client factory extensions
  • User Secrets - Local development secrets management (not deployed)
  • Service Worker - PWA capabilities with offline caching
Tailwind CSS Setup & Architecture
How Tailwind is Set Up
This project uses Tailwind CSS via CDN (zero-configuration approach) loaded in wwwroot/index.html:
<scriptsrc="https://cdn.tailwindcss.com"></script>
What this means:
  • ✅ Zero build complexity - No npm, webpack, PostCSS, or Node.js dependencies required
  • ✅ Instant availability - All Tailwind utility classes work out of the box
  • ✅ Blazor-native - Integrates seamlessly with Blazor WebAssembly static file serving
  • ✅ Fast prototyping - Full Tailwind feature set available immediately
  • ⚠️Larger bundle - ~3.5MB uncompressed CSS (not optimized via PurgeCSS)
  • ⚠️No theme extension - Cannot customize default Tailwind theme without inline config
Usage Pattern: Hybrid Approach
The application combines Tailwind utility classes (primary styling) with custom CSS (wwwroot/css/app.css) for:
  • Blazor-specific styles (#blazor-error-ui, .loading-progress)
  • Custom animations (.hamburger-active, .scroll-to-top)
  • Brand-specific classes (.cloudzen-hover, .progress-bar-fill)
  • Bootstrap compatibility (legacy .btn-primary, form controls)
Tailwind Coverage: 100% of Razor components use Tailwind utilities extensively.
Architecture Decision: Why CDN Instead of npm/Config?
Advantages of CDN approach:
  • Simplicity - Pure .NET 8 project with no JavaScript toolchain
  • Developer experience - No build step delays during development
  • Deployment - Single dotnet publish command with no additional bundling
  • Maintenance - No package.json, node_modules, or npm version conflicts
Trade-offs:
  • Performance - Unoptimized CSS bundle (~3.5MB minified to ~300KB in production)
  • Customization - Limited theme extensions without inline configuration
  • Production optimization - No automatic unused class removal
Recommendations
Option 1: Keep CDN (Current Approach) ✅
Best for: Small-to-medium projects, rapid development, zero build complexity
To optimize current setup:
  1. Add custom theme colors via inline Tailwind config in index.html:
<script>tailwind.config={theme: {extend: {colors: {'cloudzen-teal': '#61C2C8','cloudzen-teal-hover': '#74b7bb',}}}}</script>
  1. Use CSS custom properties for brand consistency (already implemented):
/* app.css */:root {
--cloudzen-primary:#61C2C8;
}
Option 2: Migrate to npm + tailwind.config.js
Best for: Production apps, performance optimization, advanced customization
Benefits:
  • 📦 90% smaller CSS - PurgeCSS removes unused classes (reduces to ~10-30KB)
  • 🎨 Full theme control - Custom colors, fonts, spacing, breakpoints
  • ⚡ JIT mode - Only generate classes you actually use
  • 🔧 Plugins - Access official Tailwind plugins (forms, typography, aspect-ratio)
Migration steps (future enhancement):
# Install Tailwind
npm install -D tailwindcss postcss autoprefixer
# Create config
npx tailwindcss init
# Update tailwind.config.js
module.exports = {
content: ["./**/*.razor", "./**/*.html"],
theme: {
extend: {
colors: {
'cloudzen-teal': '#61C2C8',
}
}
}
}
# Build CSS
npx tailwindcss -i ./wwwroot/css/app.css -o ./wwwroot/css/output.css --minify
Current recommendation: Keep CDN approach for now. The application's current bundle size is acceptable for a portfolio site, and the development simplicity outweighs the performance gains from npm-based setup. Consider migrating when adding significant new features or optimizing for production performance.
Design Patterns & Principles Implemented
SOLID Principles
  • Single Responsibility Principle (SRP)
    •  Each service has one reason to change (ProjectService, ResumeService, EmailServiceFactory)
    •  Components have single, well-defined purposes (ProfileHeader, ProjectCard)
    •  Models represent single entities (ProjectInfo, ServiceInfo, TicketDto)
  • Open/Closed Principle (OCP)
    • IEmailService interface allows alternative email implementations without modifying existing code
    •  Azure Functions API extensible via configuration for different SMTP providers
    •  Component system supports adding features through composition, not modification
  • Liskov Substitution Principle (LSP)
    • IEmailService implementations are interchangeable (e.g., ApiEmailService could be swapped for a direct provider)
    • ITicketService implementations are interchangeable
  • Interface Segregation Principle (ISP)
    •  Focused interfaces (IEmailService, ITicketService, IRateLimiterService) with only necessary methods
    •  No client forced to depend on methods it doesn't use
  • Dependency Inversion Principle (DIP)
    •  High-level components depend on abstractions (IEmailService, ITicketService, IRateLimiterService), not concrete implementations
    •  DI container manages all dependencies via Program.cs registration in both client and API projects
    •  Services injected into components via @inject directive
Design Patterns
  • API Gateway Pattern - Blazor WASM delegates sensitive operations to Azure Functions API (ApiEmailService → SendEmailFunction)
  • Options Pattern - Strongly-typed configuration with IOptions<T> (EmailServiceOptions, BlobStorageOptions, EmailSettings, RateLimitOptions)
  • Service Layer Pattern - Business logic separation (ProjectService, PersonalService, ResumeService, TicketService, ApiEmailService)
  • Repository Pattern - Data access abstraction for projects and services with centralized data management
  • Event Callback Pattern - Type-safe parent-child component communication in Blazor
  • Singleton Pattern - Long-lived services (GoogleCalendarUrlService, TicketService, PollyRateLimiterService) registered as singletons
  • Record Pattern - Immutable data transfer objects (ServiceInfo record type)
  • Resilience Pattern - Polly-based rate limiting and circuit breaker in Azure Functions API
Advanced Techniques
  • Async/Await Pattern - Non-blocking operations throughout (SendEmailAsync, DownloadResumeAsync)
  • Managed Identity Authentication - Azure Identity with DefaultAzureCredential for passwordless Azure service access
  • Configuration Abstraction - IConfiguration and IOptions<T> for environment-specific settings across both projects
  • Logging Integration - ILogger<T> for structured logging in services and Azure Functions
  • Error Handling - InvalidOperationException for missing configuration validation
  • Null Safety - Nullable reference types enabled project-wide (string?, IEnumerable?)
  • LINQ Query Composition - Efficient data filtering and sorting in ProjectService
  • JavaScript Interop - Blazor-JS communication for file downloads and animations
  • Input Sanitization - InputValidator with regex-based XSS pattern detection and HTML encoding
  • Correlation ID Tracking - Request tracing across Azure Functions for debugging and monitoring
DevOps & CI/CD
  • GitHub Actions - Automated CI/CD workflows (Static Web Apps + Azure Functions deployment)
  • Azure Static Web Apps CLI - Local development and testing
  • Docker - Container support for reproducible builds (optional)
  • Git - Version control with branch-based deployment strategies
Monitoring & Analytics
  • Application Insights - Performance monitoring with adaptive sampling and QuickPulse metrics in Azure Functions API
  • Azure Monitor - Infrastructure and application health monitoring
  • Logging Framework - ILogger<T> integration throughout services with structured logging
  • Custom telemetry - Track user interactions, feature usage, and performance bottlenecks
Resilience & Error Handling
  • Retry Logic - Implemented in distributed systems projects (RabbitMQ, Azure Functions)
  • Connection Resiliency - Auto-reconnect for messaging systems and database connections
  • Circuit Breaker - Polly-based circuit breaker in Azure Functions API rate limiter service
  • Health Checks - Continuous monitoring of dependent services (databases, message queues, APIs)
  • Graceful Degradation - Application continues functioning when non-critical services fail
  • Exception Handling - Structured error handling with specific exception types
  • Configuration Validation - Throws InvalidOperationException for missing critical settings
  • Timeout Management - Configurable timeouts for HTTP clients (30s default) in Azure Functions API
  • Idempotency - Ensures operations can be safely retried without side effects
  • Polly Integration - Rate limiting (FixedWindowRateLimiter) and circuit breaker via Polly resilience pipelines in API
  • Async-safe Patterns - All async operations properly handle cancellation and exceptions
📚 Documentation
This project includes comprehensive documentation to help you understand the architecture, deploy to Azure, and maintain security:
⚡ Quick Start
# Clone the repository
git clone https://github.com/dariemcarlosdev/CloudZen.git
# Navigate to projectcd CloudZen
# Restore dependencies
dotnet restore
# Run Blazor WASM client
dotnet run --project CloudZen.csproj
# Run Azure Functions API (separate terminal, requires Azure Functions Core Tools)cd Api
func start
🔐 Security First
Important: Blazor WebAssembly runs entirely in the browser. Never store secrets in appsettings.json. Use Azure Functions backend with Key Vault for secure operations. See SECURITY_ALERT.md for details.
🏗️ Architecture
Blazor WASM (Client) ──→ Azure Functions API (Backend) ──→ Brevo SMTP Relay
(CloudZen) (CloudZen.Api) (Email Delivery)
│ │
│ ├──→ Azure Key Vault (Secrets)
│ ├──→ Application Insights (Telemetry)
│ └──→ Anthropic Claude API (AI Chatbot)
│
└──→ Azure Blob Storage (Resume/Files)

See COMPONENT_ARCHITECTURE.md for detailed component breakdown and data flow.
📦 Project Structure
CloudZen/
├── Api/ # Azure Functions API backend (CloudZen.Api)
│ ├── Functions/ # Azure Function endpoints
│ │ ├── SendEmailFunction.cs # Email proxy to Brevo SMTP
│ │ └── ChatFunction.cs # AI chatbot proxy to Anthropic Claude
│ ├── Models/ # API models (EmailRequest, ChatRequest, ChatResponse, RateLimitOptions)
│ ├── Security/ # Input validation and sanitization (InputValidator)
│ ├── Services/ # API services (PollyRateLimiterService)
│ └── Program.cs # Functions host entry point
├── Layout/ # Layout components (MainLayout, Header, Footer)
├── Models/ # Data models (ProjectInfo, ServiceInfo, EmailApiRequest)
│ └── Options/ # IOptions configuration classes
├── Pages/ # Routable pages (Index)
├── Services/ # Business logic (ProjectService, ApiEmailService, ResumeService)
│ └── Abstractions/ # Service interfaces (IEmailService, ITicketService)
├── Shared/ # Reusable Blazor components
│ ├── Chatbot/ # AI chatbot widget (CloudZenChatbot)
│ ├── Common/ # Shared UI (AnimatedCounterCircle, ScrollToTopButton, Tickets)
│ ├── Landing/ # Landing page sections (Hero, Services, CaseStudies, ContactForm, CTA)
│ ├── Profile/ # Profile components (ProfileHeader, ProfileApproach, SDLCProcess, WhoIAm)
│ └── Projects/ # Project display (ProjectCard, ProjectFilter)
├── wwwroot/ # Static assets, configuration, and index.html
├── .github/workflows/ # CI/CD (azure-functions.yml)
└── Program.cs # Blazor WASM entry point

🚀 Deployment
Ready to deploy? Follow these steps:
  1. Read SECURITY_ALERT.md - Critical security information
  2. Follow DEPLOYMENT_GUIDE.md - Complete setup instructions
  3. Follow AZURE_FUNCTION_DEPLOYMENT.md - Deploy the API backend
  4. Use DEPLOYMENT_CHECKLIST.md - Track your progress
GitHub Actions workflows automatically deploy:
  • Blazor WASM → Azure Static Web Apps (on push to master)
  • Azure Functions API → Azure Function App (on push to master when Api/ changes)
📊 Project Highlights
Architecture & Design Excellence
  • 90% code reduction in WhoIAm page through strategic component decomposition
  • 20+ reusable Blazor components with single responsibility principle

    •  Profile components: ProfileHeader, ProfileApproach, ProfileHighlights, SDLCProcess, WhoIAm
    •  Project components: ProjectCard, ProjectFilter
    •  Landing components: Hero, Services, CaseStudies, ContactForm, CTA, Mission, Testimonials, ValueProposition
    •  Layout components: MainLayout, Header, Footer
    •  Common components: AnimatedCounterCircle, ScrollToTopButton, Tickets
  • Component-based architecture enabling 85% code reusability across pages
  • Centralized business logic with dedicated service layer

    • ProjectService - Portfolio project management and filtering
    • PersonalService - Service offerings and company information
    • ResumeService - Azure Blob integration for document delivery
    • ApiEmailService - Secure email via Azure Functions API backend
    • TicketService - Support incident tracking
    • GoogleCalendarUrlService - Booking integration
Cloud-Native Implementation
  • Serverless architecture with Azure Static Web Apps + Azure Functions (Isolated Worker)
  • Automated deployments via GitHub Actions CI/CD (separate workflows for WASM and Functions)
  • Global CDN distribution for sub-100ms page loads worldwide
  • Auto-scaling infrastructure handling traffic spikes without manual intervention
  • Secure secrets management with Azure Key Vault integration in Azure Functions API
  • CORS-enabled Azure Functions API with configurable allowed origins
  • PWA capabilities with service worker for offline functionality
User Experience & Performance
  • Type-safe filtering with EventCallback pattern for real-time project filtering
  • Animated UI elements including gradient counters and smooth transitions
  • Mobile-first responsive design - Optimized for 320px to 4K displays
  • Accessibility compliance with semantic HTML and ARIA labels
  • Fast page loads - Service worker caching reduces repeat visit load time by 70%
  • Interactive process visualization - SDLC workflow with state management
Security & Best Practices
  • API-first security - Sensitive operations (email, secrets) handled by Azure Functions backend, never in client
  • SOLID principles applied across all services and components for maintainability
  • Dependency injection throughout the application for testability and loose coupling
  • Interface-driven design (IEmailService, ITicketService, IRateLimiterService) for flexibility and testing
  • Nullable reference types enabled project-wide reducing null reference exceptions by 40%
  • Environment-based configuration separating development, staging, and production settings
  • SAS token authentication for secure, time-limited public blob access
  • CSP headers and security-first static web app configuration preventing XSS attacks
  • API key rotation support with zero-downtime provider switching via configuration
  • Validation at boundaries - Input validation in contact form and API (InputValidator with XSS pattern detection)
  • Encapsulation - Private fields with public property accessors (e.g., ResumeService.ResumeBlobUrl)
  • Immutable data models using C# records for thread-safe data transfer (ServiceInfo)
  • Async-first design - All I/O operations use async/await for scalability
  • Resilience patterns - Polly-based rate limiting and circuit breaker in Azure Functions API
  • Configuration validation - Exception throwing for missing critical configuration values
Business Value Delivered
  • Professional portfolio showcasing 8+ real-world projects with measurable results
  • Lead generation via strategic CTAs, validated contact form, and AI chatbot with 5-question conversation cap
  • AI-powered chatbot converting website visitors to consultation leads with knowledge-base-driven responses
  • Automated email delivery with Brevo SMTP relay via secure Azure Functions API backend
  • Resume distribution with download tracking and blob analytics
  • Client onboarding streamlined with Google Calendar integration
  • Support dashboard for incident tracking and response time monitoring
Development Quality
  • Clean Architecture principles with clear layer separation
  • SOLID principles applied to service implementations
  • Comprehensive documentation with inline XML comments and README guides
  • Git workflow with feature branches and protected master
  • Code organization following ASP.NET Core conventions
  • Scalable structure ready for feature expansion (testimonials, blog, admin panel)
Technical Innovations
  • Dynamic case study selection - Automatically surfaces top 3 customer projects with LINQ filtering
  • Business-friendly jargon translation - Converts technical terms for non-technical audiences in real-time
  • Gradient color interpolation - Mathematical color transitions for animated counters using RGB calculations
  • Event-driven architecture - Loose coupling between UI and business logic via EventCallback pattern
  • Secure email pipeline - Client → Azure Functions API → Brevo SMTP relay with rate limiting and input validation
  • AI chatbot pipeline - Blazor WASM → Azure Functions → Anthropic Claude API with token controls, history trimming, and response truncation
  • Multi-layer abuse prevention - Client-side conversation cap + API rate limiting + input validation + system prompt hardening
  • SPA with SEO optimization - Static Web Apps routing and fallback for search engine visibility (staticwebapp.config.json)
  • Retry mechanisms - Implemented in side projects (RabbitMQ connection resiliency, SSIS retry logic)
  • Circuit breaker patterns - Polly-based circuit breaker in Azure Functions rate limiter service
  • Health monitoring - Integrated health checks for distributed systems (RabbitMQ, Azure Functions)
  • Idempotent message processing - Duplicate prevention in event-driven systems
  • Rate limiting - Per-client fixed window rate limiting with Polly in Azure Functions API
  • CQRS pattern - Command-Query Responsibility Segregation with MediatR in microservices
  • Caching strategies - In-memory and distributed caching for performance optimization
  • Delta-based ETL processing - 70% runtime reduction through intelligent data extraction
  • Managed Identity preference - DefaultAzureCredential for passwordless Azure service access
📄 License
This project is licensed under the MIT License. See the LICENSE file for details.
👤 Author
Dariem C. Macias

Principal Consultant, CloudZen Inc.
LinkedIn | GitHub
About
modern Blazor WebAssembly project for CloudZen Inc., showcasing expertise in .NET 8, Azure Cloud, DevOps, AI-driven automation, and enterprise application modernization. Features scalable architecture, CI/CD integration, and a professional portfolio for Dariem C. Macias.
www.cloud-zen.net/
Resources
Readme
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages