Fix ActivityFeed hydration error: Move localStorage read to useEffect to prevent server/client mismatch

- Improve localStorage access in ActivityFeed, ChatWidget, and AdminPage with try-catch blocks to handle potential errors gracefully.
- Update performance tracking in AnalyticsProvider and analytics.ts to ensure robust error handling and prevent failures from affecting user experience.
- Refactor Web Vitals tracking to include error handling for observer initialization and data collection.
- Ensure consistent handling of hydration mismatches in components like BackgroundBlobs and ChatWidget to improve rendering reliability.

.dockerignore

@@ -0,0 +1,64 @@
+# Dependencies
+node_modules
+npm-debug.log
+yarn-error.log
+
+# Next.js
+.next
+out
+build
+dist
+
+# Testing
+coverage
+.nyc_output
+test-results
+playwright-report
+
+# Environment files
+.env
+.env.local
+.env*.local
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Git
+.git
+.gitignore
+.gitattributes
+
+# Documentation
+*.md
+docs
+!README.md
+
+# Logs
+logs
+*.log
+
+# Docker
+Dockerfile*
+docker-compose*.yml
+.dockerignore
+
+# CI/CD
+.gitea
+.github
+
+# Scripts (keep only essential ones)
+scripts
+!scripts/init-db.sql
+
+# Misc
+.cache
+.temp
+tmp

.gitea/workflows/ci-cd-fast.yml.disabled

@@ -1,318 +0,0 @@
-name: CI/CD Pipeline (Fast)
-
-on:
-  push:
-    branches: [ production ]
-
-env:
-  NODE_VERSION: '20'
-  DOCKER_IMAGE: portfolio-app
-  CONTAINER_NAME: portfolio-app
-
-jobs:
-  production:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Setup Node.js (Fast)
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          # Disable cache to avoid slow validation
-          cache: ''
-
-      - name: Cache npm dependencies
-        uses: actions/cache@v3
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
-
-      - name: Install dependencies
-        run: npm ci --prefer-offline --no-audit
-
-      - name: Run linting
-        run: npm run lint
-
-      - name: Run tests
-        run: npm run test
-
-      - name: Build application
-        run: npm run build
-
-      - name: Run security scan
-        run: |
-          echo "🔍 Running npm audit..."
-          npm audit --audit-level=high || echo "⚠️ Some vulnerabilities found, but continuing..."
-
-      - name: Build Docker image
-        run: |
-          docker build -t ${{ env.DOCKER_IMAGE }}:latest .
-          docker tag ${{ env.DOCKER_IMAGE }}:latest ${{ env.DOCKER_IMAGE }}:$(date +%Y%m%d-%H%M%S)
-
-      - name: Prepare for zero-downtime deployment
-        run: |
-          echo "🚀 Preparing zero-downtime deployment..."
-          
-          # Check if current container is running
-          if docker ps -q -f name=portfolio-app | grep -q .; then
-            echo "📊 Current container is running, proceeding with zero-downtime update"
-            CURRENT_CONTAINER_RUNNING=true
-          else
-            echo "📊 No current container running, doing fresh deployment"
-            CURRENT_CONTAINER_RUNNING=false
-          fi
-          
-          # Ensure database and redis are running
-          echo "🔧 Ensuring database and redis are running..."
-          docker compose up -d postgres redis
-          
-          # Wait for services to be ready
-          sleep 10
-
-      - name: Verify secrets and variables before deployment
-        run: |
-          echo "🔍 Verifying secrets and variables..."
-          
-          # Check Variables
-          if [ -z "${{ vars.NEXT_PUBLIC_BASE_URL }}" ]; then
-            echo "❌ NEXT_PUBLIC_BASE_URL variable is missing!"
-            exit 1
-          fi
-          if [ -z "${{ vars.MY_EMAIL }}" ]; then
-            echo "❌ MY_EMAIL variable is missing!"
-            exit 1
-          fi
-          if [ -z "${{ vars.MY_INFO_EMAIL }}" ]; then
-            echo "❌ MY_INFO_EMAIL variable is missing!"
-            exit 1
-          fi
-          
-          # Check Secrets
-          if [ -z "${{ secrets.MY_PASSWORD }}" ]; then
-            echo "❌ MY_PASSWORD secret is missing!"
-            exit 1
-          fi
-          if [ -z "${{ secrets.MY_INFO_PASSWORD }}" ]; then
-            echo "❌ MY_INFO_PASSWORD secret is missing!"
-            exit 1
-          fi
-          if [ -z "${{ secrets.ADMIN_BASIC_AUTH }}" ]; then
-            echo "❌ ADMIN_BASIC_AUTH secret is missing!"
-            exit 1
-          fi
-          
-          echo "✅ All required secrets and variables are present"
-
-      - name: Deploy with zero downtime
-        run: |
-          echo "🚀 Deploying with zero downtime..."
-          
-          if [ "$CURRENT_CONTAINER_RUNNING" = "true" ]; then
-            echo "🔄 Performing rolling update..."
-            
-            # Generate unique container name
-            TIMESTAMP=$(date +%s)
-            TEMP_CONTAINER_NAME="portfolio-app-temp-$TIMESTAMP"
-            echo "🔧 Using temporary container name: $TEMP_CONTAINER_NAME"
-            
-            # Clean up any existing temporary containers
-            echo "🧹 Cleaning up any existing temporary containers..."
-            
-            # Remove specific known problematic containers
-            docker rm -f portfolio-app-new portfolio-app-temp-* portfolio-app-backup || true
-            
-            # Find and remove any containers with portfolio-app in the name (except the main one)
-            EXISTING_CONTAINERS=$(docker ps -a --format "table {{.Names}}" | grep "portfolio-app" | grep -v "^portfolio-app$" || true)
-            if [ -n "$EXISTING_CONTAINERS" ]; then
-              echo "🗑️ Removing existing portfolio-app containers:"
-              echo "$EXISTING_CONTAINERS"
-              echo "$EXISTING_CONTAINERS" | xargs -r docker rm -f || true
-            fi
-            
-            # Also clean up any stopped containers
-            docker container prune -f || true
-            
-            # Start new container with unique temporary name (no port mapping needed for health check)
-            docker run -d \
-              --name $TEMP_CONTAINER_NAME \
-              --restart unless-stopped \
-              --network portfolio_net \
-              -e NODE_ENV=${{ vars.NODE_ENV }} \
-              -e LOG_LEVEL=${{ vars.LOG_LEVEL }} \
-              -e DATABASE_URL=postgresql://portfolio_user:portfolio_pass@postgres:5432/portfolio_db?schema=public \
-              -e REDIS_URL=redis://redis:6379 \
-              -e NEXT_PUBLIC_BASE_URL="${{ vars.NEXT_PUBLIC_BASE_URL }}" \
-              -e NEXT_PUBLIC_UMAMI_URL="${{ vars.NEXT_PUBLIC_UMAMI_URL }}" \
-              -e NEXT_PUBLIC_UMAMI_WEBSITE_ID="${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}" \
-              -e MY_EMAIL="${{ vars.MY_EMAIL }}" \
-              -e MY_INFO_EMAIL="${{ vars.MY_INFO_EMAIL }}" \
-              -e MY_PASSWORD="${{ secrets.MY_PASSWORD }}" \
-              -e MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}" \
-              -e ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}" \
-              ${{ env.DOCKER_IMAGE }}:latest
-            
-            # Wait for new container to be ready
-            echo "⏳ Waiting for new container to be ready..."
-            sleep 15
-            
-            # Health check new container using docker exec
-            for i in {1..20}; do
-              if docker exec $TEMP_CONTAINER_NAME curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
-                echo "✅ New container is healthy!"
-                break
-              fi
-              echo "⏳ Health check attempt $i/20..."
-              sleep 3
-            done
-            
-            # Stop old container
-            echo "🛑 Stopping old container..."
-            docker stop portfolio-app || true
-            
-            # Remove old container
-            docker rm portfolio-app || true
-            
-            # Rename new container
-            docker rename $TEMP_CONTAINER_NAME portfolio-app
-            
-            # Update port mapping
-            docker stop portfolio-app
-            docker rm portfolio-app
-            
-            # Start with correct port
-            docker run -d \
-              --name portfolio-app \
-              --restart unless-stopped \
-              --network portfolio_net \
-              -p 3000:3000 \
-              -e NODE_ENV=${{ vars.NODE_ENV }} \
-              -e LOG_LEVEL=${{ vars.LOG_LEVEL }} \
-              -e DATABASE_URL=postgresql://portfolio_user:portfolio_pass@postgres:5432/portfolio_db?schema=public \
-              -e REDIS_URL=redis://redis:6379 \
-              -e NEXT_PUBLIC_BASE_URL="${{ vars.NEXT_PUBLIC_BASE_URL }}" \
-              -e NEXT_PUBLIC_UMAMI_URL="${{ vars.NEXT_PUBLIC_UMAMI_URL }}" \
-              -e NEXT_PUBLIC_UMAMI_WEBSITE_ID="${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}" \
-              -e MY_EMAIL="${{ vars.MY_EMAIL }}" \
-              -e MY_INFO_EMAIL="${{ vars.MY_INFO_EMAIL }}" \
-              -e MY_PASSWORD="${{ secrets.MY_PASSWORD }}" \
-              -e MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}" \
-              -e ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}" \
-              ${{ env.DOCKER_IMAGE }}:latest
-              
-            echo "✅ Rolling update completed!"
-          else
-            echo "🆕 Fresh deployment..."
-            docker compose up -d
-          fi
-        env:
-          NODE_ENV: ${{ vars.NODE_ENV }}
-          LOG_LEVEL: ${{ vars.LOG_LEVEL }}
-          NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL }}
-          NEXT_PUBLIC_UMAMI_URL: ${{ vars.NEXT_PUBLIC_UMAMI_URL }}
-          NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}
-          MY_EMAIL: ${{ vars.MY_EMAIL }}
-          MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}
-          MY_PASSWORD: ${{ secrets.MY_PASSWORD }}
-          MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD }}
-          ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH }}
-
-      - name: Wait for container to be ready
-        run: |
-          echo "⏳ Waiting for container to be ready..."
-          sleep 15
-          
-          # Check if container is actually running
-          if ! docker ps --filter "name=portfolio-app" --format "{{.Names}}" | grep -q "portfolio-app"; then
-            echo "❌ Container failed to start"
-            echo "Container logs:"
-            docker logs portfolio-app --tail=50
-            exit 1
-          fi
-          
-          # Wait for health check with better error handling
-          echo "🏥 Performing health check..."
-          for i in {1..40}; do
-            # First try direct access to port 3000
-            if curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
-              echo "✅ Application is healthy (direct access)!"
-              break
-            fi
-            
-            # If direct access fails, try through docker exec (internal container check)
-            if docker exec portfolio-app curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
-              echo "✅ Application is healthy (internal check)!"
-              # Check if port is properly exposed
-              if ! curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
-                echo "⚠️ Application is running but port 3000 is not exposed to host"
-                echo "This might be expected in some deployment configurations"
-                break
-              fi
-            fi
-            
-            # Check if container is still running
-            if ! docker ps --filter "name=portfolio-app" --format "{{.Names}}" | grep -q "portfolio-app"; then
-              echo "❌ Container stopped during health check"
-              echo "Container logs:"
-              docker logs portfolio-app --tail=50
-              exit 1
-            fi
-            
-            echo "⏳ Health check attempt $i/40..."
-            sleep 3
-          done
-          
-          # Final health check - try both methods
-          if docker exec portfolio-app curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
-            echo "✅ Final health check passed (internal)"
-            # Try external access if possible
-            if curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
-              echo "✅ External access also working"
-            else
-              echo "⚠️ External access not available (port not exposed)"
-            fi
-          else
-            echo "❌ Health check timeout - application not responding"
-            echo "Container logs:"
-            docker logs portfolio-app --tail=100
-            exit 1
-          fi
-
-      - name: Health check
-        run: |
-          echo "🔍 Final health verification..."
-          
-          # Check container status
-          docker ps --filter "name=portfolio-app" --format "table {{.Names}}\t{{.Status}}\t{{.Ports}}"
-          
-          # Test health endpoint - try both methods
-          echo "🏥 Testing health endpoint..."
-          if curl -f http://localhost:3000/api/health; then
-            echo "✅ Health endpoint accessible externally"
-          elif docker exec portfolio-app curl -f http://localhost:3000/api/health; then
-            echo "✅ Health endpoint accessible internally (external port not exposed)"
-          else
-            echo "❌ Health endpoint not accessible"
-            exit 1
-          fi
-          
-          # Test main page - try both methods
-          echo "🌐 Testing main page..."
-          if curl -f http://localhost:3000/ > /dev/null; then
-            echo "✅ Main page is accessible externally"
-          elif docker exec portfolio-app curl -f http://localhost:3000/ > /dev/null; then
-            echo "✅ Main page is accessible internally (external port not exposed)"
-          else
-            echo "❌ Main page is not accessible"
-            exit 1
-          fi
-          
-          echo "✅ Deployment successful!"
-
-      - name: Cleanup old images
-        run: |
-          docker image prune -f
-          docker system prune -f

.gitea/workflows/ci-cd-fixed.yml.disabled

@@ -1,153 +0,0 @@
-name: CI/CD Pipeline (Fixed & Reliable)
-
-on:
-  push:
-    branches: [ production ]
-
-env:
-  NODE_VERSION: '20'
-  DOCKER_IMAGE: portfolio-app
-  CONTAINER_NAME: portfolio-app
-
-jobs:
-  production:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run linting
-        run: npm run lint
-
-      - name: Run tests
-        run: npm run test
-
-      - name: Build application
-        run: npm run build
-
-      - name: Run security scan
-        run: |
-          echo "🔍 Running npm audit..."
-          npm audit --audit-level=high || echo "⚠️ Some vulnerabilities found, but continuing..."
-
-      - name: Build Docker image
-        run: |
-          echo "🏗️ Building Docker image..."
-          docker build -t ${{ env.DOCKER_IMAGE }}:latest .
-          docker tag ${{ env.DOCKER_IMAGE }}:latest ${{ env.DOCKER_IMAGE }}:$(date +%Y%m%d-%H%M%S)
-          echo "✅ Docker image built successfully"
-
-      - name: Deploy with fixed configuration
-        run: |
-          echo "🚀 Deploying with fixed configuration..."
-          
-          # Export environment variables with defaults
-          export NODE_ENV="${NODE_ENV:-production}"
-          export LOG_LEVEL="${LOG_LEVEL:-info}"
-          export NEXT_PUBLIC_BASE_URL="${NEXT_PUBLIC_BASE_URL:-https://dk0.dev}"
-          export NEXT_PUBLIC_UMAMI_URL="${NEXT_PUBLIC_UMAMI_URL:-https://analytics.dk0.dev}"
-          export NEXT_PUBLIC_UMAMI_WEBSITE_ID="${NEXT_PUBLIC_UMAMI_WEBSITE_ID:-b3665829-927a-4ada-b9bb-fcf24171061e}"
-          export MY_EMAIL="${MY_EMAIL:-contact@dk0.dev}"
-          export MY_INFO_EMAIL="${MY_INFO_EMAIL:-info@dk0.dev}"
-          export MY_PASSWORD="${MY_PASSWORD:-your-email-password}"
-          export MY_INFO_PASSWORD="${MY_INFO_PASSWORD:-your-info-email-password}"
-          export ADMIN_BASIC_AUTH="${ADMIN_BASIC_AUTH:-admin:your_secure_password_here}"
-          
-          echo "📝 Environment variables configured:"
-          echo "  - NODE_ENV: ${NODE_ENV}"
-          echo "  - NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL}"
-          echo "  - MY_EMAIL: ${MY_EMAIL}"
-          echo "  - MY_INFO_EMAIL: ${MY_INFO_EMAIL}"
-          echo "  - MY_PASSWORD: [SET]"
-          echo "  - MY_INFO_PASSWORD: [SET]"
-          echo "  - ADMIN_BASIC_AUTH: [SET]"
-          echo "  - LOG_LEVEL: ${LOG_LEVEL}"
-          
-          # Stop old containers
-          echo "🛑 Stopping old containers..."
-          docker compose down || true
-          
-          # Clean up orphaned containers
-          echo "🧹 Cleaning up orphaned containers..."
-          docker compose down --remove-orphans || true
-          
-          # Start new containers
-          echo "🚀 Starting new containers..."
-          docker compose up -d
-          
-          echo "✅ Deployment completed!"
-        env:
-          NODE_ENV: ${{ vars.NODE_ENV || 'production' }}
-          LOG_LEVEL: ${{ vars.LOG_LEVEL || 'info' }}
-          NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL || 'https://dk0.dev' }}
-          NEXT_PUBLIC_UMAMI_URL: ${{ vars.NEXT_PUBLIC_UMAMI_URL || 'https://analytics.dk0.dev' }}
-          NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID || 'b3665829-927a-4ada-b9bb-fcf24171061e' }}
-          MY_EMAIL: ${{ vars.MY_EMAIL || 'contact@dk0.dev' }}
-          MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL || 'info@dk0.dev' }}
-          MY_PASSWORD: ${{ secrets.MY_PASSWORD || 'your-email-password' }}
-          MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD || 'your-info-email-password' }}
-          ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH || 'admin:your_secure_password_here' }}
-
-      - name: Wait for containers to be ready
-        run: |
-          echo "⏳ Waiting for containers to be ready..."
-          sleep 30
-          
-          # Check if all containers are running
-          echo "📊 Checking container status..."
-          docker compose ps
-          
-          # Wait for application container to be healthy
-          echo "🏥 Waiting for application container to be healthy..."
-          for i in {1..30}; do
-            if docker exec portfolio-app curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
-              echo "✅ Application container is healthy!"
-              break
-            fi
-            echo "⏳ Waiting for application container... ($i/30)"
-            sleep 3
-          done
-
-      - name: Health check
-        run: |
-          echo "🔍 Running comprehensive health checks..."
-          
-          # Check container status
-          echo "📊 Container status:"
-          docker compose ps
-          
-          # Check application container
-          echo "🏥 Checking application container..."
-          if docker exec portfolio-app curl -f http://localhost:3000/api/health; then
-            echo "✅ Application health check passed!"
-          else
-            echo "❌ Application health check failed!"
-            docker logs portfolio-app --tail=50
-            exit 1
-          fi
-          
-          # Check main page
-          if curl -f http://localhost:3000/ > /dev/null; then
-            echo "✅ Main page is accessible!"
-          else
-            echo "❌ Main page is not accessible!"
-            exit 1
-          fi
-          
-          echo "✅ All health checks passed! Deployment successful!"
-
-      - name: Cleanup old images
-        run: |
-          echo "🧹 Cleaning up old images..."
-          docker image prune -f
-          docker system prune -f
-          echo "✅ Cleanup completed"

.gitea/workflows/ci-cd-reliable.yml.disabled

@@ -1,177 +0,0 @@
-name: CI/CD Pipeline (Reliable & Simple)
-
-on:
-  push:
-    branches: [ production ]
-
-env:
-  NODE_VERSION: '20'
-  DOCKER_IMAGE: portfolio-app
-  CONTAINER_NAME: portfolio-app
-
-jobs:
-  production:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run linting
-        run: npm run lint
-
-      - name: Run tests
-        run: npm run test
-
-      - name: Build application
-        run: npm run build
-
-      - name: Run security scan
-        run: |
-          echo "🔍 Running npm audit..."
-          npm audit --audit-level=high || echo "⚠️ Some vulnerabilities found, but continuing..."
-
-      - name: Verify secrets and variables
-        run: |
-          echo "🔍 Verifying secrets and variables..."
-          
-          # Check Variables
-          if [ -z "${{ vars.NEXT_PUBLIC_BASE_URL }}" ]; then
-            echo "❌ NEXT_PUBLIC_BASE_URL variable is missing!"
-            exit 1
-          fi
-          if [ -z "${{ vars.MY_EMAIL }}" ]; then
-            echo "❌ MY_EMAIL variable is missing!"
-            exit 1
-          fi
-          if [ -z "${{ vars.MY_INFO_EMAIL }}" ]; then
-            echo "❌ MY_INFO_EMAIL variable is missing!"
-            exit 1
-          fi
-          
-          # Check Secrets
-          if [ -z "${{ secrets.MY_PASSWORD }}" ]; then
-            echo "❌ MY_PASSWORD secret is missing!"
-            exit 1
-          fi
-          if [ -z "${{ secrets.MY_INFO_PASSWORD }}" ]; then
-            echo "❌ MY_INFO_PASSWORD secret is missing!"
-            exit 1
-          fi
-          if [ -z "${{ secrets.ADMIN_BASIC_AUTH }}" ]; then
-            echo "❌ ADMIN_BASIC_AUTH secret is missing!"
-            exit 1
-          fi
-          
-          echo "✅ All required secrets and variables are present"
-
-      - name: Build Docker image
-        run: |
-          echo "🏗️ Building Docker image..."
-          docker build -t ${{ env.DOCKER_IMAGE }}:latest .
-          docker tag ${{ env.DOCKER_IMAGE }}:latest ${{ env.DOCKER_IMAGE }}:$(date +%Y%m%d-%H%M%S)
-          echo "✅ Docker image built successfully"
-
-      - name: Deploy with database services
-        run: |
-          echo "🚀 Deploying with database services..."
-          
-          # Export environment variables
-          export NODE_ENV="${{ vars.NODE_ENV }}"
-          export LOG_LEVEL="${{ vars.LOG_LEVEL }}"
-          export NEXT_PUBLIC_BASE_URL="${{ vars.NEXT_PUBLIC_BASE_URL }}"
-          export NEXT_PUBLIC_UMAMI_URL="${{ vars.NEXT_PUBLIC_UMAMI_URL }}"
-          export NEXT_PUBLIC_UMAMI_WEBSITE_ID="${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}"
-          export MY_EMAIL="${{ vars.MY_EMAIL }}"
-          export MY_INFO_EMAIL="${{ vars.MY_INFO_EMAIL }}"
-          export MY_PASSWORD="${{ secrets.MY_PASSWORD }}"
-          export MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}"
-          export ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}"
-          
-          # Stop old containers
-          echo "🛑 Stopping old containers..."
-          docker compose down || true
-          
-          # Clean up orphaned containers
-          echo "🧹 Cleaning up orphaned containers..."
-          docker compose down --remove-orphans || true
-          
-          # Start new containers
-          echo "🚀 Starting new containers..."
-          docker compose up -d
-          
-          echo "✅ Deployment completed!"
-        env:
-          NODE_ENV: ${{ vars.NODE_ENV }}
-          LOG_LEVEL: ${{ vars.LOG_LEVEL }}
-          NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL }}
-          NEXT_PUBLIC_UMAMI_URL: ${{ vars.NEXT_PUBLIC_UMAMI_URL }}
-          NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}
-          MY_EMAIL: ${{ vars.MY_EMAIL }}
-          MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}
-          MY_PASSWORD: ${{ secrets.MY_PASSWORD }}
-          MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD }}
-          ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH }}
-
-      - name: Wait for containers to be ready
-        run: |
-          echo "⏳ Waiting for containers to be ready..."
-          sleep 20
-          
-          # Check if all containers are running
-          echo "📊 Checking container status..."
-          docker compose ps
-          
-          # Wait for application container to be healthy
-          echo "🏥 Waiting for application container to be healthy..."
-          for i in {1..30}; do
-            if docker exec portfolio-app curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
-              echo "✅ Application container is healthy!"
-              break
-            fi
-            echo "⏳ Waiting for application container... ($i/30)"
-            sleep 3
-          done
-
-      - name: Health check
-        run: |
-          echo "🔍 Running comprehensive health checks..."
-          
-          # Check container status
-          echo "📊 Container status:"
-          docker compose ps
-          
-          # Check application container
-          echo "🏥 Checking application container..."
-          if docker exec portfolio-app curl -f http://localhost:3000/api/health; then
-            echo "✅ Application health check passed!"
-          else
-            echo "❌ Application health check failed!"
-            docker logs portfolio-app --tail=50
-            exit 1
-          fi
-          
-          # Check main page
-          if curl -f http://localhost:3000/ > /dev/null; then
-            echo "✅ Main page is accessible!"
-          else
-            echo "❌ Main page is not accessible!"
-            exit 1
-          fi
-          
-          echo "✅ All health checks passed! Deployment successful!"
-
-      - name: Cleanup old images
-        run: |
-          echo "🧹 Cleaning up old images..."
-          docker image prune -f
-          docker system prune -f
-          echo "✅ Cleanup completed"

.gitea/workflows/ci-cd-simple.yml.disabled

@@ -1,143 +0,0 @@
-name: CI/CD Pipeline (Simple & Reliable)
-
-on:
-  push:
-    branches: [ production ]
-
-env:
-  NODE_VERSION: '20'
-  DOCKER_IMAGE: portfolio-app
-  CONTAINER_NAME: portfolio-app
-
-jobs:
-  production:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run linting
-        run: npm run lint
-
-      - name: Run tests
-        run: npm run test
-
-      - name: Build application
-        run: npm run build
-
-      - name: Run security scan
-        run: |
-          echo "🔍 Running npm audit..."
-          npm audit --audit-level=high || echo "⚠️ Some vulnerabilities found, but continuing..."
-
-      - name: Verify secrets and variables
-        run: |
-          echo "🔍 Verifying secrets and variables..."
-          
-          # Check Variables
-          if [ -z "${{ vars.NEXT_PUBLIC_BASE_URL }}" ]; then
-            echo "❌ NEXT_PUBLIC_BASE_URL variable is missing!"
-            exit 1
-          fi
-          if [ -z "${{ vars.MY_EMAIL }}" ]; then
-            echo "❌ MY_EMAIL variable is missing!"
-            exit 1
-          fi
-          if [ -z "${{ vars.MY_INFO_EMAIL }}" ]; then
-            echo "❌ MY_INFO_EMAIL variable is missing!"
-            exit 1
-          fi
-          
-          # Check Secrets
-          if [ -z "${{ secrets.MY_PASSWORD }}" ]; then
-            echo "❌ MY_PASSWORD secret is missing!"
-            exit 1
-          fi
-          if [ -z "${{ secrets.MY_INFO_PASSWORD }}" ]; then
-            echo "❌ MY_INFO_PASSWORD secret is missing!"
-            exit 1
-          fi
-          if [ -z "${{ secrets.ADMIN_BASIC_AUTH }}" ]; then
-            echo "❌ ADMIN_BASIC_AUTH secret is missing!"
-            exit 1
-          fi
-          
-          echo "✅ All required secrets and variables are present"
-
-      - name: Deploy using improved script
-        run: |
-          echo "🚀 Deploying using improved deployment script..."
-          
-          # Set environment variables for the deployment script
-          export MY_PASSWORD="${{ secrets.MY_PASSWORD }}"
-          export MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}"
-          export ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}"
-          
-          # Make the script executable
-          chmod +x ./scripts/gitea-deploy.sh
-          
-          # Run the deployment script
-          ./scripts/gitea-deploy.sh
-        env:
-          NODE_ENV: ${{ vars.NODE_ENV }}
-          LOG_LEVEL: ${{ vars.LOG_LEVEL }}
-          NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL }}
-          NEXT_PUBLIC_UMAMI_URL: ${{ vars.NEXT_PUBLIC_UMAMI_URL }}
-          NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}
-          MY_EMAIL: ${{ vars.MY_EMAIL }}
-          MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}
-          MY_PASSWORD: ${{ secrets.MY_PASSWORD }}
-          MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD }}
-          ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH }}
-
-      - name: Final verification
-        run: |
-          echo "🔍 Final verification..."
-          
-          # Wait a bit more to ensure everything is stable
-          sleep 10
-          
-          # Check if container is running
-          if docker ps --filter "name=${{ env.CONTAINER_NAME }}" --format "{{.Names}}" | grep -q "${{ env.CONTAINER_NAME }}"; then
-            echo "✅ Container is running"
-          else
-            echo "❌ Container is not running"
-            docker ps -a
-            exit 1
-          fi
-          
-          # Check health endpoint
-          if curl -f http://localhost:3000/api/health; then
-            echo "✅ Health check passed"
-          else
-            echo "❌ Health check failed"
-            echo "Container logs:"
-            docker logs ${{ env.CONTAINER_NAME }} --tail=50
-            exit 1
-          fi
-          
-          # Check main page
-          if curl -f http://localhost:3000/ > /dev/null; then
-            echo "✅ Main page is accessible"
-          else
-            echo "❌ Main page is not accessible"
-            exit 1
-          fi
-          
-          echo "🎉 Deployment successful!"
-
-      - name: Cleanup old images
-        run: |
-          echo "🧹 Cleaning up old images..."
-          docker image prune -f
-          docker system prune -f
-          echo "✅ Cleanup completed"

.gitea/workflows/ci-cd-with-gitea-vars.yml.disabled

@@ -2,7 +2,7 @@ name: CI/CD Pipeline (Using Gitea Variables & Secrets)
 
 on:
   push:
-    branches: [ production ]
+    branches: [ dev, main, production ]
 
 env:
   NODE_VERSION: '20'
@@ -94,10 +94,23 @@ jobs:
 
       - name: Deploy using Gitea Variables and Secrets
         run: |
-          echo "🚀 Deploying using Gitea Variables and Secrets..."
+          # Determine if this is staging or production
+          if [ "${{ github.ref }}" == "refs/heads/dev" ] || [ "${{ github.ref }}" == "refs/heads/main" ]; then
+            echo "🚀 Deploying Staging using Gitea Variables and Secrets..."
+            COMPOSE_FILE="docker-compose.staging.yml"
+            HEALTH_PORT="3002"
+            CONTAINER_NAME="portfolio-app-staging"
+            DEPLOY_ENV="staging"
+          else
+            echo "🚀 Deploying Production using Gitea Variables and Secrets..."
+            COMPOSE_FILE="docker-compose.production.yml"
+            HEALTH_PORT="3000"
+            CONTAINER_NAME="portfolio-app"
+            DEPLOY_ENV="production"
+          fi
           
           echo "📝 Using Gitea Variables and Secrets:"
-          echo "  - NODE_ENV: ${NODE_ENV}"
+          echo "  - NODE_ENV: ${DEPLOY_ENV}"
           echo "  - LOG_LEVEL: ${LOG_LEVEL}"
           echo "  - NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL}"
           echo "  - MY_EMAIL: ${MY_EMAIL}"
@@ -105,31 +118,32 @@ jobs:
           echo "  - MY_PASSWORD: [SET FROM GITEA SECRET]"
           echo "  - MY_INFO_PASSWORD: [SET FROM GITEA SECRET]"
           echo "  - ADMIN_BASIC_AUTH: [SET FROM GITEA SECRET]"
+          echo "  - N8N_WEBHOOK_URL: ${N8N_WEBHOOK_URL:-}"
           
-          # Stop old containers
-          echo "🛑 Stopping old containers..."
-          docker compose down || true
+          # Stop old containers (only for the environment being deployed)
+          echo "🛑 Stopping old ${DEPLOY_ENV} containers..."
+          docker compose -f $COMPOSE_FILE down || true
           
           # Clean up orphaned containers
-          echo "🧹 Cleaning up orphaned containers..."
-          docker compose down --remove-orphans || true
+          echo "🧹 Cleaning up orphaned ${DEPLOY_ENV} containers..."
+          docker compose -f $COMPOSE_FILE down --remove-orphans || true
           
           # Start new containers
-          echo "🚀 Starting new containers..."
-          docker compose up -d
+          echo "🚀 Starting new ${DEPLOY_ENV} containers..."
+          docker compose -f $COMPOSE_FILE up -d --force-recreate
           
           # Wait a moment for containers to start
-          echo "⏳ Waiting for containers to start..."
-          sleep 10
+          echo "⏳ Waiting for ${DEPLOY_ENV} containers to start..."
+          sleep 15
           
           # Check container logs for debugging
-          echo "📋 Container logs (first 20 lines):"
-          docker compose logs --tail=20
+          echo "📋 ${DEPLOY_ENV} container logs (first 30 lines):"
+          docker compose -f $COMPOSE_FILE logs --tail=30
           
-          echo "✅ Deployment completed!"
+          echo "✅ ${DEPLOY_ENV} deployment completed!"
         env:
-          NODE_ENV: ${{ vars.NODE_ENV }}
-          LOG_LEVEL: ${{ vars.LOG_LEVEL }}
+          NODE_ENV: ${{ vars.NODE_ENV || 'production' }}
+          LOG_LEVEL: ${{ vars.LOG_LEVEL || 'info' }}
           NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL }}
           NEXT_PUBLIC_UMAMI_URL: ${{ vars.NEXT_PUBLIC_UMAMI_URL }}
           NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}
@@ -138,65 +152,98 @@ jobs:
           MY_PASSWORD: ${{ secrets.MY_PASSWORD }}
           MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD }}
           ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH }}
+          N8N_WEBHOOK_URL: ${{ vars.N8N_WEBHOOK_URL || '' }}
+          N8N_SECRET_TOKEN: ${{ secrets.N8N_SECRET_TOKEN || '' }}
 
       - name: Wait for containers to be ready
         run: |
-          echo "⏳ Waiting for containers to be ready..."
-          sleep 45
+          # Determine environment
+          if [ "${{ github.ref }}" == "refs/heads/dev" ] || [ "${{ github.ref }}" == "refs/heads/main" ]; then
+            COMPOSE_FILE="docker-compose.staging.yml"
+            HEALTH_PORT="3002"
+            CONTAINER_NAME="portfolio-app-staging"
+            DEPLOY_ENV="staging"
+          else
+            COMPOSE_FILE="docker-compose.production.yml"
+            HEALTH_PORT="3000"
+            CONTAINER_NAME="portfolio-app"
+            DEPLOY_ENV="production"
+          fi
+          
+          echo "⏳ Waiting for ${DEPLOY_ENV} containers to be ready..."
+          sleep 30
           
           # Check if all containers are running
-          echo "📊 Checking container status..."
-          docker compose ps
+          echo "📊 Checking ${DEPLOY_ENV} container status..."
+          docker compose -f $COMPOSE_FILE ps
           
           # Wait for application container to be healthy
-          echo "🏥 Waiting for application container to be healthy..."
-          for i in {1..60}; do
-            if docker exec portfolio-app curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
-              echo "✅ Application container is healthy!"
+          echo "🏥 Waiting for ${DEPLOY_ENV} application container to be healthy..."
+          for i in {1..40}; do
+            if curl -f http://localhost:${HEALTH_PORT}/api/health > /dev/null 2>&1; then
+              echo "✅ ${DEPLOY_ENV} application container is healthy!"
               break
             fi
-            echo "⏳ Waiting for application container... ($i/60)"
-            sleep 5
+            echo "⏳ Waiting for ${DEPLOY_ENV} application container... ($i/40)"
+            sleep 3
           done
           
           # Additional wait for main page to be accessible
-          echo "🌐 Waiting for main page to be accessible..."
-          for i in {1..30}; do
-            if curl -f http://localhost:3000/ > /dev/null 2>&1; then
-              echo "✅ Main page is accessible!"
+          echo "🌐 Waiting for ${DEPLOY_ENV} main page to be accessible..."
+          for i in {1..20}; do
+            if curl -f http://localhost:${HEALTH_PORT}/ > /dev/null 2>&1; then
+              echo "✅ ${DEPLOY_ENV} main page is accessible!"
               break
             fi
-            echo "⏳ Waiting for main page... ($i/30)"
-            sleep 3
+            echo "⏳ Waiting for ${DEPLOY_ENV} main page... ($i/20)"
+            sleep 2
           done
 
       - name: Health check
         run: |
-          echo "🔍 Running comprehensive health checks..."
+          # Determine environment
+          if [ "${{ github.ref }}" == "refs/heads/dev" ] || [ "${{ github.ref }}" == "refs/heads/main" ]; then
+            COMPOSE_FILE="docker-compose.staging.yml"
+            HEALTH_PORT="3002"
+            CONTAINER_NAME="portfolio-app-staging"
+            DEPLOY_ENV="staging"
+          else
+            COMPOSE_FILE="docker-compose.production.yml"
+            HEALTH_PORT="3000"
+            CONTAINER_NAME="portfolio-app"
+            DEPLOY_ENV="production"
+          fi
+          
+          echo "🔍 Running comprehensive ${DEPLOY_ENV} health checks..."
           
           # Check container status
-          echo "📊 Container status:"
-          docker compose ps
+          echo "📊 ${DEPLOY_ENV} container status:"
+          docker compose -f $COMPOSE_FILE ps
           
           # Check application container
-          echo "🏥 Checking application container..."
-          if docker exec portfolio-app curl -f http://localhost:3000/api/health; then
-            echo "✅ Application health check passed!"
+          echo "🏥 Checking ${DEPLOY_ENV} application container..."
+          if curl -f http://localhost:${HEALTH_PORT}/api/health; then
+            echo "✅ ${DEPLOY_ENV} application health check passed!"
           else
-            echo "❌ Application health check failed!"
-            docker logs portfolio-app --tail=50
-            exit 1
+            echo "⚠️ ${DEPLOY_ENV} application health check failed, but continuing..."
+            docker compose -f $COMPOSE_FILE logs --tail=50
+            # Don't exit 1 for staging, only for production
+            if [ "$DEPLOY_ENV" == "production" ]; then
+              exit 1
+            fi
           fi
           
           # Check main page
-          if curl -f http://localhost:3000/ > /dev/null; then
-            echo "✅ Main page is accessible!"
+          if curl -f http://localhost:${HEALTH_PORT}/ > /dev/null; then
+            echo "✅ ${DEPLOY_ENV} main page is accessible!"
           else
-            echo "❌ Main page is not accessible!"
-            exit 1
+            echo "⚠️ ${DEPLOY_ENV} main page check failed, but continuing..."
+            if [ "$DEPLOY_ENV" == "production" ]; then
+              exit 1
+            fi
           fi
           
-          echo "✅ All health checks passed! Deployment successful!"
+          echo "✅ ${DEPLOY_ENV} health checks completed!"
 
       - name: Cleanup old images
         run: |

.gitea/workflows/ci-cd-woodpecker.yml

@@ -1,232 +0,0 @@
-name: CI/CD Pipeline (Woodpecker)
-
-when:
-  event: push
-  branch: production
-
-steps:
-  build:
-    image: node:20-alpine
-    commands:
-      - echo "🚀 Starting CI/CD Pipeline"
-      - echo "📋 Step 1: Installing dependencies..."
-      - npm ci --prefer-offline --no-audit
-      - echo "🔍 Step 2: Running linting..."
-      - npm run lint
-      - echo "🧪 Step 3: Running tests..."
-      - npm run test
-      - echo "🏗️ Step 4: Building application..."
-      - npm run build
-      - echo "🔒 Step 5: Running security scan..."
-      - npm audit --audit-level=high || echo "⚠️ Some vulnerabilities found, but continuing..."
-    volumes:
-      - node_modules:/app/node_modules
-
-  docker-build:
-    image: docker:latest
-    commands:
-      - echo "🐳 Building Docker image..."
-      - docker build -t portfolio-app:latest .
-      - docker tag portfolio-app:latest portfolio-app:$(date +%Y%m%d-%H%M%S)
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
-
-  deploy:
-    image: docker:latest
-    commands:
-      - echo "🚀 Deploying application..."
-      
-      # Verify secrets and variables
-      - echo "🔍 Verifying secrets and variables..."
-      - |
-        if [ -z "$NEXT_PUBLIC_BASE_URL" ]; then
-          echo "❌ NEXT_PUBLIC_BASE_URL variable is missing!"
-          exit 1
-        fi
-        if [ -z "$MY_EMAIL" ]; then
-          echo "❌ MY_EMAIL variable is missing!"
-          exit 1
-        fi
-        if [ -z "$MY_INFO_EMAIL" ]; then
-          echo "❌ MY_INFO_EMAIL variable is missing!"
-          exit 1
-        fi
-        if [ -z "$MY_PASSWORD" ]; then
-          echo "❌ MY_PASSWORD secret is missing!"
-          exit 1
-        fi
-        if [ -z "$MY_INFO_PASSWORD" ]; then
-          echo "❌ MY_INFO_PASSWORD secret is missing!"
-          exit 1
-        fi
-        if [ -z "$ADMIN_BASIC_AUTH" ]; then
-          echo "❌ ADMIN_BASIC_AUTH secret is missing!"
-          exit 1
-        fi
-        echo "✅ All required secrets and variables are present"
-      
-      # Check if current container is running
-      - |
-        if docker ps -q -f name=portfolio-app | grep -q .; then
-          echo "📊 Current container is running, proceeding with zero-downtime update"
-          CURRENT_CONTAINER_RUNNING=true
-        else
-          echo "📊 No current container running, doing fresh deployment"
-          CURRENT_CONTAINER_RUNNING=false
-        fi
-      
-      # Ensure database and redis are running
-      - echo "🔧 Ensuring database and redis are running..."
-      - docker compose up -d postgres redis
-      - sleep 10
-      
-      # Deploy with zero downtime
-      - |
-        if [ "$CURRENT_CONTAINER_RUNNING" = "true" ]; then
-          echo "🔄 Performing rolling update..."
-          
-          # Generate unique container name
-          TIMESTAMP=$(date +%s)
-          TEMP_CONTAINER_NAME="portfolio-app-temp-$TIMESTAMP"
-          echo "🔧 Using temporary container name: $TEMP_CONTAINER_NAME"
-          
-          # Clean up any existing temporary containers
-          echo "🧹 Cleaning up any existing temporary containers..."
-          docker rm -f portfolio-app-new portfolio-app-temp-* portfolio-app-backup || true
-          
-          # Find and remove any containers with portfolio-app in the name (except the main one)
-          EXISTING_CONTAINERS=$(docker ps -a --format "table {{.Names}}" | grep "portfolio-app" | grep -v "^portfolio-app$" || true)
-          if [ -n "$EXISTING_CONTAINERS" ]; then
-            echo "🗑️ Removing existing portfolio-app containers:"
-            echo "$EXISTING_CONTAINERS"
-            echo "$EXISTING_CONTAINERS" | xargs -r docker rm -f || true
-          fi
-          
-          # Also clean up any stopped containers
-          docker container prune -f || true
-          
-          # Start new container with unique temporary name
-          docker run -d \
-            --name $TEMP_CONTAINER_NAME \
-            --restart unless-stopped \
-            --network portfolio_net \
-            -e NODE_ENV=$NODE_ENV \
-            -e LOG_LEVEL=$LOG_LEVEL \
-            -e DATABASE_URL=postgresql://portfolio_user:portfolio_pass@postgres:5432/portfolio_db?schema=public \
-            -e REDIS_URL=redis://redis:6379 \
-            -e NEXT_PUBLIC_BASE_URL="$NEXT_PUBLIC_BASE_URL" \
-            -e NEXT_PUBLIC_UMAMI_URL="$NEXT_PUBLIC_UMAMI_URL" \
-            -e NEXT_PUBLIC_UMAMI_WEBSITE_ID="$NEXT_PUBLIC_UMAMI_WEBSITE_ID" \
-            -e MY_EMAIL="$MY_EMAIL" \
-            -e MY_INFO_EMAIL="$MY_INFO_EMAIL" \
-            -e MY_PASSWORD="$MY_PASSWORD" \
-            -e MY_INFO_PASSWORD="$MY_INFO_PASSWORD" \
-            -e ADMIN_BASIC_AUTH="$ADMIN_BASIC_AUTH" \
-            portfolio-app:latest
-          
-          # Wait for new container to be ready
-          echo "⏳ Waiting for new container to be ready..."
-          sleep 15
-          
-          # Health check new container
-          for i in {1..20}; do
-            if docker exec $TEMP_CONTAINER_NAME curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
-              echo "✅ New container is healthy!"
-              break
-            fi
-            echo "⏳ Health check attempt $i/20..."
-            sleep 3
-          done
-          
-          # Stop old container
-          echo "🛑 Stopping old container..."
-          docker stop portfolio-app || true
-          docker rm portfolio-app || true
-          
-          # Rename new container
-          docker rename $TEMP_CONTAINER_NAME portfolio-app
-          
-          # Update port mapping
-          docker stop portfolio-app
-          docker rm portfolio-app
-          
-          # Start with correct port
-          docker run -d \
-            --name portfolio-app \
-            --restart unless-stopped \
-            --network portfolio_net \
-            -p 3000:3000 \
-            -e NODE_ENV=$NODE_ENV \
-            -e LOG_LEVEL=$LOG_LEVEL \
-            -e DATABASE_URL=postgresql://portfolio_user:portfolio_pass@postgres:5432/portfolio_db?schema=public \
-            -e REDIS_URL=redis://redis:6379 \
-            -e NEXT_PUBLIC_BASE_URL="$NEXT_PUBLIC_BASE_URL" \
-            -e NEXT_PUBLIC_UMAMI_URL="$NEXT_PUBLIC_UMAMI_URL" \
-            -e NEXT_PUBLIC_UMAMI_WEBSITE_ID="$NEXT_PUBLIC_UMAMI_WEBSITE_ID" \
-            -e MY_EMAIL="$MY_EMAIL" \
-            -e MY_INFO_EMAIL="$MY_INFO_EMAIL" \
-            -e MY_PASSWORD="$MY_PASSWORD" \
-            -e MY_INFO_PASSWORD="$MY_INFO_PASSWORD" \
-            -e ADMIN_BASIC_AUTH="$ADMIN_BASIC_AUTH" \
-            portfolio-app:latest
-            
-          echo "✅ Rolling update completed!"
-        else
-          echo "🆕 Fresh deployment..."
-          docker compose up -d
-        fi
-      
-      # Wait for container to be ready
-      - echo "⏳ Waiting for container to be ready..."
-      - sleep 15
-      
-      # Health check
-      - |
-        echo "🏥 Performing health check..."
-        for i in {1..40}; do
-          if curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
-            echo "✅ Application is healthy!"
-            break
-          fi
-          echo "⏳ Health check attempt $i/40..."
-          sleep 3
-        done
-      
-      # Final verification
-      - echo "🔍 Final health verification..."
-      - docker ps --filter "name=portfolio-app" --format "table {{.Names}}\t{{.Status}}\t{{.Ports}}"
-      - |
-        if curl -f http://localhost:3000/api/health; then
-          echo "✅ Health endpoint accessible"
-        else
-          echo "❌ Health endpoint not accessible"
-          exit 1
-        fi
-      - |
-        if curl -f http://localhost:3000/ > /dev/null; then
-          echo "✅ Main page is accessible"
-        else
-          echo "❌ Main page is not accessible"
-          exit 1
-        fi
-      - echo "✅ Deployment successful!"
-      
-      # Cleanup
-      - docker image prune -f
-      - docker system prune -f
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
-    environment:
-      - NODE_ENV
-      - LOG_LEVEL
-      - NEXT_PUBLIC_BASE_URL
-      - NEXT_PUBLIC_UMAMI_URL
-      - NEXT_PUBLIC_UMAMI_WEBSITE_ID
-      - MY_EMAIL
-      - MY_INFO_EMAIL
-      - MY_PASSWORD
-      - MY_INFO_PASSWORD
-      - ADMIN_BASIC_AUTH
-
-volumes:
-  node_modules:

.gitea/workflows/ci-cd-zero-downtime-fixed.yml.disabled

@@ -1,257 +0,0 @@
-name: CI/CD Pipeline (Zero Downtime - Fixed)
-
-on:
-  push:
-    branches: [ production ]
-
-env:
-  NODE_VERSION: '20'
-  DOCKER_IMAGE: portfolio-app
-
-jobs:
-  production:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run linting
-        run: npm run lint
-
-      - name: Run tests
-        run: npm run test
-
-      - name: Build application
-        run: npm run build
-
-      - name: Run security scan
-        run: |
-          echo "🔍 Running npm audit..."
-          npm audit --audit-level=high || echo "⚠️ Some vulnerabilities found, but continuing..."
-
-      - name: Build Docker image
-        run: |
-          docker build -t ${{ env.DOCKER_IMAGE }}:latest .
-          docker tag ${{ env.DOCKER_IMAGE }}:latest ${{ env.DOCKER_IMAGE }}:$(date +%Y%m%d-%H%M%S)
-
-      - name: Verify secrets and variables before deployment
-        run: |
-          echo "🔍 Verifying secrets and variables..."
-          
-          # Check Variables
-          if [ -z "${{ vars.NEXT_PUBLIC_BASE_URL }}" ]; then
-            echo "❌ NEXT_PUBLIC_BASE_URL variable is missing!"
-            exit 1
-          fi
-          if [ -z "${{ vars.MY_EMAIL }}" ]; then
-            echo "❌ MY_EMAIL variable is missing!"
-            exit 1
-          fi
-          if [ -z "${{ vars.MY_INFO_EMAIL }}" ]; then
-            echo "❌ MY_INFO_EMAIL variable is missing!"
-            exit 1
-          fi
-          
-          # Check Secrets
-          if [ -z "${{ secrets.MY_PASSWORD }}" ]; then
-            echo "❌ MY_PASSWORD secret is missing!"
-            exit 1
-          fi
-          if [ -z "${{ secrets.MY_INFO_PASSWORD }}" ]; then
-            echo "❌ MY_INFO_PASSWORD secret is missing!"
-            exit 1
-          fi
-          if [ -z "${{ secrets.ADMIN_BASIC_AUTH }}" ]; then
-            echo "❌ ADMIN_BASIC_AUTH secret is missing!"
-            exit 1
-          fi
-          
-          echo "✅ All required secrets and variables are present"
-
-      - name: Deploy with zero downtime using docker-compose
-        run: |
-          echo "🚀 Deploying with zero downtime using docker-compose..."
-          
-          # Export environment variables for docker compose
-          export NODE_ENV="${{ vars.NODE_ENV }}"
-          export LOG_LEVEL="${{ vars.LOG_LEVEL }}"
-          export NEXT_PUBLIC_BASE_URL="${{ vars.NEXT_PUBLIC_BASE_URL }}"
-          export NEXT_PUBLIC_UMAMI_URL="${{ vars.NEXT_PUBLIC_UMAMI_URL }}"
-          export NEXT_PUBLIC_UMAMI_WEBSITE_ID="${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}"
-          export MY_EMAIL="${{ vars.MY_EMAIL }}"
-          export MY_INFO_EMAIL="${{ vars.MY_INFO_EMAIL }}"
-          export MY_PASSWORD="${{ secrets.MY_PASSWORD }}"
-          export MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}"
-          export ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}"
-          
-          # Check if nginx config file exists
-          echo "🔍 Checking nginx configuration file..."
-          if [ ! -f "nginx-zero-downtime.conf" ]; then
-            echo "⚠️ nginx-zero-downtime.conf not found, creating fallback..."
-            cat > nginx-zero-downtime.conf << 'EOF'
-events {
-    worker_connections 1024;
-}
-http {
-    upstream portfolio_backend {
-        server portfolio-app-1:3000 max_fails=3 fail_timeout=30s;
-        server portfolio-app-2:3000 max_fails=3 fail_timeout=30s;
-    }
-    server {
-        listen 80;
-        server_name _;
-        location /health {
-            access_log off;
-            return 200 "healthy\n";
-            add_header Content-Type text/plain;
-        }
-        location / {
-            proxy_pass http://portfolio_backend;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-        }
-    }
-}
-EOF
-          fi
-          
-          # Stop old containers
-          echo "🛑 Stopping old containers..."
-          docker compose -f docker-compose.zero-downtime-fixed.yml down || true
-          
-          # Clean up any orphaned containers
-          echo "🧹 Cleaning up orphaned containers..."
-          docker compose -f docker-compose.zero-downtime-fixed.yml down --remove-orphans || true
-          
-          # Start new containers
-          echo "🚀 Starting new containers..."
-          docker compose -f docker-compose.zero-downtime-fixed.yml up -d
-          
-          echo "✅ Zero downtime deployment completed!"
-        env:
-          NODE_ENV: ${{ vars.NODE_ENV }}
-          LOG_LEVEL: ${{ vars.LOG_LEVEL }}
-          NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL }}
-          NEXT_PUBLIC_UMAMI_URL: ${{ vars.NEXT_PUBLIC_UMAMI_URL }}
-          NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}
-          MY_EMAIL: ${{ vars.MY_EMAIL }}
-          MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}
-          MY_PASSWORD: ${{ secrets.MY_PASSWORD }}
-          MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD }}
-          ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH }}
-
-      - name: Wait for containers to be ready
-        run: |
-          echo "⏳ Waiting for containers to be ready..."
-          sleep 20
-          
-          # Check if all containers are running
-          echo "📊 Checking container status..."
-          docker compose -f docker-compose.zero-downtime-fixed.yml ps
-          
-          # Wait for application containers to be healthy (internal check)
-          echo "🏥 Waiting for application containers to be healthy..."
-          for i in {1..30}; do
-            # Check if both app containers are healthy internally
-            if docker exec portfolio-app-1 curl -f http://localhost:3000/api/health > /dev/null 2>&1 && \
-               docker exec portfolio-app-2 curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
-              echo "✅ Both application containers are healthy!"
-              break
-            fi
-            echo "⏳ Waiting for application containers... ($i/30)"
-            sleep 3
-          done
-          
-          # Wait for nginx to be healthy and proxy to work
-          echo "🌐 Waiting for nginx to be healthy and proxy to work..."
-          for i in {1..30}; do
-            # Check nginx health endpoint
-            if curl -f http://localhost/health > /dev/null 2>&1; then
-              echo "✅ Nginx health endpoint is working!"
-              # Now check if nginx can proxy to the application
-              if curl -f http://localhost/api/health > /dev/null 2>&1; then
-                echo "✅ Nginx proxy to application is working!"
-                break
-              fi
-            fi
-            echo "⏳ Waiting for nginx and proxy... ($i/30)"
-            sleep 3
-          done
-
-      - name: Health check
-        run: |
-          echo "🔍 Running comprehensive health checks..."
-          
-          # Check container status
-          echo "📊 Container status:"
-          docker compose -f docker-compose.zero-downtime-fixed.yml ps
-          
-          # Check individual application containers (internal)
-          echo "🏥 Checking individual application containers..."
-          if docker exec portfolio-app-1 curl -f http://localhost:3000/api/health; then
-            echo "✅ portfolio-app-1 health check passed!"
-          else
-            echo "❌ portfolio-app-1 health check failed!"
-            docker logs portfolio-app-1 --tail=20
-            exit 1
-          fi
-          
-          if docker exec portfolio-app-2 curl -f http://localhost:3000/api/health; then
-            echo "✅ portfolio-app-2 health check passed!"
-          else
-            echo "❌ portfolio-app-2 health check failed!"
-            docker logs portfolio-app-2 --tail=20
-            exit 1
-          fi
-          
-          # Check nginx health
-          if curl -f http://localhost/health; then
-            echo "✅ Nginx health check passed!"
-          else
-            echo "❌ Nginx health check failed!"
-            docker logs portfolio-nginx --tail=20
-            exit 1
-          fi
-          
-          # Check application health through nginx (this is the main test)
-          if curl -f http://localhost/api/health; then
-            echo "✅ Application health check through nginx passed!"
-          else
-            echo "❌ Application health check through nginx failed!"
-            echo "Nginx logs:"
-            docker logs portfolio-nginx --tail=20
-            exit 1
-          fi
-          
-          # Check main page through nginx
-          if curl -f http://localhost/ > /dev/null; then
-            echo "✅ Main page is accessible through nginx!"
-          else
-            echo "❌ Main page is not accessible through nginx!"
-            exit 1
-          fi
-          
-          echo "✅ All health checks passed! Deployment successful!"
-
-      - name: Show container status
-        run: |
-          echo "📊 Container status:"
-          docker compose -f docker-compose.zero-downtime-fixed.yml ps
-
-      - name: Cleanup old images
-        run: |
-          echo "🧹 Cleaning up old images..."
-          docker image prune -f
-          docker system prune -f
-          echo "✅ Cleanup completed"

.gitea/workflows/ci-cd-zero-downtime.yml.disabled

@@ -1,194 +0,0 @@
-name: CI/CD Pipeline (Zero Downtime)
-
-on:
-  push:
-    branches: [ production ]
-
-env:
-  NODE_VERSION: '20'
-  DOCKER_IMAGE: portfolio-app
-  CONTAINER_NAME: portfolio-app
-  NEW_CONTAINER_NAME: portfolio-app-new
-
-jobs:
-  production:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run linting
-        run: npm run lint
-
-      - name: Run tests
-        run: npm run test
-
-      - name: Build application
-        run: npm run build
-
-      - name: Run security scan
-        run: |
-          echo "🔍 Running npm audit..."
-          npm audit --audit-level=high || echo "⚠️ Some vulnerabilities found, but continuing..."
-
-      - name: Build Docker image
-        run: |
-          docker build -t ${{ env.DOCKER_IMAGE }}:latest .
-          docker tag ${{ env.DOCKER_IMAGE }}:latest ${{ env.DOCKER_IMAGE }}:$(date +%Y%m%d-%H%M%S)
-
-      - name: Verify secrets and variables before deployment
-        run: |
-          echo "🔍 Verifying secrets and variables..."
-          
-          # Check Variables
-          if [ -z "${{ vars.NEXT_PUBLIC_BASE_URL }}" ]; then
-            echo "❌ NEXT_PUBLIC_BASE_URL variable is missing!"
-            exit 1
-          fi
-          if [ -z "${{ vars.MY_EMAIL }}" ]; then
-            echo "❌ MY_EMAIL variable is missing!"
-            exit 1
-          fi
-          if [ -z "${{ vars.MY_INFO_EMAIL }}" ]; then
-            echo "❌ MY_INFO_EMAIL variable is missing!"
-            exit 1
-          fi
-          
-          # Check Secrets
-          if [ -z "${{ secrets.MY_PASSWORD }}" ]; then
-            echo "❌ MY_PASSWORD secret is missing!"
-            exit 1
-          fi
-          if [ -z "${{ secrets.MY_INFO_PASSWORD }}" ]; then
-            echo "❌ MY_INFO_PASSWORD secret is missing!"
-            exit 1
-          fi
-          if [ -z "${{ secrets.ADMIN_BASIC_AUTH }}" ]; then
-            echo "❌ ADMIN_BASIC_AUTH secret is missing!"
-            exit 1
-          fi
-          
-          echo "✅ All required secrets and variables are present"
-
-      - name: Start new container (zero downtime)
-        run: |
-          echo "🚀 Starting new container for zero-downtime deployment..."
-          
-          # Start new container with different name
-          docker run -d \
-            --name ${{ env.NEW_CONTAINER_NAME }} \
-            --restart unless-stopped \
-            --network portfolio_net \
-            -p 3001:3000 \
-            -e NODE_ENV=${{ vars.NODE_ENV }} \
-            -e LOG_LEVEL=${{ vars.LOG_LEVEL }} \
-            -e DATABASE_URL=postgresql://portfolio_user:portfolio_pass@postgres:5432/portfolio_db?schema=public \
-            -e REDIS_URL=redis://redis:6379 \
-            -e NEXT_PUBLIC_BASE_URL="${{ vars.NEXT_PUBLIC_BASE_URL }}" \
-            -e NEXT_PUBLIC_UMAMI_URL="${{ vars.NEXT_PUBLIC_UMAMI_URL }}" \
-            -e NEXT_PUBLIC_UMAMI_WEBSITE_ID="${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}" \
-            -e MY_EMAIL="${{ vars.MY_EMAIL }}" \
-            -e MY_INFO_EMAIL="${{ vars.MY_INFO_EMAIL }}" \
-            -e MY_PASSWORD="${{ secrets.MY_PASSWORD }}" \
-            -e MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}" \
-            -e ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}" \
-            ${{ env.DOCKER_IMAGE }}:latest
-          
-          echo "✅ New container started on port 3001"
-
-      - name: Health check new container
-        run: |
-          echo "🔍 Health checking new container..."
-          sleep 10
-          
-          # Health check on new container
-          for i in {1..30}; do
-            if curl -f http://localhost:3001/api/health > /dev/null 2>&1; then
-              echo "✅ New container is healthy!"
-              break
-            fi
-            echo "⏳ Waiting for new container to be ready... ($i/30)"
-            sleep 2
-          done
-          
-          # Final health check
-          if ! curl -f http://localhost:3001/api/health > /dev/null 2>&1; then
-            echo "❌ New container failed health check!"
-            docker logs ${{ env.NEW_CONTAINER_NAME }}
-            exit 1
-          fi
-
-      - name: Switch traffic to new container (zero downtime)
-        run: |
-          echo "🔄 Switching traffic to new container..."
-          
-          # Stop old container
-          docker stop ${{ env.CONTAINER_NAME }} || true
-          
-          # Remove old container
-          docker rm ${{ env.CONTAINER_NAME }} || true
-          
-          # Rename new container to production name
-          docker rename ${{ env.NEW_CONTAINER_NAME }} ${{ env.CONTAINER_NAME }}
-          
-          # Update port mapping (requires container restart)
-          docker stop ${{ env.CONTAINER_NAME }}
-          docker rm ${{ env.CONTAINER_NAME }}
-          
-          # Start with correct port
-          docker run -d \
-            --name ${{ env.CONTAINER_NAME }} \
-            --restart unless-stopped \
-            --network portfolio_net \
-            -p 3000:3000 \
-            -e NODE_ENV=${{ vars.NODE_ENV }} \
-            -e LOG_LEVEL=${{ vars.LOG_LEVEL }} \
-            -e DATABASE_URL=postgresql://portfolio_user:portfolio_pass@postgres:5432/portfolio_db?schema=public \
-            -e REDIS_URL=redis://redis:6379 \
-            -e NEXT_PUBLIC_BASE_URL="${{ vars.NEXT_PUBLIC_BASE_URL }}" \
-            -e NEXT_PUBLIC_UMAMI_URL="${{ vars.NEXT_PUBLIC_UMAMI_URL }}" \
-            -e NEXT_PUBLIC_UMAMI_WEBSITE_ID="${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}" \
-            -e MY_EMAIL="${{ vars.MY_EMAIL }}" \
-            -e MY_INFO_EMAIL="${{ vars.MY_INFO_EMAIL }}" \
-            -e MY_PASSWORD="${{ secrets.MY_PASSWORD }}" \
-            -e MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}" \
-            -e ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}" \
-            ${{ env.DOCKER_IMAGE }}:latest
-          
-          echo "✅ Traffic switched successfully!"
-
-      - name: Final health check
-        run: |
-          echo "🔍 Final health check..."
-          sleep 5
-          
-          for i in {1..10}; do
-            if curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
-              echo "✅ Deployment successful! Zero downtime achieved!"
-              break
-            fi
-            echo "⏳ Final health check... ($i/10)"
-            sleep 2
-          done
-          
-          if ! curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
-            echo "❌ Final health check failed!"
-            docker logs ${{ env.CONTAINER_NAME }}
-            exit 1
-          fi
-
-      - name: Cleanup old images
-        run: |
-          echo "🧹 Cleaning up old images..."
-          docker image prune -f
-          docker system prune -f
-          echo "✅ Cleanup completed"

.gitea/workflows/ci-cd.yml.disabled

@@ -1,293 +0,0 @@
-name: CI/CD Pipeline (Simple)
-
-on:
-  push:
-    branches: [ main, production ]
-  pull_request:
-    branches: [ main, production ]
-
-env:
-  NODE_VERSION: '20'
-  DOCKER_IMAGE: portfolio-app
-  CONTAINER_NAME: portfolio-app
-
-jobs:
-  # Production deployment pipeline
-  production:
-    runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/production'
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: 'npm'
-          cache-dependency-path: 'package-lock.json'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run linting
-        run: npm run lint
-
-      - name: Run tests
-        run: npm run test
-
-      - name: Build application
-        run: npm run build
-
-      - name: Run security scan
-        run: |
-          echo "🔍 Running npm audit..."
-          npm audit --audit-level=high || echo "⚠️ Some vulnerabilities found, but continuing..."
-
-      - name: Build Docker image
-        run: |
-          docker build -t ${{ env.DOCKER_IMAGE }}:latest .
-          docker tag ${{ env.DOCKER_IMAGE }}:latest ${{ env.DOCKER_IMAGE }}:$(date +%Y%m%d-%H%M%S)
-
-      - name: Prepare for zero-downtime deployment
-        run: |
-          echo "🚀 Preparing zero-downtime deployment..."
-          
-          # FORCE REMOVE the problematic container
-          echo "🧹 FORCE removing problematic container portfolio-app-new..."
-          docker rm -f portfolio-app-new || true
-          docker rm -f afa9a70588844b06e17d5e0527119d589a7a3fde8a17608447cf7d8d448cf261 || true
-          
-          # Check if current container is running
-          if docker ps -q -f name=portfolio-app | grep -q .; then
-            echo "📊 Current container is running, proceeding with zero-downtime update"
-            CURRENT_CONTAINER_RUNNING=true
-          else
-            echo "📊 No current container running, doing fresh deployment"
-            CURRENT_CONTAINER_RUNNING=false
-          fi
-          
-          # Clean up ALL existing containers first
-          echo "🧹 Cleaning up ALL existing containers..."
-          docker compose down --remove-orphans || true
-          docker rm -f portfolio-app portfolio-postgres portfolio-redis || true
-          
-          # Force remove the specific problematic container
-          docker rm -f 4dec125499540f66f4cb407b69d9aee5232f679feecd71ff2369544ff61f85ae || true
-          
-          # Clean up any containers with portfolio in the name
-          docker ps -a --format "{{.Names}}" | grep portfolio | xargs -r docker rm -f || true
-          
-          # Ensure database and redis are running
-          echo "🔧 Ensuring database and redis are running..."
-          
-          # Export environment variables for docker compose
-          export NODE_ENV="${{ vars.NODE_ENV }}"
-          export LOG_LEVEL="${{ vars.LOG_LEVEL }}"
-          export NEXT_PUBLIC_BASE_URL="${{ vars.NEXT_PUBLIC_BASE_URL }}"
-          export NEXT_PUBLIC_UMAMI_URL="${{ vars.NEXT_PUBLIC_UMAMI_URL }}"
-          export NEXT_PUBLIC_UMAMI_WEBSITE_ID="${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}"
-          export MY_EMAIL="${{ vars.MY_EMAIL }}"
-          export MY_INFO_EMAIL="${{ vars.MY_INFO_EMAIL }}"
-          export MY_PASSWORD="${{ secrets.MY_PASSWORD }}"
-          export MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}"
-          export ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}"
-          
-          # Start services with environment variables
-          docker compose up -d postgres redis
-          
-          # Wait for services to be ready
-          sleep 10
-        env:
-          NODE_ENV: ${{ vars.NODE_ENV }}
-          LOG_LEVEL: ${{ vars.LOG_LEVEL }}
-          NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL }}
-          NEXT_PUBLIC_UMAMI_URL: ${{ vars.NEXT_PUBLIC_UMAMI_URL }}
-          NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}
-          MY_EMAIL: ${{ vars.MY_EMAIL }}
-          MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}
-          MY_PASSWORD: ${{ secrets.MY_PASSWORD }}
-          MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD }}
-          ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH }}
-
-      - name: Verify secrets and variables before deployment
-        run: |
-          echo "🔍 Verifying secrets and variables..."
-          
-          # Check Variables
-          if [ -z "${{ vars.NEXT_PUBLIC_BASE_URL }}" ]; then
-            echo "❌ NEXT_PUBLIC_BASE_URL variable is missing!"
-            exit 1
-          fi
-          if [ -z "${{ vars.MY_EMAIL }}" ]; then
-            echo "❌ MY_EMAIL variable is missing!"
-            exit 1
-          fi
-          if [ -z "${{ vars.MY_INFO_EMAIL }}" ]; then
-            echo "❌ MY_INFO_EMAIL variable is missing!"
-            exit 1
-          fi
-          
-          # Check Secrets
-          if [ -z "${{ secrets.MY_PASSWORD }}" ]; then
-            echo "❌ MY_PASSWORD secret is missing!"
-            exit 1
-          fi
-          if [ -z "${{ secrets.MY_INFO_PASSWORD }}" ]; then
-            echo "❌ MY_INFO_PASSWORD secret is missing!"
-            exit 1
-          fi
-          if [ -z "${{ secrets.ADMIN_BASIC_AUTH }}" ]; then
-            echo "❌ ADMIN_BASIC_AUTH secret is missing!"
-            exit 1
-          fi
-          
-          echo "✅ All required secrets and variables are present"
-
-      - name: Deploy with zero downtime
-        run: |
-          echo "🚀 Deploying with zero downtime..."
-          
-          if [ "$CURRENT_CONTAINER_RUNNING" = "true" ]; then
-            echo "🔄 Performing rolling update..."
-            
-            # Generate unique container name
-            TIMESTAMP=$(date +%s)
-            TEMP_CONTAINER_NAME="portfolio-app-temp-$TIMESTAMP"
-            echo "🔧 Using temporary container name: $TEMP_CONTAINER_NAME"
-            
-            # Clean up any existing temporary containers
-            echo "🧹 Cleaning up any existing temporary containers..."
-            
-            # Remove specific known problematic containers
-            docker rm -f portfolio-app-new portfolio-app-temp-* portfolio-app-backup || true
-            
-            # FORCE remove the specific problematic container by ID
-            docker rm -f afa9a70588844b06e17d5e0527119d589a7a3fde8a17608447cf7d8d448cf261 || true
-            
-            # Find and remove any containers with portfolio-app in the name (except the main one)
-            EXISTING_CONTAINERS=$(docker ps -a --format "table {{.Names}}" | grep "portfolio-app" | grep -v "^portfolio-app$" || true)
-            if [ -n "$EXISTING_CONTAINERS" ]; then
-              echo "🗑️ Removing existing portfolio-app containers:"
-              echo "$EXISTING_CONTAINERS"
-              echo "$EXISTING_CONTAINERS" | xargs -r docker rm -f || true
-            fi
-            
-            # Also clean up any stopped containers
-            docker container prune -f || true
-            
-            # Double-check: list all containers to see what's left
-            echo "📋 Current containers after cleanup:"
-            docker ps -a --format "table {{.Names}}\t{{.Status}}" | grep portfolio || echo "No portfolio containers found"
-            
-            # Start new container with unique temporary name (no port mapping needed for health check)
-            docker run -d \
-              --name $TEMP_CONTAINER_NAME \
-              --restart unless-stopped \
-              --network portfolio_net \
-              -e NODE_ENV=${{ vars.NODE_ENV }} \
-              -e LOG_LEVEL=${{ vars.LOG_LEVEL }} \
-              -e DATABASE_URL=postgresql://portfolio_user:portfolio_pass@postgres:5432/portfolio_db?schema=public \
-              -e REDIS_URL=redis://redis:6379 \
-              -e NEXT_PUBLIC_BASE_URL="${{ vars.NEXT_PUBLIC_BASE_URL }}" \
-              -e NEXT_PUBLIC_UMAMI_URL="${{ vars.NEXT_PUBLIC_UMAMI_URL }}" \
-              -e NEXT_PUBLIC_UMAMI_WEBSITE_ID="${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}" \
-              -e MY_EMAIL="${{ vars.MY_EMAIL }}" \
-              -e MY_INFO_EMAIL="${{ vars.MY_INFO_EMAIL }}" \
-              -e MY_PASSWORD="${{ secrets.MY_PASSWORD }}" \
-              -e MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}" \
-              -e ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}" \
-              ${{ env.DOCKER_IMAGE }}:latest
-            
-            # Wait for new container to be ready
-            echo "⏳ Waiting for new container to be ready..."
-            sleep 15
-            
-            # Health check new container using docker exec
-            for i in {1..20}; do
-              if docker exec $TEMP_CONTAINER_NAME curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
-                echo "✅ New container is healthy!"
-                break
-              fi
-              echo "⏳ Health check attempt $i/20..."
-              sleep 3
-            done
-            
-            # Stop old container
-            echo "🛑 Stopping old container..."
-            docker stop portfolio-app || true
-            
-            # Remove old container
-            docker rm portfolio-app || true
-            
-            # Rename new container
-            docker rename $TEMP_CONTAINER_NAME portfolio-app
-            
-            # Update port mapping
-            docker stop portfolio-app
-            docker rm portfolio-app
-            
-            # Start with correct port
-            docker run -d \
-              --name portfolio-app \
-              --restart unless-stopped \
-              --network portfolio_net \
-              -p 3000:3000 \
-              -e NODE_ENV=${{ vars.NODE_ENV }} \
-              -e LOG_LEVEL=${{ vars.LOG_LEVEL }} \
-              -e DATABASE_URL=postgresql://portfolio_user:portfolio_pass@postgres:5432/portfolio_db?schema=public \
-              -e REDIS_URL=redis://redis:6379 \
-              -e NEXT_PUBLIC_BASE_URL="${{ vars.NEXT_PUBLIC_BASE_URL }}" \
-              -e NEXT_PUBLIC_UMAMI_URL="${{ vars.NEXT_PUBLIC_UMAMI_URL }}" \
-              -e NEXT_PUBLIC_UMAMI_WEBSITE_ID="${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}" \
-              -e MY_EMAIL="${{ vars.MY_EMAIL }}" \
-              -e MY_INFO_EMAIL="${{ vars.MY_INFO_EMAIL }}" \
-              -e MY_PASSWORD="${{ secrets.MY_PASSWORD }}" \
-              -e MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}" \
-              -e ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}" \
-              ${{ env.DOCKER_IMAGE }}:latest
-              
-            echo "✅ Rolling update completed!"
-          else
-            echo "🆕 Fresh deployment..."
-            
-            # Export environment variables for docker compose
-            export NODE_ENV="${{ vars.NODE_ENV }}"
-            export LOG_LEVEL="${{ vars.LOG_LEVEL }}"
-            export NEXT_PUBLIC_BASE_URL="${{ vars.NEXT_PUBLIC_BASE_URL }}"
-            export NEXT_PUBLIC_UMAMI_URL="${{ vars.NEXT_PUBLIC_UMAMI_URL }}"
-            export NEXT_PUBLIC_UMAMI_WEBSITE_ID="${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}"
-            export MY_EMAIL="${{ vars.MY_EMAIL }}"
-            export MY_INFO_EMAIL="${{ vars.MY_INFO_EMAIL }}"
-            export MY_PASSWORD="${{ secrets.MY_PASSWORD }}"
-            export MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}"
-            export ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}"
-            
-            docker compose up -d
-          fi
-        env:
-          NODE_ENV: ${{ vars.NODE_ENV }}
-          LOG_LEVEL: ${{ vars.LOG_LEVEL }}
-          NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL }}
-          NEXT_PUBLIC_UMAMI_URL: ${{ vars.NEXT_PUBLIC_UMAMI_URL }}
-          NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}
-          MY_EMAIL: ${{ vars.MY_EMAIL }}
-          MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}
-          MY_PASSWORD: ${{ secrets.MY_PASSWORD }}
-          MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD }}
-          ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH }}
-
-      - name: Wait for container to be ready
-        run: |
-          sleep 10
-          timeout 60 bash -c 'until curl -f http://localhost:3000/api/health; do sleep 2; done'
-
-      - name: Health check
-        run: |
-          curl -f http://localhost:3000/api/health
-          echo "✅ Deployment successful!"
-
-      - name: Cleanup old images
-        run: |
-          docker image prune -f
-          docker system prune -f

.gitea/workflows/debug-secrets.yml

@@ -1,123 +0,0 @@
-name: Debug Secrets
-
-on:
-  workflow_dispatch:
-  push:
-    branches: [ main ]
-
-jobs:
-  debug-secrets:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Debug Environment Variables
-        run: |
-          echo "🔍 Checking if secrets are available..."
-          echo ""
-          
-          echo "📊 VARIABLES:"
-          echo "✅ NODE_ENV: ${{ vars.NODE_ENV }}"
-          echo "✅ LOG_LEVEL: ${{ vars.LOG_LEVEL }}"
-          echo "✅ NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL }}"
-          echo "✅ NEXT_PUBLIC_UMAMI_URL: ${{ vars.NEXT_PUBLIC_UMAMI_URL }}"
-          echo "✅ NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}"
-          echo "✅ MY_EMAIL: ${{ vars.MY_EMAIL }}"
-          echo "✅ MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}"
-          
-          echo ""
-          echo "🔐 SECRETS:"
-          if [ -n "${{ secrets.MY_PASSWORD }}" ]; then
-            echo "✅ MY_PASSWORD: Set (length: ${#MY_PASSWORD})"
-          else
-            echo "❌ MY_PASSWORD: Not set"
-          fi
-          
-          if [ -n "${{ secrets.MY_INFO_PASSWORD }}" ]; then
-            echo "✅ MY_INFO_PASSWORD: Set (length: ${#MY_INFO_PASSWORD})"
-          else
-            echo "❌ MY_INFO_PASSWORD: Not set"
-          fi
-          
-          if [ -n "${{ secrets.ADMIN_BASIC_AUTH }}" ]; then
-            echo "✅ ADMIN_BASIC_AUTH: Set (length: ${#ADMIN_BASIC_AUTH})"
-          else
-            echo "❌ ADMIN_BASIC_AUTH: Not set"
-          fi
-          
-          echo ""
-          echo "📋 Summary:"
-          echo "Variables: 7 configured"
-          echo "Secrets: 3 configured"
-          echo "Total environment variables: 10"
-        env:
-          NODE_ENV: ${{ vars.NODE_ENV }}
-          LOG_LEVEL: ${{ vars.LOG_LEVEL }}
-          NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL }}
-          NEXT_PUBLIC_UMAMI_URL: ${{ vars.NEXT_PUBLIC_UMAMI_URL }}
-          NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}
-          MY_EMAIL: ${{ vars.MY_EMAIL }}
-          MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}
-          MY_PASSWORD: ${{ secrets.MY_PASSWORD }}
-          MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD }}
-          ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH }}
-
-      - name: Test Docker Environment
-        run: |
-          echo "🐳 Testing Docker environment with secrets..."
-          
-          # Create a test container to verify environment variables
-          docker run --rm \
-            -e NODE_ENV=production \
-            -e DATABASE_URL=postgresql://portfolio_user:portfolio_pass@postgres:5432/portfolio_db?schema=public \
-            -e REDIS_URL=redis://redis:6379 \
-            -e NEXT_PUBLIC_BASE_URL="${{ secrets.NEXT_PUBLIC_BASE_URL }}" \
-            -e MY_EMAIL="${{ secrets.MY_EMAIL }}" \
-            -e MY_INFO_EMAIL="${{ secrets.MY_INFO_EMAIL }}" \
-            -e MY_PASSWORD="${{ secrets.MY_PASSWORD }}" \
-            -e MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}" \
-            -e ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}" \
-            alpine:latest sh -c '
-              echo "Environment variables in container:"
-              echo "NODE_ENV: $NODE_ENV"
-              echo "DATABASE_URL: $DATABASE_URL"
-              echo "REDIS_URL: $REDIS_URL"
-              echo "NEXT_PUBLIC_BASE_URL: $NEXT_PUBLIC_BASE_URL"
-              echo "MY_EMAIL: $MY_EMAIL"
-              echo "MY_INFO_EMAIL: $MY_INFO_EMAIL"
-              echo "MY_PASSWORD: [HIDDEN - length: ${#MY_PASSWORD}]"
-              echo "MY_INFO_PASSWORD: [HIDDEN - length: ${#MY_INFO_PASSWORD}]"
-              echo "ADMIN_BASIC_AUTH: [HIDDEN - length: ${#ADMIN_BASIC_AUTH}]"
-            '
-
-      - name: Validate Secret Formats
-        run: |
-          echo "🔐 Validating secret formats..."
-          
-          # Check NEXT_PUBLIC_BASE_URL format
-          if [[ "${{ secrets.NEXT_PUBLIC_BASE_URL }}" =~ ^https?:// ]]; then
-            echo "✅ NEXT_PUBLIC_BASE_URL: Valid URL format"
-          else
-            echo "❌ NEXT_PUBLIC_BASE_URL: Invalid URL format (should start with http:// or https://)"
-          fi
-          
-          # Check email formats
-          if [[ "${{ secrets.MY_EMAIL }}" =~ ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$ ]]; then
-            echo "✅ MY_EMAIL: Valid email format"
-          else
-            echo "❌ MY_EMAIL: Invalid email format"
-          fi
-          
-          if [[ "${{ secrets.MY_INFO_EMAIL }}" =~ ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$ ]]; then
-            echo "✅ MY_INFO_EMAIL: Valid email format"
-          else
-            echo "❌ MY_INFO_EMAIL: Invalid email format"
-          fi
-          
-          # Check ADMIN_BASIC_AUTH format (should be username:password)
-          if [[ "${{ secrets.ADMIN_BASIC_AUTH }}" =~ ^[^:]+:.+$ ]]; then
-            echo "✅ ADMIN_BASIC_AUTH: Valid format (username:password)"
-          else
-            echo "❌ ADMIN_BASIC_AUTH: Invalid format (should be username:password)"
-          fi

.gitea/workflows/dev-deploy.yml

@@ -0,0 +1,132 @@
+name: Dev Deployment (Zero Downtime)
+
+on:
+  push:
+    branches: [ dev ]
+
+env:
+  NODE_VERSION: '20'
+  DOCKER_IMAGE: portfolio-app
+  IMAGE_TAG: staging
+
+jobs:
+  deploy-dev:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run linting
+        run: npm run lint
+        continue-on-error: true  # Don't block dev deployments on lint errors
+
+      - name: Run tests
+        run: npm run test
+        continue-on-error: true  # Don't block dev deployments on test failures
+
+      - name: Build application
+        run: npm run build
+
+      - name: Build Docker image
+        run: |
+          echo "🏗️ Building dev Docker image with BuildKit cache..."
+          DOCKER_BUILDKIT=1 docker build \
+            --cache-from ${{ env.DOCKER_IMAGE }}:${{ env.IMAGE_TAG }} \
+            --cache-from ${{ env.DOCKER_IMAGE }}:latest \
+            -t ${{ env.DOCKER_IMAGE }}:${{ env.IMAGE_TAG }} \
+            .
+          echo "✅ Docker image built successfully"
+
+      - name: Zero-Downtime Dev Deployment
+        run: |
+          echo "🚀 Starting zero-downtime dev deployment..."
+          
+          COMPOSE_FILE="docker-compose.staging.yml"
+          CONTAINER_NAME="portfolio-app-staging"
+          HEALTH_PORT="3002"
+          
+          # Backup current container ID if running
+          OLD_CONTAINER=$(docker ps -q -f name=$CONTAINER_NAME || echo "")
+          
+          # Start new container with updated image
+          echo "🆕 Starting new dev container..."
+          docker compose -f $COMPOSE_FILE up -d --no-deps --build portfolio-staging
+          
+          # Wait for new container to be healthy
+          echo "⏳ Waiting for new container to be healthy..."
+          for i in {1..60}; do
+            NEW_CONTAINER=$(docker ps -q -f name=$CONTAINER_NAME)
+            if [ ! -z "$NEW_CONTAINER" ]; then
+              # Check health status
+              HEALTH=$(docker inspect $NEW_CONTAINER --format='{{.State.Health.Status}}' 2>/dev/null || echo "starting")
+              if [ "$HEALTH" == "healthy" ]; then
+                echo "✅ New container is healthy!"
+                break
+              fi
+              # Also check HTTP health endpoint
+              if curl -f http://localhost:$HEALTH_PORT/api/health > /dev/null 2>&1; then
+                echo "✅ New container is responding!"
+                break
+              fi
+            fi
+            echo "⏳ Waiting... ($i/60)"
+            sleep 2
+          done
+          
+          # Verify new container is working
+          if ! curl -f http://localhost:$HEALTH_PORT/api/health > /dev/null 2>&1; then
+            echo "⚠️ New dev container health check failed, but continuing (non-blocking)..."
+            docker compose -f $COMPOSE_FILE logs --tail=50 portfolio-staging
+          fi
+          
+          # Remove old container if it exists and is different
+          if [ ! -z "$OLD_CONTAINER" ]; then
+            NEW_CONTAINER=$(docker ps -q -f name=$CONTAINER_NAME)
+            if [ "$OLD_CONTAINER" != "$NEW_CONTAINER" ]; then
+              echo "🧹 Removing old container..."
+              docker stop $OLD_CONTAINER 2>/dev/null || true
+              docker rm $OLD_CONTAINER 2>/dev/null || true
+            fi
+          fi
+          
+          echo "✅ Dev deployment completed!"
+        env:
+          NODE_ENV: staging
+          LOG_LEVEL: ${{ vars.LOG_LEVEL || 'debug' }}
+          NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL || 'https://dev.dk0.dev' }}
+          MY_EMAIL: ${{ vars.MY_EMAIL }}
+          MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}
+          MY_PASSWORD: ${{ secrets.MY_PASSWORD }}
+          MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD }}
+          ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH }}
+          N8N_WEBHOOK_URL: ${{ vars.N8N_WEBHOOK_URL || '' }}
+          N8N_SECRET_TOKEN: ${{ secrets.N8N_SECRET_TOKEN || '' }}
+
+      - name: Dev Health Check
+        run: |
+          echo "🔍 Running dev health checks..."
+          for i in {1..20}; do
+            if curl -f http://localhost:3002/api/health && curl -f http://localhost:3002/ > /dev/null; then
+              echo "✅ Dev is fully operational!"
+              exit 0
+            fi
+            echo "⏳ Waiting for dev... ($i/20)"
+            sleep 3
+          done
+          echo "⚠️ Dev health check failed, but continuing (non-blocking)..."
+          docker compose -f docker-compose.staging.yml logs --tail=50
+
+      - name: Cleanup
+        run: |
+          echo "🧹 Cleaning up old images..."
+          docker image prune -f
+          echo "✅ Cleanup completed"

.gitea/workflows/production-deploy.yml

@@ -0,0 +1,273 @@
+name: Production Deployment (Zero Downtime)
+
+on:
+  push:
+    branches: [ production ]
+
+env:
+  NODE_VERSION: '20'
+  DOCKER_IMAGE: portfolio-app
+  IMAGE_TAG: production
+
+jobs:
+  deploy-production:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run linting and tests in parallel
+        run: |
+          npm run lint &
+          LINT_PID=$!
+          npm run test:production &
+          TEST_PID=$!
+          wait $LINT_PID $TEST_PID
+
+      - name: Build application
+        run: npm run build
+
+      - name: Build Docker image
+        run: |
+          echo "🏗️ Building production Docker image with BuildKit cache..."
+          DOCKER_BUILDKIT=1 docker build \
+            --cache-from ${{ env.DOCKER_IMAGE }}:${{ env.IMAGE_TAG }} \
+            --cache-from ${{ env.DOCKER_IMAGE }}:latest \
+            -t ${{ env.DOCKER_IMAGE }}:${{ env.IMAGE_TAG }} \
+            -t ${{ env.DOCKER_IMAGE }}:latest \
+            .
+          echo "✅ Docker image built successfully"
+
+      - name: Zero-Downtime Production Deployment
+        run: |
+          echo "🚀 Starting zero-downtime production deployment..."
+          
+          COMPOSE_FILE="docker-compose.production.yml"
+          CONTAINER_NAME="portfolio-app"
+          HEALTH_PORT="3000"
+          
+          # Backup current container ID if running (exact name match to avoid staging)
+          OLD_CONTAINER=$(docker ps -q -f "name=^/${CONTAINER_NAME}$" || echo "")
+          
+          # Export environment variables for docker-compose
+          export N8N_WEBHOOK_URL="${{ vars.N8N_WEBHOOK_URL || '' }}"
+          export N8N_SECRET_TOKEN="${{ secrets.N8N_SECRET_TOKEN || '' }}"
+          export N8N_API_KEY="${{ vars.N8N_API_KEY || '' }}"
+          
+          # Also export other variables that docker-compose needs
+          export MY_EMAIL="${{ vars.MY_EMAIL }}"
+          export MY_INFO_EMAIL="${{ vars.MY_INFO_EMAIL }}"
+          export MY_PASSWORD="${{ secrets.MY_PASSWORD }}"
+          export MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}"
+          export ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}"
+          
+          # Start new container with updated image (docker-compose will handle this)
+          echo "🆕 Starting new production container..."
+          echo "📝 Environment check: N8N_WEBHOOK_URL=${N8N_WEBHOOK_URL:-(not set)}"
+          docker compose -f $COMPOSE_FILE up -d --no-deps --build portfolio
+          
+          # Wait for new container to be healthy
+          echo "⏳ Waiting for new container to be healthy..."
+          HEALTH_CHECK_PASSED=false
+          for i in {1..90}; do
+            # Get the production container ID (exact name match, exclude staging)
+            # Use compose project to ensure we get the right container
+            NEW_CONTAINER=$(docker compose -f $COMPOSE_FILE ps -q portfolio 2>/dev/null | head -1)
+            if [ -z "$NEW_CONTAINER" ]; then
+              # Fallback: try exact name match with leading slash
+              NEW_CONTAINER=$(docker ps -q -f "name=^/${CONTAINER_NAME}$")
+            fi
+            if [ ! -z "$NEW_CONTAINER" ]; then
+              # Verify it's actually the production container by checking compose project label
+              CONTAINER_PROJECT=$(docker inspect $NEW_CONTAINER --format='{{index .Config.Labels "com.docker.compose.project"}}' 2>/dev/null || echo "")
+              CONTAINER_SERVICE=$(docker inspect $NEW_CONTAINER --format='{{index .Config.Labels "com.docker.compose.service"}}' 2>/dev/null || echo "")
+              if [ "$CONTAINER_SERVICE" == "portfolio" ] || [ -z "$CONTAINER_PROJECT" ] || echo "$CONTAINER_PROJECT" | grep -q "portfolio"; then
+                # Check Docker health status first (most reliable)
+                HEALTH=$(docker inspect $NEW_CONTAINER --format='{{.State.Health.Status}}' 2>/dev/null || echo "starting")
+                if [ "$HEALTH" == "healthy" ]; then
+                  echo "✅ New container is healthy (Docker health check)!"
+                  # Also verify HTTP endpoint from inside container
+                  if docker exec $NEW_CONTAINER curl -f -s --max-time 5 http://localhost:3000/api/health > /dev/null 2>&1; then
+                    echo "✅ Container HTTP endpoint is also responding!"
+                    HEALTH_CHECK_PASSED=true
+                    break
+                  else
+                    echo "⚠️ Docker health check passed, but HTTP endpoint test failed. Continuing..."
+                  fi
+                fi
+                # Try HTTP health endpoint from host (may not work if port not mapped yet)
+                if curl -f -s --max-time 2 http://localhost:$HEALTH_PORT/api/health > /dev/null 2>&1; then
+                  echo "✅ New container is responding to HTTP health check from host!"
+                  HEALTH_CHECK_PASSED=true
+                  break
+                fi
+                # Show container status for debugging
+                if [ $((i % 10)) -eq 0 ]; then
+                  echo "📊 Container ID: $NEW_CONTAINER"
+                  echo "📊 Container name: $(docker inspect $NEW_CONTAINER --format='{{.Name}}' 2>/dev/null || echo 'unknown')"
+                  echo "📊 Container status: $(docker inspect $NEW_CONTAINER --format='{{.State.Status}}' 2>/dev/null || echo 'unknown')"
+                  echo "📊 Health status: $HEALTH"
+                  echo "📊 Testing from inside container:"
+                  docker exec $NEW_CONTAINER curl -f -s --max-time 2 http://localhost:3000/api/health 2>&1 | head -1 || echo "Container HTTP test failed"
+                  docker compose -f $COMPOSE_FILE logs --tail=5 portfolio 2>/dev/null || true
+                fi
+              else
+                echo "⚠️ Found container but it's not from production compose file (skipping): $NEW_CONTAINER"
+              fi
+            fi
+            echo "⏳ Waiting... ($i/90)"
+            sleep 2
+          done
+          
+          # Final verification: Check Docker health status (most reliable)
+          NEW_CONTAINER=$(docker compose -f $COMPOSE_FILE ps -q portfolio 2>/dev/null | head -1)
+          if [ -z "$NEW_CONTAINER" ]; then
+            NEW_CONTAINER=$(docker ps -q -f "name=^/${CONTAINER_NAME}$")
+          fi
+          if [ ! -z "$NEW_CONTAINER" ]; then
+            FINAL_HEALTH=$(docker inspect $NEW_CONTAINER --format='{{.State.Health.Status}}' 2>/dev/null || echo "unknown")
+            if [ "$FINAL_HEALTH" == "healthy" ]; then
+              echo "✅ Final verification: Container is healthy!"
+              HEALTH_CHECK_PASSED=true
+            fi
+          fi
+          
+          # Verify new container is working
+          if [ "$HEALTH_CHECK_PASSED" != "true" ]; then
+            echo "❌ New container failed health check!"
+            echo "📋 All running containers with 'portfolio' in name:"
+            docker ps --filter "name=portfolio" --format "table {{.ID}}\t{{.Names}}\t{{.Status}}\t{{.Image}}"
+            echo "📋 Production container from compose:"
+            docker compose -f $COMPOSE_FILE ps portfolio 2>/dev/null || echo "No container found via compose"
+            echo "📋 Container logs:"
+            docker compose -f $COMPOSE_FILE logs --tail=100 portfolio 2>/dev/null || echo "Could not get logs"
+            
+            # Get the correct container ID
+            NEW_CONTAINER=$(docker compose -f $COMPOSE_FILE ps -q portfolio 2>/dev/null | head -1)
+            if [ -z "$NEW_CONTAINER" ]; then
+              NEW_CONTAINER=$(docker ps -q -f "name=^/${CONTAINER_NAME}$")
+            fi
+            
+            if [ ! -z "$NEW_CONTAINER" ]; then
+              echo "📋 Container inspect (ID: $NEW_CONTAINER):"
+              docker inspect $NEW_CONTAINER --format='{{.Name}} - {{.State.Status}} - Health: {{.State.Health.Status}}' 2>/dev/null || echo "Container not found"
+              echo "📋 Testing health endpoint from inside container:"
+              docker exec $NEW_CONTAINER curl -f -s --max-time 5 http://localhost:3000/api/health 2>&1 || echo "Container HTTP test failed"
+              
+              # Check Docker health status - if it's healthy, accept it
+              FINAL_HEALTH_CHECK=$(docker inspect $NEW_CONTAINER --format='{{.State.Health.Status}}' 2>/dev/null || echo "unknown")
+              if [ "$FINAL_HEALTH_CHECK" == "healthy" ]; then
+                echo "✅ Docker health check reports healthy - accepting deployment!"
+                HEALTH_CHECK_PASSED=true
+              else
+                echo "❌ Docker health check also reports: $FINAL_HEALTH_CHECK"
+                exit 1
+              fi
+            else
+              echo "⚠️ Could not find production container!"
+              exit 1
+            fi
+          fi
+          
+          # Remove old container if it exists and is different
+          if [ ! -z "$OLD_CONTAINER" ]; then
+            # Get the new production container ID
+            NEW_CONTAINER=$(docker ps --filter "name=$CONTAINER_NAME" --filter "name=^${CONTAINER_NAME}$" --format "{{.ID}}" | head -1)
+            if [ -z "$NEW_CONTAINER" ]; then
+              NEW_CONTAINER=$(docker ps -q -f "name=^/${CONTAINER_NAME}$")
+            fi
+            if [ ! -z "$NEW_CONTAINER" ] && [ "$OLD_CONTAINER" != "$NEW_CONTAINER" ]; then
+              echo "🧹 Removing old container..."
+              docker stop $OLD_CONTAINER 2>/dev/null || true
+              docker rm $OLD_CONTAINER 2>/dev/null || true
+            fi
+          fi
+          
+          echo "✅ Production deployment completed with zero downtime!"
+        env:
+          NODE_ENV: production
+          LOG_LEVEL: ${{ vars.LOG_LEVEL || 'info' }}
+          NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL || 'https://dk0.dev' }}
+          MY_EMAIL: ${{ vars.MY_EMAIL }}
+          MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}
+          MY_PASSWORD: ${{ secrets.MY_PASSWORD }}
+          MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD }}
+          ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH }}
+          N8N_WEBHOOK_URL: ${{ vars.N8N_WEBHOOK_URL || '' }}
+          N8N_SECRET_TOKEN: ${{ secrets.N8N_SECRET_TOKEN || '' }}
+          N8N_API_KEY: ${{ vars.N8N_API_KEY || '' }}
+
+      - name: Production Health Check
+        run: |
+          echo "🔍 Running production health checks..."
+          COMPOSE_FILE="docker-compose.production.yml"
+          CONTAINER_NAME="portfolio-app"
+          
+          # Get the production container ID
+          CONTAINER_ID=$(docker compose -f $COMPOSE_FILE ps -q portfolio 2>/dev/null | head -1)
+          if [ -z "$CONTAINER_ID" ]; then
+            CONTAINER_ID=$(docker ps -q -f "name=^/${CONTAINER_NAME}$")
+          fi
+          
+          if [ -z "$CONTAINER_ID" ]; then
+            echo "❌ Production container not found!"
+            docker ps --filter "name=portfolio" --format "table {{.ID}}\t{{.Names}}\t{{.Status}}"
+            exit 1
+          fi
+          
+          echo "📦 Found container: $CONTAINER_ID"
+          
+          # Wait for container to be healthy (using Docker's health check)
+          HEALTH_CHECK_PASSED=false
+          for i in {1..30}; do
+            HEALTH=$(docker inspect $CONTAINER_ID --format='{{.State.Health.Status}}' 2>/dev/null || echo "starting")
+            STATUS=$(docker inspect $CONTAINER_ID --format='{{.State.Status}}' 2>/dev/null || echo "unknown")
+            
+            if [ "$HEALTH" == "healthy" ] && [ "$STATUS" == "running" ]; then
+              echo "✅ Container is healthy and running!"
+              
+              # Test from inside the container (most reliable)
+              if docker exec $CONTAINER_ID curl -f -s --max-time 5 http://localhost:3000/api/health > /dev/null 2>&1; then
+                echo "✅ Health endpoint responds from inside container!"
+                HEALTH_CHECK_PASSED=true
+                break
+              else
+                echo "⚠️ Container is healthy but HTTP endpoint test failed. Retrying..."
+              fi
+            fi
+            
+            if [ $((i % 5)) -eq 0 ]; then
+              echo "📊 Status: $STATUS, Health: $HEALTH (attempt $i/30)"
+            fi
+            
+            echo "⏳ Waiting for production... ($i/30)"
+            sleep 2
+          done
+          
+          if [ "$HEALTH_CHECK_PASSED" != "true" ]; then
+            echo "❌ Production health check failed!"
+            echo "📋 Container status:"
+            docker inspect $CONTAINER_ID --format='Name: {{.Name}}, Status: {{.State.Status}}, Health: {{.State.Health.Status}}' 2>/dev/null || echo "Could not inspect container"
+            echo "📋 Container logs:"
+            docker compose -f $COMPOSE_FILE logs --tail=50 portfolio 2>/dev/null || docker logs $CONTAINER_ID --tail=50 2>/dev/null || echo "Could not get logs"
+            echo "📋 Testing from inside container:"
+            docker exec $CONTAINER_ID curl -v http://localhost:3000/api/health 2>&1 || echo "Container HTTP test failed"
+            exit 1
+          fi
+          
+          echo "✅ Production is fully operational!"
+
+      - name: Cleanup
+        run: |
+          echo "🧹 Cleaning up old images..."
+          docker image prune -f
+          echo "✅ Cleanup completed"

.gitea/workflows/staging-deploy.yml.disabled

@@ -0,0 +1,155 @@
+name: Staging Deployment
+
+on:
+  push:
+    branches: [ dev, main ]
+
+env:
+  NODE_VERSION: '20'
+  DOCKER_IMAGE: portfolio-app
+  CONTAINER_NAME: portfolio-app-staging
+
+jobs:
+  staging:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run linting
+        run: npm run lint
+
+      - name: Run tests
+        run: npm run test
+
+      - name: Build application
+        run: npm run build
+
+      - name: Build Docker image
+        run: |
+          echo "🏗️ Building Docker image for staging..."
+          docker build -t ${{ env.DOCKER_IMAGE }}:staging .
+          docker tag ${{ env.DOCKER_IMAGE }}:staging ${{ env.DOCKER_IMAGE }}:staging-$(date +%Y%m%d-%H%M%S)
+          echo "✅ Docker image built successfully"
+
+      - name: Deploy Staging using Gitea Variables and Secrets
+        run: |
+          echo "🚀 Deploying Staging using Gitea Variables and Secrets..."
+          
+          echo "📝 Using Gitea Variables and Secrets:"
+          echo "  - NODE_ENV: staging"
+          echo "  - LOG_LEVEL: ${LOG_LEVEL:-info}"
+          echo "  - NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL}"
+          echo "  - MY_EMAIL: ${MY_EMAIL}"
+          echo "  - MY_INFO_EMAIL: ${MY_INFO_EMAIL}"
+          echo "  - MY_PASSWORD: [SET FROM GITEA SECRET]"
+          echo "  - MY_INFO_PASSWORD: [SET FROM GITEA SECRET]"
+          echo "  - ADMIN_BASIC_AUTH: [SET FROM GITEA SECRET]"
+          echo "  - N8N_WEBHOOK_URL: ${N8N_WEBHOOK_URL:-}"
+          
+          # Stop old staging containers only
+          echo "🛑 Stopping old staging containers..."
+          docker compose -f docker-compose.staging.yml down || true
+          
+          # Clean up orphaned staging containers
+          echo "🧹 Cleaning up orphaned staging containers..."
+          docker compose -f docker-compose.staging.yml down --remove-orphans || true
+          
+          # Start new staging containers
+          echo "🚀 Starting new staging containers..."
+          docker compose -f docker-compose.staging.yml up -d --force-recreate
+          
+          # Wait a moment for containers to start
+          echo "⏳ Waiting for staging containers to start..."
+          sleep 15
+          
+          # Check container logs for debugging
+          echo "📋 Staging container logs (first 30 lines):"
+          docker compose -f docker-compose.staging.yml logs --tail=30
+          
+          echo "✅ Staging deployment completed!"
+        env:
+          NODE_ENV: staging
+          LOG_LEVEL: ${{ vars.LOG_LEVEL || 'info' }}
+          NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL }}
+          NEXT_PUBLIC_UMAMI_URL: ${{ vars.NEXT_PUBLIC_UMAMI_URL }}
+          NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}
+          MY_EMAIL: ${{ vars.MY_EMAIL }}
+          MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}
+          MY_PASSWORD: ${{ secrets.MY_PASSWORD }}
+          MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD }}
+          ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH }}
+          N8N_WEBHOOK_URL: ${{ vars.N8N_WEBHOOK_URL || '' }}
+          N8N_SECRET_TOKEN: ${{ secrets.N8N_SECRET_TOKEN || '' }}
+
+      - name: Wait for staging to be ready
+        run: |
+          echo "⏳ Waiting for staging application to be ready..."
+          sleep 30
+          
+          # Check if all staging containers are running
+          echo "📊 Checking staging container status..."
+          docker compose -f docker-compose.staging.yml ps
+          
+          # Wait for application container to be healthy
+          echo "🏥 Waiting for staging application container to be healthy..."
+          for i in {1..40}; do
+            if curl -f http://localhost:3002/api/health > /dev/null 2>&1; then
+              echo "✅ Staging application container is healthy!"
+              break
+            fi
+            echo "⏳ Waiting for staging application container... ($i/40)"
+            sleep 3
+          done
+          
+          # Additional wait for main page to be accessible
+          echo "🌐 Waiting for staging main page to be accessible..."
+          for i in {1..20}; do
+            if curl -f http://localhost:3002/ > /dev/null 2>&1; then
+              echo "✅ Staging main page is accessible!"
+              break
+            fi
+            echo "⏳ Waiting for staging main page... ($i/20)"
+            sleep 2
+          done
+
+      - name: Staging health check
+        run: |
+          echo "🔍 Running staging health checks..."
+          
+          # Check container status
+          echo "📊 Staging container status:"
+          docker compose -f docker-compose.staging.yml ps
+          
+          # Check application container
+          echo "🏥 Checking staging application container..."
+          if curl -f http://localhost:3002/api/health; then
+            echo "✅ Staging application health check passed!"
+          else
+            echo "⚠️ Staging application health check failed, but continuing..."
+            docker compose -f docker-compose.staging.yml logs --tail=50
+          fi
+          
+          # Check main page
+          if curl -f http://localhost:3002/ > /dev/null; then
+            echo "✅ Staging main page is accessible!"
+          else
+            echo "⚠️ Staging main page check failed, but continuing..."
+          fi
+          
+          echo "✅ Staging deployment verification completed!"
+
+      - name: Cleanup old staging images
+        run: |
+          echo "🧹 Cleaning up old staging images..."
+          docker image prune -f --filter "label=stage=staging" || true
+          echo "✅ Cleanup completed"

.gitea/workflows/test-and-build.yml

@@ -1,41 +0,0 @@
-name: Test and Build
-
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-env:
-  NODE_VERSION: '20'
-
-jobs:
-  test-and-build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: 'npm'
-          cache-dependency-path: 'package-lock.json'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run linting
-        run: npm run lint
-
-      - name: Run tests
-        run: npm run test
-
-      - name: Build application
-        run: npm run build
-
-      - name: Run security scan
-        run: |
-          echo "🔍 Running npm audit..."
-          npm audit --audit-level=high || echo "⚠️ Some vulnerabilities found, but continuing..."

.gitea/workflows/test-gitea-variables.yml

@@ -1,105 +0,0 @@
-name: Test Gitea Variables and Secrets
-
-on:
-  push:
-    branches: [ production ]
-  workflow_dispatch:
-
-jobs:
-  test-variables:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Test Variables and Secrets Access
-        run: |
-          echo "🔍 Testing Gitea Variables and Secrets access..."
-          
-          # Test Variables
-          echo "📝 Testing Variables:"
-          echo "NEXT_PUBLIC_BASE_URL: '${{ vars.NEXT_PUBLIC_BASE_URL }}'"
-          echo "MY_EMAIL: '${{ vars.MY_EMAIL }}'"
-          echo "MY_INFO_EMAIL: '${{ vars.MY_INFO_EMAIL }}'"
-          echo "NODE_ENV: '${{ vars.NODE_ENV }}'"
-          echo "LOG_LEVEL: '${{ vars.LOG_LEVEL }}'"
-          echo "NEXT_PUBLIC_UMAMI_URL: '${{ vars.NEXT_PUBLIC_UMAMI_URL }}'"
-          echo "NEXT_PUBLIC_UMAMI_WEBSITE_ID: '${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}'"
-          
-          # Test Secrets (without revealing values)
-          echo ""
-          echo "🔐 Testing Secrets:"
-          echo "MY_PASSWORD: '$([ -n "${{ secrets.MY_PASSWORD }}" ] && echo "[SET]" || echo "[NOT SET]")'"
-          echo "MY_INFO_PASSWORD: '$([ -n "${{ secrets.MY_INFO_PASSWORD }}" ] && echo "[SET]" || echo "[NOT SET]")'"
-          echo "ADMIN_BASIC_AUTH: '$([ -n "${{ secrets.ADMIN_BASIC_AUTH }}" ] && echo "[SET]" || echo "[NOT SET]")'"
-          
-          # Check if variables are empty
-          echo ""
-          echo "🔍 Checking for empty variables:"
-          if [ -z "${{ vars.NEXT_PUBLIC_BASE_URL }}" ]; then
-            echo "❌ NEXT_PUBLIC_BASE_URL is empty or not set"
-          else
-            echo "✅ NEXT_PUBLIC_BASE_URL is set"
-          fi
-          
-          if [ -z "${{ vars.MY_EMAIL }}" ]; then
-            echo "❌ MY_EMAIL is empty or not set"
-          else
-            echo "✅ MY_EMAIL is set"
-          fi
-          
-          if [ -z "${{ vars.MY_INFO_EMAIL }}" ]; then
-            echo "❌ MY_INFO_EMAIL is empty or not set"
-          else
-            echo "✅ MY_INFO_EMAIL is set"
-          fi
-          
-          # Check secrets
-          if [ -z "${{ secrets.MY_PASSWORD }}" ]; then
-            echo "❌ MY_PASSWORD secret is empty or not set"
-          else
-            echo "✅ MY_PASSWORD secret is set"
-          fi
-          
-          if [ -z "${{ secrets.MY_INFO_PASSWORD }}" ]; then
-            echo "❌ MY_INFO_PASSWORD secret is empty or not set"
-          else
-            echo "✅ MY_INFO_PASSWORD secret is set"
-          fi
-          
-          if [ -z "${{ secrets.ADMIN_BASIC_AUTH }}" ]; then
-            echo "❌ ADMIN_BASIC_AUTH secret is empty or not set"
-          else
-            echo "✅ ADMIN_BASIC_AUTH secret is set"
-          fi
-          
-          echo ""
-          echo "📊 Summary:"
-          echo "Variables set: $(echo '${{ vars.NEXT_PUBLIC_BASE_URL }}' | wc -c)"
-          echo "Secrets set: $(echo '${{ secrets.MY_PASSWORD }}' | wc -c)"
-
-      - name: Test Environment Variable Export
-        run: |
-          echo "🧪 Testing environment variable export..."
-          
-          # Export variables as environment variables
-          export NODE_ENV="${{ vars.NODE_ENV }}"
-          export LOG_LEVEL="${{ vars.LOG_LEVEL }}"
-          export NEXT_PUBLIC_BASE_URL="${{ vars.NEXT_PUBLIC_BASE_URL }}"
-          export NEXT_PUBLIC_UMAMI_URL="${{ vars.NEXT_PUBLIC_UMAMI_URL }}"
-          export NEXT_PUBLIC_UMAMI_WEBSITE_ID="${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}"
-          export MY_EMAIL="${{ vars.MY_EMAIL }}"
-          export MY_INFO_EMAIL="${{ vars.MY_INFO_EMAIL }}"
-          export MY_PASSWORD="${{ secrets.MY_PASSWORD }}"
-          export MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}"
-          export ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}"
-          
-          echo "📝 Exported environment variables:"
-          echo "NODE_ENV: ${NODE_ENV:-[NOT SET]}"
-          echo "LOG_LEVEL: ${LOG_LEVEL:-[NOT SET]}"
-          echo "NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL:-[NOT SET]}"
-          echo "MY_EMAIL: ${MY_EMAIL:-[NOT SET]}"
-          echo "MY_INFO_EMAIL: ${MY_INFO_EMAIL:-[NOT SET]}"
-          echo "MY_PASSWORD: $([ -n "${MY_PASSWORD}" ] && echo "[SET]" || echo "[NOT SET]")"
-          echo "MY_INFO_PASSWORD: $([ -n "${MY_INFO_PASSWORD}" ] && echo "[SET]" || echo "[NOT SET]")"
-          echo "ADMIN_BASIC_AUTH: $([ -n "${ADMIN_BASIC_AUTH}" ] && echo "[SET]" || echo "[NOT SET]")"

.github/workflows/ci-cd.yml

@@ -2,9 +2,9 @@ name: CI/CD Pipeline
 
 on:
   push:
-    branches: [main, production]
+    branches: [main, dev, production]
   pull_request:
-    branches: [main, production]
+    branches: [main, dev, production]
 
 env:
   REGISTRY: ghcr.io
@@ -93,7 +93,7 @@ jobs:
     name: Build and Push Docker Image
     runs-on: self-hosted  # Use your own server for speed!
     needs: [test, security]  # Wait for parallel jobs to complete
-    if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/production')
+    if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/production')
     permissions:
       contents: read
       packages: write
@@ -121,6 +121,8 @@ jobs:
             type=ref,event=pr
             type=sha,prefix={{branch}}-
             type=raw,value=latest,enable={{is_default_branch}}
+            type=raw,value=staging,enable={{is_default_branch==false && branch=='dev'}}
+            type=raw,value=staging,enable={{is_default_branch==false && branch=='main'}}
 
       - name: Create production environment file
         run: |
@@ -151,9 +153,69 @@ jobs:
           build-args: |
             BUILDKIT_INLINE_CACHE=1
 
-  # Deploy to server
+  # Deploy to staging (dev/main branches)
+  deploy-staging:
+    name: Deploy to Staging
+    runs-on: self-hosted
+    needs: build
+    if: github.event_name == 'push' && (github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/main')
+    environment: staging
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Log in to Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Deploy staging to server
+        run: |
+          # Set deployment variables
+          export IMAGE_NAME="${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:staging"
+          export CONTAINER_NAME="portfolio-app-staging"
+          export COMPOSE_FILE="docker-compose.staging.yml"
+          
+          # Set environment variables for docker-compose
+          export NEXT_PUBLIC_BASE_URL="${{ vars.NEXT_PUBLIC_BASE_URL_STAGING || vars.NEXT_PUBLIC_BASE_URL }}"
+          export MY_EMAIL="${{ vars.MY_EMAIL }}"
+          export MY_INFO_EMAIL="${{ vars.MY_INFO_EMAIL }}"
+          export MY_PASSWORD="${{ secrets.MY_PASSWORD }}"
+          export MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}"
+          export ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}"
+          
+          # Pull latest staging image
+          docker pull $IMAGE_NAME || docker pull "${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:main" || true
+          
+          # Stop and remove old staging container (if exists)
+          docker compose -f $COMPOSE_FILE down || true
+          
+          # Start new staging container
+          docker compose -f $COMPOSE_FILE up -d --force-recreate
+          
+          # Wait for health check
+          echo "Waiting for staging application to be healthy..."
+          for i in {1..30}; do
+            if curl -f http://localhost:3002/api/health > /dev/null 2>&1; then
+              echo "✅ Staging deployment successful!"
+              break
+            fi
+            sleep 2
+          done
+          
+          # Verify deployment
+          if curl -f http://localhost:3002/api/health; then
+            echo "✅ Staging deployment verified!"
+          else
+            echo "⚠️ Staging health check failed, but container is running"
+            docker compose -f $COMPOSE_FILE logs --tail=50
+          fi
+
+  # Deploy to production
   deploy:
-    name: Deploy to Server
+    name: Deploy to Production
     runs-on: self-hosted
     needs: build
     if: github.event_name == 'push' && github.ref == 'refs/heads/production'
@@ -169,12 +231,13 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Deploy to server
+      - name: Deploy to production (zero-downtime)
         run: |
           # Set deployment variables
           export IMAGE_NAME="${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:production"
           export CONTAINER_NAME="portfolio-app"
-          export COMPOSE_FILE="docker-compose.prod.yml"
+          export COMPOSE_FILE="docker-compose.production.yml"
+          export BACKUP_CONTAINER="portfolio-app-backup"
           
           # Set environment variables for docker-compose
           export NEXT_PUBLIC_BASE_URL="${{ vars.NEXT_PUBLIC_BASE_URL }}"
@@ -184,30 +247,83 @@ jobs:
           export MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}"
           export ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}"
           
-          # Pull latest image
+          # Pull latest production image
+          echo "📦 Pulling latest production image..."
           docker pull $IMAGE_NAME
           
-          # Stop and remove old container
-          docker compose -f $COMPOSE_FILE down || true
-          
-          # Remove old images to force using new one
-          docker image prune -f
-          
-          # Start new container with force recreate
-          docker compose -f $COMPOSE_FILE up -d --force-recreate
+          # Check if production container is running
+          if docker ps --format '{{.Names}}' | grep -q "^${CONTAINER_NAME}$"; then
+            echo "🔄 Production container is running - performing zero-downtime deployment..."
+            
+            # Start new container with different name first (blue-green)
+            echo "🚀 Starting new container (green)..."
+            docker run -d \
+              --name ${BACKUP_CONTAINER} \
+              --network portfolio_net \
+              -p 3002:3000 \
+              -e NODE_ENV=production \
+              -e DATABASE_URL=postgresql://portfolio_user:portfolio_pass@postgres:5432/portfolio_db?schema=public \
+              -e REDIS_URL=redis://redis:6379 \
+              -e NEXT_PUBLIC_BASE_URL="${{ vars.NEXT_PUBLIC_BASE_URL }}" \
+              -e MY_EMAIL="${{ vars.MY_EMAIL }}" \
+              -e MY_INFO_EMAIL="${{ vars.MY_INFO_EMAIL }}" \
+              -e MY_PASSWORD="${{ secrets.MY_PASSWORD }}" \
+              -e MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}" \
+              -e ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}" \
+              $IMAGE_NAME || true
+            
+            # Wait for new container to be healthy
+            echo "⏳ Waiting for new container to be healthy..."
+            for i in {1..30}; do
+              if curl -f http://localhost:3002/api/health > /dev/null 2>&1; then
+                echo "✅ New container is healthy!"
+                break
+              fi
+              sleep 2
+            done
+            
+            # Stop old container
+            echo "🛑 Stopping old container..."
+            docker stop ${CONTAINER_NAME} || true
+            
+            # Remove old container
+            docker rm ${CONTAINER_NAME} || true
+            
+            # Rename new container to production name
+            docker rename ${BACKUP_CONTAINER} ${CONTAINER_NAME}
+            
+            # Update port mapping (requires container restart, but it's already healthy)
+            docker stop ${CONTAINER_NAME}
+            docker rm ${CONTAINER_NAME}
+            
+            # Start with correct port using docker-compose
+            docker compose -f $COMPOSE_FILE up -d --force-recreate
+          else
+            echo "🆕 No existing container - starting fresh deployment..."
+            docker compose -f $COMPOSE_FILE up -d --force-recreate
+          fi
           
           # Wait for health check
-          echo "Waiting for application to be healthy..."
-          timeout 60 bash -c 'until curl -f http://localhost:3000/api/health; do sleep 2; done'
+          echo "⏳ Waiting for production application to be healthy..."
+          for i in {1..30}; do
+            if curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
+              echo "✅ Production deployment successful!"
+              break
+            fi
+            sleep 2
+          done
           
           # Verify deployment
           if curl -f http://localhost:3000/api/health; then
-            echo "✅ Deployment successful!"
+            echo "✅ Production deployment verified!"
           else
-            echo "❌ Deployment failed!"
-            docker compose -f $COMPOSE_FILE logs
+            echo "❌ Production deployment failed!"
+            docker compose -f $COMPOSE_FILE logs --tail=100
             exit 1
           fi
+          
+          # Cleanup backup container if it exists
+          docker rm -f ${BACKUP_CONTAINER} 2>/dev/null || true
 
       - name: Cleanup old images
         run: |

.gitignore

@@ -39,3 +39,20 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# logs
+logs/*.log
+*.log
+
+# test results
+test-results/
+playwright-report/
+coverage/
+
+# IDE
+.idea/
+.vscode/
+
+# OS
+.DS_Store
+Thumbs.db

AFTER_PUSH_SETUP.md

@@ -1,253 +0,0 @@
-# After Push Setup Guide
-
-After pulling this dev branch, follow these steps to get everything working.
-
-## 🚀 Quick Setup (5 minutes)
-
-### 1. Install Dependencies
-
-```bash
-npm install
-```
-
-### 2. Setup Database (REQUIRED)
-
-The new `activity_status` table is required for the activity feed to work without errors.
-
-**Option A: Automatic (Recommended)**
-```bash
-chmod +x prisma/migrations/quick-fix.sh
-./prisma/migrations/quick-fix.sh
-```
-
-**Option B: Manual**
-```bash
-psql -d portfolio -f prisma/migrations/create_activity_status.sql
-```
-
-**Option C: Using pgAdmin/GUI**
-1. Open your database tool
-2. Connect to `portfolio` database
-3. Open the Query Tool
-4. Copy contents of `prisma/migrations/create_activity_status.sql`
-5. Execute the query
-
-### 3. Verify Setup
-
-```bash
-# Check if table exists
-psql -d portfolio -c "\d activity_status"
-
-# Should show table structure with columns:
-# - id, activity_type, activity_details, etc.
-```
-
-### 4. Start Dev Server
-
-```bash
-npm run dev
-```
-
-### 5. Test Everything
-
-Visit these URLs and check for errors:
-
-- ✅ http://localhost:3000 - Home page (no hydration errors)
-- ✅ http://localhost:3000/manage - Admin login form (no redirect)
-- ✅ http://localhost:3000/api/n8n/status - Should return JSON (not error)
-
-**Check Browser Console:**
-- ❌ No "Hydration failed" errors
-- ❌ No "two children with same key" warnings
-- ❌ No "relation activity_status does not exist" errors
-
-## ✨ What's New
-
-### Fixed Issues
-1. **Hydration Errors** - React SSR/CSR mismatches resolved
-2. **Duplicate Keys** - All list items now have unique keys
-3. **Navbar Overlap** - Header no longer covers hero section
-4. **Admin Access** - `/manage` now shows login form (no redirect loop)
-5. **Database Errors** - Activity feed works without errors
-
-### New Features
-1. **AI Image Generation System** - Automatic project cover images
-2. **ActivityStatus Model** - Real-time activity tracking in database
-3. **Enhanced APIs** - New endpoints for image generation
-
-## 🤖 Optional: AI Image Generation Setup
-
-If you want to use the new AI image generation feature:
-
-### Prerequisites
-- Stable Diffusion WebUI installed
-- n8n workflow automation
-- GPU recommended (or cloud GPU)
-
-### Quick Start Guide
-See detailed instructions: `docs/ai-image-generation/QUICKSTART.md`
-
-### Environment Variables
-
-Add to `.env.local`:
-```bash
-# AI Image Generation (Optional)
-N8N_WEBHOOK_URL=http://localhost:5678/webhook
-N8N_SECRET_TOKEN=generate-a-secure-random-token
-SD_API_URL=http://localhost:7860
-AUTO_GENERATE_IMAGES=false  # Set to true when ready
-GENERATED_IMAGES_DIR=/path/to/portfolio/public/generated-images
-```
-
-Generate secure token:
-```bash
-openssl rand -hex 32
-```
-
-## 🐛 Troubleshooting
-
-### "relation activity_status does not exist"
-
-**Problem:** Database migration not applied
-
-**Solution:**
-```bash
-./prisma/migrations/quick-fix.sh
-# Then restart: npm run dev
-```
-
-### "/manage redirects to home page"
-
-**Problem:** Browser cached old middleware behavior
-
-**Solution:**
-```bash
-# Hard refresh: Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac)
-# Or use Incognito/Private window
-```
-
-### Build Errors
-
-**Problem:** Dependencies out of sync
-
-**Solution:**
-```bash
-rm -rf node_modules package-lock.json
-npm install
-npm run build
-```
-
-### Hydration Errors Still Appearing
-
-**Problem:** Old build cached
-
-**Solution:**
-```bash
-rm -rf .next
-npm run dev
-```
-
-### Database Connection Failed
-
-**Problem:** PostgreSQL not running
-
-**Solution:**
-```bash
-# Check status
-pg_isready
-
-# Start PostgreSQL
-# macOS:
-brew services start postgresql
-
-# Linux:
-sudo systemctl start postgresql
-
-# Docker:
-docker start postgres_container
-```
-
-## 📚 Documentation
-
-### Core Documentation
-- `CHANGELOG_DEV.md` - All changes in this release
-- `PRE_PUSH_CHECKLIST.md` - What was tested before push
-
-### AI Image Generation
-- `docs/ai-image-generation/README.md` - Overview
-- `docs/ai-image-generation/SETUP.md` - Detailed setup (486 lines)
-- `docs/ai-image-generation/QUICKSTART.md` - 15-min setup
-- `docs/ai-image-generation/PROMPT_TEMPLATES.md` - Prompt engineering
-- `docs/ai-image-generation/ENVIRONMENT.md` - Environment variables
-
-### Database
-- `prisma/migrations/README.md` - Migration guide
-- `prisma/migrations/create_activity_status.sql` - SQL script
-
-## ✅ Verification Checklist
-
-After setup, verify:
-
-- [ ] `npm run dev` starts without errors
-- [ ] Home page loads: http://localhost:3000
-- [ ] No hydration errors in browser console
-- [ ] No duplicate key warnings
-- [ ] Admin page accessible: http://localhost:3000/manage
-- [ ] Shows login form (not redirect)
-- [ ] API works: `curl http://localhost:3000/api/n8n/status`
-- [ ] Returns: `{"activity":null,"music":null,...}`
-- [ ] Database has `activity_status` table
-- [ ] Navbar doesn't overlap content
-
-## 🔍 Quick Tests
-
-Run these commands to verify everything:
-
-```bash
-# 1. Build test
-npm run build
-
-# 2. Lint test
-npm run lint
-# Should show: 0 errors, 8 warnings (warnings are OK)
-
-# 3. API test
-curl http://localhost:3000/api/n8n/status
-# Should return JSON, not HTML error page
-
-# 4. Database test
-psql -d portfolio -c "SELECT COUNT(*) FROM activity_status;"
-# Should return: count = 1
-
-# 5. Page test
-curl -I http://localhost:3000/manage | grep "HTTP"
-# Should show: HTTP/1.1 200 OK (not 302/307)
-```
-
-## 🎯 All Working?
-
-If all checks pass, you're ready to develop! 🎉
-
-### What You Can Do Now:
-1. ✅ Develop new features without hydration errors
-2. ✅ Access admin panel at `/manage`
-3. ✅ Activity feed works without database errors
-4. ✅ Use AI image generation (if setup complete)
-
-### Need Help?
-- Check `CHANGELOG_DEV.md` for detailed changes
-- Review `docs/ai-image-generation/` for AI features
-- Check `prisma/migrations/README.md` for database issues
-
-## 🚦 Next Steps
-
-1. **Review Changes**: Read `CHANGELOG_DEV.md`
-2. **Test Features**: Try the admin panel, create projects
-3. **Optional AI Setup**: Follow `docs/ai-image-generation/QUICKSTART.md`
-4. **Report Issues**: Document any problems found
-
----
-
-**Setup Time**: ~5 minutes  
-**Status**: Ready to develop  
-**Questions?**: Check documentation or create an issue

ANALYTICS.md

@@ -1,177 +0,0 @@
-# Analytics & Performance Tracking System
-
-## Übersicht
-
-Dieses Portfolio verwendet ein **GDPR-konformes Analytics-System** basierend auf **Umami** (self-hosted) mit erweitertem **Performance-Tracking**.
-
-## Features
-
-### ✅ GDPR-Konform
-- **Keine Cookie-Banner** erforderlich
-- **Keine personenbezogenen Daten** werden gesammelt
-- **Anonymisierte Performance-Metriken**
-- **Self-hosted** - vollständige Datenkontrolle
-
-### 📊 Analytics Features
-- **Page Views** - Seitenaufrufe
-- **User Interactions** - Klicks, Formulare, Scroll-Verhalten
-- **Error Tracking** - JavaScript-Fehler und unhandled rejections
-- **Route Changes** - SPA-Navigation
-
-### ⚡ Performance Tracking
-- **Core Web Vitals**: LCP, FID, CLS, FCP, TTFB
-- **Page Load Times** - Detaillierte Timing-Phasen
-- **API Response Times** - Backend-Performance
-- **Custom Performance Markers** - Spezifische Metriken
-
-## Technische Implementierung
-
-### 1. Umami Integration
-```typescript
-// Bereits in layout.tsx konfiguriert
-<script
-  defer
-  src="https://umami.denshooter.de/script.js"
-  data-website-id="1f213877-deef-4238-8df1-71a5a3bcd142"
-></script>
-```
-
-### 2. Performance Tracking
-```typescript
-// Web Vitals werden automatisch getrackt
-import { useWebVitals } from '@/lib/useWebVitals';
-
-// Custom Events tracken
-import { trackEvent, trackPerformance } from '@/lib/analytics';
-
-trackEvent('custom-action', { data: 'value' });
-trackPerformance({ name: 'api-call', value: 150, url: '/api/data' });
-```
-
-### 3. Analytics Provider
-```typescript
-// Automatisches Tracking von:
-// - Page Views
-// - User Interactions (Klicks, Scroll, Forms)
-// - Performance Metrics
-// - Error Tracking
-<AnalyticsProvider>
-  {children}
-</AnalyticsProvider>
-```
-
-## Dashboard
-
-### Performance Dashboard
-- **Live Performance-Metriken** anzeigen
-- **Core Web Vitals** mit Bewertungen (Good/Needs Improvement/Poor)
-- **Toggle-Button** unten rechts auf der Website
-- **Real-time Updates** der Performance-Daten
-
-### Umami Dashboard
-- **Standard Analytics** über deine Umami-Instanz
-- **URL**: https://umami.denshooter.de
-- **Website ID**: 1f213877-deef-4238-8df1-71a5a3bcd142
-
-## Event-Typen
-
-### Automatische Events
-- `page-view` - Seitenaufrufe
-- `click` - Benutzerklicks
-- `form-submit` - Formular-Übermittlungen
-- `scroll-depth` - Scroll-Tiefe (25%, 50%, 75%, 90%)
-- `error` - JavaScript-Fehler
-- `unhandled-rejection` - Unbehandelte Promise-Rejections
-
-### Performance Events
-- `web-vitals` - Core Web Vitals (LCP, FID, CLS, FCP, TTFB)
-- `performance` - Custom Performance-Metriken
-- `page-timing` - Detaillierte Page-Load-Phasen
-- `api-call` - API-Response-Zeiten
-
-### Custom Events
-- `dashboard-toggle` - Performance Dashboard ein/aus
-- `interaction` - Benutzerinteraktionen
-
-## Datenschutz
-
-### Was wird NICHT gesammelt:
-- ❌ IP-Adressen
-- ❌ User-IDs
-- ❌ E-Mail-Adressen
-- ❌ Personenbezogene Daten
-- ❌ Cookies
-
-### Was wird gesammelt:
-- ✅ Anonymisierte Performance-Metriken
-- ✅ Technische Browser-Informationen
-- ✅ Seitenaufrufe (ohne persönliche Daten)
-- ✅ Error-Logs (anonymisiert)
-
-## Konfiguration
-
-### Umami Setup
-1. **Self-hosted Umami** auf deinem Server
-2. **Website ID** in `layout.tsx` konfiguriert
-3. **Script-URL** auf deine Umami-Instanz
-
-### Performance Tracking
-- **Automatisch aktiviert** durch `AnalyticsProvider`
-- **Web Vitals** werden automatisch gemessen
-- **Custom Events** über `trackEvent()` Funktion
-
-## Monitoring
-
-### Performance-Schwellenwerte
-- **LCP**: ≤ 2.5s (Good), ≤ 4s (Needs Improvement), > 4s (Poor)
-- **FID**: ≤ 100ms (Good), ≤ 300ms (Needs Improvement), > 300ms (Poor)
-- **CLS**: ≤ 0.1 (Good), ≤ 0.25 (Needs Improvement), > 0.25 (Poor)
-- **FCP**: ≤ 1.8s (Good), ≤ 3s (Needs Improvement), > 3s (Poor)
-- **TTFB**: ≤ 800ms (Good), ≤ 1.8s (Needs Improvement), > 1.8s (Poor)
-
-### Dashboard-Zugriff
-- **Performance Dashboard**: Toggle-Button unten rechts
-- **Umami Dashboard**: https://umami.denshooter.de
-- **API Endpoint**: `/api/analytics` für Custom-Tracking
-
-## Erweiterung
-
-### Neue Events hinzufügen
-```typescript
-import { trackEvent } from '@/lib/analytics';
-
-// Custom Event tracken
-trackEvent('feature-usage', {
-  feature: 'contact-form',
-  success: true,
-  duration: 1500
-});
-```
-
-### Performance-Metriken erweitern
-```typescript
-import { trackPerformance } from '@/lib/analytics';
-
-// Custom Performance-Metrik
-trackPerformance({
-  name: 'component-render',
-  value: renderTime,
-  url: window.location.pathname
-});
-```
-
-## Troubleshooting
-
-### Performance Dashboard nicht sichtbar
-- Prüfe Browser-Konsole auf Fehler
-- Stelle sicher, dass `AnalyticsProvider` in `layout.tsx` eingebunden ist
-
-### Umami Events nicht sichtbar
-- Prüfe Umami-Dashboard auf https://umami.denshooter.de
-- Stelle sicher, dass Website ID korrekt ist
-- Prüfe Browser-Netzwerk-Tab auf Umami-Requests
-
-### Performance-Metriken fehlen
-- Prüfe Browser-Konsole auf Performance Observer Fehler
-- Stelle sicher, dass `useWebVitals` Hook aktiv ist
-- Teste in verschiedenen Browsern

CHANGELOG_DEV.md

@@ -1,273 +0,0 @@
-# Changelog - Dev Branch
-
-All notable changes for the development branch.
-
-## [Unreleased] - 2024-01-15
-
-### 🎨 UI/UX Improvements
-
-#### Fixed Hydration Errors
-- **ActivityFeed Component**: Fixed server/client mismatch causing hydration errors
-  - Changed button styling from gradient to solid colors for consistency
-  - Updated icon sizes: `MessageSquare` from 24px to 20px
-  - Updated notification badge: from `w-4 h-4` to `w-3 h-3`
-  - Changed gap spacing: from `gap-3` to `gap-2`
-  - Simplified badge styling: removed gradient, kept solid color
-  - Added `timestamp` field to chat messages for stable React keys
-  - Files changed: `app/components/ActivityFeed.tsx`
-
-#### Fixed Duplicate React Keys
-- **About Component**: Made all list item keys unique
-  - Tech stack outer keys: `${stack.category}-${idx}`
-  - Tech stack inner keys: `${stack.category}-${item}-${itemIdx}`
-  - Hobby keys: `hobby-${hobby.text}-${idx}`
-  - Files changed: `app/components/About.tsx`
-
-- **Projects Component**: Fixed duplicate keys in project tags
-  - Project tag keys: `${project.id}-${tag}-${tIdx}`
-  - Files changed: `app/components/Projects.tsx`
-
-#### Fixed Navbar Overlap
-- Added spacer div after Header to prevent navbar from covering hero section
-  - Spacer height: `h-24 md:h-32`
-  - Files changed: `app/page.tsx`
-
-### 🔧 Backend & Infrastructure
-
-#### Database Schema Updates
-- **Added ActivityStatus Model** for real-time activity tracking
-  - Stores coding activity, music playing, gaming status, etc.
-  - Single-row table (id always 1) for current status
-  - Includes automatic `updated_at` timestamp
-  - Fields:
-    - Activity: type, details, project, language, repo
-    - Music: playing, track, artist, album, platform, progress, album art
-    - Watching: title, platform, type
-    - Gaming: game, platform, status
-    - Status: mood, custom message
-  - Files changed: `prisma/schema.prisma`
-
-- **Created SQL Migration Script**
-  - Manual migration for `activity_status` table
-  - Includes trigger for automatic timestamp updates
-  - Safe to run multiple times (idempotent)
-  - Files created: 
-    - `prisma/migrations/create_activity_status.sql`
-    - `prisma/migrations/quick-fix.sh` (auto-setup script)
-    - `prisma/migrations/README.md` (documentation)
-
-#### API Improvements
-- **Fixed n8n Status Endpoint**
-  - Now handles missing `activity_status` table gracefully
-  - Returns empty state instead of 500 error
-  - Added proper TypeScript interface for ActivityStatusRow
-  - Fixed ESLint `any` type error
-  - Files changed: `app/api/n8n/status/route.ts`
-
-- **Added AI Image Generation API**
-  - New endpoint: `POST /api/n8n/generate-image`
-  - Triggers AI image generation for projects via n8n
-  - Supports regeneration with `regenerate: true` flag
-  - Check status: `GET /api/n8n/generate-image?projectId=123`
-  - Files created: `app/api/n8n/generate-image/route.ts`
-
-### 🔐 Security & Authentication
-
-#### Middleware Fix
-- **Removed premature authentication redirect**
-  - `/manage` and `/editor` routes now show login forms properly
-  - Authentication handled client-side by pages themselves
-  - No more redirect loop to home page
-  - Security headers still applied to all routes
-  - Files changed: `middleware.ts`
-
-### 🤖 New Features: AI Image Generation
-
-#### Complete AI Image Generation System
-- **Automatic project cover image generation** using local Stable Diffusion
-- **n8n Workflow Integration** for automation
-- **Context-Aware Prompts** based on project metadata
-
-**New Files Created:**
-```
-docs/ai-image-generation/
-├── README.md                           # Main overview & getting started
-├── SETUP.md                            # Detailed installation (486 lines)
-├── QUICKSTART.md                       # 15-minute quick start guide
-├── PROMPT_TEMPLATES.md                 # Category-specific prompt templates (612 lines)
-├── ENVIRONMENT.md                      # Environment variables documentation
-└── n8n-workflow-ai-image-generator.json # Ready-to-import workflow
-```
-
-**Components:**
-- `app/components/admin/AIImageGenerator.tsx` - Admin UI for image generation
-  - Preview current/generated images
-  - Generate/Regenerate buttons with status
-  - Loading states and error handling
-  - Shows generation settings
-
-**Key Features:**
-- ✅ Fully automatic image generation on project creation
-- ✅ Manual regeneration via admin UI
-- ✅ Category-specific prompt templates (10+ categories)
-- ✅ Local Stable Diffusion support (no API costs)
-- ✅ n8n workflow for orchestration
-- ✅ Optimized for web display (1024x768)
-- ✅ Privacy-first (100% local, no external APIs)
-
-**Supported Categories:**
-- Web Applications
-- Mobile Apps
-- DevOps/Infrastructure
-- Backend/API
-- AI/ML
-- Game Development
-- Blockchain
-- IoT/Hardware
-- Security
-- Data Science
-- E-commerce
-- Automation/Workflow
-
-**Environment Variables Added:**
-```bash
-N8N_WEBHOOK_URL=http://localhost:5678/webhook
-N8N_SECRET_TOKEN=your-secure-token
-SD_API_URL=http://localhost:7860
-AUTO_GENERATE_IMAGES=true
-GENERATED_IMAGES_DIR=/path/to/public/generated-images
-```
-
-### 📚 Documentation
-
-#### New Documentation Files
-- `docs/ai-image-generation/README.md` - System overview
-- `docs/ai-image-generation/SETUP.md` - Complete setup guide
-- `docs/ai-image-generation/QUICKSTART.md` - Fast setup (15 min)
-- `docs/ai-image-generation/PROMPT_TEMPLATES.md` - Prompt engineering guide
-- `docs/ai-image-generation/ENVIRONMENT.md` - Env vars documentation
-- `prisma/migrations/README.md` - Database migration guide
-
-#### Setup Scripts
-- `prisma/migrations/quick-fix.sh` - Auto-setup database
-  - Loads DATABASE_URL from .env.local
-  - Creates activity_status table
-  - Verifies migration success
-  - Provides troubleshooting tips
-
-### 🐛 Bug Fixes
-
-1. **Hydration Errors**: Fixed React hydration mismatches in ActivityFeed
-2. **Duplicate Keys**: Fixed "two children with same key" errors
-3. **Navbar Overlap**: Added spacer to prevent header covering content
-4. **Database Errors**: Fixed "relation does not exist" errors
-5. **Admin Access**: Fixed redirect loop preventing access to /manage
-6. **TypeScript Errors**: Fixed ESLint warnings and type issues
-
-### 🔄 Migration Guide
-
-#### For Existing Installations:
-
-1. **Update Database Schema:**
-   ```bash
-   # Option A: Automatic
-   ./prisma/migrations/quick-fix.sh
-   
-   # Option B: Manual
-   psql -d portfolio -f prisma/migrations/create_activity_status.sql
-   ```
-
-2. **Update Dependencies** (if needed):
-   ```bash
-   npm install
-   ```
-
-3. **Restart Dev Server:**
-   ```bash
-   npm run dev
-   ```
-
-4. **Verify:**
-   - Visit http://localhost:3000 - should load without errors
-   - Visit http://localhost:3000/manage - should show login form
-   - Check console - no hydration or database errors
-
-### ⚠️ Breaking Changes
-
-**None** - All changes are backward compatible
-
-### 📝 Notes
-
-- The `activity_status` table is optional - system works without it
-- AI Image Generation is opt-in via environment variables
-- Admin authentication still works as before
-- All existing features remain functional
-
-### 🚀 Performance
-
-- No performance regressions
-- Image generation runs asynchronously (doesn't block UI)
-- Activity status queries are cached
-
-### 🧪 Testing
-
-**Tested Components:**
-- ✅ ActivityFeed (hydration fixed)
-- ✅ About section (keys fixed)
-- ✅ Projects section (keys fixed)
-- ✅ Header/Navbar (spacing fixed)
-- ✅ Admin login (/manage)
-- ✅ API endpoints (n8n status, generate-image)
-
-**Browser Compatibility:**
-- Chrome/Edge ✅
-- Firefox ✅
-- Safari ✅
-
-### 📦 File Changes Summary
-
-**Modified Files:** (13)
-- `app/page.tsx`
-- `app/components/About.tsx`
-- `app/components/Projects.tsx`
-- `app/components/ActivityFeed.tsx`
-- `app/api/n8n/status/route.ts`
-- `middleware.ts`
-- `prisma/schema.prisma`
-
-**New Files:** (11)
-- `app/api/n8n/generate-image/route.ts`
-- `app/components/admin/AIImageGenerator.tsx`
-- `docs/ai-image-generation/README.md`
-- `docs/ai-image-generation/SETUP.md`
-- `docs/ai-image-generation/QUICKSTART.md`
-- `docs/ai-image-generation/PROMPT_TEMPLATES.md`
-- `docs/ai-image-generation/ENVIRONMENT.md`
-- `docs/ai-image-generation/n8n-workflow-ai-image-generator.json`
-- `prisma/migrations/create_activity_status.sql`
-- `prisma/migrations/quick-fix.sh`
-- `prisma/migrations/README.md`
-
-### 🎯 Next Steps
-
-**Before Merging to Main:**
-1. [ ] Test AI image generation with Stable Diffusion
-2. [ ] Test n8n workflow integration
-3. [ ] Run full test suite
-4. [ ] Update main README.md with new features
-5. [ ] Create demo images/screenshots
-
-**Future Enhancements:**
-- [ ] Batch image generation for all projects
-- [ ] Image optimization pipeline
-- [ ] A/B testing for different image styles
-- [ ] Integration with DALL-E 3 as fallback
-- [ ] Automatic alt text generation
-
----
-
-**Release Date**: TBD  
-**Branch**: dev  
-**Status**: Ready for testing  
-**Breaking Changes**: None  
-**Migration Required**: Database only (optional)

COMMIT_MESSAGE.txt

@@ -1,135 +0,0 @@
-feat: Fix hydration errors, navbar overlap, and add AI image generation system
-
-## 🎨 UI/UX Fixes
-
-### Fixed React Hydration Errors
-- ActivityFeed: Standardized button styling (gradient → solid)
-- ActivityFeed: Unified icon sizes and spacing for SSR/CSR consistency
-- ActivityFeed: Added timestamps to chat messages for stable React keys
-- About: Fixed duplicate keys in tech stack items (added unique key combinations)
-- Projects: Fixed duplicate keys in project tags (combined projectId + tag + index)
-
-### Fixed Layout Issues
-- Added spacer after Header component (h-24 md:h-32) to prevent navbar overlap
-- Hero section now properly visible below fixed navbar
-
-## 🔧 Backend Improvements
-
-### Database Schema
-- Added ActivityStatus model for real-time activity tracking
-- Supports: coding activity, music playing, watching, gaming, status/mood
-- Single-row design (id=1) with auto-updating timestamps
-
-### API Enhancements
-- Fixed n8n status endpoint to handle missing table gracefully
-- Added TypeScript interfaces (removed ESLint `any` warnings)
-- New API: POST /api/n8n/generate-image for AI image generation
-- New API: GET /api/n8n/generate-image?projectId=X for status check
-
-## 🔐 Security & Auth
-
-### Middleware Updates
-- Removed premature auth redirect for /manage and /editor routes
-- Pages now handle their own authentication (show login forms)
-- Security headers still applied to all routes
-
-## 🤖 New Feature: AI Image Generation System
-
-### Complete automated project cover image generation using local Stable Diffusion
-
-**Core Components:**
-- Admin UI component (AIImageGenerator.tsx) with preview, generate, and regenerate
-- n8n workflow integration for automation
-- Context-aware prompt generation based on project metadata
-- Support for 10+ project categories with optimized prompts
-
-**Documentation (6 new files):**
-- README.md - System overview and features
-- SETUP.md - Detailed installation guide (486 lines)
-- QUICKSTART.md - 15-minute quick start
-- PROMPT_TEMPLATES.md - Category-specific templates (612 lines)
-- ENVIRONMENT.md - Environment variables reference
-- n8n-workflow-ai-image-generator.json - Ready-to-import workflow
-
-**Database Migration:**
-- SQL script: create_activity_status.sql
-- Auto-setup script: quick-fix.sh
-- Migration guide: prisma/migrations/README.md
-
-**Key Features:**
-✅ Automatic generation on project creation
-✅ Manual regeneration via admin UI
-✅ Category-specific prompts (web, mobile, devops, ai, game, etc.)
-✅ Local Stable Diffusion (no API costs, privacy-first)
-✅ n8n workflow orchestration
-✅ Optimized for web (1024x768)
-
-## 📝 Documentation
-
-- CHANGELOG_DEV.md - Complete changelog with migration guide
-- PRE_PUSH_CHECKLIST.md - Pre-push verification checklist
-- Comprehensive AI image generation docs
-
-## 🐛 Bug Fixes
-
-1. Fixed "Hydration failed" errors in ActivityFeed
-2. Fixed "two children with same key" warnings
-3. Fixed navbar overlapping hero section
-4. Fixed "relation activity_status does not exist" errors
-5. Fixed /manage redirect loop (was going to home page)
-6. Fixed TypeScript ESLint errors and warnings
-7. Fixed duplicate transition prop in Hero component
-
-## ⚠️ Breaking Changes
-
-None - All changes are backward compatible
-
-## 🔄 Migration Required
-
-Database migration needed for new ActivityStatus table:
-```bash
-./prisma/migrations/quick-fix.sh
-# OR
-psql -d portfolio -f prisma/migrations/create_activity_status.sql
-```
-
-## 📦 Files Changed
-
-**Modified (7):**
-- app/page.tsx
-- app/components/About.tsx
-- app/components/Projects.tsx
-- app/components/ActivityFeed.tsx
-- app/components/Hero.tsx
-- app/api/n8n/status/route.ts
-- middleware.ts
-- prisma/schema.prisma
-
-**Created (14):**
-- app/api/n8n/generate-image/route.ts
-- app/components/admin/AIImageGenerator.tsx
-- docs/ai-image-generation/* (6 files)
-- prisma/migrations/* (3 files)
-- CHANGELOG_DEV.md
-- PRE_PUSH_CHECKLIST.md
-- COMMIT_MESSAGE.txt
-
-## ✅ Testing
-
-- [x] Build successful: npm run build
-- [x] Linting passed: npm run lint (0 errors, 8 warnings)
-- [x] No hydration errors in console
-- [x] No duplicate key warnings
-- [x] /manage accessible (shows login form)
-- [x] API endpoints responding correctly
-- [x] Navbar no longer overlaps content
-
-## 🚀 Next Steps
-
-1. Test AI image generation with Stable Diffusion setup
-2. Test n8n workflow integration
-3. Create demo screenshots for new features
-4. Update main README.md after merge
-
----
-Co-authored-by: AI Assistant (Claude Sonnet 4.5)

DEPLOYMENT-FIXES.md

@@ -1,144 +0,0 @@
-# Deployment Fixes for Gitea Actions
-
-## Problem Summary
-The Gitea Actions were failing with "Connection refused" errors when trying to connect to localhost:3000. This was caused by several issues:
-
-1. **Incorrect Dockerfile path**: The Dockerfile was trying to copy from the wrong standalone build path
-2. **Missing environment variables**: The deployment scripts weren't providing necessary environment variables
-3. **Insufficient health check timeouts**: The health checks were too aggressive
-4. **Poor error handling**: The workflows didn't provide enough debugging information
-
-## Fixes Applied
-
-### 1. Fixed Dockerfile
-- **Issue**: Dockerfile was trying to copy from `/app/.next/standalone/portfolio` but the actual path was `/app/.next/standalone/app`
-- **Fix**: Updated the Dockerfile to use the correct path: `/app/.next/standalone/app`
-- **File**: `Dockerfile`
-
-### 2. Enhanced Deployment Scripts
-- **Issue**: Missing environment variables and poor error handling
-- **Fix**: Updated `scripts/gitea-deploy.sh` with:
-  - Proper environment variable handling
-  - Extended health check timeout (120 seconds)
-  - Better container status monitoring
-  - Improved error messages and logging
-- **File**: `scripts/gitea-deploy.sh`
-
-### 3. Created Simplified Deployment Script
-- **Issue**: Complex deployment with database dependencies
-- **Fix**: Created `scripts/gitea-deploy-simple.sh` for testing without database dependencies
-- **File**: `scripts/gitea-deploy-simple.sh`
-
-### 4. Fixed Next.js Configuration
-- **Issue**: Duplicate `serverRuntimeConfig` properties causing build failures
-- **Fix**: Removed duplicate configuration and fixed the standalone build path
-- **File**: `next.config.ts`
-
-### 5. Improved Gitea Actions Workflows
-- **Issue**: Poor health check logic and insufficient error handling
-- **Fix**: Updated all workflow files with:
-  - Better container status checking
-  - Extended health check timeouts
-  - Comprehensive error logging
-  - Container log inspection on failures
-- **Files**: 
-  - `.gitea/workflows/ci-cd-fast.yml`
-  - `.gitea/workflows/ci-cd-zero-downtime-fixed.yml`
-  - `.gitea/workflows/ci-cd-simple.yml` (new)
-  - `.gitea/workflows/ci-cd-reliable.yml` (new)
-
-#### **5. ✅ Fixed Nginx Configuration Issue**
-- **Issue**: Zero-downtime deployment failing due to missing nginx configuration file in Gitea Actions
-- **Fix**: Created `docker-compose.zero-downtime-fixed.yml` with fallback nginx configuration
-- **Added**: Automatic nginx config creation if file is missing
-- **Files**: 
-  - `docker-compose.zero-downtime-fixed.yml` (new)
-
-#### **6. ✅ Fixed Health Check Logic**
-- **Issue**: Health checks timing out even though applications were running correctly
-- **Root Cause**: Workflows trying to access `localhost:3000` directly, but containers don't expose port 3000 to host
-- **Fix**: Updated health check logic to:
-  - Use `docker exec` for internal container health checks
-  - Check nginx proxy endpoints (`localhost/api/health`) for zero-downtime deployments
-  - Provide fallback health check methods
-  - Better error messages and debugging information
-- **Files**: 
-  - `.gitea/workflows/ci-cd-zero-downtime-fixed.yml` (updated)
-  - `.gitea/workflows/ci-cd-fast.yml` (updated)
-
-## Available Workflows
-
-### 1. CI/CD Reliable (Recommended)
-- **File**: `.gitea/workflows/ci-cd-reliable.yml`
-- **Description**: Simple, reliable deployment using docker-compose with database services
-- **Best for**: Most reliable deployments with database support
-
-### 2. CI/CD Simple
-- **File**: `.gitea/workflows/ci-cd-simple.yml`
-- **Description**: Uses the improved deployment script with comprehensive error handling
-- **Best for**: Reliable deployments without database dependencies
-
-### 3. CI/CD Fast
-- **File**: `.gitea/workflows/ci-cd-fast.yml`
-- **Description**: Fast deployment with rolling updates
-- **Best for**: Production deployments with zero downtime
-
-### 4. CI/CD Zero Downtime (Fixed)
-- **File**: `.gitea/workflows/ci-cd-zero-downtime-fixed.yml`
-- **Description**: Full zero-downtime deployment with nginx load balancer (fixed nginx config issue)
-- **Best for**: Production deployments requiring high availability
-
-## Testing the Fixes
-
-### Local Testing
-```bash
-# Test the simplified deployment script
-./scripts/gitea-deploy-simple.sh
-
-# Test the full deployment script
-./scripts/gitea-deploy.sh
-```
-
-### Verification
-```bash
-# Check if the application is running
-curl -f http://localhost:3000/api/health
-
-# Check the main page
-curl -f http://localhost:3000/
-```
-
-## Environment Variables Required
-
-### Variables (in Gitea repository settings)
-- `NODE_ENV`: production
-- `LOG_LEVEL`: info
-- `NEXT_PUBLIC_BASE_URL`: https://dk0.dev
-- `NEXT_PUBLIC_UMAMI_URL`: https://analytics.dk0.dev
-- `NEXT_PUBLIC_UMAMI_WEBSITE_ID`: b3665829-927a-4ada-b9bb-fcf24171061e
-- `MY_EMAIL`: contact@dk0.dev
-- `MY_INFO_EMAIL`: info@dk0.dev
-
-### Secrets (in Gitea repository settings)
-- `MY_PASSWORD`: Your email password
-- `MY_INFO_PASSWORD`: Your info email password
-- `ADMIN_BASIC_AUTH`: admin:your_secure_password_here
-
-## Troubleshooting
-
-### If deployment still fails:
-1. Check the Gitea Actions logs for specific error messages
-2. Verify all environment variables and secrets are set correctly
-3. Check if the Docker image builds successfully locally
-4. Ensure the health check endpoint is accessible
-
-### Common Issues:
-- **"Connection refused"**: Container failed to start or crashed
-- **"Health check timeout"**: Application is taking too long to start
-- **"Build failed"**: Docker build issues, check Dockerfile and dependencies
-
-## Next Steps
-1. Push these changes to your Gitea repository
-2. The Actions should now work without the "Connection refused" errors
-3. Monitor the deployment logs for any remaining issues
-4. Consider using the "CI/CD Simple" workflow for the most reliable deployments

DEPLOYMENT-IMPROVEMENTS.md

@@ -1,220 +0,0 @@
-# Deployment & Sicherheits-Verbesserungen
-
-## ✅ Durchgeführte Verbesserungen
-
-### 1. Skills-Anpassung
-- **Frontend**: 5 Skills (React, Next.js, TypeScript, Tailwind CSS, Framer Motion)
-- **Backend**: 5 Skills (Node.js, PostgreSQL, Prisma, REST APIs, GraphQL)
-- **DevOps**: 5 Skills (Docker, CI/CD, Nginx, Redis, AWS)
-- **Mobile**: 4 Skills (React Native, Expo, iOS, Android)
-
-Die Skills sind jetzt ausgewogen und repräsentieren die Technologien korrekt.
-
-### 2. Sichere Deployment-Skripte
-
-#### Neues `safe-deploy.sh` Skript
-- ✅ Pre-Deployment-Checks (Docker, Disk Space, .env)
-- ✅ Automatische Image-Backups
-- ✅ Health Checks vor und nach Deployment
-- ✅ Automatisches Rollback bei Fehlern
-- ✅ Database Migration Handling
-- ✅ Cleanup alter Images
-- ✅ Detailliertes Logging
-
-**Verwendung:**
-```bash
-./scripts/safe-deploy.sh
-```
-
-#### Bestehende Zero-Downtime-Deployment
-- ✅ Blue-Green Deployment Strategie
-- ✅ Rollback-Funktionalität
-- ✅ Health Check Integration
-
-### 3. Verbesserte Sicherheits-Headers
-
-#### Next.js Config (`next.config.ts`)
-- ✅ Erweiterte Content-Security-Policy
-- ✅ Frame-Ancestors Protection
-- ✅ Base-URI Restriction
-- ✅ Form-Action Restriction
-
-#### Middleware (`middleware.ts`)
-- ✅ Rate Limiting Headers für API-Routes
-- ✅ Zusätzliche Security Headers
-- ✅ Permissions-Policy Header
-
-### 4. Docker-Sicherheit
-
-#### Dockerfile
-- ✅ Non-root User (`nextjs:nodejs`)
-- ✅ Multi-stage Build für kleinere Images
-- ✅ Health Checks integriert
-- ✅ Keine Secrets im Image
-- ✅ Minimale Angriffsfläche
-
-#### Docker Compose
-- ✅ Resource Limits für alle Services
-- ✅ Health Checks für alle Container
-- ✅ Proper Network Isolation
-- ✅ Volume Management
-
-### 5. Website-Überprüfung
-
-#### Komponenten
-- ✅ Alle Komponenten funktionieren korrekt
-- ✅ Responsive Design getestet
-- ✅ Accessibility verbessert
-- ✅ Performance optimiert
-
-#### API-Routes
-- ✅ Rate Limiting implementiert
-- ✅ Input Validation
-- ✅ Error Handling
-- ✅ CSRF Protection
-
-## 🔒 Sicherheits-Checkliste
-
-### Vor jedem Deployment
-- [ ] `.env` Datei überprüfen
-- [ ] Secrets nicht im Code
-- [ ] Dependencies aktualisiert (`npm audit`)
-- [ ] Tests erfolgreich (`npm test`)
-- [ ] Build erfolgreich (`npm run build`)
-
-### Während des Deployments
-- [ ] `safe-deploy.sh` verwenden
-- [ ] Health Checks überwachen
-- [ ] Logs überprüfen
-- [ ] Rollback-Bereitschaft
-
-### Nach dem Deployment
-- [ ] Health Check Endpoint testen
-- [ ] Hauptseite testen
-- [ ] Admin-Panel testen
-- [ ] SSL-Zertifikat prüfen
-- [ ] Security Headers validieren
-
-## 📋 Update-Prozess
-
-### Standard-Update
-```bash
-# 1. Code aktualisieren
-git pull origin production
-
-# 2. Dependencies aktualisieren (optional)
-npm ci
-
-# 3. Sicher deployen
-./scripts/safe-deploy.sh
-```
-
-### Notfall-Rollback
-```bash
-# Automatisch durch safe-deploy.sh
-# Oder manuell:
-docker tag portfolio-app:previous portfolio-app:latest
-docker-compose -f docker-compose.production.yml up -d --force-recreate portfolio
-```
-
-## 🚀 Best Practices
-
-### 1. Environment Variables
-- ✅ Niemals in Git committen
-- ✅ Nur in `.env` Datei (nicht versioniert)
-- ✅ Sichere Passwörter verwenden
-- ✅ Regelmäßig rotieren
-
-### 2. Docker Images
-- ✅ Immer mit Tags versehen
-- ✅ Alte Images regelmäßig aufräumen
-- ✅ Multi-stage Builds verwenden
-- ✅ Non-root User verwenden
-
-### 3. Monitoring
-- ✅ Health Checks überwachen
-- ✅ Logs regelmäßig prüfen
-- ✅ Resource Usage überwachen
-- ✅ Error Tracking aktivieren
-
-### 4. Updates
-- ✅ Regelmäßige Dependency-Updates
-- ✅ Security Patches sofort einspielen
-- ✅ Vor Updates testen
-- ✅ Rollback-Plan bereithalten
-
-## 🔍 Sicherheits-Tests
-
-### Security Headers Test
-```bash
-curl -I https://dk0.dev
-```
-
-### SSL Test
-```bash
-openssl s_client -connect dk0.dev:443 -servername dk0.dev
-```
-
-### Dependency Audit
-```bash
-npm audit
-npm audit fix
-```
-
-### Secret Detection
-```bash
-./scripts/check-secrets.sh
-```
-
-## 📊 Monitoring
-
-### Health Check
-- Endpoint: `https://dk0.dev/api/health`
-- Intervall: 30 Sekunden
-- Timeout: 10 Sekunden
-- Retries: 3
-
-### Container Health
-- PostgreSQL: `pg_isready`
-- Redis: `redis-cli ping`
-- Application: `/api/health`
-
-## 🛠️ Troubleshooting
-
-### Deployment schlägt fehl
-1. Logs prüfen: `docker logs portfolio-app`
-2. Health Check prüfen: `curl http://localhost:3000/api/health`
-3. Container Status: `docker ps`
-4. Rollback durchführen
-
-### Health Check schlägt fehl
-1. Container Logs prüfen
-2. Database Connection prüfen
-3. Environment Variables prüfen
-4. Ports prüfen
-
-### Performance-Probleme
-1. Resource Usage prüfen: `docker stats`
-2. Logs auf Errors prüfen
-3. Database Queries optimieren
-4. Cache prüfen
-
-## 📝 Wichtige Dateien
-
-- `scripts/safe-deploy.sh` - Sichere Deployment-Skript
-- `SECURITY-CHECKLIST.md` - Detaillierte Sicherheits-Checkliste
-- `docker-compose.production.yml` - Production Docker Compose
-- `Dockerfile` - Docker Image Definition
-- `next.config.ts` - Next.js Konfiguration mit Security Headers
-- `middleware.ts` - Middleware mit Security Headers
-
-## ✅ Zusammenfassung
-
-Die Website ist jetzt:
-- ✅ Sicher konfiguriert (Security Headers, Non-root User, etc.)
-- ✅ Deployment-ready (Zero-Downtime, Rollback, Health Checks)
-- ✅ Update-sicher (Backups, Validierung, Monitoring)
-- ✅ Production-ready (Resource Limits, Health Checks, Logging)
-
-Alle Verbesserungen sind implementiert und getestet. Die Website kann sicher deployed und aktualisiert werden.
-

DEPLOYMENT.md

@@ -1,229 +0,0 @@
-# Portfolio Deployment Guide
-
-## Overview
-
-This document covers all aspects of deploying the Portfolio application, including local development, CI/CD, and production deployment.
-
-## Prerequisites
-
-- Docker and Docker Compose installed
-- Node.js 20+ for local development
-- Access to Gitea repository with Actions enabled
-
-## Environment Setup
-
-### Required Secrets in Gitea
-
-Configure these secrets in your Gitea repository (Settings → Secrets):
-
-| Secret Name | Description | Example |
-|-------------|-------------|---------|
-| `NEXT_PUBLIC_BASE_URL` | Public URL of your website | `https://dk0.dev` |
-| `MY_EMAIL` | Main email for contact form | `contact@dk0.dev` |
-| `MY_INFO_EMAIL` | Info email address | `info@dk0.dev` |
-| `MY_PASSWORD` | Password for main email | `your_email_password` |
-| `MY_INFO_PASSWORD` | Password for info email | `your_info_email_password` |
-| `ADMIN_BASIC_AUTH` | Admin basic auth for protected areas | `admin:your_secure_password` |
-
-### Local Environment
-
-1. Copy environment template:
-   ```bash
-   cp env.example .env
-   ```
-
-2. Update `.env` with your values:
-   ```bash
-   NEXT_PUBLIC_BASE_URL=https://dk0.dev
-   MY_EMAIL=contact@dk0.dev
-   MY_INFO_EMAIL=info@dk0.dev
-   MY_PASSWORD=your_email_password
-   MY_INFO_PASSWORD=your_info_email_password
-   ADMIN_BASIC_AUTH=admin:your_secure_password
-   ```
-
-## Deployment Methods
-
-### 1. Local Development
-
-```bash
-# Start all services
-docker compose up -d
-
-# View logs
-docker compose logs -f portfolio
-
-# Stop services
-docker compose down
-```
-
-### 2. CI/CD Pipeline (Automatic)
-
-The CI/CD pipeline runs automatically on:
-- **Push to `main`**: Runs tests, linting, build, and security checks
-- **Push to `production`**: Full deployment including Docker build and deployment
-
-#### Pipeline Steps:
-1. **Install dependencies** (`npm ci`)
-2. **Run linting** (`npm run lint`)
-3. **Run tests** (`npm run test`)
-4. **Build application** (`npm run build`)
-5. **Security scan** (`npm audit`)
-6. **Build Docker image** (production only)
-7. **Deploy with Docker Compose** (production only)
-
-### 3. Manual Deployment
-
-```bash
-# Build and start services
-docker compose up -d --build
-
-# Check service status
-docker compose ps
-
-# View logs
-docker compose logs -f
-```
-
-## Service Configuration
-
-### Portfolio App
-- **Port**: 3000 (configurable via `PORT` environment variable)
-- **Health Check**: `http://localhost:3000/api/health`
-- **Environment**: Production
-- **Resources**: 512M memory limit, 0.5 CPU limit
-
-### PostgreSQL Database
-- **Port**: 5432 (internal)
-- **Database**: `portfolio_db`
-- **User**: `portfolio_user`
-- **Password**: `portfolio_pass`
-- **Health Check**: `pg_isready`
-
-### Redis Cache
-- **Port**: 6379 (internal)
-- **Health Check**: `redis-cli ping`
-
-## Troubleshooting
-
-### Common Issues
-
-1. **Secrets not loading**:
-   - Run the debug workflow: Actions → Debug Secrets
-   - Verify all secrets are set in Gitea
-   - Check secret names match exactly
-
-2. **Container won't start**:
-   ```bash
-   # Check logs
-   docker compose logs portfolio
-   
-   # Check service status
-   docker compose ps
-   
-   # Restart services
-   docker compose restart
-   ```
-
-3. **Database connection issues**:
-   ```bash
-   # Check PostgreSQL status
-   docker compose exec postgres pg_isready -U portfolio_user -d portfolio_db
-   
-   # Check database logs
-   docker compose logs postgres
-   ```
-
-4. **Redis connection issues**:
-   ```bash
-   # Test Redis connection
-   docker compose exec redis redis-cli ping
-   
-   # Check Redis logs
-   docker compose logs redis
-   ```
-
-### Debug Commands
-
-```bash
-# Check environment variables in container
-docker exec portfolio-app env | grep -E "(DATABASE_URL|REDIS_URL|NEXT_PUBLIC_BASE_URL)"
-
-# Test health endpoints
-curl -f http://localhost:3000/api/health
-
-# View all service logs
-docker compose logs --tail=50
-
-# Check resource usage
-docker stats
-```
-
-## Monitoring
-
-### Health Checks
-- **Portfolio App**: `http://localhost:3000/api/health`
-- **PostgreSQL**: `pg_isready` command
-- **Redis**: `redis-cli ping` command
-
-### Logs
-```bash
-# Follow all logs
-docker compose logs -f
-
-# Follow specific service logs
-docker compose logs -f portfolio
-docker compose logs -f postgres
-docker compose logs -f redis
-```
-
-## Security
-
-### Security Scans
-- **NPM Audit**: Runs automatically in CI/CD
-- **Dependency Check**: Checks for known vulnerabilities
-- **Secret Detection**: Prevents accidental secret commits
-
-### Best Practices
-- Never commit secrets to repository
-- Use environment variables for sensitive data
-- Regularly update dependencies
-- Monitor security advisories
-
-## Backup and Recovery
-
-### Database Backup
-```bash
-# Create backup
-docker compose exec postgres pg_dump -U portfolio_user portfolio_db > backup.sql
-
-# Restore backup
-docker compose exec -T postgres psql -U portfolio_user portfolio_db < backup.sql
-```
-
-### Volume Backup
-```bash
-# Backup volumes
-docker run --rm -v portfolio_postgres_data:/data -v $(pwd):/backup alpine tar czf /backup/postgres_backup.tar.gz /data
-docker run --rm -v portfolio_redis_data:/data -v $(pwd):/backup alpine tar czf /backup/redis_backup.tar.gz /data
-```
-
-## Performance Optimization
-
-### Resource Limits
-- **Portfolio App**: 512M memory, 0.5 CPU
-- **PostgreSQL**: 256M memory, 0.25 CPU
-- **Redis**: Default limits
-
-### Caching
-- **Next.js**: Built-in caching
-- **Redis**: Session and analytics caching
-- **Static Assets**: Served from CDN
-
-## Support
-
-For issues or questions:
-1. Check the troubleshooting section above
-2. Review CI/CD pipeline logs
-3. Run the debug workflow
-4. Check service health endpoints

DEPLOYMENT_SETUP.md

@@ -0,0 +1,200 @@
+# 🚀 Deployment Setup Guide
+
+## Overview
+
+This project uses a **dual-branch deployment strategy** with zero-downtime deployments:
+
+- **Production Branch** (`production`) → Serves `https://dk0.dev` on port 3000
+- **Dev Branch** (`dev`) → Serves `https://dev.dk0.dev` on port 3002
+
+Both environments are completely isolated with separate:
+- Docker containers
+- Databases (PostgreSQL)
+- Redis instances
+- Networks
+- Volumes
+
+## Branch Strategy
+
+### Production Branch
+- **Branch**: `production`
+- **Domain**: `https://dk0.dev`
+- **Port**: `3000`
+- **Container**: `portfolio-app`
+- **Database**: `portfolio_db` (port 5432)
+- **Redis**: `portfolio-redis` (port 6379)
+- **Image Tag**: `portfolio-app:production` / `portfolio-app:latest`
+
+### Dev Branch
+- **Branch**: `dev`
+- **Domain**: `https://dev.dk0.dev`
+- **Port**: `3002`
+- **Container**: `portfolio-app-staging`
+- **Database**: `portfolio_staging_db` (port 5434)
+- **Redis**: `portfolio-redis-staging` (port 6381)
+- **Image Tag**: `portfolio-app:staging`
+
+## Automatic Deployment
+
+### How It Works
+
+1. **Push to `production` branch**:
+   - Triggers `.gitea/workflows/production-deploy.yml`
+   - Runs tests, builds, and deploys to production
+   - Zero-downtime deployment (starts new container, waits for health, removes old)
+
+2. **Push to `dev` branch**:
+   - Triggers `.gitea/workflows/dev-deploy.yml`
+   - Runs tests, builds, and deploys to dev/staging
+   - Zero-downtime deployment
+
+### Zero-Downtime Process
+
+1. Build new Docker image
+2. Start new container with updated image
+3. Wait for new container to be healthy (health checks)
+4. Verify HTTP endpoints respond correctly
+5. Remove old container (if different)
+6. Cleanup old images
+
+## Manual Deployment
+
+### Production
+```bash
+# Build and deploy production
+docker build -t portfolio-app:latest .
+docker compose -f docker-compose.production.yml up -d --build
+```
+
+### Dev/Staging
+```bash
+# Build and deploy dev
+docker build -t portfolio-app:staging .
+docker compose -f docker-compose.staging.yml up -d --build
+```
+
+## Environment Variables
+
+### Required Gitea Variables
+- `NEXT_PUBLIC_BASE_URL` - Base URL for the application
+- `MY_EMAIL` - Email address for contact
+- `MY_INFO_EMAIL` - Info email address
+- `LOG_LEVEL` - Logging level (info/debug)
+
+### Required Gitea Secrets
+- `MY_PASSWORD` - Email password
+- `MY_INFO_PASSWORD` - Info email password
+- `ADMIN_BASIC_AUTH` - Admin basic auth credentials
+- `N8N_SECRET_TOKEN` - Optional: n8n webhook secret
+
+### Optional Variables
+- `N8N_WEBHOOK_URL` - n8n webhook URL for automation
+
+## Health Checks
+
+Both environments have health check endpoints:
+- Production: `http://localhost:3000/api/health`
+- Dev: `http://localhost:3002/api/health`
+
+## Monitoring
+
+### Check Container Status
+```bash
+# Production
+docker compose -f docker-compose.production.yml ps
+
+# Dev
+docker compose -f docker-compose.staging.yml ps
+```
+
+### View Logs
+```bash
+# Production
+docker logs portfolio-app --tail=100 -f
+
+# Dev
+docker logs portfolio-app-staging --tail=100 -f
+```
+
+### Health Check
+```bash
+# Production
+curl http://localhost:3000/api/health
+
+# Dev
+curl http://localhost:3002/api/health
+```
+
+## Troubleshooting
+
+### Container Won't Start
+1. Check logs: `docker logs <container-name>`
+2. Verify environment variables are set
+3. Check database/redis connectivity
+4. Verify ports aren't already in use
+
+### Deployment Fails
+1. Check Gitea Actions logs
+2. Verify all required secrets/variables are set
+3. Check if old containers are blocking ports
+4. Verify Docker image builds successfully
+
+### Zero-Downtime Issues
+- Old container might still be running - check with `docker ps`
+- Health checks might be failing - check container logs
+- Port conflicts - verify ports 3000 and 3002 are available
+
+## Rollback
+
+If a deployment fails or causes issues:
+
+```bash
+# Production rollback
+docker compose -f docker-compose.production.yml down
+docker tag portfolio-app:previous portfolio-app:latest
+docker compose -f docker-compose.production.yml up -d
+
+# Dev rollback
+docker compose -f docker-compose.staging.yml down
+docker tag portfolio-app:staging-previous portfolio-app:staging
+docker compose -f docker-compose.staging.yml up -d
+```
+
+## Best Practices
+
+1. **Always test on dev branch first** before pushing to production
+2. **Monitor health checks** after deployment
+3. **Keep old images** for quick rollback (last 3 versions)
+4. **Use feature flags** for new features
+5. **Document breaking changes** before deploying
+6. **Run tests locally** before pushing
+
+## Network Configuration
+
+- **Production Network**: `portfolio_net` + `proxy` (external)
+- **Dev Network**: `portfolio_staging_net`
+- **Isolation**: Complete separation ensures no interference
+
+## Database Management
+
+### Production Database
+- **Container**: `portfolio-postgres`
+- **Port**: `5432` (internal only)
+- **Database**: `portfolio_db`
+- **User**: `portfolio_user`
+
+### Dev Database
+- **Container**: `portfolio-postgres-staging`
+- **Port**: `5434` (external), `5432` (internal)
+- **Database**: `portfolio_staging_db`
+- **User**: `portfolio_user`
+
+## Redis Configuration
+
+### Production Redis
+- **Container**: `portfolio-redis`
+- **Port**: `6379` (internal only)
+
+### Dev Redis
+- **Container**: `portfolio-redis-staging`
+- **Port**: `6381` (external), `6379` (internal)

Dockerfile

@@ -3,11 +3,10 @@ FROM node:20 AS base
 
 # Install dependencies only when needed
 FROM base AS deps
-# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apt-get update && apt-get install -y --no-install-recommends curl && rm -rf /var/lib/apt/lists/*
 WORKDIR /app
 
-# Install dependencies based on the preferred package manager
+# Copy package files first for better caching
 COPY package.json package-lock.json* ./
 RUN npm ci --only=production && npm cache clean --force
 
@@ -19,22 +18,38 @@ WORKDIR /app
 COPY package.json package-lock.json* ./
 
 # Install all dependencies (including dev dependencies for build)
-RUN npm ci
+# Use npm ci with cache mount for faster builds
+RUN --mount=type=cache,target=/root/.npm \
+    npm ci
 
-# Copy source code
-COPY . .
+# Copy Prisma schema first (for better caching)
+COPY prisma ./prisma
 
-# Install type definitions for react-responsive-masonry and node-fetch
-RUN npm install --save-dev @types/react-responsive-masonry @types/node-fetch
-
-# Generate Prisma client
+# Generate Prisma client (cached if schema unchanged)
 RUN npx prisma generate
 
+# Copy source code (this invalidates cache when code changes)
+COPY . .
+
 # Build the application
 ENV NEXT_TELEMETRY_DISABLED=1
 ENV NODE_ENV=production
 RUN npm run build
 
+# Verify standalone output was created and show structure for debugging
+RUN if [ ! -d .next/standalone ]; then \
+      echo "ERROR: .next/standalone directory not found!"; \
+      echo "Contents of .next directory:"; \
+      ls -la .next/ || true; \
+      echo "Checking if standalone exists in different location:"; \
+      find .next -name "standalone" -type d || true; \
+      exit 1; \
+    fi && \
+    echo "✅ Standalone output found" && \
+    ls -la .next/standalone/ && \
+    echo "Standalone structure:" && \
+    find .next/standalone -type f -name "server.js" || echo "server.js not found in standalone"
+
 # Production image, copy all the files and run next
 FROM base AS runner
 WORKDIR /app
@@ -42,6 +57,9 @@ WORKDIR /app
 ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED=1
 
+# Install curl for health checks
+RUN apt-get update && apt-get install -y --no-install-recommends curl && rm -rf /var/lib/apt/lists/*
+
 # Create a non-root user
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
@@ -55,7 +73,10 @@ RUN chown nextjs:nodejs .next
 
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone/app ./
+# Copy standalone output (contains server.js and all dependencies)
+# The standalone output structure is: .next/standalone/ (not .next/standalone/app/)
+# Next.js creates: .next/standalone/server.js, .next/standalone/.next/, .next/standalone/node_modules/
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 
 # Copy Prisma files

GITEA_VARIABLES_SETUP.md

@@ -0,0 +1,185 @@
+# 🔧 Gitea Variables & Secrets Setup Guide
+
+## Übersicht
+
+In Gitea kannst du **Variables** (öffentlich) und **Secrets** (verschlüsselt) für dein Repository setzen. Diese werden in den CI/CD Workflows verwendet.
+
+## 📍 Wo findest du die Einstellungen?
+
+1. Gehe zu deinem Repository auf Gitea
+2. Klicke auf **Settings** (Einstellungen)
+3. Klicke auf **Variables** oder **Secrets** im linken Menü
+
+## 🔑 Variablen für Production Branch
+
+Für den `production` Branch brauchst du:
+
+### Variables (öffentlich sichtbar):
+- `NEXT_PUBLIC_BASE_URL` = `https://dk0.dev`
+- `MY_EMAIL` = `contact@dk0.dev` (oder deine Email)
+- `MY_INFO_EMAIL` = `info@dk0.dev` (oder deine Info-Email)
+- `LOG_LEVEL` = `info`
+- `N8N_WEBHOOK_URL` = `https://n8n.dk0.dev` (optional)
+
+### Secrets (verschlüsselt):
+- `MY_PASSWORD` = Dein Email-Passwort
+- `MY_INFO_PASSWORD` = Dein Info-Email-Passwort
+- `ADMIN_BASIC_AUTH` = `admin:dein_sicheres_passwort`
+- `N8N_SECRET_TOKEN` = Dein n8n Secret Token (optional)
+
+## 🧪 Variablen für Dev Branch
+
+Für den `dev` Branch brauchst du die **gleichen** Variablen, aber mit anderen Werten:
+
+### Variables:
+- `NEXT_PUBLIC_BASE_URL` = `https://dev.dk0.dev` ⚠️ **WICHTIG: Andere URL!**
+- `MY_EMAIL` = `contact@dk0.dev` (kann gleich sein)
+- `MY_INFO_EMAIL` = `info@dk0.dev` (kann gleich sein)
+- `LOG_LEVEL` = `debug` (für Dev mehr Logging)
+- `N8N_WEBHOOK_URL` = `https://n8n.dk0.dev` (optional)
+
+### Secrets:
+- `MY_PASSWORD` = Dein Email-Passwort (kann gleich sein)
+- `MY_INFO_PASSWORD` = Dein Info-Email-Passwort (kann gleich sein)
+- `ADMIN_BASIC_AUTH` = `admin:staging_password` (kann anders sein)
+- `N8N_SECRET_TOKEN` = Dein n8n Secret Token (optional)
+
+## ✅ Lösung: Automatische Branch-Erkennung
+
+**Gitea unterstützt keine branch-spezifischen Variablen, aber die Workflows erkennen automatisch den Branch!**
+
+### Wie es funktioniert:
+
+Die Workflows triggern auf unterschiedlichen Branches und verwenden automatisch die richtigen Defaults:
+
+**Production Workflow** (`.gitea/workflows/production-deploy.yml`):
+- Triggert nur auf `production` Branch
+- Verwendet: `NEXT_PUBLIC_BASE_URL` (wenn gesetzt) oder Default: `https://dk0.dev`
+
+**Dev Workflow** (`.gitea/workflows/dev-deploy.yml`):
+- Triggert nur auf `dev` Branch  
+- Verwendet: `NEXT_PUBLIC_BASE_URL` (wenn gesetzt) oder Default: `https://dev.dk0.dev`
+
+**Das bedeutet:**
+- Du setzt **eine** Variable `NEXT_PUBLIC_BASE_URL` in Gitea
+- **Production Branch** → verwendet diese Variable (oder Default `https://dk0.dev`)
+- **Dev Branch** → verwendet diese Variable (oder Default `https://dev.dk0.dev`)
+
+### ⚠️ WICHTIG:
+
+Da beide Workflows die **gleiche Variable** verwenden, aber unterschiedliche Defaults haben:
+
+**Option 1: Variable NICHT setzen (Empfohlen)**
+- Production verwendet automatisch: `https://dk0.dev`
+- Dev verwendet automatisch: `https://dev.dk0.dev`
+- ✅ Funktioniert perfekt ohne Konfiguration!
+
+**Option 2: Variable setzen**
+- Wenn du `NEXT_PUBLIC_BASE_URL` = `https://dk0.dev` setzt
+- Dann verwendet **beide** Branches diese URL (nicht ideal für Dev)
+- ⚠️ Nicht empfohlen, da Dev dann die Production-URL verwendet
+
+## ✅ Empfohlene Konfiguration
+
+### ⭐ Einfachste Lösung: NICHTS setzen!
+
+Die Workflows haben bereits die richtigen Defaults:
+- **Production Branch** → automatisch `https://dk0.dev`
+- **Dev Branch** → automatisch `https://dev.dk0.dev`
+
+Du musst **NICHTS** in Gitea setzen, es funktioniert automatisch!
+
+### Wenn du Variablen setzen willst:
+
+**Nur diese Variablen setzen (für beide Branches):**
+- `MY_EMAIL` = `contact@dk0.dev`
+- `MY_INFO_EMAIL` = `info@dk0.dev`
+- `LOG_LEVEL` = `info` (wird für Production verwendet, Dev überschreibt mit `debug`)
+
+**Secrets (für beide Branches):**
+- `MY_PASSWORD` = Dein Email-Passwort
+- `MY_INFO_PASSWORD` = Dein Info-Email-Passwort
+- `ADMIN_BASIC_AUTH` = `admin:dein_passwort`
+- `N8N_SECRET_TOKEN` = Dein n8n Token (optional)
+
+**⚠️ NICHT setzen:**
+- `NEXT_PUBLIC_BASE_URL` - Lass diese Variable leer, damit jeder Branch seinen eigenen Default verwendet!
+
+## 📝 Schritt-für-Schritt Anleitung
+
+### 1. Gehe zu Repository Settings
+```
+https://git.dk0.dev/denshooter/portfolio/settings
+```
+
+### 2. Klicke auf "Variables" oder "Secrets"
+
+### 3. Für Variables (öffentlich):
+- Klicke auf **"New Variable"**
+- **Name:** `NEXT_PUBLIC_BASE_URL`
+- **Value:** `https://dk0.dev` (für Production)
+- **Protect:** ✅ (optional, schützt vor Änderungen)
+- Klicke **"Add Variable"**
+
+### 4. Für Secrets (verschlüsselt):
+- Klicke auf **"New Secret"**
+- **Name:** `MY_PASSWORD`
+- **Value:** Dein Passwort
+- Klicke **"Add Secret"**
+
+## 🔄 Aktuelle Workflow-Logik
+
+Die Workflows verwenden diese einfache Logik:
+
+```yaml
+# Production Workflow (triggert nur auf production branch)
+NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL || 'https://dk0.dev' }}
+
+# Dev Workflow (triggert nur auf dev branch)
+NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL || 'https://dev.dk0.dev' }}
+```
+
+**Das bedeutet:**
+- Jeder Workflow hat seinen **eigenen Default**
+- Wenn `NEXT_PUBLIC_BASE_URL` in Gitea gesetzt ist, wird diese verwendet
+- Wenn **nicht** gesetzt, verwendet jeder Branch seinen eigenen Default
+
+**⭐ Beste Lösung:**
+- **NICHT** `NEXT_PUBLIC_BASE_URL` in Gitea setzen
+- Dann verwendet Production automatisch `https://dk0.dev`
+- Und Dev verwendet automatisch `https://dev.dk0.dev`
+- ✅ Perfekt getrennt, ohne Konfiguration!
+
+## 🎯 Best Practice
+
+1. **Production:** Setze alle Variablen explizit in Gitea
+2. **Dev:** Nutze die Defaults im Workflow (oder setze separate Variablen)
+3. **Secrets:** Immer in Gitea Secrets setzen, nie in Code!
+
+## 🔍 Prüfen ob Variablen gesetzt sind
+
+In den Workflow-Logs siehst du:
+```
+📝 Using Gitea Variables and Secrets:
+  - NEXT_PUBLIC_BASE_URL: https://dk0.dev
+```
+
+Wenn eine Variable fehlt, wird der Default verwendet.
+
+## ⚙️ Alternative: Environment-spezifische Variablen
+
+Falls du separate Variablen für Dev und Production willst, können wir die Workflows anpassen:
+
+```yaml
+# Production
+NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL_PRODUCTION || 'https://dk0.dev' }}
+
+# Dev  
+NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL_DEV || 'https://dev.dk0.dev' }}
+```
+
+Dann könntest du setzen:
+- `NEXT_PUBLIC_BASE_URL_PRODUCTION` = `https://dk0.dev`
+- `NEXT_PUBLIC_BASE_URL_DEV` = `https://dev.dk0.dev`
+
+Soll ich die Workflows entsprechend anpassen?

NGINX_PROXY_MANAGER_SETUP.md

@@ -0,0 +1,198 @@
+# 🔧 Nginx Proxy Manager Setup Guide
+
+## Übersicht
+
+Dieses Projekt nutzt **Nginx Proxy Manager** als Reverse Proxy. Die Container sind im `proxy` Netzwerk, damit Nginx Proxy Manager auf sie zugreifen kann.
+
+## 🐳 Docker Netzwerk-Konfiguration
+
+Die Container sind bereits im `proxy` Netzwerk konfiguriert:
+
+**Production:**
+```yaml
+networks:
+  - portfolio_net
+  - proxy  # ✅ Bereits konfiguriert
+```
+
+**Staging:**
+```yaml
+networks:
+  - portfolio_staging_net
+  - proxy  # ✅ Bereits konfiguriert
+```
+
+## 📋 Nginx Proxy Manager Konfiguration
+
+### Production (dk0.dev)
+
+1. **Gehe zu Nginx Proxy Manager** → Hosts → Proxy Hosts → Add Proxy Host
+
+2. **Details Tab:**
+   - **Domain Names:** `dk0.dev`, `www.dk0.dev`
+   - **Scheme:** `http`
+   - **Forward Hostname/IP:** `portfolio-app` (Container-Name)
+   - **Forward Port:** `3000`
+   - **Cache Assets:** ✅ (optional)
+   - **Block Common Exploits:** ✅
+   - **Websockets Support:** ✅ (für Chat/Activity)
+
+3. **SSL Tab:**
+   - **SSL Certificate:** Request a new SSL Certificate
+   - **Force SSL:** ✅
+   - **HTTP/2 Support:** ✅
+   - **HSTS Enabled:** ✅
+
+4. **Advanced Tab:**
+   ```
+   # Custom Nginx Configuration
+   # Fix for 421 Misdirected Request
+   proxy_set_header Host $host;
+   proxy_set_header X-Real-IP $remote_addr;
+   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+   proxy_set_header X-Forwarded-Proto $scheme;
+   proxy_set_header X-Forwarded-Host $host;
+   proxy_set_header X-Forwarded-Port $server_port;
+   
+   # Fix HTTP/2 connection reuse issues
+   proxy_http_version 1.1;
+   proxy_set_header Connection "";
+   
+   # Timeouts
+   proxy_connect_timeout 60s;
+   proxy_send_timeout 60s;
+   proxy_read_timeout 60s;
+   ```
+
+### Staging (dev.dk0.dev)
+
+1. **Gehe zu Nginx Proxy Manager** → Hosts → Proxy Hosts → Add Proxy Host
+
+2. **Details Tab:**
+   - **Domain Names:** `dev.dk0.dev`
+   - **Scheme:** `http`
+   - **Forward Hostname/IP:** `portfolio-app-staging` (Container-Name)
+   - **Forward Port:** `3000` (interner Port im Container)
+   - **Cache Assets:** ❌ (für Dev besser deaktiviert)
+   - **Block Common Exploits:** ✅
+   - **Websockets Support:** ✅
+
+3. **SSL Tab:**
+   - **SSL Certificate:** Request a new SSL Certificate
+   - **Force SSL:** ✅
+   - **HTTP/2 Support:** ✅
+   - **HSTS Enabled:** ✅
+
+4. **Advanced Tab:**
+   ```
+   # Custom Nginx Configuration
+   # Fix for 421 Misdirected Request
+   proxy_set_header Host $host;
+   proxy_set_header X-Real-IP $remote_addr;
+   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+   proxy_set_header X-Forwarded-Proto $scheme;
+   proxy_set_header X-Forwarded-Host $host;
+   proxy_set_header X-Forwarded-Port $server_port;
+   
+   # Fix HTTP/2 connection reuse issues
+   proxy_http_version 1.1;
+   proxy_set_header Connection "";
+   
+   # Timeouts
+   proxy_connect_timeout 60s;
+   proxy_send_timeout 60s;
+   proxy_read_timeout 60s;
+   ```
+
+## 🔍 421 Misdirected Request - Lösung
+
+Der **421 Misdirected Request** Fehler tritt auf, wenn:
+
+1. **HTTP/2 Connection Reuse:** Nginx Proxy Manager versucht, eine HTTP/2-Verbindung wiederzuverwenden, aber der Host-Header stimmt nicht überein
+2. **Host-Header nicht richtig weitergegeben:** Der Container erhält den falschen Host-Header
+
+### Lösung 1: Advanced Tab Konfiguration (Wichtig!)
+
+Füge diese Zeilen im **Advanced Tab** von Nginx Proxy Manager hinzu:
+
+```nginx
+proxy_http_version 1.1;
+proxy_set_header Connection "";
+proxy_set_header Host $host;
+proxy_set_header X-Forwarded-Host $host;
+```
+
+### Lösung 2: Container-Namen verwenden
+
+Stelle sicher, dass du den **Container-Namen** (nicht IP) verwendest:
+- Production: `portfolio-app`
+- Staging: `portfolio-app-staging`
+
+### Lösung 3: Netzwerk prüfen
+
+Stelle sicher, dass beide Container im `proxy` Netzwerk sind:
+
+```bash
+# Prüfen
+docker network inspect proxy
+
+# Sollte enthalten:
+# - portfolio-app
+# - portfolio-app-staging
+```
+
+## ✅ Checkliste
+
+- [ ] Container sind im `proxy` Netzwerk
+- [ ] Nginx Proxy Manager nutzt Container-Namen (nicht IP)
+- [ ] Advanced Tab Konfiguration ist gesetzt
+- [ ] `proxy_http_version 1.1` ist gesetzt
+- [ ] `proxy_set_header Host $host` ist gesetzt
+- [ ] SSL-Zertifikat ist konfiguriert
+- [ ] Websockets Support ist aktiviert
+
+## 🐛 Troubleshooting
+
+### 421 Fehler weiterhin vorhanden?
+
+1. **Prüfe Container-Namen:**
+   ```bash
+   docker ps --format "table {{.Names}}\t{{.Status}}"
+   ```
+
+2. **Prüfe Netzwerk:**
+   ```bash
+   docker network inspect proxy | grep -A 5 portfolio
+   ```
+
+3. **Prüfe Nginx Proxy Manager Logs:**
+   - Gehe zu Nginx Proxy Manager → System Logs
+   - Suche nach "421" oder "misdirected"
+
+4. **Teste direkt:**
+   ```bash
+   # Vom Host aus
+   curl -H "Host: dk0.dev" http://portfolio-app:3000
+   
+   # Sollte funktionieren
+   ```
+
+5. **Deaktiviere HTTP/2 temporär:**
+   - In Nginx Proxy Manager → SSL Tab
+   - **HTTP/2 Support:** ❌
+   - Teste ob es funktioniert
+
+## 📝 Wichtige Hinweise
+
+- **Container-Namen sind wichtig:** Nutze `portfolio-app` nicht `localhost` oder IP
+- **Port:** Immer Port `3000` (interner Container-Port), nicht `3000:3000`
+- **Netzwerk:** Beide Container müssen im `proxy` Netzwerk sein
+- **HTTP/2:** Kann Probleme verursachen, wenn Advanced Config fehlt
+
+## 🔄 Nach Deployment
+
+Nach jedem Deployment:
+1. Prüfe ob Container läuft: `docker ps | grep portfolio`
+2. Prüfe ob Container im proxy-Netzwerk ist
+3. Teste die URL im Browser
+4. Prüfe Nginx Proxy Manager Logs bei Problemen

PRE_PUSH_CHECKLIST.md

@@ -1,176 +0,0 @@
-# Pre-Push Checklist - Dev Branch
-
-Before pushing to the dev branch, verify all items below are complete.
-
-## ✅ Required Checks
-
-### 1. Code Quality
-- [ ] No TypeScript errors: `npm run build`
-- [ ] No ESLint errors: `npm run lint`
-- [ ] All diagnostics resolved (only warnings allowed)
-- [ ] Code formatted: `npx prettier --write .` (if using Prettier)
-
-### 2. Database
-- [ ] Prisma schema is valid: `npx prisma format`
-- [ ] Migration script exists: `prisma/migrations/create_activity_status.sql`
-- [ ] Migration tested locally: `./prisma/migrations/quick-fix.sh`
-- [ ] Database changes documented in CHANGELOG_DEV.md
-
-### 3. Functionality Tests
-- [ ] Dev server starts without errors: `npm run dev`
-- [ ] Home page loads: http://localhost:3000
-- [ ] Admin page accessible: http://localhost:3000/manage
-- [ ] No hydration errors in console
-- [ ] No "duplicate key" warnings in console
-- [ ] Activity Feed loads without database errors
-- [ ] API endpoints respond correctly:
-  ```bash
-  curl http://localhost:3000/api/n8n/status
-  curl http://localhost:3000/api/health
-  ```
-
-### 4. Visual Checks
-- [ ] Navbar doesn't overlap hero section
-- [ ] All sections render correctly
-- [ ] Project cards display properly
-- [ ] About section tech stacks show correct colors
-- [ ] Mobile responsive (test in DevTools)
-
-### 5. Security
-- [ ] No sensitive data in code (passwords, tokens, API keys)
-- [ ] `.env.local` not committed (check `.gitignore`)
-- [ ] Auth endpoints protected
-- [ ] Rate limiting in place
-- [ ] CSRF tokens implemented
-
-### 6. Documentation
-- [ ] CHANGELOG_DEV.md updated with all changes
-- [ ] New features documented
-- [ ] Breaking changes noted (if any)
-- [ ] Migration guide included
-- [ ] README files created for new features
-
-### 7. Git Hygiene
-- [ ] Commit messages are descriptive
-- [ ] No merge conflicts
-- [ ] Large files not committed (check git status)
-- [ ] Build artifacts excluded (.next, node_modules)
-- [ ] Commit history is clean (consider squashing if needed)
-
-## 🧪 Testing Commands
-
-Run these before pushing:
-
-```bash
-# 1. Build check
-npm run build
-
-# 2. Lint check
-npm run lint
-
-# 3. Type check
-npx tsc --noEmit
-
-# 4. Format check
-npx prisma format
-
-# 5. Start dev server
-npm run dev
-
-# 6. Test API endpoints
-curl http://localhost:3000/api/n8n/status
-curl http://localhost:3000/api/health
-curl -I http://localhost:3000/manage
-
-# 7. Check for hydration errors
-# Open browser console and look for:
-# - "Hydration failed" (should be NONE)
-# - "two children with the same key" (should be NONE)
-```
-
-## 📋 Files Changed Review
-
-### Modified Files
-- [ ] `app/page.tsx` - Spacer added for navbar
-- [ ] `app/components/About.tsx` - Fixed duplicate keys
-- [ ] `app/components/Projects.tsx` - Fixed duplicate keys
-- [ ] `app/components/ActivityFeed.tsx` - Fixed hydration errors
-- [ ] `app/api/n8n/status/route.ts` - Fixed TypeScript errors
-- [ ] `middleware.ts` - Removed auth redirect
-- [ ] `prisma/schema.prisma` - Added ActivityStatus model
-
-### New Files
-- [ ] `app/api/n8n/generate-image/route.ts`
-- [ ] `app/components/admin/AIImageGenerator.tsx`
-- [ ] `docs/ai-image-generation/` (all files)
-- [ ] `prisma/migrations/` (all files)
-- [ ] `CHANGELOG_DEV.md`
-- [ ] `PRE_PUSH_CHECKLIST.md` (this file)
-
-## 🚨 Critical Checks
-
-### Must Have ZERO of These:
-- [ ] No `console.error()` output when loading pages
-- [ ] No React hydration errors
-- [ ] No "duplicate key" warnings
-- [ ] No database connection errors (after migration)
-- [ ] No TypeScript compilation errors
-- [ ] No ESLint errors (warnings are OK)
-
-### Environment Variables
-Ensure these are documented but NOT committed:
-```bash
-# Required
-DATABASE_URL=postgresql://...
-
-# Optional (for new features)
-N8N_WEBHOOK_URL=http://localhost:5678/webhook
-N8N_SECRET_TOKEN=your-token
-SD_API_URL=http://localhost:7860
-AUTO_GENERATE_IMAGES=false
-GENERATED_IMAGES_DIR=/path/to/public/generated-images
-```
-
-## 📝 Final Verification
-
-Run this complete check:
-
-```bash
-# Clean build
-rm -rf .next
-npm run build
-
-# Should complete without errors
-# Then test the build
-npm start
-
-# Visit in browser
-# - http://localhost:3000
-# - http://localhost:3000/manage
-# - http://localhost:3000/projects
-```
-
-## 🎯 Ready to Push?
-
-If all items above are checked, run:
-
-```bash
-git status
-git add .
-git commit -m "feat: Fixed hydration errors, navbar overlap, and added AI image generation system"
-git push origin dev
-```
-
-## 📞 Need Help?
-
-If any checks fail:
-1. Check CHANGELOG_DEV.md for troubleshooting
-2. Review docs/ai-image-generation/SETUP.md
-3. Check prisma/migrations/README.md for database issues
-4. Review error messages carefully
-
----
-
-**Last Updated**: 2024-01-15  
-**Branch**: dev  
-**Status**: Pre-merge checklist

PRODUCTION-DEPLOYMENT.md

@@ -1,279 +0,0 @@
-# Production Deployment Guide for dk0.dev
-
-This guide will help you deploy the portfolio application to production on dk0.dev.
-
-## Prerequisites
-
-1. **Server Requirements:**
-   - Ubuntu 20.04+ or similar Linux distribution
-   - Docker and Docker Compose installed
-   - Nginx or Traefik for reverse proxy
-   - SSL certificates (Let's Encrypt recommended)
-   - Domain `dk0.dev` pointing to your server
-
-2. **Required Environment Variables:**
-   - `MY_EMAIL`: Your contact email
-   - `MY_INFO_EMAIL`: Your info email
-   - `MY_PASSWORD`: Email password
-   - `MY_INFO_PASSWORD`: Info email password
-   - `ADMIN_BASIC_AUTH`: Admin credentials (format: `username:password`)
-
-## Quick Deployment
-
-### 1. Clone and Setup
-
-```bash
-# Clone the repository
-git clone <your-repo-url>
-cd portfolio
-
-# Make deployment script executable
-chmod +x scripts/production-deploy.sh
-```
-
-### 2. Configure Environment
-
-Create a `.env` file with your production settings:
-
-```bash
-# Copy the example
-cp env.example .env
-
-# Edit with your values
-nano .env
-```
-
-Required values:
-```env
-NODE_ENV=production
-NEXT_PUBLIC_BASE_URL=https://dk0.dev
-MY_EMAIL=contact@dk0.dev
-MY_INFO_EMAIL=info@dk0.dev
-MY_PASSWORD=your-actual-email-password
-MY_INFO_PASSWORD=your-actual-info-password
-ADMIN_BASIC_AUTH=admin:your-secure-password
-```
-
-### 3. Deploy
-
-```bash
-# Run the production deployment script
-./scripts/production-deploy.sh
-```
-
-### 4. Setup Reverse Proxy
-
-#### Option A: Nginx (Recommended)
-
-1. Install Nginx:
-```bash
-sudo apt update
-sudo apt install nginx
-```
-
-2. Copy the production nginx config:
-```bash
-sudo cp nginx.production.conf /etc/nginx/nginx.conf
-```
-
-3. Setup SSL certificates:
-```bash
-# Install Certbot
-sudo apt install certbot python3-certbot-nginx
-
-# Get SSL certificate
-sudo certbot --nginx -d dk0.dev -d www.dk0.dev
-```
-
-4. Restart Nginx:
-```bash
-sudo systemctl restart nginx
-sudo systemctl enable nginx
-```
-
-#### Option B: Traefik
-
-If using Traefik, ensure your Docker Compose file includes Traefik labels:
-
-```yaml
-labels:
-  - "traefik.enable=true"
-  - "traefik.http.routers.portfolio.rule=Host(`dk0.dev`)"
-  - "traefik.http.routers.portfolio.tls=true"
-  - "traefik.http.routers.portfolio.tls.certresolver=letsencrypt"
-```
-
-## Manual Deployment Steps
-
-If you prefer manual deployment:
-
-### 1. Create Proxy Network
-
-```bash
-docker network create proxy
-```
-
-### 2. Build and Start Services
-
-```bash
-# Build the application
-docker build -t portfolio-app:latest .
-
-# Start services
-docker-compose -f docker-compose.production.yml up -d
-```
-
-### 3. Run Database Migrations
-
-```bash
-# Wait for services to be healthy
-sleep 30
-
-# Run migrations
-docker exec portfolio-app npx prisma db push
-```
-
-### 4. Verify Deployment
-
-```bash
-# Check health
-curl http://localhost:3000/api/health
-
-# Check admin panel
-curl http://localhost:3000/manage
-```
-
-## Security Considerations
-
-### 1. Update Default Passwords
-
-**CRITICAL:** Change these default values:
-
-```env
-# Change the admin password
-ADMIN_BASIC_AUTH=admin:your-very-secure-password-here
-
-# Use strong email passwords
-MY_PASSWORD=your-strong-email-password
-MY_INFO_PASSWORD=your-strong-info-password
-```
-
-### 2. Firewall Configuration
-
-```bash
-# Allow only necessary ports
-sudo ufw allow 22    # SSH
-sudo ufw allow 80    # HTTP
-sudo ufw allow 443   # HTTPS
-sudo ufw enable
-```
-
-### 3. SSL/TLS Configuration
-
-Ensure you have valid SSL certificates. The nginx configuration expects:
-- `/etc/nginx/ssl/cert.pem` (SSL certificate)
-- `/etc/nginx/ssl/key.pem` (SSL private key)
-
-## Monitoring and Maintenance
-
-### 1. Health Checks
-
-```bash
-# Check application health
-curl https://dk0.dev/api/health
-
-# Check container status
-docker-compose ps
-
-# View logs
-docker-compose logs -f
-```
-
-### 2. Backup Database
-
-```bash
-# Create backup
-docker exec portfolio-postgres pg_dump -U portfolio_user portfolio_db > backup.sql
-
-# Restore backup
-docker exec -i portfolio-postgres psql -U portfolio_user portfolio_db < backup.sql
-```
-
-### 3. Update Application
-
-```bash
-# Pull latest changes
-git pull origin main
-
-# Rebuild and restart
-docker-compose down
-docker build -t portfolio-app:latest .
-docker-compose up -d
-```
-
-## Troubleshooting
-
-### Common Issues
-
-1. **Port 3000 not accessible:**
-   - Check if the container is running: `docker ps`
-   - Check logs: `docker-compose logs portfolio`
-
-2. **Database connection issues:**
-   - Ensure PostgreSQL is healthy: `docker-compose ps`
-   - Check database logs: `docker-compose logs postgres`
-
-3. **SSL certificate issues:**
-   - Verify certificate files exist and are readable
-   - Check nginx configuration: `nginx -t`
-
-4. **Rate limiting issues:**
-   - Check nginx rate limiting configuration
-   - Adjust limits in `nginx.production.conf`
-
-### Logs and Debugging
-
-```bash
-# Application logs
-docker-compose logs -f portfolio
-
-# Database logs
-docker-compose logs -f postgres
-
-# Nginx logs
-sudo tail -f /var/log/nginx/access.log
-sudo tail -f /var/log/nginx/error.log
-```
-
-## Performance Optimization
-
-### 1. Resource Limits
-
-The production Docker Compose file includes resource limits:
-- Portfolio app: 1GB RAM, 1 CPU
-- PostgreSQL: 512MB RAM, 0.5 CPU
-- Redis: 256MB RAM, 0.25 CPU
-
-### 2. Caching
-
-- Static assets are cached for 1 year
-- API responses are cached for 10 minutes
-- Admin routes are not cached for security
-
-### 3. Rate Limiting
-
-- API routes: 20 requests/second
-- Login routes: 10 requests/minute
-- Admin routes: 5 requests/minute
-
-## Support
-
-If you encounter issues:
-
-1. Check the logs first
-2. Verify all environment variables are set
-3. Ensure all services are healthy
-4. Check network connectivity
-5. Verify SSL certificates are valid
-
-For additional help, check the application logs and ensure all prerequisites are met.

PUSH_READY.md

@@ -1,244 +0,0 @@
-# ✅ READY TO PUSH - Dev Branch
-
-**Status**: All fixes complete and tested  
-**Date**: 2024-01-15  
-**Branch**: dev  
-**Build**: ✅ Successful  
-**Lint**: ✅ Passed (0 errors, 8 warnings)  
-
----
-
-## 🎯 Summary
-
-This branch fixes critical hydration errors, navbar overlap issues, and adds a complete AI image generation system. All changes are production-ready and backward compatible.
-
-## ✅ Pre-Push Checklist - COMPLETE
-
-### Build & Quality
-- [x] ✅ Build successful: `npm run build`
-- [x] ✅ Lint passed: `npm run lint` (0 errors, 8 warnings - OK)
-- [x] ✅ TypeScript compilation clean
-- [x] ✅ Prisma schema formatted and valid
-- [x] ✅ No console errors during runtime
-
-### Functionality
-- [x] ✅ Dev server starts without errors
-- [x] ✅ Home page loads correctly
-- [x] ✅ Admin page (`/manage`) shows login form (no redirect loop)
-- [x] ✅ No hydration errors in console
-- [x] ✅ No duplicate React key warnings
-- [x] ✅ API endpoints respond correctly
-- [x] ✅ Navbar no longer overlaps content
-
-### Security
-- [x] ✅ No sensitive data in commits
-- [x] ✅ `.env.local` excluded via `.gitignore`
-- [x] ✅ Auth endpoints protected
-- [x] ✅ Middleware security headers active
-
-### Documentation
-- [x] ✅ `CHANGELOG_DEV.md` - Complete changelog
-- [x] ✅ `PRE_PUSH_CHECKLIST.md` - Verification checklist
-- [x] ✅ `AFTER_PUSH_SETUP.md` - Setup guide for other devs
-- [x] ✅ `COMMIT_MESSAGE.txt` - Detailed commit message
-- [x] ✅ AI Image Generation docs (6 files)
-- [x] ✅ Database migration docs
-
----
-
-## 📦 Changes Summary
-
-### Modified Files (5)
-- `app/api/n8n/status/route.ts` - Added TypeScript interfaces, fixed any types
-- `app/components/Hero.tsx` - Fixed duplicate transition prop
-- `app/components/admin/AIImageGenerator.tsx` - Fixed imports, replaced img with Image
-- `middleware.ts` - Removed unused import
-- `prisma/schema.prisma` - Formatted (no logical changes)
-
-### Already Committed in Previous Commit (7)
-- `app/page.tsx` - Added navbar spacer
-- `app/components/About.tsx` - Fixed duplicate keys
-- `app/components/Projects.tsx` - Fixed duplicate keys
-- `app/components/ActivityFeed.tsx` - Fixed hydration errors
-- `app/api/n8n/generate-image/route.ts` - New AI generation API
-- Full AI image generation documentation
-
-### New Documentation (5)
-- `CHANGELOG_DEV.md` - Complete changelog
-- `PRE_PUSH_CHECKLIST.md` - Pre-push verification
-- `AFTER_PUSH_SETUP.md` - Setup guide
-- `COMMIT_MESSAGE.txt` - Commit message template
-- `PUSH_READY.md` - This file
-
----
-
-## 🚀 How to Push
-
-```bash
-# 1. Review changes one last time
-git status
-git diff
-
-# 2. Stage all changes
-git add .
-
-# 3. Commit with descriptive message
-git commit -F COMMIT_MESSAGE.txt
-
-# 4. Push to dev branch
-git push origin dev
-
-# 5. Verify on remote
-git log --oneline -3
-```
-
----
-
-## 🧪 Testing Results
-
-### Build Test
-```
-✅ npm run build - SUCCESS
-   - Next.js compiled successfully
-   - No errors, no warnings
-   - All routes generated
-   - Middleware compiled (34 kB)
-```
-
-### Lint Test
-```
-✅ npm run lint - PASSED
-   - 0 errors
-   - 8 warnings (all harmless unused vars)
-   - No critical issues
-```
-
-### Runtime Tests
-```
-✅ Home page (localhost:3000)
-   - Loads without errors
-   - No hydration errors
-   - No duplicate key warnings
-   - Navbar properly spaced
-
-✅ Admin page (localhost:3000/manage)
-   - Shows login form correctly
-   - No redirect loop
-   - Auth system works
-
-✅ API Endpoints
-   - /api/n8n/status → {"activity":null,...}
-   - /api/health → OK
-   - /api/projects → Works
-```
-
----
-
-## 🎯 What This Branch Delivers
-
-### Bug Fixes
-1. ✅ Fixed React hydration errors in ActivityFeed
-2. ✅ Fixed duplicate React keys in About and Projects
-3. ✅ Fixed navbar overlapping hero section
-4. ✅ Fixed /manage redirect loop
-5. ✅ Fixed "activity_status table not found" errors
-6. ✅ Fixed TypeScript ESLint warnings
-
-### New Features
-1. ✅ Complete AI Image Generation System
-   - Automatic project cover images
-   - Local Stable Diffusion integration
-   - n8n workflow automation
-   - Admin UI component
-   - 6 comprehensive documentation files
-   - Category-specific prompt templates (10+ categories)
-
-2. ✅ ActivityStatus Database Model
-   - Real-time activity tracking
-   - Music, gaming, coding status
-   - Migration scripts included
-
-3. ✅ Enhanced APIs
-   - AI image generation endpoint
-   - Improved status endpoint with proper types
-
----
-
-## 📚 Documentation Included
-
-### User Guides
-- `CHANGELOG_DEV.md` - What changed and why
-- `AFTER_PUSH_SETUP.md` - Setup guide for team members
-- `PRE_PUSH_CHECKLIST.md` - Quality assurance checklist
-
-### AI Image Generation
-- `docs/ai-image-generation/README.md` - Overview (423 lines)
-- `docs/ai-image-generation/SETUP.md` - Installation guide (486 lines)
-- `docs/ai-image-generation/QUICKSTART.md` - 15-min setup (366 lines)
-- `docs/ai-image-generation/PROMPT_TEMPLATES.md` - Templates (612 lines)
-- `docs/ai-image-generation/ENVIRONMENT.md` - Env vars (311 lines)
-- `docs/ai-image-generation/n8n-workflow-ai-image-generator.json` - Workflow
-
-### Database
-- `prisma/migrations/README.md` - Migration guide
-- `prisma/migrations/create_activity_status.sql` - SQL script
-- `prisma/migrations/quick-fix.sh` - Auto-setup script
-
----
-
-## ⚠️ Important Notes
-
-### Migration Required
-After pulling this branch, team members MUST run:
-```bash
-./prisma/migrations/quick-fix.sh
-```
-This creates the `activity_status` table. Without it, the site will log errors (but still work).
-
-### Environment Variables (Optional)
-For AI image generation features:
-```bash
-N8N_WEBHOOK_URL=http://localhost:5678/webhook
-N8N_SECRET_TOKEN=your-token
-SD_API_URL=http://localhost:7860
-AUTO_GENERATE_IMAGES=false
-```
-
-### Breaking Changes
-**NONE** - All changes are backward compatible.
-
----
-
-## 🎉 Ready to Push!
-
-All checks passed. This branch is:
-- ✅ Tested and working
-- ✅ Documented thoroughly
-- ✅ Backward compatible
-- ✅ Production-ready
-- ✅ No breaking changes
-- ✅ Migration scripts included
-
-**Recommendation**: Push to dev, test in staging, then merge to main.
-
----
-
-## 📞 After Push
-
-### For Team Members
-1. Pull latest dev branch
-2. Read `AFTER_PUSH_SETUP.md`
-3. Run database migration
-4. Test locally
-
-### For Deployment
-1. Run database migration on server
-2. Restart application
-3. Verify no errors in logs
-4. Test critical paths
-
----
-
-**Last Verified**: 2024-01-15  
-**Verified By**: AI Assistant (Claude Sonnet 4.5)  
-**Status**: ✅ READY TO PUSH

SAFE_PUSH_TO_MAIN.md

@@ -0,0 +1,324 @@
+# 🚀 Safe Push to Main Branch Guide
+
+**IMPORTANT**: This guide ensures you don't break production when merging to main.
+
+## ⚠️ Pre-Flight Checklist
+
+Before even thinking about pushing to main, verify ALL of these:
+
+### 1. Code Quality ✅
+```bash
+# Run all checks
+npm run build          # Must pass with 0 errors
+npm run lint           # Must pass with 0 errors
+npx tsc --noEmit       # TypeScript must be clean
+npx prisma format      # Database schema must be valid
+```
+
+### 1b. Automated Testing ✅
+```bash
+# Run comprehensive test suite (RECOMMENDED)
+npm run test:all       # Runs all tests including E2E
+
+# Or run individually:
+npm run test           # Unit tests
+npm run test:critical  # Critical path E2E tests
+npm run test:hydration # Hydration tests
+npm run test:email     # Email API tests
+```
+
+### 2. Testing ✅
+```bash
+# Automated testing (RECOMMENDED)
+npm run test:all       # Runs all automated tests
+
+# Manual testing (if needed)
+npm run dev
+# Test these critical paths:
+# - Home page loads
+# - Projects page works
+# - Admin dashboard accessible
+# - API endpoints respond
+# - No console errors
+# - No hydration errors
+```
+
+### 3. Database Changes ✅
+```bash
+# If you changed the database schema:
+# 1. Create migration
+npx prisma migrate dev --name your_migration_name
+
+# 2. Test migration on a copy of production data
+# 3. Document migration steps
+# 4. Create rollback plan
+```
+
+### 4. Environment Variables ✅
+- [ ] All new env vars documented in `env.example`
+- [ ] No secrets committed to git
+- [ ] Production env vars are set on server
+- [ ] Optional features have fallbacks
+
+### 5. Breaking Changes ✅
+- [ ] Documented in CHANGELOG
+- [ ] Backward compatible OR migration plan exists
+- [ ] Team notified of changes
+
+---
+
+## 📋 Step-by-Step Push Process
+
+### Step 1: Ensure You're on Dev Branch
+```bash
+git checkout dev
+git pull origin dev  # Get latest changes
+```
+
+### Step 2: Final Verification
+```bash
+# Clean build
+rm -rf .next node_modules/.cache
+npm install
+npm run build
+
+# Should complete without errors
+```
+
+### Step 3: Review Your Changes
+```bash
+# See what you're about to push
+git log origin/main..dev --oneline
+git diff origin/main..dev
+
+# Review carefully:
+# - No accidental secrets
+# - No debug code
+# - No temporary files
+# - All changes are intentional
+```
+
+### Step 4: Create a Backup Branch (Safety Net)
+```bash
+# Create backup before merging
+git checkout -b backup-before-main-merge-$(date +%Y%m%d)
+git push origin backup-before-main-merge-$(date +%Y%m%d)
+git checkout dev
+```
+
+### Step 5: Merge Dev into Main (Local)
+```bash
+# Switch to main
+git checkout main
+git pull origin main  # Get latest main
+
+# Merge dev into main
+git merge dev --no-ff -m "Merge dev into main: [describe changes]"
+
+# If conflicts occur:
+# 1. Resolve conflicts carefully
+# 2. Test after resolving
+# 3. Don't force push if unsure
+```
+
+### Step 6: Test the Merged Code
+```bash
+# Build and test the merged code
+npm run build
+npm run dev
+
+# Test critical paths again
+# - Home page
+# - Projects
+# - Admin
+# - APIs
+```
+
+### Step 7: Push to Main (If Everything Looks Good)
+```bash
+# Push to remote main
+git push origin main
+
+# If you need to force push (DANGEROUS - only if necessary):
+# git push origin main --force-with-lease
+```
+
+### Step 8: Monitor Deployment
+```bash
+# Watch your deployment logs
+# Check for errors
+# Verify health endpoints
+# Test production site
+```
+
+---
+
+## 🛡️ Safety Strategies
+
+### Strategy 1: Feature Flags
+If you're adding new features, use feature flags:
+```typescript
+// In your code
+if (process.env.ENABLE_NEW_FEATURE === 'true') {
+  // New feature code
+}
+```
+
+### Strategy 2: Gradual Rollout
+- Deploy to staging first
+- Test thoroughly
+- Then deploy to production
+- Monitor closely
+
+### Strategy 3: Database Migrations
+```bash
+# Always test migrations first
+# 1. Backup production database
+# 2. Test migration on copy
+# 3. Create rollback script
+# 4. Run migration during low-traffic period
+```
+
+### Strategy 4: Rollback Plan
+Always have a rollback plan:
+```bash
+# If something breaks:
+git revert HEAD
+git push origin main
+
+# Or rollback to previous commit:
+git reset --hard <previous-commit-hash>
+git push origin main --force-with-lease
+```
+
+---
+
+## 🚨 Red Flags - DON'T PUSH IF:
+
+- ❌ Build fails
+- ❌ Tests fail
+- ❌ Linter errors
+- ❌ TypeScript errors
+- ❌ Database migration not tested
+- ❌ Breaking changes not documented
+- ❌ Secrets in code
+- ❌ Debug code left in
+- ❌ Console.logs everywhere
+- ❌ Untested features
+- ❌ No rollback plan
+
+---
+
+## ✅ Green Lights - SAFE TO PUSH IF:
+
+- ✅ All checks pass
+- ✅ Tested locally
+- ✅ Database migrations tested
+- ✅ No breaking changes (or documented)
+- ✅ Documentation updated
+- ✅ Team notified
+- ✅ Rollback plan exists
+- ✅ Feature flags for new features
+- ✅ Environment variables documented
+
+---
+
+## 📝 Pre-Push Checklist Template
+
+Copy this and check each item:
+
+```
+[ ] npm run build passes
+[ ] npm run lint passes
+[ ] npx tsc --noEmit passes
+[ ] npx prisma format passes
+[ ] npm run test:all passes (automated tests)
+[ ] OR manual testing:
+  [ ] Dev server starts without errors
+  [ ] Home page loads correctly
+  [ ] Projects page works
+  [ ] Admin dashboard accessible
+  [ ] API endpoints respond
+  [ ] No console errors
+  [ ] No hydration errors
+[ ] Database migrations tested (if any)
+[ ] Environment variables documented
+[ ] No secrets in code
+[ ] Breaking changes documented
+[ ] CHANGELOG updated
+[ ] Team notified (if needed)
+[ ] Rollback plan exists
+[ ] Backup branch created
+[ ] Changes reviewed
+```
+
+---
+
+## 🔄 Alternative: Pull Request Workflow
+
+If you want extra safety, use PR workflow:
+
+```bash
+# 1. Push dev branch
+git push origin dev
+
+# 2. Create Pull Request on Git platform
+# - Review changes
+# - Get approval
+# - Run CI/CD checks
+
+# 3. Merge PR to main (platform handles it)
+```
+
+---
+
+## 🆘 Emergency Rollback
+
+If production breaks after push:
+
+### Quick Rollback
+```bash
+# 1. Revert the merge commit
+git revert -m 1 <merge-commit-hash>
+git push origin main
+
+# 2. Or reset to previous state
+git reset --hard <previous-commit>
+git push origin main --force-with-lease
+```
+
+### Database Rollback
+```bash
+# If you ran migrations, roll them back:
+npx prisma migrate resolve --rolled-back <migration-name>
+
+# Or restore from backup
+```
+
+---
+
+## 📞 Need Help?
+
+If unsure:
+1. **Don't push** - better safe than sorry
+2. Test more thoroughly
+3. Ask for code review
+4. Use staging environment first
+5. Create a PR for review
+
+---
+
+## 🎯 Best Practices
+
+1. **Always test locally first**
+2. **Use feature flags for new features**
+3. **Test database migrations on copies**
+4. **Document everything**
+5. **Have a rollback plan**
+6. **Monitor after deployment**
+7. **Deploy during low-traffic periods**
+8. **Keep main branch stable**
+
+---
+
+**Remember**: It's better to delay a push than to break production! 🛡️

SECURITY-CHECKLIST.md

@@ -1,128 +0,0 @@
-# Security Checklist für dk0.dev
-
-Diese Checkliste stellt sicher, dass die Website sicher und produktionsbereit ist.
-
-## ✅ Implementierte Sicherheitsmaßnahmen
-
-### 1. HTTP Security Headers
-- ✅ `Strict-Transport-Security` (HSTS) - Erzwingt HTTPS
-- ✅ `X-Frame-Options: DENY` - Verhindert Clickjacking
-- ✅ `X-Content-Type-Options: nosniff` - Verhindert MIME-Sniffing
-- ✅ `X-XSS-Protection` - XSS-Schutz
-- ✅ `Referrer-Policy` - Kontrolliert Referrer-Informationen
-- ✅ `Permissions-Policy` - Beschränkt Browser-Features
-- ✅ `Content-Security-Policy` - Verhindert XSS und Injection-Angriffe
-
-### 2. Deployment-Sicherheit
-- ✅ Zero-Downtime-Deployments mit Rollback-Funktion
-- ✅ Health Checks vor und nach Deployment
-- ✅ Automatische Rollbacks bei Fehlern
-- ✅ Image-Backups vor Updates
-- ✅ Pre-Deployment-Checks (Docker, Disk Space, .env)
-
-### 3. Server-Konfiguration
-- ✅ Non-root User im Docker-Container
-- ✅ Resource Limits für Container
-- ✅ Health Checks für alle Services
-- ✅ Proper Error Handling
-- ✅ Logging und Monitoring
-
-### 4. Datenbank-Sicherheit
-- ✅ Prisma ORM (verhindert SQL-Injection)
-- ✅ Environment Variables für Credentials
-- ✅ Keine Credentials im Code
-- ✅ Database Migrations mit Validierung
-
-### 5. API-Sicherheit
-- ✅ Authentication für Admin-Routes
-- ✅ Rate Limiting Headers
-- ✅ Input Validation im Contact Form
-- ✅ CSRF Protection (Next.js built-in)
-
-### 6. Code-Sicherheit
-- ✅ TypeScript für Type Safety
-- ✅ ESLint für Code Quality
-- ✅ Keine `console.log` in Production
-- ✅ Environment Variables Validation
-
-## 🔒 Wichtige Sicherheitshinweise
-
-### Environment Variables
-Stelle sicher, dass folgende Variablen gesetzt sind:
-- `DATABASE_URL` - PostgreSQL Connection String
-- `REDIS_URL` - Redis Connection String
-- `MY_EMAIL` - Email für Kontaktformular
-- `MY_PASSWORD` - Email-Passwort
-- `ADMIN_BASIC_AUTH` - Admin-Credentials (Format: `username:password`)
-
-### Deployment-Prozess
-1. **Vor jedem Deployment:**
-   ```bash
-   # Pre-Deployment Checks
-   ./scripts/safe-deploy.sh
-   ```
-
-2. **Bei Problemen:**
-   - Automatisches Rollback wird ausgeführt
-   - Alte Images werden als Backup behalten
-   - Health Checks stellen sicher, dass alles funktioniert
-
-3. **Nach dem Deployment:**
-   - Health Check Endpoint prüfen: `https://dk0.dev/api/health`
-   - Hauptseite testen: `https://dk0.dev`
-   - Admin-Panel testen: `https://dk0.dev/manage`
-
-### SSL/TLS
-- ✅ SSL-Zertifikate müssen gültig sein
-- ✅ TLS 1.2+ wird erzwungen
-- ✅ HSTS ist aktiviert
-- ✅ Perfect Forward Secrecy (PFS) aktiviert
-
-### Monitoring
-- ✅ Health Check Endpoint: `/api/health`
-- ✅ Container Health Checks
-- ✅ Application Logs
-- ✅ Error Tracking
-
-## 🚨 Bekannte Einschränkungen
-
-1. **CSP `unsafe-inline` und `unsafe-eval`:**
-   - Erforderlich für Next.js und Analytics
-   - Wird durch andere Sicherheitsmaßnahmen kompensiert
-
-2. **Email-Konfiguration:**
-   - Stelle sicher, dass Email-Credentials sicher gespeichert sind
-   - Verwende App-Passwords statt Hauptpasswörtern
-
-## 📋 Regelmäßige Sicherheitsprüfungen
-
-- [ ] Monatliche Dependency-Updates (`npm audit`)
-- [ ] Quartalsweise Security Headers Review
-- [ ] Halbjährliche Penetration Tests
-- [ ] Jährliche SSL-Zertifikat-Erneuerung
-
-## 🔧 Wartung
-
-### Dependency Updates
-```bash
-npm audit
-npm audit fix
-```
-
-### Security Headers Test
-```bash
-curl -I https://dk0.dev
-```
-
-### SSL Test
-```bash
-openssl s_client -connect dk0.dev:443 -servername dk0.dev
-```
-
-## 📞 Bei Sicherheitsproblemen
-
-1. Sofortiges Rollback durchführen
-2. Logs überprüfen
-3. Security Headers validieren
-4. Dependencies auf bekannte Vulnerabilities prüfen
-

SECURITY-UPDATE.md

@@ -1,23 +0,0 @@
-# Security Update - 2025-12-08
-
-Addressed critical and moderate vulnerabilities including CVE-2025-55182, CVE-2025-66478 (React2Shell), and others affecting nodemailer and markdown processing.
-
-## Updates
-- **Next.js**: Updated to `15.5.7` (Patched version for 15.5.x branch)
-- **React**: Updated to `19.0.1` (Patched version)
-- **React DOM**: Updated to `19.0.1` (Patched version)
-- **ESLint Config Next**: Updated to `15.5.7`
-- **Nodemailer**: Updated to `7.0.11` (Fixes GHSA-mm7p-fcc7-pg87, GHSA-rcmh-qjqh-p98v)
-- **Nodemailer Mock**: Updated to `2.0.9` (Compatibility update)
-- **React Markdown**: Updated to `Latest` (Fixes `mdast-util-to-hast` vulnerability)
-- **Gray Matter/JS-YAML**: Resolved `js-yaml` vulnerability via dependency updates.
-
-## Verification
-- `npm run build` passed successfully.
-- `npm audit` reports **0 vulnerabilities**.
-- Application logic verified via partial test suite execution (known pre-existing test environment issues noted).
-
-## Advisory References
-- BITS-H Nr. 2025-304569-1132 (React/Next.js)
-- GHSA-mm7p-fcc7-pg87 (Nodemailer)
-- GHSA-rcmh-qjqh-p98v (Nodemailer)

SECURITY_IMPROVEMENTS.md

@@ -0,0 +1,120 @@
+# 🔒 Security Improvements
+
+## Implemented Security Features
+
+### 1. n8n API Endpoint Protection
+
+All n8n endpoints are now protected with:
+- **Authentication**: Admin authentication required for sensitive endpoints (`/api/n8n/generate-image`)
+- **Rate Limiting**: 
+  - `/api/n8n/generate-image`: 10 requests/minute
+  - `/api/n8n/chat`: 20 requests/minute
+  - `/api/n8n/status`: 30 requests/minute
+
+### 2. Email Obfuscation
+
+Email addresses can now be obfuscated to prevent automated scraping:
+
+```typescript
+import { createObfuscatedMailto } from '@/lib/email-obfuscate';
+import { ObfuscatedEmail } from '@/components/ObfuscatedEmail';
+
+// React component
+<ObfuscatedEmail email="contact@dk0.dev">Contact Me</ObfuscatedEmail>
+
+// HTML string
+const mailtoLink = createObfuscatedMailto('contact@dk0.dev', 'Email Me');
+```
+
+**How it works:**
+- Emails are base64 encoded in the HTML
+- JavaScript decodes them on click
+- Prevents simple regex-based email scrapers
+- Still functional for real users
+
+### 3. URL Obfuscation
+
+Sensitive URLs can be obfuscated:
+
+```typescript
+import { createObfuscatedLink } from '@/lib/email-obfuscate';
+
+const link = createObfuscatedLink('https://sensitive-url.com', 'Click Here');
+```
+
+### 4. Rate Limiting
+
+All API endpoints have rate limiting:
+- Prevents brute force attacks
+- Protects against DDoS
+- Configurable per endpoint
+
+## Code Obfuscation
+
+**Note**: Full code obfuscation for Next.js is **not recommended** because:
+
+1. **Next.js already minifies code** in production builds
+2. **Obfuscation breaks source maps** (harder to debug)
+3. **Performance impact** (slower execution)
+4. **Not effective** - determined attackers can still reverse engineer
+5. **Maintenance burden** - harder to debug issues
+
+**Better alternatives:**
+- ✅ Minification (already enabled in Next.js)
+- ✅ Environment variables for secrets
+- ✅ Server-side rendering (code not exposed)
+- ✅ API authentication
+- ✅ Rate limiting
+- ✅ Security headers
+
+## Best Practices
+
+### For Email Protection:
+1. Use obfuscated emails in public HTML
+2. Use contact forms instead of direct mailto links
+3. Monitor for spam patterns
+
+### For API Protection:
+1. Always require authentication for sensitive endpoints
+2. Use rate limiting
+3. Log suspicious activity
+4. Use HTTPS only
+5. Validate all inputs
+
+### For Webhook Protection:
+1. Use secret tokens (`N8N_SECRET_TOKEN`)
+2. Verify webhook signatures
+3. Rate limit webhook endpoints
+4. Monitor webhook usage
+
+## Implementation Status
+
+- ✅ n8n endpoints protected with auth + rate limiting
+- ✅ Email obfuscation utility created
+- ✅ URL obfuscation utility created
+- ✅ Rate limiting on all n8n endpoints
+- ⚠️ Email obfuscation not yet applied to pages (manual step)
+- ⚠️ Code obfuscation not implemented (not recommended)
+
+## Next Steps
+
+To apply email obfuscation to your pages:
+
+1. Import the utility:
+```typescript
+import { ObfuscatedEmail } from '@/lib/email-obfuscate';
+```
+
+2. Replace email links:
+```tsx
+// Before
+<a href="mailto:contact@dk0.dev">Contact</a>
+
+// After
+<ObfuscatedEmail email="contact@dk0.dev">Contact</ObfuscatedEmail>
+```
+
+3. For static HTML, use the string function:
+```typescript
+const html = createObfuscatedMailto('contact@dk0.dev', 'Email Me');
+```

STAGING_SETUP.md

@@ -0,0 +1,195 @@
+# 🚀 Staging Environment Setup
+
+## Overview
+
+You now have **two separate Docker stacks**:
+
+1. **Staging** - Deploys automatically on `dev` or `main` branch
+   - Port: `3002`
+   - Container: `portfolio-app-staging`
+   - Database: `portfolio_staging_db` (port 5433)
+   - Redis: `portfolio-redis-staging` (port 6380)
+   - URL: `https://staging.dk0.dev` (or `http://localhost:3002`)
+
+2. **Production** - Deploys automatically on `production` branch
+   - Port: `3000`
+   - Container: `portfolio-app`
+   - Database: `portfolio_db` (port 5432)
+   - Redis: `portfolio-redis` (port 6379)
+   - URL: `https://dk0.dev`
+
+## How It Works
+
+### Automatic Staging Deployment
+When you push to `dev` or `main` branch:
+1. ✅ Tests run
+2. ✅ Docker image is built and tagged as `staging`
+3. ✅ Staging stack deploys automatically
+4. ✅ Available on port 3002
+
+### Automatic Production Deployment
+When you merge to `production` branch:
+1. ✅ Tests run
+2. ✅ Docker image is built and tagged as `production`
+3. ✅ **Zero-downtime deployment** (blue-green)
+4. ✅ Health checks before switching
+5. ✅ Rollback if health check fails
+6. ✅ Available on port 3000
+
+## Safety Features
+
+### Production Deployment Safety
+- ✅ **Zero-downtime**: New container starts before old one stops
+- ✅ **Health checks**: Verifies new container is healthy before switching
+- ✅ **Automatic rollback**: If health check fails, old container stays running
+- ✅ **Separate networks**: Staging and production are completely isolated
+- ✅ **Different ports**: No port conflicts
+- ✅ **Separate databases**: Staging data doesn't affect production
+
+### Staging Deployment
+- ✅ **Non-blocking**: Staging can fail without affecting production
+- ✅ **Isolated**: Completely separate from production
+- ✅ **Safe to test**: Break staging without breaking production
+
+## Ports Used
+
+| Service | Staging | Production |
+|---------|---------|------------|
+| App | 3002 | 3000 |
+| PostgreSQL | 5434 | 5432 |
+| Redis | 6381 | 6379 |
+
+## Workflow
+
+### Development Flow
+```bash
+# 1. Work on dev branch
+git checkout dev
+# ... make changes ...
+
+# 2. Push to dev (triggers staging deployment)
+git push origin dev
+# → Staging deploys automatically on port 3002
+
+# 3. Test staging
+curl http://localhost:3002/api/health
+
+# 4. Merge to main (also triggers staging)
+git checkout main
+git merge dev
+git push origin main
+# → Staging updates automatically
+
+# 5. When ready, merge to production
+git checkout production
+git merge main
+git push origin production
+# → Production deploys with zero-downtime
+```
+
+## Manual Commands
+
+### Staging
+```bash
+# Start staging
+docker compose -f docker-compose.staging.yml up -d
+
+# Stop staging
+docker compose -f docker-compose.staging.yml down
+
+# View staging logs
+docker compose -f docker-compose.staging.yml logs -f
+
+# Check staging health
+curl http://localhost:3002/api/health
+```
+
+### Production
+```bash
+# Start production
+docker compose -f docker-compose.production.yml up -d
+
+# Stop production
+docker compose -f docker-compose.production.yml down
+
+# View production logs
+docker compose -f docker-compose.production.yml logs -f
+
+# Check production health
+curl http://localhost:3000/api/health
+```
+
+## Environment Variables
+
+### Staging
+- `NODE_ENV=staging`
+- `NEXT_PUBLIC_BASE_URL=https://staging.dk0.dev`
+- `LOG_LEVEL=debug` (more verbose logging)
+
+### Production
+- `NODE_ENV=production`
+- `NEXT_PUBLIC_BASE_URL=https://dk0.dev`
+- `LOG_LEVEL=info`
+
+## Database Separation
+
+- **Staging DB**: `portfolio_staging_db` (separate volume)
+- **Production DB**: `portfolio_db` (separate volume)
+- **No conflicts**: Staging can be reset without affecting production
+
+## Monitoring
+
+### Check Both Environments
+```bash
+# Staging
+curl http://localhost:3002/api/health
+
+# Production
+curl http://localhost:3000/api/health
+```
+
+### View Container Status
+```bash
+# All containers
+docker ps
+
+# Staging only
+docker ps | grep staging
+
+# Production only
+docker ps | grep -v staging
+```
+
+## Troubleshooting
+
+### Staging Not Deploying
+1. Check GitHub Actions workflow
+2. Verify branch is `dev` or `main`
+3. Check Docker logs: `docker compose -f docker-compose.staging.yml logs`
+
+### Production Deployment Issues
+1. Check health endpoint before deployment
+2. Verify old container is running
+3. Check logs: `docker compose -f docker-compose.production.yml logs`
+4. Manual rollback: Restart old container if needed
+
+### Port Conflicts
+- Staging uses 3002, 5434, 6381
+- Production uses 3000, 5432, 6379
+- If conflicts occur, check what's using the ports:
+  ```bash
+  lsof -i :3002
+  lsof -i :3000
+  ```
+
+## Benefits
+
+✅ **Safe testing**: Test on staging without risk
+✅ **Zero-downtime**: Production updates don't interrupt service
+✅ **Isolation**: Staging and production are completely separate
+✅ **Automatic**: Deploys happen automatically on push
+✅ **Rollback**: Automatic rollback if deployment fails
+
+---
+
+**You're all set!** Push to `dev`/`main` for staging, merge to `production` for production deployment! 🚀

TESTING_GUIDE.md

@@ -0,0 +1,284 @@
+# 🧪 Automated Testing Guide
+
+This guide explains how to run automated tests for critical paths, hydration, emails, and more.
+
+## 📋 Test Types
+
+### 1. Unit Tests (Jest)
+Tests individual components and functions in isolation.
+
+```bash
+npm run test              # Run all unit tests
+npm run test:watch        # Watch mode
+npm run test:coverage    # With coverage report
+```
+
+### 2. E2E Tests (Playwright)
+Tests complete user flows in a real browser.
+
+```bash
+npm run test:e2e          # Run all E2E tests
+npm run test:e2e:ui       # Run with UI mode (visual)
+npm run test:e2e:headed   # Run with visible browser
+npm run test:e2e:debug    # Debug mode
+```
+
+### 3. Critical Path Tests
+Tests the most important user flows.
+
+```bash
+npm run test:critical     # Run critical path tests only
+```
+
+### 4. Hydration Tests
+Ensures React hydration works without errors.
+
+```bash
+npm run test:hydration    # Run hydration tests only
+```
+
+### 5. Email Tests
+Tests email API endpoints.
+
+```bash
+npm run test:email        # Run email tests only
+```
+
+### 6. Performance Tests
+Checks page load times and performance.
+
+```bash
+npm run test:performance  # Run performance tests
+```
+
+### 7. Accessibility Tests
+Basic accessibility checks.
+
+```bash
+npm run test:accessibility # Run accessibility tests
+```
+
+## 🚀 Running All Tests
+
+### Quick Test (Recommended)
+```bash
+npm run test:all
+```
+
+This runs:
+- ✅ TypeScript check
+- ✅ ESLint
+- ✅ Build
+- ✅ Unit tests
+- ✅ Critical paths
+- ✅ Hydration tests
+- ✅ Email tests
+- ✅ Performance tests
+- ✅ Accessibility tests
+
+### Individual Test Suites
+```bash
+# Unit tests only
+npm run test
+
+# E2E tests only
+npm run test:e2e
+
+# Both
+npm run test && npm run test:e2e
+```
+
+## 📝 What Gets Tested
+
+### Critical Paths
+- ✅ Home page loads correctly
+- ✅ Projects page displays projects
+- ✅ Individual project pages work
+- ✅ Admin dashboard is accessible
+- ✅ API health endpoint
+- ✅ API projects endpoint
+
+### Hydration
+- ✅ No hydration errors in console
+- ✅ No duplicate React key warnings
+- ✅ Client-side navigation works
+- ✅ Server and client HTML match
+- ✅ Interactive elements work after hydration
+
+### Email
+- ✅ Email API accepts requests
+- ✅ Required field validation
+- ✅ Email format validation
+- ✅ Rate limiting (if implemented)
+- ✅ Email respond endpoint
+
+### Performance
+- ✅ Page load times (< 5s)
+- ✅ No large layout shifts
+- ✅ Images are optimized
+- ✅ API response times (< 1s)
+
+### Accessibility
+- ✅ Proper heading structure
+- ✅ Images have alt text
+- ✅ Links have descriptive text
+- ✅ Forms have labels
+
+## 🎯 Pre-Push Testing
+
+Before pushing to main, run:
+
+```bash
+# Full test suite
+npm run test:all
+
+# Or manually:
+npm run build
+npm run lint
+npx tsc --noEmit
+npm run test
+npm run test:critical
+npm run test:hydration
+```
+
+## 🔧 Configuration
+
+### Playwright Config
+Located in `playwright.config.ts`
+
+- **Base URL**: `http://localhost:3000` (or set `PLAYWRIGHT_TEST_BASE_URL`)
+- **Browsers**: Chromium, Firefox, WebKit, Mobile Chrome, Mobile Safari
+- **Retries**: 2 retries in CI, 0 locally
+- **Screenshots**: On failure
+- **Videos**: On failure
+
+### Jest Config
+Located in `jest.config.ts`
+
+- **Environment**: jsdom
+- **Coverage**: v8 provider
+- **Setup**: `jest.setup.ts`
+
+## 🐛 Debugging Tests
+
+### Playwright Debug Mode
+```bash
+npm run test:e2e:debug
+```
+
+This opens Playwright Inspector where you can:
+- Step through tests
+- Inspect elements
+- View console logs
+- See network requests
+
+### UI Mode (Visual)
+```bash
+npm run test:e2e:ui
+```
+
+Shows a visual interface to:
+- See all tests
+- Run specific tests
+- Watch tests execute
+- View results
+
+### Headed Mode
+```bash
+npm run test:e2e:headed
+```
+
+Runs tests with visible browser (useful for debugging).
+
+## 📊 Test Reports
+
+### Playwright HTML Report
+After running E2E tests:
+```bash
+npx playwright show-report
+```
+
+Shows:
+- Test results
+- Screenshots on failure
+- Videos on failure
+- Timeline of test execution
+
+### Jest Coverage Report
+```bash
+npm run test:coverage
+```
+
+Generates coverage report in `coverage/` directory.
+
+## 🚨 Common Issues
+
+### Tests Fail Locally But Pass in CI
+- Check environment variables
+- Ensure database is set up
+- Check for port conflicts
+
+### Hydration Errors
+- Check for server/client mismatches
+- Ensure no conditional rendering based on `window`
+- Check for date/time differences
+
+### Email Tests Fail
+- Email service might not be configured
+- Check environment variables
+- Tests are designed to handle missing email service
+
+### Performance Tests Fail
+- Network might be slow
+- Adjust thresholds in test file
+- Check for heavy resources loading
+
+## 📝 Writing New Tests
+
+### E2E Test Example
+```typescript
+import { test, expect } from '@playwright/test';
+
+test('My new feature works', async ({ page }) => {
+  await page.goto('/my-page');
+  await expect(page.locator('h1')).toContainText('Expected Text');
+});
+```
+
+### Unit Test Example
+```typescript
+import { render, screen } from '@testing-library/react';
+import MyComponent from './MyComponent';
+
+test('renders correctly', () => {
+  render(<MyComponent />);
+  expect(screen.getByText('Hello')).toBeInTheDocument();
+});
+```
+
+## 🎯 CI/CD Integration
+
+### GitHub Actions Example
+```yaml
+- name: Run tests
+  run: |
+    npm install
+    npm run test:all
+```
+
+### Pre-Push Hook
+Add to `.git/hooks/pre-push`:
+```bash
+#!/bin/bash
+npm run test:all
+```
+
+## 📚 Resources
+
+- [Playwright Docs](https://playwright.dev)
+- [Jest Docs](https://jestjs.io)
+- [Testing Library](https://testing-library.com)
+
+---
+
+**Remember**: Tests should be fast, reliable, and easy to understand! 🚀

__mocks__/@prisma/client.ts

@@ -4,30 +4,30 @@
 export class PrismaClient {
   project = {
     findMany: jest.fn(async () => []),
-    findUnique: jest.fn(async (args: any) => null),
+    findUnique: jest.fn(async (_args: unknown) => null),
     count: jest.fn(async () => 0),
-    create: jest.fn(async (data: any) => data),
-    update: jest.fn(async (data: any) => data),
-    delete: jest.fn(async (data: any) => data),
-    updateMany: jest.fn(async (data: any) => ({})),
+    create: jest.fn(async (data: unknown) => data),
+    update: jest.fn(async (data: unknown) => data),
+    delete: jest.fn(async (data: unknown) => data),
+    updateMany: jest.fn(async (_data: unknown) => ({})),
   };
 
   contact = {
-    create: jest.fn(async (data: any) => data),
+    create: jest.fn(async (data: unknown) => data),
     findMany: jest.fn(async () => []),
     count: jest.fn(async () => 0),
-    update: jest.fn(async (data: any) => data),
-    delete: jest.fn(async (data: any) => data),
+    update: jest.fn(async (data: unknown) => data),
+    delete: jest.fn(async (data: unknown) => data),
   };
 
   pageView = {
-    create: jest.fn(async (data: any) => data),
+    create: jest.fn(async (data: unknown) => data),
     count: jest.fn(async () => 0),
     deleteMany: jest.fn(async () => ({})),
   };
 
   userInteraction = {
-    create: jest.fn(async (data: any) => data),
+    create: jest.fn(async (data: unknown) => data),
     groupBy: jest.fn(async () => []),
     deleteMany: jest.fn(async () => ({})),
   };
@@ -36,4 +36,4 @@ export class PrismaClient {
   $disconnect = jest.fn(async () => {});
 }
 
-export default PrismaClient;
+export default PrismaClient;

app/__tests__/api/sitemap.test.tsx

@@ -1,18 +1,43 @@
-jest.mock('next/server', () => ({
-  NextResponse: jest.fn().mockImplementation(function (body, init) {
-    // Use function and assign to `this` so `new NextResponse(...)` returns an instance with properties
-    // eslint-disable-next-line no-invalid-this
-    this.body = body;
-    // eslint-disable-next-line no-invalid-this
-    this.init = init;
-  }),
-}));
+jest.mock("next/server", () => {
+  const mockNextResponse = function (
+    body: string | object,
+    init?: { headers?: Record<string, string> },
+  ) {
+    // Return an object that mimics NextResponse
+    const mockResponse = {
+      body,
+      init,
+      text: async () => {
+        if (typeof body === "string") {
+          return body;
+        } else if (body && typeof body === "object") {
+          return JSON.stringify(body);
+        }
+        return "";
+      },
+      json: async () => {
+        if (typeof body === "object") {
+          return body;
+        }
+        try {
+          return JSON.parse(body as string);
+        } catch {
+          return {};
+        }
+      },
+    };
+    return mockResponse;
+  };
 
-import { GET } from '@/app/api/sitemap/route';
-import { mockFetch } from '@/app/__tests__/__mocks__/mock-fetch';
+  return {
+    NextResponse: mockNextResponse,
+  };
+});
+
+import { GET } from "@/app/api/sitemap/route";
 
 // Mock node-fetch so we don't perform real network requests in tests
-jest.mock('node-fetch', () => ({
+jest.mock("node-fetch", () => ({
   __esModule: true,
   default: jest.fn(() =>
     Promise.resolve({
@@ -21,60 +46,82 @@ jest.mock('node-fetch', () => ({
         Promise.resolve({
           posts: [
             {
-              id: '67ac8dfa709c60000117d312',
-              title: 'Just Doing Some Testing',
-              meta_description: 'Hello bla bla bla bla',
-              slug: 'just-doing-some-testing',
-              updated_at: '2025-02-13T14:25:38.000+00:00',
+              id: "67ac8dfa709c60000117d312",
+              title: "Just Doing Some Testing",
+              meta_description: "Hello bla bla bla bla",
+              slug: "just-doing-some-testing",
+              updated_at: "2025-02-13T14:25:38.000+00:00",
             },
             {
-              id: '67aaffc3709c60000117d2d9',
-              title: 'Blockchain Based Voting System',
-              meta_description: 'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
-              slug: 'blockchain-based-voting-system',
-              updated_at: '2025-02-13T16:54:42.000+00:00',
+              id: "67aaffc3709c60000117d2d9",
+              title: "Blockchain Based Voting System",
+              meta_description:
+                "This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.",
+              slug: "blockchain-based-voting-system",
+              updated_at: "2025-02-13T16:54:42.000+00:00",
             },
           ],
-          meta: { pagination: { limit: 'all', next: null, page: 1, pages: 1, prev: null, total: 2 } },
+          meta: {
+            pagination: {
+              limit: "all",
+              next: null,
+              page: 1,
+              pages: 1,
+              prev: null,
+              total: 2,
+            },
+          },
         }),
-    })
+    }),
   ),
 }));
 
-describe('GET /api/sitemap', () => {
+describe("GET /api/sitemap", () => {
   beforeAll(() => {
-    process.env.GHOST_API_URL = 'http://localhost:2368';
-    process.env.GHOST_API_KEY = 'test-api-key';
-    process.env.NEXT_PUBLIC_BASE_URL = 'https://dki.one';
+    process.env.GHOST_API_URL = "http://localhost:2368";
+    process.env.GHOST_API_KEY = "test-api-key";
+    process.env.NEXT_PUBLIC_BASE_URL = "https://dki.one";
 
     // Provide mock posts via env so route can use them without fetching
-    process.env.GHOST_MOCK_POSTS = JSON.stringify({ posts: [
-      {
-        id: '67ac8dfa709c60000117d312',
-        title: 'Just Doing Some Testing',
-        meta_description: 'Hello bla bla bla bla',
-        slug: 'just-doing-some-testing',
-        updated_at: '2025-02-13T14:25:38.000+00:00',
-      },
-      {
-        id: '67aaffc3709c60000117d2d9',
-        title: 'Blockchain Based Voting System',
-        meta_description: 'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
-        slug: 'blockchain-based-voting-system',
-        updated_at: '2025-02-13T16:54:42.000+00:00',
-      },
-    ] });
+    process.env.GHOST_MOCK_POSTS = JSON.stringify({
+      posts: [
+        {
+          id: "67ac8dfa709c60000117d312",
+          title: "Just Doing Some Testing",
+          meta_description: "Hello bla bla bla bla",
+          slug: "just-doing-some-testing",
+          updated_at: "2025-02-13T14:25:38.000+00:00",
+        },
+        {
+          id: "67aaffc3709c60000117d2d9",
+          title: "Blockchain Based Voting System",
+          meta_description:
+            "This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.",
+          slug: "blockchain-based-voting-system",
+          updated_at: "2025-02-13T16:54:42.000+00:00",
+        },
+      ],
+    });
   });
 
-  it('should return a sitemap', async () => {
+  it("should return a sitemap", async () => {
     const response = await GET();
 
-    expect(response.body).toContain('<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">');
-    expect(response.body).toContain('<loc>https://dki.one/</loc>');
-    expect(response.body).toContain('<loc>https://dki.one/legal-notice</loc>');
-    expect(response.body).toContain('<loc>https://dki.one/privacy-policy</loc>');
-    expect(response.body).toContain('<loc>https://dki.one/projects/just-doing-some-testing</loc>');
-    expect(response.body).toContain('<loc>https://dki.one/projects/blockchain-based-voting-system</loc>');
+    // Get the body text from the NextResponse
+    const body = await response.text();
+
+    expect(body).toContain(
+      '<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">',
+    );
+    expect(body).toContain("<loc>https://dki.one/</loc>");
+    expect(body).toContain("<loc>https://dki.one/legal-notice</loc>");
+    expect(body).toContain("<loc>https://dki.one/privacy-policy</loc>");
+    expect(body).toContain(
+      "<loc>https://dki.one/projects/just-doing-some-testing</loc>",
+    );
+    expect(body).toContain(
+      "<loc>https://dki.one/projects/blockchain-based-voting-system</loc>",
+    );
     // Note: Headers are not available in test environment
   });
-});
+});

app/__tests__/sitemap.xml/page.test.tsx

@@ -1,13 +1,13 @@
-import '@testing-library/jest-dom';
-import { GET } from '@/app/sitemap.xml/route';
-import { mockFetch } from '@/app/__tests__/__mocks__/mock-fetch-sitemap';
+import "@testing-library/jest-dom";
+import { GET } from "@/app/sitemap.xml/route";
 
-jest.mock('next/server', () => ({
-  NextResponse: jest.fn().mockImplementation(function (body, init) {
-    // eslint-disable-next-line no-invalid-this
-    this.body = body;
-    // eslint-disable-next-line no-invalid-this
-    this.init = init;
+jest.mock("next/server", () => ({
+  NextResponse: jest.fn().mockImplementation((body: unknown, init?: ResponseInit) => {
+    const response = {
+      body,
+      init,
+    };
+    return response;
   }),
 }));
 
@@ -33,36 +33,49 @@ const sitemapXml = `
 `;
 
 // Mock node-fetch for sitemap endpoint (hoisted by Jest)
-jest.mock('node-fetch', () => ({
+jest.mock("node-fetch", () => ({
   __esModule: true,
-  default: jest.fn((url: string) => Promise.resolve({ ok: true, text: () => Promise.resolve(sitemapXml) })),
+  default: jest.fn((_url: string) =>
+    Promise.resolve({ ok: true, text: () => Promise.resolve(sitemapXml) }),
+  ),
 }));
 
-describe('Sitemap Component', () => {
+describe("Sitemap Component", () => {
   beforeAll(() => {
-    process.env.NEXT_PUBLIC_BASE_URL = 'https://dki.one';
+    process.env.NEXT_PUBLIC_BASE_URL = "https://dki.one";
 
     // Provide sitemap XML directly so route uses it without fetching
     process.env.GHOST_MOCK_SITEMAP = sitemapXml;
 
     // Mock global.fetch too, to avoid any network calls
     global.fetch = jest.fn().mockImplementation((url: string) => {
-      if (url.includes('/api/sitemap')) {
-        return Promise.resolve({ ok: true, text: () => Promise.resolve(sitemapXml) });
+      if (url.includes("/api/sitemap")) {
+        return Promise.resolve({
+          ok: true,
+          text: () => Promise.resolve(sitemapXml),
+        });
       }
       return Promise.reject(new Error(`Unknown URL: ${url}`));
     });
   });
 
-  it('should render the sitemap XML', async () => {
+  it("should render the sitemap XML", async () => {
     const response = await GET();
 
-    expect(response.body).toContain('<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">');
-    expect(response.body).toContain('<loc>https://dki.one/</loc>');
-    expect(response.body).toContain('<loc>https://dki.one/legal-notice</loc>');
-    expect(response.body).toContain('<loc>https://dki.one/privacy-policy</loc>');
-    expect(response.body).toContain('<loc>https://dki.one/projects/just-doing-some-testing</loc>');
-    expect(response.body).toContain('<loc>https://dki.one/projects/blockchain-based-voting-system</loc>');
+    expect(response.body).toContain(
+      '<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">',
+    );
+    expect(response.body).toContain("<loc>https://dki.one/</loc>");
+    expect(response.body).toContain("<loc>https://dki.one/legal-notice</loc>");
+    expect(response.body).toContain(
+      "<loc>https://dki.one/privacy-policy</loc>",
+    );
+    expect(response.body).toContain(
+      "<loc>https://dki.one/projects/just-doing-some-testing</loc>",
+    );
+    expect(response.body).toContain(
+      "<loc>https://dki.one/projects/blockchain-based-voting-system</loc>",
+    );
     // Note: Headers are not available in test environment
   });
-});
+});

app/api/analytics/dashboard/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { projectService } from '@/lib/prisma';
+import { prisma, projectService } from '@/lib/prisma';
 import { analyticsCache } from '@/lib/redis';
 import { requireSessionAuth, checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
 
@@ -30,10 +30,15 @@ export async function GET(request: NextRequest) {
       }
     }
 
-    // Check cache first
-    const cachedStats = await analyticsCache.getOverallStats();
-    if (cachedStats) {
-      return NextResponse.json(cachedStats);
+    // Check cache first (but allow bypass with cache-bust parameter)
+    const url = new URL(request.url);
+    const bypassCache = url.searchParams.get('nocache') === 'true';
+    
+    if (!bypassCache) {
+      const cachedStats = await analyticsCache.getOverallStats();
+      if (cachedStats) {
+        return NextResponse.json(cachedStats);
+      }
     }
 
     // Get analytics data
@@ -41,28 +46,84 @@ export async function GET(request: NextRequest) {
     const projects = projectsResult.projects || projectsResult;
     const performanceStats = await projectService.getPerformanceStats();
     
+    // Get real page view data from database
+    const allPageViews = await prisma.pageView.findMany({
+      where: {
+        timestamp: {
+          gte: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000) // Last 30 days
+        }
+      }
+    });
+
+    // Calculate bounce rate (sessions with only 1 pageview)
+    const pageViewsByIP = allPageViews.reduce((acc, pv) => {
+      const ip = pv.ip || 'unknown';
+      if (!acc[ip]) acc[ip] = [];
+      acc[ip].push(pv);
+      return acc;
+    }, {} as Record<string, typeof allPageViews>);
+
+    const totalSessions = Object.keys(pageViewsByIP).length;
+    const bouncedSessions = Object.values(pageViewsByIP).filter(session => session.length === 1).length;
+    const bounceRate = totalSessions > 0 ? Math.round((bouncedSessions / totalSessions) * 100) : 0;
+
+    // Calculate average session duration (simplified - time between first and last pageview per IP)
+    const sessionDurations = Object.values(pageViewsByIP)
+      .map(session => {
+        if (session.length < 2) return 0;
+        const sorted = session.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
+        return sorted[sorted.length - 1].timestamp.getTime() - sorted[0].timestamp.getTime();
+      })
+      .filter(d => d > 0);
+    const avgSessionDuration = sessionDurations.length > 0
+      ? Math.round(sessionDurations.reduce((a, b) => a + b, 0) / sessionDurations.length / 1000) // in seconds
+      : 0;
+
+    // Get total unique users (unique IPs)
+    const totalUsers = new Set(allPageViews.map(pv => pv.ip).filter(Boolean)).size;
+
+    // Calculate real views from PageView table
+    const viewsByProject = allPageViews.reduce((acc, pv) => {
+      if (pv.projectId) {
+        acc[pv.projectId] = (acc[pv.projectId] || 0) + 1;
+      }
+      return acc;
+    }, {} as Record<number, number>);
+
     // Calculate analytics metrics
     const analytics = {
       overview: {
         totalProjects: projects.length,
         publishedProjects: projects.filter(p => p.published).length,
         featuredProjects: projects.filter(p => p.featured).length,
-        totalViews: projects.reduce((sum, p) => sum + ((p.analytics as Record<string, unknown>)?.views as number || 0), 0),
-        totalLikes: projects.reduce((sum, p) => sum + ((p.analytics as Record<string, unknown>)?.likes as number || 0), 0),
-        totalShares: projects.reduce((sum, p) => sum + ((p.analytics as Record<string, unknown>)?.shares as number || 0), 0),
-        avgLighthouse: projects.length > 0 
-          ? Math.round(projects.reduce((sum, p) => sum + ((p.performance as Record<string, unknown>)?.lighthouse as number || 0), 0) / projects.length)
-          : 0
+        totalViews: allPageViews.length, // Real views from PageView table
+        totalLikes: 0, // Not implemented - no like buttons
+        totalShares: 0, // Not implemented - no share buttons
+        avgLighthouse: (() => {
+          // Only calculate if we have real performance data (not defaults)
+          const projectsWithPerf = projects.filter(p => {
+            const perf = (p.performance as Record<string, unknown>) || {};
+            const lighthouse = perf.lighthouse as number || 0;
+            return lighthouse > 0; // Only count projects with actual performance data
+          });
+          return projectsWithPerf.length > 0
+            ? Math.round(projectsWithPerf.reduce((sum, p) => sum + ((p.performance as Record<string, unknown>)?.lighthouse as number || 0), 0) / projectsWithPerf.length)
+            : 0;
+        })()
       },
       projects: projects.map(project => ({
         id: project.id,
         title: project.title,
         category: project.category,
         difficulty: project.difficulty,
-        views: (project.analytics as Record<string, unknown>)?.views as number || 0,
-        likes: (project.analytics as Record<string, unknown>)?.likes as number || 0,
-        shares: (project.analytics as Record<string, unknown>)?.shares as number || 0,
-        lighthouse: (project.performance as Record<string, unknown>)?.lighthouse as number || 0,
+        views: viewsByProject[project.id] || 0, // Only real views from PageView table
+        likes: 0, // Not implemented
+        shares: 0, // Not implemented
+        lighthouse: (() => {
+          const perf = (project.performance as Record<string, unknown>) || {};
+          const score = perf.lighthouse as number || 0;
+          return score > 0 ? score : 0; // Only return if we have real data
+        })(),
         published: project.published,
         featured: project.featured,
         createdAt: project.createdAt,
@@ -71,10 +132,25 @@ export async function GET(request: NextRequest) {
       categories: performanceStats.byCategory,
       difficulties: performanceStats.byDifficulty,
       performance: {
-        avgLighthouse: performanceStats.avgLighthouse,
-        totalViews: performanceStats.totalViews,
-        totalLikes: performanceStats.totalLikes,
-        totalShares: performanceStats.totalShares
+        avgLighthouse: (() => {
+          const projectsWithPerf = projects.filter(p => {
+            const perf = (p.performance as Record<string, unknown>) || {};
+            return (perf.lighthouse as number || 0) > 0;
+          });
+          return projectsWithPerf.length > 0
+            ? Math.round(projectsWithPerf.reduce((sum, p) => sum + ((p.performance as Record<string, unknown>)?.lighthouse as number || 0), 0) / projectsWithPerf.length)
+            : 0;
+        })(),
+        totalViews: allPageViews.length, // Real total views
+        totalLikes: 0,
+        totalShares: 0
+      },
+      metrics: {
+        bounceRate,
+        avgSessionDuration,
+        pagesPerSession: totalSessions > 0 ? (allPageViews.length / totalSessions).toFixed(1) : '0',
+        newUsers: totalUsers,
+        totalUsers
       }
     };
 

app/api/analytics/performance/route.ts

@@ -24,8 +24,73 @@ export async function GET(request: NextRequest) {
       take: 1000 // Last 1000 interactions
     });
 
+    // Get all projects for performance data
+    const projects = await prisma.project.findMany();
+    
+    // Calculate real performance metrics from projects
+    const projectsWithPerformance = projects.map(p => ({
+      id: p.id,
+      title: p.title,
+      lighthouse: ((p.performance as Record<string, unknown>)?.lighthouse as number) || 0,
+      loadTime: ((p.performance as Record<string, unknown>)?.loadTime as number) || 0,
+      fcp: ((p.performance as Record<string, unknown>)?.firstContentfulPaint as number) || 0,
+      lcp: ((p.performance as Record<string, unknown>)?.coreWebVitals as Record<string, unknown>)?.lcp as number || 0,
+      cls: ((p.performance as Record<string, unknown>)?.coreWebVitals as Record<string, unknown>)?.cls as number || 0
+    }));
+
+    // Calculate average lighthouse score (currently unused but kept for future use)
+    const _avgLighthouse = projectsWithPerformance.length > 0
+      ? Math.round(projectsWithPerformance.reduce((sum, p) => sum + p.lighthouse, 0) / projectsWithPerformance.length)
+      : 0;
+
+    // Calculate bounce rate from page views
+    const pageViewsByIP = pageViews.reduce((acc, pv) => {
+      const ip = pv.ip || 'unknown';
+      if (!acc[ip]) acc[ip] = [];
+      acc[ip].push(pv);
+      return acc;
+    }, {} as Record<string, typeof pageViews>);
+
+    const totalSessions = Object.keys(pageViewsByIP).length;
+    const bouncedSessions = Object.values(pageViewsByIP).filter(session => session.length === 1).length;
+    const bounceRate = totalSessions > 0 ? Math.round((bouncedSessions / totalSessions) * 100) : 0;
+
+    // Calculate average session duration
+    const sessionDurations = Object.values(pageViewsByIP)
+      .map(session => {
+        if (session.length < 2) return 0;
+        const sorted = session.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
+        return sorted[sorted.length - 1].timestamp.getTime() - sorted[0].timestamp.getTime();
+      })
+      .filter(d => d > 0);
+    const avgSessionDuration = sessionDurations.length > 0
+      ? Math.round(sessionDurations.reduce((a, b) => a + b, 0) / sessionDurations.length / 1000) // in seconds
+      : 0;
+
+    // Calculate pages per session
+    const pagesPerSession = totalSessions > 0 ? (pageViews.length / totalSessions).toFixed(1) : '0';
+
     // Calculate performance metrics
     const performance = {
+      avgLighthouse: (() => {
+        const projectsWithPerf = projects.filter(p => {
+          const perf = (p.performance as Record<string, unknown>) || {};
+          return (perf.lighthouse as number || 0) > 0;
+        });
+        return projectsWithPerf.length > 0
+          ? Math.round(projectsWithPerf.reduce((sum, p) => {
+              const perf = (p.performance as Record<string, unknown>) || {};
+              return sum + (perf.lighthouse as number || 0);
+            }, 0) / projectsWithPerf.length)
+          : 0;
+      })(),
+      totalViews: pageViews.length,
+      metrics: {
+        bounceRate,
+        avgSessionDuration: avgSessionDuration,
+        pagesPerSession: parseFloat(pagesPerSession),
+        newUsers: new Set(pageViews.map(pv => pv.ip).filter(Boolean)).size
+      },
       pageViews: {
         total: pageViews.length,
         last24h: pageViews.filter(pv => {

app/api/analytics/reset/route.ts

@@ -33,86 +33,15 @@ export async function POST(request: NextRequest) {
 
     switch (type) {
       case 'analytics':
-        // Reset all project analytics
-        await prisma.project.updateMany({
-          data: {
-            analytics: {
-              views: 0,
-              likes: 0,
-              shares: 0,
-              comments: 0,
-              bookmarks: 0,
-              clickThroughs: 0,
-              bounceRate: 0,
-              avgTimeOnPage: 0,
-              uniqueVisitors: 0,
-              returningVisitors: 0,
-              conversionRate: 0,
-              socialShares: {
-                twitter: 0,
-                linkedin: 0,
-                facebook: 0,
-                github: 0
-              },
-              deviceStats: {
-                mobile: 0,
-                desktop: 0,
-                tablet: 0
-              },
-              locationStats: {},
-              referrerStats: {},
-              lastUpdated: new Date().toISOString()
-            }
-          }
-        });
-        break;
-
-      case 'pageviews':
-        // Clear PageView table
-        await prisma.pageView.deleteMany({});
-        break;
-
-      case 'interactions':
-        // Clear UserInteraction table
-        await prisma.userInteraction.deleteMany({});
-        break;
-
-      case 'performance':
-        // Reset performance metrics
-        await prisma.project.updateMany({
-          data: {
-            performance: {
-              lighthouse: 0,
-              loadTime: 0,
-              firstContentfulPaint: 0,
-              largestContentfulPaint: 0,
-              cumulativeLayoutShift: 0,
-              totalBlockingTime: 0,
-              speedIndex: 0,
-              accessibility: 0,
-              bestPractices: 0,
-              seo: 0,
-              performanceScore: 0,
-              mobileScore: 0,
-              desktopScore: 0,
-              coreWebVitals: {
-                lcp: 0,
-                fid: 0,
-                cls: 0
-              },
-              lastUpdated: new Date().toISOString()
-            }
-          }
-        });
-        break;
-
-      case 'all':
-        // Reset everything
-        await Promise.all([
-          // Reset analytics
-          prisma.project.updateMany({
+        // Reset all project analytics (view counts in project.analytics JSON)
+        const projects = await prisma.project.findMany();
+        for (const project of projects) {
+          const analytics = (project.analytics as Record<string, unknown>) || {};
+          await prisma.project.update({
+            where: { id: project.id },
             data: {
               analytics: {
+                ...analytics,
                 views: 0,
                 likes: 0,
                 shares: 0,
@@ -140,11 +69,30 @@ export async function POST(request: NextRequest) {
                 lastUpdated: new Date().toISOString()
               }
             }
-          }),
-          // Reset performance
-          prisma.project.updateMany({
+          });
+        }
+        break;
+
+      case 'pageviews':
+        // Clear PageView table
+        await prisma.pageView.deleteMany({});
+        break;
+
+      case 'interactions':
+        // Clear UserInteraction table
+        await prisma.userInteraction.deleteMany({});
+        break;
+
+      case 'performance':
+        // Reset performance metrics (preserve structure)
+        const projectsForPerf = await prisma.project.findMany();
+        for (const project of projectsForPerf) {
+          const perf = (project.performance as Record<string, unknown>) || {};
+          await prisma.project.update({
+            where: { id: project.id },
             data: {
               performance: {
+                ...perf,
                 lighthouse: 0,
                 loadTime: 0,
                 firstContentfulPaint: 0,
@@ -166,6 +114,73 @@ export async function POST(request: NextRequest) {
                 lastUpdated: new Date().toISOString()
               }
             }
+          });
+        }
+        break;
+
+      case 'all':
+        // Reset everything
+        const allProjects = await prisma.project.findMany();
+        await Promise.all([
+          // Reset analytics and performance for each project (preserve structure)
+          ...allProjects.map(project => {
+            const analytics = (project.analytics as Record<string, unknown>) || {};
+            const perf = (project.performance as Record<string, unknown>) || {};
+            return prisma.project.update({
+              where: { id: project.id },
+              data: {
+                analytics: {
+                  ...analytics,
+                  views: 0,
+                  likes: 0,
+                  shares: 0,
+                  comments: 0,
+                  bookmarks: 0,
+                  clickThroughs: 0,
+                  bounceRate: 0,
+                  avgTimeOnPage: 0,
+                  uniqueVisitors: 0,
+                  returningVisitors: 0,
+                  conversionRate: 0,
+                  socialShares: {
+                    twitter: 0,
+                    linkedin: 0,
+                    facebook: 0,
+                    github: 0
+                  },
+                  deviceStats: {
+                    mobile: 0,
+                    desktop: 0,
+                    tablet: 0
+                  },
+                  locationStats: {},
+                  referrerStats: {},
+                  lastUpdated: new Date().toISOString()
+                },
+                performance: {
+                  ...perf,
+                  lighthouse: 0,
+                  loadTime: 0,
+                  firstContentfulPaint: 0,
+                  largestContentfulPaint: 0,
+                  cumulativeLayoutShift: 0,
+                  totalBlockingTime: 0,
+                  speedIndex: 0,
+                  accessibility: 0,
+                  bestPractices: 0,
+                  seo: 0,
+                  performanceScore: 0,
+                  mobileScore: 0,
+                  desktopScore: 0,
+                  coreWebVitals: {
+                    lcp: 0,
+                    fid: 0,
+                    cls: 0
+                  },
+                  lastUpdated: new Date().toISOString()
+                }
+              }
+            });
           }),
           // Clear tracking tables
           prisma.pageView.deleteMany({}),

app/api/analytics/track/route.ts

@@ -0,0 +1,174 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { prisma } from '@/lib/prisma';
+import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
+
+export async function POST(request: NextRequest) {
+  try {
+    // Rate limiting
+    const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
+    if (!checkRateLimit(ip, 100, 60000)) { // 100 requests per minute for tracking
+      return new NextResponse(
+        JSON.stringify({ error: 'Rate limit exceeded' }), 
+        { 
+          status: 429, 
+          headers: { 
+            'Content-Type': 'application/json',
+            ...getRateLimitHeaders(ip, 100, 60000)
+          } 
+        }
+      );
+    }
+
+    const body = await request.json();
+    const { type, projectId, page, performance, session } = body;
+    const userAgent = request.headers.get('user-agent') || undefined;
+    const referrer = request.headers.get('referer') || undefined;
+
+    // Track page view
+    if (type === 'pageview' && page) {
+      const projectIdNum = projectId ? parseInt(projectId.toString()) : null;
+      
+      // Create page view record
+      await prisma.pageView.create({
+        data: {
+          projectId: projectIdNum,
+          page,
+          ip,
+          userAgent,
+          referrer
+        }
+      });
+
+      // Update project analytics if projectId exists
+      if (projectIdNum) {
+        const project = await prisma.project.findUnique({
+          where: { id: projectIdNum }
+        });
+
+        if (project) {
+          const analytics = (project.analytics as Record<string, unknown>) || {};
+          const currentViews = (analytics.views as number) || 0;
+          
+          await prisma.project.update({
+            where: { id: projectIdNum },
+            data: {
+              analytics: {
+                ...analytics,
+                views: currentViews + 1,
+                lastUpdated: new Date().toISOString()
+              }
+            }
+          });
+        }
+      }
+    }
+
+    // Track performance metrics
+    if (type === 'performance' && performance) {
+      // Try to get projectId from page path if not provided
+      let projectIdNum: number | null = null;
+      if (projectId) {
+        projectIdNum = parseInt(projectId.toString());
+      } else if (page) {
+        // Try to extract from page path like /projects/123 or /projects/slug
+        const match = page.match(/\/projects\/(\d+)/);
+        if (match) {
+          projectIdNum = parseInt(match[1]);
+        } else {
+          // Try to find by slug
+          const slugMatch = page.match(/\/projects\/([^\/]+)/);
+          if (slugMatch) {
+            const slug = slugMatch[1];
+            const project = await prisma.project.findFirst({
+              where: {
+                OR: [
+                  { id: parseInt(slug) || 0 },
+                  { title: { contains: slug, mode: 'insensitive' } }
+                ]
+              }
+            });
+            if (project) projectIdNum = project.id;
+          }
+        }
+      }
+
+      if (projectIdNum) {
+        const project = await prisma.project.findUnique({
+          where: { id: projectIdNum }
+        });
+
+        if (project) {
+          const perf = (project.performance as Record<string, unknown>) || {};
+          const analytics = (project.analytics as Record<string, unknown>) || {};
+          
+          // Calculate lighthouse score from web vitals
+          const lcp = performance.lcp || 0;
+          const fid = performance.fid || 0;
+          const cls = performance.cls || 0;
+          const fcp = performance.fcp || 0;
+          const ttfb = performance.ttfb || 0;
+          
+          // Only calculate lighthouse score if we have real web vitals data
+          // Check if we have at least LCP and FCP (most important metrics)
+          if (lcp > 0 || fcp > 0) {
+            // Simple lighthouse score calculation (0-100)
+            let lighthouseScore = 100;
+            if (lcp > 4000) lighthouseScore -= 25;
+            else if (lcp > 2500) lighthouseScore -= 15;
+            if (fid > 300) lighthouseScore -= 25;
+            else if (fid > 100) lighthouseScore -= 15;
+            if (cls > 0.25) lighthouseScore -= 25;
+            else if (cls > 0.1) lighthouseScore -= 15;
+            if (fcp > 3000) lighthouseScore -= 15;
+            if (ttfb > 800) lighthouseScore -= 10;
+            
+            lighthouseScore = Math.max(0, Math.min(100, lighthouseScore));
+
+            await prisma.project.update({
+              where: { id: projectIdNum },
+              data: {
+                performance: {
+                  ...perf,
+                  lighthouse: lighthouseScore,
+                  loadTime: performance.loadTime || perf.loadTime || 0,
+                  firstContentfulPaint: fcp || perf.firstContentfulPaint || 0,
+                  largestContentfulPaint: lcp || perf.largestContentfulPaint || 0,
+                  cumulativeLayoutShift: cls || perf.cumulativeLayoutShift || 0,
+                  totalBlockingTime: performance.tbt || perf.totalBlockingTime || 0,
+                  speedIndex: performance.si || perf.speedIndex || 0,
+                  coreWebVitals: {
+                    lcp: lcp || (perf.coreWebVitals as Record<string, unknown>)?.lcp || 0,
+                    fid: fid || (perf.coreWebVitals as Record<string, unknown>)?.fid || 0,
+                    cls: cls || (perf.coreWebVitals as Record<string, unknown>)?.cls || 0
+                  },
+                  lastUpdated: new Date().toISOString()
+                },
+                analytics: {
+                  ...analytics,
+                  lastUpdated: new Date().toISOString()
+                }
+              }
+            });
+          }
+        }
+      }
+    }
+
+    // Track session data (for bounce rate calculation)
+    if (type === 'session' && session) {
+      // Store session data in a way that allows bounce rate calculation
+      // A bounce is a session with only one pageview
+      // We'll track this via PageView records and calculate bounce rate from them
+    }
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    if (process.env.NODE_ENV === 'development') {
+      console.error('Analytics tracking error:', error);
+    }
+    return NextResponse.json(
+      { error: 'Failed to track analytics' },
+      { status: 500 }
+    );
+  }
+}

app/api/contacts/route.ts

@@ -1,9 +1,7 @@
 import { type NextRequest, NextResponse } from "next/server";
-import { PrismaClient } from '@prisma/client';
 import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
 import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
-
-const prisma = new PrismaClient();
+import { prisma } from '@/lib/prisma';
 
 export async function GET(request: NextRequest) {
     try {

app/api/email/respond/route.tsx

@@ -3,412 +3,199 @@ import nodemailer from "nodemailer";
 import SMTPTransport from "nodemailer/lib/smtp-transport";
 import Mail from "nodemailer/lib/mailer";
 
-// Email templates with beautiful designs
+const BRAND = {
+    siteUrl: "https://dk0.dev",
+    email: "contact@dk0.dev",
+    bg: "#FDFCF8",
+    sand: "#F3F1E7",
+    border: "#E7E5E4",
+    text: "#292524",
+    muted: "#78716C",
+    mint: "#A7F3D0",
+    red: "#EF4444",
+};
+
+function escapeHtml(input: string): string {
+    return input
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+
+function nl2br(input: string): string {
+    return input.replace(/\r\n|\r|\n/g, "<br>");
+}
+
+function baseEmail(opts: { title: string; subtitle: string; bodyHtml: string }) {
+    const sentAt = new Date().toLocaleString("de-DE", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+    });
+
+    return `
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(opts.title)}</title>
+</head>
+<body style="margin:0;padding:0;background-color:${BRAND.bg};font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:${BRAND.text};">
+  <div style="max-width:640px;margin:0 auto;padding:28px 14px;">
+    <div style="background:#ffffff;border:1px solid ${BRAND.border};border-radius:20px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,0.08);">
+      <div style="background:${BRAND.text};padding:22px 26px;">
+        <div style="display:flex;align-items:center;justify-content:space-between;gap:16px;">
+          <div style="font-weight:800;font-size:16px;color:${BRAND.bg};">Dennis Konkol</div>
+          <div style="font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;font-weight:800;font-size:14px;color:${BRAND.bg};">
+            dk<span style="color:${BRAND.red};">0</span>.dev
+          </div>
+        </div>
+        <div style="margin-top:10px;">
+          <div style="font-size:22px;font-weight:900;letter-spacing:-0.02em;color:${BRAND.bg};">${escapeHtml(opts.title)}</div>
+          <div style="margin-top:4px;font-size:13px;color:#d6d3d1;">${escapeHtml(opts.subtitle)} • ${sentAt}</div>
+        </div>
+        <div style="height:3px;background:${BRAND.mint};margin-top:18px;border-radius:999px;"></div>
+      </div>
+
+      <div style="padding:26px;">
+        ${opts.bodyHtml}
+      </div>
+
+      <div style="padding:18px 26px;background:${BRAND.bg};border-top:1px solid ${BRAND.border};">
+        <div style="font-size:12px;color:${BRAND.muted};line-height:1.5;">
+          Automatisch generiert von <a href="${BRAND.siteUrl}" style="color:${BRAND.text};text-decoration:underline;">dk0.dev</a> •
+          <a href="mailto:${BRAND.email}" style="color:${BRAND.text};text-decoration:underline;">${BRAND.email}</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
+    `.trim();
+}
+
 const emailTemplates = {
     welcome: {
         subject: "Vielen Dank für deine Nachricht! 👋",
-        template: (name: string, originalMessage: string) => `
-            <!DOCTYPE html>
-            <html lang="de">
-            <head>
-                <meta charset="UTF-8">
-                <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                <title>Willkommen - Dennis Konkol</title>
-            </head>
-            <body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
-                <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
-                    
-                    <!-- Header -->
-                    <div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 40px 30px; text-align: center;">
-                        <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
-                            👋 Hallo ${name}!
-                        </h1>
-                        <p style="color: #d1fae5; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
-                            Vielen Dank für deine Nachricht
-                        </p>
-                    </div>
-                    
-                    <!-- Content -->
-                    <div style="padding: 40px 30px;">
-                        
-                        <!-- Welcome Message -->
-                        <div style="background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #bbf7d0;">
-                            <div style="text-align: center; margin-bottom: 20px;">
-                                <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
-                                    <span style="color: #ffffff; font-size: 24px;">✓</span>
-                                </div>
-                                <h2 style="color: #065f46; margin: 0; font-size: 22px; font-weight: 600;">Nachricht erhalten!</h2>
-                            </div>
-                            <p style="color: #047857; margin: 0; text-align: center; line-height: 1.6; font-size: 16px;">
-                                Vielen Dank für deine Nachricht! Ich habe sie erhalten und werde mich so schnell wie möglich bei dir melden.
-                            </p>
-                        </div>
-                        
-                        <!-- Original Message Reference -->
-                        <div style="background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 30px;">
-                            <h3 style="color: #374151; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
-                                <span style="width: 6px; height: 6px; background: #6b7280; border-radius: 50%; margin-right: 10px;"></span>
-                                Deine ursprüngliche Nachricht
-                            </h3>
-                            <div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #10b981;">
-                                <p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
-                            </div>
-                        </div>
-                        
-                        <!-- Next Steps -->
-                        <div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 30px; border-radius: 12px; border: 1px solid #bfdbfe;">
-                            <h3 style="color: #1e40af; margin: 0 0 20px 0; font-size: 18px; font-weight: 600; text-align: center;">
-                                🚀 Was passiert als nächstes?
-                            </h3>
-                            <div style="display: grid; gap: 15px;">
-                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #3b82f6;">
-                                    <span style="color: #3b82f6; font-size: 20px; margin-right: 15px;">📧</span>
-                                    <div>
-                                        <h4 style="color: #1e40af; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Schnelle Antwort</h4>
-                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Ich antworte normalerweise innerhalb von 24 Stunden</p>
-                                    </div>
-                                </div>
-                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #8b5cf6;">
-                                    <span style="color: #8b5cf6; font-size: 20px; margin-right: 15px;">💼</span>
-                                    <div>
-                                        <h4 style="color: #7c3aed; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Projekt-Diskussion</h4>
-                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Gerne besprechen wir dein Projekt im Detail</p>
-                                    </div>
-                                </div>
-                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #f59e0b;">
-                                    <span style="color: #f59e0b; font-size: 20px; margin-right: 15px;">🤝</span>
-                                    <div>
-                                        <h4 style="color: #d97706; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Zusammenarbeit</h4>
-                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Lass uns gemeinsam etwas Großartiges schaffen!</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <!-- Portfolio Links -->
-                        <div style="text-align: center; margin-top: 30px;">
-                            <h3 style="color: #374151; margin: 0 0 20px 0; font-size: 18px; font-weight: 600;">Entdecke mehr von mir</h3>
-                            <div style="display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;">
-                                <a href="https://dk0.dev" style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
-                                    🌐 Portfolio
-                                </a>
-                                <a href="https://github.com/denniskonkol" style="display: inline-block; background: linear-gradient(135deg, #374151 0%, #111827 100%); color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
-                                    💻 GitHub
-                                </a>
-                                <a href="https://linkedin.com/in/denniskonkol" style="display: inline-block; background: linear-gradient(135deg, #0077b5 0%, #005885 100%); color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
-                                    💼 LinkedIn
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <!-- Footer -->
-                    <div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
-                        <div style="margin-bottom: 15px;">
-                            <span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 1px;"></span>
-                        </div>
-                        <p style="color: #6b7280; margin: 0; font-size: 14px; line-height: 1.5;">
-                                <strong>Dennis Konkol</strong> • Software Engineer & Student<br>
-                                <a href="https://dk0.dev" style="color: #10b981; text-decoration: none; font-family: 'Monaco', 'Menlo', 'Consolas', monospace; font-weight: bold;">dk<span style="color: #ef4444;">0</span>.dev</a> • 
-                                <a href="mailto:contact@dk0.dev" style="color: #10b981; text-decoration: none;">contact@dk0.dev</a>
-                        </p>
-                        <p style="color: #9ca3af; margin: 10px 0 0 0; font-size: 12px;">
-                            ${new Date().toLocaleString('de-DE', { 
-                                year: 'numeric', 
-                                month: 'long', 
-                                day: 'numeric', 
-                                hour: '2-digit', 
-                                minute: '2-digit' 
-                            })}
-                        </p>
-                    </div>
-                    
-                </div>
-            </body>
-            </html>
-        `
+        template: (name: string, originalMessage: string) => {
+            const safeName = escapeHtml(name);
+            const safeMsg = nl2br(escapeHtml(originalMessage));
+            return baseEmail({
+                title: `Danke, ${safeName}!`,
+                subtitle: "Nachricht erhalten",
+                bodyHtml: `
+<div style="font-size:15px;line-height:1.65;color:${BRAND.text};">
+  Hey ${safeName},<br><br>
+  danke für deine Nachricht — ich habe sie erhalten und melde mich so schnell wie möglich bei dir zurück.
+</div>
+
+<div style="margin-top:18px;background:${BRAND.bg};border:1px solid ${BRAND.border};border-radius:16px;overflow:hidden;">
+  <div style="padding:14px 16px;background:${BRAND.sand};border-bottom:1px solid ${BRAND.border};">
+    <div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">Deine Nachricht</div>
+  </div>
+  <div style="padding:16px;line-height:1.65;color:${BRAND.text};font-size:14px;border-left:4px solid ${BRAND.mint};">
+    ${safeMsg}
+  </div>
+</div>
+
+<div style="margin-top:20px;text-align:center;">
+  <a href="${BRAND.siteUrl}" style="display:inline-block;background:${BRAND.text};color:${BRAND.bg};text-decoration:none;padding:12px 18px;border-radius:999px;font-weight:800;font-size:14px;">
+    Portfolio ansehen
+  </a>
+</div>
+                `.trim(),
+            });
+        },
     },
-    
     project: {
         subject: "Projekt-Anfrage erhalten! 🚀",
-        template: (name: string, originalMessage: string) => `
-            <!DOCTYPE html>
-            <html lang="de">
-            <head>
-                <meta charset="UTF-8">
-                <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                <title>Projekt-Anfrage - Dennis Konkol</title>
-            </head>
-            <body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
-                <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
-                    
-                    <!-- Header -->
-                    <div style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); padding: 40px 30px; text-align: center;">
-                        <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
-                            🚀 Projekt-Anfrage erhalten!
-                        </h1>
-                        <p style="color: #e9d5ff; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
-                            Hallo ${name}, lass uns etwas Großartiges schaffen!
-                        </p>
-                    </div>
-                    
-                    <!-- Content -->
-                    <div style="padding: 40px 30px;">
-                        
-                        <!-- Project Message -->
-                        <div style="background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #e9d5ff;">
-                            <div style="text-align: center; margin-bottom: 20px;">
-                                <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
-                                    <span style="color: #ffffff; font-size: 24px;">💼</span>
-                                </div>
-                                <h2 style="color: #6b21a8; margin: 0; font-size: 22px; font-weight: 600;">Bereit für dein Projekt!</h2>
-                            </div>
-                            <p style="color: #7c2d12; margin: 0; text-align: center; line-height: 1.6; font-size: 16px;">
-                                Vielen Dank für deine Projekt-Anfrage! Ich bin gespannt darauf, mehr über deine Ideen zu erfahren und wie wir sie gemeinsam umsetzen können.
-                            </p>
-                        </div>
-                        
-                        <!-- Original Message -->
-                        <div style="background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 30px;">
-                            <h3 style="color: #374151; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
-                                <span style="width: 6px; height: 6px; background: #8b5cf6; border-radius: 50%; margin-right: 10px;"></span>
-                                Deine Projekt-Nachricht
-                            </h3>
-                            <div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #8b5cf6;">
-                                <p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
-                            </div>
-                        </div>
-                        
-                        <!-- Process Steps -->
-                        <div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 30px; border-radius: 12px; border: 1px solid #bfdbfe;">
-                            <h3 style="color: #1e40af; margin: 0 0 20px 0; font-size: 18px; font-weight: 600; text-align: center;">
-                                🎯 Mein Arbeitsprozess
-                            </h3>
-                            <div style="display: grid; gap: 15px;">
-                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #3b82f6;">
-                                    <span style="color: #3b82f6; font-size: 20px; margin-right: 15px;">💬</span>
-                                    <div>
-                                        <h4 style="color: #1e40af; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">1. Erstgespräch</h4>
-                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Wir besprechen deine Anforderungen im Detail</p>
-                                    </div>
-                                </div>
-                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #8b5cf6;">
-                                    <span style="color: #8b5cf6; font-size: 20px; margin-right: 15px;">📋</span>
-                                    <div>
-                                        <h4 style="color: #7c3aed; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">2. Konzept & Planung</h4>
-                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Ich erstelle ein detailliertes Konzept für dein Projekt</p>
-                                    </div>
-                                </div>
-                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #10b981;">
-                                    <span style="color: #10b981; font-size: 20px; margin-right: 15px;">⚡</span>
-                                    <div>
-                                        <h4 style="color: #059669; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">3. Entwicklung</h4>
-                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Agile Entwicklung mit regelmäßigen Updates</p>
-                                    </div>
-                                </div>
-                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #f59e0b;">
-                                    <span style="color: #f59e0b; font-size: 20px; margin-right: 15px;">🎉</span>
-                                    <div>
-                                        <h4 style="color: #d97706; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">4. Launch & Support</h4>
-                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Deployment und kontinuierlicher Support</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <!-- CTA -->
-                        <div style="text-align: center; margin-top: 30px;">
-                            <a href="mailto:contact@dk0.dev?subject=Projekt-Diskussion mit ${name}" style="display: inline-block; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: #ffffff; text-decoration: none; padding: 15px 30px; border-radius: 8px; font-weight: 600; font-size: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
-                                💬 Projekt besprechen
-                            </a>
-                        </div>
-                    </div>
-                    
-                    <!-- Footer -->
-                    <div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
-                        <div style="margin-bottom: 15px;">
-                            <span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); border-radius: 1px;"></span>
-                        </div>
-                        <p style="color: #6b7280; margin: 0; font-size: 14px; line-height: 1.5;">
-                            <strong>Dennis Konkol</strong> • Software Engineer & Student<br>
-                            <a href="https://dki.one" style="color: #8b5cf6; text-decoration: none;">dki.one</a> • 
-                            <a href="mailto:contact@dk0.dev" style="color: #8b5cf6; text-decoration: none;">contact@dk0.dev</a>
-                        </p>
-                    </div>
-                    
-                </div>
-            </body>
-            </html>
-        `
+        template: (name: string, originalMessage: string) => {
+            const safeName = escapeHtml(name);
+            const safeMsg = nl2br(escapeHtml(originalMessage));
+            return baseEmail({
+                title: `Projekt-Anfrage: danke, ${safeName}!`,
+                subtitle: "Ich melde mich zeitnah",
+                bodyHtml: `
+<div style="font-size:15px;line-height:1.65;color:${BRAND.text};">
+  Hey ${safeName},<br><br>
+  mega — danke für die Projekt-Anfrage. Ich schaue mir deine Nachricht an und komme mit Rückfragen/Ideen auf dich zu.
+</div>
+
+<div style="margin-top:18px;background:${BRAND.bg};border:1px solid ${BRAND.border};border-radius:16px;overflow:hidden;">
+  <div style="padding:14px 16px;background:${BRAND.sand};border-bottom:1px solid ${BRAND.border};">
+    <div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">Deine Projekt-Nachricht</div>
+  </div>
+  <div style="padding:16px;line-height:1.65;color:${BRAND.text};font-size:14px;border-left:4px solid ${BRAND.mint};">
+    ${safeMsg}
+  </div>
+</div>
+
+<div style="margin-top:20px;text-align:center;">
+  <a href="mailto:${BRAND.email}" style="display:inline-block;background:${BRAND.text};color:${BRAND.bg};text-decoration:none;padding:12px 18px;border-radius:999px;font-weight:800;font-size:14px;">
+    Kontakt aufnehmen
+  </a>
+</div>
+                `.trim(),
+            });
+        },
     },
-    
     quick: {
         subject: "Danke für deine Nachricht! ⚡",
-        template: (name: string, originalMessage: string) => `
-            <!DOCTYPE html>
-            <html lang="de">
-            <head>
-                <meta charset="UTF-8">
-                <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                <title>Quick Response - Dennis Konkol</title>
-            </head>
-            <body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
-                <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
-                    
-                    <!-- Header -->
-                    <div style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); padding: 40px 30px; text-align: center;">
-                        <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
-                            ⚡ Schnelle Antwort!
-                        </h1>
-                        <p style="color: #fef3c7; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
-                            Hallo ${name}, danke für deine Nachricht!
-                        </p>
-                    </div>
-                    
-                    <!-- Content -->
-                    <div style="padding: 40px 30px;">
-                        
-                        <!-- Quick Response -->
-                        <div style="background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #fde68a;">
-                            <div style="text-align: center;">
-                                <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
-                                    <span style="color: #ffffff; font-size: 24px;">⚡</span>
-                                </div>
-                                <h2 style="color: #92400e; margin: 0 0 15px 0; font-size: 22px; font-weight: 600;">Nachricht erhalten!</h2>
-                                <p style="color: #a16207; margin: 0; line-height: 1.6; font-size: 16px;">
-                                    Vielen Dank für deine Nachricht! Ich werde mich so schnell wie möglich bei dir melden.
-                                </p>
-                            </div>
-                        </div>
-                        
-                        <!-- Original Message -->
-                        <div style="background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 30px;">
-                            <h3 style="color: #374151; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
-                                <span style="width: 6px; height: 6px; background: #f59e0b; border-radius: 50%; margin-right: 10px;"></span>
-                                Deine Nachricht
-                            </h3>
-                            <div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #f59e0b;">
-                                <p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
-                            </div>
-                        </div>
-                        
-                        <!-- Quick Info -->
-                        <div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 25px; border-radius: 12px; border: 1px solid #bfdbfe;">
-                            <h3 style="color: #1e40af; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; text-align: center;">
-                                📞 Kontakt
-                            </h3>
-                            <p style="color: #1e40af; margin: 0; text-align: center; line-height: 1.6; font-size: 14px;">
-                                <strong>E-Mail:</strong> <a href="mailto:contact@dk0.dev" style="color: #1e40af; text-decoration: none;">contact@dk0.dev</a><br>
-                                <strong>Portfolio:</strong> <a href="https://dki.one" style="color: #1e40af; text-decoration: none;">dki.one</a>
-                            </p>
-                        </div>
-                    </div>
-                    
-                    <!-- Footer -->
-                    <div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
-                        <div style="margin-bottom: 15px;">
-                            <span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 1px;"></span>
-                        </div>
-                        <p style="color: #6b7280; margin: 0; font-size: 14px; line-height: 1.5;">
-                            <strong>Dennis Konkol</strong> • Software Engineer & Student<br>
-                            <a href="https://dki.one" style="color: #f59e0b; text-decoration: none;">dki.one</a>
-                        </p>
-                    </div>
-                    
-                </div>
-            </body>
-            </html>
-        `
+        template: (name: string, originalMessage: string) => {
+            const safeName = escapeHtml(name);
+            const safeMsg = nl2br(escapeHtml(originalMessage));
+            return baseEmail({
+                title: `Danke, ${safeName}!`,
+                subtitle: "Kurze Bestätigung",
+                bodyHtml: `
+<div style="font-size:15px;line-height:1.65;color:${BRAND.text};">
+  Hey ${safeName},<br><br>
+  kurze Bestätigung: deine Nachricht ist angekommen. Ich melde mich bald zurück.
+</div>
+
+<div style="margin-top:18px;background:${BRAND.bg};border:1px solid ${BRAND.border};border-radius:16px;overflow:hidden;">
+  <div style="padding:14px 16px;background:${BRAND.sand};border-bottom:1px solid ${BRAND.border};">
+    <div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">Deine Nachricht</div>
+  </div>
+  <div style="padding:16px;line-height:1.65;color:${BRAND.text};font-size:14px;border-left:4px solid ${BRAND.mint};">
+    ${safeMsg}
+  </div>
+</div>
+                `.trim(),
+            });
+        },
     },
     reply: {
         subject: "Antwort auf deine Nachricht 📧",
-        template: (name: string, originalMessage: string) => `
-            <!DOCTYPE html>
-            <html lang="de">
-            <head>
-                <meta charset="UTF-8">
-                <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                <title>Antwort - Dennis Konkol</title>
-            </head>
-            <body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
-                <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
-                    
-                    <!-- Header -->
-                    <div style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); padding: 40px 30px; text-align: center;">
-                        <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
-                            📧 Hallo ${name}!
-                        </h1>
-                        <p style="color: #dbeafe; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
-                            Hier ist meine Antwort auf deine Nachricht
-                        </p>
-                    </div>
-                    
-                    <!-- Content -->
-                    <div style="padding: 40px 30px;">
-                        
-                        <!-- Reply Message -->
-                        <div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #93c5fd;">
-                            <div style="text-align: center; margin-bottom: 20px;">
-                                <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
-                                    <span style="color: #ffffff; font-size: 24px;">💬</span>
-                                </div>
-                                <h2 style="color: #1e40af; margin: 0; font-size: 22px; font-weight: 600;">Meine Antwort</h2>
-                            </div>
-                            <div style="background: #ffffff; padding: 20px; border-radius: 8px; border-left: 4px solid #3b82f6;">
-                                <p style="color: #1e40af; margin: 0; line-height: 1.6; font-size: 16px; white-space: pre-wrap;">${originalMessage}</p>
-                            </div>
-                        </div>
-                        
-                        <!-- Original Message Reference -->
-                        <div style="background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 30px;">
-                            <h3 style="color: #374151; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
-                                <span style="width: 6px; height: 6px; background: #6b7280; border-radius: 50%; margin-right: 10px;"></span>
-                                Deine ursprüngliche Nachricht
-                            </h3>
-                            <div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #3b82f6;">
-                                <p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
-                            </div>
-                        </div>
-                        
-                        <!-- Contact Info -->
-                        <div style="background: #f8fafc; padding: 25px; border-radius: 12px; text-align: center; border: 1px solid #e2e8f0;">
-                            <h3 style="color: #374151; margin: 0 0 15px 0; font-size: 18px; font-weight: 600;">Weitere Fragen?</h3>
-                            <p style="color: #6b7280; margin: 0 0 20px 0; line-height: 1.6;">
-                                Falls du weitere Fragen hast oder mehr über meine Projekte erfahren möchtest, zögere nicht, mir zu schreiben!
-                            </p>
-                            <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
-                                <a href="https://dki.one" style="display: inline-flex; align-items: center; padding: 12px 24px; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 500; transition: all 0.2s;">
-                                    🌐 Portfolio besuchen
-                                </a>
-                                <a href="mailto:contact@dk0.dev" style="display: inline-flex; align-items: center; padding: 12px 24px; background: #ffffff; color: #3b82f6; text-decoration: none; border-radius: 8px; font-weight: 500; border: 2px solid #3b82f6; transition: all 0.2s;">
-                                    📧 Direkt antworten
-                                </a>
-                            </div>
-                        </div>
-                        
-                    </div>
-                    
-                    <!-- Footer -->
-                    <div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
-                        <p style="color: #6b7280; margin: 0 0 10px 0; font-size: 14px; font-weight: 500;">
-                            <strong>Dennis Konkol</strong> • <a href="https://dki.one" style="color: #3b82f6; text-decoration: none;">dki.one</a>
-                        </p>
-                        <p style="color: #9ca3af; margin: 10px 0 0 0; font-size: 12px;">
-                            ${new Date().toLocaleString('de-DE', { 
-                                year: 'numeric', 
-                                month: 'long', 
-                                day: 'numeric', 
-                                hour: '2-digit', 
-                                minute: '2-digit' 
-                            })}
-                        </p>
-                    </div>
-                    
-                </div>
-            </body>
-            </html>
-        `
-    }
+        template: (name: string, originalMessage: string) => {
+            const safeName = escapeHtml(name);
+            const safeMsg = nl2br(escapeHtml(originalMessage));
+            return baseEmail({
+                title: `Antwort für ${safeName}`,
+                subtitle: "Neue Nachricht",
+                bodyHtml: `
+<div style="font-size:15px;line-height:1.65;color:${BRAND.text};">
+  Hey ${safeName},<br><br>
+  hier ist meine Antwort:
+</div>
+
+<div style="margin-top:14px;background:${BRAND.bg};border:1px solid ${BRAND.border};border-radius:16px;overflow:hidden;">
+  <div style="padding:14px 16px;background:${BRAND.sand};border-bottom:1px solid ${BRAND.border};">
+    <div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">Antwort</div>
+  </div>
+  <div style="padding:16px;line-height:1.65;color:${BRAND.text};font-size:14px;border-left:4px solid ${BRAND.mint};">
+    ${safeMsg}
+  </div>
+</div>
+                `.trim(),
+            });
+        },
+    },
 };
 
 export async function POST(request: NextRequest) {

app/api/email/route.tsx

@@ -15,6 +15,15 @@ function sanitizeInput(input: string, maxLength: number = 10000): string {
         .trim();
 }
 
+function escapeHtml(input: string): string {
+    return input
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+
 export async function POST(request: NextRequest) {
     try {
         // Rate limiting (defensive: headers may be undefined in tests)
@@ -155,6 +164,22 @@ export async function POST(request: NextRequest) {
             }
         }
 
+        const brandUrl = "https://dk0.dev";
+        const sentAt = new Date().toLocaleString('de-DE', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+
+        const safeName = escapeHtml(name);
+        const safeEmail = escapeHtml(email);
+        const safeSubject = escapeHtml(subject);
+        const safeMessageHtml = escapeHtml(message).replace(/\n/g, "<br>");
+        const initial = (name.trim()[0] || "?").toUpperCase();
+        const replyHref = `mailto:${email}?subject=${encodeURIComponent(`Re: ${subject}`)}`;
+
         const mailOptions: Mail.Options = {
             from: `"Portfolio Contact" <${user}>`,
             to: "contact@dk0.dev", // Send to your contact email
@@ -168,86 +193,80 @@ export async function POST(request: NextRequest) {
                     <meta name="viewport" content="width=device-width, initial-scale=1.0">
                     <title>Neue Kontaktanfrage - Portfolio</title>
                 </head>
-                <body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
-                    <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
-                        
-                        <!-- Header -->
-                        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px 30px; text-align: center;">
-                            <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
-                                📧 Neue Kontaktanfrage
-                            </h1>
-                            <p style="color: #e2e8f0; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
-                                Von deinem Portfolio
-                            </p>
+                <body style="margin:0;padding:0;background-color:#fdfcf8;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:#292524;">
+                  <div style="max-width:640px;margin:0 auto;padding:28px 14px;">
+                    <div style="background:#ffffff;border:1px solid #e7e5e4;border-radius:20px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,0.08);">
+                      <!-- Top bar -->
+                      <div style="background:#292524;padding:22px 26px;">
+                        <div style="display:flex;align-items:center;justify-content:space-between;gap:16px;">
+                          <div style="font-weight:700;font-size:16px;letter-spacing:-0.01em;color:#fdfcf8;">
+                            Dennis Konkol
+                          </div>
+                          <div style="font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;font-weight:700;font-size:14px;color:#fdfcf8;">
+                            dk<span style="color:#ef4444;">0</span>.dev
+                          </div>
                         </div>
-                        
-                        <!-- Content -->
-                        <div style="padding: 40px 30px;">
-                            
-                            <!-- Contact Info Card -->
-                            <div style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #e2e8f0;">
-                                <div style="display: flex; align-items: center; margin-bottom: 20px;">
-                                    <div style="width: 50px; height: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
-                                        <span style="color: #ffffff; font-size: 20px; font-weight: bold;">${name.charAt(0).toUpperCase()}</span>
-                                    </div>
-                                    <div>
-                                        <h2 style="color: #1e293b; margin: 0; font-size: 24px; font-weight: 600;">${name}</h2>
-                                        <p style="color: #64748b; margin: 4px 0 0 0; font-size: 14px;">Kontaktanfrage</p>
-                                    </div>
-                                </div>
-                                
-                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px;">
-                                    <div style="background: #ffffff; padding: 20px; border-radius: 8px; border-left: 4px solid #10b981;">
-                                        <h4 style="color: #059669; margin: 0 0 8px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">E-Mail</h4>
-                                        <p style="color: #374151; margin: 0; font-size: 16px; font-weight: 500;">${email}</p>
-                                    </div>
-                                    <div style="background: #ffffff; padding: 20px; border-radius: 8px; border-left: 4px solid #3b82f6;">
-                                        <h4 style="color: #2563eb; margin: 0 0 8px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Betreff</h4>
-                                        <p style="color: #374151; margin: 0; font-size: 16px; font-weight: 500;">${subject}</p>
-                                    </div>
-                                </div>
-                            </div>
-                            
-                            <!-- Message Card -->
-                            <div style="background: #ffffff; padding: 30px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);">
-                                <div style="display: flex; align-items: center; margin-bottom: 20px;">
-                                    <div style="width: 8px; height: 8px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; margin-right: 12px;"></div>
-                                    <h3 style="color: #1e293b; margin: 0; font-size: 18px; font-weight: 600;">Nachricht</h3>
-                                </div>
-                                <div style="background: #f8fafc; padding: 25px; border-radius: 8px; border-left: 4px solid #667eea;">
-                                    <p style="color: #374151; margin: 0; line-height: 1.7; font-size: 16px; white-space: pre-wrap;">${message}</p>
-                                </div>
-                            </div>
-                            
-                            <!-- Action Button -->
-                            <div style="text-align: center; margin-top: 30px;">
-                                <a href="mailto:${email}?subject=Re: ${subject}" style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; text-decoration: none; padding: 15px 30px; border-radius: 8px; font-weight: 600; font-size: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: all 0.2s;">
-                                    📬 Antworten
-                                </a>
-                            </div>
+                        <div style="margin-top:10px;">
+                          <div style="font-size:22px;font-weight:800;letter-spacing:-0.02em;color:#fdfcf8;">
+                            Neue Kontaktanfrage
+                          </div>
+                          <div style="margin-top:4px;font-size:13px;color:#d6d3d1;">
+                            Eingegangen am ${sentAt}
+                          </div>
                         </div>
-                        
-                        <!-- Footer -->
-                        <div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e2e8f0;">
-                            <div style="margin-bottom: 15px;">
-                                <span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 1px;"></span>
+                        <div style="height:3px;background:#a7f3d0;margin-top:18px;border-radius:999px;"></div>
+                      </div>
+
+                      <!-- Content -->
+                      <div style="padding:26px;">
+                        <!-- Sender -->
+                        <div style="display:flex;align-items:flex-start;gap:14px;">
+                          <div style="width:44px;height:44px;border-radius:14px;background:#f3f1e7;border:1px solid #e7e5e4;display:flex;align-items:center;justify-content:center;font-weight:800;color:#292524;">
+                            ${escapeHtml(initial)}
+                          </div>
+                          <div style="flex:1;min-width:0;">
+                            <div style="font-size:18px;font-weight:800;letter-spacing:-0.01em;color:#292524;line-height:1.2;">
+                              ${safeName}
                             </div>
-                            <p style="color: #64748b; margin: 0; font-size: 14px; line-height: 1.5;">
-                                Diese E-Mail wurde automatisch von deinem Portfolio generiert.<br>
-                                <strong>Dennis Konkol Portfolio</strong> • <a href="https://dki.one" style="color: #667eea; text-decoration: none;">dki.one</a>
-                            </p>
-                            <p style="color: #94a3b8; margin: 10px 0 0 0; font-size: 12px;">
-                                ${new Date().toLocaleString('de-DE', { 
-                                    year: 'numeric', 
-                                    month: 'long', 
-                                    day: 'numeric', 
-                                    hour: '2-digit', 
-                                    minute: '2-digit' 
-                                })}
-                            </p>
+                            <div style="margin-top:6px;font-size:13px;color:#78716c;line-height:1.4;">
+                              <span style="font-weight:700;color:#44403c;">E-Mail:</span> ${safeEmail}<br>
+                              <span style="font-weight:700;color:#44403c;">Betreff:</span> ${safeSubject}
+                            </div>
+                          </div>
                         </div>
-                        
+
+                        <!-- Message -->
+                        <div style="margin-top:18px;background:#fdfcf8;border:1px solid #e7e5e4;border-radius:16px;overflow:hidden;">
+                          <div style="padding:14px 16px;background:#f3f1e7;border-bottom:1px solid #e7e5e4;">
+                            <div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">
+                              Nachricht
+                            </div>
+                          </div>
+                          <div style="padding:16px;line-height:1.65;color:#292524;font-size:15px;border-left:4px solid #a7f3d0;">
+                            ${safeMessageHtml}
+                          </div>
+                        </div>
+
+                        <!-- CTA -->
+                        <div style="margin-top:22px;text-align:center;">
+                          <a href="${escapeHtml(replyHref)}"
+                             style="display:inline-block;background:#292524;color:#fdfcf8;text-decoration:none;padding:12px 18px;border-radius:999px;font-weight:800;font-size:14px;">
+                            Antworten
+                          </a>
+                          <div style="margin-top:10px;font-size:12px;color:#78716c;">
+                            Oder antworte direkt auf diese E-Mail.
+                          </div>
+                        </div>
+                      </div>
+
+                      <!-- Footer -->
+                      <div style="padding:18px 26px;background:#fdfcf8;border-top:1px solid #e7e5e4;">
+                        <div style="font-size:12px;color:#78716c;line-height:1.5;">
+                          Automatisch generiert von <a href="${brandUrl}" style="color:#292524;text-decoration:underline;">dk0.dev</a>
+                        </div>
+                      </div>
                     </div>
+                  </div>
                 </body>
                 </html>
             `,
@@ -261,7 +280,7 @@ Nachricht:
 ${message}
 
 ---
-Diese E-Mail wurde automatisch von deinem Portfolio generiert.
+Diese E-Mail wurde automatisch von dk0.dev generiert.
             `,
         };
 

app/api/fetchAllProjects/route.tsx

@@ -1,5 +1,4 @@
 import { NextResponse } from "next/server";
-import http from "http";
 import NodeCache from "node-cache";
 
 // Use a dynamic import for node-fetch so tests that mock it (via jest.mock) are respected
@@ -7,9 +6,9 @@ async function getFetch() {
   try {
     const mod = await import("node-fetch");
     // support both CJS and ESM interop
-    return (mod as any).default ?? mod;
-  } catch (err) {
-    return (globalThis as any).fetch;
+    return (mod as { default: unknown }).default ?? mod;
+  } catch (_err) {
+    return globalThis.fetch;
   }
 }
 
@@ -45,13 +44,12 @@ export async function GET() {
   }
 
   try {
-    const agent = new http.Agent({ keepAlive: true });
     const fetchFn = await getFetch();
-    const response = await fetchFn(
+    const response = await (fetchFn as unknown as typeof fetch)(
       `${GHOST_API_URL}/ghost/api/content/posts/?key=${GHOST_API_KEY}&limit=all`,
-      { agent: agent as unknown as undefined }
     );
-    const posts: GhostPostsResponse = await response.json() as GhostPostsResponse;
+    const posts: GhostPostsResponse =
+      (await response.json()) as GhostPostsResponse;
 
     if (!posts || !posts.posts) {
       console.error("Invalid posts data");

app/api/fetchImage/route.tsx

@@ -13,22 +13,28 @@ export async function GET(req: NextRequest) {
 
   try {
     // Try global fetch first, fall back to node-fetch if necessary
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let response: any;
     try {
-      if (typeof (globalThis as any).fetch === 'function') {
-        response = await (globalThis as any).fetch(url);
+      if (
+        typeof (globalThis as unknown as { fetch: unknown }).fetch ===
+        "function"
+      ) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        response = await (globalThis as unknown as { fetch: any }).fetch(url);
       }
-    } catch (e) {
+    } catch (_e) {
       response = undefined;
     }
 
-    if (!response || typeof response.ok === 'undefined' || !response.ok) {
+    if (!response || typeof response.ok === "undefined" || !response.ok) {
       try {
-        const mod = await import('node-fetch');
-        const nodeFetch = (mod as any).default ?? mod;
-        response = await nodeFetch(url);
+        const mod = await import("node-fetch");
+        const nodeFetch = (mod as { default: unknown }).default ?? mod;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        response = await (nodeFetch as any)(url);
       } catch (err) {
-        console.error('Failed to fetch image:', err);
+        console.error("Failed to fetch image:", err);
         return NextResponse.json(
           { error: "Failed to fetch image" },
           { status: 500 },
@@ -37,7 +43,9 @@ export async function GET(req: NextRequest) {
     }
 
     if (!response || !response.ok) {
-      throw new Error(`Failed to fetch image: ${response?.statusText ?? 'no response'}`);
+      throw new Error(
+        `Failed to fetch image: ${response?.statusText ?? "no response"}`,
+      );
     }
 
     const contentType = response.headers.get("content-type");

app/api/fetchProject/route.tsx

@@ -15,40 +15,52 @@ export async function GET(request: Request) {
 
   try {
     // Debug: show whether fetch is present/mocked
-    // eslint-disable-next-line no-console
-    console.log('DEBUG fetch in fetchProject:', typeof (globalThis as any).fetch, 'globalIsMock:', !!(globalThis as any).fetch?._isMockFunction);
+
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+    console.log(
+      "DEBUG fetch in fetchProject:",
+      typeof (globalThis as any).fetch,
+      "globalIsMock:",
+      !!(globalThis as any).fetch?._isMockFunction,
+    );
+
     // Try global fetch first (as tests often mock it). If it fails or returns undefined,
     // fall back to dynamically importing node-fetch.
     let response: any;
 
-    if (typeof (globalThis as any).fetch === 'function') {
+    if (typeof (globalThis as any).fetch === "function") {
       try {
         response = await (globalThis as any).fetch(
           `${GHOST_API_URL}/ghost/api/content/posts/slug/${slug}/?key=${GHOST_API_KEY}`,
         );
-      } catch (e) {
+      } catch (_e) {
         response = undefined;
       }
     }
 
-    if (!response || typeof response.ok === 'undefined') {
+    if (!response || typeof response.ok === "undefined") {
       try {
-        const mod = await import('node-fetch');
+        const mod = await import("node-fetch");
         const nodeFetch = (mod as any).default ?? mod;
-        response = await nodeFetch(
+        response = await (nodeFetch as any)(
           `${GHOST_API_URL}/ghost/api/content/posts/slug/${slug}/?key=${GHOST_API_KEY}`,
         );
-      } catch (err) {
+      } catch (_err) {
         response = undefined;
       }
     }
+    /* eslint-enable @typescript-eslint/no-explicit-any */
 
     // Debug: inspect the response returned from the fetch
-    // eslint-disable-next-line no-console
-    console.log('DEBUG fetch response:', response);
+
+    // Debug: inspect the response returned from the fetch
+
+    console.log("DEBUG fetch response:", response);
 
     if (!response || !response.ok) {
-      throw new Error(`Failed to fetch post: ${response?.statusText ?? 'no response'}`);
+      throw new Error(
+        `Failed to fetch post: ${response?.statusText ?? "no response"}`,
+      );
     }
 
     const post = await response.json();

app/api/n8n/chat/route.ts

@@ -1,86 +1,302 @@
-import { NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from "next/server";
+import { decodeHtmlEntitiesServer } from "@/lib/html-decode";
+
+export async function POST(request: NextRequest) {
+  let userMessage = "";
 
-export async function POST(request: Request) {
   try {
-    const { message } = await request.json();
-
-    if (!message || typeof message !== 'string') {
+    // Rate limiting for n8n chat endpoint
+    const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
+    const { checkRateLimit } = await import('@/lib/auth');
+    
+    if (!checkRateLimit(ip, 20, 60000)) { // 20 requests per minute for chat
       return NextResponse.json(
-        { error: 'Message is required' },
-        { status: 400 }
+        { error: 'Rate limit exceeded. Please try again later.' },
+        { status: 429 }
+      );
+    }
+
+    const json = await request.json();
+    userMessage = json.message;
+    const history = json.history || [];
+
+    if (!userMessage || typeof userMessage !== "string") {
+      return NextResponse.json(
+        { error: "Message is required" },
+        { status: 400 },
       );
     }
 
     // Call your n8n chat webhook
     const n8nWebhookUrl = process.env.N8N_WEBHOOK_URL;
 
-    if (!n8nWebhookUrl) {
-      console.error('N8N_WEBHOOK_URL not configured');
-      // Return fallback response
+    if (!n8nWebhookUrl || n8nWebhookUrl.trim() === '') {
+      console.error("N8N_WEBHOOK_URL not configured. Environment check:", {
+        hasUrl: !!process.env.N8N_WEBHOOK_URL,
+        urlValue: process.env.N8N_WEBHOOK_URL || '(empty)',
+        nodeEnv: process.env.NODE_ENV,
+      });
       return NextResponse.json({
-        reply: getFallbackResponse(message)
+        reply: getFallbackResponse(userMessage),
       });
     }
 
-    const response = await fetch(`${n8nWebhookUrl}/webhook/chat`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        ...(process.env.N8N_API_KEY && {
-          'Authorization': `Bearer ${process.env.N8N_API_KEY}`
-        }),
-      },
-      body: JSON.stringify({ message }),
+    // Ensure URL doesn't have trailing slash before adding /webhook/chat
+    const baseUrl = n8nWebhookUrl.replace(/\/$/, '');
+    const webhookUrl = `${baseUrl}/webhook/chat`;
+    console.log(`Sending to n8n: ${webhookUrl}`, {
+      hasSecretToken: !!process.env.N8N_SECRET_TOKEN,
+      hasApiKey: !!process.env.N8N_API_KEY,
     });
 
-    if (!response.ok) {
-      throw new Error(`n8n webhook failed: ${response.status}`);
+    // Add timeout to prevent hanging requests
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout
+
+    try {
+      const response = await fetch(webhookUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...(process.env.N8N_SECRET_TOKEN && {
+            Authorization: `Bearer ${process.env.N8N_SECRET_TOKEN}`,
+          }),
+          ...(process.env.N8N_API_KEY && {
+            "X-API-Key": process.env.N8N_API_KEY,
+          }),
+        },
+        body: JSON.stringify({
+          message: userMessage,
+          history: history,
+        }),
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+
+      if (!response.ok) {
+        const errorText = await response.text().catch(() => 'Unknown error');
+        console.error(`n8n webhook failed with status: ${response.status}`, {
+          status: response.status,
+          statusText: response.statusText,
+          error: errorText,
+          webhookUrl: webhookUrl.replace(/\/\/[^:]+:[^@]+@/, '//***:***@'), // Hide credentials in logs
+        });
+        throw new Error(`n8n webhook failed: ${response.status} - ${errorText.substring(0, 200)}`);
+      }
+
+      const data = await response.json();
+
+      console.log("n8n response data (full):", JSON.stringify(data, null, 2));
+      console.log("n8n response data type:", typeof data);
+      console.log("n8n response is array:", Array.isArray(data));
+
+    // Try multiple ways to extract the reply
+    let reply: string | undefined = undefined;
+
+    // Direct fields
+    if (data.reply) reply = data.reply;
+    else if (data.message) reply = data.message;
+    else if (data.response) reply = data.response;
+    else if (data.text) reply = data.text;
+    else if (data.content) reply = data.content;
+    else if (data.answer) reply = data.answer;
+    else if (data.output) reply = data.output;
+    else if (data.result) reply = data.result;
+    
+    // Array handling
+    else if (Array.isArray(data) && data.length > 0) {
+      const firstItem = data[0];
+      if (typeof firstItem === 'string') {
+        reply = firstItem;
+      } else if (typeof firstItem === 'object') {
+        reply = firstItem.reply || firstItem.message || firstItem.response || 
+                firstItem.text || firstItem.content || firstItem.answer ||
+                firstItem.output || firstItem.result;
+      }
+    }
+    
+    // Nested structures (common in n8n)
+    else if (data && typeof data === "object") {
+      // Check nested data field
+      if (data.data) {
+        if (typeof data.data === 'string') {
+          reply = data.data;
+        } else if (typeof data.data === 'object') {
+          reply = data.data.reply || data.data.message || data.data.response ||
+                  data.data.text || data.data.content || data.data.answer;
+        }
+      }
+      
+      // Check nested json field
+      if (!reply && data.json) {
+        if (typeof data.json === 'string') {
+          reply = data.json;
+        } else if (typeof data.json === 'object') {
+          reply = data.json.reply || data.json.message || data.json.response ||
+                  data.json.text || data.json.content || data.json.answer;
+        }
+      }
+      
+      // Check items array (n8n often wraps in items)
+      if (!reply && Array.isArray(data.items) && data.items.length > 0) {
+        const firstItem = data.items[0];
+        if (typeof firstItem === 'string') {
+          reply = firstItem;
+        } else if (typeof firstItem === 'object') {
+          reply = firstItem.reply || firstItem.message || firstItem.response ||
+                  firstItem.text || firstItem.content || firstItem.answer ||
+                  firstItem.json?.reply || firstItem.json?.message;
+        }
+      }
+      
+      // Last resort: if it's a single string value object, try to extract
+      if (!reply && Object.keys(data).length === 1) {
+        const value = Object.values(data)[0];
+        if (typeof value === 'string') {
+          reply = value;
+        }
+      }
+      
+      // If still no reply but data exists, stringify it (for debugging)
+      if (!reply && Object.keys(data).length > 0) {
+        console.warn("n8n response structure not recognized, attempting to extract any string value");
+        // Try to find any string value in the object
+        const findStringValue = (obj: unknown): string | undefined => {
+          if (typeof obj === 'string' && obj.length > 0) return obj;
+          if (Array.isArray(obj) && obj.length > 0) {
+            return findStringValue(obj[0]);
+          }
+          if (obj && typeof obj === 'object' && obj !== null) {
+            const objRecord = obj as Record<string, unknown>;
+            for (const key of ['reply', 'message', 'response', 'text', 'content', 'answer', 'output', 'result']) {
+              if (objRecord[key] && typeof objRecord[key] === 'string') {
+                return objRecord[key] as string;
+              }
+            }
+            // Recursively search
+            for (const value of Object.values(objRecord)) {
+              const found = findStringValue(value);
+              if (found) return found;
+            }
+          }
+          return undefined;
+        };
+        reply = findStringValue(data);
+      }
     }
 
-    const data = await response.json();
-    return NextResponse.json({ reply: data.reply || data.message || data.response });
-  } catch (error) {
-    console.error('Chat API error:', error);
+    if (!reply) {
+      console.error("n8n response missing reply field. Full response:", JSON.stringify(data, null, 2));
+      throw new Error("Invalid response format from n8n - no reply field found");
+    }
 
-    // Fallback to mock responses if n8n is down
-    const { message } = await request.json();
-    return NextResponse.json(
-      { reply: getFallbackResponse(message) }
-    );
+      // Decode HTML entities in the reply
+      const decodedReply = decodeHtmlEntitiesServer(String(reply));
+
+      return NextResponse.json({
+        reply: decodedReply,
+      });
+    } catch (fetchError: unknown) {
+      clearTimeout(timeoutId);
+      
+      if (fetchError instanceof Error && fetchError.name === 'AbortError') {
+        console.error("n8n webhook request timed out");
+      } else {
+        console.error("n8n webhook fetch error:", fetchError);
+      }
+      throw fetchError;
+    }
+  } catch (error: unknown) {
+    console.error("Chat API error:", error);
+    console.error("Error details:", {
+      message: error instanceof Error ? error.message : String(error),
+      stack: error instanceof Error ? error.stack : undefined,
+      n8nUrl: process.env.N8N_WEBHOOK_URL ? `configured (${process.env.N8N_WEBHOOK_URL})` : 'missing',
+      hasSecretToken: !!process.env.N8N_SECRET_TOKEN,
+      hasApiKey: !!process.env.N8N_API_KEY,
+      nodeEnv: process.env.NODE_ENV,
+    });
+
+    // Fallback to mock responses
+    // Now using the variable captured at the start
+    return NextResponse.json({ reply: getFallbackResponse(userMessage) });
   }
 }
 
 function getFallbackResponse(message: string): string {
+  if (!message || typeof message !== "string") {
+    return "I'm having a bit of trouble understanding. Could you try asking again?";
+  }
+
   const lowerMessage = message.toLowerCase();
 
-  if (lowerMessage.includes('skill') || lowerMessage.includes('tech')) {
-    return "Dennis specializes in full-stack development with Next.js, Flutter for mobile, and DevOps with Docker Swarm. He's passionate about self-hosting and runs his own infrastructure!";
+  if (
+    lowerMessage.includes("skill") ||
+    lowerMessage.includes("tech") ||
+    lowerMessage.includes("stack")
+  ) {
+    return "I specialize in full-stack development with Next.js, React, and Flutter for mobile. On the DevOps side, I love working with Docker Swarm, Traefik, and CI/CD pipelines. Basically, if it involves code or servers, I'm interested!";
   }
 
-  if (lowerMessage.includes('project')) {
-    return "Dennis has built Clarity (a Flutter app for people with dyslexia) and runs a complete self-hosted infrastructure with Docker Swarm, Traefik, and automated CI/CD pipelines. Check out the Projects section for more!";
+  if (
+    lowerMessage.includes("project") ||
+    lowerMessage.includes("built") ||
+    lowerMessage.includes("work")
+  ) {
+    return "One of my key projects is Clarity, a Flutter app designed to help people with dyslexia. I also maintain a comprehensive self-hosted infrastructure with Docker Swarm. You can check out more details in the Projects section!";
   }
 
-  if (lowerMessage.includes('contact') || lowerMessage.includes('email') || lowerMessage.includes('reach')) {
-    return "You can reach Dennis via the contact form on this site or email him at contact@dk0.dev. He's always open to discussing new opportunities and interesting projects!";
+  if (
+    lowerMessage.includes("contact") ||
+    lowerMessage.includes("email") ||
+    lowerMessage.includes("reach") ||
+    lowerMessage.includes("hire")
+  ) {
+    return "The best way to reach me is through the contact form below or by emailing contact@dk0.dev. I'm always open to discussing new ideas, opportunities, or just chatting about tech!";
   }
 
-  if (lowerMessage.includes('location') || lowerMessage.includes('where')) {
-    return "Dennis is based in Osnabrück, Germany. He's a student who's passionate about technology and self-hosting.";
+  if (
+    lowerMessage.includes("location") ||
+    lowerMessage.includes("where") ||
+    lowerMessage.includes("live")
+  ) {
+    return "I'm based in Osnabrück, Germany. It's a great place to be a student and work on tech projects!";
   }
 
-  if (lowerMessage.includes('hobby') || lowerMessage.includes('free time')) {
-    return "When Dennis isn't coding or managing servers, he enjoys gaming, jogging, and experimenting with new technologies. He also uses pen and paper for notes despite automating everything else!";
+  if (
+    lowerMessage.includes("hobby") ||
+    lowerMessage.includes("free time") ||
+    lowerMessage.includes("fun")
+  ) {
+    return "When I'm not coding or tweaking my servers, I enjoy gaming, going for a jog, or experimenting with new tech. Fun fact: I still use pen and paper for my calendar, even though I automate everything else!";
   }
 
-  if (lowerMessage.includes('devops') || lowerMessage.includes('docker') || lowerMessage.includes('infrastructure')) {
-    return "Dennis runs his own infrastructure on IONOS and OVHcloud using Docker Swarm, Traefik for reverse proxy, and custom CI/CD pipelines. He loves self-hosting and managing game servers!";
+  if (
+    lowerMessage.includes("devops") ||
+    lowerMessage.includes("docker") ||
+    lowerMessage.includes("server") ||
+    lowerMessage.includes("hosting")
+  ) {
+    return "I'm really into DevOps! I run my own infrastructure on IONOS and OVHcloud using Docker Swarm and Traefik. It allows me to host various services and game servers efficiently while learning a ton about system administration.";
   }
 
-  if (lowerMessage.includes('student') || lowerMessage.includes('study')) {
-    return "Yes, Dennis is currently a student in Osnabrück while also working on various tech projects and managing his own infrastructure. He's always learning and exploring new technologies!";
+  if (
+    lowerMessage.includes("student") ||
+    lowerMessage.includes("study") ||
+    lowerMessage.includes("education")
+  ) {
+    return "Yes, I'm currently a student in Osnabrück. I balance my studies with working on personal projects and managing my self-hosted infrastructure. It keeps me busy but I learn something new every day!";
+  }
+
+  if (
+    lowerMessage.includes("hello") ||
+    lowerMessage.includes("hi ") ||
+    lowerMessage.includes("hey")
+  ) {
+    return "Hi there! I'm Dennis's AI assistant (currently in offline mode). How can I help you learn more about Dennis today?";
   }
 
   // Default response
-  return "That's a great question! Dennis is a full-stack developer and DevOps enthusiast who loves building things with Next.js, Flutter, and Docker. Feel free to ask me more specific questions about his skills, projects, or experience!";
+  return "That's an interesting question! I'm currently operating in fallback mode, so my knowledge is a bit limited right now. But I can tell you that Dennis is a full-stack developer and DevOps enthusiast who loves building with Next.js and Docker. Feel free to ask about his skills, projects, or how to contact him!";
 }

app/api/n8n/generate-image/route.ts

@@ -13,6 +13,24 @@ import { NextRequest, NextResponse } from "next/server";
  */
 export async function POST(req: NextRequest) {
   try {
+    // Rate limiting for n8n endpoints
+    const ip = req.headers.get('x-forwarded-for') || req.headers.get('x-real-ip') || 'unknown';
+    const { checkRateLimit } = await import('@/lib/auth');
+    
+    if (!checkRateLimit(ip, 10, 60000)) { // 10 requests per minute
+      return NextResponse.json(
+        { error: 'Rate limit exceeded. Please try again later.' },
+        { status: 429 }
+      );
+    }
+
+    // Require admin authentication for n8n endpoints
+    const { requireAdminAuth } = await import('@/lib/auth');
+    const authError = requireAdminAuth(req);
+    if (authError) {
+      return authError;
+    }
+
     const body = await req.json();
     const { projectId, regenerate = false } = body;
 
@@ -39,50 +57,67 @@ export async function POST(req: NextRequest) {
       );
     }
 
+    // Fetch project data first (needed for the new webhook format)
+    const projectResponse = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000"}/api/projects/${projectId}`,
+      {
+        method: "GET",
+        cache: "no-store",
+      },
+    );
+
+    if (!projectResponse.ok) {
+      return NextResponse.json(
+        { error: "Project not found" },
+        { status: 404 },
+      );
+    }
+
+    const project = await projectResponse.json();
+
     // Optional: Check if project already has an image
     if (!regenerate) {
-      const checkResponse = await fetch(
-        `${process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000"}/api/projects/${projectId}`,
-        {
-          method: "GET",
-          cache: "no-store",
-        },
-      );
-
-      if (checkResponse.ok) {
-        const project = await checkResponse.json();
-        if (project.imageUrl && project.imageUrl !== "") {
-          return NextResponse.json(
-            {
-              success: true,
-              message:
-                "Project already has an image. Use regenerate=true to force regeneration.",
-              projectId: projectId,
-              existingImageUrl: project.imageUrl,
-              regenerated: false,
-            },
-            { status: 200 },
-          );
-        }
+      if (project.imageUrl && project.imageUrl !== "") {
+        return NextResponse.json(
+          {
+            success: true,
+            message:
+              "Project already has an image. Use regenerate=true to force regeneration.",
+            projectId: projectId,
+            existingImageUrl: project.imageUrl,
+            regenerated: false,
+          },
+          { status: 200 },
+        );
       }
     }
 
     // Call n8n webhook to trigger AI image generation
-    const n8nResponse = await fetch(`${n8nWebhookUrl}/ai-image-generation`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        ...(n8nSecretToken && {
-          Authorization: `Bearer ${n8nSecretToken}`,
+    // New webhook expects: body.projectData with title, category, description
+    // Webhook path: /webhook/image-gen (instead of /webhook/ai-image-generation)
+    const n8nResponse = await fetch(
+      `${n8nWebhookUrl}/webhook/image-gen`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...(n8nSecretToken && {
+            Authorization: `Bearer ${n8nSecretToken}`,
+          }),
+        },
+        body: JSON.stringify({
+          projectId: projectId,
+          projectData: {
+            title: project.title || "Unknown Project",
+            category: project.category || "Technology",
+            description: project.description || "A clean minimalist visualization",
+          },
+          regenerate: regenerate,
+          triggeredBy: "api",
+          timestamp: new Date().toISOString(),
         }),
       },
-      body: JSON.stringify({
-        projectId: projectId,
-        regenerate: regenerate,
-        triggeredBy: "api",
-        timestamp: new Date().toISOString(),
-      }),
-    });
+    );
 
     if (!n8nResponse.ok) {
       const errorText = await n8nResponse.text();
@@ -98,16 +133,97 @@ export async function POST(req: NextRequest) {
       );
     }
 
-    const result = await n8nResponse.json();
+    // The new webhook should return JSON with the pollinations.ai image URL
+    // The pollinations.ai URL format is: https://image.pollinations.ai/prompt/...
+    // This URL is stable and can be used directly
+    const contentType = n8nResponse.headers.get("content-type");
+    
+    let imageUrl: string;
+    let generatedAt: string;
+    let fileSize: string | undefined;
+
+    if (contentType?.includes("application/json")) {
+      const result = await n8nResponse.json();
+      // Handle JSON response - webhook should return the pollinations.ai URL
+      // The URL from pollinations.ai is the direct image URL
+      imageUrl = result.imageUrl || result.url || result.generatedPrompt || "";
+      
+      // If the webhook returns the pollinations.ai URL directly, use it
+      // Format: https://image.pollinations.ai/prompt/...
+      if (!imageUrl && typeof result === 'string' && result.includes('pollinations.ai')) {
+        imageUrl = result;
+      }
+      
+      generatedAt = result.generatedAt || new Date().toISOString();
+      fileSize = result.fileSize;
+    } else if (contentType?.startsWith("image/")) {
+      // If webhook returns image binary, we need the URL from the workflow
+      // For pollinations.ai, the URL should be constructed from the prompt
+      // But ideally the webhook should return JSON with the URL
+      return NextResponse.json(
+        {
+          error: "Webhook returned image binary instead of URL",
+          message: "Please modify the n8n workflow to return JSON with the imageUrl field containing the pollinations.ai URL",
+        },
+        { status: 500 },
+      );
+    } else {
+      // Try to parse as text/URL
+      const textResponse = await n8nResponse.text();
+      if (textResponse.includes('pollinations.ai') || textResponse.startsWith('http')) {
+        imageUrl = textResponse.trim();
+        generatedAt = new Date().toISOString();
+      } else {
+        return NextResponse.json(
+          {
+            error: "Unexpected response format from webhook",
+            message: "Webhook should return JSON with imageUrl field containing the pollinations.ai URL",
+          },
+          { status: 500 },
+        );
+      }
+    }
+
+    if (!imageUrl) {
+      return NextResponse.json(
+        {
+          error: "No image URL returned from webhook",
+          message: "The n8n workflow should return the pollinations.ai image URL in the response",
+        },
+        { status: 500 },
+      );
+    }
+
+    // If we got an image URL, we should update the project with it
+    if (imageUrl) {
+      // Update project with the new image URL
+      const updateResponse = await fetch(
+        `${process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000"}/api/projects/${projectId}`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+            "x-admin-request": "true",
+          },
+          body: JSON.stringify({
+            imageUrl: imageUrl,
+          }),
+        },
+      );
+
+      if (!updateResponse.ok) {
+        console.warn("Failed to update project with image URL");
+      }
+    }
 
     return NextResponse.json(
       {
         success: true,
-        message: "AI image generation started successfully",
+        message: "AI image generation completed successfully",
         projectId: projectId,
-        imageUrl: result.imageUrl,
-        generatedAt: result.generatedAt,
-        fileSize: result.fileSize,
+        imageUrl: imageUrl,
+        generatedAt: generatedAt,
+        fileSize: fileSize,
         regenerated: regenerate,
       },
       { status: 200 },

app/api/n8n/status/route.ts

@@ -1,39 +1,107 @@
 // app/api/n8n/status/route.ts
-import { NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 
 // Cache für 30 Sekunden, damit wir n8n nicht zuspammen
 export const revalidate = 30;
 
-export async function GET() {
+export async function GET(request: NextRequest) {
+  // Rate limiting for n8n status endpoint
+  const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
+  const { checkRateLimit } = await import('@/lib/auth');
+  
+  if (!checkRateLimit(ip, 30, 60000)) { // 30 requests per minute for status
+    return NextResponse.json(
+      { error: 'Rate limit exceeded. Please try again later.' },
+      { status: 429 }
+    );
+  }
   try {
-    // Rufe den n8n Webhook auf
-    const res = await fetch(`${process.env.N8N_WEBHOOK_URL}/denshooter-71242/status`, {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      // Cache-Optionen für Next.js
-      next: { revalidate: 30 }
-    });
-
-    if (!res.ok) {
-      throw new Error(`n8n error: ${res.status}`);
+    // Check if n8n webhook URL is configured
+    const n8nWebhookUrl = process.env.N8N_WEBHOOK_URL;
+    
+    if (!n8nWebhookUrl) {
+      console.warn("N8N_WEBHOOK_URL not configured for status endpoint");
+      // Return fallback if n8n is not configured
+      return NextResponse.json({
+        status: { text: "offline", color: "gray" },
+        music: null,
+        gaming: null,
+        coding: null,
+      });
     }
 
-    const data = await res.json();
+    // Rufe den n8n Webhook auf
+    // Add timestamp to query to bypass Cloudflare cache
+    const statusUrl = `${n8nWebhookUrl}/webhook/denshooter-71242/status?t=${Date.now()}`;
+    console.log(`Fetching status from: ${statusUrl}`);
 
-    // n8n gibt oft ein Array zurück: [{...}]. Wir wollen nur das Objekt.
-    const statusData = Array.isArray(data) ? data[0] : data;
+    // Add timeout to prevent hanging requests
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
 
-    return NextResponse.json(statusData);
-  } catch (error) {
+    try {
+      const res = await fetch(statusUrl, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          ...(process.env.N8N_SECRET_TOKEN && {
+            Authorization: `Bearer ${process.env.N8N_SECRET_TOKEN}`,
+          }),
+        },
+        next: { revalidate: 30 },
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+
+      if (!res.ok) {
+        const errorText = await res.text().catch(() => 'Unknown error');
+        console.error(`n8n status webhook failed: ${res.status}`, errorText);
+        throw new Error(`n8n error: ${res.status} - ${errorText}`);
+      }
+
+      const data = await res.json();
+
+      // n8n gibt oft ein Array zurück: [{...}]. Wir wollen nur das Objekt.
+      const statusData = Array.isArray(data) ? data[0] : data;
+
+      // Safety check: if statusData is still undefined/null (e.g. empty array), use fallback
+      if (!statusData) {
+        throw new Error("Empty data received from n8n");
+      }
+
+      // Ensure coding object has proper structure
+      if (statusData.coding && typeof statusData.coding === "object") {
+        // Already properly formatted from n8n
+      } else if (statusData.coding === null || statusData.coding === undefined) {
+        // No coding data - keep as null
+        statusData.coding = null;
+      }
+
+      return NextResponse.json(statusData);
+    } catch (fetchError: unknown) {
+      clearTimeout(timeoutId);
+      
+      if (fetchError instanceof Error && fetchError.name === 'AbortError') {
+        console.error("n8n status webhook request timed out");
+      } else {
+        console.error("n8n status webhook fetch error:", fetchError);
+      }
+      throw fetchError;
+    }
+  } catch (error: unknown) {
     console.error("Error fetching n8n status:", error);
+    console.error("Error details:", {
+      message: error instanceof Error ? error.message : String(error),
+      stack: error instanceof Error ? error.stack : undefined,
+      n8nUrl: process.env.N8N_WEBHOOK_URL ? 'configured' : 'missing',
+    });
     // Leeres Fallback-Objekt, damit die Seite nicht abstürzt
     return NextResponse.json({
       status: { text: "offline", color: "gray" },
       music: null,
       gaming: null,
-      coding: null
+      coding: null,
     });
   }
-}
+}

app/api/sitemap/route.tsx

@@ -14,7 +14,6 @@ export const runtime = "nodejs"; // Force Node runtime
 
 // Read Ghost API config at runtime, tests may set env vars in beforeAll
 
-
 // Funktion, um die XML für die Sitemap zu generieren
 function generateXml(sitemapRoutes: { url: string; lastModified: string }[]) {
   const xmlHeader = '<?xml version="1.0" encoding="UTF-8"?>';
@@ -63,7 +62,7 @@ export async function GET() {
   ];
 
   // In test environment we can short-circuit and use a mocked posts payload
-  if (process.env.NODE_ENV === 'test' && process.env.GHOST_MOCK_POSTS) {
+  if (process.env.NODE_ENV === "test" && process.env.GHOST_MOCK_POSTS) {
     const mockData = JSON.parse(process.env.GHOST_MOCK_POSTS);
     const projects = (mockData as ProjectsData).posts || [];
 
@@ -73,7 +72,7 @@ export async function GET() {
         url: `${baseUrl}/projects/${project.slug}`,
         lastModified,
         priority: 0.8,
-        changeFreq: 'monthly',
+        changeFreq: "monthly",
       };
     });
 
@@ -81,43 +80,45 @@ export async function GET() {
     const xml = generateXml(allRoutes);
 
     // For tests return a plain object so tests can inspect `.body` easily
-    if (process.env.NODE_ENV === 'test') {
-      return { body: xml, headers: { 'Content-Type': 'application/xml' } } as any;
+    if (process.env.NODE_ENV === "test") {
+      return new NextResponse(xml, {
+        headers: { "Content-Type": "application/xml" },
+      });
     }
 
     return new NextResponse(xml, {
-      headers: { 'Content-Type': 'application/xml' },
+      headers: { "Content-Type": "application/xml" },
     });
   }
 
   try {
     // Debug: show whether fetch is present/mocked
-    // eslint-disable-next-line no-console
-    console.log('DEBUG fetch in sitemap API:', typeof (globalThis as any).fetch, 'globalIsMock:', !!(globalThis as any).fetch?._isMockFunction);
+
     // Try global fetch first (tests may mock global.fetch)
-    let response: any;
+    let response: Response | undefined;
+
     try {
-      if (typeof (globalThis as any).fetch === 'function') {
-        response = await (globalThis as any).fetch(
+      if (typeof globalThis.fetch === "function") {
+        response = await globalThis.fetch(
           `${process.env.GHOST_API_URL}/ghost/api/content/posts/?key=${process.env.GHOST_API_KEY}&limit=all`,
         );
         // Debug: inspect the result
-        // eslint-disable-next-line no-console
-        console.log('DEBUG sitemap global fetch returned:', response);
+
+        console.log("DEBUG sitemap global fetch returned:", response);
       }
-    } catch (e) {
+    } catch (_e) {
       response = undefined;
     }
 
-    if (!response || typeof response.ok === 'undefined' || !response.ok) {
+    if (!response || typeof response.ok === "undefined" || !response.ok) {
       try {
-        const mod = await import('node-fetch');
-        const nodeFetch = (mod as any).default ?? mod;
-        response = await nodeFetch(
+        const mod = await import("node-fetch");
+        const nodeFetch = mod.default ?? mod;
+        response = await (nodeFetch as unknown as typeof fetch)(
           `${process.env.GHOST_API_URL}/ghost/api/content/posts/?key=${process.env.GHOST_API_KEY}&limit=all`,
         );
       } catch (err) {
-        console.log('Failed to fetch posts from Ghost:', err);
+        console.log("Failed to fetch posts from Ghost:", err);
         return new NextResponse(generateXml(staticRoutes), {
           headers: { "Content-Type": "application/xml" },
         });
@@ -125,13 +126,16 @@ export async function GET() {
     }
 
     if (!response || !response.ok) {
-      console.error(`Failed to fetch posts: ${response?.statusText ?? 'no response'}`);
+      console.error(
+        `Failed to fetch posts: ${response?.statusText ?? "no response"}`,
+      );
       return new NextResponse(generateXml(staticRoutes), {
         headers: { "Content-Type": "application/xml" },
       });
     }
 
     const projectsData = (await response.json()) as ProjectsData;
+
     const projects = projectsData.posts;
 
     // Dynamische Projekt-Routen generieren

app/components/About.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useState, useEffect } from "react";
 import { motion, Variants } from "framer-motion";
 import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb } from "lucide-react";
 
@@ -16,24 +15,18 @@ const staggerContainer: Variants = {
 };
 
 const fadeInUp: Variants = {
-  hidden: { opacity: 0, y: 30 },
+  hidden: { opacity: 0, y: 20 },
   visible: {
     opacity: 1,
     y: 0,
     transition: {
-      duration: 1,
+      duration: 0.5,
       ease: [0.25, 0.1, 0.25, 1],
     },
   },
 };
 
 const About = () => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
   const techStack = [
     {
       category: "Frontend & Mobile",
@@ -64,8 +57,6 @@ const About = () => {
     { icon: Activity, text: "Jogging to clear my mind and stay active" },
   ];
 
-  if (!mounted) return null;
-
   return (
     <section
       id="about"

app/components/BackgroundBlobsClient.tsx

@@ -1,11 +1,17 @@
 "use client";
 
-import dynamic from "next/dynamic";
-import React from "react";
-
-// Dynamically import the heavy framer-motion component on the client only
-const BackgroundBlobs = dynamic(() => import("@/components/BackgroundBlobs"), { ssr: false });
+import React, { useEffect, useState } from "react";
+import BackgroundBlobs from "@/components/BackgroundBlobs";
 
 export default function BackgroundBlobsClient() {
+  // Avoid SSR/webpack bailout issues from `next/dynamic({ ssr:false })`
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
   return <BackgroundBlobs />;
 }

app/components/ChatWidget.tsx

@@ -0,0 +1,491 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  MessageCircle,
+  X,
+  Send,
+  Loader2,
+  Sparkles,
+  Trash2,
+} from "lucide-react";
+
+interface Message {
+  id: string;
+  text: string;
+  sender: "user" | "bot";
+  timestamp: Date;
+  isTyping?: boolean;
+}
+
+export default function ChatWidget() {
+  // Prevent hydration mismatch by only rendering after mount
+  const [mounted, setMounted] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputValue, setInputValue] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [conversationId, setConversationId] = useState<string>("default");
+
+  useEffect(() => {
+    setMounted(true);
+    // Generate or retrieve conversation ID only on client
+    try {
+      const stored = localStorage.getItem("chatSessionId");
+      if (stored) {
+        setConversationId(stored);
+        return;
+      }
+      
+      // Generate UUID with fallback for browsers without crypto.randomUUID
+      let newId: string;
+      if (typeof crypto !== "undefined" && crypto.randomUUID) {
+        newId = crypto.randomUUID();
+      } else {
+        // Fallback UUID generation
+        newId = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+          const r = Math.random() * 16 | 0;
+          const v = c === 'x' ? r : (r & 0x3 | 0x8);
+          return v.toString(16);
+        });
+      }
+      
+      localStorage.setItem("chatSessionId", newId);
+      setConversationId(newId);
+    } catch (error) {
+      // localStorage might be disabled or full
+      if (process.env.NODE_ENV === 'development') {
+        console.warn('Failed to access localStorage for chat session:', error);
+      }
+      setConversationId(`session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`);
+    }
+  }, []);
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  // Focus input when chat opens
+  useEffect(() => {
+    if (isOpen) {
+      inputRef.current?.focus();
+    }
+  }, [isOpen]);
+
+  // Helper function to decode HTML entities
+  const decodeHtmlEntities = (text: string): string => {
+    if (!text || typeof text !== "string") return text;
+    const textarea = document.createElement("textarea");
+    textarea.innerHTML = text;
+    return textarea.value;
+  };
+
+  // Load messages from localStorage
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      try {
+        const stored = localStorage.getItem("chatMessages");
+        if (stored) {
+          try {
+            const parsed = JSON.parse(stored);
+            setMessages(
+              parsed.map((m: Message) => ({
+                ...m,
+                text: decodeHtmlEntities(m.text), // Decode HTML entities when loading
+                timestamp: new Date(m.timestamp),
+              })),
+            );
+          } catch (e) {
+            if (process.env.NODE_ENV === 'development') {
+              console.error("Failed to parse chat history", e);
+            }
+            // Clear corrupted data
+            try {
+              localStorage.removeItem("chatMessages");
+            } catch {
+              // Ignore cleanup errors
+            }
+            // Add welcome message
+            setMessages([
+              {
+                id: "welcome",
+                text: "Hi! I'm Dennis's AI assistant. Ask me anything about his skills, projects, or experience! 🚀",
+                sender: "bot",
+                timestamp: new Date(),
+              },
+            ]);
+          }
+        } else {
+          // Add welcome message
+          setMessages([
+            {
+              id: "welcome",
+              text: "Hi! I'm Dennis's AI assistant. Ask me anything about his skills, projects, or experience! 🚀",
+              sender: "bot",
+              timestamp: new Date(),
+            },
+          ]);
+        }
+      } catch (error) {
+        // localStorage might be disabled
+        if (process.env.NODE_ENV === 'development') {
+          console.warn("Failed to load chat history from localStorage:", error);
+        }
+        // Add welcome message anyway
+        setMessages([
+          {
+            id: "welcome",
+            text: "Hi! I'm Dennis's AI assistant. Ask me anything about his skills, projects, or experience! 🚀",
+            sender: "bot",
+            timestamp: new Date(),
+          },
+        ]);
+      }
+    }
+  }, []);
+
+  // Save messages to localStorage
+  useEffect(() => {
+    if (typeof window !== "undefined" && messages.length > 0) {
+      try {
+        localStorage.setItem("chatMessages", JSON.stringify(messages));
+      } catch (error) {
+        // localStorage might be full or disabled
+        if (process.env.NODE_ENV === 'development') {
+          console.warn("Failed to save chat messages to localStorage:", error);
+        }
+      }
+    }
+  }, [messages]);
+
+  const handleSend = async () => {
+    if (!inputValue.trim() || isLoading) return;
+
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      text: inputValue.trim(),
+      sender: "user",
+      timestamp: new Date(),
+    };
+
+    setMessages((prev) => [...prev, userMessage]);
+    setInputValue("");
+    setIsLoading(true);
+
+    // Get last 10 messages for context
+    const history = messages.slice(-10).map((m) => ({
+      role: m.sender === "user" ? "user" : "assistant",
+      content: m.text,
+    }));
+
+    try {
+      const response = await fetch("/api/n8n/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          message: userMessage.text,
+          conversationId,
+          history,
+        }),
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text().catch(() => "Unknown error");
+        console.error("Chat API error:", {
+          status: response.status,
+          statusText: response.statusText,
+          error: errorText,
+        });
+        throw new Error(
+          `Failed to get response: ${response.status} - ${errorText.substring(0, 100)}`,
+        );
+      }
+
+      const data = await response.json();
+
+      // Log response for debugging (only in development)
+      if (process.env.NODE_ENV === "development") {
+        console.log("Chat API response:", data);
+      }
+
+      // Decode HTML entities in the reply
+      let replyText =
+        data.reply || "Sorry, I couldn't process that. Please try again.";
+
+      // Decode HTML entities client-side (double safety)
+      replyText = decodeHtmlEntities(replyText);
+
+      const botMessage: Message = {
+        id: (Date.now() + 1).toString(),
+        text: replyText,
+        sender: "bot",
+        timestamp: new Date(),
+      };
+
+      setMessages((prev) => [...prev, botMessage]);
+    } catch (error) {
+      console.error("Chat error:", error);
+
+      const errorMessage: Message = {
+        id: (Date.now() + 1).toString(),
+        text: "Sorry, I'm having trouble connecting right now. Please try again later or use the contact form below.",
+        sender: "bot",
+        timestamp: new Date(),
+      };
+
+      setMessages((prev) => [...prev, errorMessage]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const clearChat = () => {
+    // Reset session ID
+    const newId = crypto.randomUUID();
+    setConversationId(newId);
+    if (typeof window !== "undefined") {
+      localStorage.setItem("chatSessionId", newId);
+      localStorage.removeItem("chatMessages");
+    }
+
+    setMessages([
+      {
+        id: "welcome",
+        text: "Conversation restarted! Ask me anything about Dennis! 🚀",
+        sender: "bot",
+        timestamp: new Date(),
+      },
+    ]);
+  };
+
+  // Don't render until mounted to prevent hydration mismatch
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* Chat Button */}
+      <AnimatePresence>
+        {!isOpen && (
+          <motion.div
+            role="button"
+            tabIndex={0}
+            initial={{ scale: 0, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0, opacity: 0 }}
+            onClick={() => setIsOpen(true)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                setIsOpen(true);
+              }
+            }}
+            className="fixed bottom-4 left-4 md:bottom-6 md:left-6 z-30 bg-[#292524] text-[#fdfcf8] p-3.5 rounded-full shadow-[0_8px_20px_rgba(41,37,36,0.25)] hover:bg-[#44403c] hover:scale-105 transition-all duration-300 group cursor-pointer border border-[#f3f1e7]/20 ring-1 ring-[#f3f1e7]/10"
+            aria-label="Open chat"
+          >
+            <MessageCircle size={24} />
+            <span className="absolute top-0 right-0 w-3 h-3 bg-green-500 rounded-full animate-pulse shadow-sm border-2 border-[#292524]" />
+
+            {/* Tooltip */}
+            <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-3 py-1.5 bg-stone-900/90 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-[100] shadow-xl backdrop-blur-sm">
+              Chat with AI
+            </span>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Chat Window */}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            data-chat-widget
+            initial={{ opacity: 0, y: 20, scale: 0.95, filter: "blur(10px)" }}
+            animate={{ opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }}
+            exit={{ opacity: 0, y: 20, scale: 0.95, filter: "blur(10px)" }}
+            transition={{ type: "spring", damping: 30, stiffness: 400 }}
+            className="fixed bottom-20 left-4 right-4 md:bottom-24 md:left-6 md:right-auto z-30 md:w-[380px] h-[60vh] md:h-[550px] max-h-[600px] bg-[#fdfcf8]/95 backdrop-blur-xl saturate-100 rounded-2xl shadow-[0_12px_40px_rgba(41,37,36,0.2)] flex flex-col overflow-hidden border border-[#e7e5e4] ring-1 ring-[#f3f1e7]"
+          >
+            {/* Header */}
+            <div className="bg-[#fdfcf8] text-[#292524] p-4 flex items-center justify-between border-b border-[#e7e5e4]">
+              <div className="flex items-center gap-3">
+                <div className="relative">
+                  <div className="w-10 h-10 rounded-full bg-gradient-to-br from-[#f3f1e7] to-[#fdfcf8] flex items-center justify-center ring-1 ring-[#e7e5e4] shadow-sm">
+                    <Sparkles size={18} className="text-[#57534e]" />
+                  </div>
+                  <span className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 rounded-full border-2 border-[#fdfcf8] shadow-sm" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <h3 className="font-bold text-sm truncate text-stone-900 tracking-tight">
+                    Assistant
+                  </h3>
+                  <p className="text-[11px] font-medium text-stone-500 truncate">
+                    Powered by AI
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-1">
+                <button
+                  onClick={clearChat}
+                  className="p-2 hover:bg-stone-200/40 rounded-full transition-colors text-stone-500 hover:text-red-500"
+                  title="Clear conversation"
+                >
+                  <Trash2 size={16} />
+                </button>
+                <button
+                  onClick={() => setIsOpen(false)}
+                  className="p-2 hover:bg-stone-200/40 rounded-full transition-colors text-stone-500 hover:text-stone-900"
+                  aria-label="Close chat"
+                >
+                  <X size={20} />
+                </button>
+              </div>
+            </div>
+
+            {/* Messages */}
+            <div className="flex-1 overflow-y-auto scrollbar-hide p-4 space-y-4 bg-transparent">
+              {messages.map((message) => (
+                <motion.div
+                  key={message.id}
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}
+                >
+                  <div
+                    className={`max-w-[85%] rounded-2xl px-4 py-3 shadow-sm ${
+                      message.sender === "user"
+                        ? "bg-[#292524] text-[#fdfcf8]"
+                        : "bg-[#f3f1e7] text-[#292524] border border-[#e7e5e4]"
+                    }`}
+                  >
+                    <p className={`text-sm whitespace-pre-wrap break-words leading-relaxed ${
+                      message.sender === "user" ? "text-[#fdfcf8]/90 font-light" : "text-[#292524] font-medium"
+                    }`}>
+                      {message.text}
+                    </p>
+                    <p
+                      className={`text-[10px] mt-1.5 ${
+                        message.sender === "user"
+                          ? "text-stone-400"
+                          : "text-stone-500"
+                      }`}
+                    >
+                      {message.timestamp.toLocaleTimeString([], {
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      })}
+                    </p>
+                  </div>
+                </motion.div>
+              ))}
+
+              {/* Typing Indicator */}
+              {isLoading && (
+                <motion.div
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="flex justify-start"
+                >
+                  <div className="bg-[#f3f1e7] border border-[#e7e5e4] rounded-2xl px-4 py-3 shadow-sm">
+                    <div className="flex gap-1.5">
+                      <motion.div
+                        className="w-1.5 h-1.5 bg-stone-500 rounded-full"
+                        animate={{ y: [0, -6, 0] }}
+                        transition={{
+                          duration: 0.6,
+                          repeat: Infinity,
+                          delay: 0,
+                        }}
+                      />
+                      <motion.div
+                        className="w-1.5 h-1.5 bg-stone-500 rounded-full"
+                        animate={{ y: [0, -6, 0] }}
+                        transition={{
+                          duration: 0.6,
+                          repeat: Infinity,
+                          delay: 0.1,
+                        }}
+                      />
+                      <motion.div
+                        className="w-1.5 h-1.5 bg-stone-500 rounded-full"
+                        animate={{ y: [0, -6, 0] }}
+                        transition={{
+                          duration: 0.6,
+                          repeat: Infinity,
+                          delay: 0.2,
+                        }}
+                      />
+                    </div>
+                  </div>
+                </motion.div>
+              )}
+
+              <div ref={messagesEndRef} />
+            </div>
+
+            {/* Input */}
+            <div className="p-4 bg-[#fdfcf8] border-t border-[#e7e5e4]">
+              <div className="flex gap-2">
+                <input
+                  ref={inputRef}
+                  type="text"
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                  onKeyPress={handleKeyPress}
+                  placeholder="Ask anything..."
+                  disabled={isLoading}
+                  className="flex-1 px-4 py-3 text-sm bg-[#f5f5f4] text-[#292524] rounded-xl border border-[#e7e5e4] focus:outline-none focus:ring-2 focus:ring-[#e7e5e4] focus:border-[#a8a29e] focus:bg-[#fdfcf8] disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-[#78716c] transition-all shadow-inner"
+                />
+                <button
+                  onClick={handleSend}
+                  disabled={!inputValue.trim() || isLoading}
+                  className="p-3 bg-[#292524] text-[#fdfcf8] rounded-xl hover:bg-[#44403c] hover:shadow-lg hover:scale-105 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 shadow-md flex items-center justify-center aspect-square"
+                  aria-label="Send message"
+                >
+                  {isLoading ? (
+                    <Loader2 size={18} className="animate-spin" />
+                  ) : (
+                    <Send size={18} />
+                  )}
+                </button>
+              </div>
+
+              {/* Quick Actions */}
+              <div className="flex gap-2 mt-3 overflow-x-auto pb-1 scrollbar-hide mask-fade-right">
+                {[
+                  "Skills 🛠️",
+                  "Projects 🚀",
+                  "Contact 📧",
+                ].map((suggestion, index) => (
+                  <button
+                    key={index}
+                    onClick={() => {
+                      setInputValue(suggestion.replace(/ .*/, '')); // Strip emoji for search if needed, or keep
+                      inputRef.current?.focus();
+                    }}
+                    disabled={isLoading}
+                    className="px-3 py-1.5 text-xs font-medium bg-[#f5f5f4] text-[#57534e] rounded-lg hover:bg-[#e7e5e4] hover:text-[#292524] border border-[#e7e5e4] transition-all whitespace-nowrap disabled:opacity-50 flex-shrink-0 shadow-sm"
+                  >
+                    {suggestion}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}

app/components/ClientOnly.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 
-export function ClientOnly({ children }: { children: React.ReactNode }) {
+export default function ClientOnly({ children }: { children: React.ReactNode }) {
   const [hasMounted, setHasMounted] = useState(false);
 
   useEffect(() => {

app/components/ClientProviders.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import dynamic from "next/dynamic";
+import { ToastProvider } from "@/components/Toast";
+import ErrorBoundary from "@/components/ErrorBoundary";
+import { AnalyticsProvider } from "@/components/AnalyticsProvider";
+
+// Dynamic import with SSR disabled to avoid framer-motion issues
+const BackgroundBlobs = dynamic(() => import("@/components/BackgroundBlobs").catch(() => ({ default: () => null })), {
+  ssr: false,
+  loading: () => null,
+});
+
+const ChatWidget = dynamic(() => import("./ChatWidget").catch(() => ({ default: () => null })), {
+  ssr: false,
+  loading: () => null,
+});
+
+export default function ClientProviders({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [mounted, setMounted] = useState(false);
+  const [is404Page, setIs404Page] = useState(false);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    setMounted(true);
+    // Check if we're on a 404 page by looking for the data attribute or pathname
+    const check404 = () => {
+      try {
+        if (typeof window !== "undefined" && typeof document !== "undefined") {
+          const has404Component = document.querySelector('[data-404-page]');
+          const is404Path = pathname === '/404' || (window.location && (window.location.pathname === '/404' || window.location.pathname.includes('404')));
+          setIs404Page(!!has404Component || is404Path);
+        }
+      } catch (error) {
+        // Silently fail - 404 detection is not critical
+        if (process.env.NODE_ENV === 'development') {
+          console.warn('Error checking 404 status:', error);
+        }
+      }
+    };
+    // Check immediately and after a short delay
+    try {
+      check404();
+      const timeout = setTimeout(check404, 100);
+      const interval = setInterval(check404, 500);
+      return () => {
+        try {
+          clearTimeout(timeout);
+          clearInterval(interval);
+        } catch {
+          // Silently fail during cleanup
+        }
+      };
+    } catch (error) {
+      // If setup fails, just return empty cleanup
+      if (process.env.NODE_ENV === 'development') {
+        console.warn('Error setting up 404 check:', error);
+      }
+      return () => {};
+    }
+  }, [pathname]);
+
+  // Wrap in multiple error boundaries to isolate failures
+  return (
+    <ErrorBoundary>
+      <ErrorBoundary>
+        <AnalyticsProvider>
+          <ErrorBoundary>
+            <ToastProvider>
+              {mounted && <BackgroundBlobs />}
+              <div className="relative z-10">{children}</div>
+              {mounted && !is404Page && <ChatWidget />}
+            </ToastProvider>
+          </ErrorBoundary>
+        </AnalyticsProvider>
+      </ErrorBoundary>
+    </ErrorBoundary>
+  );
+}

app/components/Contact.tsx

@@ -155,10 +155,10 @@ const Contact = () => {
       <div className="max-w-7xl mx-auto">
         {/* Section Header */}
         <motion.div
-          initial={{ opacity: 0, y: 30 }}
+          initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true, margin: "-100px" }}
-          transition={{ duration: 1, ease: [0.25, 0.1, 0.25, 1] }}
+          viewport={{ once: true, margin: "-50px" }}
+          transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
           className="text-center mb-16"
         >
           <h2 className="text-4xl md:text-5xl font-bold mb-6 text-stone-900">
@@ -173,10 +173,10 @@ const Contact = () => {
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
           {/* Contact Information */}
           <motion.div
-            initial={{ opacity: 0, x: -30 }}
+            initial={{ opacity: 0, x: -20 }}
             whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true, margin: "-100px" }}
-            transition={{ duration: 1, ease: [0.25, 0.1, 0.25, 1] }}
+            viewport={{ once: true, margin: "-50px" }}
+            transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
             className="space-y-8"
           >
             <div>
@@ -196,12 +196,12 @@ const Contact = () => {
                 <motion.a
                   key={info.title}
                   href={info.href}
-                  initial={{ opacity: 0, x: -20 }}
+                  initial={{ opacity: 0, x: -10 }}
                   whileInView={{ opacity: 1, x: 0 }}
-                  viewport={{ once: true }}
+                  viewport={{ once: true, margin: "-50px" }}
                   transition={{
-                    duration: 0.8,
-                    delay: index * 0.15,
+                    duration: 0.5,
+                    delay: index * 0.1,
                     ease: [0.25, 0.1, 0.25, 1],
                   }}
                   whileHover={{
@@ -226,10 +226,10 @@ const Contact = () => {
 
           {/* Contact Form */}
           <motion.div
-            initial={{ opacity: 0, x: 30 }}
+            initial={{ opacity: 0, x: 20 }}
             whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true, margin: "-100px" }}
-            transition={{ duration: 1, ease: [0.25, 0.1, 0.25, 1] }}
+            viewport={{ once: true, margin: "-50px" }}
+            transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
             className="glass-card p-8 rounded-3xl bg-white/50 border border-white/70"
           >
             <h3 className="text-2xl font-bold text-gray-800 mb-6">

app/components/Footer.tsx

@@ -30,10 +30,10 @@ const Footer = () => {
         <div className="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0">
           {/* Brand */}
           <motion.div
-            initial={{ opacity: 0, y: 20 }}
+            initial={{ opacity: 0, y: 10 }}
             whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.6 }}
+            viewport={{ once: true, margin: "-50px" }}
+            transition={{ duration: 0.4 }}
             className="flex items-center space-x-3"
           >
             <motion.div
@@ -53,10 +53,10 @@ const Footer = () => {
 
           {/* Social Links */}
           <motion.div
-            initial={{ opacity: 0, y: 20 }}
+            initial={{ opacity: 0, y: 10 }}
             whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.6, delay: 0.1 }}
+            viewport={{ once: true, margin: "-50px" }}
+            transition={{ duration: 0.4, delay: 0.05 }}
             className="flex space-x-3"
           >
             {socialLinks.map((social) => (
@@ -77,10 +77,10 @@ const Footer = () => {
 
           {/* Copyright */}
           <motion.div
-            initial={{ opacity: 0, y: 20 }}
+            initial={{ opacity: 0, y: 10 }}
             whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.6, delay: 0.2 }}
+            viewport={{ once: true, margin: "-50px" }}
+            transition={{ duration: 0.4, delay: 0.1 }}
             className="flex items-center space-x-2 text-stone-400 text-sm"
           >
             <span>© {currentYear}</span>
@@ -96,10 +96,10 @@ const Footer = () => {
 
         {/* Legal Links */}
         <motion.div
-          initial={{ opacity: 0, y: 20 }}
+          initial={{ opacity: 0, y: 10 }}
           whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.6, delay: 0.3 }}
+          viewport={{ once: true, margin: "-50px" }}
+          transition={{ duration: 0.4, delay: 0.15 }}
           className="mt-8 pt-6 border-t border-stone-100 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0"
         >
           <div className="flex space-x-6 text-sm">
@@ -115,6 +115,13 @@ const Footer = () => {
             >
               Privacy Policy
             </Link>
+            <Link
+              href="/404"
+              className="text-stone-500 hover:text-stone-800 transition-colors duration-200 font-mono text-xs"
+              title="Kernel Panic 404"
+            >
+              404
+            </Link>
           </div>
           
           <div className="text-xs text-stone-400 flex items-center space-x-1">

app/components/Header.tsx

@@ -12,7 +12,10 @@ const Header = () => {
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    setMounted(true);
+    // Use requestAnimationFrame to ensure smooth transition
+    requestAnimationFrame(() => {
+      setMounted(true);
+    });
   }, []);
 
   useEffect(() => {
@@ -41,17 +44,16 @@ const Header = () => {
     { icon: Mail, href: "mailto:contact@dk0.dev", label: "Email" },
   ];
 
-  if (!mounted) {
-    return null;
-  }
+  // Always render to prevent flash, but use opacity transition
 
   return (
     <>
       <motion.header
-        initial={{ y: -100, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        transition={{ duration: 0.8, ease: "easeOut" }}
+        initial={false}
+        animate={{ y: 0, opacity: mounted ? 1 : 0 }}
+        transition={{ duration: 0.3, ease: "easeOut" }}
         className="fixed top-6 left-0 right-0 z-50 flex justify-center px-4 pointer-events-none"
+        style={{ opacity: mounted ? 1 : 0 }}
       >
         <div
           className={`pointer-events-auto transition-all duration-500 ease-out ${
@@ -59,9 +61,9 @@ const Header = () => {
           }`}
         >
           <motion.div
-            initial={{ opacity: 0, y: -20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.2, ease: "easeOut" }}
+            initial={false}
+            animate={{ opacity: mounted ? 1 : 0, y: 0 }}
+            transition={{ duration: 0.3, ease: "easeOut" }}
             className={`
             backdrop-blur-xl transition-all duration-500
             ${
@@ -78,9 +80,9 @@ const Header = () => {
             >
               <Link
                 href="/"
-                className="text-2xl font-bold font-mono text-stone-800 tracking-tighter liquid-hover"
+                className="text-2xl font-black font-sans text-stone-900 tracking-tighter liquid-hover flex items-center"
               >
-                dk<span className="text-liquid-rose">0</span>
+                dk<span className="text-red-500">0</span>
               </Link>
             </motion.div>
 

app/components/Hero.tsx

@@ -1,35 +1,16 @@
 "use client";
 
-import { useState, useEffect } from "react";
 import { motion } from "framer-motion";
 import { ArrowDown, Code, Zap, Rocket } from "lucide-react";
 import Image from "next/image";
 
 const Hero = () => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
   const features = [
     { icon: Code, text: "Next.js & Flutter" },
     { icon: Zap, text: "Docker Swarm & CI/CD" },
     { icon: Rocket, text: "Self-Hosted Infrastructure" },
   ];
 
-  // Smooth scroll configuration
-  const smoothTransition = {
-    type: "spring",
-    damping: 30,
-    stiffness: 50,
-    mass: 1,
-  };
-
-  if (!mounted) {
-    return null;
-  }
-
   return (
     <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-32 pb-16 bg-gradient-to-br from-liquid-mint/10 via-liquid-lavender/10 to-liquid-rose/10">
       <div className="relative z-10 text-center px-4 max-w-5xl mx-auto">
@@ -37,7 +18,7 @@ const Hero = () => {
         <motion.div
           initial={{ opacity: 0, scale: 0.9 }}
           animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 1.2, delay: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
+          transition={{ duration: 0.6, delay: 0.1, ease: [0.25, 0.1, 0.25, 1] }}
           className="mb-12 flex justify-center relative z-20"
         >
           <div className="relative w-64 h-64 md:w-80 md:h-80 flex items-center justify-center">
@@ -119,11 +100,11 @@ const Hero = () => {
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 1, delay: 0.8, ease: "easeOut" }}
+              transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }}
               className="absolute -bottom-8 left-1/2 -translate-x-1/2 z-30"
             >
-              <div className="px-6 py-2.5 rounded-full glass-panel text-stone-700 font-mono text-sm tracking-wider shadow-lg backdrop-blur-xl border border-white/50">
-                dk<span className="text-liquid-rose font-bold">0</span>.dev
+              <div className="px-6 py-2.5 rounded-full glass-panel text-stone-800 font-sans font-bold text-sm tracking-wide shadow-lg backdrop-blur-xl border border-white/50">
+                dk<span className="text-red-500 font-extrabold">0</span>.dev
               </div>
             </motion.div>
 
@@ -131,7 +112,7 @@ const Hero = () => {
             <motion.div
               initial={{ scale: 0, opacity: 0 }}
               animate={{ scale: 1, opacity: 1 }}
-              transition={{ delay: 1.2, duration: 0.8, ease: "easeOut" }}
+              transition={{ delay: 0.4, duration: 0.5, ease: "easeOut" }}
               whileHover={{ scale: 1.1, rotate: 5 }}
               className="absolute -top-4 right-0 md:-right-4 p-3 bg-white/95 backdrop-blur-md shadow-lg rounded-full text-stone-700 z-30"
             >
@@ -140,7 +121,7 @@ const Hero = () => {
             <motion.div
               initial={{ scale: 0, opacity: 0 }}
               animate={{ scale: 1, opacity: 1 }}
-              transition={{ delay: 1.4, duration: 0.8, ease: "easeOut" }}
+              transition={{ delay: 0.5, duration: 0.5, ease: "easeOut" }}
               whileHover={{ scale: 1.1, rotate: -5 }}
               className="absolute bottom-4 -left-4 md:-left-8 p-3 bg-white/95 backdrop-blur-md shadow-lg rounded-full text-stone-700 z-30"
             >
@@ -153,7 +134,7 @@ const Hero = () => {
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1, delay: 0.6, ease: [0.25, 0.1, 0.25, 1] }}
+          transition={{ duration: 0.6, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
           className="mb-8 flex flex-col items-center justify-center relative"
         >
           <h1 className="text-5xl md:text-8xl font-bold tracking-tighter text-stone-900 mb-2">
@@ -168,7 +149,7 @@ const Hero = () => {
         <motion.p
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1, delay: 0.9, ease: [0.25, 0.1, 0.25, 1] }}
+          transition={{ duration: 0.6, delay: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
           className="text-lg md:text-xl text-stone-700 mb-12 max-w-2xl mx-auto leading-relaxed"
         >
           Student and passionate{" "}
@@ -190,7 +171,7 @@ const Hero = () => {
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1, delay: 1.1, ease: [0.25, 0.1, 0.25, 1] }}
+          transition={{ duration: 0.6, delay: 0.4, ease: [0.25, 0.1, 0.25, 1] }}
           className="flex flex-wrap justify-center gap-4 mb-12"
         >
           {features.map((feature, index) => (
@@ -199,8 +180,8 @@ const Hero = () => {
               initial={{ opacity: 0, scale: 0.9 }}
               animate={{ opacity: 1, scale: 1 }}
               transition={{
-                duration: 0.8,
-                delay: 1.3 + index * 0.15,
+                duration: 0.5,
+                delay: 0.5 + index * 0.1,
                 ease: [0.25, 0.1, 0.25, 1],
               }}
               whileHover={{ scale: 1.03, y: -3 }}
@@ -218,7 +199,7 @@ const Hero = () => {
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1, delay: 1.6, ease: [0.25, 0.1, 0.25, 1] }}
+          transition={{ duration: 0.6, delay: 0.6, ease: [0.25, 0.1, 0.25, 1] }}
           className="flex flex-col sm:flex-row gap-5 justify-center items-center"
         >
           <motion.a

app/components/KernelPanic404Wrapper.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function KernelPanic404Wrapper() {
+  useEffect(() => {
+    // Ensure body and html don't interfere
+    document.body.style.background = "#020202";
+    document.body.style.color = "#33ff00";
+    document.documentElement.style.background = "#020202";
+    document.documentElement.style.color = "#33ff00";
+    
+    return () => {
+      // Cleanup
+      document.body.style.background = "";
+      document.body.style.color = "";
+      document.documentElement.style.background = "";
+      document.documentElement.style.color = "";
+    };
+  }, []);
+
+  return (
+    <iframe
+      src="/404-terminal.html"
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100vw",
+        height: "100vh",
+        border: "none",
+        zIndex: 9999,
+        margin: 0,
+        padding: 0,
+        backgroundColor: "#020202",
+      }}
+      data-404-page="true"
+      allowTransparency={false}
+    />
+  );
+}

app/components/Projects.tsx

@@ -2,23 +2,17 @@
 
 import { useState, useEffect } from "react";
 import { motion, Variants } from "framer-motion";
-import {
-  ExternalLink,
-  Github,
-  Calendar,
-  Layers,
-  ArrowRight,
-} from "lucide-react";
+import { ExternalLink, Github, ArrowRight, Calendar } from "lucide-react";
 import Link from "next/link";
 import Image from "next/image";
 
 const fadeInUp: Variants = {
-  hidden: { opacity: 0, y: 40 },
+  hidden: { opacity: 0, y: 20 },
   visible: {
     opacity: 1,
     y: 0,
     transition: {
-      duration: 0.8,
+      duration: 0.5,
       ease: [0.25, 0.1, 0.25, 1],
     },
   },
@@ -50,11 +44,9 @@ interface Project {
 }
 
 const Projects = () => {
-  const [mounted, setMounted] = useState(false);
   const [projects, setProjects] = useState<Project[]>([]);
 
   useEffect(() => {
-    setMounted(true);
     const loadProjects = async () => {
       try {
         const response = await fetch(
@@ -64,8 +56,8 @@ const Projects = () => {
           const data = await response.json();
           setProjects(data.projects || []);
         }
-      } catch (error) {
-        if (process.env.NODE_ENV === 'development') {
+        } catch (error) {
+        if (process.env.NODE_ENV === "development") {
           console.error("Error loading projects:", error);
         }
       }
@@ -73,8 +65,6 @@ const Projects = () => {
     loadProjects();
   }, []);
 
-  if (!mounted) return null;
-
   return (
     <section
       id="projects"
@@ -84,7 +74,7 @@ const Projects = () => {
         <motion.div
           initial="hidden"
           whileInView="visible"
-          viewport={{ once: true, margin: "-100px" }}
+          viewport={{ once: true, margin: "-50px" }}
           variants={fadeInUp}
           className="text-center mb-20"
         >
@@ -100,58 +90,80 @@ const Projects = () => {
         <motion.div
           initial="hidden"
           whileInView="visible"
-          viewport={{ once: true, margin: "-100px" }}
+          viewport={{ once: true, margin: "-50px" }}
           variants={staggerContainer}
           className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
         >
-          {projects.map((project, index) => (
+          {projects.map((project) => (
             <motion.div
               key={project.id}
               variants={fadeInUp}
-              whileHover={{
-                y: -12,
-                transition: { duration: 0.5, ease: "easeOut" },
-              }}
-              className="group relative flex flex-col bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-700 ease-out border border-stone-100 hover:border-stone-200"
+              whileHover={{ y: -8 }}
+              className="group flex flex-col bg-white/40 backdrop-blur-xl rounded-2xl overflow-hidden border border-white/60 shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)] transition-all duration-500"
             >
-              {/* Project Cover / Header */}
-              <div className="relative aspect-[4/3] overflow-hidden bg-gradient-to-br from-stone-50 to-stone-100">
+              {/* Project Cover / Image Area */}
+              <div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
                 {project.imageUrl ? (
-                  <Image
-                    src={project.imageUrl}
-                    alt={project.title}
-                    fill
-                    className="object-cover transition-transform duration-1000 ease-out group-hover:scale-110"
-                  />
+                  <>
+                    <Image
+                      src={project.imageUrl}
+                      alt={project.title}
+                      fill
+                      className="object-cover transition-transform duration-1000 ease-out group-hover:scale-110"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-stone-900/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                  </>
                 ) : (
-                  <div className="absolute inset-0 bg-gradient-to-br from-stone-100 to-stone-200 flex items-center justify-center p-8 group-hover:from-stone-50 group-hover:to-stone-100 transition-colors duration-700 ease-out">
-                    <div className="w-full h-full border-2 border-dashed border-stone-300 rounded-xl flex items-center justify-center">
-                      <Layers className="text-stone-300 w-12 h-12" />
+                  <div className="absolute inset-0 bg-stone-200 flex items-center justify-center overflow-hidden">
+                    <div className="absolute inset-0 bg-gradient-to-br from-stone-300 via-stone-200 to-stone-300" />
+                    <div className="absolute top-[-20%] left-[-10%] w-[70%] h-[70%] bg-white/20 rounded-full blur-3xl animate-pulse" />
+                    <div className="absolute bottom-[-10%] right-[-5%] w-[60%] h-[60%] bg-stone-400/10 rounded-full blur-2xl" />
+                    
+                    <div className="relative z-10">
+                      <span className="text-7xl font-serif font-black text-stone-800/10 group-hover:text-stone-800/20 transition-all duration-700 select-none tracking-tighter">
+                        {project.title.charAt(0)}
+                      </span>
+                    </div>
+                  </div>
+                )}
+
+                {/* Texture/Grain Overlay */}
+                <div className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-overlay bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" />
+
+                {/* Animated Shine Effect */}
+                <div className="absolute inset-0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-in-out bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-[-20deg] pointer-events-none" />
+
+                {/* Featured Badge */}
+                {project.featured && (
+                  <div className="absolute top-3 left-3 z-20">
+                    <div className="px-3 py-1 bg-[#292524]/80 backdrop-blur-md text-[#fdfcf8] text-[10px] font-bold uppercase tracking-widest rounded-full shadow-sm border border-white/10">
+                      Featured
                     </div>
-                    <div className="absolute inset-0 bg-gradient-to-tr from-liquid-mint/10 via-transparent to-liquid-rose/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                   </div>
                 )}
 
                 {/* Overlay Links */}
-                <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-700 ease-out flex items-center justify-center gap-4 backdrop-blur-sm">
+                <div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-20 pointer-events-none">
                   {project.github && (
                     <a
                       href={project.github}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="p-3 bg-white rounded-full text-stone-900 hover:scale-110 transition-all duration-500 ease-out hover:shadow-lg"
+                      className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50 pointer-events-auto"
                       aria-label="GitHub"
+                      onClick={(e) => e.stopPropagation()}
                     >
                       <Github size={20} />
                     </a>
                   )}
-                  {project.live && (
+                  {project.live && !project.title.toLowerCase().includes('kernel panic') && (
                     <a
                       href={project.live}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="p-3 bg-white rounded-full text-stone-900 hover:scale-110 transition-all duration-500 ease-out hover:shadow-lg"
+                      className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50 pointer-events-auto"
                       aria-label="Live Demo"
+                      onClick={(e) => e.stopPropagation()}
                     >
                       <ExternalLink size={20} />
                     </a>
@@ -160,47 +172,67 @@ const Projects = () => {
               </div>
 
               {/* Content */}
-              <div className="flex flex-col flex-1 p-6">
-                <div className="flex justify-between items-start mb-3">
-                  <h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-700 transition-colors duration-500">
+              <div className="p-6 flex flex-col flex-1">
+                {/* Stretched Link covering the whole card (including image area) */}
+                <Link
+                  href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
+                  className="absolute inset-0 z-10"
+                  aria-label={`View project ${project.title}`}
+                />
+
+                <div className="flex items-center justify-between mb-3">
+                  <h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-600 transition-colors">
                     {project.title}
                   </h3>
-                  <span className="text-xs font-mono text-stone-400 bg-stone-100 px-2 py-1 rounded">
-                    {new Date(project.date).getFullYear()}
-                  </span>
+                  <div className="flex items-center space-x-2 text-stone-400 text-xs font-mono bg-white/50 px-2 py-1 rounded border border-stone-100">
+                    <Calendar size={12} />
+                    <span>{new Date(project.date).getFullYear()}</span>
+                  </div>
                 </div>
 
-                <p className="text-stone-700 text-sm leading-relaxed mb-6 line-clamp-3 flex-1">
+                <p className="text-stone-600 mb-6 leading-relaxed line-clamp-3 text-sm flex-1">
                   {project.description}
                 </p>
 
-                <div className="space-y-4 mt-auto">
-                  <div className="flex flex-wrap gap-2">
-                    {project.tags.slice(0, 3).map((tag, tIdx) => (
-                      <span
-                        key={`${project.id}-${tag}-${tIdx}`}
-                        className="text-xs px-2.5 py-1 bg-stone-50 border border-stone-100 rounded-md text-stone-600 font-medium hover:bg-stone-100 hover:border-stone-200 transition-all duration-400 ease-out"
-                      >
-                        {tag}
-                      </span>
-                    ))}
-                    {project.tags.length > 3 && (
-                      <span className="text-xs px-2 py-1 text-stone-400">
-                        + {project.tags.length - 3}
-                      </span>
-                    )}
-                  </div>
+                <div className="flex flex-wrap gap-2 mb-6">
+                  {project.tags.slice(0, 4).map((tag) => (
+                    <span
+                      key={tag}
+                      className="px-2.5 py-1 bg-white/60 border border-stone-100 text-stone-600 text-xs font-medium rounded-md"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                  {project.tags.length > 4 && (
+                    <span className="px-2 py-1 text-stone-400 text-xs">+ {project.tags.length - 4}</span>
+                  )}
+                </div>
 
-                  <Link
-                    href={`/projects/${project.title.toLowerCase().replace(/\s+/g, "-")}`}
-                    className="inline-flex items-center text-sm font-semibold text-stone-900 hover:gap-3 transition-all duration-500 ease-out group/link"
-                  >
-                    Read more{" "}
-                    <ArrowRight
-                      size={16}
-                      className="ml-1 transition-transform duration-500 ease-out group-hover/link:translate-x-2"
-                    />
-                  </Link>
+                <div className="mt-auto pt-4 border-t border-stone-100 flex items-center justify-between relative z-20">
+                   <div className="flex gap-3">
+                      {project.github && (
+                        <a 
+                          href={project.github} 
+                          target="_blank" 
+                          rel="noopener noreferrer" 
+                          className="text-stone-400 hover:text-stone-900 transition-colors relative z-20 hover:scale-110" 
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <Github size={18} />
+                        </a>
+                      )}
+                      {project.live && !project.title.toLowerCase().includes('kernel panic') && (
+                         <a 
+                           href={project.live} 
+                           target="_blank" 
+                           rel="noopener noreferrer" 
+                           className="text-stone-400 hover:text-stone-900 transition-colors relative z-20 hover:scale-110" 
+                           onClick={(e) => e.stopPropagation()}
+                         >
+                           <ExternalLink size={18} />
+                         </a>
+                      )}
+                   </div>
                 </div>
               </div>
             </motion.div>

app/components/RootProviders.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+
+// Lazy load providers to avoid webpack module resolution issues
+const AnalyticsProvider = React.lazy(() =>
+  import("@/components/AnalyticsProvider").then((mod) => ({
+    default: mod.AnalyticsProvider,
+  }))
+);
+
+const ToastProvider = React.lazy(() =>
+  import("@/components/Toast").then((mod) => ({
+    default: mod.ToastProvider,
+  }))
+);
+
+const BackgroundBlobs = React.lazy(() =>
+  import("@/components/BackgroundBlobs")
+);
+
+const ChatWidget = React.lazy(() => import("./ChatWidget"));
+
+export default function RootProviders({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return <div className="relative z-10">{children}</div>;
+  }
+
+  return (
+    <React.Suspense fallback={<div className="relative z-10">{children}</div>}>
+      <AnalyticsProvider>
+        <ToastProvider>
+          <BackgroundBlobs />
+          <div className="relative z-10">{children}</div>
+          <ChatWidget />
+        </ToastProvider>
+      </AnalyticsProvider>
+    </React.Suspense>
+  );
+}
+

app/global-error.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useEffect } from "react";
+
 export default function GlobalError({
   error,
   reset,
@@ -7,14 +9,37 @@ export default function GlobalError({
   error: Error & { digest?: string };
   reset: () => void;
 }) {
+  useEffect(() => {
+    // Log error details to console
+    console.error("Global Error:", error);
+    console.error("Error Name:", error.name);
+    console.error("Error Message:", error.message);
+    console.error("Error Stack:", error.stack);
+    console.error("Error Digest:", error.digest);
+  }, [error]);
+
   return (
     <html>
       <body>
-        <div className="flex flex-col items-center justify-center h-screen gap-4">
-          <h2>Critical System Error</h2>
-          <button onClick={() => reset()}>Restart App</button>
+        <div className="flex flex-col items-center justify-center h-screen gap-4 p-4">
+          <h2 className="text-2xl font-bold text-red-600">
+            Critical System Error
+          </h2>
+          <div className="bg-red-50 border border-red-200 rounded p-4 max-w-2xl">
+            <p className="font-semibold mb-2">Error Type: {error.name}</p>
+            <p className="text-sm mb-2">Message: {error.message}</p>
+            {error.digest && (
+              <p className="text-xs text-gray-600">Digest: {error.digest}</p>
+            )}
+          </div>
+          <button
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+            onClick={() => reset()}
+          >
+            Restart App
+          </button>
         </div>
       </body>
     </html>
   );
-}
+}

app/globals.css

@@ -80,7 +80,7 @@ html {
         0 20px 25px -5px rgba(0, 0, 0, 0.08),
         0 10px 10px -5px rgba(0, 0, 0, 0.02),
         inset 0 0 20px rgba(255, 255, 255, 0.8);
-    transform: translateY(-4px) scale(1.005);
+    transform: translateY(-4px);
     border-color: #ffffff;
 }
 
@@ -103,9 +103,6 @@ div {
     color: #44403c;
 }
 
-/* Utility for the liquid melt effect container */
-/* Liquid container removed - no filters applied */
-
 /* Hide scrollbar but keep functionality */
 ::-webkit-scrollbar {
     width: 8px;
@@ -121,6 +118,14 @@ div {
     background: #a8a29e;
 }
 
+.scrollbar-hide::-webkit-scrollbar {
+    display: none;
+}
+.scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
 /* Animations */
 @keyframes float {
     0%,
@@ -137,18 +142,6 @@ div {
     will-change: transform;
 }
 
-@keyframes liquid-pulse {
-    0% {
-        transform: scale(1);
-    }
-    50% {
-        transform: scale(1.05);
-    }
-    100% {
-        transform: scale(1);
-    }
-}
-
 /* Liquid Blobs Background */
 .liquid-bg-blob {
     position: absolute;
@@ -180,3 +173,43 @@ div {
 .markdown pre {
     @apply bg-stone-900 text-stone-50 p-4 rounded-xl overflow-x-auto mb-6;
 }
+
+/* Admin Dashboard Styles - Organic Modern */
+.animated-bg {
+    background: #fdfcf8;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+}
+
+.admin-glass {
+    background: rgba(253, 252, 248, 0.9);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-bottom: 1px solid #e7e5e4;
+    color: #292524;
+}
+
+.admin-glass-light {
+    background: #ffffff;
+    border: 1px solid #e7e5e4;
+    color: #292524;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+}
+
+.admin-glass-light:hover {
+    background: #fdfcf8;
+    border-color: #d6d3d1;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+}
+
+.admin-glass-card {
+    background: #ffffff;
+    border: 1px solid #e7e5e4;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+    color: #292524;
+}

app/layout.tsx

@@ -2,10 +2,7 @@ import "./globals.css";
 import { Metadata } from "next";
 import { Inter } from "next/font/google";
 import React from "react";
-import { ToastProvider } from "@/components/Toast";
-import { AnalyticsProvider } from "@/components/AnalyticsProvider";
-import { ClientOnly } from "./components/ClientOnly";
-import BackgroundBlobsClient from "./components/BackgroundBlobsClient";
+import ClientProviders from "./components/ClientProviders";
 
 const inter = Inter({
   variable: "--font-inter",
@@ -28,15 +25,8 @@ export default function RootLayout({
         <meta charSet="utf-8" />
         <title>Dennis Konkol&#39;s Portfolio</title>
       </head>
-      <body className={inter.variable}>
-        <AnalyticsProvider>
-          <ToastProvider>
-            <ClientOnly>
-              <BackgroundBlobsClient />
-            </ClientOnly>
-            <div className="relative z-10">{children}</div>
-          </ToastProvider>
-        </AnalyticsProvider>
+      <body className={inter.variable} suppressHydrationWarning>
+        <ClientProviders>{children}</ClientProviders>
       </body>
     </html>
   );

app/manage/page.tsx

@@ -57,25 +57,42 @@ const AdminPage = () => {
 
   // Check if user is locked out
   const checkLockout = useCallback(() => {
-    const lockoutData = localStorage.getItem('admin_lockout');
-    if (lockoutData) {
-      try {
-        const { timestamp, attempts } = JSON.parse(lockoutData);
-        const now = Date.now();
+    if (typeof window === 'undefined') return false;
+    
+    try {
+      const lockoutData = localStorage.getItem('admin_lockout');
+      if (lockoutData) {
+        try {
+          const { timestamp, attempts } = JSON.parse(lockoutData);
+          const now = Date.now();
 
-        if (now - timestamp < LOCKOUT_DURATION) {
-          setAuthState(prev => ({
-            ...prev,
-            isLocked: true,
-            attempts,
-            isLoading: false
-          }));
-          return true;
-        } else {
-          localStorage.removeItem('admin_lockout');
+          if (now - timestamp < LOCKOUT_DURATION) {
+            setAuthState(prev => ({
+              ...prev,
+              isLocked: true,
+              attempts,
+              isLoading: false
+            }));
+            return true;
+          } else {
+            try {
+              localStorage.removeItem('admin_lockout');
+            } catch {
+              // Ignore errors
+            }
+          }
+        } catch {
+          try {
+            localStorage.removeItem('admin_lockout');
+          } catch {
+            // Ignore errors
+          }
         }
-      } catch {
-        localStorage.removeItem('admin_lockout');
+      }
+    } catch (error) {
+      // localStorage might be disabled
+      if (process.env.NODE_ENV === 'development') {
+        console.warn('Failed to check lockout status:', error);
       }
     }
     return false;
@@ -197,7 +214,11 @@ const AdminPage = () => {
           attempts: 0,
           isLoading: false
         }));
-        localStorage.removeItem('admin_lockout');
+        try {
+          localStorage.removeItem('admin_lockout');
+        } catch {
+          // Ignore errors
+        }
       } else {
         const newAttempts = authState.attempts + 1;
         setAuthState(prev => ({
@@ -208,10 +229,17 @@ const AdminPage = () => {
         }));
 
         if (newAttempts >= 5) {
-          localStorage.setItem('admin_lockout', JSON.stringify({
-            timestamp: Date.now(),
-            attempts: newAttempts
-          }));
+          try {
+            localStorage.setItem('admin_lockout', JSON.stringify({
+              timestamp: Date.now(),
+              attempts: newAttempts
+            }));
+          } catch (error) {
+            // localStorage might be full or disabled
+            if (process.env.NODE_ENV === 'development') {
+              console.warn('Failed to save lockout data:', error);
+            }
+          }
           setAuthState(prev => ({
             ...prev,
             isLocked: true,
@@ -231,10 +259,10 @@ const AdminPage = () => {
   // Loading state
   if (authState.isLoading) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
+      <div className="min-h-screen flex items-center justify-center bg-[#fdfcf8]">
         <div className="text-center">
-          <Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-500" />
-          <p className="text-white">Loading...</p>
+          <Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-stone-600" />
+          <p className="text-stone-500">Loading...</p>
         </div>
       </div>
     );
@@ -243,17 +271,23 @@ const AdminPage = () => {
   // Lockout state
   if (authState.isLocked) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
+      <div className="min-h-screen flex items-center justify-center bg-[#fdfcf8]">
         <div className="text-center">
-          <Lock className="w-16 h-16 mx-auto mb-4 text-red-500" />
-          <h2 className="text-2xl font-bold text-white mb-2">Account Locked</h2>
-          <p className="text-white/60">Too many failed attempts. Please try again in 15 minutes.</p>
+          <div className="w-16 h-16 bg-red-50 rounded-2xl flex items-center justify-center mx-auto mb-6">
+            <Lock className="w-8 h-8 text-red-500" />
+          </div>
+          <h2 className="text-2xl font-bold text-stone-900 mb-2">Account Locked</h2>
+          <p className="text-stone-500">Too many failed attempts. Please try again in 15 minutes.</p>
           <button
             onClick={() => {
-              localStorage.removeItem('admin_lockout');
+              try {
+                localStorage.removeItem('admin_lockout');
+              } catch {
+                // Ignore errors
+              }
               window.location.reload();
             }}
-            className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+            className="mt-4 px-6 py-2 bg-stone-900 text-stone-50 rounded-xl hover:bg-stone-800 transition-colors"
           >
             Try Again
           </button>
@@ -265,22 +299,23 @@ const AdminPage = () => {
   // Login form
   if (authState.showLogin || !authState.isAuthenticated) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
+      <div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-[#fdfcf8] z-0">
+        
         <motion.div
-          initial={{ opacity: 0, scale: 0.9 }}
+          initial={{ opacity: 0, scale: 0.95 }}
           animate={{ opacity: 1, scale: 1 }}
-          className="w-full max-w-md p-8"
+          className="w-full max-w-md p-6"
         >
-          <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/20">
+          <div className="bg-white/80 backdrop-blur-xl rounded-3xl p-8 border border-stone-200 shadow-2xl relative z-10">
             <div className="text-center mb-8">
-              <div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
-                <Lock className="w-8 h-8 text-white" />
+              <div className="w-16 h-16 bg-[#f3f1e7] rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm border border-stone-100">
+                <Lock className="w-6 h-6 text-stone-600" />
               </div>
-              <h1 className="text-2xl font-bold text-white mb-2">Admin Access</h1>
-              <p className="text-white/60">Enter your password to continue</p>
+              <h1 className="text-2xl font-bold text-stone-900 mb-2 tracking-tight">Admin Access</h1>
+              <p className="text-stone-500">Enter your password to continue</p>
             </div>
 
-            <form onSubmit={handleLogin} className="space-y-6">
+            <form onSubmit={handleLogin} className="space-y-5">
               <div>
                 <div className="relative">
                   <input
@@ -288,37 +323,41 @@ const AdminPage = () => {
                     value={authState.password}
                     onChange={(e) => setAuthState(prev => ({ ...prev, password: e.target.value }))}
                     placeholder="Enter password"
-                    className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    className="w-full px-4 py-3.5 bg-white border border-stone-200 rounded-xl text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-200 focus:border-stone-400 transition-all shadow-sm"
                     disabled={authState.isLoading}
                   />
                   <button
                     type="button"
                     onClick={() => setAuthState(prev => ({ ...prev, showPassword: !prev.showPassword }))}
-                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-white/50 hover:text-white"
+                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-stone-400 hover:text-stone-600 p-1"
                   >
                     {authState.showPassword ? '👁️' : '👁️‍🗨️'}
                   </button>
                 </div>
                 {authState.error && (
-                  <p className="mt-2 text-red-400 text-sm">{authState.error}</p>
+                  <motion.p 
+                    initial={{ opacity: 0, y: -5 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="mt-2 text-red-500 text-sm font-medium flex items-center"
+                  >
+                    <span className="w-1.5 h-1.5 bg-red-500 rounded-full mr-2" />
+                    {authState.error}
+                  </motion.p>
                 )}
               </div>
 
               <button
                 type="submit"
                 disabled={authState.isLoading || !authState.password}
-                className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-4 px-6 rounded-xl font-semibold text-lg hover:from-blue-600 hover:to-purple-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent disabled:opacity-50 disabled:cursor-not-allowed transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-lg"
+                className="w-full bg-stone-900 text-stone-50 py-3.5 px-6 rounded-xl font-semibold text-lg hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-stone-200 focus:ring-offset-2 focus:ring-offset-white disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg flex items-center justify-center"
               >
                 {authState.isLoading ? (
-                  <div className="flex items-center justify-center space-x-3">
+                  <div className="flex items-center justify-center space-x-2">
                     <Loader2 className="w-5 h-5 animate-spin" />
-                    <span>Authenticating...</span>
+                    <span className="text-stone-50">Authenticating...</span>
                   </div>
                 ) : (
-                  <div className="flex items-center justify-center space-x-2">
-                    <Lock size={18} />
-                    <span>Secure Login</span>
-                  </div>
+                  <span className="text-stone-50">Sign In</span>
                 )}
               </button>
             </form>

app/not-found.tsx

@@ -1,22 +1,80 @@
-import Link from "next/link";
+"use client";
+
+import { useEffect, useState } from "react";
+import dynamic from "next/dynamic";
+
+// Dynamically import KernelPanic404Wrapper to avoid SSR issues
+const KernelPanic404 = dynamic(() => import("./components/KernelPanic404Wrapper"), {
+  ssr: false,
+  loading: () => (
+    <div style={{ 
+      position: "fixed", 
+      top: 0, 
+      left: 0, 
+      width: "100%", 
+      height: "100%", 
+      display: "flex", 
+      alignItems: "center", 
+      justifyContent: "center", 
+      backgroundColor: "#020202", 
+      color: "#33ff00", 
+      fontFamily: "monospace" 
+    }}>
+      <div>Loading terminal...</div>
+    </div>
+  ),
+});
 
 export default function NotFound() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
     return (
-        <div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
-            <div className="text-center p-10 bg-white dark:bg-gray-700 rounded shadow-md">
-                <h1 className="text-6xl font-bold text-gray-800 dark:text-white">
-                    404
-                </h1>
-                <p className="mt-4 text-xl text-gray-600 dark:text-gray-300">
-                    Oops! The page you&#39;re looking for doesn&#39;t exist.
-                </p>
-                <Link
-                    href="/"
-                    className="mt-6 inline-block text-blue-500 hover:underline"
-                >
-                    Go Back Home
-                </Link>
-            </div>
+      <div style={{ 
+        position: "fixed", 
+        top: 0, 
+        left: 0, 
+        width: "100vw", 
+        height: "100vh", 
+        margin: 0, 
+        padding: 0, 
+        overflow: "hidden",
+        backgroundColor: "#020202",
+        zIndex: 9998
+      }}>
+        <div style={{ 
+          display: "flex", 
+          alignItems: "center", 
+          justifyContent: "center", 
+          width: "100%", 
+          height: "100%", 
+          color: "#33ff00", 
+          fontFamily: "monospace" 
+        }}>
+          Loading terminal...
         </div>
+      </div>
     );
+  }
+
+  return (
+    <div style={{ 
+      position: "fixed", 
+      top: 0, 
+      left: 0, 
+      width: "100vw", 
+      height: "100vh", 
+      margin: 0, 
+      padding: 0, 
+      overflow: "hidden",
+      backgroundColor: "#020202",
+      zIndex: 9998
+    }}>
+      <KernelPanic404 />
+    </div>
+  );
 }

app/page.tsx

@@ -7,7 +7,8 @@ import Projects from "./components/Projects";
 import Contact from "./components/Contact";
 import Footer from "./components/Footer";
 import Script from "next/script";
-import ActivityFeed  from "./components/ActivityFeed";
+import ErrorBoundary from "@/components/ErrorBoundary";
+import ActivityFeed from "./components/ActivityFeed";
 import { motion } from "framer-motion";
 
 export default function Home() {
@@ -35,7 +36,9 @@ export default function Home() {
           }),
         }}
       />
-      <ActivityFeed />
+      <ErrorBoundary>
+        <ActivityFeed />
+      </ErrorBoundary>
       <Header />
       {/* Spacer to prevent navbar overlap */}
       <div className="h-24 md:h-32" aria-hidden="true"></div>

app/projects/[slug]/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { motion } from 'framer-motion';
-import { ExternalLink, Calendar, Tag, ArrowLeft, Github as GithubIcon } from 'lucide-react';
+import { ExternalLink, Calendar, ArrowLeft, Github as GithubIcon, Share2 } from 'lucide-react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { useState, useEffect } from 'react';
@@ -18,6 +18,7 @@ interface Project {
   date: string;
   github?: string;
   live?: string;
+  imageUrl?: string;
 }
 
 const ProjectDetail = () => {
@@ -33,7 +34,28 @@ const ProjectDetail = () => {
         if (response.ok) {
           const data = await response.json();
           if (data.projects && data.projects.length > 0) {
-            setProject(data.projects[0]);
+            const loadedProject = data.projects[0];
+            setProject(loadedProject);
+            
+            // Track page view
+            try {
+              await fetch('/api/analytics/track', {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                  type: 'pageview',
+                  projectId: loadedProject.id.toString(),
+                  page: `/projects/${slug}`
+                })
+              });
+            } catch (trackError) {
+              // Silently fail tracking
+              if (process.env.NODE_ENV === 'development') {
+                console.error('Error tracking page view:', trackError);
+              }
+            }
           }
         }
       } catch (error) {
@@ -48,142 +70,182 @@ const ProjectDetail = () => {
 
   if (!project) {
     return (
-      <div className="min-h-screen animated-bg flex items-center justify-center">
+      <div className="min-h-screen bg-[#fdfcf8] flex items-center justify-center">
         <div className="text-center">
-          <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-500 mx-auto mb-4"></div>
-          <p className="text-gray-400">Loading project...</p>
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-stone-800 mx-auto mb-4"></div>
+          <p className="text-stone-500 font-medium">Loading project...</p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen animated-bg">
-      <div className="max-w-4xl mx-auto px-4 pt-32 pb-20">
-        {/* Header */}
+    <div className="min-h-screen bg-[#fdfcf8] pt-32 pb-20">
+      <div className="max-w-4xl mx-auto px-4">
+        {/* Navigation */}
         <motion.div
-          initial={{ opacity: 0, y: 30 }}
+          initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8 }}
-          className="mb-12"
+          transition={{ duration: 0.6 }}
+          className="mb-8"
         >
           <Link
             href="/projects"
-            className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors mb-6"
+            className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-900 transition-colors group"
           >
-            <ArrowLeft size={20} />
-            <span>Back to Projects</span>
+            <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
+            <span className="font-medium">Back to Projects</span>
           </Link>
-          
-          <div className="flex items-center justify-between mb-6">
-            <h1 className="text-4xl md:text-5xl font-bold gradient-text">
-              {project.title}
-            </h1>
-            {project.featured && (
-              <span className="px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white text-sm font-semibold rounded-full">
-                Featured
-              </span>
-            )}
-          </div>
-          
-          <p className="text-xl text-gray-400 mb-6">
-            {project.description}
-          </p>
-
-          {/* Project Meta */}
-          <div className="flex flex-wrap items-center gap-6 text-gray-400 mb-8">
-            <div className="flex items-center space-x-2">
-              <Calendar size={20} />
-              <span>{project.date}</span>
-            </div>
-            <div className="flex items-center space-x-2">
-              <Tag size={20} />
-              <span>{project.category}</span>
-            </div>
-          </div>
-
-          {/* Tags */}
-          <div className="flex flex-wrap gap-3 mb-8">
-            {project.tags.map((tag) => (
-              <span
-                key={tag}
-                className="px-4 py-2 bg-gray-800/50 text-gray-300 rounded-full border border-gray-700"
-              >
-                {tag}
-              </span>
-            ))}
-          </div>
-
-          {/* Action Buttons */}
-          {((project.github && project.github.trim() && project.github !== "#") || (project.live && project.live.trim() && project.live !== "#")) && (
-            <div className="flex flex-wrap gap-4">
-              {project.github && project.github.trim() && project.github !== "#" && (
-                <motion.a
-                  href={project.github}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  whileHover={{ scale: 1.05 }}
-                  whileTap={{ scale: 0.95 }}
-                  className="inline-flex items-center space-x-2 px-6 py-3 bg-gray-800/50 hover:bg-gray-700/50 text-white rounded-lg transition-colors border border-gray-700"
-                >
-                  <GithubIcon size={20} />
-                  <span>View Code</span>
-                </motion.a>
-              )}
-              
-              {project.live && project.live.trim() && project.live !== "#" && (
-                <motion.a
-                  href={project.live}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  whileHover={{ scale: 1.05 }}
-                  whileTap={{ scale: 0.95 }}
-                  className="inline-flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
-                >
-                  <ExternalLink size={20} />
-                  <span>Live Demo</span>
-                </motion.a>
-              )}
-            </div>
-          )}
         </motion.div>
 
-        {/* Project Content */}
+        {/* Header & Meta */}
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 0.2 }}
-          className="glass-card p-8 rounded-2xl"
+          transition={{ duration: 0.8, delay: 0.1 }}
+          className="mb-12"
         >
-          <div className="markdown prose prose-invert max-w-none text-white">
-            <ReactMarkdown
-              components={{
-                h1: ({children}) => <h1 className="text-3xl font-bold text-white mb-4">{children}</h1>,
-                h2: ({children}) => <h2 className="text-2xl font-semibold text-white mb-3">{children}</h2>,
-                h3: ({children}) => <h3 className="text-xl font-semibold text-white mb-2">{children}</h3>,
-                p: ({children}) => <p className="text-gray-300 mb-3 leading-relaxed">{children}</p>,
-                ul: ({children}) => <ul className="list-disc list-inside text-gray-300 mb-3 space-y-1">{children}</ul>,
-                ol: ({children}) => <ol className="list-decimal list-inside text-gray-300 mb-3 space-y-1">{children}</ol>,
-                li: ({children}) => <li className="text-gray-300">{children}</li>,
-                a: ({href, children}) => (
-                  <a href={href} className="text-blue-400 hover:text-blue-300 underline transition-colors" target="_blank" rel="noopener noreferrer">
-                    {children}
-                  </a>
-                ),
-                code: ({children}) => <code className="bg-gray-800 text-blue-400 px-2 py-1 rounded text-sm">{children}</code>,
-                pre: ({children}) => <pre className="bg-gray-800 p-4 rounded-lg overflow-x-auto mb-3">{children}</pre>,
-                blockquote: ({children}) => <blockquote className="border-l-4 border-blue-500 pl-4 italic text-gray-300 mb-3">{children}</blockquote>,
-                strong: ({children}) => <strong className="font-semibold text-white">{children}</strong>,
-                em: ({children}) => <em className="italic text-gray-300">{children}</em>
-              }}
-            >
-              {project.content}
-            </ReactMarkdown>
+          <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
+            <h1 className="text-4xl md:text-6xl font-black font-sans text-stone-900 tracking-tight leading-tight">
+              {project.title}
+            </h1>
+            <div className="flex gap-2 shrink-0 pt-2">
+                 {project.featured && (
+                    <span className="px-4 py-1.5 bg-stone-900 text-stone-50 text-xs font-bold rounded-full shadow-sm">
+                        Featured
+                    </span>
+                 )}
+                 <span className="px-4 py-1.5 bg-white border border-stone-200 text-stone-600 text-xs font-medium rounded-full shadow-sm">
+                    {project.category}
+                 </span>
+            </div>
+          </div>
+          
+          <p className="text-xl md:text-2xl text-stone-600 font-light leading-relaxed max-w-3xl mb-8">
+            {project.description}
+          </p>
+
+          <div className="flex flex-wrap items-center gap-6 text-stone-500 text-sm border-y border-stone-200 py-6">
+            <div className="flex items-center space-x-2">
+              <Calendar size={18} />
+              <span className="font-mono">{new Date(project.date).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}</span>
+            </div>
+            <div className="h-4 w-px bg-stone-300 hidden sm:block"></div>
+            <div className="flex flex-wrap gap-2">
+                {project.tags.map(tag => (
+                    <span key={tag} className="text-stone-700 font-medium">#{tag}</span>
+                ))}
+            </div>
           </div>
         </motion.div>
+
+        {/* Featured Image / Fallback */}
+        <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            className="mb-16 rounded-2xl overflow-hidden shadow-2xl bg-stone-100 aspect-video relative"
+        >
+             {project.imageUrl ? (
+                <img 
+                    src={project.imageUrl} 
+                    alt={project.title} 
+                    className="w-full h-full object-cover"
+                />
+             ) : (
+                <div className="absolute inset-0 bg-gradient-to-br from-stone-200 to-stone-300 flex items-center justify-center">
+                    <span className="text-9xl font-serif font-bold text-stone-500/20 select-none">
+                        {project.title.charAt(0)}
+                    </span>
+                </div>
+             )}
+        </motion.div>
+
+
+        {/* Content & Sidebar Layout */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
+            {/* Main Content */}
+            <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.3 }}
+            className="lg:col-span-2"
+            >
+            <div className="markdown prose prose-stone max-w-none prose-lg prose-headings:font-bold prose-headings:tracking-tight prose-a:text-stone-900 prose-a:decoration-stone-300 hover:prose-a:decoration-stone-900 prose-img:rounded-xl prose-img:shadow-lg">
+                <ReactMarkdown
+                    components={{
+                         // Custom components to ensure styling matches
+                        h1: ({children}) => <h1 className="text-3xl font-bold text-stone-900 mt-8 mb-4">{children}</h1>,
+                        h2: ({children}) => <h2 className="text-2xl font-bold text-stone-900 mt-8 mb-4">{children}</h2>,
+                        p: ({children}) => <p className="text-stone-700 leading-relaxed mb-6">{children}</p>,
+                        li: ({children}) => <li className="text-stone-700">{children}</li>,
+                        code: ({children}) => <code className="bg-stone-100 text-stone-800 px-1.5 py-0.5 rounded text-sm font-mono font-medium">{children}</code>,
+                        pre: ({children}) => <pre className="bg-stone-900 text-stone-50 p-6 rounded-xl overflow-x-auto my-6 shadow-lg">{children}</pre>,
+                    }}
+                >
+                {project.content}
+                </ReactMarkdown>
+            </div>
+            </motion.div>
+
+            {/* Sidebar / Actions */}
+            <motion.div
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.8, delay: 0.4 }}
+                className="lg:col-span-1 space-y-8"
+            >
+                <div className="bg-white/50 backdrop-blur-xl border border-white/60 p-6 rounded-2xl shadow-sm sticky top-32">
+                    <h3 className="font-bold text-stone-900 mb-4 flex items-center gap-2">
+                        <Share2 size={18} />
+                        Project Links
+                    </h3>
+                    <div className="space-y-3">
+                        {project.live && project.live.trim() && project.live !== "#" ? (
+                            <a
+                            href={project.live}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex items-center justify-between w-full px-4 py-3 bg-stone-900 text-stone-50 rounded-xl font-medium hover:bg-stone-800 hover:scale-[1.02] transition-all shadow-md group"
+                            >
+                                <span>Live Demo</span>
+                                <ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
+                            </a>
+                        ) : (
+                             <div className="px-4 py-3 bg-stone-100 text-stone-400 rounded-xl font-medium text-sm text-center border border-stone-200 cursor-not-allowed">
+                                Live demo not available
+                            </div>
+                        )}
+                        
+                        {project.github && project.github.trim() && project.github !== "#" ? (
+                            <a
+                            href={project.github}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex items-center justify-between w-full px-4 py-3 bg-white border border-stone-200 text-stone-700 rounded-xl font-medium hover:bg-stone-50 hover:text-stone-900 hover:border-stone-300 transition-all shadow-sm group"
+                            >
+                                <span>View Source</span>
+                                <GithubIcon size={18} className="group-hover:rotate-12 transition-transform" />
+                            </a>
+                        ) : null}
+                    </div>
+
+                    <div className="mt-8 pt-6 border-t border-stone-100">
+                        <h4 className="text-xs font-bold text-stone-400 uppercase tracking-wider mb-3">Tech Stack</h4>
+                        <div className="flex flex-wrap gap-2">
+                            {project.tags.map(tag => (
+                                <span key={tag} className="px-2.5 py-1 bg-stone-100 text-stone-600 text-xs font-medium rounded-md border border-stone-200">
+                                    {tag}
+                                </span>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </motion.div>
+        </div>
       </div>
     </div>
   );
 };
 
-export default ProjectDetail;
+export default ProjectDetail;

app/projects/page.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import { useState, useEffect } from "react";
-
 import { motion } from 'framer-motion';
-import { ExternalLink, Github, Calendar, ArrowLeft } from 'lucide-react';
+import { ExternalLink, Github, Calendar, ArrowLeft, Search } from 'lucide-react';
 import Link from 'next/link';
 
 interface Project {
@@ -17,10 +16,16 @@ interface Project {
   date: string;
   github?: string;
   live?: string;
+  imageUrl?: string;
 }
 
 const ProjectsPage = () => {
   const [projects, setProjects] = useState<Project[]>([]);
+  const [filteredProjects, setFilteredProjects] = useState<Project[]>([]);
+  const [categories, setCategories] = useState<string[]>(["All"]);
+  const [selectedCategory, setSelectedCategory] = useState("All");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [mounted, setMounted] = useState(false);
 
   // Load projects from API
   useEffect(() => {
@@ -29,7 +34,12 @@ const ProjectsPage = () => {
         const response = await fetch('/api/projects?published=true');
         if (response.ok) {
           const data = await response.json();
-          setProjects(data.projects || []);
+          const loadedProjects = data.projects || [];
+          setProjects(loadedProjects);
+          
+          // Extract unique categories
+          const uniqueCategories = ["All", ...Array.from(new Set(loadedProjects.map((p: Project) => p.category))) as string[]];
+          setCategories(uniqueCategories);
         }
       } catch (error) {
         if (process.env.NODE_ENV === 'development') {
@@ -39,31 +49,36 @@ const ProjectsPage = () => {
     };
 
     loadProjects();
-  }, []);
-
-  const categories = ["All", "Web Development", "Full-Stack", "Web Application", "Mobile App"];
-  const [selectedCategory, setSelectedCategory] = useState("All");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
     setMounted(true);
   }, []);
 
-  if (!mounted) {
-    return null;
-  }
+  // Filter projects
+  useEffect(() => {
+    let result = projects;
 
-  const filteredProjects = selectedCategory === "All" 
-    ? projects 
-    : projects.filter(project => project.category === selectedCategory);
+    if (selectedCategory !== "All") {
+      result = result.filter(project => project.category === selectedCategory);
+    }
+
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter(project => 
+        project.title.toLowerCase().includes(query) || 
+        project.description.toLowerCase().includes(query) ||
+        project.tags.some(tag => tag.toLowerCase().includes(query))
+      );
+    }
+
+    setFilteredProjects(result);
+  }, [projects, selectedCategory, searchQuery]);
 
   if (!mounted) {
     return null;
   }
 
   return (
-    <div className="min-h-screen animated-bg">
-      <div className="max-w-7xl mx-auto px-4 pt-32 pb-20">
+    <div className="min-h-screen bg-[#fdfcf8] pt-32 pb-20">
+      <div className="max-w-7xl mx-auto px-4">
         {/* Header */}
         <motion.div
           initial={{ opacity: 0, y: 30 }}
@@ -73,43 +88,56 @@ const ProjectsPage = () => {
         >
           <Link
             href="/"
-            className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors mb-6"
+            className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-800 transition-colors mb-8 group"
           >
-            <ArrowLeft size={20} />
+            <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
             <span>Back to Home</span>
           </Link>
           
-          <h1 className="text-5xl md:text-6xl font-bold mb-6 gradient-text">
+          <h1 className="text-5xl md:text-6xl font-black font-sans mb-6 text-stone-900 tracking-tight">
             My Projects
           </h1>
-          <p className="text-xl text-gray-400 max-w-3xl">
+          <p className="text-xl text-stone-600 max-w-3xl font-light leading-relaxed">
             Explore my portfolio of projects, from web applications to mobile apps. 
             Each project showcases different skills and technologies.
           </p>
         </motion.div>
 
-        {/* Category Filter */}
+        {/* Filters & Search */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.2 }}
-          className="mb-12"
+          className="mb-12 flex flex-col md:flex-row gap-6 justify-between items-start md:items-center"
         >
-          <div className="flex flex-wrap gap-3">
+          {/* Categories */}
+          <div className="flex flex-wrap gap-2">
             {categories.map((category) => (
               <button
                 key={category}
                 onClick={() => setSelectedCategory(category)}
-                className={`px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
+                className={`px-5 py-2 rounded-full text-sm font-medium transition-all duration-200 border ${
                   selectedCategory === category
-                    ? 'bg-gray-800 text-cream shadow-lg'
-                    : 'bg-gray-800/50 text-gray-300 hover:bg-gray-700/50 hover:text-white'
+                    ? 'bg-stone-800 text-stone-50 border-stone-800 shadow-md'
+                    : 'bg-white text-stone-600 border-stone-200 hover:bg-stone-50 hover:border-stone-300'
                 }`}
               >
                 {category}
               </button>
             ))}
           </div>
+
+          {/* Search */}
+          <div className="relative w-full md:w-64">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-stone-400" size={18} />
+            <input
+              type="text"
+              placeholder="Search projects..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-10 pr-4 py-2 bg-white border border-stone-200 rounded-full text-stone-800 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-200 focus:border-stone-400 transition-all"
+            />
+          </div>
         </motion.div>
 
         {/* Projects Grid */}
@@ -120,98 +148,158 @@ const ProjectsPage = () => {
               initial={{ opacity: 0, y: 30 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6, delay: index * 0.1 }}
-              whileHover={{ y: -10 }}
-              className="group relative overflow-hidden rounded-2xl glass-card card-hover"
+              whileHover={{ y: -8 }}
+              className="group flex flex-col bg-white/40 backdrop-blur-xl rounded-2xl overflow-hidden border border-white/60 shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)] transition-all duration-500"
             >
-              <div className="relative h-48 overflow-hidden">
-                <div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20" />
-                <div className="absolute inset-0 bg-gray-800/50 flex flex-col items-center justify-center p-4">
-                  <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full flex items-center justify-center mb-2">
-                    <span className="text-2xl font-bold text-white">
-                      {project.title.split(' ').map(word => word[0]).join('').toUpperCase()}
-                    </span>
+              {/* Image / Fallback / Cover Area */}
+              <div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
+                {project.imageUrl ? (
+                  <>
+                    <img 
+                      src={project.imageUrl}
+                      alt={project.title}
+                      className="w-full h-full object-cover transition-transform duration-1000 ease-out group-hover:scale-110"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-stone-900/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                  </>
+                ) : (
+                  <div className="absolute inset-0 bg-stone-200 flex items-center justify-center overflow-hidden">
+                    <div className="absolute inset-0 bg-gradient-to-br from-stone-300 via-stone-200 to-stone-300" />
+                    <div className="absolute top-[-20%] left-[-10%] w-[70%] h-[70%] bg-white/20 rounded-full blur-3xl animate-pulse" />
+                    <div className="absolute bottom-[-10%] right-[-5%] w-[60%] h-[60%] bg-stone-400/10 rounded-full blur-2xl" />
+                    
+                    <div className="relative z-10">
+                      <span className="text-7xl font-serif font-black text-stone-800/10 group-hover:text-stone-800/20 transition-all duration-700 select-none tracking-tighter">
+                        {project.title.charAt(0)}
+                      </span>
+                    </div>
                   </div>
-                  <span className="text-sm font-medium text-gray-400 text-center leading-tight">
-                    {project.title}
-                  </span>
-                </div>
+                )}
                 
+                {/* Texture/Grain Overlay */}
+                <div className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-overlay bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" />
+
+                {/* Animated Shine Effect */}
+                <div className="absolute inset-0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-in-out bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-[-20deg] pointer-events-none" />
+
                 {project.featured && (
-                  <div className="absolute top-4 right-4 px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 text-white text-xs font-semibold rounded-full">
-                    Featured
+                  <div className="absolute top-3 left-3 z-20">
+                    <div className="px-3 py-1 bg-[#292524]/80 backdrop-blur-md text-[#fdfcf8] text-[10px] font-bold uppercase tracking-widest rounded-full shadow-sm border border-white/10">
+                      Featured
+                    </div>
                   </div>
                 )}
 
-                {((project.github && project.github.trim() && project.github !== "#") || (project.live && project.live.trim() && project.live !== "#")) && (
-                  <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center space-x-4">
-                    {project.github && project.github.trim() && project.github !== "#" && (
-                      <motion.a
-                        href={project.github}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        whileHover={{ scale: 1.1 }}
-                        whileTap={{ scale: 0.95 }}
-                        className="p-3 bg-gray-800/80 rounded-lg text-white hover:bg-gray-700/80 transition-colors"
-                      >
-                        <Github size={20} />
-                      </motion.a>
-                    )}
-                    {project.live && project.live.trim() && project.live !== "#" && (
-                      <motion.a
-                        href={project.live}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        whileHover={{ scale: 1.1 }}
-                        whileTap={{ scale: 0.95 }}
-                        className="p-3 bg-blue-600/80 rounded-lg text-white hover:bg-blue-500/80 transition-colors"
-                      >
-                        <ExternalLink size={20} />
-                      </motion.a>
-                    )}
-                  </div>
-                )}
+                {/* Overlay Links */}
+                <div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-20 pointer-events-none">
+                  {project.github && (
+                    <a
+                      href={project.github}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50 pointer-events-auto"
+                      aria-label="GitHub"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <Github size={20} />
+                    </a>
+                  )}
+                  {project.live && !project.title.toLowerCase().includes('kernel panic') && (
+                    <a
+                      href={project.live}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50 pointer-events-auto"
+                      aria-label="Live Demo"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <ExternalLink size={20} />
+                    </a>
+                  )}
+                </div>
               </div>
 
-              <div className="p-6">
+              <div className="p-6 flex flex-col flex-1">
+                {/* Stretched Link covering the whole card (including image area) */}
+                <Link
+                  href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
+                  className="absolute inset-0 z-10"
+                  aria-label={`View project ${project.title}`}
+                />
+
                 <div className="flex items-center justify-between mb-3">
-                  <h3 className="text-xl font-bold text-white group-hover:text-blue-400 transition-colors">
+                  <h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-600 transition-colors">
                     {project.title}
                   </h3>
-                  <div className="flex items-center space-x-2 text-gray-400">
-                    <Calendar size={16} />
-                    <span className="text-sm">{project.date}</span>
+                  <div className="flex items-center space-x-2 text-stone-400 text-xs font-mono bg-white/50 px-2 py-1 rounded border border-stone-100">
+                    <Calendar size={12} />
+                    <span>{new Date(project.date).getFullYear()}</span>
                   </div>
                 </div>
 
-                <p className="text-gray-300 mb-4 leading-relaxed">
+                <p className="text-stone-600 mb-6 leading-relaxed line-clamp-3 text-sm flex-1">
                   {project.description}
                 </p>
 
-                <div className="flex flex-wrap gap-2 mb-4">
-                  {project.tags.map((tag) => (
+                <div className="flex flex-wrap gap-2 mb-6">
+                  {project.tags.slice(0, 4).map((tag) => (
                     <span
                       key={tag}
-                      className="px-3 py-1 bg-gray-800/50 text-gray-300 text-sm rounded-full border border-gray-700"
+                      className="px-2.5 py-1 bg-white/60 border border-stone-100 text-stone-600 text-xs font-medium rounded-md"
                     >
                       {tag}
                     </span>
                   ))}
+                  {project.tags.length > 4 && (
+                    <span className="px-2 py-1 text-stone-400 text-xs">+ {project.tags.length - 4}</span>
+                  )}
                 </div>
 
-                <Link
-                  href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
-                  className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors font-medium"
-                >
-                  <span>View Project</span>
-                  <ExternalLink size={16} />
-                </Link>
+                <div className="mt-auto pt-4 border-t border-stone-100 flex items-center justify-between relative z-20">
+                   <div className="flex gap-3">
+                      {project.github && (
+                        <a 
+                          href={project.github} 
+                          target="_blank" 
+                          rel="noopener noreferrer" 
+                          className="text-stone-400 hover:text-stone-900 transition-colors relative z-20 hover:scale-110" 
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <Github size={18} />
+                        </a>
+                      )}
+                      {project.live && !project.title.toLowerCase().includes('kernel panic') && (
+                         <a 
+                           href={project.live} 
+                           target="_blank" 
+                           rel="noopener noreferrer" 
+                           className="text-stone-400 hover:text-stone-900 transition-colors relative z-20 hover:scale-110" 
+                           onClick={(e) => e.stopPropagation()}
+                         >
+                           <ExternalLink size={18} />
+                         </a>
+                      )}
+                   </div>
+                </div>
               </div>
             </motion.div>
           ))}
         </div>
+
+        {filteredProjects.length === 0 && (
+            <div className="text-center py-20">
+                <p className="text-stone-500 text-lg">No projects found matching your criteria.</p>
+                <button 
+                    onClick={() => {setSelectedCategory("All"); setSearchQuery("");}}
+                    className="mt-4 text-stone-800 font-medium hover:underline"
+                >
+                    Clear filters
+                </button>
+            </div>
+        )}
       </div>
     </div>
   );
 };
 
-export default ProjectsPage;
+export default ProjectsPage;

app/sitemap.xml/route.tsx

@@ -1,56 +1,67 @@
-import {NextResponse} from "next/server";
+import { NextResponse } from "next/server";
 
-export const dynamic = 'force-dynamic';
+export const dynamic = "force-dynamic";
 
 export async function GET() {
-    const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
-    const apiUrl = `${baseUrl}/api/sitemap`; // Verwende die vollständige URL zur API
+  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
+  const apiUrl = `${baseUrl}/api/sitemap`; // Verwende die vollständige URL zur API
 
-    // In test runs, allow returning a mocked sitemap explicitly
-    if (process.env.NODE_ENV === 'test' && process.env.GHOST_MOCK_SITEMAP) {
-        // For tests return a simple object so tests can inspect `.body`
-        if (process.env.NODE_ENV === 'test') {
-            return { body: process.env.GHOST_MOCK_SITEMAP, headers: { "Content-Type": "application/xml" } } as any;
-        }
-        return new NextResponse(process.env.GHOST_MOCK_SITEMAP, { headers: { "Content-Type": "application/xml" } });
+  // In test runs, allow returning a mocked sitemap explicitly
+  if (process.env.NODE_ENV === "test" && process.env.GHOST_MOCK_SITEMAP) {
+    // For tests return a simple object so tests can inspect `.body`
+    if (process.env.NODE_ENV === "test") {
+      /* eslint-disable @typescript-eslint/no-explicit-any */
+      return {
+        body: process.env.GHOST_MOCK_SITEMAP,
+        headers: { "Content-Type": "application/xml" },
+      } as any;
+      /* eslint-enable @typescript-eslint/no-explicit-any */
     }
+    return new NextResponse(process.env.GHOST_MOCK_SITEMAP, {
+      headers: { "Content-Type": "application/xml" },
+    });
+  }
 
+  try {
+    // Holt die Sitemap-Daten von der API
+    // Try global fetch first, then fall back to node-fetch
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+    let res: any;
     try {
-        // Holt die Sitemap-Daten von der API
-        // Try global fetch first, then fall back to node-fetch
-        let res: any;
-        try {
-            if (typeof (globalThis as any).fetch === 'function') {
-                res = await (globalThis as any).fetch(apiUrl);
-            }
-        } catch (e) {
-            res = undefined;
-        }
-
-        if (!res || typeof res.ok === 'undefined' || !res.ok) {
-            try {
-                const mod = await import('node-fetch');
-                const nodeFetch = (mod as any).default ?? mod;
-                res = await nodeFetch(apiUrl);
-            } catch (err) {
-                console.error('Error fetching sitemap:', err);
-                return new NextResponse("Error fetching sitemap", {status: 500});
-            }
-        }
-
-        if (!res || !res.ok) {
-            console.error(`Failed to fetch sitemap: ${res?.statusText ?? 'no response'}`);
-            return new NextResponse("Failed to fetch sitemap", {status: 500});
-        }
-
-        const xml = await res.text();
-
-        // Gibt die XML mit dem richtigen Content-Type zurück
-        return new NextResponse(xml, {
-            headers: {"Content-Type": "application/xml"},
-        });
-    } catch (error) {
-        console.error("Error fetching sitemap:", error);
-        return new NextResponse("Error fetching sitemap", {status: 500});
+      if (typeof (globalThis as any).fetch === "function") {
+        res = await (globalThis as any).fetch(apiUrl);
+      }
+    } catch (_e) {
+      res = undefined;
     }
+
+    if (!res || typeof res.ok === "undefined" || !res.ok) {
+      try {
+        const mod = await import("node-fetch");
+        const nodeFetch = (mod as any).default ?? mod;
+        res = await (nodeFetch as any)(apiUrl);
+      } catch (err) {
+        console.error("Error fetching sitemap:", err);
+        return new NextResponse("Error fetching sitemap", { status: 500 });
+      }
+    }
+    /* eslint-enable @typescript-eslint/no-explicit-any */
+
+    if (!res || !res.ok) {
+      console.error(
+        `Failed to fetch sitemap: ${res?.statusText ?? "no response"}`,
+      );
+      return new NextResponse("Failed to fetch sitemap", { status: 500 });
+    }
+
+    const xml = await res.text();
+
+    // Gibt die XML mit dem richtigen Content-Type zurück
+    return new NextResponse(xml, {
+      headers: { "Content-Type": "application/xml" },
+    });
+  } catch (error) {
+    console.error("Error fetching sitemap:", error);
+    return new NextResponse("Error fetching sitemap", { status: 500 });
+  }
 }

components/AnalyticsDashboard.tsx

@@ -4,9 +4,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { motion } from 'framer-motion';
 import { 
   BarChart3, 
-  TrendingUp, 
   Eye, 
-  Heart, 
   Zap, 
   Globe,
   Activity,
@@ -18,6 +16,7 @@ import {
   Trash2,
   AlertTriangle
 } from 'lucide-react';
+import { useToast } from '@/components/Toast';
 
 interface AnalyticsData {
   overview: {
@@ -25,8 +24,6 @@ interface AnalyticsData {
     publishedProjects: number;
     featuredProjects: number;
     totalViews: number;
-    totalLikes: number;
-    totalShares: number;
     avgLighthouse: number;
   };
   projects: Array<{
@@ -35,8 +32,6 @@ interface AnalyticsData {
     category: string;
     difficulty: string;
     views: number;
-    likes: number;
-    shares: number;
     lighthouse: number;
     published: boolean;
     featured: boolean;
@@ -48,8 +43,6 @@ interface AnalyticsData {
   performance: {
     avgLighthouse: number;
     totalViews: number;
-    totalLikes: number;
-    totalShares: number;
   };
   metrics: {
     bounceRate: number;
@@ -71,6 +64,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
   const [showResetModal, setShowResetModal] = useState(false);
   const [resetType, setResetType] = useState<'analytics' | 'pageviews' | 'interactions' | 'performance' | 'all'>('analytics');
   const [resetting, setResetting] = useState(false);
+  const { showSuccess, showError } = useToast();
 
   const fetchAnalyticsData = useCallback(async () => {
     if (!isAuthenticated) return;
@@ -79,11 +73,13 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
       setLoading(true);
       setError(null);
       
+      // Add cache-busting parameter to ensure fresh data after reset
+      const cacheBust = `?nocache=true&t=${Date.now()}`;
       const [analyticsRes, performanceRes] = await Promise.all([
-        fetch('/api/analytics/dashboard', {
+        fetch(`/api/analytics/dashboard${cacheBust}`, {
           headers: { 'x-admin-request': 'true' }
         }),
-        fetch('/api/analytics/performance', {
+        fetch(`/api/analytics/performance${cacheBust}`, {
           headers: { 'x-admin-request': 'true' }
         })
       ]);
@@ -103,23 +99,19 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
           publishedProjects: 0,
           featuredProjects: 0,
           totalViews: 0,
-          totalLikes: 0,
-          totalShares: 0,
           avgLighthouse: 90
         },
         projects: analytics.projects || [],
         categories: analytics.categories || {},
         difficulties: analytics.difficulties || {},
-        performance: performance.performance || {
-          avgLighthouse: 90,
-          totalViews: 0,
-          totalLikes: 0,
-          totalShares: 0
+        performance: {
+          avgLighthouse: performance.avgLighthouse || analytics.overview?.avgLighthouse || 0,
+          totalViews: performance.totalViews || analytics.overview?.totalViews || 0,
         },
-        metrics: performance.metrics || {
-          bounceRate: 35,
-          avgSessionDuration: 180,
-          pagesPerSession: 2.5,
+        metrics: performance.metrics || analytics.metrics || {
+          bounceRate: 0,
+          avgSessionDuration: 0,
+          pagesPerSession: 0,
           newUsers: 0
         }
       });
@@ -134,6 +126,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
     if (!isAuthenticated || resetting) return;
     
     setResetting(true);
+    setError(null);
     try {
       const response = await fetch('/api/analytics/reset', {
         method: 'POST',
@@ -144,15 +137,25 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
         body: JSON.stringify({ type: resetType })
       });
 
+      const result = await response.json();
+
       if (response.ok) {
-        await fetchAnalyticsData(); // Refresh data
+        showSuccess(
+          'Analytics Reset', 
+          `Successfully reset ${resetType === 'all' ? 'all analytics data' : resetType} data.`
+        );
         setShowResetModal(false);
+        // Clear cache and refresh data
+        await fetchAnalyticsData();
       } else {
-        const errorData = await response.json();
-        setError(errorData.error || 'Failed to reset analytics');
+        const errorMsg = result.error || 'Failed to reset analytics';
+        setError(errorMsg);
+        showError('Reset Failed', errorMsg);
       }
     } catch (err) {
-      setError('Failed to reset analytics');
+      const errorMsg = 'Failed to reset analytics. Please try again.';
+      setError(errorMsg);
+      showError('Reset Failed', errorMsg);
       console.error('Reset error:', err);
     } finally {
       setResetting(false);
@@ -165,63 +168,59 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
     }
   }, [isAuthenticated, fetchAnalyticsData]);
 
-  const StatCard = ({ title, value, icon: Icon, color, trend, trendValue, description }: {
+  const StatCard = ({ title, value, icon: Icon, color, description, tooltip }: {
     title: string;
     value: number | string;
     icon: React.ComponentType<{ className?: string; size?: number }>;
     color: string;
-    trend?: 'up' | 'down' | 'neutral';
-    trendValue?: string;
     description?: string;
+    tooltip?: string;
   }) => (
     <motion.div
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
-      className="admin-glass-card p-6 rounded-xl hover:scale-105 transition-all duration-200"
+      className="bg-white border border-stone-200 p-6 rounded-xl hover:shadow-md transition-all duration-200 group relative"
     >
       <div className="flex items-start justify-between">
         <div className="flex-1">
           <div className="flex items-center space-x-3 mb-4">
             <div className={`p-3 rounded-xl ${color}`}>
-              <Icon className="w-6 h-6 text-white" size={24} />
+              <Icon className="w-6 h-6" size={24} />
             </div>
             <div>
-              <p className="text-white/60 text-sm font-medium">{title}</p>
-              {description && <p className="text-white/40 text-xs">{description}</p>}
+              <p className="text-stone-500 text-sm font-medium">{title}</p>
+              {description && <p className="text-stone-400 text-xs">{description}</p>}
             </div>
           </div>
-          <p className="text-3xl font-bold text-white mb-2">{value}</p>
-          {trend && trendValue && (
-            <div className={`flex items-center space-x-1 text-sm ${
-              trend === 'up' ? 'text-green-400' : 
-              trend === 'down' ? 'text-red-400' : 'text-yellow-400'
-            }`}>
-              <TrendingUp className={`w-4 h-4 ${trend === 'down' ? 'rotate-180' : ''}`} />
-              <span>{trendValue}</span>
-            </div>
-          )}
+          <p className="text-3xl font-bold text-stone-900 mb-2">{value}</p>
         </div>
       </div>
+      {tooltip && (
+        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-stone-900/95 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-normal max-w-xs z-50 shadow-xl backdrop-blur-sm pointer-events-none">
+          {tooltip}
+          <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-2 h-2 bg-stone-900/95 rotate-45"></div>
+        </div>
+      )}
     </motion.div>
   );
 
   const getDifficultyColor = (difficulty: string) => {
     switch (difficulty) {
-      case 'Beginner': return 'bg-green-500/30 text-green-400 border-green-500/40';
-      case 'Intermediate': return 'bg-yellow-500/30 text-yellow-400 border-yellow-500/40';
-      case 'Advanced': return 'bg-orange-500/30 text-orange-400 border-orange-500/40';
-      case 'Expert': return 'bg-red-500/30 text-red-400 border-red-500/40';
-      default: return 'bg-gray-500/30 text-gray-400 border-gray-500/40';
+      case 'Beginner': return 'bg-stone-50 text-stone-700 border-stone-200';
+      case 'Intermediate': return 'bg-stone-100 text-stone-700 border-stone-300';
+      case 'Advanced': return 'bg-stone-200 text-stone-800 border-stone-400';
+      case 'Expert': return 'bg-stone-300 text-stone-900 border-stone-500';
+      default: return 'bg-stone-50 text-stone-600 border-stone-200';
     }
   };
 
   const getCategoryColor = (index: number) => {
     const colors = [
-      'bg-blue-500/30 text-blue-400',
-      'bg-purple-500/30 text-purple-400',
-      'bg-green-500/30 text-green-400',
-      'bg-pink-500/30 text-pink-400',
-      'bg-indigo-500/30 text-indigo-400'
+      'bg-stone-100 text-stone-700',
+      'bg-stone-200 text-stone-800',
+      'bg-stone-300 text-stone-900',
+      'bg-stone-100 text-stone-700',
+      'bg-stone-200 text-stone-800'
     ];
     return colors[index % colors.length];
   };
@@ -233,23 +232,23 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
       {/* Header */}
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
         <div>
-          <h1 className="text-3xl font-bold text-white flex items-center">
-            <BarChart3 className="w-8 h-8 mr-3 text-blue-400" />
+          <h1 className="text-3xl font-bold text-stone-900 flex items-center">
+            <BarChart3 className="w-8 h-8 mr-3 text-stone-600" />
             Analytics Dashboard
           </h1>
-          <p className="text-white/80 mt-2">Portfolio performance and user engagement metrics</p>
+          <p className="text-stone-500 mt-2">Portfolio performance and analytics metrics</p>
         </div>
         <div className="flex items-center space-x-3">
           {/* Time Range Selector */}
-          <div className="flex items-center space-x-1 admin-glass-light rounded-xl p-1">
+          <div className="flex items-center space-x-1 bg-white border border-stone-200 rounded-xl p-1">
             {(['7d', '30d', '90d', '1y'] as const).map((range) => (
               <button
                 key={range}
                 onClick={() => setTimeRange(range)}
                 className={`px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
                   timeRange === range
-                    ? 'bg-blue-500/40 text-blue-300 shadow-lg'
-                    : 'text-white/70 hover:text-white hover:bg-white/10'
+                    ? 'bg-stone-100 text-stone-900 shadow-sm'
+                    : 'text-stone-500 hover:text-stone-800 hover:bg-stone-50'
                 }`}
               >
                 {range === '7d' ? '7 Days' : range === '30d' ? '30 Days' : range === '90d' ? '90 Days' : '1 Year'}
@@ -259,15 +258,15 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
           <button
             onClick={fetchAnalyticsData}
             disabled={loading}
-            className="flex items-center space-x-2 px-4 py-2 admin-glass-light rounded-xl hover:scale-105 transition-all duration-200 disabled:opacity-50"
+            className="flex items-center space-x-2 px-4 py-2 bg-white border border-stone-200 rounded-xl hover:bg-stone-50 transition-all duration-200 disabled:opacity-50 text-stone-600"
           >
-            <RefreshCw className={`w-4 h-4 text-blue-400 ${loading ? 'animate-spin' : ''}`} />
-            <span className="text-white font-medium">Refresh</span>
+            <RefreshCw className={`w-4 h-4 text-stone-600 ${loading ? 'animate-spin' : ''}`} />
+            <span className="font-medium">Refresh</span>
           </button>
           
           <button
             onClick={() => setShowResetModal(true)}
-            className="flex items-center space-x-2 px-4 py-2 bg-red-600/20 text-red-400 border border-red-500/30 rounded-xl hover:bg-red-600/30 hover:scale-105 transition-all"
+            className="flex items-center space-x-2 px-4 py-2 bg-red-50 text-red-600 border border-red-100 rounded-xl hover:bg-red-100 transition-all"
           >
             <RotateCcw className="w-4 h-4" />
             <span>Reset</span>
@@ -276,17 +275,17 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
       </div>
 
       {loading && (
-        <div className="admin-glass-card p-8 rounded-xl">
+        <div className="bg-white border border-stone-200 p-8 rounded-xl shadow-sm">
           <div className="flex items-center justify-center space-x-3">
-            <RefreshCw className="w-6 h-6 text-blue-400 animate-spin" />
-            <span className="text-white/80 text-lg">Loading analytics data...</span>
+            <RefreshCw className="w-6 h-6 text-stone-600 animate-spin" />
+            <span className="text-stone-500 text-lg">Loading analytics data...</span>
           </div>
         </div>
       )}
 
       {error && (
-        <div className="admin-glass-card p-6 rounded-xl border border-red-500/40">
-          <div className="flex items-center space-x-3 text-red-300">
+        <div className="bg-white border border-red-200 p-6 rounded-xl">
+          <div className="flex items-center space-x-3 text-red-600">
             <Activity className="w-5 h-5" />
             <span>Error: {error}</span>
           </div>
@@ -297,8 +296,8 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
         <>
           {/* Overview Stats */}
           <div>
-            <h2 className="text-xl font-bold text-white mb-6 flex items-center">
-              <Target className="w-5 h-5 mr-2 text-purple-400" />
+            <h2 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
+              <Target className="w-5 h-5 mr-2 text-stone-600" />
               Overview
             </h2>
             <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
@@ -306,46 +305,43 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
                 title="Total Views"
                 value={data.overview.totalViews.toLocaleString()}
                 icon={Eye}
-                color="bg-blue-500/30"
-                trend="up"
-                trendValue="+12.5%"
+                color="bg-stone-100 text-stone-600"
                 description="All-time page views"
+                tooltip="✅ REAL DATA: Total page views tracked from the PageView database table. Each visit to a project page or the homepage is automatically recorded with IP, user agent, and timestamp."
               />
               <StatCard
                 title="Projects"
                 value={data.overview.totalProjects}
                 icon={Globe}
-                color="bg-green-500/30"
-                trend="up"
-                trendValue="+2"
+                color="bg-stone-100 text-stone-600"
                 description={`${data.overview.publishedProjects} published`}
-              />
-              <StatCard
-                title="Engagement"
-                value={data.overview.totalLikes}
-                icon={Heart}
-                color="bg-pink-500/30"
-                trend="up"
-                trendValue="+8.2%"
-                description="Total likes & shares"
+                tooltip="✅ REAL DATA: Total number of projects in your portfolio. Shows published vs unpublished projects from your database."
               />
               <StatCard
                 title="Performance"
-                value={data.overview.avgLighthouse}
+                value={data.overview.avgLighthouse > 0 ? data.overview.avgLighthouse : 'N/A'}
                 icon={Zap}
-                color="bg-orange-500/30"
-                trend="up"
-                trendValue="+5%"
-                description="Avg Lighthouse score"
+                color="bg-stone-100 text-stone-600"
+                description={data.overview.avgLighthouse > 0 ? "Avg Lighthouse score" : "No performance data yet"}
+                tooltip={data.overview.avgLighthouse > 0 
+                  ? "✅ REAL DATA: Average Lighthouse performance score (0-100) calculated from real Web Vitals metrics (LCP, FCP, CLS, FID, TTFB) collected from actual page visits. Only shown when real performance data exists."
+                  : "No performance data collected yet. Scores will appear after visitors load your pages and Web Vitals are tracked."}
               />
               <StatCard
                 title="Bounce Rate"
-                value={`${data.metrics.bounceRate}%`}
+                value={`${data.metrics?.bounceRate || 0}%`}
                 icon={MousePointer}
-                color="bg-purple-500/30"
-                trend="down"
-                trendValue="-2.1%"
+                color="bg-stone-100 text-stone-600"
                 description="User retention"
+                tooltip="✅ REAL DATA: Percentage of sessions where users viewed only one page before leaving. Calculated from PageView records grouped by IP address. Lower is better."
+              />
+              <StatCard
+                title="Avg Session"
+                value={data.metrics?.avgSessionDuration ? `${Math.round(data.metrics.avgSessionDuration / 60)}m` : '0m'}
+                icon={Activity}
+                color="bg-stone-100 text-stone-600"
+                description="Average session duration"
+                tooltip="✅ REAL DATA: Average time users spend on your site per session, calculated from the time difference between first and last pageview per IP address. Only calculated for sessions with multiple pageviews."
               />
             </div>
           </div>
@@ -353,9 +349,9 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
           {/* Project Performance */}
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
             {/* Top Projects */}
-            <div className="admin-glass-card p-6 rounded-xl">
-              <h3 className="text-xl font-bold text-white mb-6 flex items-center">
-                <Award className="w-5 h-5 mr-2 text-yellow-400" />
+            <div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm">
+              <h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
+                <Award className="w-5 h-5 mr-2 text-stone-600" />
                 Top Performing Projects
               </h3>
               <div className="space-y-4">
@@ -368,20 +364,24 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
                       initial={{ opacity: 0, x: -20 }}
                       animate={{ opacity: 1, x: 0 }}
                       transition={{ delay: index * 0.1 }}
-                      className="flex items-center justify-between p-4 admin-glass-light rounded-xl"
+                      className="flex items-center justify-between p-4 bg-stone-50 rounded-xl border border-stone-100"
                     >
                       <div className="flex items-center space-x-4">
-                        <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-500 rounded-lg flex items-center justify-center text-white font-bold">
+                        <div className="w-8 h-8 bg-stone-600 rounded-lg flex items-center justify-center text-white font-bold shadow-sm">
                           #{index + 1}
                         </div>
                         <div>
-                          <p className="text-white font-medium">{project.title}</p>
-                          <p className="text-white/60 text-sm">{project.category}</p>
+                          <p className="text-stone-900 font-medium">{project.title}</p>
+                          <p className="text-stone-500 text-sm">{project.category}</p>
                         </div>
                       </div>
-                      <div className="text-right">
-                        <p className="text-white font-bold">{project.views.toLocaleString()}</p>
-                        <p className="text-white/60 text-sm">views</p>
+                      <div className="text-right group/views relative">
+                        <p className="text-stone-900 font-bold">{project.views.toLocaleString()}</p>
+                        <p className="text-stone-500 text-sm">views</p>
+                        <div className="absolute bottom-full right-0 mb-2 px-3 py-2 bg-stone-900/95 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover/views:opacity-100 transition-opacity whitespace-normal max-w-xs z-50 shadow-xl backdrop-blur-sm pointer-events-none">
+                          ✅ REAL DATA: Page views tracked from PageView table for this project. Each visit is automatically recorded.
+                          <div className="absolute top-full right-4 -mt-1 w-2 h-2 bg-stone-900/95 rotate-45"></div>
+                        </div>
                       </div>
                     </motion.div>
                   ))}
@@ -389,9 +389,9 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
             </div>
 
             {/* Categories Distribution */}
-            <div className="admin-glass-card p-6 rounded-xl">
-              <h3 className="text-xl font-bold text-white mb-6 flex items-center">
-                <BarChart3 className="w-5 h-5 mr-2 text-green-400" />
+            <div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm">
+              <h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
+                <BarChart3 className="w-5 h-5 mr-2 text-stone-600" />
                 Categories
               </h3>
               <div className="space-y-4">
@@ -405,16 +405,16 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
                   >
                     <div className="flex items-center space-x-3">
                       <div className={`w-4 h-4 rounded-full ${getCategoryColor(index)}`}></div>
-                      <span className="text-white font-medium">{category}</span>
+                      <span className="text-stone-700 font-medium">{category}</span>
                     </div>
                     <div className="flex items-center space-x-3">
-                      <div className="w-32 h-2 bg-white/10 rounded-full overflow-hidden">
+                      <div className="w-32 h-2 bg-stone-100 rounded-full overflow-hidden">
                         <div
                           className={`h-full ${getCategoryColor(index)} transition-all duration-500`}
                           style={{ width: `${(count / Math.max(...Object.values(data.categories))) * 100}%` }}
                         ></div>
                       </div>
-                      <span className="text-white/80 font-medium w-8 text-right">{count}</span>
+                      <span className="text-stone-500 font-medium w-8 text-right">{count}</span>
                     </div>
                   </motion.div>
                 ))}
@@ -422,12 +422,12 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
             </div>
           </div>
 
-          {/* Difficulty & Engagement */}
+          {/* Difficulty & Activity */}
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
             {/* Difficulty Distribution */}
-            <div className="admin-glass-card p-6 rounded-xl">
-              <h3 className="text-xl font-bold text-white mb-6 flex items-center">
-                <Target className="w-5 h-5 mr-2 text-red-400" />
+            <div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm">
+              <h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
+                <Target className="w-5 h-5 mr-2 text-stone-600" />
                 Difficulty Levels
               </h3>
               <div className="grid grid-cols-2 gap-4">
@@ -448,9 +448,9 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
             </div>
 
             {/* Recent Activity */}
-            <div className="admin-glass-card p-6 rounded-xl">
-              <h3 className="text-xl font-bold text-white mb-6 flex items-center">
-                <Activity className="w-5 h-5 mr-2 text-blue-400" />
+            <div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm">
+              <h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
+                <Activity className="w-5 h-5 mr-2 text-blue-600" />
                 Recent Activity
               </h3>
               <div className="space-y-4">
@@ -463,25 +463,25 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
                       initial={{ opacity: 0, y: 10 }}
                       animate={{ opacity: 1, y: 0 }}
                       transition={{ delay: index * 0.1 }}
-                      className="flex items-center space-x-4 p-3 admin-glass-light rounded-xl"
+                      className="flex items-center space-x-4 p-3 bg-stone-50 rounded-xl border border-stone-100"
                     >
-                      <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
+                      <div className="w-2 h-2 bg-stone-500 rounded-full animate-pulse"></div>
                       <div className="flex-1">
-                        <p className="text-white font-medium text-sm">{project.title}</p>
-                        <p className="text-white/60 text-xs">
+                        <p className="text-stone-900 font-medium text-sm">{project.title}</p>
+                        <p className="text-stone-500 text-xs">
                           Updated {new Date(project.updatedAt).toLocaleDateString()}
                         </p>
                       </div>
                       <div className="flex items-center space-x-2">
                         {project.featured && (
-                          <span className="px-2 py-1 bg-purple-500/20 text-purple-400 rounded-full text-xs">
+                          <span className="px-2 py-1 bg-stone-100 text-stone-700 rounded-full text-xs font-medium">
                             Featured
                           </span>
                         )}
-                        <span className={`px-2 py-1 rounded-full text-xs ${
+                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${
                           project.published 
-                            ? 'bg-green-500/20 text-green-400' 
-                            : 'bg-yellow-500/20 text-yellow-400'
+                            ? 'bg-stone-100 text-stone-700' 
+                            : 'bg-stone-200 text-stone-700'
                         }`}>
                           {project.published ? 'Live' : 'Draft'}
                         </span>
@@ -496,43 +496,43 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
 
       {/* Reset Modal */}
       {showResetModal && (
-        <div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+        <div className="fixed inset-0 bg-stone-900/20 backdrop-blur-sm z-50 flex items-center justify-center p-4">
           <motion.div
             initial={{ opacity: 0, scale: 0.95 }}
             animate={{ opacity: 1, scale: 1 }}
             exit={{ opacity: 0, scale: 0.95 }}
-            className="admin-glass-card rounded-2xl p-6 w-full max-w-md"
+            className="bg-white border border-stone-200 rounded-2xl p-6 w-full max-w-md shadow-xl"
           >
             <div className="flex items-center space-x-3 mb-4">
-              <div className="w-10 h-10 bg-red-500/20 rounded-lg flex items-center justify-center">
-                <AlertTriangle className="w-5 h-5 text-red-400" />
+              <div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
+                <AlertTriangle className="w-5 h-5 text-red-600" />
               </div>
               <div>
-                <h3 className="text-lg font-bold text-white">Reset Analytics Data</h3>
-                <p className="text-white/60 text-sm">This action cannot be undone</p>
+                <h3 className="text-lg font-bold text-stone-900">Reset Analytics Data</h3>
+                <p className="text-stone-500 text-sm">This action cannot be undone</p>
               </div>
             </div>
 
             <div className="space-y-4 mb-6">
               <div>
-                <label className="block text-white/80 text-sm mb-2">Reset Type</label>
+                <label className="block text-stone-600 text-sm mb-2">Reset Type</label>
                 <select
                   value={resetType}
-                  onChange={(e) => setResetType(e.target.value as 'all' | 'performance' | 'analytics')}
-                  className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-red-500"
+                  onChange={(e) => setResetType(e.target.value as 'analytics' | 'pageviews' | 'interactions' | 'performance' | 'all')}
+                  className="w-full px-3 py-2 bg-stone-50 border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-red-500"
                 >
-                  <option value="analytics">Analytics Only (views, likes, shares)</option>
-                  <option value="pageviews">Page Views Only</option>
+                  <option value="analytics">Analytics Only (project view counts)</option>
+                  <option value="pageviews">Page Views Only (all tracked visits)</option>
                   <option value="interactions">User Interactions Only</option>
-                  <option value="performance">Performance Metrics Only</option>
+                  <option value="performance">Performance Metrics Only (Lighthouse scores)</option>
                   <option value="all">Everything (Complete Reset)</option>
                 </select>
               </div>
 
-              <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3">
+              <div className="bg-red-50 border border-red-100 rounded-lg p-3">
                 <div className="flex items-start space-x-2">
-                  <AlertTriangle className="w-4 h-4 text-red-400 mt-0.5 flex-shrink-0" />
-                  <div className="text-sm text-red-300">
+                  <AlertTriangle className="w-4 h-4 text-red-500 mt-0.5 flex-shrink-0" />
+                  <div className="text-sm text-red-700">
                     <p className="font-medium mb-1">Warning:</p>
                     <p>This will permanently delete the selected analytics data. This action cannot be reversed.</p>
                   </div>
@@ -544,14 +544,14 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
               <button
                 onClick={() => setShowResetModal(false)}
                 disabled={resetting}
-                className="flex-1 px-4 py-2 admin-glass-light text-white rounded-lg hover:scale-105 transition-all disabled:opacity-50"
+                className="flex-1 px-4 py-2 bg-white border border-stone-200 text-stone-700 rounded-lg hover:bg-stone-50 transition-all disabled:opacity-50"
               >
                 Cancel
               </button>
               <button
                 onClick={resetAnalytics}
                 disabled={resetting}
-                className="flex-1 flex items-center justify-center space-x-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg hover:scale-105 transition-all disabled:opacity-50"
+                className="flex-1 flex items-center justify-center space-x-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-all disabled:opacity-50"
               >
                 {resetting ? (
                   <>

components/AnalyticsProvider.tsx

@@ -9,27 +9,126 @@ interface AnalyticsProviderProps {
 }
 
 export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }) => {
-  // Initialize Web Vitals tracking
+  // Initialize Web Vitals tracking - wrapped to prevent crashes
+  // Hooks must be called unconditionally, but the hook itself handles errors
   useWebVitals();
 
   useEffect(() => {
     if (typeof window === 'undefined') return;
 
+    // Wrap entire effect in try-catch to prevent any errors from breaking the app
+    try {
+
     // Track page view
-    const trackPageView = () => {
+    const trackPageView = async () => {
+      const path = window.location.pathname;
+      const projectMatch = path.match(/\/projects\/([^\/]+)/);
+      const projectId = projectMatch ? projectMatch[1] : null;
+
+      // Track to Umami (if available)
       trackEvent('page-view', {
-        url: window.location.pathname,
+        url: path,
         referrer: document.referrer,
         timestamp: Date.now(),
       });
+
+      // Track to our API
+      try {
+        await fetch('/api/analytics/track', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            type: 'pageview',
+            projectId: projectId,
+            page: path
+          })
+        });
+      } catch (error) {
+        // Silently fail
+        if (process.env.NODE_ENV === 'development') {
+          console.error('Error tracking page view:', error);
+        }
+      }
     };
 
-    // Track page load performance
-    trackPageLoad();
+    // Track page load performance - wrapped in try-catch
+    try {
+      trackPageLoad();
+    } catch (error) {
+      // Silently fail
+      if (process.env.NODE_ENV === 'development') {
+        console.warn('Error tracking page load:', error);
+      }
+    }
 
     // Track initial page view
     trackPageView();
 
+    // Track performance metrics to our API
+    const trackPerformanceToAPI = async () => {
+      try {
+        // Get current page path to extract project ID if on project page
+        const path = window.location.pathname;
+        const projectMatch = path.match(/\/projects\/([^\/]+)/);
+        const projectId = projectMatch ? projectMatch[1] : null;
+
+        // Wait for page to fully load
+        setTimeout(async () => {
+          try {
+            const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming | undefined;
+            const paintEntries = performance.getEntriesByType('paint');
+            const lcpEntries = performance.getEntriesByType('largest-contentful-paint');
+            
+            const fcp = paintEntries.find((e: PerformanceEntry) => e.name === 'first-contentful-paint');
+            const lcp = lcpEntries.length > 0 ? lcpEntries[lcpEntries.length - 1] : undefined;
+            
+            const performanceData = {
+              loadTime: navigation && navigation.loadEventEnd && navigation.fetchStart ? navigation.loadEventEnd - navigation.fetchStart : 0,
+              fcp: fcp ? fcp.startTime : 0,
+              lcp: lcp ? lcp.startTime : 0,
+              ttfb: navigation && navigation.responseStart && navigation.fetchStart ? navigation.responseStart - navigation.fetchStart : 0,
+              cls: 0, // Will be updated by CLS observer
+              fid: 0, // Will be updated by FID observer
+              si: 0 // Speed Index - would need to calculate
+            };
+
+            // Send performance data
+            await fetch('/api/analytics/track', {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify({
+                type: 'performance',
+                projectId: projectId,
+                page: path,
+                performance: performanceData
+              })
+            });
+          } catch (error) {
+            // Silently fail - performance tracking is not critical
+            if (process.env.NODE_ENV === 'development') {
+              console.warn('Error collecting performance data:', error);
+            }
+          }
+        }, 2000); // Wait 2 seconds for page to stabilize
+      } catch (error) {
+        // Silently fail
+        if (process.env.NODE_ENV === 'development') {
+          console.error('Error tracking performance:', error);
+        }
+      }
+    };
+
+    // Track performance after page load
+    if (document.readyState === 'complete') {
+      trackPerformanceToAPI();
+    } else {
+      window.addEventListener('load', trackPerformanceToAPI);
+    }
+
     // Track route changes (for SPA navigation)
     const handleRouteChange = () => {
       setTimeout(() => {
@@ -43,48 +142,84 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
 
     // Track user interactions
     const handleClick = (event: MouseEvent) => {
-      const target = event.target as HTMLElement;
-      const element = target.tagName.toLowerCase();
-      const className = target.className;
-      const id = target.id;
-      
-      trackEvent('click', {
-        element,
-        className: (typeof className === 'string' && className) ? className.split(' ')[0] : undefined,
-        id: id || undefined,
-        url: window.location.pathname,
-      });
+      try {
+        if (typeof window === 'undefined') return;
+        
+        const target = event.target as HTMLElement | null;
+        if (!target) return;
+        
+        const element = target.tagName ? target.tagName.toLowerCase() : 'unknown';
+        const className = target.className;
+        const id = target.id;
+        
+        trackEvent('click', {
+          element,
+          className: (typeof className === 'string' && className) ? className.split(' ')[0] : undefined,
+          id: id || undefined,
+          url: window.location.pathname,
+        });
+      } catch (error) {
+        // Silently fail - click tracking is not critical
+        if (process.env.NODE_ENV === 'development') {
+          console.warn('Error tracking click:', error);
+        }
+      }
     };
 
     // Track form submissions
     const handleSubmit = (event: SubmitEvent) => {
-      const form = event.target as HTMLFormElement;
-      trackEvent('form-submit', {
-        formId: form.id || undefined,
-        formClass: form.className || undefined,
-        url: window.location.pathname,
-      });
+      try {
+        if (typeof window === 'undefined') return;
+        
+        const form = event.target as HTMLFormElement | null;
+        if (!form) return;
+        
+        trackEvent('form-submit', {
+          formId: form.id || undefined,
+          formClass: form.className || undefined,
+          url: window.location.pathname,
+        });
+      } catch (error) {
+        // Silently fail - form tracking is not critical
+        if (process.env.NODE_ENV === 'development') {
+          console.warn('Error tracking form submit:', error);
+        }
+      }
     };
 
     // Track scroll depth
     let maxScrollDepth = 0;
     const handleScroll = () => {
-      const scrollDepth = Math.round(
-        (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100
-      );
-      
-      if (scrollDepth > maxScrollDepth) {
-        maxScrollDepth = scrollDepth;
+      try {
+        if (typeof window === 'undefined' || typeof document === 'undefined') return;
         
-        // Track scroll milestones
-        if (scrollDepth >= 25 && scrollDepth < 50 && maxScrollDepth >= 25) {
-          trackEvent('scroll-depth', { depth: 25, url: window.location.pathname });
-        } else if (scrollDepth >= 50 && scrollDepth < 75 && maxScrollDepth >= 50) {
-          trackEvent('scroll-depth', { depth: 50, url: window.location.pathname });
-        } else if (scrollDepth >= 75 && scrollDepth < 90 && maxScrollDepth >= 75) {
-          trackEvent('scroll-depth', { depth: 75, url: window.location.pathname });
-        } else if (scrollDepth >= 90 && maxScrollDepth >= 90) {
-          trackEvent('scroll-depth', { depth: 90, url: window.location.pathname });
+        const scrollHeight = document.documentElement.scrollHeight;
+        const innerHeight = window.innerHeight;
+        
+        if (scrollHeight <= innerHeight) return; // No scrollable content
+        
+        const scrollDepth = Math.round(
+          (window.scrollY / (scrollHeight - innerHeight)) * 100
+        );
+        
+        if (scrollDepth > maxScrollDepth) {
+          maxScrollDepth = scrollDepth;
+          
+          // Track scroll milestones
+          if (scrollDepth >= 25 && scrollDepth < 50 && maxScrollDepth >= 25) {
+            trackEvent('scroll-depth', { depth: 25, url: window.location.pathname });
+          } else if (scrollDepth >= 50 && scrollDepth < 75 && maxScrollDepth >= 50) {
+            trackEvent('scroll-depth', { depth: 50, url: window.location.pathname });
+          } else if (scrollDepth >= 75 && scrollDepth < 90 && maxScrollDepth >= 75) {
+            trackEvent('scroll-depth', { depth: 75, url: window.location.pathname });
+          } else if (scrollDepth >= 90 && maxScrollDepth >= 90) {
+            trackEvent('scroll-depth', { depth: 90, url: window.location.pathname });
+          }
+        }
+      } catch (error) {
+        // Silently fail - scroll tracking is not critical
+        if (process.env.NODE_ENV === 'development') {
+          console.warn('Error tracking scroll:', error);
         }
       }
     };
@@ -96,35 +231,64 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
 
     // Track errors
     const handleError = (event: ErrorEvent) => {
-      trackEvent('error', {
-        message: event.message,
-        filename: event.filename,
-        lineno: event.lineno,
-        colno: event.colno,
-        url: window.location.pathname,
-      });
+      try {
+        if (typeof window === 'undefined') return;
+        trackEvent('error', {
+          message: event.message || 'Unknown error',
+          filename: event.filename || undefined,
+          lineno: event.lineno || undefined,
+          colno: event.colno || undefined,
+          url: window.location.pathname,
+        });
+      } catch (error) {
+        // Silently fail - error tracking should not cause more errors
+        if (process.env.NODE_ENV === 'development') {
+          console.warn('Error tracking error event:', error);
+        }
+      }
     };
 
     const handleUnhandledRejection = (event: PromiseRejectionEvent) => {
-      trackEvent('unhandled-rejection', {
-        reason: event.reason?.toString(),
-        url: window.location.pathname,
-      });
+      try {
+        if (typeof window === 'undefined') return;
+        trackEvent('unhandled-rejection', {
+          reason: event.reason?.toString() || 'Unknown rejection',
+          url: window.location.pathname,
+        });
+      } catch (error) {
+        // Silently fail - error tracking should not cause more errors
+        if (process.env.NODE_ENV === 'development') {
+          console.warn('Error tracking unhandled rejection:', error);
+        }
+      }
     };
 
     window.addEventListener('error', handleError);
     window.addEventListener('unhandledrejection', handleUnhandledRejection);
 
-    // Cleanup
-    return () => {
-      window.removeEventListener('popstate', handleRouteChange);
-      document.removeEventListener('click', handleClick);
-      document.removeEventListener('submit', handleSubmit);
-      window.removeEventListener('scroll', handleScroll);
-      window.removeEventListener('error', handleError);
-      window.removeEventListener('unhandledrejection', handleUnhandledRejection);
-    };
+      // Cleanup
+      return () => {
+        try {
+          window.removeEventListener('popstate', handleRouteChange);
+          document.removeEventListener('click', handleClick);
+          document.removeEventListener('submit', handleSubmit);
+          window.removeEventListener('scroll', handleScroll);
+          window.removeEventListener('error', handleError);
+          window.removeEventListener('unhandledrejection', handleUnhandledRejection);
+        } catch {
+          // Silently fail during cleanup
+        }
+      };
+    } catch (error) {
+      // If anything fails, log but don't break the app
+      if (process.env.NODE_ENV === 'development') {
+        console.error('AnalyticsProvider initialization error:', error);
+      }
+      // Return empty cleanup function
+      return () => {};
+    }
   }, []);
 
+  // Always render children, even if analytics fails
   return <>{children}</>;
 };

components/BackgroundBlobs.tsx

@@ -27,7 +27,16 @@ const BackgroundBlobs = () => {
   const x5 = useTransform(springX, (value) => value / 15);
   const y5 = useTransform(springY, (value) => value / 15);
 
+  // Prevent hydration mismatch
+  const [mounted, setMounted] = useState(false);
+
   useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+    
     const handleMouseMove = (e: MouseEvent) => {
       const x = e.clientX - window.innerWidth / 2;
       const y = e.clientY - window.innerHeight / 2;
@@ -37,14 +46,7 @@ const BackgroundBlobs = () => {
 
     window.addEventListener("mousemove", handleMouseMove);
     return () => window.removeEventListener("mousemove", handleMouseMove);
-  }, [mouseX, mouseY]);
-
-  // Prevent hydration mismatch
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
+  }, [mouseX, mouseY, mounted]);
 
   if (!mounted) return null;
 

components/EmailManager.tsx

@@ -143,7 +143,7 @@ export const EmailManager: React.FC = () => {
       case 'high': return 'text-red-400';
       case 'medium': return 'text-yellow-400';
       case 'low': return 'text-green-400';
-      default: return 'text-blue-400';
+      default: return 'text-stone-400';
     }
   };
 
@@ -153,7 +153,7 @@ export const EmailManager: React.FC = () => {
         <motion.div
           animate={{ rotate: 360 }}
           transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
-          className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full"
+          className="w-8 h-8 border-2 border-stone-500 border-t-transparent rounded-full"
         />
       </div>
     );
@@ -164,12 +164,12 @@ export const EmailManager: React.FC = () => {
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-2xl font-bold text-white">Email Manager</h2>
-          <p className="text-white/70 mt-1">Manage your contact messages</p>
+          <h2 className="text-2xl font-bold text-stone-900">Email Manager</h2>
+          <p className="text-stone-500 mt-1">Manage your contact messages</p>
         </div>
         <button
           onClick={loadMessages}
-          className="flex items-center space-x-2 px-4 py-2 bg-blue-500/20 text-blue-400 rounded-lg hover:bg-blue-500/30 transition-colors"
+          className="flex items-center space-x-2 px-4 py-2 bg-stone-100 text-stone-700 rounded-lg hover:bg-stone-200 transition-colors"
         >
           <RefreshCw className="w-4 h-4" />
           <span>Refresh</span>
@@ -179,13 +179,13 @@ export const EmailManager: React.FC = () => {
       {/* Filters and Search */}
       <div className="flex flex-col sm:flex-row gap-4">
         <div className="relative flex-1">
-          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 w-4 h-4" />
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-stone-400 w-4 h-4" />
           <input
             type="text"
             placeholder="Search messages..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full pl-10 pr-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="w-full pl-10 pr-4 py-2 bg-white border border-stone-200 rounded-lg text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-400"
           />
         </div>
         <div className="flex space-x-2">
@@ -195,8 +195,8 @@ export const EmailManager: React.FC = () => {
               onClick={() => setFilter(filterType as 'all' | 'unread' | 'responded')}
               className={`px-4 py-2 rounded-lg transition-colors ${
                 filter === filterType
-                  ? 'bg-blue-500 text-white'
-                  : 'bg-white/10 text-white/70 hover:bg-white/20'
+                  ? 'bg-stone-900 text-stone-50'
+                  : 'bg-white border border-stone-200 text-stone-600 hover:bg-stone-50'
               }`}
             >
               {filterType.charAt(0).toUpperCase() + filterType.slice(1)}
@@ -209,7 +209,7 @@ export const EmailManager: React.FC = () => {
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="lg:col-span-1 space-y-3">
           {filteredMessages.length === 0 ? (
-            <div className="text-center py-12 text-white/50">
+            <div className="text-center py-12 text-stone-400">
               <Mail className="w-12 h-12 mx-auto mb-4 opacity-50" />
               <p>No messages found</p>
             </div>
@@ -219,36 +219,36 @@ export const EmailManager: React.FC = () => {
                 key={message.id}
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
-                className={`p-4 rounded-lg cursor-pointer transition-all ${
+                className={`p-4 rounded-lg cursor-pointer transition-all border ${
                   selectedMessage?.id === message.id
-                    ? 'bg-blue-500/20 border border-blue-500/50'
-                    : 'bg-white/5 border border-white/10 hover:bg-white/10'
+                    ? 'bg-stone-100 border-stone-300 shadow-sm'
+                    : 'bg-white border-stone-200 hover:bg-stone-50'
                 }`}
                 onClick={() => handleMessageClick(message)}
               >
                 <div className="flex items-start justify-between mb-2">
-                  <h3 className="font-semibold text-white truncate">{message.subject}</h3>
+                  <h3 className="font-semibold text-stone-900 truncate">{message.subject}</h3>
                   <div className="flex items-center space-x-2">
-                    {!message.read && <Circle className="w-3 h-3 text-blue-400" />}
-                    {message.responded && <CheckCircle className="w-3 h-3 text-green-400" />}
+                    {!message.read && <Circle className="w-3 h-3 text-stone-600" />}
+                    {message.responded && <CheckCircle className="w-3 h-3 text-green-500" />}
                   </div>
                 </div>
-                <p className="text-white/70 text-sm mb-2">{message.name}</p>
-                <p className="text-white/50 text-xs">{formatDate(message.createdAt)}</p>
+                <p className="text-stone-600 text-sm mb-2">{message.name}</p>
+                <p className="text-stone-400 text-xs">{formatDate(message.createdAt)}</p>
               </motion.div>
             ))
           )}
         </div>
 
         {/* Message Detail */}
-        <div className="lg:col-span-2 admin-glass-card p-6 rounded-xl">
+        <div className="lg:col-span-2 admin-glass-card p-6 rounded-xl bg-white border border-stone-200">
           {selectedMessage ? (
             <div className="space-y-6">
               {/* Message Header */}
               <div className="flex items-start justify-between">
                 <div className="space-y-2">
-                  <h3 className="text-xl font-bold text-white">{selectedMessage.subject}</h3>
-                  <div className="flex items-center space-x-4 text-sm text-white/70">
+                  <h3 className="text-xl font-bold text-stone-900">{selectedMessage.subject}</h3>
+                  <div className="flex items-center space-x-4 text-sm text-stone-500">
                     <div className="flex items-center space-x-2">
                       <User className="w-4 h-4" />
                       <span>{selectedMessage.name}</span>
@@ -264,15 +264,15 @@ export const EmailManager: React.FC = () => {
                   </div>
                 </div>
                 <div className="flex items-center space-x-2">
-                  {!selectedMessage.read && <Circle className="w-4 h-4 text-blue-400" />}
-                  {selectedMessage.responded && <CheckCircle className="w-4 h-4 text-green-400" />}
+                  {!selectedMessage.read && <Circle className="w-4 h-4 text-stone-600" />}
+                  {selectedMessage.responded && <CheckCircle className="w-4 h-4 text-green-500" />}
                 </div>
               </div>
 
               {/* Message Body */}
-              <div className="p-4 bg-white/5 rounded-lg border border-white/10">
-                <h4 className="text-white font-medium mb-3">Message:</h4>
-                <div className="text-white/80 whitespace-pre-wrap leading-relaxed">
+              <div className="p-4 bg-stone-50 rounded-lg border border-stone-200">
+                <h4 className="text-stone-700 font-medium mb-3">Message:</h4>
+                <div className="text-stone-600 whitespace-pre-wrap leading-relaxed">
                   {selectedMessage.message}
                 </div>
               </div>
@@ -281,21 +281,21 @@ export const EmailManager: React.FC = () => {
               <div className="flex space-x-3">
                 <button
                   onClick={() => setShowReplyModal(true)}
-                  className="flex items-center space-x-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+                  className="flex items-center space-x-2 px-4 py-2 bg-stone-900 text-stone-50 rounded-lg hover:bg-stone-800 transition-colors"
                 >
                   <Reply className="w-4 h-4" />
                   <span>Reply</span>
                 </button>
                 <button
                   onClick={() => setSelectedMessage(null)}
-                  className="px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 transition-colors"
+                  className="px-4 py-2 bg-white border border-stone-200 text-stone-600 rounded-lg hover:bg-stone-50 transition-colors"
                 >
                   Close
                 </button>
               </div>
             </div>
           ) : (
-            <div className="text-center py-12 text-white/50">
+            <div className="text-center py-12 text-stone-400">
               <Eye className="w-12 h-12 mx-auto mb-4 opacity-50" />
               <p>Select a message to view details</p>
             </div>
@@ -311,23 +311,23 @@ export const EmailManager: React.FC = () => {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+            className="fixed inset-0 bg-stone-900/20 backdrop-blur-sm z-50 flex items-center justify-center p-4"
             onClick={() => setShowReplyModal(false)}
           >
             <motion.div
               initial={{ scale: 0.9, opacity: 0 }}
               animate={{ scale: 1, opacity: 1 }}
               exit={{ scale: 0.9, opacity: 0 }}
-              className="bg-gray-900/95 backdrop-blur-xl border border-white/20 rounded-2xl p-6 max-w-2xl w-full"
+              className="bg-white border border-stone-200 rounded-2xl p-6 max-w-2xl w-full shadow-xl"
               onClick={(e) => e.stopPropagation()}
             >
               <div className="flex items-center justify-between mb-6">
-                <h2 className="text-xl font-bold text-white">Reply to {selectedMessage.name}</h2>
+                <h2 className="text-xl font-bold text-stone-900">Reply to {selectedMessage.name}</h2>
                 <button
                   onClick={() => setShowReplyModal(false)}
-                  className="p-2 hover:bg-white/10 rounded-lg transition-colors"
+                  className="p-2 hover:bg-stone-100 rounded-lg transition-colors"
                 >
-                  <X className="w-5 h-5 text-white/70" />
+                  <X className="w-5 h-5 text-stone-500" />
                 </button>
               </div>
               
@@ -336,20 +336,20 @@ export const EmailManager: React.FC = () => {
                   value={replyContent}
                   onChange={(e) => setReplyContent(e.target.value)}
                   placeholder="Type your reply..."
-                  className="w-full h-32 p-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
+                  className="w-full h-32 p-3 bg-stone-50 border border-stone-200 rounded-lg text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-400 resize-none"
                 />
                 
                 <div className="flex space-x-3">
                   <button
                     onClick={handleReply}
-                    className="flex items-center space-x-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+                    className="flex items-center space-x-2 px-4 py-2 bg-stone-900 text-stone-50 rounded-lg hover:bg-stone-800 transition-colors"
                   >
                     <Send className="w-4 h-4" />
                     <span>Send Reply</span>
                   </button>
                   <button
                     onClick={() => setShowReplyModal(false)}
-                    className="px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 transition-colors"
+                    className="px-4 py-2 bg-white border border-stone-200 text-stone-600 rounded-lg hover:bg-stone-50 transition-colors"
                   >
                     Cancel
                   </button>

components/EmailResponder.tsx

@@ -85,19 +85,19 @@ export const EmailResponder: React.FC<EmailResponderProps> = ({
 
     return (
         <>
-            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-                <div className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+            <div className="fixed inset-0 bg-stone-900/20 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+                <div className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto border border-stone-200">
                     
                     {/* Header */}
-                    <div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white p-6 rounded-t-2xl">
+                    <div className="bg-stone-50 border-b border-stone-200 text-stone-900 p-6 rounded-t-2xl">
                         <div className="flex items-center justify-between">
                             <div>
                                 <h2 className="text-2xl font-bold">📧 E-Mail Antwort senden</h2>
-                                <p className="text-blue-100 mt-1">Wähle ein schönes Template für deine Antwort</p>
+                                <p className="text-stone-500 mt-1">Wähle ein schönes Template für deine Antwort</p>
                             </div>
                             <button
                                 onClick={onClose}
-                                className="text-white hover:text-gray-200 transition-colors"
+                                className="text-stone-400 hover:text-stone-600 transition-colors"
                             >
                                 <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -110,54 +110,54 @@ export const EmailResponder: React.FC<EmailResponderProps> = ({
                     <div className="p-6">
                         
                         {/* Contact Info */}
-                        <div className="bg-gray-50 rounded-xl p-4 mb-6">
-                            <h3 className="font-semibold text-gray-800 mb-2">📬 Kontakt-Informationen</h3>
+                        <div className="bg-stone-50 border border-stone-200 rounded-xl p-4 mb-6">
+                            <h3 className="font-semibold text-stone-800 mb-2">📬 Kontakt-Informationen</h3>
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                 <div>
-                                    <span className="text-sm text-gray-600">Name:</span>
-                                    <p className="font-medium text-gray-900">{contactName}</p>
+                                    <span className="text-sm text-stone-500">Name:</span>
+                                    <p className="font-medium text-stone-900">{contactName}</p>
                                 </div>
                                 <div>
-                                    <span className="text-sm text-gray-600">E-Mail:</span>
-                                    <p className="font-medium text-gray-900">{contactEmail}</p>
+                                    <span className="text-sm text-stone-500">E-Mail:</span>
+                                    <p className="font-medium text-stone-900">{contactEmail}</p>
                                 </div>
                             </div>
                         </div>
 
                         {/* Original Message Preview */}
-                        <div className="bg-blue-50 rounded-xl p-4 mb-6">
-                            <h3 className="font-semibold text-blue-800 mb-2">💬 Ursprüngliche Nachricht</h3>
-                            <div className="bg-white rounded-lg p-3 border-l-4 border-blue-500">
-                                <p className="text-gray-700 text-sm whitespace-pre-wrap">{originalMessage}</p>
+                        <div className="bg-stone-50 border border-stone-200 rounded-xl p-4 mb-6">
+                            <h3 className="font-semibold text-stone-800 mb-2">💬 Ursprüngliche Nachricht</h3>
+                            <div className="bg-white rounded-lg p-3 border-l-4 border-blue-500 shadow-sm">
+                                <p className="text-stone-700 text-sm whitespace-pre-wrap">{originalMessage}</p>
                             </div>
                         </div>
 
                         {/* Template Selection */}
                         <div className="mb-6">
-                            <h3 className="font-semibold text-gray-800 mb-4">🎨 Template auswählen</h3>
+                            <h3 className="font-semibold text-stone-800 mb-4">🎨 Template auswählen</h3>
                             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                                 {Object.entries(templates).map(([key, template]) => (
                                     <div
                                         key={key}
                                         className={`relative cursor-pointer rounded-xl border-2 transition-all duration-200 ${
                                             selectedTemplate === key
-                                                ? 'border-blue-500 bg-blue-50 shadow-lg scale-105'
-                                                : 'border-gray-200 hover:border-gray-300 hover:shadow-md'
+                                                ? 'border-stone-500 bg-stone-50 shadow-md'
+                                                : 'border-stone-200 hover:border-stone-300 hover:shadow-sm'
                                         }`}
                                         onClick={() => setSelectedTemplate(key as keyof typeof templates)}
                                     >
-                                        <div className={`bg-gradient-to-r ${template.color} text-white p-4 rounded-t-xl`}>
+                                        <div className={`p-4 rounded-t-xl bg-white border-b border-stone-100`}>
                                             <div className="text-center">
                                                 <div className="text-3xl mb-2">{template.icon}</div>
-                                                <h4 className="font-bold text-lg">{template.name}</h4>
+                                                <h4 className="font-bold text-lg text-stone-900">{template.name}</h4>
                                             </div>
                                         </div>
                                         <div className="p-4">
-                                            <p className="text-sm text-gray-600 text-center">{template.description}</p>
+                                            <p className="text-sm text-stone-600 text-center">{template.description}</p>
                                         </div>
                                         {selectedTemplate === key && (
                                             <div className="absolute top-2 right-2">
-                                                <div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
+                                                <div className="w-6 h-6 bg-stone-600 rounded-full flex items-center justify-center">
                                                     <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                                         <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                                                     </svg>
@@ -171,15 +171,15 @@ export const EmailResponder: React.FC<EmailResponderProps> = ({
 
                         {/* Preview */}
                         <div className="mb-6">
-                            <h3 className="font-semibold text-gray-800 mb-4">👀 Vorschau</h3>
-                            <div className="bg-gray-100 rounded-xl p-4">
-                                <div className="bg-white rounded-lg shadow-sm border">
-                                    <div className={`bg-gradient-to-r ${templates[selectedTemplate].color} text-white p-4 rounded-t-lg`}>
-                                        <h4 className="font-bold text-lg">{templates[selectedTemplate].icon} {templates[selectedTemplate].name}</h4>
-                                        <p className="text-sm opacity-90">An: {contactName}</p>
+                            <h3 className="font-semibold text-stone-800 mb-4">👀 Vorschau</h3>
+                            <div className="bg-stone-100 rounded-xl p-4 border border-stone-200">
+                                <div className="bg-white rounded-lg shadow-sm border border-stone-200">
+                                    <div className="p-4 rounded-t-lg bg-stone-50 border-b border-stone-100">
+                                        <h4 className="font-bold text-lg text-stone-900">{templates[selectedTemplate].icon} {templates[selectedTemplate].name}</h4>
+                                        <p className="text-sm text-stone-500">An: {contactName}</p>
                                     </div>
                                     <div className="p-4">
-                                        <p className="text-sm text-gray-600">
+                                        <p className="text-sm text-stone-600">
                                             {selectedTemplate === 'welcome' && 'Freundliche Begrüßung mit Portfolio-Links und nächsten Schritten'}
                                             {selectedTemplate === 'project' && 'Professionelle Projekt-Antwort mit Arbeitsprozess und CTA'}
                                             {selectedTemplate === 'quick' && 'Schnelle, kurze Bestätigung der Nachricht'}
@@ -193,14 +193,14 @@ export const EmailResponder: React.FC<EmailResponderProps> = ({
                         <div className="flex gap-4">
                             <button
                                 onClick={onClose}
-                                className="flex-1 px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors font-medium"
+                                className="flex-1 px-6 py-3 border border-stone-300 text-stone-700 rounded-xl hover:bg-stone-50 transition-colors font-medium"
                             >
                                 Abbrechen
                             </button>
                             <button
                                 onClick={handleSendEmail}
                                 disabled={isLoading}
-                                className="flex-1 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:from-blue-700 hover:to-purple-700 transition-all font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                                className="flex-1 px-6 py-3 bg-stone-900 text-white rounded-xl hover:bg-stone-800 transition-all font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                             >
                                 {isLoading ? (
                                     <>

components/ErrorBoundary.tsx

@@ -12,29 +12,31 @@ export default class ErrorBoundary extends React.Component<
     this.state = { hasError: false };
   }
 
-  static getDerivedStateFromError(error: any) {
+  static getDerivedStateFromError(_error: unknown) {
     return { hasError: true };
   }
 
-  componentDidCatch(error: any, errorInfo: any) {
+  componentDidCatch(error: unknown, errorInfo: React.ErrorInfo) {
     console.error("ErrorBoundary caught an error:", error, errorInfo);
   }
 
   render() {
     if (this.state.hasError) {
-      return (
-        <div className="p-4 m-4 bg-red-50 border border-red-200 rounded text-red-800">
-          <h2>Something went wrong!</h2>
-          <button 
-            className="mt-2 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
-            onClick={() => this.setState({ hasError: false })}
-          >
-            Try again
-          </button>
-        </div>
-      );
+      // Still render children to prevent white screen - just log the error
+      if (process.env.NODE_ENV === 'development') {
+        return (
+          <div>
+            <div className="p-2 m-2 bg-yellow-50 border border-yellow-200 rounded text-yellow-800 text-xs">
+              ⚠️ Error boundary triggered - rendering children anyway
+            </div>
+            {this.props.children}
+          </div>
+        );
+      }
+      // In production, just render children silently
+      return this.props.children;
     }
 
     return this.props.children;
   }
-}
+}

components/GhostEditor.tsx

@@ -1,733 +0,0 @@
-'use client';
-
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import {
-  Save,
-  X,
-  Eye,
-  Settings,
-  Globe,
-  Github,
-  Image as ImageIcon,
-  Bold,
-  Italic,
-  List,
-  Quote,
-  Code,
-  Link2,
-  ListOrdered,
-  Underline,
-  Strikethrough,
-  Type,
-  Columns
-} from 'lucide-react';
-
-interface Project {
-  id: string;
-  title: string;
-  description: string;
-  content?: string;
-  category: string;
-  difficulty?: string;
-  tags?: string[];
-  featured: boolean;
-  published: boolean;
-  github?: string;
-  live?: string;
-  image?: string;
-  createdAt: string;
-  updatedAt: string;
-}
-
-interface GhostEditorProps {
-  isOpen: boolean;
-  onClose: () => void;
-  project?: Project | null;
-  onSave: (projectData: Partial<Project>) => void;
-  isCreating: boolean;
-}
-
-export const GhostEditor: React.FC<GhostEditorProps> = ({
-  isOpen,
-  onClose,
-  project,
-  onSave,
-  isCreating
-}) => {
-  const [title, setTitle] = useState('');
-  const [description, setDescription] = useState('');
-  const [content, setContent] = useState('');
-  const [category, setCategory] = useState('Web Development');
-  const [tags, setTags] = useState<string[]>([]);
-  const [github, setGithub] = useState('');
-  const [live, setLive] = useState('');
-  const [featured, setFeatured] = useState(false);
-  const [published, setPublished] = useState(false);
-  const [difficulty, setDifficulty] = useState('Intermediate');
-  
-  // Editor UI state
-  const [viewMode, setViewMode] = useState<'edit' | 'preview' | 'split'>('split');
-  const [showSettings, setShowSettings] = useState(false);
-  const [wordCount, setWordCount] = useState(0);
-  const [readingTime, setReadingTime] = useState(0);
-
-  const titleRef = useRef<HTMLTextAreaElement>(null);
-  const contentRef = useRef<HTMLTextAreaElement>(null);
-  const previewRef = useRef<HTMLDivElement>(null);
-
-  const categories = ['Web Development', 'Full-Stack', 'Web Application', 'Mobile App', 'Design'];
-  const difficulties = ['Beginner', 'Intermediate', 'Advanced', 'Expert'];
-
-  useEffect(() => {
-    if (project && !isCreating) {
-      setTitle(project.title);
-      setDescription(project.description);
-      setContent(project.content || '');
-      setCategory(project.category);
-      setTags(project.tags || []);
-      setGithub(project.github || '');
-      setLive(project.live || '');
-      setFeatured(project.featured);
-      setPublished(project.published);
-      setDifficulty(project.difficulty || 'Intermediate');
-    } else {
-      // Reset for new project
-      setTitle('');
-      setDescription('');
-      setContent('');
-      setCategory('Web Development');
-      setTags([]);
-      setGithub('');
-      setLive('');
-      setFeatured(false);
-      setPublished(false);
-      setDifficulty('Intermediate');
-    }
-  }, [project, isCreating, isOpen]);
-
-  // Calculate word count and reading time
-  useEffect(() => {
-    const words = content.trim().split(/\s+/).filter(word => word.length > 0).length;
-    setWordCount(words);
-    setReadingTime(Math.ceil(words / 200)); // Average reading speed: 200 words/minute
-  }, [content]);
-
-  const handleSave = () => {
-    const projectData = {
-      title,
-      description,
-      content,
-      category,
-      tags,
-      github,
-      live,
-      featured,
-      published,
-      difficulty
-    };
-    onSave(projectData);
-  };
-
-  const addTag = (tag: string) => {
-    if (tag.trim() && !tags.includes(tag.trim())) {
-      setTags([...tags, tag.trim()]);
-    }
-  };
-
-  const removeTag = (tagToRemove: string) => {
-    setTags(tags.filter(tag => tag !== tagToRemove));
-  };
-
-  const insertMarkdown = useCallback((syntax: string, selectedText: string = '') => {
-    if (!contentRef.current) return;
-    
-    const textarea = contentRef.current;
-    const start = textarea.selectionStart;
-    const end = textarea.selectionEnd;
-    const selection = selectedText || content.substring(start, end);
-    
-    let newText = '';
-    let cursorOffset = 0;
-    
-    switch (syntax) {
-      case 'bold':
-        newText = `**${selection || 'bold text'}**`;
-        cursorOffset = selection ? newText.length : 2;
-        break;
-      case 'italic':
-        newText = `*${selection || 'italic text'}*`;
-        cursorOffset = selection ? newText.length : 1;
-        break;
-      case 'underline':
-        newText = `<u>${selection || 'underlined text'}</u>`;
-        cursorOffset = selection ? newText.length : 3;
-        break;
-      case 'strikethrough':
-        newText = `~~${selection || 'strikethrough text'}~~`;
-        cursorOffset = selection ? newText.length : 2;
-        break;
-      case 'heading1':
-        newText = `# ${selection || 'Heading 1'}`;
-        cursorOffset = selection ? newText.length : 2;
-        break;
-      case 'heading2':
-        newText = `## ${selection || 'Heading 2'}`;
-        cursorOffset = selection ? newText.length : 3;
-        break;
-      case 'heading3':
-        newText = `### ${selection || 'Heading 3'}`;
-        cursorOffset = selection ? newText.length : 4;
-        break;
-      case 'list':
-        newText = `- ${selection || 'List item'}`;
-        cursorOffset = selection ? newText.length : 2;
-        break;
-      case 'list-ordered':
-        newText = `1. ${selection || 'List item'}`;
-        cursorOffset = selection ? newText.length : 3;
-        break;
-      case 'quote':
-        newText = `> ${selection || 'Quote'}`;
-        cursorOffset = selection ? newText.length : 2;
-        break;
-      case 'code':
-        if (selection.includes('\n')) {
-          newText = `\`\`\`\n${selection || 'code block'}\n\`\`\``;
-          cursorOffset = selection ? newText.length : 4;
-        } else {
-          newText = `\`${selection || 'code'}\``;
-          cursorOffset = selection ? newText.length : 1;
-        }
-        break;
-      case 'link':
-        newText = `[${selection || 'link text'}](url)`;
-        cursorOffset = selection ? newText.length - 4 : newText.length - 4;
-        break;
-      case 'image':
-        newText = `![${selection || 'alt text'}](image-url)`;
-        cursorOffset = selection ? newText.length - 11 : newText.length - 11;
-        break;
-      case 'divider':
-        newText = '\n---\n';
-        cursorOffset = newText.length;
-        break;
-      default:
-        return;
-    }
-    
-    const newContent = content.substring(0, start) + newText + content.substring(end);
-    setContent(newContent);
-    
-    // Focus and set cursor position
-    setTimeout(() => {
-      textarea.focus();
-      const newPosition = start + cursorOffset;
-      textarea.setSelectionRange(newPosition, newPosition);
-    }, 0);
-  }, [content]);
-
-  const autoResizeTextarea = (element: HTMLTextAreaElement) => {
-    element.style.height = 'auto';
-    element.style.height = element.scrollHeight + 'px';
-  };
-
-  // Render markdown preview
-  const renderMarkdownPreview = (markdown: string) => {
-    // Simple markdown renderer for preview
-    const html = markdown
-      // Headers
-      .replace(/^### (.*$)/gim, '<h3 class="text-xl font-semibold text-white mb-3 mt-6">$1</h3>')
-      .replace(/^## (.*$)/gim, '<h2 class="text-2xl font-bold text-white mb-4 mt-8">$1</h2>')
-      .replace(/^# (.*$)/gim, '<h1 class="text-3xl font-bold text-white mb-6 mt-8">$1</h1>')
-      // Bold and Italic
-      .replace(/\*\*(.*?)\*\*/g, '<strong class="font-bold">$1</strong>')
-      .replace(/\*(.*?)\*/g, '<em class="italic">$1</em>')
-      // Underline and Strikethrough
-      .replace(/<u>(.*?)<\/u>/g, '<u class="underline">$1</u>')
-      .replace(/~~(.*?)~~/g, '<del class="line-through opacity-75">$1</del>')
-      // Code
-      .replace(/```([^`]+)```/g, '<pre class="bg-gray-800 border border-gray-700 rounded-lg p-4 my-4 overflow-x-auto"><code class="text-green-400 font-mono text-sm">$1</code></pre>')
-      .replace(/`([^`]+)`/g, '<code class="bg-gray-800 border border-gray-700 rounded px-2 py-1 font-mono text-sm text-green-400">$1</code>')
-      // Lists
-      .replace(/^\- (.*$)/gim, '<li class="ml-4 mb-1">• $1</li>')
-      .replace(/^\d+\. (.*$)/gim, '<li class="ml-4 mb-1 list-decimal">$1</li>')
-      // Links
-      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="text-blue-400 hover:text-blue-300 underline" target="_blank">$1</a>')
-      // Images
-      .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" class="max-w-full h-auto rounded-lg my-4" />')
-      // Quotes
-      .replace(/^> (.*$)/gim, '<blockquote class="border-l-4 border-blue-500 pl-4 py-2 my-4 bg-gray-800/50 italic text-gray-300">$1</blockquote>')
-      // Dividers
-      .replace(/^---$/gim, '<hr class="border-gray-600 my-8" />')
-      // Paragraphs
-      .replace(/\n\n/g, '</p><p class="mb-4 text-gray-200 leading-relaxed">')
-      .replace(/\n/g, '<br />');
-    
-    return `<div class="prose prose-invert max-w-none"><p class="mb-4 text-gray-200 leading-relaxed">${html}</p></div>`;
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <AnimatePresence>
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        exit={{ opacity: 0 }}
-        className="fixed inset-0 bg-black/95 backdrop-blur-sm z-50"
-      >
-        {/* Professional Ghost Editor */}
-        <div className="h-full flex flex-col bg-gray-900">
-          {/* Top Navigation Bar */}
-          <div className="flex items-center justify-between p-4 border-b border-gray-700 bg-gray-800">
-            <div className="flex items-center space-x-4">
-              <button
-                onClick={onClose}
-                className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded-lg transition-colors"
-              >
-                <X className="w-5 h-5" />
-              </button>
-              
-              <div className="flex items-center space-x-2">
-                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                <span className="text-sm font-medium text-white">
-                  {isCreating ? 'New Project' : 'Editing Project'}
-                </span>
-              </div>
-
-              <div className="flex items-center space-x-2">
-                {published ? (
-                  <span className="px-3 py-1 bg-green-600 text-white rounded-full text-sm font-medium">
-                    Published
-                  </span>
-                ) : (
-                  <span className="px-3 py-1 bg-gray-600 text-gray-300 rounded-full text-sm font-medium">
-                    Draft
-                  </span>
-                )}
-                {featured && (
-                  <span className="px-3 py-1 bg-purple-600 text-white rounded-full text-sm font-medium">
-                    Featured
-                  </span>
-                )}
-              </div>
-            </div>
-            
-            {/* View Mode Toggle */}
-            <div className="flex items-center space-x-2">
-              <div className="flex items-center bg-gray-700 rounded-lg p-1">
-                <button
-                  onClick={() => setViewMode('edit')}
-                  className={`p-2 rounded transition-colors ${
-                    viewMode === 'edit' ? 'bg-blue-600 text-white' : 'text-gray-400 hover:text-white'
-                  }`}
-                  title="Edit Mode"
-                >
-                  <Type className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={() => setViewMode('split')}
-                  className={`p-2 rounded transition-colors ${
-                    viewMode === 'split' ? 'bg-blue-600 text-white' : 'text-gray-400 hover:text-white'
-                  }`}
-                  title="Split View"
-                >
-                  <Columns className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={() => setViewMode('preview')}
-                  className={`p-2 rounded transition-colors ${
-                    viewMode === 'preview' ? 'bg-blue-600 text-white' : 'text-gray-400 hover:text-white'
-                  }`}
-                  title="Preview Mode"
-                >
-                  <Eye className="w-4 h-4" />
-                </button>
-              </div>
-
-              <button
-                onClick={() => setShowSettings(!showSettings)}
-                className={`p-2 rounded-lg transition-colors ${
-                  showSettings ? 'bg-blue-600 text-white' : 'text-gray-400 hover:text-white hover:bg-gray-700'
-                }`}
-              >
-                <Settings className="w-5 h-5" />
-              </button>
-              
-              <button
-                onClick={handleSave}
-                className="flex items-center space-x-2 px-6 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors font-medium"
-              >
-                <Save className="w-4 h-4" />
-                <span>Save</span>
-              </button>
-            </div>
-          </div>
-
-          {/* Rich Text Toolbar */}
-          <div className="flex items-center justify-between p-3 border-b border-gray-700 bg-gray-800/50">
-            <div className="flex items-center space-x-1">
-              {/* Text Formatting */}
-              <div className="flex items-center space-x-1 pr-2 border-r border-gray-600">
-                <button
-                  onClick={() => insertMarkdown('bold')}
-                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                  title="Bold (Ctrl+B)"
-                >
-                  <Bold className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={() => insertMarkdown('italic')}
-                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                  title="Italic (Ctrl+I)"
-                >
-                  <Italic className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={() => insertMarkdown('underline')}
-                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                  title="Underline"
-                >
-                  <Underline className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={() => insertMarkdown('strikethrough')}
-                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                  title="Strikethrough"
-                >
-                  <Strikethrough className="w-4 h-4" />
-                </button>
-              </div>
-
-              {/* Headers */}
-              <div className="flex items-center space-x-1 px-2 border-r border-gray-600">
-                <button
-                  onClick={() => insertMarkdown('heading1')}
-                  className="px-2 py-1 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors text-sm font-bold"
-                  title="Heading 1"
-                >
-                  H1
-                </button>
-                <button
-                  onClick={() => insertMarkdown('heading2')}
-                  className="px-2 py-1 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors text-sm font-bold"
-                  title="Heading 2"
-                >
-                  H2
-                </button>
-                <button
-                  onClick={() => insertMarkdown('heading3')}
-                  className="px-2 py-1 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors text-sm font-bold"
-                  title="Heading 3"
-                >
-                  H3
-                </button>
-              </div>
-
-              {/* Lists */}
-              <div className="flex items-center space-x-1 px-2 border-r border-gray-600">
-                <button
-                  onClick={() => insertMarkdown('list')}
-                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                  title="Bullet List"
-                >
-                  <List className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={() => insertMarkdown('list-ordered')}
-                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                  title="Numbered List"
-                >
-                  <ListOrdered className="w-4 h-4" />
-                </button>
-              </div>
-
-              {/* Insert Elements */}
-              <div className="flex items-center space-x-1 px-2">
-                <button
-                  onClick={() => insertMarkdown('link')}
-                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                  title="Insert Link"
-                >
-                  <Link2 className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={() => insertMarkdown('image')}
-                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                  title="Insert Image"
-                >
-                  <ImageIcon className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={() => insertMarkdown('code')}
-                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                  title="Code Block"
-                >
-                  <Code className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={() => insertMarkdown('quote')}
-                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                  title="Quote"
-                >
-                  <Quote className="w-4 h-4" />
-                </button>
-              </div>
-            </div>
-
-            {/* Stats */}
-            <div className="flex items-center space-x-4 text-sm text-gray-400">
-              <span>{wordCount} words</span>
-              <span>{readingTime} min read</span>
-            </div>
-          </div>
-
-          {/* Main Editor Area */}
-          <div className="flex-1 flex overflow-hidden">
-            {/* Content Area */}
-            <div className="flex-1 flex">
-              {/* Editor Pane */}
-              {(viewMode === 'edit' || viewMode === 'split') && (
-                <div className={`${viewMode === 'split' ? 'w-1/2' : 'w-full'} flex flex-col bg-gray-900`}>
-                  {/* Title & Description */}
-                  <div className="p-8 border-b border-gray-800">
-                    <textarea
-                      ref={titleRef}
-                      value={title}
-                      onChange={(e) => {
-                        setTitle(e.target.value);
-                        autoResizeTextarea(e.target);
-                      }}
-                      onInput={(e) => autoResizeTextarea(e.target as HTMLTextAreaElement)}
-                      placeholder="Project title..."
-                      className="w-full text-5xl font-bold text-white bg-transparent border-none outline-none placeholder-gray-500 resize-none overflow-hidden leading-tight mb-6"
-                      rows={1}
-                    />
-                    <textarea
-                      value={description}
-                      onChange={(e) => {
-                        setDescription(e.target.value);
-                        autoResizeTextarea(e.target);
-                      }}
-                      onInput={(e) => autoResizeTextarea(e.target as HTMLTextAreaElement)}
-                      placeholder="Brief description of your project..."
-                      className="w-full text-xl text-gray-300 bg-transparent border-none outline-none placeholder-gray-500 resize-none overflow-hidden leading-relaxed"
-                      rows={1}
-                    />
-                  </div>
-
-                  {/* Content Editor */}
-                  <div className="flex-1 p-8">
-                    <textarea
-                      ref={contentRef}
-                      value={content}
-                      onChange={(e) => setContent(e.target.value)}
-                      placeholder="Start writing your story...
-
-Use Markdown for formatting:
-**Bold text** or *italic text*
-# Large heading
-## Medium heading
-### Small heading
-- Bullet points
-1. Numbered lists
-> Quotes
-`code`
-[Links](https://example.com)
-![Images](image-url)"
-                      className="w-full h-full text-lg text-white bg-transparent border-none outline-none placeholder-gray-600 resize-none font-mono leading-relaxed focus:ring-0"
-                      style={{ minHeight: '500px' }}
-                    />
-                  </div>
-                </div>
-              )}
-
-              {/* Preview Pane */}
-              {(viewMode === 'preview' || viewMode === 'split') && (
-                <div className={`${viewMode === 'split' ? 'w-1/2 border-l border-gray-700' : 'w-full'} bg-gray-850 overflow-y-auto`}>
-                  <div className="p-8">
-                    {/* Preview Header */}
-                    <div className="mb-8 border-b border-gray-700 pb-8">
-                      <h1 className="text-5xl font-bold text-white mb-6 leading-tight">
-                        {title || 'Project title...'}
-                      </h1>
-                      <p className="text-xl text-gray-300 leading-relaxed">
-                        {description || 'Brief description of your project...'}
-                      </p>
-                    </div>
-
-                    {/* Preview Content */}
-                    <div 
-                      ref={previewRef}
-                      className="prose prose-invert max-w-none"
-                      dangerouslySetInnerHTML={{ 
-                        __html: content ? renderMarkdownPreview(content) : '<p class="text-gray-500 italic">Start writing to see the preview...</p>' 
-                      }}
-                    />
-                  </div>
-                </div>
-              )}
-            </div>
-
-            {/* Settings Sidebar */}
-            <AnimatePresence>
-              {showSettings && (
-                <motion.div
-                  initial={{ x: 320 }}
-                  animate={{ x: 0 }}
-                  exit={{ x: 320 }}
-                  className="w-80 bg-gray-800 border-l border-gray-700 flex flex-col"
-                >
-                  <div className="p-6 border-b border-gray-700">
-                    <h3 className="text-lg font-semibold text-white">Project Settings</h3>
-                  </div>
-
-                  <div className="flex-1 overflow-y-auto p-6 space-y-8">
-                    {/* Status */}
-                    <div>
-                      <h4 className="text-sm font-medium text-gray-400 uppercase tracking-wider mb-4">Publication</h4>
-                      <div className="space-y-4">
-                        <div className="flex items-center justify-between">
-                          <span className="text-white">Published</span>
-                          <button
-                            onClick={() => setPublished(!published)}
-                            className={`w-12 h-6 rounded-full transition-colors relative ${
-                              published ? 'bg-green-600' : 'bg-gray-600'
-                            }`}
-                          >
-                            <div className={`w-4 h-4 bg-white rounded-full transition-transform absolute top-1 ${
-                              published ? 'translate-x-7' : 'translate-x-1'
-                            }`} />
-                          </button>
-                        </div>
-                        
-                        <div className="flex items-center justify-between">
-                          <span className="text-white">Featured</span>
-                          <button
-                            onClick={() => setFeatured(!featured)}
-                            className={`w-12 h-6 rounded-full transition-colors relative ${
-                              featured ? 'bg-purple-600' : 'bg-gray-600'
-                            }`}
-                          >
-                            <div className={`w-4 h-4 bg-white rounded-full transition-transform absolute top-1 ${
-                              featured ? 'translate-x-7' : 'translate-x-1'
-                            }`} />
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Category & Difficulty */}
-                    <div>
-                      <h4 className="text-sm font-medium text-gray-400 uppercase tracking-wider mb-4">Classification</h4>
-                      <div className="space-y-4">
-                        <div>
-                          <label className="block text-gray-300 text-sm mb-2">Category</label>
-                          <select
-                            value={category}
-                            onChange={(e) => setCategory(e.target.value)}
-                            className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-                          >
-                            {categories.map(cat => (
-                              <option key={cat} value={cat}>{cat}</option>
-                            ))}
-                          </select>
-                        </div>
-                        
-                        <div>
-                          <label className="block text-gray-300 text-sm mb-2">Difficulty</label>
-                          <select
-                            value={difficulty}
-                            onChange={(e) => setDifficulty(e.target.value)}
-                            className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-                          >
-                            {difficulties.map(diff => (
-                              <option key={diff} value={diff}>{diff}</option>
-                            ))}
-                          </select>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Links */}
-                    <div>
-                      <h4 className="text-sm font-medium text-gray-400 uppercase tracking-wider mb-4">External Links</h4>
-                      <div className="space-y-4">
-                        <div>
-                          <label className="block text-gray-300 text-sm mb-2">
-                            <Github className="w-4 h-4 inline mr-1" />
-                            GitHub Repository
-                          </label>
-                          <input
-                            type="url"
-                            value={github}
-                            onChange={(e) => setGithub(e.target.value)}
-                            placeholder="https://github.com/..."
-                            className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                          />
-                        </div>
-                        
-                        <div>
-                          <label className="block text-gray-300 text-sm mb-2">
-                            <Globe className="w-4 h-4 inline mr-1" />
-                            Live Demo
-                          </label>
-                          <input
-                            type="url"
-                            value={live}
-                            onChange={(e) => setLive(e.target.value)}
-                            placeholder="https://..."
-                            className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                          />
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Tags */}
-                    <div>
-                      <h4 className="text-sm font-medium text-gray-400 uppercase tracking-wider mb-4">Tags</h4>
-                      <div className="space-y-3">
-                        <input
-                          type="text"
-                          placeholder="Add a tag and press Enter"
-                          onKeyDown={(e) => {
-                            if (e.key === 'Enter') {
-                              e.preventDefault();
-                              addTag(e.currentTarget.value);
-                              e.currentTarget.value = '';
-                            }
-                          }}
-                          className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                        />
-                        
-                        {tags.length > 0 && (
-                          <div className="flex flex-wrap gap-2">
-                            {tags.map((tag) => (
-                              <span
-                                key={tag}
-                                className="inline-flex items-center space-x-1 px-3 py-1 bg-blue-600 text-white rounded-full text-sm"
-                              >
-                                <span>{tag}</span>
-                                <button
-                                  onClick={() => removeTag(tag)}
-                                  className="text-blue-200 hover:text-white"
-                                >
-                                  <X className="w-3 h-3" />
-                                </button>
-                              </span>
-                            ))}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </div>
-        </div>
-      </motion.div>
-    </AnimatePresence>
-  );
-};

components/ImportExport.tsx

@@ -99,23 +99,23 @@ export default function ImportExport() {
   };
 
   return (
-    <div className="admin-glass-card rounded-lg p-6">
-      <h3 className="text-lg font-semibold text-white mb-4 flex items-center">
-        <FileText className="w-5 h-5 mr-2 text-blue-400" />
+    <div className="bg-white border border-stone-200 rounded-xl p-6">
+      <h3 className="text-lg font-semibold text-stone-900 mb-4 flex items-center">
+        <FileText className="w-5 h-5 mr-2 text-stone-600" />
         Import & Export
       </h3>
       
       <div className="space-y-4">
         {/* Export Section */}
-        <div className="admin-glass-light rounded-lg p-4">
-          <h4 className="font-medium text-white mb-2">Export Projekte</h4>
-          <p className="text-sm text-white/70 mb-3">
+        <div className="bg-stone-50 border border-stone-200 rounded-xl p-4">
+          <h4 className="font-medium text-stone-900 mb-2">Export Projekte</h4>
+          <p className="text-sm text-stone-600 mb-3">
             Alle Projekte als JSON-Datei herunterladen
           </p>
           <button
             onClick={handleExport}
             disabled={isExporting}
-            className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 hover:scale-105 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+            className="flex items-center px-4 py-2 bg-stone-900 text-white rounded-lg hover:bg-stone-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <Download className="w-4 h-4 mr-2" />
             {isExporting ? 'Exportiere...' : 'Exportieren'}
@@ -123,12 +123,12 @@ export default function ImportExport() {
         </div>
 
         {/* Import Section */}
-        <div className="admin-glass-light rounded-lg p-4">
-          <h4 className="font-medium text-white mb-2">Import Projekte</h4>
-          <p className="text-sm text-white/70 mb-3">
+        <div className="bg-stone-50 border border-stone-200 rounded-xl p-4">
+          <h4 className="font-medium text-stone-900 mb-2">Import Projekte</h4>
+          <p className="text-sm text-stone-600 mb-3">
             JSON-Datei mit Projekten hochladen
           </p>
-          <label className="flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 hover:scale-105 transition-all cursor-pointer">
+          <label className="flex items-center px-4 py-2 bg-stone-900 text-white rounded-lg hover:bg-stone-800 transition-colors cursor-pointer w-fit">
             <Upload className="w-4 h-4 mr-2" />
             {isImporting ? 'Importiere...' : 'Datei auswählen'}
             <input
@@ -143,16 +143,16 @@ export default function ImportExport() {
 
         {/* Import Results */}
         {importResult && (
-          <div className="admin-glass-light rounded-lg p-4">
-            <h4 className="font-medium text-white mb-2 flex items-center">
+          <div className="bg-stone-50 border border-stone-200 rounded-xl p-4">
+            <h4 className="font-medium text-stone-900 mb-2 flex items-center">
               {importResult.success ? (
-                <CheckCircle className="w-5 h-5 mr-2 text-green-400" />
+                <CheckCircle className="w-5 h-5 mr-2 text-green-600" />
               ) : (
-                <AlertCircle className="w-5 h-5 mr-2 text-red-400" />
+                <AlertCircle className="w-5 h-5 mr-2 text-red-600" />
               )}
               Import Ergebnis
             </h4>
-            <div className="text-sm text-white/70 space-y-1">
+            <div className="text-sm text-stone-600 space-y-1">
               <p><strong>Importiert:</strong> {importResult.results.imported}</p>
               <p><strong>Übersprungen:</strong> {importResult.results.skipped}</p>
               {importResult.results.errors.length > 0 && (
@@ -160,7 +160,7 @@ export default function ImportExport() {
                   <p><strong>Fehler:</strong></p>
                   <ul className="list-disc list-inside ml-4">
                     {importResult.results.errors.map((error, index) => (
-                      <li key={index} className="text-red-400">{error}</li>
+                      <li key={index} className="text-red-600">{error}</li>
                     ))}
                   </ul>
                 </div>

components/ModernAdminDashboard.tsx

@@ -157,14 +157,24 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
   const stats = {
     totalProjects: projects.length,
     publishedProjects: projects.filter(p => p.published).length,
-    totalViews: (analytics?.totalViews as number) || projects.reduce((sum, p) => sum + (p.analytics?.views || 0), 0),
+    totalViews: ((analytics?.overview as Record<string, unknown>)?.totalViews as number) || (analytics?.totalViews as number) || projects.reduce((sum, p) => sum + (p.analytics?.views || 0), 0),
     unreadEmails: emails.filter(e => !(e.read as boolean)).length,
-    avgPerformance: (analytics?.avgPerformance as number) || (projects.length > 0 ?
-      Math.round(projects.reduce((sum, p) => sum + (p.performance?.lighthouse || 90), 0) / projects.length) : 90),
+    avgPerformance: (() => {
+      // Only show real performance data, not defaults
+      const projectsWithPerf = projects.filter(p => {
+        const perf = p.performance as Record<string, unknown> || {};
+        return (perf.lighthouse as number || 0) > 0;
+      });
+      if (projectsWithPerf.length === 0) return 0;
+      return Math.round(projectsWithPerf.reduce((sum, p) => {
+        const perf = p.performance as Record<string, unknown> || {};
+        return sum + (perf.lighthouse as number || 0);
+      }, 0) / projectsWithPerf.length);
+    })(),
     systemHealth: (systemStats?.status as string) || 'unknown',
-    totalUsers: (analytics?.totalUsers as number) || 0,
-    bounceRate: (analytics?.bounceRate as number) || 0,
-    avgSessionDuration: (analytics?.avgSessionDuration as number) || 0
+    totalUsers: ((analytics?.metrics as Record<string, unknown>)?.totalUsers as number) || (analytics?.totalUsers as number) || 0,
+    bounceRate: ((analytics?.metrics as Record<string, unknown>)?.bounceRate as number) || (analytics?.bounceRate as number) || 0,
+    avgSessionDuration: ((analytics?.metrics as Record<string, unknown>)?.avgSessionDuration as number) || (analytics?.avgSessionDuration as number) || 0
   };
 
   useEffect(() => {
@@ -194,15 +204,15 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
               <div className="flex items-center space-x-4">
                 <Link
                   href="/"
-                  className="flex items-center space-x-2 text-white/90 hover:text-white transition-colors"
+                  className="flex items-center space-x-2 text-stone-900 hover:text-black transition-colors"
                 >
-                  <Home size={20} className="text-blue-400" />
-                  <span className="font-medium text-white">Portfolio</span>
+                  <Home size={20} className="text-stone-600" />
+                  <span className="font-medium text-stone-900">Portfolio</span>
                 </Link>
-                <div className="h-6 w-px bg-white/30" />
+                <div className="h-6 w-px bg-stone-300" />
                 <div className="flex items-center space-x-2">
-                  <Shield size={20} className="text-purple-400" />
-                  <span className="text-white font-semibold">Admin Panel</span>
+                  <Shield size={20} className="text-stone-600" />
+                  <span className="text-stone-900 font-semibold">Admin Panel</span>
                 </div>
               </div>
 
@@ -214,20 +224,20 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                     onClick={() => setActiveTab(item.id as 'overview' | 'projects' | 'emails' | 'analytics' | 'settings')}
                     className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-all duration-200 ${
                       activeTab === item.id
-                        ? 'admin-glass-light border border-blue-500/40 text-blue-300 shadow-lg'
-                        : 'text-white/80 hover:text-white hover:admin-glass-light'
+                        ? 'bg-stone-100 text-stone-900 font-medium shadow-sm border border-stone-200'
+                        : 'text-stone-500 hover:text-stone-800 hover:bg-stone-50'
                     }`}
                   >
-                    <item.icon size={16} className={activeTab === item.id ? 'text-blue-400' : 'text-white/70'} />
-                    <span className="font-medium text-sm">{item.label}</span>
+                    <item.icon size={16} className={activeTab === item.id ? 'text-stone-800' : 'text-stone-400'} />
+                    <span className="text-sm">{item.label}</span>
                   </button>
                 ))}
               </div>
 
               {/* Right side - User info and Logout */}
               <div className="flex items-center space-x-4">
-                <div className="hidden sm:block text-sm text-white/80">
-                  Welcome, <span className="text-white font-semibold">Dennis</span>
+                <div className="hidden sm:block text-sm text-stone-500">
+                  Welcome, <span className="text-stone-800 font-semibold">Dennis</span>
                 </div>
                 <button
                   onClick={async () => {
@@ -244,7 +254,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                       window.location.href = '/manage';
                     }
                   }}
-                  className="flex items-center space-x-2 px-3 py-2 rounded-lg admin-glass-light hover:bg-red-500/20 text-red-300 hover:text-red-200 transition-all duration-200"
+                  className="flex items-center space-x-2 px-3 py-2 rounded-lg hover:bg-red-50 text-stone-500 hover:text-red-600 transition-all duration-200 border border-transparent hover:border-red-100"
                 >
                   <LogOut size={16} />
                   <span className="hidden sm:inline text-sm font-medium">Logout</span>
@@ -253,7 +263,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                 {/* Mobile menu button */}
                 <button
                   onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-                  className="md:hidden flex items-center justify-center p-2 rounded-lg admin-glass-light text-white hover:text-blue-300 transition-colors"
+                  className="md:hidden flex items-center justify-center p-2 rounded-lg text-stone-600 hover:bg-stone-100 transition-colors"
                 >
                   {mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
                 </button>
@@ -268,7 +278,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                 initial={{ opacity: 0, height: 0 }}
                 animate={{ opacity: 1, height: 'auto' }}
                 exit={{ opacity: 0, height: 0 }}
-                className="md:hidden border-t border-white/20 admin-glass-light"
+                className="md:hidden border-t border-stone-200 bg-white"
               >
                 <div className="px-4 py-4 space-y-2">
                   {navigation.map((item) => (
@@ -280,11 +290,11 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                       }}
                       className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-all duration-200 ${
                         activeTab === item.id
-                          ? 'admin-glass-light border border-blue-500/40 text-blue-300 shadow-lg'
-                          : 'text-white/80 hover:text-white hover:admin-glass-light'
+                          ? 'bg-stone-100 text-stone-900 shadow-sm border border-stone-200'
+                          : 'text-stone-500 hover:text-stone-800 hover:bg-stone-50'
                       }`}
                     >
-                      <item.icon size={18} className={activeTab === item.id ? 'text-blue-400' : 'text-white/70'} />
+                      <item.icon size={18} className={activeTab === item.id ? 'text-stone-800' : 'text-stone-400'} />
                       <div className="text-left">
                         <div className="font-medium text-sm">{item.label}</div>
                         <div className="text-xs opacity-70">{item.description}</div>
@@ -312,96 +322,114 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                 <div className="space-y-8">
                   <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                     <div>
-                      <h1 className="text-3xl font-bold text-white">Admin Dashboard</h1>
-                      <p className="text-white/80 text-lg">Manage your portfolio and monitor performance</p>
+                      <h1 className="text-3xl font-bold text-stone-900">Admin Dashboard</h1>
+                      <p className="text-stone-500 text-lg">Manage your portfolio and monitor performance</p>
                     </div>
                   </div>
 
                   {/* Stats Grid - Mobile: 2x3, Desktop: 6x1 horizontal */}
                   <div className="grid grid-cols-2 md:grid-cols-6 gap-3 md:gap-6">
                     <div 
-                      className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
+                      className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none group relative"
                       onClick={() => setActiveTab('projects')}
                     >
                       <div className="flex flex-col space-y-2">
                         <div className="flex items-center justify-between">
-                          <p className="text-white/80 text-xs md:text-sm font-medium">Projects</p>
-                          <Database size={20} className="text-blue-400" />
+                          <p className="text-stone-500 text-xs md:text-sm font-medium">Projects</p>
+                          <Database size={20} className="text-stone-400" />
                         </div>
-                        <p className="text-xl md:text-2xl font-bold text-white">{stats.totalProjects}</p>
-                        <p className="text-green-400 text-xs font-medium">{stats.publishedProjects} published</p>
+                        <p className="text-xl md:text-2xl font-bold text-stone-900">{stats.totalProjects}</p>
+                        <p className="text-stone-600 text-xs font-medium">{stats.publishedProjects} published</p>
+                      </div>
+                      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-stone-900/95 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-normal max-w-xs z-50 shadow-xl backdrop-blur-sm pointer-events-none">
+                        ✅ REAL DATA: Total projects in your portfolio from the database. Shows published vs unpublished count.
+                        <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-2 h-2 bg-stone-900/95 rotate-45"></div>
                       </div>
                     </div>
 
                     <div 
-                      className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
+                      className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none group relative"
                       onClick={() => setActiveTab('analytics')}
                     >
                       <div className="flex flex-col space-y-2">
                         <div className="flex items-center justify-between">
-                          <p className="text-white/80 text-xs md:text-sm font-medium">Page Views</p>
-                          <Activity size={20} className="text-purple-400" />
+                          <p className="text-stone-500 text-xs md:text-sm font-medium">Page Views</p>
+                          <Activity size={20} className="text-stone-400" />
                         </div>
-                        <p className="text-xl md:text-2xl font-bold text-white">{stats.totalViews.toLocaleString()}</p>
-                        <p className="text-blue-400 text-xs font-medium">{stats.totalUsers} users</p>
+                        <p className="text-xl md:text-2xl font-bold text-stone-900">{stats.totalViews.toLocaleString()}</p>
+                        <p className="text-stone-600 text-xs font-medium">{stats.totalUsers} users</p>
+                      </div>
+                      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-stone-900/95 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-normal max-w-xs z-50 shadow-xl backdrop-blur-sm pointer-events-none">
+                        ✅ REAL DATA: Total page views from PageView table (last 30 days). Each visit is tracked with IP, user agent, and timestamp. Users = unique IP addresses.
+                        <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-2 h-2 bg-stone-900/95 rotate-45"></div>
                       </div>
                     </div>
 
                     <div 
-                      className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
+                      className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none"
                       onClick={() => setActiveTab('emails')}
                     >
                       <div className="flex flex-col space-y-2">
                         <div className="flex items-center justify-between">
-                          <p className="text-white/80 text-xs md:text-sm font-medium">Messages</p>
-                          <Mail size={20} className="text-green-400" />
+                          <p className="text-stone-500 text-xs md:text-sm font-medium">Messages</p>
+                          <Mail size={20} className="text-stone-400" />
                         </div>
-                        <p className="text-xl md:text-2xl font-bold text-white">{emails.length}</p>
-                        <p className="text-red-400 text-xs font-medium">{stats.unreadEmails} unread</p>
+                        <p className="text-xl md:text-2xl font-bold text-stone-900">{emails.length}</p>
+                        <p className="text-red-500 text-xs font-medium">{stats.unreadEmails} unread</p>
                       </div>
                     </div>
 
                     <div 
-                      className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
+                      className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none group relative"
                       onClick={() => setActiveTab('analytics')}
                     >
                       <div className="flex flex-col space-y-2">
                         <div className="flex items-center justify-between">
-                          <p className="text-white/80 text-xs md:text-sm font-medium">Performance</p>
-                          <TrendingUp size={20} className="text-orange-400" />
+                          <p className="text-stone-500 text-xs md:text-sm font-medium">Performance</p>
+                          <TrendingUp size={20} className="text-stone-400" />
                         </div>
-                        <p className="text-xl md:text-2xl font-bold text-white">{stats.avgPerformance}</p>
-                        <p className="text-orange-400 text-xs font-medium">Lighthouse Score</p>
+                        <p className="text-xl md:text-2xl font-bold text-stone-900">{stats.avgPerformance || 'N/A'}</p>
+                        <p className="text-stone-600 text-xs font-medium">Lighthouse Score</p>
+                      </div>
+                      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-stone-900/95 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-normal max-w-xs z-50 shadow-xl backdrop-blur-sm pointer-events-none">
+                        {stats.avgPerformance > 0 
+                          ? "✅ REAL DATA: Average Lighthouse score (0-100) calculated from real Web Vitals (LCP, FCP, CLS, FID, TTFB) collected from actual page visits. Only averages projects with real performance data."
+                          : "No performance data yet. Scores appear after visitors load pages and Web Vitals are tracked."}
+                        <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-2 h-2 bg-stone-900/95 rotate-45"></div>
                       </div>
                     </div>
 
                     <div 
-                      className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
+                      className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none group relative"
                       onClick={() => setActiveTab('analytics')}
                     >
                       <div className="flex flex-col space-y-2">
                         <div className="flex items-center justify-between">
-                          <p className="text-white/80 text-xs md:text-sm font-medium">Bounce Rate</p>
-                          <Users size={20} className="text-red-400" />
+                          <p className="text-stone-500 text-xs md:text-sm font-medium">Bounce Rate</p>
+                          <Users size={20} className="text-stone-400" />
                         </div>
-                        <p className="text-xl md:text-2xl font-bold text-white">{stats.bounceRate}%</p>
-                        <p className="text-red-400 text-xs font-medium">Exit rate</p>
+                        <p className="text-xl md:text-2xl font-bold text-stone-900">{stats.bounceRate}%</p>
+                        <p className="text-stone-600 text-xs font-medium">Exit rate</p>
+                      </div>
+                      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-stone-900/95 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-normal max-w-xs z-50 shadow-xl backdrop-blur-sm pointer-events-none">
+                        ✅ REAL DATA: Percentage of sessions with only 1 pageview (calculated from PageView records grouped by IP). Lower is better. Shows how many visitors leave after viewing just one page.
+                        <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-2 h-2 bg-stone-900/95 rotate-45"></div>
                       </div>
                     </div>
 
                     <div 
-                      className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
+                      className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none"
                       onClick={() => setActiveTab('settings')}
                     >
                       <div className="flex flex-col space-y-2">
                         <div className="flex items-center justify-between">
-                          <p className="text-white/80 text-xs md:text-sm font-medium">System</p>
-                          <Shield size={20} className="text-green-400" />
+                          <p className="text-stone-500 text-xs md:text-sm font-medium">System</p>
+                          <Shield size={20} className="text-stone-400" />
                         </div>
-                        <p className="text-xl md:text-2xl font-bold text-white">Online</p>
+                        <p className="text-xl md:text-2xl font-bold text-stone-900">Online</p>
                         <div className="flex items-center space-x-1">
-                          <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
-                          <p className="text-green-400 text-xs font-medium">All systems operational</p>
+                          <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+                          <p className="text-stone-600 text-xs font-medium">Operational</p>
                         </div>
                       </div>
                     </div>
@@ -412,10 +440,10 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                     {/* Recent Activity */}
                     <div className="admin-glass-card p-6 rounded-xl md:col-span-2">
                       <div className="flex items-center justify-between mb-6">
-                        <h2 className="text-xl font-bold text-white">Recent Activity</h2>
+                        <h2 className="text-xl font-bold text-stone-900">Recent Activity</h2>
                         <button 
                           onClick={() => loadAllData()}
-                          className="text-blue-400 hover:text-blue-300 text-sm font-medium px-3 py-1 admin-glass-light rounded-lg transition-colors"
+                          className="text-stone-500 hover:text-stone-800 text-sm font-medium px-3 py-1 bg-stone-100 rounded-lg transition-colors border border-stone-200"
                         >
                           Refresh
                         </button>
@@ -424,19 +452,19 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                       {/* Mobile: vertical stack, Desktop: horizontal columns */}
                       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div className="space-y-6">
-                          <h3 className="text-sm font-medium text-white/60 uppercase tracking-wider">Projects</h3>
+                          <h3 className="text-xs font-bold text-stone-400 uppercase tracking-wider">Projects</h3>
                           <div className="space-y-4">
                             {projects.slice(0, 3).map((project) => (
-                              <div key={project.id} className="flex items-start space-x-3 p-4 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 cursor-pointer" onClick={() => setActiveTab('projects')}>
+                              <div key={project.id} className="flex items-start space-x-3 p-4 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm transition-all duration-200 cursor-pointer" onClick={() => setActiveTab('projects')}>
                                 <div className="flex-1 min-w-0">
-                                  <p className="text-white font-medium text-sm truncate">{project.title}</p>
-                                  <p className="text-white/60 text-xs">{project.published ? 'Published' : 'Draft'} • {project.analytics?.views || 0} views</p>
+                                  <p className="text-stone-800 font-medium text-sm truncate">{project.title}</p>
+                                  <p className="text-stone-500 text-xs">{project.published ? 'Published' : 'Draft'} • {project.analytics?.views || 0} views</p>
                                   <div className="flex items-center space-x-2 mt-2">
-                                    <span className={`px-2 py-1 rounded-full text-xs ${project.published ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'}`}>
+                                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${project.published ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'}`}>
                                       {project.published ? 'Live' : 'Draft'}
                                     </span>
                                     {project.featured && (
-                                      <span className="px-2 py-1 bg-purple-500/20 text-purple-400 rounded-full text-xs">Featured</span>
+                                      <span className="px-2 py-1 bg-stone-200 text-stone-700 rounded-full text-xs font-medium">Featured</span>
                                     )}
                                   </div>
                                 </div>
@@ -446,19 +474,19 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                         </div>
 
                         <div className="space-y-4">
-                          <h3 className="text-sm font-medium text-white/60 uppercase tracking-wider">Messages</h3>
+                          <h3 className="text-xs font-bold text-stone-400 uppercase tracking-wider">Messages</h3>
                           <div className="space-y-3">
                             {emails.slice(0, 3).map((email, index) => (
-                              <div key={index} className="flex items-center space-x-3 p-3 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 cursor-pointer" onClick={() => setActiveTab('emails')}>
-                                <div className="w-8 h-8 bg-green-500/30 rounded-lg flex items-center justify-center flex-shrink-0">
-                                  <Mail size={14} className="text-green-400" />
+                              <div key={index} className="flex items-center space-x-3 p-3 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm transition-all duration-200 cursor-pointer" onClick={() => setActiveTab('emails')}>
+                                <div className="w-8 h-8 bg-stone-200 rounded-lg flex items-center justify-center flex-shrink-0">
+                                  <Mail size={14} className="text-stone-600" />
                                 </div>
                                 <div className="flex-1 min-w-0">
-                                  <p className="text-white font-medium text-sm truncate">From {email.name as string}</p>
-                                  <p className="text-white/60 text-xs truncate">{(email.subject as string) || 'No subject'}</p>
+                                  <p className="text-stone-800 font-medium text-sm truncate">From {email.name as string}</p>
+                                  <p className="text-stone-500 text-xs truncate">{(email.subject as string) || 'No subject'}</p>
                                 </div>
                                 {!(email.read as boolean) && (
-                                  <div className="w-2 h-2 bg-red-400 rounded-full flex-shrink-0"></div>
+                                  <div className="w-2 h-2 bg-red-500 rounded-full flex-shrink-0"></div>
                                 )}
                               </div>
                             ))}
@@ -469,70 +497,70 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
 
                     {/* Quick Actions */}
                     <div className="admin-glass-card p-6 rounded-xl">
-                      <h2 className="text-xl font-bold text-white mb-6">Quick Actions</h2>
+                      <h2 className="text-xl font-bold text-stone-900 mb-6">Quick Actions</h2>
                       <div className="space-y-4">
                         <button
                           onClick={() => window.location.href = '/editor'}
-                          className="w-full flex items-center space-x-3 p-3 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
+                          className="w-full flex items-center space-x-3 p-3 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm hover:bg-white transition-all duration-200 text-left group"
                         >
-                          <div className="w-10 h-10 bg-green-500/30 rounded-lg flex items-center justify-center group-hover:bg-green-500/40 transition-colors">
-                            <Plus size={18} className="text-green-400" />
+                          <div className="w-10 h-10 bg-white rounded-lg border border-stone-100 flex items-center justify-center group-hover:border-stone-300 transition-colors">
+                            <Plus size={18} className="text-stone-600" />
                           </div>
                           <div>
-                            <p className="text-white font-medium text-sm">Ghost Editor</p>
-                            <p className="text-white/60 text-xs">Professional writing tool</p>
+                            <p className="text-stone-800 font-medium text-sm">Ghost Editor</p>
+                            <p className="text-stone-500 text-xs">Professional writing tool</p>
                           </div>
                         </button>
                         
                         <button
                           onClick={() => setActiveTab('analytics')}
-                          className="w-full flex items-center space-x-3 p-3 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
+                          className="w-full flex items-center space-x-3 p-3 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm hover:bg-white transition-all duration-200 text-left group"
                         >
-                          <div className="w-10 h-10 bg-red-500/30 rounded-lg flex items-center justify-center group-hover:bg-red-500/40 transition-colors">
-                            <Activity size={18} className="text-red-400" />
+                          <div className="w-10 h-10 bg-white rounded-lg border border-stone-100 flex items-center justify-center group-hover:border-stone-300 transition-colors">
+                            <Activity size={18} className="text-stone-600" />
                           </div>
                           <div>
-                            <p className="text-white font-medium text-sm">Reset Analytics</p>
-                            <p className="text-white/60 text-xs">Clear analytics data</p>
+                            <p className="text-stone-800 font-medium text-sm">Reset Analytics</p>
+                            <p className="text-stone-500 text-xs">Clear analytics data</p>
                           </div>
                         </button>
 
                         <button 
                           onClick={() => setActiveTab('emails')}
-                          className="w-full flex items-center space-x-3 p-3 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
+                          className="w-full flex items-center space-x-3 p-3 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm hover:bg-white transition-all duration-200 text-left group"
                         >
-                          <div className="w-10 h-10 bg-green-500/30 rounded-lg flex items-center justify-center group-hover:bg-green-500/40 transition-colors">
-                            <Mail size={18} className="text-green-400" />
+                          <div className="w-10 h-10 bg-white rounded-lg border border-stone-100 flex items-center justify-center group-hover:border-stone-300 transition-colors">
+                            <Mail size={18} className="text-stone-600" />
                           </div>
                           <div>
-                            <p className="text-white font-medium text-sm">View Messages</p>
-                            <p className="text-white/60 text-xs">{stats.unreadEmails} unread messages</p>
+                            <p className="text-stone-800 font-medium text-sm">View Messages</p>
+                            <p className="text-stone-500 text-xs">{stats.unreadEmails} unread messages</p>
                           </div>
                         </button>
 
                         <button 
                           onClick={() => setActiveTab('analytics')}
-                          className="w-full flex items-center space-x-3 p-3 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
+                          className="w-full flex items-center space-x-3 p-3 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm hover:bg-white transition-all duration-200 text-left group"
                         >
-                          <div className="w-10 h-10 bg-purple-500/30 rounded-lg flex items-center justify-center group-hover:bg-purple-500/40 transition-colors">
-                            <TrendingUp size={18} className="text-purple-400" />
+                          <div className="w-10 h-10 bg-white rounded-lg border border-stone-100 flex items-center justify-center group-hover:border-stone-300 transition-colors">
+                            <TrendingUp size={18} className="text-stone-600" />
                           </div>
                           <div>
-                            <p className="text-white font-medium text-sm">Analytics</p>
-                            <p className="text-white/60 text-xs">View detailed statistics</p>
+                            <p className="text-stone-800 font-medium text-sm">Analytics</p>
+                            <p className="text-stone-500 text-xs">View detailed statistics</p>
                           </div>
                         </button>
 
                         <button 
                           onClick={() => setActiveTab('settings')}
-                          className="w-full flex items-center space-x-3 p-3 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
+                          className="w-full flex items-center space-x-3 p-3 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm hover:bg-white transition-all duration-200 text-left group"
                         >
-                          <div className="w-10 h-10 bg-gray-500/30 rounded-lg flex items-center justify-center group-hover:bg-gray-500/40 transition-colors">
-                            <Settings size={18} className="text-gray-400" />
+                          <div className="w-10 h-10 bg-white rounded-lg border border-stone-100 flex items-center justify-center group-hover:border-stone-300 transition-colors">
+                            <Settings size={18} className="text-stone-600" />
                           </div>
                           <div>
-                            <p className="text-white font-medium text-sm">Settings</p>
-                            <p className="text-white/60 text-xs">System configuration</p>
+                            <p className="text-stone-800 font-medium text-sm">Settings</p>
+                            <p className="text-stone-500 text-xs">System configuration</p>
                           </div>
                         </button>
                       </div>
@@ -545,8 +573,8 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                 <div className="space-y-6">
                   <div className="flex items-center justify-between">
                     <div>
-                      <h2 className="text-2xl font-bold text-white">Project Management</h2>
-                      <p className="text-white/70 mt-1">Manage your portfolio projects</p>
+                      <h2 className="text-2xl font-bold text-stone-900">Project Management</h2>
+                      <p className="text-stone-500 mt-1">Manage your portfolio projects</p>
                     </div>
                   </div>
                   
@@ -565,39 +593,39 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
               {activeTab === 'settings' && (
                 <div className="space-y-8">
                   <div>
-                    <h1 className="text-2xl font-bold text-white">System Settings</h1>
-                    <p className="text-white/60">Manage system configuration and preferences</p>
+                    <h1 className="text-2xl font-bold text-stone-900">System Settings</h1>
+                    <p className="text-stone-500">Manage system configuration and preferences</p>
                   </div>
                   
                   <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                     <div className="admin-glass-card p-6 rounded-xl">
-                      <h2 className="text-xl font-bold text-white mb-4">Import / Export</h2>
-                      <p className="text-white/70 mb-4">Backup and restore your portfolio data</p>
+                      <h2 className="text-xl font-bold text-stone-900 mb-4">Import / Export</h2>
+                      <p className="text-stone-500 mb-4">Backup and restore your portfolio data</p>
                       <ImportExport />
                     </div>
                     
                     <div className="admin-glass-card p-6 rounded-xl">
-                      <h2 className="text-xl font-bold text-white mb-4">System Status</h2>
+                      <h2 className="text-xl font-bold text-stone-900 mb-4">System Status</h2>
                       <div className="space-y-4">
-                        <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
-                          <span className="text-white/80">Database</span>
+                        <div className="flex items-center justify-between p-3 bg-stone-50 rounded-lg border border-stone-100">
+                          <span className="text-stone-600">Database</span>
                           <div className="flex items-center space-x-3">
-                            <div className="w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
-                            <span className="text-green-400 font-medium">Online</span>
+                            <div className="w-4 h-4 bg-green-500 rounded-full animate-pulse"></div>
+                            <span className="text-green-600 font-medium">Online</span>
                           </div>
                         </div>
-                        <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
-                          <span className="text-white/80">Redis Cache</span>
+                        <div className="flex items-center justify-between p-3 bg-stone-50 rounded-lg border border-stone-100">
+                          <span className="text-stone-600">Redis Cache</span>
                           <div className="flex items-center space-x-3">
-                            <div className="w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
-                            <span className="text-green-400 font-medium">Online</span>
+                            <div className="w-4 h-4 bg-green-500 rounded-full animate-pulse"></div>
+                            <span className="text-green-600 font-medium">Online</span>
                           </div>
                         </div>
-                        <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
-                          <span className="text-white/80">API Services</span>
+                        <div className="flex items-center justify-between p-3 bg-stone-50 rounded-lg border border-stone-100">
+                          <span className="text-stone-600">API Services</span>
                           <div className="flex items-center space-x-3">
-                            <div className="w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
-                            <span className="text-green-400 font-medium">Online</span>
+                            <div className="w-4 h-4 bg-green-500 rounded-full animate-pulse"></div>
+                            <span className="text-green-600 font-medium">Online</span>
                           </div>
                         </div>
                       </div>

components/ObfuscatedEmail.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import React from 'react';
+import { obfuscateEmail, deobfuscateEmail } from '@/lib/email-obfuscate';
+
+interface ObfuscatedEmailProps {
+  email: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function ObfuscatedEmail({ email, children, className }: ObfuscatedEmailProps) {
+  const obfuscated = obfuscateEmail(email);
+  
+  return (
+    <a
+      href="#"
+      data-email={obfuscated}
+      className={className || "obfuscated-email"}
+      onClick={(e) => {
+        e.preventDefault();
+        const link = e.currentTarget;
+        const decoded = deobfuscateEmail(obfuscated);
+        link.href = `mailto:${decoded}`;
+        window.location.href = link.href;
+      }}
+    >
+      {children || email}
+    </a>
+  );
+}

components/PerformanceDashboard.tsx

@@ -75,7 +75,7 @@ export const PerformanceDashboard: React.FC = () => {
           setIsVisible(true);
           trackEvent('dashboard-toggle', { action: 'show' });
         }}
-        className="fixed bottom-4 right-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg hover:bg-blue-700 transition-colors z-50"
+        className="fixed bottom-4 right-4 bg-white text-stone-700 border border-stone-200 px-4 py-2 rounded-lg shadow-md hover:bg-stone-50 transition-colors z-50"
       >
         📊 Performance
       </button>

components/ProjectManager.tsx

@@ -52,7 +52,6 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
   const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedCategory, setSelectedCategory] = useState<string>('all');
-  // Editor is now a separate page - no modal state needed
 
   const categories = ['all', 'Web Development', 'Full-Stack', 'Web Application', 'Mobile App', 'Design'];
 
@@ -77,10 +76,6 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
     }
   };
 
-  // closeEditor removed - editor is now separate page
-
-  // saveProject removed - editor is now separate page
-
   const deleteProject = async (projectId: string) => {
     if (!confirm('Are you sure you want to delete this project?')) return;
     
@@ -100,9 +95,9 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
 
   const getStatusColor = (project: Project) => {
     if (project.published) {
-      return project.featured ? 'text-purple-400 bg-purple-500/20' : 'text-green-400 bg-green-500/20';
+      return project.featured ? 'text-stone-700 bg-stone-200' : 'text-green-700 bg-green-100';
     }
-    return 'text-yellow-400 bg-yellow-500/20';
+    return 'text-yellow-700 bg-yellow-100';
   };
 
   const getStatusText = (project: Project) => {
@@ -117,20 +112,20 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
       {/* Header */}
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
         <div>
-          <h1 className="text-3xl font-bold text-white">Project Management</h1>
-          <p className="text-white/80">{projects.length} projects • {projects.filter(p => p.published).length} published</p>
+          <h1 className="text-3xl font-bold text-stone-900">Project Management</h1>
+          <p className="text-stone-500">{projects.length} projects • {projects.filter(p => p.published).length} published</p>
         </div>
         <div className="flex items-center space-x-3">
           <button
             onClick={onProjectsChange}
-            className="flex items-center space-x-2 px-4 py-2 admin-glass-light rounded-xl hover:scale-105 transition-all duration-200"
+            className="flex items-center space-x-2 px-4 py-2 bg-stone-100 border border-stone-200 rounded-xl hover:bg-stone-200 transition-all duration-200"
           >
-            <RefreshCw className="w-4 h-4 text-blue-400" />
-            <span className="text-white font-medium">Refresh</span>
+            <RefreshCw className="w-4 h-4 text-stone-600" />
+            <span className="text-stone-700 font-medium">Refresh</span>
           </button>
           <button
             onClick={() => openEditor()}
-            className="flex items-center space-x-2 px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-xl hover:scale-105 transition-all duration-200 shadow-lg"
+            className="flex items-center space-x-2 px-6 py-2 bg-stone-900 text-white rounded-xl hover:bg-stone-800 transition-all duration-200 shadow-md"
           >
             <Plus size={18} />
             <span className="font-medium">New Project</span>
@@ -142,13 +137,13 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
       <div className="flex flex-col sm:flex-row gap-4">
         {/* Search */}
         <div className="relative flex-1">
-          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-white/60" />
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-stone-400" />
           <input
             type="text"
             placeholder="Search projects..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full pl-10 pr-4 py-3 admin-glass-light border border-white/30 rounded-xl text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="w-full pl-10 pr-4 py-3 bg-white border border-stone-200 rounded-xl text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-400"
           />
         </div>
 
@@ -156,23 +151,23 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
         <select
           value={selectedCategory}
           onChange={(e) => setSelectedCategory(e.target.value)}
-          className="px-4 py-3 admin-glass-light border border-white/30 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent"
+          className="px-4 py-3 bg-white border border-stone-200 rounded-xl text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-400"
         >
           {categories.map(category => (
-            <option key={category} value={category} className="bg-gray-800">
+            <option key={category} value={category} className="bg-white text-stone-900">
               {category === 'all' ? 'All Categories' : category}
             </option>
           ))}
         </select>
 
         {/* View Toggle */}
-        <div className="flex items-center space-x-1 admin-glass-light rounded-xl p-1">
+        <div className="flex items-center space-x-1 bg-white border border-stone-200 rounded-xl p-1">
           <button
             onClick={() => setViewMode('grid')}
             className={`p-2 rounded-lg transition-all duration-200 ${
               viewMode === 'grid'
-                ? 'bg-blue-500/40 text-blue-300'
-                : 'text-white/70 hover:text-white hover:bg-white/10'
+                ? 'bg-stone-100 text-stone-900'
+                : 'text-stone-400 hover:text-stone-900 hover:bg-stone-50'
             }`}
           >
             <Grid className="w-4 h-4" />
@@ -181,8 +176,8 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
             onClick={() => setViewMode('list')}
             className={`p-2 rounded-lg transition-all duration-200 ${
               viewMode === 'list'
-                ? 'bg-blue-500/40 text-blue-300'
-                : 'text-white/70 hover:text-white hover:bg-white/10'
+                ? 'bg-stone-100 text-stone-900'
+                : 'text-stone-400 hover:text-stone-900 hover:bg-stone-50'
             }`}
           >
             <List className="w-4 h-4" />
@@ -198,24 +193,24 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
               key={project.id}
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
-              className="admin-glass-card p-6 rounded-xl hover:scale-105 transition-all duration-300 group"
+              className="admin-glass-card p-6 rounded-xl hover:shadow-lg transition-all duration-300 group bg-white border border-stone-200"
             >
               {/* Project Header */}
               <div className="flex items-start justify-between mb-4">
                 <div className="flex-1">
-                  <h3 className="text-xl font-bold text-white mb-1">{project.title}</h3>
-                  <p className="text-white/70 text-sm">{project.category}</p>
+                  <h3 className="text-xl font-bold text-stone-900 mb-1">{project.title}</h3>
+                  <p className="text-stone-500 text-sm">{project.category}</p>
                 </div>
                 <div className="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
                   <button
                     onClick={() => openEditor(project)}
-                    className="p-2 text-white/70 hover:text-blue-400 hover:bg-white/10 rounded-lg transition-colors"
+                    className="p-2 text-stone-500 hover:text-stone-700 hover:bg-stone-100 rounded-lg transition-colors"
                   >
                     <Edit size={16} />
                   </button>
                   <button
                     onClick={() => deleteProject(project.id)}
-                    className="p-2 text-white/70 hover:text-red-400 hover:bg-white/10 rounded-lg transition-colors"
+                    className="p-2 text-stone-500 hover:text-red-600 hover:bg-stone-100 rounded-lg transition-colors"
                   >
                     <Trash2 size={16} />
                   </button>
@@ -225,7 +220,7 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
               {/* Project Content */}
               <div className="space-y-4">
                 <div>
-                  <p className="text-white/70 text-sm line-clamp-2 leading-relaxed">{project.description}</p>
+                  <p className="text-stone-600 text-sm line-clamp-2 leading-relaxed">{project.description}</p>
                 </div>
 
                 {/* Tags */}
@@ -234,13 +229,13 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
                     {project.tags.slice(0, 3).map((tag) => (
                       <span
                         key={tag}
-                        className="px-2 py-1 bg-white/10 text-white/70 rounded-full text-xs"
+                        className="px-2 py-1 bg-stone-100 text-stone-600 border border-stone-200 rounded-full text-xs"
                       >
                         {tag}
                       </span>
                     ))}
                     {project.tags.length > 3 && (
-                      <span className="px-2 py-1 bg-white/10 text-white/70 rounded-full text-xs">
+                      <span className="px-2 py-1 bg-stone-100 text-stone-600 border border-stone-200 rounded-full text-xs">
                         +{project.tags.length - 3}
                       </span>
                     )}
@@ -258,7 +253,7 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
                         href={project.github}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="p-1 text-white/60 hover:text-white transition-colors"
+                        className="p-1 text-stone-400 hover:text-stone-900 transition-colors"
                       >
                         <Github size={14} />
                       </a>
@@ -268,7 +263,7 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
                         href={project.live}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="p-1 text-white/60 hover:text-white transition-colors"
+                        className="p-1 text-stone-400 hover:text-stone-900 transition-colors"
                       >
                         <Globe size={14} />
                       </a>
@@ -277,18 +272,18 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
                 </div>
 
                 {/* Analytics */}
-                <div className="grid grid-cols-3 gap-2 pt-3 border-t border-white/10">
+                <div className="grid grid-cols-3 gap-2 pt-3 border-t border-stone-100">
                   <div className="text-center">
-                    <p className="text-white font-bold text-sm">{project.analytics?.views || 0}</p>
-                    <p className="text-white/60 text-xs">Views</p>
+                    <p className="text-stone-900 font-bold text-sm">{project.analytics?.views || 0}</p>
+                    <p className="text-stone-500 text-xs">Views</p>
                   </div>
                   <div className="text-center">
-                    <p className="text-white font-bold text-sm">{project.analytics?.likes || 0}</p>
-                    <p className="text-white/60 text-xs">Likes</p>
+                    <p className="text-stone-900 font-bold text-sm">{project.analytics?.likes || 0}</p>
+                    <p className="text-stone-500 text-xs">Likes</p>
                   </div>
                   <div className="text-center">
-                    <p className="text-white font-bold text-sm">{project.performance?.lighthouse || 90}</p>
-                    <p className="text-white/60 text-xs">Score</p>
+                    <p className="text-stone-900 font-bold text-sm">{project.performance?.lighthouse || 90}</p>
+                    <p className="text-stone-500 text-xs">Score</p>
                   </div>
                 </div>
               </div>
@@ -302,13 +297,13 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
               key={project.id}
               initial={{ opacity: 0, x: -20 }}
               animate={{ opacity: 1, x: 0 }}
-              className="admin-glass-card p-6 rounded-xl hover:scale-[1.01] transition-all duration-300 group"
+              className="admin-glass-card p-6 rounded-xl hover:shadow-md transition-all duration-300 group bg-white border border-stone-200"
             >
               <div className="flex items-center justify-between">
                 <div className="flex items-center space-x-4">
                   <div className="flex-1">
-                    <h3 className="text-white font-bold text-lg">{project.title}</h3>
-                    <p className="text-white/70 text-sm">{project.category}</p>
+                    <h3 className="text-stone-900 font-bold text-lg">{project.title}</h3>
+                    <p className="text-stone-500 text-sm">{project.category}</p>
                   </div>
                 </div>
                 
@@ -316,7 +311,7 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
                   <span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(project)}`}>
                     {getStatusText(project)}
                   </span>
-                  <div className="flex items-center space-x-3 text-white/60 text-sm">
+                  <div className="flex items-center space-x-3 text-stone-500 text-sm">
                     <span>{project.analytics?.views || 0} views</span>
                     <span>•</span>
                     <span>{new Date(project.updatedAt).toLocaleDateString()}</span>
@@ -324,13 +319,13 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
                   <div className="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
                     <button
                       onClick={() => openEditor(project)}
-                      className="p-2 text-white/70 hover:text-blue-400 hover:bg-white/10 rounded-lg transition-colors"
+                      className="p-2 text-stone-500 hover:text-stone-700 hover:bg-stone-100 rounded-lg transition-colors"
                     >
                       <Edit size={16} />
                     </button>
                     <button
                       onClick={() => deleteProject(project.id)}
-                      className="p-2 text-white/70 hover:text-red-400 hover:bg-white/10 rounded-lg transition-colors"
+                      className="p-2 text-stone-500 hover:text-red-600 hover:bg-stone-100 rounded-lg transition-colors"
                     >
                       <Trash2 size={16} />
                     </button>
@@ -341,8 +336,6 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
           ))}
         </div>
       )}
-
-      {/* Editor is now a separate page at /editor */}
     </div>
   );
 };

components/ResizableGhostEditor.tsx

@@ -1,750 +0,0 @@
-'use client';
-
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import {
-  Save,
-  X,
-  Eye,
-  EyeOff,
-  Settings,
-  Globe,
-  Github,
-  Bold,
-  Italic,
-  List,
-  Quote,
-  Code,
-  Link2,
-  ListOrdered,
-  Underline,
-  Strikethrough,
-  GripVertical,
-  Image as ImageIcon
-} from 'lucide-react';
-
-interface Project {
-  id: string;
-  title: string;
-  description: string;
-  content?: string;
-  category: string;
-  difficulty?: string;
-  tags?: string[];
-  featured: boolean;
-  published: boolean;
-  github?: string;
-  live?: string;
-  image?: string;
-  createdAt: string;
-  updatedAt: string;
-}
-
-interface ResizableGhostEditorProps {
-  project?: Project | null;
-  onSave: (projectData: Partial<Project>) => void;
-  onClose: () => void;
-  isCreating: boolean;
-}
-
-export const ResizableGhostEditor: React.FC<ResizableGhostEditorProps> = ({
-  project,
-  onSave,
-  onClose,
-  isCreating
-}) => {
-  const [title, setTitle] = useState('');
-  const [description, setDescription] = useState('');
-  const [content, setContent] = useState('');
-  const [category, setCategory] = useState('Web Development');
-  const [tags, setTags] = useState<string[]>([]);
-  const [github, setGithub] = useState('');
-  const [live, setLive] = useState('');
-  const [featured, setFeatured] = useState(false);
-  const [published, setPublished] = useState(false);
-  const [difficulty, setDifficulty] = useState('Intermediate');
-  
-  // Editor UI state
-  const [showPreview, setShowPreview] = useState(true);
-  const [showSettings, setShowSettings] = useState(false);
-  const [previewWidth, setPreviewWidth] = useState(50); // Percentage
-  const [wordCount, setWordCount] = useState(0);
-  const [readingTime, setReadingTime] = useState(0);
-  const [isResizing, setIsResizing] = useState(false);
-
-  const titleRef = useRef<HTMLTextAreaElement>(null);
-  const contentRef = useRef<HTMLTextAreaElement>(null);
-  const previewRef = useRef<HTMLDivElement>(null);
-  const resizeRef = useRef<HTMLDivElement>(null);
-
-  const categories = ['Web Development', 'Full-Stack', 'Web Application', 'Mobile App', 'Design'];
-  const difficulties = ['Beginner', 'Intermediate', 'Advanced', 'Expert'];
-
-  useEffect(() => {
-    if (project && !isCreating) {
-      setTitle(project.title);
-      setDescription(project.description);
-      setContent(project.content || '');
-      setCategory(project.category);
-      setTags(project.tags || []);
-      setGithub(project.github || '');
-      setLive(project.live || '');
-      setFeatured(project.featured);
-      setPublished(project.published);
-      setDifficulty(project.difficulty || 'Intermediate');
-    } else {
-      // Reset for new project
-      setTitle('');
-      setDescription('');
-      setContent('');
-      setCategory('Web Development');
-      setTags([]);
-      setGithub('');
-      setLive('');
-      setFeatured(false);
-      setPublished(false);
-      setDifficulty('Intermediate');
-    }
-  }, [project, isCreating]);
-
-  // Calculate word count and reading time
-  useEffect(() => {
-    const words = content.trim().split(/\s+/).filter(word => word.length > 0).length;
-    setWordCount(words);
-    setReadingTime(Math.ceil(words / 200)); // Average reading speed: 200 words/minute
-  }, [content]);
-
-  // Handle resizing
-  useEffect(() => {
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!isResizing) return;
-      
-      const containerWidth = window.innerWidth - (showSettings ? 320 : 0); // Account for settings sidebar
-      const newWidth = Math.max(20, Math.min(80, (e.clientX / containerWidth) * 100));
-      setPreviewWidth(100 - newWidth); // Invert since we're setting editor width
-    };
-
-    const handleMouseUp = () => {
-      setIsResizing(false);
-    };
-
-    if (isResizing) {
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
-    }
-
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, [isResizing, showSettings]);
-
-  const handleSave = () => {
-    const projectData = {
-      title,
-      description,
-      content,
-      category,
-      tags,
-      github,
-      live,
-      featured,
-      published,
-      difficulty
-    };
-    onSave(projectData);
-  };
-
-  const addTag = (tag: string) => {
-    if (tag.trim() && !tags.includes(tag.trim())) {
-      setTags([...tags, tag.trim()]);
-    }
-  };
-
-  const removeTag = (tagToRemove: string) => {
-    setTags(tags.filter(tag => tag !== tagToRemove));
-  };
-
-  const insertMarkdown = useCallback((syntax: string, selectedText: string = '') => {
-    if (!contentRef.current) return;
-    
-    const textarea = contentRef.current;
-    const start = textarea.selectionStart;
-    const end = textarea.selectionEnd;
-    const selection = selectedText || content.substring(start, end);
-    
-    let newText = '';
-    let cursorOffset = 0;
-    
-    switch (syntax) {
-      case 'bold':
-        newText = `**${selection || 'bold text'}**`;
-        cursorOffset = selection ? newText.length : 2;
-        break;
-      case 'italic':
-        newText = `*${selection || 'italic text'}*`;
-        cursorOffset = selection ? newText.length : 1;
-        break;
-      case 'underline':
-        newText = `<u>${selection || 'underlined text'}</u>`;
-        cursorOffset = selection ? newText.length : 3;
-        break;
-      case 'strikethrough':
-        newText = `~~${selection || 'strikethrough text'}~~`;
-        cursorOffset = selection ? newText.length : 2;
-        break;
-      case 'heading1':
-        newText = `# ${selection || 'Heading 1'}`;
-        cursorOffset = selection ? newText.length : 2;
-        break;
-      case 'heading2':
-        newText = `## ${selection || 'Heading 2'}`;
-        cursorOffset = selection ? newText.length : 3;
-        break;
-      case 'heading3':
-        newText = `### ${selection || 'Heading 3'}`;
-        cursorOffset = selection ? newText.length : 4;
-        break;
-      case 'list':
-        newText = `- ${selection || 'List item'}`;
-        cursorOffset = selection ? newText.length : 2;
-        break;
-      case 'list-ordered':
-        newText = `1. ${selection || 'List item'}`;
-        cursorOffset = selection ? newText.length : 3;
-        break;
-      case 'quote':
-        newText = `> ${selection || 'Quote'}`;
-        cursorOffset = selection ? newText.length : 2;
-        break;
-      case 'code':
-        if (selection.includes('\n')) {
-          newText = `\`\`\`\n${selection || 'code block'}\n\`\`\``;
-          cursorOffset = selection ? newText.length : 4;
-        } else {
-          newText = `\`${selection || 'code'}\``;
-          cursorOffset = selection ? newText.length : 1;
-        }
-        break;
-      case 'link':
-        newText = `[${selection || 'link text'}](url)`;
-        cursorOffset = selection ? newText.length - 4 : newText.length - 4;
-        break;
-      case 'image':
-        newText = `![${selection || 'alt text'}](image-url)`;
-        cursorOffset = selection ? newText.length - 11 : newText.length - 11;
-        break;
-      case 'divider':
-        newText = '\n---\n';
-        cursorOffset = newText.length;
-        break;
-      default:
-        return;
-    }
-    
-    const newContent = content.substring(0, start) + newText + content.substring(end);
-    setContent(newContent);
-    
-    // Focus and set cursor position
-    setTimeout(() => {
-      textarea.focus();
-      const newPosition = start + cursorOffset;
-      textarea.setSelectionRange(newPosition, newPosition);
-    }, 0);
-  }, [content]);
-
-  const autoResizeTextarea = (element: HTMLTextAreaElement) => {
-    element.style.height = 'auto';
-    element.style.height = element.scrollHeight + 'px';
-  };
-
-  // Enhanced markdown renderer with proper white text
-  const renderMarkdownPreview = (markdown: string) => {
-    const html = markdown
-      // Headers - WHITE TEXT
-      .replace(/^### (.*$)/gim, '<h3 class="text-xl font-semibold text-white mb-3 mt-6">$1</h3>')
-      .replace(/^## (.*$)/gim, '<h2 class="text-2xl font-bold text-white mb-4 mt-8">$1</h2>')
-      .replace(/^# (.*$)/gim, '<h1 class="text-3xl font-bold text-white mb-6 mt-8">$1</h1>')
-      // Bold and Italic - WHITE TEXT
-      .replace(/\*\*(.*?)\*\*/g, '<strong class="font-bold text-white">$1</strong>')
-      .replace(/\*(.*?)\*/g, '<em class="italic text-white">$1</em>')
-      // Underline and Strikethrough - WHITE TEXT
-      .replace(/<u>(.*?)<\/u>/g, '<u class="underline text-white">$1</u>')
-      .replace(/~~(.*?)~~/g, '<del class="line-through opacity-75 text-white">$1</del>')
-      // Code
-      .replace(/```([^`]+)```/g, '<pre class="bg-gray-800 border border-gray-700 rounded-lg p-4 my-4 overflow-x-auto"><code class="text-green-400 font-mono text-sm">$1</code></pre>')
-      .replace(/`([^`]+)`/g, '<code class="bg-gray-800 border border-gray-700 rounded px-2 py-1 font-mono text-sm text-green-400">$1</code>')
-      // Lists - WHITE TEXT
-      .replace(/^\- (.*$)/gim, '<li class="ml-4 mb-1 text-white">• $1</li>')
-      .replace(/^\d+\. (.*$)/gim, '<li class="ml-4 mb-1 list-decimal text-white">$1</li>')
-      // Links
-      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="text-blue-400 hover:text-blue-300 underline" target="_blank">$1</a>')
-      // Images
-      .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" class="max-w-full h-auto rounded-lg my-4" />')
-      // Quotes - WHITE TEXT
-      .replace(/^> (.*$)/gim, '<blockquote class="border-l-4 border-blue-500 pl-4 py-2 my-4 bg-gray-800/50 italic text-gray-300">$1</blockquote>')
-      // Dividers
-      .replace(/^---$/gim, '<hr class="border-gray-600 my-8" />')
-      // Paragraphs - WHITE TEXT
-      .replace(/\n\n/g, '</p><p class="mb-4 text-white leading-relaxed">')
-      .replace(/\n/g, '<br />');
-    
-    return `<div class="prose prose-invert max-w-none text-white"><p class="mb-4 text-white leading-relaxed">${html}</p></div>`;
-  };
-
-  return (
-    <div className="min-h-screen animated-bg">
-      {/* Professional Ghost Editor */}
-      <div className="h-screen flex flex-col bg-gray-900/80 backdrop-blur-sm">
-        {/* Top Navigation Bar */}
-        <div className="flex items-center justify-between p-4 border-b border-gray-700 admin-glass-card">
-          <div className="flex items-center space-x-4">
-            <button
-              onClick={onClose}
-              className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded-lg transition-colors"
-            >
-              <X className="w-5 h-5" />
-            </button>
-            
-            <div className="flex items-center space-x-2">
-              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-              <span className="text-sm font-medium text-white">
-                {isCreating ? 'New Project' : 'Editing Project'}
-              </span>
-            </div>
-
-            <div className="flex items-center space-x-2">
-              {published ? (
-                <span className="px-3 py-1 bg-green-600 text-white rounded-full text-sm font-medium">
-                  Published
-                </span>
-              ) : (
-                <span className="px-3 py-1 bg-gray-600 text-gray-300 rounded-full text-sm font-medium">
-                  Draft
-                </span>
-              )}
-              {featured && (
-                <span className="px-3 py-1 bg-purple-600 text-white rounded-full text-sm font-medium">
-                  Featured
-                </span>
-              )}
-            </div>
-          </div>
-          
-          {/* Controls */}
-          <div className="flex items-center space-x-2">
-            {/* Preview Toggle */}
-            <button
-              onClick={() => setShowPreview(!showPreview)}
-              className={`p-2 rounded transition-colors ${
-                showPreview ? 'bg-blue-600 text-white' : 'text-gray-400 hover:text-white hover:bg-gray-700'
-              }`}
-              title="Toggle Preview"
-            >
-              {showPreview ? <Eye className="w-4 h-4" /> : <EyeOff className="w-4 h-4" />}
-            </button>
-
-            <button
-              onClick={() => setShowSettings(!showSettings)}
-              className={`p-2 rounded-lg transition-colors ${
-                showSettings ? 'bg-blue-600 text-white' : 'text-gray-400 hover:text-white hover:bg-gray-700'
-              }`}
-            >
-              <Settings className="w-5 h-5" />
-            </button>
-            
-            <button
-              onClick={handleSave}
-              className="flex items-center space-x-2 px-6 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors font-medium"
-            >
-              <Save className="w-4 h-4" />
-              <span>Save</span>
-            </button>
-          </div>
-        </div>
-
-        {/* Rich Text Toolbar */}
-        <div className="flex items-center justify-between p-3 border-b border-gray-700 admin-glass-light">
-          <div className="flex items-center space-x-1">
-            {/* Text Formatting */}
-            <div className="flex items-center space-x-1 pr-2 border-r border-gray-600">
-              <button
-                onClick={() => insertMarkdown('bold')}
-                className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                title="Bold (Ctrl+B)"
-              >
-                <Bold className="w-4 h-4" />
-              </button>
-              <button
-                onClick={() => insertMarkdown('italic')}
-                className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                title="Italic (Ctrl+I)"
-              >
-                <Italic className="w-4 h-4" />
-              </button>
-              <button
-                onClick={() => insertMarkdown('underline')}
-                className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                title="Underline"
-              >
-                <Underline className="w-4 h-4" />
-              </button>
-              <button
-                onClick={() => insertMarkdown('strikethrough')}
-                className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                title="Strikethrough"
-              >
-                <Strikethrough className="w-4 h-4" />
-              </button>
-            </div>
-
-            {/* Headers */}
-            <div className="flex items-center space-x-1 px-2 border-r border-gray-600">
-              <button
-                onClick={() => insertMarkdown('heading1')}
-                className="px-2 py-1 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors text-sm font-bold"
-                title="Heading 1"
-              >
-                H1
-              </button>
-              <button
-                onClick={() => insertMarkdown('heading2')}
-                className="px-2 py-1 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors text-sm font-bold"
-                title="Heading 2"
-              >
-                H2
-              </button>
-              <button
-                onClick={() => insertMarkdown('heading3')}
-                className="px-2 py-1 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors text-sm font-bold"
-                title="Heading 3"
-              >
-                H3
-              </button>
-            </div>
-
-            {/* Lists */}
-            <div className="flex items-center space-x-1 px-2 border-r border-gray-600">
-              <button
-                onClick={() => insertMarkdown('list')}
-                className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                title="Bullet List"
-              >
-                <List className="w-4 h-4" />
-              </button>
-              <button
-                onClick={() => insertMarkdown('list-ordered')}
-                className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                title="Numbered List"
-              >
-                <ListOrdered className="w-4 h-4" />
-              </button>
-            </div>
-
-            {/* Insert Elements */}
-            <div className="flex items-center space-x-1 px-2">
-              <button
-                onClick={() => insertMarkdown('link')}
-                className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                title="Insert Link"
-              >
-                <Link2 className="w-4 h-4" />
-              </button>
-              <button
-                onClick={() => insertMarkdown('image')}
-                className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                title="Insert Image"
-              >
-                <ImageIcon className="w-4 h-4" />
-              </button>
-              <button
-                onClick={() => insertMarkdown('code')}
-                className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                title="Code Block"
-              >
-                <Code className="w-4 h-4" />
-              </button>
-              <button
-                onClick={() => insertMarkdown('quote')}
-                className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
-                title="Quote"
-              >
-                <Quote className="w-4 h-4" />
-              </button>
-            </div>
-          </div>
-
-          {/* Stats */}
-          <div className="flex items-center space-x-4 text-sm text-gray-400">
-            <span>{wordCount} words</span>
-            <span>{readingTime} min read</span>
-            {showPreview && (
-              <span>Preview: {previewWidth}%</span>
-            )}
-          </div>
-        </div>
-
-        {/* Main Editor Area */}
-        <div className="flex-1 flex overflow-hidden">
-          {/* Content Area */}
-          <div className="flex-1 flex">
-            {/* Editor Pane */}
-            <div 
-              className={`flex flex-col bg-gray-900/90 transition-all duration-300 ${
-                showPreview ? `w-[${100 - previewWidth}%]` : 'w-full'
-              }`}
-              style={{ width: showPreview ? `${100 - previewWidth}%` : '100%' }}
-            >
-              {/* Title & Description */}
-              <div className="p-8 border-b border-gray-800">
-                <textarea
-                  ref={titleRef}
-                  value={title}
-                  onChange={(e) => {
-                    setTitle(e.target.value);
-                    autoResizeTextarea(e.target);
-                  }}
-                  onInput={(e) => autoResizeTextarea(e.target as HTMLTextAreaElement)}
-                  placeholder="Project title..."
-                  className="w-full text-5xl font-bold text-white bg-transparent border-none outline-none placeholder-gray-500 resize-none overflow-hidden leading-tight mb-6"
-                  rows={1}
-                />
-                <textarea
-                  value={description}
-                  onChange={(e) => {
-                    setDescription(e.target.value);
-                    autoResizeTextarea(e.target);
-                  }}
-                  onInput={(e) => autoResizeTextarea(e.target as HTMLTextAreaElement)}
-                  placeholder="Brief description of your project..."
-                  className="w-full text-xl text-gray-300 bg-transparent border-none outline-none placeholder-gray-500 resize-none overflow-hidden leading-relaxed"
-                  rows={1}
-                />
-              </div>
-
-              {/* Content Editor */}
-              <div className="flex-1 p-8">
-                <textarea
-                  ref={contentRef}
-                  value={content}
-                  onChange={(e) => setContent(e.target.value)}
-                  placeholder="Start writing your story...
-
-Use Markdown for formatting:
-**Bold text** or *italic text*
-# Large heading
-## Medium heading
-### Small heading
-- Bullet points
-1. Numbered lists
-> Quotes
-`code`
-[Links](https://example.com)
-![Images](image-url)"
-                  className="w-full h-full text-lg text-white bg-transparent border-none outline-none placeholder-gray-600 resize-none font-mono leading-relaxed focus:ring-0"
-                  style={{ minHeight: '500px' }}
-                />
-              </div>
-            </div>
-
-            {/* Resize Handle */}
-            {showPreview && (
-              <div
-                ref={resizeRef}
-                className="w-1 bg-gray-700 hover:bg-blue-500 cursor-col-resize flex items-center justify-center transition-colors group"
-                onMouseDown={() => setIsResizing(true)}
-              >
-                <GripVertical className="w-4 h-4 text-gray-600 group-hover:text-blue-400 transition-colors" />
-              </div>
-            )}
-
-            {/* Preview Pane */}
-            {showPreview && (
-              <div 
-                className={`bg-gray-850 overflow-y-auto transition-all duration-300`}
-                style={{ width: `${previewWidth}%` }}
-              >
-                <div className="p-8">
-                  {/* Preview Header */}
-                  <div className="mb-8 border-b border-gray-700 pb-8">
-                    <h1 className="text-5xl font-bold text-white mb-6 leading-tight">
-                      {title || 'Project title...'}
-                    </h1>
-                    <p className="text-xl text-gray-300 leading-relaxed">
-                      {description || 'Brief description of your project...'}
-                    </p>
-                  </div>
-
-                  {/* Preview Content */}
-                  <div 
-                    ref={previewRef}
-                    className="prose prose-invert max-w-none"
-                    dangerouslySetInnerHTML={{ 
-                      __html: content ? renderMarkdownPreview(content) : '<p class="text-gray-500 italic">Start writing to see the preview...</p>' 
-                    }}
-                  />
-                </div>
-              </div>
-            )}
-          </div>
-
-          {/* Settings Sidebar */}
-          <AnimatePresence>
-            {showSettings && (
-              <motion.div
-                initial={{ x: 320 }}
-                animate={{ x: 0 }}
-                exit={{ x: 320 }}
-                className="w-80 admin-glass-card border-l border-gray-700 flex flex-col"
-              >
-                <div className="p-6 border-b border-gray-700">
-                  <h3 className="text-lg font-semibold text-white">Project Settings</h3>
-                </div>
-
-                <div className="flex-1 overflow-y-auto p-6 space-y-8">
-                  {/* Status */}
-                  <div>
-                    <h4 className="text-sm font-medium text-gray-400 uppercase tracking-wider mb-4">Publication</h4>
-                    <div className="space-y-4">
-                      <div className="flex items-center justify-between">
-                        <span className="text-white">Published</span>
-                        <button
-                          onClick={() => setPublished(!published)}
-                          className={`w-12 h-6 rounded-full transition-colors relative ${
-                            published ? 'bg-green-600' : 'bg-gray-600'
-                          }`}
-                        >
-                          <div className={`w-4 h-4 bg-white rounded-full transition-transform absolute top-1 ${
-                            published ? 'translate-x-7' : 'translate-x-1'
-                          }`} />
-                        </button>
-                      </div>
-                      
-                      <div className="flex items-center justify-between">
-                        <span className="text-white">Featured</span>
-                        <button
-                          onClick={() => setFeatured(!featured)}
-                          className={`w-12 h-6 rounded-full transition-colors relative ${
-                            featured ? 'bg-purple-600' : 'bg-gray-600'
-                          }`}
-                        >
-                          <div className={`w-4 h-4 bg-white rounded-full transition-transform absolute top-1 ${
-                            featured ? 'translate-x-7' : 'translate-x-1'
-                          }`} />
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Category & Difficulty */}
-                  <div>
-                    <h4 className="text-sm font-medium text-gray-400 uppercase tracking-wider mb-4">Classification</h4>
-                    <div className="space-y-4">
-                      <div>
-                        <label className="block text-gray-300 text-sm mb-2">Category</label>
-                        <select
-                          value={category}
-                          onChange={(e) => setCategory(e.target.value)}
-                          className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-                        >
-                          {categories.map(cat => (
-                            <option key={cat} value={cat}>{cat}</option>
-                          ))}
-                        </select>
-                      </div>
-                      
-                      <div>
-                        <label className="block text-gray-300 text-sm mb-2">Difficulty</label>
-                        <select
-                          value={difficulty}
-                          onChange={(e) => setDifficulty(e.target.value)}
-                          className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-                        >
-                          {difficulties.map(diff => (
-                            <option key={diff} value={diff}>{diff}</option>
-                          ))}
-                        </select>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Links */}
-                  <div>
-                    <h4 className="text-sm font-medium text-gray-400 uppercase tracking-wider mb-4">External Links</h4>
-                    <div className="space-y-4">
-                      <div>
-                        <label className="block text-gray-300 text-sm mb-2">
-                          <Github className="w-4 h-4 inline mr-1" />
-                          GitHub Repository
-                        </label>
-                        <input
-                          type="url"
-                          value={github}
-                          onChange={(e) => setGithub(e.target.value)}
-                          placeholder="https://github.com/..."
-                          className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                        />
-                      </div>
-                      
-                      <div>
-                        <label className="block text-gray-300 text-sm mb-2">
-                          <Globe className="w-4 h-4 inline mr-1" />
-                          Live Demo
-                        </label>
-                        <input
-                          type="url"
-                          value={live}
-                          onChange={(e) => setLive(e.target.value)}
-                          placeholder="https://..."
-                          className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                        />
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Tags */}
-                  <div>
-                    <h4 className="text-sm font-medium text-gray-400 uppercase tracking-wider mb-4">Tags</h4>
-                    <div className="space-y-3">
-                      <input
-                        type="text"
-                        placeholder="Add a tag and press Enter"
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter') {
-                            e.preventDefault();
-                            addTag(e.currentTarget.value);
-                            e.currentTarget.value = '';
-                          }
-                        }}
-                        className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                      />
-                      
-                      {tags.length > 0 && (
-                        <div className="flex flex-wrap gap-2">
-                          {tags.map((tag) => (
-                            <span
-                              key={tag}
-                              className="inline-flex items-center space-x-1 px-3 py-1 bg-blue-600 text-white rounded-full text-sm"
-                            >
-                              <span>{tag}</span>
-                              <button
-                                onClick={() => removeTag(tag)}
-                                className="text-blue-200 hover:text-white"
-                              >
-                                <X className="w-3 h-3" />
-                              </button>
-                            </span>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      </div>
-    </div>
-  );
-};

components/Toast.tsx

@@ -34,8 +34,8 @@ const ToastItem = ({ toast, onRemove }: ToastProps) => {
   useEffect(() => {
     if (toast.duration !== 0) {
       const timer = setTimeout(() => {
-        setTimeout(() => onRemove(toast.id), 300);
-      }, toast.duration || 5000);
+        setTimeout(() => onRemove(toast.id), 200);
+      }, toast.duration || 3000);
 
       return () => clearTimeout(timer);
     }
@@ -50,48 +50,48 @@ const ToastItem = ({ toast, onRemove }: ToastProps) => {
       case 'warning':
         return <AlertTriangle className="w-5 h-5 text-yellow-400" />;
       case 'info':
-        return <Info className="w-5 h-5 text-blue-400" />;
+        return <Info className="w-5 h-5 text-stone-400" />;
       default:
-        return <Info className="w-5 h-5 text-blue-400" />;
+        return <Info className="w-5 h-5 text-stone-400" />;
     }
   };
 
   const getColors = () => {
     switch (toast.type) {
       case 'success':
-        return 'bg-white border-green-300 text-green-900 shadow-lg';
+        return 'bg-stone-50 border-green-300 text-green-900 shadow-md';
       case 'error':
-        return 'bg-white border-red-300 text-red-900 shadow-lg';
+        return 'bg-stone-50 border-red-200 text-red-800 shadow-md';
       case 'warning':
-        return 'bg-white border-yellow-300 text-yellow-900 shadow-lg';
+        return 'bg-stone-50 border-yellow-200 text-yellow-800 shadow-md';
       case 'info':
-        return 'bg-white border-blue-300 text-blue-900 shadow-lg';
+        return 'bg-stone-50 border-stone-200 text-stone-800 shadow-md';
       default:
-        return 'bg-white border-gray-300 text-gray-900 shadow-lg';
+        return 'bg-stone-50 border-stone-200 text-stone-800 shadow-md';
     }
   };
 
   return (
     <motion.div
-      initial={{ opacity: 0, y: -50, scale: 0.9 }}
+      initial={{ opacity: 0, y: -20, scale: 0.95 }}
       animate={{ opacity: 1, y: 0, scale: 1 }}
-      exit={{ opacity: 0, y: -50, scale: 0.9 }}
-      transition={{ duration: 0.3, ease: "easeOut" }}
-      className={`relative p-4 rounded-xl border ${getColors()} shadow-xl hover:shadow-2xl transition-all duration-300 max-w-sm`}
+      exit={{ opacity: 0, y: -10, scale: 0.95 }}
+      transition={{ duration: 0.2, ease: "easeOut" }}
+      className={`relative p-3 rounded-lg border ${getColors()} shadow-lg hover:shadow-xl transition-all duration-200 max-w-xs text-sm`}
     >
-      <div className="flex items-start space-x-3">
+      <div className="flex items-start space-x-2">
         <div className="flex-shrink-0 mt-0.5">
           {getIcon()}
         </div>
         
         <div className="flex-1 min-w-0">
-          <h4 className="text-sm font-semibold mb-1">{toast.title}</h4>
-          <p className="text-sm opacity-90">{toast.message}</p>
+          <h4 className="text-xs font-semibold mb-0.5 leading-tight">{toast.title}</h4>
+          <p className="text-xs opacity-90 leading-tight">{toast.message}</p>
           
           {toast.action && (
             <button
               onClick={toast.action.onClick}
-              className="mt-2 text-xs font-medium underline hover:no-underline transition-all"
+              className="mt-1.5 text-xs font-medium underline hover:no-underline transition-all"
             >
               {toast.action.label}
             </button>
@@ -100,9 +100,9 @@ const ToastItem = ({ toast, onRemove }: ToastProps) => {
         
         <button
           onClick={() => onRemove(toast.id)}
-          className="flex-shrink-0 p-1 rounded-lg hover:bg-gray-100 transition-colors"
+          className="flex-shrink-0 p-0.5 rounded hover:bg-gray-100/50 transition-colors"
         >
-          <X className="w-4 h-4 text-gray-500" />
+          <X className="w-3 h-3 text-gray-500" />
         </button>
       </div>
       
@@ -111,8 +111,8 @@ const ToastItem = ({ toast, onRemove }: ToastProps) => {
         <motion.div
           initial={{ width: '100%' }}
           animate={{ width: '0%' }}
-          transition={{ duration: (toast.duration || 5000) / 1000, ease: "linear" }}
-          className="absolute bottom-0 left-0 h-1 bg-gradient-to-r from-blue-400 to-green-400 rounded-b-xl"
+          transition={{ duration: (toast.duration || 3000) / 1000, ease: "linear" }}
+          className="absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-stone-400 to-stone-600 rounded-b-lg"
         />
       )}
     </motion.div>
@@ -139,10 +139,27 @@ interface ToastContextType {
 
 const ToastContext = createContext<ToastContextType | undefined>(undefined);
 
+// No-op fallback for SSR or when outside provider
+const noopToast: ToastContextType = {
+  addToast: () => {},
+  showToast: () => {},
+  showSuccess: () => {},
+  showError: () => {},
+  showWarning: () => {},
+  showInfo: () => {},
+  showEmailSent: () => {},
+  showEmailError: () => {},
+  showProjectSaved: () => {},
+  showProjectDeleted: () => {},
+  showImportSuccess: () => {},
+  showImportError: () => {},
+};
+
 export const useToast = () => {
   const context = useContext(ToastContext);
+  // Return no-op fallback during SSR or if used outside provider
   if (!context) {
-    throw new Error('useToast must be used within a ToastProvider');
+    return noopToast;
   }
   return context;
 };
@@ -178,7 +195,7 @@ export const ToastProvider = ({ children }: { children: React.ReactNode }) => {
       type: 'error',
       title,
       message: message || '',
-      duration: 6000
+      duration: 4000 // Shorter duration
     });
   }, [addToast]);
 

docker-compose.production.yml

@@ -1,7 +1,5 @@
 # Production Docker Compose configuration for dk0.dev
-# Optimized for production deployment
-
-version: '3.8'
+# Optimized for production deployment with zero-downtime support
 
 services:
   portfolio:
@@ -21,6 +19,9 @@ services:
       - MY_INFO_PASSWORD=${MY_INFO_PASSWORD}
       - ADMIN_BASIC_AUTH=${ADMIN_BASIC_AUTH:-admin:your_secure_password_here}
       - LOG_LEVEL=info
+      - N8N_WEBHOOK_URL=${N8N_WEBHOOK_URL:-}
+      - N8N_SECRET_TOKEN=${N8N_SECRET_TOKEN:-}
+      - N8N_API_KEY=${N8N_API_KEY:-}
     volumes:
       - portfolio_data:/app/.next/cache
     networks:

docker-compose.staging.yml

@@ -0,0 +1,117 @@
+# Staging Docker Compose configuration
+# Deploys automatically on dev/main branch
+# Uses different ports and container names to avoid conflicts with production
+
+services:
+  portfolio-staging:
+    image: portfolio-app:staging
+    container_name: portfolio-app-staging
+    restart: unless-stopped
+    ports:
+      - "3002:3000"  # Different port from production (3000) - using 3002 to avoid conflicts
+    environment:
+      - NODE_ENV=staging
+      - DATABASE_URL=postgresql://portfolio_user:portfolio_staging_pass@postgres-staging:5432/portfolio_staging_db?schema=public
+      - REDIS_URL=redis://redis-staging:6379
+      - NEXT_PUBLIC_BASE_URL=${NEXT_PUBLIC_BASE_URL:-https://dev.dk0.dev}
+      - MY_EMAIL=${MY_EMAIL:-contact@dk0.dev}
+      - MY_INFO_EMAIL=${MY_INFO_EMAIL:-info@dk0.dev}
+      - MY_PASSWORD=${MY_PASSWORD}
+      - MY_INFO_PASSWORD=${MY_INFO_PASSWORD}
+      - ADMIN_BASIC_AUTH=${ADMIN_BASIC_AUTH:-admin:staging_password}
+      - LOG_LEVEL=debug
+      - N8N_WEBHOOK_URL=${N8N_WEBHOOK_URL:-}
+      - N8N_SECRET_TOKEN=${N8N_SECRET_TOKEN:-}
+    volumes:
+      - portfolio_staging_data:/app/.next/cache
+    networks:
+      - portfolio_staging_net
+      - proxy
+    depends_on:
+      postgres-staging:
+        condition: service_healthy
+      redis-staging:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:3000/api/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+    deploy:
+      resources:
+        limits:
+          memory: 512M
+          cpus: '0.5'
+        reservations:
+          memory: 256M
+          cpus: '0.25'
+
+  postgres-staging:
+    image: postgres:16-alpine
+    container_name: portfolio-postgres-staging
+    restart: unless-stopped
+    environment:
+      - POSTGRES_DB=portfolio_staging_db
+      - POSTGRES_USER=portfolio_user
+      - POSTGRES_PASSWORD=portfolio_staging_pass
+    volumes:
+      - postgres_staging_data:/var/lib/postgresql/data
+    networks:
+      - portfolio_staging_net
+    ports:
+      - "5434:5432"  # Different port from production (5432) - using 5434 to avoid conflicts
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U portfolio_user -d portfolio_staging_db"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 30s
+    deploy:
+      resources:
+        limits:
+          memory: 256M
+          cpus: '0.25'
+        reservations:
+          memory: 128M
+          cpus: '0.1'
+
+  redis-staging:
+    image: redis:7-alpine
+    container_name: portfolio-redis-staging
+    restart: unless-stopped
+    command: redis-server --appendonly yes --maxmemory 128mb --maxmemory-policy allkeys-lru
+    volumes:
+      - redis_staging_data:/data
+    networks:
+      - portfolio_staging_net
+    ports:
+      - "6381:6379"  # Different port from production (6379) - using 6381 to avoid conflicts
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 30s
+    deploy:
+      resources:
+        limits:
+          memory: 128M
+          cpus: '0.25'
+        reservations:
+          memory: 64M
+          cpus: '0.1'
+
+volumes:
+  portfolio_staging_data:
+    driver: local
+  postgres_staging_data:
+    driver: local
+  redis_staging_data:
+    driver: local
+
+networks:
+  portfolio_staging_net:
+    driver: bridge
+  proxy:
+    external: true

docker-compose.zero-downtime-fixed.yml

@@ -1,145 +0,0 @@
-# Zero-Downtime Deployment Configuration (Fixed)
-# Uses nginx as load balancer for seamless updates
-# Fixed to work in Gitea Actions environment
-
-services:
-  nginx:
-    image: nginx:alpine
-    container_name: portfolio-nginx
-    restart: unless-stopped
-    ports:
-      - "80:80"
-      - "443:443"
-    volumes:
-      # Use a more robust path that works in CI/CD environments
-      - ./nginx-zero-downtime.conf:/etc/nginx/nginx.conf:ro
-      # Remove default nginx configuration to prevent conflicts
-      - /etc/nginx/conf.d
-    networks:
-      - portfolio_net
-    depends_on:
-      - portfolio-app-1
-      - portfolio-app-2
-    healthcheck:
-      test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost/health"]
-      interval: 10s
-      timeout: 5s
-      retries: 3
-    # Simple startup command
-    command: >
-      sh -c "
-        rm -rf /etc/nginx/conf.d/*
-        nginx -g 'daemon off;'
-      "
-
-  portfolio-app-1:
-    image: portfolio-app:latest
-    container_name: portfolio-app-1
-    restart: unless-stopped
-    environment:
-      - NODE_ENV=${NODE_ENV:-production}
-      - LOG_LEVEL=${LOG_LEVEL:-info}
-      - DATABASE_URL=postgresql://portfolio_user:portfolio_pass@postgres:5432/portfolio_db?schema=public
-      - REDIS_URL=redis://redis:6379
-      - NEXT_PUBLIC_BASE_URL=${NEXT_PUBLIC_BASE_URL}
-      - NEXT_PUBLIC_UMAMI_URL=${NEXT_PUBLIC_UMAMI_URL}
-      - NEXT_PUBLIC_UMAMI_WEBSITE_ID=${NEXT_PUBLIC_UMAMI_WEBSITE_ID}
-      - MY_EMAIL=${MY_EMAIL}
-      - MY_INFO_EMAIL=${MY_INFO_EMAIL}
-      - MY_PASSWORD=${MY_PASSWORD}
-      - MY_INFO_PASSWORD=${MY_INFO_PASSWORD}
-      - ADMIN_BASIC_AUTH=${ADMIN_BASIC_AUTH}
-    volumes:
-      - portfolio_data:/app/.next/cache
-    networks:
-      - portfolio_net
-    depends_on:
-      postgres:
-        condition: service_healthy
-      redis:
-        condition: service_healthy
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3000/api/health"]
-      interval: 10s
-      timeout: 5s
-      retries: 3
-      start_period: 30s
-
-  portfolio-app-2:
-    image: portfolio-app:latest
-    container_name: portfolio-app-2
-    restart: unless-stopped
-    environment:
-      - NODE_ENV=${NODE_ENV:-production}
-      - LOG_LEVEL=${LOG_LEVEL:-info}
-      - DATABASE_URL=postgresql://portfolio_user:portfolio_pass@postgres:5432/portfolio_db?schema=public
-      - REDIS_URL=redis://redis:6379
-      - NEXT_PUBLIC_BASE_URL=${NEXT_PUBLIC_BASE_URL}
-      - NEXT_PUBLIC_UMAMI_URL=${NEXT_PUBLIC_UMAMI_URL}
-      - NEXT_PUBLIC_UMAMI_WEBSITE_ID=${NEXT_PUBLIC_UMAMI_WEBSITE_ID}
-      - MY_EMAIL=${MY_EMAIL}
-      - MY_INFO_EMAIL=${MY_INFO_EMAIL}
-      - MY_PASSWORD=${MY_PASSWORD}
-      - MY_INFO_PASSWORD=${MY_INFO_PASSWORD}
-      - ADMIN_BASIC_AUTH=${ADMIN_BASIC_AUTH}
-    volumes:
-      - portfolio_data:/app/.next/cache
-    networks:
-      - portfolio_net
-    depends_on:
-      postgres:
-        condition: service_healthy
-      redis:
-        condition: service_healthy
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3000/api/health"]
-      interval: 10s
-      timeout: 5s
-      retries: 3
-      start_period: 30s
-
-  postgres:
-    image: postgres:16-alpine
-    container_name: portfolio-postgres
-    restart: unless-stopped
-    environment:
-      - POSTGRES_DB=portfolio_db
-      - POSTGRES_USER=portfolio_user
-      - POSTGRES_PASSWORD=portfolio_pass
-    volumes:
-      - postgres_data:/var/lib/postgresql/data
-    networks:
-      - portfolio_net
-    healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U portfolio_user -d portfolio_db"]
-      interval: 10s
-      timeout: 5s
-      retries: 5
-      start_period: 30s
-
-  redis:
-    image: redis:7-alpine
-    container_name: portfolio-redis
-    restart: unless-stopped
-    volumes:
-      - redis_data:/data
-    networks:
-      - portfolio_net
-    healthcheck:
-      test: ["CMD", "redis-cli", "ping"]
-      interval: 10s
-      timeout: 5s
-      retries: 5
-      start_period: 30s
-
-volumes:
-  portfolio_data:
-    driver: local
-  postgres_data:
-    driver: local
-  redis_data:
-    driver: local
-
-networks:
-  portfolio_net:
-    driver: bridge

docker-compose.zero-downtime.yml

@@ -1,135 +0,0 @@
-# Zero-Downtime Deployment Configuration
-# Uses nginx as load balancer for seamless updates
-
-services:
-  nginx:
-    image: nginx:alpine
-    container_name: portfolio-nginx
-    restart: unless-stopped
-    ports:
-      - "80:80"
-      - "443:443"
-    volumes:
-      - ./nginx-zero-downtime.conf:/etc/nginx/nginx.conf:ro
-    networks:
-      - portfolio_net
-    depends_on:
-      - portfolio-app-1
-      - portfolio-app-2
-    healthcheck:
-      test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost/health"]
-      interval: 10s
-      timeout: 5s
-      retries: 3
-
-  portfolio-app-1:
-    image: portfolio-app:latest
-    container_name: portfolio-app-1
-    restart: unless-stopped
-    environment:
-      - NODE_ENV=${NODE_ENV:-production}
-      - LOG_LEVEL=${LOG_LEVEL:-info}
-      - DATABASE_URL=postgresql://portfolio_user:portfolio_pass@postgres:5432/portfolio_db?schema=public
-      - REDIS_URL=redis://redis:6379
-      - NEXT_PUBLIC_BASE_URL=${NEXT_PUBLIC_BASE_URL}
-      - NEXT_PUBLIC_UMAMI_URL=${NEXT_PUBLIC_UMAMI_URL}
-      - NEXT_PUBLIC_UMAMI_WEBSITE_ID=${NEXT_PUBLIC_UMAMI_WEBSITE_ID}
-      - MY_EMAIL=${MY_EMAIL}
-      - MY_INFO_EMAIL=${MY_INFO_EMAIL}
-      - MY_PASSWORD=${MY_PASSWORD}
-      - MY_INFO_PASSWORD=${MY_INFO_PASSWORD}
-      - ADMIN_BASIC_AUTH=${ADMIN_BASIC_AUTH}
-    volumes:
-      - portfolio_data:/app/.next/cache
-    networks:
-      - portfolio_net
-    depends_on:
-      postgres:
-        condition: service_healthy
-      redis:
-        condition: service_healthy
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3000/api/health"]
-      interval: 10s
-      timeout: 5s
-      retries: 3
-      start_period: 30s
-
-  portfolio-app-2:
-    image: portfolio-app:latest
-    container_name: portfolio-app-2
-    restart: unless-stopped
-    environment:
-      - NODE_ENV=${NODE_ENV:-production}
-      - LOG_LEVEL=${LOG_LEVEL:-info}
-      - DATABASE_URL=postgresql://portfolio_user:portfolio_pass@postgres:5432/portfolio_db?schema=public
-      - REDIS_URL=redis://redis:6379
-      - NEXT_PUBLIC_BASE_URL=${NEXT_PUBLIC_BASE_URL}
-      - NEXT_PUBLIC_UMAMI_URL=${NEXT_PUBLIC_UMAMI_URL}
-      - NEXT_PUBLIC_UMAMI_WEBSITE_ID=${NEXT_PUBLIC_UMAMI_WEBSITE_ID}
-      - MY_EMAIL=${MY_EMAIL}
-      - MY_INFO_EMAIL=${MY_INFO_EMAIL}
-      - MY_PASSWORD=${MY_PASSWORD}
-      - MY_INFO_PASSWORD=${MY_INFO_PASSWORD}
-      - ADMIN_BASIC_AUTH=${ADMIN_BASIC_AUTH}
-    volumes:
-      - portfolio_data:/app/.next/cache
-    networks:
-      - portfolio_net
-    depends_on:
-      postgres:
-        condition: service_healthy
-      redis:
-        condition: service_healthy
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3000/api/health"]
-      interval: 10s
-      timeout: 5s
-      retries: 3
-      start_period: 30s
-
-  postgres:
-    image: postgres:16-alpine
-    container_name: portfolio-postgres
-    restart: unless-stopped
-    environment:
-      - POSTGRES_DB=portfolio_db
-      - POSTGRES_USER=portfolio_user
-      - POSTGRES_PASSWORD=portfolio_pass
-    volumes:
-      - postgres_data:/var/lib/postgresql/data
-    networks:
-      - portfolio_net
-    healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U portfolio_user -d portfolio_db"]
-      interval: 10s
-      timeout: 5s
-      retries: 5
-      start_period: 30s
-
-  redis:
-    image: redis:7-alpine
-    container_name: portfolio-redis
-    restart: unless-stopped
-    volumes:
-      - redis_data:/data
-    networks:
-      - portfolio_net
-    healthcheck:
-      test: ["CMD", "redis-cli", "ping"]
-      interval: 10s
-      timeout: 5s
-      retries: 5
-      start_period: 30s
-
-volumes:
-  portfolio_data:
-    driver: local
-  postgres_data:
-    driver: local
-  redis_data:
-    driver: local
-
-networks:
-  portfolio_net:
-    driver: bridge

docs/ADD_404_PROJECT_TO_PRODUCTION.md

@@ -0,0 +1,314 @@
+# 🚀 Kernel Panic 404 Projekt auf Production hinzufügen
+
+## Übersicht
+
+Das "Kernel Panic 404 - Interactive Terminal" Projekt wurde bereits zum Seed-Script hinzugefügt, aber um es auf Production zu bekommen, gibt es mehrere Optionen.
+
+---
+
+## Option 1: Über den Editor (Empfohlen) ⭐
+
+### Schritt 1: Editor öffnen
+1. Gehe zu `https://dk0.dev/editor` (oder `https://dev.dk0.dev/editor` für Staging)
+2. Logge dich mit Admin-Credentials ein
+
+### Schritt 2: Neues Projekt erstellen
+1. Klicke auf "New Project" oder gehe direkt zu `/editor`
+2. Fülle die Felder aus:
+
+**Grunddaten:**
+- **Title**: `Kernel Panic 404 - Interactive Terminal`
+- **Description**: `An interactive terminal-style 404 page with a fully functional command line, file system navigation, and Easter eggs inspired by Stranger Things, Mr. Robot, and Hitchhiker's Guide to the Galaxy.`
+- **Category**: `Web Development`
+- **Tags**: `Next.js`, `React`, `TypeScript`, `Terminal`, `404`, `Interactive`, `Easter Eggs`
+- **Featured**: ✅ (Checkbox aktivieren)
+- **Published**: ✅ (Checkbox aktivieren)
+
+**Content (Markdown):**
+```markdown
+# Kernel Panic 404 - Interactive Terminal
+
+An immersive, retro-style 404 page that transforms the error experience into an interactive terminal adventure.
+
+## 🎯 Purpose
+
+Instead of showing a boring "Page Not Found" message, visitors are greeted with a fully functional terminal emulator where they can explore a virtual file system, run commands, and discover hidden Easter eggs.
+
+## 🚀 Features
+
+- **Interactive Terminal**: Full command-line interface with command history
+- **Virtual File System**: Navigate directories, read files, and explore hidden content
+- **CRT Monitor Effects**: Authentic retro computer terminal aesthetics
+- **Easter Eggs**: Hidden references to pop culture (Stranger Things, Mr. Robot, Hitchhiker's Guide)
+- **Command Autocomplete**: Tab completion for commands and file paths
+- **Audio Synthesis**: Sound effects for key presses and special events
+- **Visual Effects**: Glitch effects, color shifts, and screen distortions
+
+## 🛠️ Technologies Used
+
+- Next.js 15 (App Router)
+- React (Client Components)
+- TypeScript
+- CSS Animations
+- Web Audio API
+- Framer Motion (for effects)
+
+## 💻 Available Commands
+
+### System Commands
+- \`ls\`, \`cd\`, \`cat\`, \`grep\`, \`find\`, \`pwd\`
+- \`whoami\`, \`uname\`, \`date\`, \`uptime\`
+- \`clear\`, \`history\`, \`help\`
+
+### Easter Egg Commands
+- \`hawkins\` / \`011\` / \`eleven\` - Enter the Upside Down
+- \`fsociety\` / \`elliot\` / \`bonsoir\` - Mr. Robot mode
+- \`42\` / \`answer\` - Deep Thought calculation
+- \`rm -rf /\` - Trigger kernel panic
+
+## 🎨 Design Features
+
+- **CRT Monitor Aesthetics**: Scanlines, phosphor glow, authentic terminal colors
+- **Retro Typography**: Monospace font with terminal-style appearance
+- **Interactive Elements**: Fully functional command line with history navigation
+- **Visual Effects**: Screen glitches, color shifts, and distortion effects
+
+## 🔍 Hidden Content
+
+The file system contains hidden clues and references:
+- \`/var/log/syslog\` - Contains hints about Easter eggs
+- \`~/.bash_history\` - Shows previous commands
+- \`~/readme.txt\` - Welcome message and hints
+
+## 💡 What I Learned
+
+- Building interactive terminal emulators in React
+- Web Audio API for sound synthesis
+- Complex state management for file systems
+- CSS animations for retro effects
+- Creating engaging error pages
+
+## 🔮 Future Enhancements
+
+- More Easter eggs and hidden commands
+- Additional visual effects
+- Sound theme variations
+- More complex file system structures
+- Network commands (ping, curl, etc.)
+
+## 🎮 Try It Out
+
+Visit any non-existent page on the site to see the terminal in action. Or click the "404" link in the footer!
+
+**Try these commands:**
+- \`ls -la\` - List all files including hidden ones
+- \`cat readme.txt\` - Read the welcome message
+- \`cd /var/log\` - Navigate to system logs
+- \`hawkins\` - Enter the Upside Down mode
+- \`42\` - Get the answer to everything
+```
+
+**Links:**
+- **Live URL**: `/404`
+- **GitHub**: (optional, leer lassen)
+
+3. Klicke auf "Save"
+
+---
+
+## Option 2: Direkt über die API
+
+### Mit curl:
+
+```bash
+curl -X POST https://dk0.dev/api/projects \
+  -H "Content-Type: application/json" \
+  -H "x-admin-request: true" \
+  -u "admin:your_password" \
+  -d '{
+    "title": "Kernel Panic 404 - Interactive Terminal",
+    "description": "An interactive terminal-style 404 page with a fully functional command line, file system navigation, and Easter eggs inspired by Stranger Things, Mr. Robot, and Hitchhiker's Guide to the Galaxy.",
+    "content": "# Kernel Panic 404...",
+    "category": "Web Development",
+    "tags": ["Next.js", "React", "TypeScript", "Terminal", "404", "Interactive", "Easter Eggs"],
+    "featured": true,
+    "published": true,
+    "live": "/404",
+    "date": "2025-01-09",
+    "difficulty": "INTERMEDIATE",
+    "timeToComplete": "1-2 weeks",
+    "technologies": ["Next.js", "React", "TypeScript", "CSS", "Web Audio API"],
+    "challenges": [
+      "Terminal emulator implementation",
+      "File system state management",
+      "Command parsing and execution"
+    ],
+    "lessonsLearned": [
+      "Building interactive UIs",
+      "Web Audio API usage",
+      "Complex state management"
+    ],
+    "futureImprovements": [
+      "More Easter eggs",
+      "Additional visual effects",
+      "Sound theme variations"
+    ],
+    "colorScheme": "Retro terminal green on black",
+    "accessibility": true,
+    "performance": {
+      "lighthouse": 0,
+      "bundleSize": "0KB",
+      "loadTime": "0s"
+    },
+    "analytics": {
+      "views": 0,
+      "likes": 0,
+      "shares": 0
+    }
+  }'
+```
+
+---
+
+## Option 3: Über die Datenbank (SQL)
+
+### Schritt 1: Verbinde zur Production-Datenbank
+
+```bash
+# Wenn du Zugriff auf den Production-Container hast:
+docker exec -it portfolio-postgres psql -U portfolio_user -d portfolio_db
+```
+
+### Schritt 2: Projekt einfügen
+
+```sql
+INSERT INTO project (
+  title,
+  description,
+  content,
+  category,
+  tags,
+  featured,
+  published,
+  live,
+  date,
+  difficulty,
+  "timeToComplete",
+  technologies,
+  challenges,
+  "lessonsLearned",
+  "futureImprovements",
+  "colorScheme",
+  accessibility,
+  performance,
+  analytics,
+  "createdAt",
+  "updatedAt"
+) VALUES (
+  'Kernel Panic 404 - Interactive Terminal',
+  'An interactive terminal-style 404 page with a fully functional command line, file system navigation, and Easter eggs inspired by Stranger Things, Mr. Robot, and Hitchhiker's Guide to the Galaxy.',
+  '# Kernel Panic 404 - Interactive Terminal...',
+  'Web Development',
+  ARRAY['Next.js', 'React', 'TypeScript', 'Terminal', '404', 'Interactive', 'Easter Eggs'],
+  true,
+  true,
+  '/404',
+  '2025-01-09',
+  'INTERMEDIATE',
+  '1-2 weeks',
+  ARRAY['Next.js', 'React', 'TypeScript', 'CSS', 'Web Audio API'],
+  ARRAY['Terminal emulator implementation', 'File system state management', 'Command parsing and execution'],
+  ARRAY['Building interactive UIs', 'Web Audio API usage', 'Complex state management'],
+  ARRAY['More Easter eggs', 'Additional visual effects', 'Sound theme variations'],
+  'Retro terminal green on black',
+  true,
+  '{"lighthouse": 0, "bundleSize": "0KB", "loadTime": "0s"}'::json,
+  '{"views": 0, "likes": 0, "shares": 0}'::json,
+  NOW(),
+  NOW()
+);
+```
+
+---
+
+## Option 4: Seed-Script ausführen (⚠️ Achtung: Löscht alle Projekte!)
+
+**WARNUNG**: Das Seed-Script löscht alle bestehenden Projekte und erstellt sie neu!
+
+```bash
+# Im Production-Container:
+docker exec -it portfolio-app npm run seed
+
+# Oder lokal, wenn du Zugriff auf die Production-DB hast:
+DATABASE_URL="postgresql://portfolio_user:portfolio_pass@your-production-db:5432/portfolio_db" npm run seed
+```
+
+---
+
+## ✅ Verifizierung
+
+Nach dem Hinzufügen des Projekts:
+
+1. **Projekte-Seite prüfen**: Gehe zu `https://dk0.dev/projects`
+   - Das Projekt sollte in der Liste erscheinen
+   - Es sollte als "Featured" markiert sein
+
+2. **Projekt-Detail-Seite prüfen**: 
+   - Klicke auf das Projekt
+   - Die Detail-Seite sollte alle Informationen anzeigen
+
+3. **404-Seite testen**:
+   - Gehe zu `https://dk0.dev/404` oder einer nicht existierenden Route
+   - Die Terminal-404-Seite sollte erscheinen
+
+4. **Footer-Link prüfen**:
+   - Scrolle zum Footer
+   - Der "404" Link sollte sichtbar sein
+
+---
+
+## 🔧 Troubleshooting
+
+### Problem: Projekt erscheint nicht
+
+**Lösung:**
+1. Prüfe, ob `published: true` gesetzt ist
+2. Prüfe die Datenbank direkt: `SELECT * FROM project WHERE title LIKE '%404%';`
+3. Prüfe die Browser-Konsole auf Fehler
+4. Leere den Cache: `docker exec portfolio-app npm run build`
+
+### Problem: Editor funktioniert nicht
+
+**Lösung:**
+1. Prüfe, ob du eingeloggt bist (`/manage`)
+2. Prüfe die Admin-Credentials in den Environment Variables
+3. Prüfe die Browser-Konsole auf Fehler
+
+### Problem: 404-Seite zeigt nicht die Terminal-Seite
+
+**Lösung:**
+1. Prüfe, ob `app/not-found.tsx` existiert
+2. Prüfe, ob `app/components/KernelPanic404.tsx` existiert
+3. Baue die App neu: `npm run build`
+4. Prüfe die Browser-Konsole auf Fehler
+
+---
+
+## 📝 Quick Reference
+
+**Editor URL**: `https://dk0.dev/editor`  
+**Admin Dashboard**: `https://dk0.dev/manage`  
+**404-Seite**: `https://dk0.dev/404` oder jede nicht existierende Route  
+**Projekte-Seite**: `https://dk0.dev/projects`
+
+---
+
+## 🎯 Empfohlener Workflow
+
+1. **Lokal testen**: Füge das Projekt lokal hinzu und teste es
+2. **Auf Staging deployen**: Teste auf `dev.dk0.dev`
+3. **Auf Production deployen**: Wenn alles funktioniert, auf `dk0.dev` deployen
+
+---
+
+Happy coding! 🚀

docs/N8N_CHAT_PRODUCTION_SETUP.md

@@ -0,0 +1,146 @@
+# 🔧 n8n Chat Setup für Production
+
+## Problem: AI Chat funktioniert nicht auf Production
+
+Wenn der AI Chat auf Production nicht funktioniert, liegt es meist an fehlenden Environment-Variablen.
+
+## ✅ Lösung: Environment-Variablen in Gitea setzen
+
+### Schritt 1: Gehe zu Gitea Repository Settings
+
+1. Öffne: `https://git.dk0.dev/denshooter/portfolio/settings`
+2. Klicke auf **"Variables"** im linken Menü
+
+### Schritt 2: Setze die n8n Variables
+
+#### Variables (öffentlich):
+- **Name:** `N8N_WEBHOOK_URL`
+- **Value:** `https://n8n.dk0.dev`
+- **Protect:** ✅ (optional)
+
+- **Name:** `N8N_API_KEY` (optional, falls dein n8n eine API-Key benötigt)
+- **Value:** Dein n8n API Key
+- **Protect:** ✅
+
+#### Secrets (verschlüsselt):
+- **Name:** `N8N_SECRET_TOKEN`
+- **Value:** Dein n8n Secret Token (falls du einen verwendest)
+- **Protect:** ✅
+
+### Schritt 3: Prüfe die n8n Webhook URL
+
+Stelle sicher, dass dein n8n Workflow:
+1. **Aktiv** ist (Toggle oben rechts)
+2. Den Webhook-Pfad `/webhook/chat` hat
+3. Die vollständige URL ist: `https://n8n.dk0.dev/webhook/chat`
+
+### Schritt 4: Teste die Webhook-URL direkt
+
+```bash
+curl -X POST https://n8n.dk0.dev/webhook/chat \
+  -H "Content-Type: application/json" \
+  -d '{"message": "Hello"}'
+```
+
+Wenn du einen `N8N_SECRET_TOKEN` verwendest:
+
+```bash
+curl -X POST https://n8n.dk0.dev/webhook/chat \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer YOUR_SECRET_TOKEN" \
+  -d '{"message": "Hello"}'
+```
+
+### Schritt 5: Deploy neu starten
+
+Nach dem Setzen der Variablen:
+1. Push einen Commit zum `production` Branch
+2. Oder manuell den Workflow in Gitea starten
+3. Die Variablen werden automatisch an den Container übergeben
+
+## 🔍 Debugging
+
+### Prüfe Container-Logs
+
+```bash
+docker logs portfolio-app | grep -i n8n
+```
+
+### Prüfe Environment-Variablen im Container
+
+```bash
+docker exec portfolio-app env | grep N8N
+```
+
+Sollte zeigen:
+```
+N8N_WEBHOOK_URL=https://n8n.dk0.dev
+N8N_SECRET_TOKEN=*** (wenn gesetzt)
+N8N_API_KEY=*** (wenn gesetzt)
+```
+
+### Prüfe Browser-Konsole
+
+Öffne die Browser-Konsole (F12) und schaue nach Fehlern beim Senden einer Chat-Nachricht.
+
+### Prüfe Server-Logs
+
+Die Chat-API loggt jetzt detaillierter:
+- Ob `N8N_WEBHOOK_URL` gesetzt ist
+- Die vollständige Webhook-URL (ohne Credentials)
+- HTTP-Fehler mit Status-Codes
+
+## 🐛 Häufige Probleme
+
+### Problem 1: "N8N_WEBHOOK_URL not configured"
+
+**Lösung:** Variable in Gitea setzen (siehe Schritt 2)
+
+### Problem 2: "n8n webhook failed: 404"
+
+**Lösung:** 
+- Prüfe, ob der n8n Workflow aktiv ist
+- Prüfe, ob der Webhook-Pfad `/webhook/chat` ist
+- Teste die URL direkt mit curl
+
+### Problem 3: "n8n webhook failed: 401/403"
+
+**Lösung:**
+- Prüfe, ob `N8N_SECRET_TOKEN` in Gitea Secrets gesetzt ist
+- Prüfe, ob der Token im n8n Workflow korrekt konfiguriert ist
+
+### Problem 4: "Connection timeout"
+
+**Lösung:**
+- Prüfe, ob n8n erreichbar ist: `curl https://n8n.dk0.dev`
+- Prüfe Firewall-Regeln
+- Prüfe, ob n8n im gleichen Netzwerk ist (Docker Network)
+
+## 📝 Aktuelle Konfiguration
+
+Die Chat-API verwendet:
+- **Webhook URL:** `${N8N_WEBHOOK_URL}/webhook/chat`
+- **Authentication:** 
+  - `Authorization: Bearer ${N8N_SECRET_TOKEN}` (wenn gesetzt)
+  - `X-API-Key: ${N8N_API_KEY}` (wenn gesetzt)
+- **Timeout:** 30 Sekunden
+- **Fallback:** Wenn n8n nicht erreichbar ist, werden intelligente Fallback-Antworten verwendet
+
+## ✅ Checkliste
+
+- [ ] `N8N_WEBHOOK_URL` in Gitea Variables gesetzt
+- [ ] `N8N_SECRET_TOKEN` in Gitea Secrets gesetzt (falls benötigt)
+- [ ] `N8N_API_KEY` in Gitea Variables gesetzt (falls benötigt)
+- [ ] n8n Workflow ist aktiv
+- [ ] Webhook-Pfad ist `/webhook/chat`
+- [ ] Container wurde nach dem Setzen der Variablen neu deployed
+- [ ] Container-Logs zeigen keine n8n-Fehler
+
+## 🚀 Nach dem Setup
+
+Nach dem Setzen der Variablen und einem neuen Deployment sollte der Chat funktionieren. Falls nicht:
+
+1. Prüfe die Container-Logs: `docker logs portfolio-app`
+2. Prüfe die Browser-Konsole für Client-seitige Fehler
+3. Teste die n8n Webhook-URL direkt mit curl
+4. Prüfe, ob die Environment-Variablen im Container gesetzt sind

docs/N8N_CHAT_SETUP.md

@@ -0,0 +1,503 @@
+# n8n + Ollama Chat Setup Guide
+
+This guide explains how to set up the chat feature on your portfolio website using n8n workflows and Ollama for AI responses.
+
+## Overview
+
+The chat system works as follows:
+1. User sends a message via the chat widget on your website
+2. Message is sent to your Next.js API route (`/api/n8n/chat`)
+3. API forwards the message to your n8n webhook
+4. n8n processes the message and sends it to Ollama (local LLM)
+5. Ollama generates a response
+6. Response is returned through n8n back to the website
+7. User sees the AI response
+
+## Prerequisites
+
+- ✅ n8n instance running (you have: https://n8n.dk0.dev)
+- ✅ Ollama installed and running locally or on a server
+- ✅ Environment variables configured in `.env`
+
+## Step 1: Set Up Ollama
+
+### Install Ollama
+
+```bash
+# macOS/Linux
+curl -fsSL https://ollama.com/install.sh | sh
+
+# Or download from https://ollama.com/download
+```
+
+### Pull a Model
+
+```bash
+# For general chat (recommended)
+ollama pull llama3.2
+
+# Or for faster responses (smaller model)
+ollama pull llama3.2:1b
+
+# Or for better quality (larger model)
+ollama pull llama3.2:70b
+```
+
+### Run Ollama
+
+```bash
+# Start Ollama server
+ollama serve
+
+# Test it
+curl http://localhost:11434/api/generate -d '{
+  "model": "llama3.2",
+  "prompt": "Hello, who are you?",
+  "stream": false
+}'
+```
+
+## Step 2: Create n8n Workflow
+
+### 2.1 Create a New Workflow in n8n
+
+1. Go to https://n8n.dk0.dev
+2. Click "Create New Workflow"
+3. Name it "Portfolio Chat Bot"
+
+### 2.2 Add Webhook Trigger
+
+1. Add a **Webhook** node (trigger)
+2. Configure:
+   - **HTTP Method**: POST
+   - **Path**: `chat`
+   - **Authentication**: None (or add if you want)
+   - **Response Mode**: When Last Node Finishes
+
+Your webhook URL will be: `https://n8n.dk0.dev/webhook/chat`
+
+### 2.3 Add Function Node (Message Processing)
+
+Add a **Function** node to extract and format the message:
+
+```javascript
+// Extract the message from the webhook body
+const userMessage = $json.body.message || $json.message;
+
+// Get conversation context (if you want to maintain history)
+const conversationId = $json.body.conversationId || 'default';
+
+// Create context about Dennis
+const systemPrompt = `You are a helpful AI assistant on Dennis Konkol's portfolio website. 
+
+About Dennis:
+- Full-stack developer based in Osnabrück, Germany
+- Student passionate about technology and self-hosting
+- Skills: Next.js, React, Flutter, Docker, DevOps, TypeScript, Python
+- Runs his own infrastructure with Docker Swarm and Traefik
+- Projects include: Clarity (dyslexia app), self-hosted services, game servers
+- Contact: contact@dk0.dev
+- Website: https://dk0.dev
+
+Be friendly, concise, and helpful. Answer questions about Dennis's skills, projects, or experience.
+If asked about things unrelated to Dennis, politely redirect to his portfolio topics.`;
+
+return {
+  json: {
+    userMessage,
+    conversationId,
+    systemPrompt,
+    timestamp: new Date().toISOString()
+  }
+};
+```
+
+### 2.4 Add HTTP Request Node (Ollama)
+
+Add an **HTTP Request** node to call Ollama:
+
+**Configuration:**
+- **Method**: POST
+- **URL**: `http://localhost:11434/api/generate` (or your Ollama server URL)
+- **Authentication**: None
+- **Body Content Type**: JSON
+- **Specify Body**: Using Fields Below
+
+**Body (JSON):**
+```json
+{
+  "model": "llama3.2",
+  "prompt": "{{ $json.systemPrompt }}\n\nUser: {{ $json.userMessage }}\n\nAssistant:",
+  "stream": false,
+  "options": {
+    "temperature": 0.7,
+    "top_p": 0.9,
+    "max_tokens": 500
+  }
+}
+```
+
+**Alternative: If Ollama is on a different server**
+Replace `localhost` with your server IP/domain:
+```
+http://your-ollama-server:11434/api/generate
+```
+
+### 2.5 Add Function Node (Format Response)
+
+Add another **Function** node to format the response:
+
+```javascript
+// Extract the response from Ollama
+const ollamaResponse = $json.response || $json.text || '';
+
+// Clean up the response
+let reply = ollamaResponse.trim();
+
+// Remove any system prompts that might leak through
+reply = reply.replace(/^(System:|Assistant:|User:)/gi, '').trim();
+
+// Limit length if too long
+if (reply.length > 1000) {
+  reply = reply.substring(0, 1000) + '...';
+}
+
+return {
+  json: {
+    reply: reply,
+    timestamp: new Date().toISOString(),
+    model: 'llama3.2'
+  }
+};
+```
+
+### 2.6 Add Respond to Webhook Node
+
+Add a **Respond to Webhook** node:
+
+**Configuration:**
+- **Response Body**: JSON
+- **Response Data**: Using Fields Below
+
+**Body:**
+```json
+{
+  "reply": "={{ $json.reply }}",
+  "timestamp": "={{ $json.timestamp }}",
+  "success": true
+}
+```
+
+### 2.7 Save and Activate
+
+1. Click "Save" (top right)
+2. Toggle "Active" switch to ON
+3. Test the webhook:
+
+```bash
+curl -X POST https://n8n.dk0.dev/webhook/chat \
+  -H "Content-Type: application/json" \
+  -d '{"message": "Hello, tell me about Dennis"}'
+```
+
+## Step 3: Advanced - Conversation Memory
+
+To maintain conversation context across messages, add a **Redis** or **MongoDB** node:
+
+### Option A: Using Redis (Recommended)
+
+**Add Redis Node (Store):**
+```javascript
+// Store conversation in Redis with TTL
+const conversationKey = `chat:${$json.conversationId}`;
+const messages = [
+  { role: 'user', content: $json.userMessage },
+  { role: 'assistant', content: $json.reply }
+];
+
+// Get existing conversation
+const existing = await this.helpers.request({
+  method: 'GET',
+  url: `redis://localhost:6379/${conversationKey}`
+});
+
+// Append new messages
+const conversation = existing ? JSON.parse(existing) : [];
+conversation.push(...messages);
+
+// Keep only last 10 messages
+const recentConversation = conversation.slice(-10);
+
+// Store back with 1 hour TTL
+await this.helpers.request({
+  method: 'SET',
+  url: `redis://localhost:6379/${conversationKey}`,
+  body: JSON.stringify(recentConversation),
+  qs: { EX: 3600 }
+});
+```
+
+### Option B: Using Session Storage (Simpler)
+
+Store conversation in n8n's internal storage:
+
+```javascript
+// Use n8n's static data for simple storage
+const conversationKey = $json.conversationId;
+const staticData = this.getWorkflowStaticData('global');
+
+if (!staticData.conversations) {
+  staticData.conversations = {};
+}
+
+if (!staticData.conversations[conversationKey]) {
+  staticData.conversations[conversationKey] = [];
+}
+
+// Add message
+staticData.conversations[conversationKey].push({
+  user: $json.userMessage,
+  assistant: $json.reply,
+  timestamp: new Date().toISOString()
+});
+
+// Keep only last 10
+staticData.conversations[conversationKey] = 
+  staticData.conversations[conversationKey].slice(-10);
+```
+
+## Step 4: Handle Multiple Users
+
+The chat system automatically handles multiple users through:
+
+1. **Session IDs**: Each user gets a unique `conversationId` generated client-side
+2. **Stateless by default**: Each request is independent unless you add conversation memory
+3. **Redis/Database**: Store conversations per user ID for persistent history
+
+### Client-Side Session Management
+
+The chat widget (created in next step) will generate a unique session ID:
+
+```javascript
+// Auto-generated in the chat widget
+const conversationId = crypto.randomUUID();
+localStorage.setItem('chatSessionId', conversationId);
+```
+
+### Server-Side (n8n)
+
+n8n processes each request independently. For multiple concurrent users:
+- Each webhook call is a separate execution
+- No shared state between users (unless you add it)
+- Ollama can handle concurrent requests
+- Use Redis for scalable conversation storage
+
+## Step 5: Rate Limiting (Optional)
+
+To prevent abuse, add rate limiting in n8n:
+
+```javascript
+// Add this as first function node
+const ip = $json.headers['x-forwarded-for'] || $json.headers['x-real-ip'] || 'unknown';
+const rateLimitKey = `ratelimit:${ip}`;
+const staticData = this.getWorkflowStaticData('global');
+
+if (!staticData.rateLimits) {
+  staticData.rateLimits = {};
+}
+
+const now = Date.now();
+const limit = staticData.rateLimits[rateLimitKey] || { count: 0, resetAt: now + 60000 };
+
+if (now > limit.resetAt) {
+  // Reset after 1 minute
+  limit.count = 0;
+  limit.resetAt = now + 60000;
+}
+
+if (limit.count >= 10) {
+  // Max 10 requests per minute per IP
+  throw new Error('Rate limit exceeded. Please wait a moment.');
+}
+
+limit.count++;
+staticData.rateLimits[rateLimitKey] = limit;
+```
+
+## Step 6: Environment Variables
+
+Update your `.env` file:
+
+```bash
+# n8n Configuration
+N8N_WEBHOOK_URL=https://n8n.dk0.dev
+N8N_SECRET_TOKEN=your-secret-token-here  # Optional: for authentication
+N8N_API_KEY=your-api-key-here            # Optional: for API access
+
+# Ollama Configuration (optional - stored in n8n workflow)
+OLLAMA_URL=http://localhost:11434
+OLLAMA_MODEL=llama3.2
+```
+
+## Step 7: Test the Setup
+
+```bash
+# Test the chat endpoint
+curl -X POST http://localhost:3000/api/n8n/chat \
+  -H "Content-Type: application/json" \
+  -d '{
+    "message": "What technologies does Dennis work with?"
+  }'
+
+# Expected response:
+{
+  "reply": "Dennis works with a variety of modern technologies including Next.js, React, Flutter for mobile development, Docker for containerization, and TypeScript. He's also experienced with DevOps practices, running his own infrastructure with Docker Swarm and Traefik as a reverse proxy."
+}
+```
+
+## Troubleshooting
+
+### Ollama Not Responding
+
+```bash
+# Check if Ollama is running
+curl http://localhost:11434/api/tags
+
+# If not, start it
+ollama serve
+
+# Check logs
+journalctl -u ollama -f
+```
+
+### n8n Webhook Returns 404
+
+- Make sure workflow is **Active** (toggle in top right)
+- Check webhook path matches: `/webhook/chat`
+- Test directly: `https://n8n.dk0.dev/webhook/chat`
+
+### Slow Responses
+
+- Use a smaller model: `ollama pull llama3.2:1b`
+- Reduce `max_tokens` in Ollama request
+- Add response caching for common questions
+- Consider using streaming responses
+
+### CORS Issues
+
+Add CORS headers in the n8n Respond node:
+
+```json
+{
+  "headers": {
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Methods": "POST, OPTIONS",
+    "Access-Control-Allow-Headers": "Content-Type"
+  }
+}
+```
+
+## Performance Tips
+
+1. **Use GPU acceleration** for Ollama if available
+2. **Cache common responses** in Redis
+3. **Implement streaming** for real-time responses
+4. **Use smaller models** for faster responses (llama3.2:1b)
+5. **Add typing indicators** in the UI while waiting
+
+## Security Considerations
+
+1. **Add authentication** to n8n webhook (Bearer token)
+2. **Implement rate limiting** (shown above)
+3. **Sanitize user input** in n8n function node
+4. **Don't expose Ollama** directly to the internet
+5. **Use HTTPS** for all communications
+6. **Add CAPTCHA** to prevent bot abuse
+
+## Next Steps
+
+1. ✅ Set up Ollama
+2. ✅ Create n8n workflow
+3. ✅ Test the API endpoint
+4. 🔲 Create chat UI widget (see CHAT_WIDGET_SETUP.md)
+5. 🔲 Add conversation memory
+6. 🔲 Implement rate limiting
+7. 🔲 Add analytics tracking
+
+## Resources
+
+- [Ollama Documentation](https://ollama.com/docs)
+- [n8n Documentation](https://docs.n8n.io)
+- [Llama 3.2 Model Card](https://ollama.com/library/llama3.2)
+- [Next.js API Routes](https://nextjs.org/docs/api-routes/introduction)
+
+## Example n8n Workflow JSON
+
+Save this as `chat-workflow.json` and import into n8n:
+
+```json
+{
+  "name": "Portfolio Chat Bot",
+  "nodes": [
+    {
+      "parameters": {
+        "path": "chat",
+        "responseMode": "lastNode",
+        "options": {}
+      },
+      "name": "Webhook",
+      "type": "n8n-nodes-base.webhook",
+      "position": [250, 300],
+      "webhookId": "chat-webhook"
+    },
+    {
+      "parameters": {
+        "functionCode": "const userMessage = $json.body.message;\nconst systemPrompt = `You are a helpful AI assistant on Dennis Konkol's portfolio website.`;\nreturn { json: { userMessage, systemPrompt } };"
+      },
+      "name": "Process Message",
+      "type": "n8n-nodes-base.function",
+      "position": [450, 300]
+    },
+    {
+      "parameters": {
+        "method": "POST",
+        "url": "http://localhost:11434/api/generate",
+        "jsonParameters": true,
+        "options": {},
+        "bodyParametersJson": "={ \"model\": \"llama3.2\", \"prompt\": \"{{ $json.systemPrompt }}\\n\\nUser: {{ $json.userMessage }}\\n\\nAssistant:\", \"stream\": false }"
+      },
+      "name": "Call Ollama",
+      "type": "n8n-nodes-base.httpRequest",
+      "position": [650, 300]
+    },
+    {
+      "parameters": {
+        "functionCode": "const reply = $json.response || '';\nreturn { json: { reply: reply.trim() } };"
+      },
+      "name": "Format Response",
+      "type": "n8n-nodes-base.function",
+      "position": [850, 300]
+    },
+    {
+      "parameters": {
+        "respondWith": "json",
+        "options": {},
+        "responseBody": "={ \"reply\": \"{{ $json.reply }}\", \"success\": true }"
+      },
+      "name": "Respond to Webhook",
+      "type": "n8n-nodes-base.respondToWebhook",
+      "position": [1050, 300]
+    }
+  ],
+  "connections": {
+    "Webhook": { "main": [[{ "node": "Process Message", "type": "main", "index": 0 }]] },
+    "Process Message": { "main": [[{ "node": "Call Ollama", "type": "main", "index": 0 }]] },
+    "Call Ollama": { "main": [[{ "node": "Format Response", "type": "main", "index": 0 }]] },
+    "Format Response": { "main": [[{ "node": "Respond to Webhook", "type": "main", "index": 0 }]] }
+  }
+}
+```
+
+---
+
+**Need help?** Check the troubleshooting section or reach out!