Changelog

Complete transformation of blog card components across the portfolio with unified hover effects, improved layouts, and enhanced user experience.

Shared Components (packages/ui)

SyndicatedBlogCard Transformation

• Converted to accordion-style component using native HTML <details>/<summary> elements
• Enhanced Spotify UX with PlayCircle icon + “Listen” text
• Removed all site-specific theming for complete theme neutrality
• Added consistent hover:scale-[1.02] transform effects
• Improved layout with better spacing and responsive design

ContentCard Enhancement

• Improved flexbox layout with flex-col for better vertical spacing
• Always-visible “Read More →” footer with configurable text
• Enhanced line clamping to line-clamp-4 for better content display

Site-Specific Improvements

Spoke Sites (promptlab-ch, intellidoc-ch)

• Professional branded titles with focused subtitles
• Single-column stacked layout (flex flex-col gap-8) for optimal readability
• Work-only content filtering for professional focus
• Removed category headers for cleaner presentation

Hub Site (happycode-ch)

• Updated grid layout to grid-cols-1 md:grid-cols-2 for wider cards
• Earlier responsive breakpoint for more substantial card appearance

Technical Implementation

• Fixed import paths from './ui/card' to './ui'
• Replaced Lucide React icons with inline SVG for deployment reliability
• Enhanced accordion interaction without JavaScript dependencies
• Consistent hover effects across all card types

Implemented comprehensive shared UI system in packages/ui with shadcn/ui components, establishing consistent styling and theming across all portfolio applications.

Core Infrastructure

Shared Component Library

• Created @portfolio-monorepo/ui package with shadcn/ui Card component system
• Added Card, CardHeader, CardTitle, CardDescription, CardContent, and CardFooter components
• Implemented React island pattern for client-side interactivity in Astro
• Established canonical pattern for asChild props with dedicated React wrappers

Layout Components

• Migrated Header, Footer, LeftSidebarNav, and MobileMenu to shared components
• Added site-specific theming support via site prop (happycode, promptlab, intellidoc)
• Integrated Alpine.js for mobile menu toggling functionality

Theme System

Light-Mode-First Design

• Migrated from dark-mode-first to clean, modern light-mode-first approach
• Updated shared packages/ui/src/styles/globals.css with standard shadcn/ui design tokens
• White background (--background: 0 0% 100%) with dark text (--foreground: 222.2 84% 4.9%)

Site-Specific Accent Colors

• happycode.ch: Slate blue (#4A6C8C) accent colors
• promptlab.ch: Vibrant green (#A6E22E) accent colors
• intellidoc.ch: Tech teal (#00A99D) accent colors

Layout Architecture

Fixed Sidebar System

• Independent sidebar positioning with fixed left layout
• Main content area properly offset from sidebar
• Sidebar navigation positioned in top third of viewport
• Header controls relocated to top-right for desktop viewports

Grid System Implementation

• Robust CSS Grid layout using md:grid md:grid-cols-[250px_1fr]
• Eliminated conflicting positioning techniques
• Proper two-column layout that expands main content area

Component Enhancements

Professional Card Styling

• Hover effects with hover:scale-[1.02] transforms
• Focus states with proper accessibility support
• Responsive design patterns across all card types
• Consistent typography and spacing

Implemented comprehensive user authentication using Clerk with full internationalization support across all portfolio applications.

Core Authentication Infrastructure

Protected Routes & Middleware

• Added middleware for protected routes (/dashboard, /admin)
• Statically generated sign-in/sign-up pages for both English and German locales
• Verification flows, SSO callbacks, and proper routing patterns for static site deployment
• Support for social login providers with consistent branding

Shared UserStatus Component

• Refactored UserStatus into shared component in packages/ui/src/components/auth/UserStatus.astro
• Site-specific theming support via site prop for proper accent color application:
  • happycode.ch: Slate blue (#4A6C8C) accent
  • promptlab.ch: Vibrant green (#A6E22E) accent
  • intellidoc.ch: Tech teal (#00A99D) accent
• Reduced code duplication while maintaining visual consistency

Internationalization Support

Multi-Language Authentication

• Full i18n support for authentication flows
• Language-specific authentication pages (/en/sign-in, /de/sign-in)
• Localized user interface elements and error messages
• Proper routing for different language contexts

Static Site Deployment

• Optimized for Vercel deployment with pre-generated authentication pages
• Environment variables configured for production deployment
• Seamless integration with Astro’s static site generation

Integration Features

Layout Integration

• Updated all Layout.astro files to use shared UserStatus component
• Proper positioning in header top-right for desktop viewports
• Mobile-responsive authentication controls
• Consistent authentication UI across all portfolio sites

Development Experience

• Centralized authentication configuration
• Type-safe authentication state management
• Simplified component integration across applications

Implemented complete end-to-end and component testing framework with Playwright configuration, accessibility compliance validation, and internationalization testing support across all portfolio applications.

E2E Testing with Playwright

Navigation & Functionality Tests

• Comprehensive Playwright E2E tests for navigation functionality
• Language switching validation for English/German locales
• Responsive design testing across multiple viewports (desktop, tablet, mobile)
• HTML structure verification and semantic validation

Cross-Browser Compatibility

• Testing across Chromium, Firefox, and WebKit engines
• Browser compatibility validation with detailed HTML reporting
• Performance benchmarking with response time validation
• Error handling validation for edge cases

API Testing Framework

Syndication API Testing

• API integration tests for content syndication between hub and spoke sites
• Canonical link verification and metadata validation
• Schema validation for syndication responses with TypeScript interfaces
• Load testing with concurrent requests for performance validation

Framework Classes

• ApiEnvironment: Multi-environment endpoint configuration (dev/staging/production)
• SchemaValidator: Response validation for syndication/blog post/pagination
• TestDataGenerator: Utilities for creating comprehensive test fixtures
• PerformanceValidator: Response time and caching validation
• AuthHelpers: Authentication testing preparation for protected routes

Accessibility Testing

WCAG 2.1 AA Compliance

• Comprehensive accessibility compliance tests covering:
  • Keyboard navigation and focus management
  • Screen reader compatibility and semantic structure
  • Form accessibility and error handling
  • Color contrast and visual accessibility requirements

Component Testing

• Shared UI element testing across all applications
• Site-specific theming validation (blue, green, teal accent colors)
• Focus state and hover effect testing
• Mobile responsiveness and touch interaction testing

Storybook Integration

Component Development

• Storybook 9.0.12 integration with Vite builder
• Tailwind CSS integration with theme switching capabilities
• Comprehensive Header component stories with 6 variants
• Site-specific accent color theming in component stories

Development Workflow

• CI/CD integration readiness for automated testing workflows
• Test fixtures and error handling for incomplete features
• TypeScript support throughout testing infrastructure
• Visual regression testing capabilities

Technical Implementation

Monorepo Testing Strategy

• Centralized Playwright configuration at monorepo root
• Shared test utilities and helpers across applications
• Cross-application testing for content syndication validation
• Internationalization testing for language routing and content delivery

Implemented comprehensive internationalization (i18n) system using Astro’s built-in i18n configuration, enabling seamless multi-language support across all portfolio applications.

Core i18n Architecture

Language Routing

• Astro’s native i18n configuration with defaultLocale: 'en' and locales: ['en', 'de']
• Language-prefixed routing structure (/en/, /de/) for all applications
• redirectToDefaultLocale: true for seamless server-side language routing
• Eliminated visible “Redirecting from / to /en” messages with proper server-side redirects

URL Structure

• Consistent language routing pattern across all applications
• Dynamic routing with [lang] parameter for internationalized pages
• Proper fallback handling for root URL access
• Clean URL generation with language context preservation

Shared Components

LanguageSwitcher Integration

• Shared LanguageSwitcher component from @portfolio-monorepo/ui
• Support for English (EN) and German (DE) locale switching
• Positioned at bottom of sidebar with consistent styling
• Dynamic URL generation maintaining page context during language switching

Layout Component Updates

• Updated all Layout.astro components to handle language parameters
• Proper integration with Astro.currentLocale for reliable language detection
• Consistent language handling across all page templates

Content Localization

Language-Specific Content

• Content collection filtering based on language parameters
• Proper TypeScript integration with language-aware content fetching
• Support for multilingual content authoring and validation
• Schema support for language-specific metadata

Fallback Strategies

• Professional fallback landing page content to prevent redirect visibility
• Graceful handling of missing translations
• Consistent user experience across language switches

Technical Implementation

Build System Integration

• Language-filtered content at build time for optimal performance
• Static site generation with proper language routing
• SEO optimization with language-specific meta tags and structured data
• Proper canonical URL handling for multilingual content

Development Experience

• Type-safe language handling throughout applications
• Consistent i18n patterns across all portfolio sites
• Simplified component integration with shared language utilities
• Enhanced development workflow with language-aware tooling

Established foundational monorepo architecture with pnpm + Turborepo, shared UI components, and standardized development workflow across all portfolio applications.

Monorepo Infrastructure

Build System

• pnpm workspace configuration with Turborepo for efficient builds
• Shared dependency management and version synchronization
• Optimized build caching and parallel execution strategies
• Unified development scripts and deployment workflows

Package Structure

• packages/ui: Shared component library with @portfolio-monorepo/ui
• Individual applications: apps/happycode-ch, apps/promptlab-ch, apps/intellidoc-ch
• Centralized Tailwind CSS configuration and design tokens
• Shared utilities and common development dependencies

Astro Framework Integration

Static Site Generation

• Astro-based architecture for optimal performance and SEO
• Content collections system for structured content management
• Internationalization support with language-prefixed routing
• TypeScript integration throughout all applications

Layout Architecture

• Consistent layout patterns with Header, Footer, and Sidebar components
• Mobile-responsive navigation with hamburger menu integration
• Professional styling with clean, modern design principles

Development Experience

Shared Configuration

• Unified Tailwind CSS preset across applications
• Consistent TypeScript configuration and linting rules
• Shared development tools and build optimization
• Standardized project structure and naming conventions

Content Management

• Content collections schema for blogs, galleries, and specialized content
• Markdown-based content authoring with frontmatter validation
• SEO optimization with structured data and meta tag management

Deployment Strategy

Vercel Integration

• Optimized deployment configuration for each application
• Environment variable management for production secrets
• Static site deployment with proper routing and caching
• Automated CI/CD pipeline with preview deployments

Performance Optimization

• Build-time optimization and asset bundling
• Image optimization and lazy loading strategies
• Content delivery optimization with proper caching headers