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:

<script src="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:

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>

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

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

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

📚 Documentation

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

AI Chatbot Documentation - Complete technical documentation for the AI chatbot including architecture, security layers, token controls, lead conversion strategy, and testing guide.
Component Architecture - Detailed breakdown of the component-based design, including the WhoIAm page refactoring that reduced code by 90%.
Tailwind Custom Colors - Reference guide for CloudZen's custom Tailwind CSS utilities, brand colors, and custom fonts.
Deployment Guide - Step-by-step instructions for deploying to Azure (Static Web Apps, Blob Storage, Key Vault, Azure Functions).
Deployment Checklist - Quick reference checklist for deployment tasks, common issues, and success criteria.
Security Alert - Critical security information about Blazor WebAssembly limitations and proper secret management. Read this first.
Azure Functions Deployment - Guide for deploying the Azure Functions API backend.
Azure Functions Hosting Models - Comparison of Azure Functions hosting models.
Brevo SMTP Migration - Migration guide from Brevo REST API to SMTP relay via MailKit.
Configuration Best Practices - Guidelines for managing configuration across client and API projects.
Configuration Management - Detailed configuration management documentation.
API Security Enhancements - Security features implemented in the Azure Functions API (rate limiting, input validation, CORS).
API Local Testing - Instructions for testing the Azure Functions API locally.

⚡ Quick Start

# Clone the repository
git clone https://github.com/dariemcarlosdev/CloudZen.git

# Navigate to project
cd 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:

Read SECURITY_ALERT.md - Critical security information
Follow DEPLOYMENT_GUIDE.md - Complete setup instructions
Follow AZURE_FUNCTION_DEPLOYMENT.md - Deploy the API backend
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

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

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

📄 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

Name		Name	Last commit message	Last commit date
Latest commit History 203 Commits
.github/workflows		.github/workflows
Api		Api
Layout		Layout
Models		Models
Pages		Pages
Properties		Properties
Services		Services
Shared		Shared
docs		docs
wwwroot		wwwroot
.coderabbit.yaml		.coderabbit.yaml
.gitattributes		.gitattributes
.gitignore		.gitignore
AI_CHATBOT_DOCUMENTATION.md		AI_CHATBOT_DOCUMENTATION.md
AZURE_FUNCTIONS_HOSTING_MODELS.md		AZURE_FUNCTIONS_HOSTING_MODELS.md
AZURE_FUNCTION_DEPLOYMENT.md		AZURE_FUNCTION_DEPLOYMENT.md
App.razor		App.razor
BLUE_GREEN_DEPLOYMENT.md		BLUE_GREEN_DEPLOYMENT.md
COMPONENT_ARCHITECTURE.md		COMPONENT_ARCHITECTURE.md
CONFIGURATION_BEST_PRACTICES.md		CONFIGURATION_BEST_PRACTICES.md
CloudZen.csproj		CloudZen.csproj
CloudZen.sln		CloudZen.sln
CloudZen.slnx		CloudZen.slnx
DEPLOYMENT_CHECKLIST.md		DEPLOYMENT_CHECKLIST.md
DEPLOYMENT_GUIDE.md		DEPLOYMENT_GUIDE.md
Directory.Packages.props		Directory.Packages.props
KNOWN_ISSUES.md		KNOWN_ISSUES.md
Program.cs		Program.cs
QUICK_FIX_RESOLUTION.md		QUICK_FIX_RESOLUTION.md
README.md		README.md
SECURITY_ALERT.md		SECURITY_ALERT.md
TAILWIND_CUSTOM_COLORS.md		TAILWIND_CUSTOM_COLORS.md
_Imports.razor		_Imports.razor

Folders and files

Latest commit

History

Repository files navigation

CloudZen

🚀 Features

Portfolio & Presentation

Business Features

Technical Features

Cloud & DevOps

🛠️ Tech Stack

Frontend Technologies

Cloud Infrastructure (Azure)

External APIs

Backend Services & APIs

Authentication & Security

Development & Build Tools

Tailwind CSS Setup & Architecture

How Tailwind is Set Up

Usage Pattern: Hybrid Approach

Architecture Decision: Why CDN Instead of npm/Config?

Recommendations

Design Patterns & Principles Implemented

SOLID Principles

Design Patterns

Advanced Techniques

DevOps & CI/CD

Monitoring & Analytics

Resilience & Error Handling

📚 Documentation

⚡ Quick Start

🔐 Security First

🏗️ Architecture

📦 Project Structure

🚀 Deployment

📊 Project Highlights

Architecture & Design Excellence

Cloud-Native Implementation

User Experience & Performance

Security & Best Practices

Business Value Delivered

Development Quality

Technical Innovations

📄 License

👤 Author

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages