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
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
Factory Pattern - Email service factory supporting multiple providers (Brevo, SendGrid, SMTP)
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 architecture (via Azure Functions backend)
CI/CD Pipeline - Automated build, test, and deployment on push to master branch
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)
Azure Functions - Serverless backend for secure API operations (recommended architecture)
Azure Table Storage - NoSQL storage for ticket/incident data
Azure Application Insights - Real-time monitoring and telemetry

Backend Services & APIs

Brevo Email API (sib_api_v3_sdk) - Transactional email delivery service
SendGrid - Alternative email provider with robust delivery infrastructure
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 (v1.13.2) - Managed Identity and credential management
Azure Key Vault Configuration - Secure runtime configuration loading
SAS Tokens - Secure, time-limited access to blob storage resources
CORS Configuration - Cross-origin resource sharing for API security
Content Security Policy - HTTP headers for XSS protection

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

Factory Pattern - Email service provider abstraction (EmailServiceFactory) with runtime provider selection
Strategy Pattern - Multiple email provider implementations via IEmailProvider interface (Brevo, SendGrid, SMTP)
Service Layer Pattern - Business logic separation (ProjectService, PersonalService, ResumeService, TicketService)
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) registered as singletons
Builder Pattern - Azure client factory builder for Azure SDK services configuration
Record Pattern - Immutable data transfer objects (ServiceInfo record type)

Advanced Techniques

Async/Await Pattern - Non-blocking operations throughout (SendEmailAsync, DownloadResumeAsync)
Managed Identity Authentication - Azure Identity for passwordless Azure service access
Extension Methods - Custom AzureClientFactoryBuilderExtensions for Azure SDK configuration
Configuration Abstraction - IConfiguration for environment-specific settings
Logging Integration - ILogger<T> for structured logging in services
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

DevOps & CI/CD

GitHub Actions - Automated CI/CD workflows
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, exception tracking, and custom telemetry
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:

Component Architecture - Detailed breakdown of the component-based design, including the WhoIAm page refactoring that reduced code by 90%. Learn about ProfileHeader, ProfileApproach, ProfileHighlights, ProjectCard, and ProjectFilter components, plus the ProjectService data layer.
Tailwind Custom Colors - Complete reference guide for CloudZen's custom Tailwind CSS utilities. Learn how to use brand colors (cloudzen-teal, cloudzen-blue) and custom fonts (font-ibm-plex) with practical examples and migration strategies.
Deployment Guide - Complete step-by-step instructions for deploying to Azure, including Static Web Apps, Blob Storage, Key Vault, Azure Functions backend setup, and CORS configuration. Essential reading before deployment.
Deployment Checklist - Quick reference checklist with all tasks, common issues, and success criteria. Perfect for tracking your deployment progress and troubleshooting.
Security Alert - Critical security information about Blazor WebAssembly limitations and proper secret management. Read this first to avoid exposing API keys and understand the required Azure Functions architecture.

⚡ Quick Start

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

# Navigate to project
cd CloudZen

# Restore dependencies
dotnet restore

# Run locally
dotnet run

🔐 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 (Backend) → Azure Services
                              ↓
                       Azure Key Vault (Secrets)

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

📦 Project Structure

CloudZen/
├── Models/              # Data models (ProjectInfo, ProjectParticipant)
├── Services/            # Business logic (ProjectService, EmailService)
├── Shared/              # Reusable components
│   ├── Profile/        # Profile components
│   ├── Projects/       # Project display components
│   └── WhoIAm.razor    # Main portfolio page
├── wwwroot/            # Static assets and configuration
└── Program.cs          # Application entry point

🚀 Deployment

Ready to deploy? Follow these steps:

Read SECURITY_ALERT.md - Critical security information
Follow DEPLOYMENT_GUIDE.md - Complete setup instructions
Use DEPLOYMENT_CHECKLIST.md - Track your progress

The GitHub Actions workflow automatically deploys to Azure Static Web Apps on push to master.

📊 Project Highlights

Architecture & Design Excellence

Cloud-Native Implementation

Serverless architecture with Azure Static Web Apps + Functions
Zero-downtime deployments via GitHub Actions CI/CD
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 architecture
CORS-enabled Blob Storage for seamless cross-origin file access
PWA capabilities with service worker for offline functionality (PWA stand for Progressive Web App)

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 and validated contact form
Automated email delivery with 99.9% delivery rate via Brevo/SendGrid
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 132 Commits
.github/workflows		.github/workflows
Layout		Layout
Models		Models
Pages		Pages
Properties		Properties
Services		Services
Shared		Shared
wwwroot		wwwroot
.gitattributes		.gitattributes
.gitignore		.gitignore
App.razor		App.razor
AzureClientFactoryBuilderExtensions.cs		AzureClientFactoryBuilderExtensions.cs
COMPONENT_ARCHITECTURE.md		COMPONENT_ARCHITECTURE.md
CloudZen.csproj		CloudZen.csproj
CloudZen.sln		CloudZen.sln
DEPLOYMENT_CHECKLIST.md		DEPLOYMENT_CHECKLIST.md
DEPLOYMENT_GUIDE.md		DEPLOYMENT_GUIDE.md
Program.cs		Program.cs
README.md		README.md
SECURITY_ALERT.md		SECURITY_ALERT.md
TAILWIND_CUSTOM_COLORS.md		TAILWIND_CUSTOM_COLORS.md
_Imports.razor		_Imports.razor

dariemcarlosdev/CloudZen

Folders and files

Latest commit

History

Repository files navigation