chore: Update Docker Compose configuration for PostgreSQL security and initialization

- Removed POSTGRES_HOST_AUTH_METHOD for enhanced security, reverting to default password authentication. - Eliminated init-db.sql mount, as database initialization is now handled via environment variables, with additional grants managed through Prisma migrations if necessary.
chore: Refactor Gitea deployment workflow for PostgreSQL and Redis management
2026-01-15 22:38:10 +01:00 · 2026-01-15 22:20:19 +01:00 · 2026-01-15 21:48:48 +01:00 · 2026-01-15 21:15:14 +01:00 · 2026-01-15 18:15:18 +01:00 · 2026-01-15 17:01:39 +01:00
214 changed files with 31803 additions and 10459 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,65 @@
 # 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
 !scripts/start-with-migrate.js
 # Misc
 .cache
 .temp
 tmp
--- a/.gitea/workflows/ci-cd-fast.yml.disabled
+++ b/.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
--- a/.gitea/workflows/ci-cd-fixed.yml.disabled
+++ b/.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"
--- a/.gitea/workflows/ci-cd-reliable.yml.disabled
+++ b/.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"
--- a/.gitea/workflows/ci-cd-simple.yml.disabled
+++ b/.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"
--- a/.gitea/workflows/ci-cd-with-gitea-vars.yml.disabled
+++ b/.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
+          # Stop old containers (only for the environment being deployed)
-          echo "🛑 Stopping old containers..."
+          echo "🛑 Stopping old ${DEPLOY_ENV} containers..."
-          docker compose down || true
+          docker compose -f $COMPOSE_FILE down || true
          # Clean up orphaned containers
-          echo "🧹 Cleaning up orphaned containers..."
+          echo "🧹 Cleaning up orphaned ${DEPLOY_ENV} containers..."
-          docker compose down --remove-orphans || true
+          docker compose -f $COMPOSE_FILE down --remove-orphans || true
          # Start new containers
-          echo "🚀 Starting new containers..."
+          echo "🚀 Starting new ${DEPLOY_ENV} containers..."
-          docker compose up -d
+          docker compose -f $COMPOSE_FILE up -d --force-recreate
          # Wait a moment for containers to start
-          echo "⏳ Waiting for containers to start..."
+          echo "⏳ Waiting for ${DEPLOY_ENV} containers to start..."
-          sleep 10
+          sleep 15
          # Check container logs for debugging
-          echo "📋 Container logs (first 20 lines):"
+          echo "📋 ${DEPLOY_ENV} container logs (first 30 lines):"
-          docker compose logs --tail=20
+          docker compose -f $COMPOSE_FILE logs --tail=30
-          echo "✅ Deployment completed!"
+          echo "✅ ${DEPLOY_ENV} deployment completed!"
        env:
-          NODE_ENV: ${{ vars.NODE_ENV }}
+          NODE_ENV: ${{ vars.NODE_ENV || 'production' }}
-          LOG_LEVEL: ${{ vars.LOG_LEVEL }}
+          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..."
+          # Determine environment
-          sleep 45
+          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..."
+          echo "📊 Checking ${DEPLOY_ENV} container status..."
-          docker compose ps
+          docker compose -f $COMPOSE_FILE ps
          # Wait for application container to be healthy
-          echo "🏥 Waiting for application container to be healthy..."
+          echo "🏥 Waiting for ${DEPLOY_ENV} application container to be healthy..."
-          for i in {1..60}; do
+          for i in {1..40}; do
-            if docker exec portfolio-app curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
+            if curl -f http://localhost:${HEALTH_PORT}/api/health > /dev/null 2>&1; then
-              echo "✅ Application container is healthy!"
+              echo "✅ ${DEPLOY_ENV} application container is healthy!"
              break
            fi
-            echo "⏳ Waiting for application container... ($i/60)"
+            echo "⏳ Waiting for ${DEPLOY_ENV} application container... ($i/40)"
-            sleep 5
+            sleep 3
          done
          # Additional wait for main page to be accessible
-          echo "🌐 Waiting for main page to be accessible..."
+          echo "🌐 Waiting for ${DEPLOY_ENV} main page to be accessible..."
-          for i in {1..30}; do
+          for i in {1..20}; do
-            if curl -f http://localhost:3000/ > /dev/null 2>&1; then
+            if curl -f http://localhost:${HEALTH_PORT}/ > /dev/null 2>&1; then
-              echo "✅ Main page is accessible!"
+              echo "✅ ${DEPLOY_ENV} main page is accessible!"
              break
            fi
-            echo "⏳ Waiting for main page... ($i/30)"
+            echo "⏳ Waiting for ${DEPLOY_ENV} main page... ($i/20)"
-            sleep 3
+            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:"
+          echo "📊 ${DEPLOY_ENV} container status:"
-          docker compose ps
+          docker compose -f $COMPOSE_FILE ps
          # Check application container
-          echo "🏥 Checking application container..."
+          echo "🏥 Checking ${DEPLOY_ENV} application container..."
-          if docker exec portfolio-app curl -f http://localhost:3000/api/health; then
+          if curl -f http://localhost:${HEALTH_PORT}/api/health; then
-            echo "✅ Application health check passed!"
+            echo "✅ ${DEPLOY_ENV} application health check passed!"
          else
-            echo "❌ Application health check failed!"
+            echo "⚠️ ${DEPLOY_ENV} application health check failed, but continuing..."
-            docker logs portfolio-app --tail=50
+            docker compose -f $COMPOSE_FILE logs --tail=50
-            exit 1
+            # 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
+          if curl -f http://localhost:${HEALTH_PORT}/ > /dev/null; then
-            echo "✅ Main page is accessible!"
+            echo "✅ ${DEPLOY_ENV} main page is accessible!"
          else
-            echo "❌ Main page is not accessible!"
+            echo "⚠️ ${DEPLOY_ENV} main page check failed, but continuing..."
-            exit 1
+            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: |
--- a/.gitea/workflows/ci-cd-woodpecker.yml
+++ b/.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:
--- a/.gitea/workflows/ci-cd-zero-downtime-fixed.yml.disabled
+++ b/.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"
--- a/.gitea/workflows/ci-cd-zero-downtime.yml.disabled
+++ b/.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"
--- a/.gitea/workflows/ci-cd.yml.disabled
+++ b/.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
--- a/.gitea/workflows/debug-secrets.yml
+++ b/.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
--- a/.gitea/workflows/dev-deploy.yml
+++ b/.gitea/workflows/dev-deploy.yml
@@ -0,0 +1,314 @@
 name: Dev Deployment (Zero Downtime)
 on:
  push:
    branches: [ dev ]
 env:
  NODE_VERSION: '20'
  DOCKER_IMAGE: portfolio-app
  IMAGE_TAG: dev
 jobs:
  deploy-dev:
    runs-on: ubuntu-latest  # Gitea Actions: Use runner with ubuntu-latest label
    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..."
          CONTAINER_NAME="portfolio-app-dev"
          HEALTH_PORT="3001"
          IMAGE_NAME="${{ env.DOCKER_IMAGE }}:${{ env.IMAGE_TAG }}"
          # Check for existing container (running or stopped)
          EXISTING_CONTAINER=$(docker ps -aq -f name=$CONTAINER_NAME || echo "")
          # Start DB and Redis if not running
          echo "🗄️ Starting database and Redis..."
          COMPOSE_FILE="docker-compose.dev.minimal.yml"
          # Stop and remove existing containers to ensure clean start with correct architecture
          echo "🧹 Cleaning up existing containers..."
          docker stop portfolio_postgres_dev portfolio_redis_dev 2>/dev/null || true
          docker rm portfolio_postgres_dev portfolio_redis_dev 2>/dev/null || true
          # Remove old images to force re-pull with correct architecture
          echo "🔄 Removing old images to force re-pull..."
          docker rmi postgres:15-alpine redis:7-alpine 2>/dev/null || true
          # Pull images with correct architecture (Docker will auto-detect)
          echo "📥 Pulling images for current architecture..."
          docker compose -f $COMPOSE_FILE pull postgres redis
          # Start containers
          echo "📦 Starting PostgreSQL and Redis containers..."
          docker compose -f $COMPOSE_FILE up -d postgres redis
          # Wait for DB to be ready
          echo "⏳ Waiting for database to be ready..."
          for i in {1..30}; do
            if docker exec portfolio_postgres_dev pg_isready -U portfolio_user -d portfolio_dev >/dev/null 2>&1; then
              echo "✅ Database is ready!"
              break
            fi
            echo "⏳ Waiting for database... ($i/30)"
            sleep 1
          done
          # Export environment variables
          export NODE_ENV=production
          export LOG_LEVEL=${LOG_LEVEL:-debug}
          export NEXT_PUBLIC_BASE_URL=${NEXT_PUBLIC_BASE_URL_DEV:-https://dev.dk0.dev}
          export DATABASE_URL="postgresql://portfolio_user:portfolio_dev_pass@portfolio_postgres_dev:5432/portfolio_dev?schema=public"
          export REDIS_URL="redis://portfolio_redis_dev:6379"
          export MY_EMAIL=${MY_EMAIL}
          export MY_INFO_EMAIL=${MY_INFO_EMAIL}
          export MY_PASSWORD=${MY_PASSWORD}
          export MY_INFO_PASSWORD=${MY_INFO_PASSWORD}
          export ADMIN_BASIC_AUTH=${ADMIN_BASIC_AUTH}
          export ADMIN_SESSION_SECRET=${ADMIN_SESSION_SECRET}
          export N8N_WEBHOOK_URL=${N8N_WEBHOOK_URL:-''}
          export N8N_SECRET_TOKEN=${N8N_SECRET_TOKEN:-''}
          export PORT=${HEALTH_PORT}
          # Stop and remove existing container if it exists (running or stopped)
          if [ ! -z "$EXISTING_CONTAINER" ]; then
            echo "🛑 Stopping and removing existing container..."
            docker stop $EXISTING_CONTAINER 2>/dev/null || true
            docker rm $EXISTING_CONTAINER 2>/dev/null || true
            echo "✅ Old container removed"
            # Wait for Docker to release the port
            echo "⏳ Waiting for Docker to release port ${HEALTH_PORT}..."
            sleep 3
          fi
          # Check if port is still in use by Docker containers (check all containers, not just running)
          PORT_CONTAINER=$(docker ps -a --format "{{.ID}}\t{{.Names}}\t{{.Ports}}" | grep -E "(:${HEALTH_PORT}->|:${HEALTH_PORT}/)" | awk '{print $1}' | head -1 || echo "")
          if [ ! -z "$PORT_CONTAINER" ]; then
            echo "⚠️ Port ${HEALTH_PORT} is still in use by container $PORT_CONTAINER"
            echo "🛑 Stopping and removing container using port..."
            docker stop $PORT_CONTAINER 2>/dev/null || true
            docker rm $PORT_CONTAINER 2>/dev/null || true
            sleep 3
          fi
          # Also check for any containers with the same name that might be using the port
          SAME_NAME_CONTAINER=$(docker ps -a -q -f name=$CONTAINER_NAME | head -1 || echo "")
          if [ ! -z "$SAME_NAME_CONTAINER" ] && [ "$SAME_NAME_CONTAINER" != "$EXISTING_CONTAINER" ]; then
            echo "⚠️ Found another container with same name: $SAME_NAME_CONTAINER"
            docker stop $SAME_NAME_CONTAINER 2>/dev/null || true
            docker rm $SAME_NAME_CONTAINER 2>/dev/null || true
            sleep 2
          fi
          # Also check if port is in use by another process (non-Docker)
          PORT_IN_USE=$(lsof -ti:${HEALTH_PORT} 2>/dev/null || ss -tlnp | grep ":${HEALTH_PORT} " | head -1 || echo "")
          if [ ! -z "$PORT_IN_USE" ] && [ -z "$PORT_CONTAINER" ]; then
            echo "⚠️ Port ${HEALTH_PORT} is in use by process"
            echo "Attempting to free the port..."
            # Try to find and kill the process
            if command -v lsof >/dev/null 2>&1; then
              PID=$(lsof -ti:${HEALTH_PORT} 2>/dev/null || echo "")
              if [ ! -z "$PID" ]; then
                kill -9 $PID 2>/dev/null || true
                sleep 2
              fi
            fi
          fi
          # Final check: verify port is free and wait if needed
          echo "🔍 Verifying port ${HEALTH_PORT} is free..."
          MAX_WAIT=10
          WAIT_COUNT=0
          while [ $WAIT_COUNT -lt $MAX_WAIT ]; do
            PORT_CHECK=$(docker ps --format "{{.Ports}}" | grep -E "(:${HEALTH_PORT}->|:${HEALTH_PORT}/)" || echo "")
            if [ -z "$PORT_CHECK" ]; then
              # Also check with lsof/ss if available
              if command -v lsof >/dev/null 2>&1; then
                PORT_CHECK=$(lsof -ti:${HEALTH_PORT} 2>/dev/null || echo "")
              elif command -v ss >/dev/null 2>&1; then
                PORT_CHECK=$(ss -tlnp | grep ":${HEALTH_PORT} " || echo "")
              fi
            fi
            if [ -z "$PORT_CHECK" ]; then
              echo "✅ Port ${HEALTH_PORT} is free!"
              break
            fi
            WAIT_COUNT=$((WAIT_COUNT + 1))
            echo "⏳ Port still in use, waiting... ($WAIT_COUNT/$MAX_WAIT)"
            sleep 1
          done
          # If port is still in use, try alternative port
          if [ $WAIT_COUNT -ge $MAX_WAIT ]; then
            echo "⚠️ Port ${HEALTH_PORT} is still in use after waiting. Trying alternative port..."
            HEALTH_PORT="3002"
            echo "🔄 Using alternative port: ${HEALTH_PORT}"
            # Quick check if alternative port is also in use
            ALT_PORT_CHECK=$(docker ps --format "{{.Ports}}" | grep -E "(:${HEALTH_PORT}->|:${HEALTH_PORT}/)" || echo "")
            if [ ! -z "$ALT_PORT_CHECK" ]; then
              echo "❌ Alternative port ${HEALTH_PORT} is also in use!"
              echo "Attempting to free alternative port..."
              ALT_CONTAINER=$(docker ps -a --format "{{.ID}}\t{{.Names}}\t{{.Ports}}" | grep -E "(:${HEALTH_PORT}->|:${HEALTH_PORT}/)" | awk '{print $1}' | head -1 || echo "")
              if [ ! -z "$ALT_CONTAINER" ]; then
                docker stop $ALT_CONTAINER 2>/dev/null || true
                docker rm $ALT_CONTAINER 2>/dev/null || true
                sleep 2
              fi
            fi
          fi
          # Ensure networks exist
          echo "🌐 Checking for networks..."
          if ! docker network inspect proxy >/dev/null 2>&1; then
            echo "⚠️ Proxy network not found, creating it..."
            docker network create proxy 2>/dev/null || echo "Network might already exist or creation failed"
          else
            echo "✅ Proxy network exists"
          fi
          if ! docker network inspect portfolio_dev >/dev/null 2>&1; then
            echo "⚠️ Portfolio dev network not found, creating it..."
            docker network create portfolio_dev 2>/dev/null || echo "Network might already exist or creation failed"
          else
            echo "✅ Portfolio dev network exists"
          fi
          # Connect proxy network to portfolio_dev network if needed
          # (This allows the app to access both proxy and DB/Redis)
          # Start new container with updated image
          echo "🆕 Starting new dev container..."
          docker run -d \
            --name $CONTAINER_NAME \
            --restart unless-stopped \
            --network portfolio_dev \
            -p ${HEALTH_PORT}:3000 \
            -e NODE_ENV=production \
            -e LOG_LEVEL=${LOG_LEVEL:-debug} \
            -e NEXT_PUBLIC_BASE_URL=${NEXT_PUBLIC_BASE_URL_DEV:-https://dev.dk0.dev} \
            -e DATABASE_URL=${DATABASE_URL} \
            -e REDIS_URL=${REDIS_URL} \
            -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} \
            -e ADMIN_SESSION_SECRET=${ADMIN_SESSION_SECRET} \
            -e N8N_WEBHOOK_URL=${N8N_WEBHOOK_URL:-''} \
            -e N8N_SECRET_TOKEN=${N8N_SECRET_TOKEN:-''} \
            $IMAGE_NAME
          # Connect container to proxy network as well (for external access)
          echo "🔗 Connecting container to proxy network..."
          docker network connect proxy $CONTAINER_NAME 2>/dev/null || echo "Container might already be connected to proxy network"
          # Wait for new container to be healthy
          echo "⏳ Waiting for new container to be healthy..."
          HEALTH_CHECK_PASSED=false
          for i in {1..60}; do
            NEW_CONTAINER=$(docker ps -q -f name=$CONTAINER_NAME)
            if [ ! -z "$NEW_CONTAINER" ]; then
              # Check Docker 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!"
                HEALTH_CHECK_PASSED=true
                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!"
                HEALTH_CHECK_PASSED=true
                break
              fi
            fi
            echo "⏳ Waiting... ($i/60)"
            sleep 2
          done
          # Verify new container is working
          if [ "$HEALTH_CHECK_PASSED" != "true" ]; then
            echo "⚠️ New dev container health check failed, but continuing (non-blocking)..."
            docker logs $CONTAINER_NAME --tail=50
          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: production
          LOG_LEVEL: ${{ vars.LOG_LEVEL || 'debug' }}
          NEXT_PUBLIC_BASE_URL_DEV: ${{ vars.NEXT_PUBLIC_BASE_URL_DEV || 'https://dev.dk0.dev' }}
          DATABASE_URL: postgresql://portfolio_user:portfolio_dev_pass@portfolio_postgres_dev:5432/portfolio_dev?schema=public
          REDIS_URL: redis://portfolio_redis_dev:6379
          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 }}
          ADMIN_SESSION_SECRET: ${{ secrets.ADMIN_SESSION_SECRET }}
          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:3001/api/health && curl -f http://localhost:3001/ > /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 logs portfolio-app-dev --tail=50
      - name: Cleanup
        run: |
          echo "🧹 Cleaning up old images..."
          docker image prune -f
          echo "✅ Cleanup completed"
--- a/.gitea/workflows/production-deploy.yml
+++ b/.gitea/workflows/production-deploy.yml
@@ -0,0 +1,275 @@
 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  # Gitea Actions: Use runner with ubuntu-latest label
    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 }}"
          export ADMIN_SESSION_SECRET="${{ secrets.ADMIN_SESSION_SECRET }}"
          # 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_PRODUCTION || '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 }}
          ADMIN_SESSION_SECRET: ${{ secrets.ADMIN_SESSION_SECRET }}
          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"
--- a/.gitea/workflows/staging-deploy.yml.disabled
+++ b/.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"
--- a/.gitea/workflows/test-and-build.yml
+++ b/.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..."
--- a/.gitea/workflows/test-gitea-variables.yml
+++ b/.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]")"
--- a/.github/workflows/ci-cd.yml
+++ b/.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
+          # Check if production container is running
-          docker compose -f $COMPOSE_FILE down || true
+          if docker ps --format '{{.Names}}' | grep -q "^${CONTAINER_NAME}$"; then
-          
+            echo "🔄 Production container is running - performing zero-downtime deployment..."
-          # Remove old images to force using new one
+            
-          docker image prune -f
+            # Start new container with different name first (blue-green)
-          
+            echo "🚀 Starting new container (green)..."
-          # Start new container with force recreate
+            docker run -d \
-          docker compose -f $COMPOSE_FILE up -d --force-recreate
+              --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..."
+          echo "⏳ Waiting for production application to be healthy..."
-          timeout 60 bash -c 'until curl -f http://localhost:3000/api/health; do sleep 2; done'
+          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!"
+            echo "❌ Production deployment failed!"
-            docker compose -f $COMPOSE_FILE logs
+            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: |
--- a/.gitignore
+++ b/.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
--- a/ANALYTICS.md
+++ b/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
--- a/DEPLOYMENT-FIXES.md
+++ b/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
--- a/DEPLOYMENT-IMPROVEMENTS.md
+++ b/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.
--- a/DEPLOYMENT.md
+++ b/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
--- a/DEV-SETUP.md
+++ b/DEV-SETUP.md
@@ -1,239 +0,0 @@
 # 🚀 Development Environment Setup
 This document explains how to set up and use the development environment for the portfolio project.
 ## ✨ Features
 - **Automatic Database Setup**: PostgreSQL and Redis start automatically
 - **Hot Reload**: Next.js development server with hot reload
 - **Database Integration**: Real database integration for email management
 - **Modern Admin Dashboard**: Completely redesigned admin interface
 - **Minimal Setup**: Only essential services for fast development
 ## 🛠️ Quick Start
 ### Prerequisites
 - Node.js 18+ 
 - Docker & Docker Compose
 - npm or yarn
 ### 1. Install Dependencies
 ```bash
 npm install
 ```
 ### 2. Start Development Environment
 #### Option A: Full Development Environment (with Docker)
 ```bash
 npm run dev
 ```
 This single command will:
 - Start PostgreSQL database
 - Start Redis cache
 - Start Next.js development server
 - Set up all environment variables
 #### Option B: Simple Development Mode (without Docker)
 ```bash
 npm run dev:simple
 ```
 This starts only the Next.js development server without Docker services. Use this if you don't have Docker installed or want a faster startup.
 ### 3. Access Services
 - **Portfolio**: http://localhost:3000
 - **Admin Dashboard**: http://localhost:3000/manage
 - **PostgreSQL**: localhost:5432
 - **Redis**: localhost:6379
 ## 📧 Email Testing
 The development environment supports email functionality:
 1. Send emails through the contact form or admin panel
 2. Emails are sent directly (configure SMTP in production)
 3. Check console logs for email debugging
 ## 🗄️ Database
 ### Development Database
 - **Host**: localhost:5432
 - **Database**: portfolio_dev
 - **User**: portfolio_user
 - **Password**: portfolio_dev_pass
 ### Database Commands
 ```bash
 # Generate Prisma client
 npm run db:generate
 # Push schema changes
 npm run db:push
 # Seed database with sample data
 npm run db:seed
 # Open Prisma Studio
 npm run db:studio
 # Reset database
 npm run db:reset
 ```
 ## 🎨 Admin Dashboard
 The new admin dashboard includes:
 - **Overview**: Statistics and recent activity
 - **Projects**: Manage portfolio projects
 - **Emails**: Handle contact form submissions with beautiful templates
 - **Analytics**: View performance metrics
 - **Settings**: Import/export functionality
 ### Email Templates
 Three beautiful email templates are available:
 1. **Welcome Template** (Green): Friendly greeting with portfolio links
 2. **Project Template** (Purple): Professional project discussion response
 3. **Quick Template** (Orange): Fast acknowledgment response
 ## 🔧 Environment Variables
 Create a `.env.local` file:
 ```env
 # Development Database
 DATABASE_URL="postgresql://portfolio_user:portfolio_dev_pass@localhost:5432/portfolio_dev?schema=public"
 # Redis
 REDIS_URL="redis://localhost:6379"
 # Email (for production)
 MY_EMAIL=contact@dk0.dev
 MY_PASSWORD=your-email-password
 # Application
 NEXT_PUBLIC_BASE_URL=http://localhost:3000
 NODE_ENV=development
 ```
 ## 🛑 Stopping the Environment
 Use Ctrl+C to stop all services, or:
 ```bash
 # Stop Docker services only
 npm run docker:dev:down
 ```
 ## 🐳 Docker Commands
 ```bash
 # Start only database services
 npm run docker:dev
 # Stop database services
 npm run docker:dev:down
 # View logs
 docker compose -f docker-compose.dev.minimal.yml logs -f
 ```
 ## 📁 Project Structure
 ```
 ├── docker-compose.dev.minimal.yml  # Minimal development services
 ├── scripts/
 │   ├── dev-minimal.js       # Main development script
 │   ├── dev-simple.js        # Simple development script
 │   ├── setup-database.js    # Database setup script
 │   └── init-db.sql          # Database initialization
 ├── app/
 │   ├── admin/               # Admin dashboard
 │   ├── api/
 │   │   ├── contacts/        # Contact management API
 │   │   └── email/           # Email sending API
 │   └── components/
 │       ├── ModernAdminDashboard.tsx
 │       ├── EmailManager.tsx
 │       └── EmailResponder.tsx
 └── prisma/
    └── schema.prisma        # Database schema
 ```
 ## 🚨 Troubleshooting
 ### Docker Compose Not Found
 If you get the error `spawn docker compose ENOENT`:
 ```bash
 # Try the simple dev mode instead
 npm run dev:simple
 # Or install Docker Desktop
 # Download from: https://www.docker.com/products/docker-desktop
 ```
 ### Port Conflicts
 If ports are already in use:
 ```bash
 # Check what's using the ports
 lsof -i :3000
 lsof -i :5432
 lsof -i :6379
 # Kill processes if needed
 kill -9 <PID>
 ```
 ### Database Connection Issues
 ```bash
 # Restart database services
 npm run docker:dev:down
 npm run docker:dev
 # Check database status
 docker compose -f docker-compose.dev.minimal.yml ps
 ```
 ### Email Not Working
 1. Verify environment variables
 2. Check browser console for errors
 3. Ensure SMTP is configured for production
 ## 🎯 Production Deployment
 For production deployment, use:
 ```bash
 npm run build
 npm run start
 ```
 The production environment uses the production Docker Compose configuration.
 ## 📝 Notes
 - The development environment automatically creates sample data
 - Database changes are persisted in Docker volumes
 - Hot reload works for all components and API routes
 - Minimal setup for fast development startup
 ## 🔗 Links
 - **Portfolio**: https://dk0.dev
 - **Admin**: https://dk0.dev/manage
 - **GitHub**: https://github.com/denniskonkol/portfolio
--- a/49
+++ b/49
@@ -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 Prisma schema first (for better caching)
-COPY . .
+COPY prisma ./prisma
-# Install type definitions for react-responsive-masonry and node-fetch
+# Generate Prisma client (cached if schema unchanged)
 RUN npm install --save-dev @types/react-responsive-masonry @types/node-fetch
 # Generate Prisma client
 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,12 +73,21 @@ 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
 COPY --from=builder /app/prisma ./prisma
 COPY --from=builder /app/node_modules/.prisma ./node_modules/.prisma
 COPY --from=builder /app/node_modules/prisma ./node_modules/prisma
 COPY --from=builder /app/node_modules/@prisma ./node_modules/@prisma
 # Create scripts directory and copy start script AFTER standalone to ensure it's not overwritten
 RUN mkdir -p scripts && chown nextjs:nodejs scripts
 COPY --from=builder --chown=nextjs:nodejs /app/scripts/start-with-migrate.js ./scripts/start-with-migrate.js
 # Note: Environment variables should be passed via docker-compose or runtime environment
 # DO NOT copy .env files into the image for security reasons
@@ -76,4 +103,4 @@ ENV HOSTNAME="0.0.0.0"
 HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
  CMD curl -f http://localhost:3000/api/health || exit 1
-CMD ["node", "server.js"]
+CMD ["node", "scripts/start-with-migrate.js"]
--- a/PRODUCTION-DEPLOYMENT.md
+++ b/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.
--- a/README.md
+++ b/README.md
@@ -1,3 +1,7 @@
 # Quick links
 - **Ops / setup / deployment / testing**: `docs/OPERATIONS.md`
 # Dennis Konkol Portfolio - Modern Dark Theme
 Ein modernes, responsives Portfolio mit dunklem Design, coolen Animationen und einem integrierten Admin-Dashboard.
@@ -48,8 +52,10 @@ npm run start        # Production Server
 ## 📖 Dokumentation
 - [Development Setup](DEV-SETUP.md) - Detaillierte Setup-Anleitung
- [Deployment Guide](DEPLOYMENT.md) - Production Deployment
+- [Deployment Setup](DEPLOYMENT_SETUP.md) - Production Deployment
 - [Analytics](ANALYTICS.md) - Analytics und Performance
 - [CMS Guide](docs/CMS_GUIDE.md) - Inhalte/Sprachen pflegen (Rich Text)
 - [Testing & Deployment](docs/TESTING_AND_DEPLOYMENT.md) - Branches → Container → Domains
 ## 🔗 Links
--- a/SAFE_PUSH_TO_MAIN.md
+++ b/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! 🛡️
--- a/SECURITY-CHECKLIST.md
+++ b/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
--- a/SECURITY-UPDATE.md
+++ b/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)
--- a/SECURITY_IMPROVEMENTS.md
+++ b/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');
 ```
--- a/STAGING_SETUP.md
+++ b/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! 🚀
--- a/mocks/@prisma/client.ts
+++ b/mocks/@prisma/client.ts
@@ -0,0 +1,39 @@
 // Minimal Prisma Client mock for tests
 // Export a PrismaClient class with the used methods stubbed out.
 export class PrismaClient {
  project = {
    findMany: jest.fn(async () => []),
    findUnique: jest.fn(async (_args: unknown) => null),
    count: jest.fn(async () => 0),
    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: unknown) => data),
    findMany: jest.fn(async () => []),
    count: jest.fn(async () => 0),
    update: jest.fn(async (data: unknown) => data),
    delete: jest.fn(async (data: unknown) => data),
  };
  pageView = {
    create: jest.fn(async (data: unknown) => data),
    count: jest.fn(async () => 0),
    deleteMany: jest.fn(async () => ({})),
  };
  userInteraction = {
    create: jest.fn(async (data: unknown) => data),
    groupBy: jest.fn(async () => []),
    deleteMany: jest.fn(async () => ({})),
  };
  $connect = jest.fn(async () => {});
  $disconnect = jest.fn(async () => {});
 }
 export default PrismaClient;
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -0,0 +1,27 @@
 import { NextIntlClientProvider } from "next-intl";
 import { setRequestLocale } from "next-intl/server";
 import React from "react";
 import ConsentBanner from "../components/ConsentBanner";
 export default async function LocaleLayout({
  children,
  params,
 }: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
 }) {
  const { locale } = await params;
  // Ensure next-intl actually uses the route segment locale for this request.
  setRequestLocale(locale);
  // Load messages explicitly by route locale to avoid falling back to the wrong
  // language when request-level locale detection is unavailable/misconfigured.
  const messages = (await import(`../../messages/${locale}.json`)).default;
  return (
    <NextIntlClientProvider locale={locale} messages={messages}>
      {children}
      <ConsentBanner />
    </NextIntlClientProvider>
  );
 }
--- a/app/[locale]/legal-notice/page.tsx
+++ b/app/[locale]/legal-notice/page.tsx
@@ -0,0 +1,19 @@
 import type { Metadata } from "next";
 import { getLanguageAlternates, toAbsoluteUrl } from "@/lib/seo";
 export { default } from "../../legal-notice/page";
 export async function generateMetadata({
  params,
 }: {
  params: Promise<{ locale: string }>;
 }): Promise<Metadata> {
  const { locale } = await params;
  const languages = getLanguageAlternates({ pathWithoutLocale: "legal-notice" });
  return {
    alternates: {
      canonical: toAbsoluteUrl(`/${locale}/legal-notice`),
      languages,
    },
  };
 }
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -0,0 +1,23 @@
 import type { Metadata } from "next";
 import HomePage from "../_ui/HomePage";
 import { getLanguageAlternates, toAbsoluteUrl } from "@/lib/seo";
 export async function generateMetadata({
  params,
 }: {
  params: Promise<{ locale: string }>;
 }): Promise<Metadata> {
  const { locale } = await params;
  const languages = getLanguageAlternates({ pathWithoutLocale: "" });
  return {
    alternates: {
      canonical: toAbsoluteUrl(`/${locale}`),
      languages,
    },
  };
 }
 export default function Page() {
  return <HomePage />;
 }
--- a/app/[locale]/privacy-policy/page.tsx
+++ b/app/[locale]/privacy-policy/page.tsx
@@ -0,0 +1,19 @@
 import type { Metadata } from "next";
 import { getLanguageAlternates, toAbsoluteUrl } from "@/lib/seo";
 export { default } from "../../privacy-policy/page";
 export async function generateMetadata({
  params,
 }: {
  params: Promise<{ locale: string }>;
 }): Promise<Metadata> {
  const { locale } = await params;
  const languages = getLanguageAlternates({ pathWithoutLocale: "privacy-policy" });
  return {
    alternates: {
      canonical: toAbsoluteUrl(`/${locale}/privacy-policy`),
      languages,
    },
  };
 }
--- a/app/[locale]/projects/[slug]/page.tsx
+++ b/app/[locale]/projects/[slug]/page.tsx
@@ -0,0 +1,53 @@
 import { prisma } from "@/lib/prisma";
 import ProjectDetailClient from "@/app/_ui/ProjectDetailClient";
 import { notFound } from "next/navigation";
 import type { Metadata } from "next";
 import { getLanguageAlternates, toAbsoluteUrl } from "@/lib/seo";
 export const revalidate = 300;
 export async function generateMetadata({
  params,
 }: {
  params: Promise<{ locale: string; slug: string }>;
 }): Promise<Metadata> {
  const { locale, slug } = await params;
  const languages = getLanguageAlternates({ pathWithoutLocale: `projects/${slug}` });
  return {
    alternates: {
      canonical: toAbsoluteUrl(`/${locale}/projects/${slug}`),
      languages,
    },
  };
 }
 export default async function ProjectPage({
  params,
 }: {
  params: Promise<{ locale: string; slug: string }>;
 }) {
  const { locale, slug } = await params;
  const project = await prisma.project.findFirst({
    where: { slug, published: true },
    include: {
      translations: {
        where: { locale },
        select: { title: true, description: true },
      },
    },
  });
  if (!project) return notFound();
  const tr = project.translations?.[0];
  const { translations: _translations, ...rest } = project;
  const localized = {
    ...rest,
    title: tr?.title ?? project.title,
    description: tr?.description ?? project.description,
  };
  return <ProjectDetailClient project={localized} locale={locale} />;
 }
--- a/app/[locale]/projects/page.tsx
+++ b/app/[locale]/projects/page.tsx
@@ -0,0 +1,53 @@
 import { prisma } from "@/lib/prisma";
 import ProjectsPageClient from "@/app/_ui/ProjectsPageClient";
 import type { Metadata } from "next";
 import { getLanguageAlternates, toAbsoluteUrl } from "@/lib/seo";
 export const revalidate = 300;
 export async function generateMetadata({
  params,
 }: {
  params: Promise<{ locale: string }>;
 }): Promise<Metadata> {
  const { locale } = await params;
  const languages = getLanguageAlternates({ pathWithoutLocale: "projects" });
  return {
    alternates: {
      canonical: toAbsoluteUrl(`/${locale}/projects`),
      languages,
    },
  };
 }
 export default async function ProjectsPage({
  params,
 }: {
  params: Promise<{ locale: string }>;
 }) {
  const { locale } = await params;
  const projects = await prisma.project.findMany({
    where: { published: true },
    orderBy: { createdAt: "desc" },
    include: {
      translations: {
        where: { locale },
        select: { title: true, description: true },
      },
    },
  });
  const localized = projects.map((p) => {
    const tr = p.translations?.[0];
    const { translations: _translations, ...rest } = p;
    return {
      ...rest,
      title: tr?.title ?? p.title,
      description: tr?.description ?? p.description,
    };
  });
  return <ProjectsPageClient projects={localized} locale={locale} />;
 }
--- a/app/tests/api/email.test.tsx
+++ b/app/tests/api/email.test.tsx
@@ -13,7 +13,11 @@ beforeAll(() => {
 });
 afterAll(() => {
-  (console.error as jest.Mock).mockRestore();
+  // restoreMocks may already restore it; guard against calling mockRestore on non-mock
  const maybeMock = console.error as unknown as jest.Mock | undefined;
  if (maybeMock && typeof maybeMock.mockRestore === 'function') {
    maybeMock.mockRestore();
  }
 });
 beforeEach(() => {
--- a/app/tests/api/fetchAllProjects.test.tsx
+++ b/app/tests/api/fetchAllProjects.test.tsx
@@ -1,43 +1,28 @@
 import { GET } from '@/app/api/fetchAllProjects/route';
 import { NextResponse } from 'next/server';
-// Wir mocken node-fetch direkt
+jest.mock('@/lib/prisma', () => ({
-jest.mock('node-fetch', () => {
+  prisma: {
-  return jest.fn(() =>
+    project: {
-    Promise.resolve({
+      findMany: jest.fn(async () => [
-      json: () =>
+        {
-        Promise.resolve({
+          id: 1,
-          posts: [
+          slug: 'just-doing-some-testing',
-            {
+          title: 'Just Doing Some Testing',
-              id: '67ac8dfa709c60000117d312',
+          updatedAt: new Date('2025-02-13T14:25:38.000Z'),
-              title: 'Just Doing Some Testing',
+          metaDescription: 'Hello bla bla bla bla',
-              meta_description: 'Hello bla bla bla bla',
+        },
-              slug: 'just-doing-some-testing',
+        {
-              updated_at: '2025-02-13T14:25:38.000+00:00',
+          id: 2,
-            },
+          slug: 'blockchain-based-voting-system',
-            {
+          title: 'Blockchain Based Voting System',
-              id: '67aaffc3709c60000117d2d9',
+          updatedAt: new Date('2025-02-13T16:54:42.000Z'),
-              title: 'Blockchain Based Voting System',
+          metaDescription:
-              meta_description:
+            'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
-                '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,
            },
          },
        }),
    })
  );
 });
 jest.mock('next/server', () => ({
  NextResponse: {
@@ -46,12 +31,8 @@ jest.mock('next/server', () => ({
 }));
 describe('GET /api/fetchAllProjects', () => {
  beforeAll(() => {
    process.env.GHOST_API_URL = 'http://localhost:2368';
    process.env.GHOST_API_KEY = 'some-key';
  });
  it('should return a list of projects (partial match)', async () => {
    const { GET } = await import('@/app/api/fetchAllProjects/route');
    await GET();
    // Den tatsächlichen Argumentwert extrahieren
@@ -60,11 +41,11 @@ describe('GET /api/fetchAllProjects', () => {
    expect(responseArg).toMatchObject({
      posts: expect.arrayContaining([
        expect.objectContaining({
-          id: '67ac8dfa709c60000117d312',
+          id: '1',
          title: 'Just Doing Some Testing',
        }),
        expect.objectContaining({
-          id: '67aaffc3709c60000117d2d9',
+          id: '2',
          title: 'Blockchain Based Voting System',
        }),
      ]),
--- a/app/tests/api/fetchProject.test.tsx
+++ b/app/tests/api/fetchProject.test.tsx
@@ -1,32 +1,33 @@
 import { GET } from '@/app/api/fetchProject/route';
 import { NextRequest, NextResponse } from 'next/server';
-import { mockFetch } from '@/app/__tests__/__mocks__/mock-fetch';
+
 jest.mock('@/lib/prisma', () => ({
  prisma: {
    project: {
      findUnique: jest.fn(async ({ where }: { where: { slug: string } }) => {
        if (where.slug !== 'blockchain-based-voting-system') return null;
        return {
          id: 2,
          title: 'Blockchain Based Voting System',
          metaDescription:
            'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
          slug: 'blockchain-based-voting-system',
          updatedAt: new Date('2025-02-13T16:54:42.000Z'),
          description: null,
          content: null,
        };
      }),
    },
  },
 }));
 jest.mock('next/server', () => ({
  NextResponse: {
    json: jest.fn(),
  },
 }));
 describe('GET /api/fetchProject', () => {
  beforeAll(() => {
    process.env.GHOST_API_URL = 'http://localhost:2368';
    process.env.GHOST_API_KEY = 'some-key';
    global.fetch = mockFetch({
      posts: [
        {
          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 fetch a project by slug', async () => {
    const { GET } = await import('@/app/api/fetchProject/route');
    const mockRequest = {
      url: 'http://localhost/api/fetchProject?slug=blockchain-based-voting-system',
    } as unknown as NextRequest;
@@ -36,11 +37,11 @@ describe('GET /api/fetchProject', () => {
    expect(NextResponse.json).toHaveBeenCalledWith({
      posts: [
        {
-          id: '67aaffc3709c60000117d2d9',
+          id: '2',
          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',
+          updated_at: '2025-02-13T16:54:42.000Z',
        },
      ],
    });
--- a/app/tests/api/sitemap.test.tsx
+++ b/app/tests/api/sitemap.test.tsx
@@ -1,44 +1,80 @@
-import { GET } from '@/app/api/sitemap/route';
+jest.mock("next/server", () => {
-import { mockFetch } from '@/app/__tests__/__mocks__/mock-fetch';
+  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;
  };
-jest.mock('next/server', () => ({
+  return {
-  NextResponse: jest.fn().mockImplementation((body, init) => ({ body, init })),
+    NextResponse: mockNextResponse,
  };
 });
 jest.mock("@/lib/sitemap", () => ({
  getSitemapEntries: jest.fn(async () => [
    {
      url: "https://dki.one/en",
      lastModified: "2025-01-01T00:00:00.000Z",
    },
    {
      url: "https://dki.one/de",
      lastModified: "2025-01-01T00:00:00.000Z",
    },
    {
      url: "https://dki.one/en/projects/blockchain-based-voting-system",
      lastModified: "2025-02-13T16:54:42.000Z",
    },
    {
      url: "https://dki.one/de/projects/blockchain-based-voting-system",
      lastModified: "2025-02-13T16:54:42.000Z",
    },
  ]),
  generateSitemapXml: jest.fn(
    () =>
      '<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>https://dki.one/en</loc></url></urlset>',
  ),
 }));
-describe('GET /api/sitemap', () => {
+describe("GET /api/sitemap", () => {
  beforeAll(() => {
-    process.env.GHOST_API_URL = 'http://localhost:2368';
+    process.env.NEXT_PUBLIC_BASE_URL = "https://dki.one";
    process.env.GHOST_API_KEY = 'test-api-key';
    process.env.NEXT_PUBLIC_BASE_URL = 'https://dki.one';
    global.fetch = mockFetch({
      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 { GET } = await import("@/app/api/sitemap/route");
    const response = await GET();
-    expect(response.body).toContain('<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">');
+    // Get the body text from the NextResponse
-    expect(response.body).toContain('<loc>https://dki.one/</loc>');
+    const body = await response.text();
-    expect(response.body).toContain('<loc>https://dki.one/legal-notice</loc>');
+
-    expect(response.body).toContain('<loc>https://dki.one/privacy-policy</loc>');
+    expect(body).toContain(
-    expect(response.body).toContain('<loc>https://dki.one/projects/just-doing-some-testing</loc>');
+      '<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">',
-    expect(response.body).toContain('<loc>https://dki.one/projects/blockchain-based-voting-system</loc>');
+    );
    expect(body).toContain("<loc>https://dki.one/en</loc>");
    // Note: Headers are not available in test environment
  });
-});
+});
--- a/app/tests/components/Header.test.tsx
+++ b/app/tests/components/Header.test.tsx
@@ -21,7 +21,7 @@ describe('Header', () => {
  it('renders the mobile header', () => {
    render(<Header />);
    // Check for mobile menu button (hamburger icon)
-    const menuButton = screen.getByRole('button');
+    const menuButton = screen.getByLabelText('Open menu');
    expect(menuButton).toBeInTheDocument();
  });
 });
--- a/app/tests/components/Hero.test.tsx
+++ b/app/tests/components/Hero.test.tsx
@@ -6,7 +6,7 @@ describe('Hero', () => {
  it('renders the hero section', () => {
    render(<Hero />);
    expect(screen.getByText('Dennis Konkol')).toBeInTheDocument();
-    expect(screen.getByText('Student & Software Engineer based in Osnabrück, Germany')).toBeInTheDocument();
+    expect(screen.getByText(/Student and passionate/i)).toBeInTheDocument();
-    expect(screen.getByAltText('Dennis Konkol - Software Engineer')).toBeInTheDocument();
+    expect(screen.getByAltText('Dennis Konkol')).toBeInTheDocument();
  });
 });
--- a/app/tests/sitemap.xml/page.test.tsx
+++ b/app/tests/sitemap.xml/page.test.tsx
@@ -1,44 +1,41 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";
 import { GET } from '@/app/sitemap.xml/route';
 import { mockFetch } from '@/app/__tests__/__mocks__/mock-fetch-sitemap';
-jest.mock('next/server', () => ({
+jest.mock("next/server", () => ({
-  NextResponse: jest.fn().mockImplementation((body, init) => ({ body, init })),
+  NextResponse: jest.fn().mockImplementation((body: unknown, init?: ResponseInit) => {
    const response = {
      body,
      init,
    };
    return response;
  }),
 }));
-describe('Sitemap Component', () => {
+jest.mock("@/lib/sitemap", () => ({
  getSitemapEntries: jest.fn(async () => [
    {
      url: "https://dki.one/en",
      lastModified: "2025-01-01T00:00:00.000Z",
    },
  ]),
  generateSitemapXml: jest.fn(
    () =>
      '<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>https://dki.one/en</loc></url></urlset>',
  ),
 }));
 describe("Sitemap Component", () => {
  beforeAll(() => {
-    process.env.NEXT_PUBLIC_BASE_URL = 'https://dki.one';
+    process.env.NEXT_PUBLIC_BASE_URL = "https://dki.one";
    global.fetch = mockFetch(`
      <urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
        <url>
          <loc>https://dki.one/</loc>	
        </url>
        <url>
          <loc>https://dki.one/legal-notice</loc>
        </url>
        <url>
          <loc>https://dki.one/privacy-policy</loc>
        </url>
        <url>
          <loc>https://dki.one/projects/just-doing-some-testing</loc>
        </url>
        <url>
          <loc>https://dki.one/projects/blockchain-based-voting-system</loc>
        </url>
      </urlset>
    `);
  });
-  it('should render the sitemap XML', async () => {
+  it("should render the sitemap XML", async () => {
    const { GET } = await import("@/app/sitemap.xml/route");
    const response = await GET();
-    expect(response.body).toContain('<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">');
+    expect(response.body).toContain(
-    expect(response.body).toContain('<loc>https://dki.one/</loc>');
+      '<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">',
-    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/en</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
  });
-});
+});
--- a/app/_ui/ActivityFeedClient.tsx
+++ b/app/_ui/ActivityFeedClient.tsx
@@ -0,0 +1,31 @@
 "use client";
 import React, { useEffect, useState } from "react";
 type ActivityFeedComponent = React.ComponentType<Record<string, never>>;
 export default function ActivityFeedClient() {
  const [Comp, setComp] = useState<ActivityFeedComponent | null>(null);
  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const mod = await import("../components/ActivityFeed");
        const C = (mod as unknown as { default?: ActivityFeedComponent }).default;
        if (!cancelled && typeof C === "function") {
          setComp(() => C);
        }
      } catch {
        // ignore
      }
    })();
    return () => {
      cancelled = true;
    };
  }, []);
  if (!Comp) return null;
  return <Comp />;
 }
--- a/app/_ui/HomePage.tsx
+++ b/app/_ui/HomePage.tsx
@@ -0,0 +1,115 @@
 import Header from "../components/Header";
 import Hero from "../components/Hero";
 import About from "../components/About";
 import Projects from "../components/Projects";
 import Contact from "../components/Contact";
 import Footer from "../components/Footer";
 import Script from "next/script";
 import ActivityFeedClient from "./ActivityFeedClient";
 export default function HomePage() {
  return (
    <div className="min-h-screen">
      <Script
        id={"structured-data"}
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Person",
            name: "Dennis Konkol",
            url: "https://dk0.dev",
            jobTitle: "Software Engineer",
            address: {
              "@type": "PostalAddress",
              addressLocality: "Osnabrück",
              addressCountry: "Germany",
            },
            sameAs: [
              "https://github.com/Denshooter",
              "https://linkedin.com/in/dkonkol",
            ],
          }),
        }}
      />
      <ActivityFeedClient />
      <Header />
      {/* Spacer to prevent navbar overlap */}
      <div className="h-24 md:h-32" aria-hidden="true"></div>
      <main className="relative">
        <Hero />
        {/* Wavy Separator 1 - Hero to About */}
        <div className="relative h-24 overflow-hidden">
          <svg
            className="absolute inset-0 w-full h-full"
            viewBox="0 0 1440 120"
            preserveAspectRatio="none"
          >
            <path
              d="M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z"
              fill="url(#gradient1)"
            />
            <defs>
              <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stopColor="#BAE6FD" stopOpacity="0.4" />
                <stop offset="50%" stopColor="#DDD6FE" stopOpacity="0.4" />
                <stop offset="100%" stopColor="#FBCFE8" stopOpacity="0.4" />
              </linearGradient>
            </defs>
          </svg>
        </div>
        <About />
        {/* Wavy Separator 2 - About to Projects */}
        <div className="relative h-24 overflow-hidden">
          <svg
            className="absolute inset-0 w-full h-full"
            viewBox="0 0 1440 120"
            preserveAspectRatio="none"
          >
            <path
              d="M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z"
              fill="url(#gradient2)"
            />
            <defs>
              <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stopColor="#FED7AA" stopOpacity="0.4" />
                <stop offset="50%" stopColor="#FDE68A" stopOpacity="0.4" />
                <stop offset="100%" stopColor="#FCA5A5" stopOpacity="0.4" />
              </linearGradient>
            </defs>
          </svg>
        </div>
        <Projects />
        {/* Wavy Separator 3 - Projects to Contact */}
        <div className="relative h-24 overflow-hidden">
          <svg
            className="absolute inset-0 w-full h-full"
            viewBox="0 0 1440 120"
            preserveAspectRatio="none"
          >
            <path
              d="M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z"
              fill="url(#gradient3)"
            />
            <defs>
              <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stopColor="#99F6E4" stopOpacity="0.4" />
                <stop offset="50%" stopColor="#A7F3D0" stopOpacity="0.4" />
                <stop offset="100%" stopColor="#D9F99D" stopOpacity="0.4" />
              </linearGradient>
            </defs>
          </svg>
        </div>
        <Contact />
      </main>
      <Footer />
    </div>
  );
 }
--- a/app/_ui/ProjectDetailClient.tsx
+++ b/app/_ui/ProjectDetailClient.tsx
@@ -0,0 +1,238 @@
 "use client";
 import { motion } from "framer-motion";
 import { ExternalLink, Calendar, ArrowLeft, Github as GithubIcon, Share2 } from "lucide-react";
 import Link from "next/link";
 import { useEffect } from "react";
 import ReactMarkdown from "react-markdown";
 export type ProjectDetailData = {
  id: number;
  slug: string;
  title: string;
  description: string;
  content: string;
  tags: string[];
  featured: boolean;
  category: string;
  date: string;
  github?: string | null;
  live?: string | null;
  imageUrl?: string | null;
 };
 export default function ProjectDetailClient({
  project,
  locale,
 }: {
  project: ProjectDetailData;
  locale: string;
 }) {
  // Track page view (non-blocking)
  useEffect(() => {
    try {
      navigator.sendBeacon?.(
        "/api/analytics/track",
        new Blob(
          [
            JSON.stringify({
              type: "pageview",
              projectId: project.id.toString(),
              page: `/${locale}/projects/${project.slug}`,
            }),
          ],
          { type: "application/json" },
        ),
      );
    } catch {
      // ignore
    }
  }, [project.id, project.slug, locale]);
  return (
    <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: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="mb-8"
        >
          <Link
            href={`/${locale}/projects`}
            className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-900 transition-colors group"
          >
            <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
            <span className="font-medium">Back to Projects</span>
          </Link>
        </motion.div>
        {/* Header & Meta */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.1 }}
          className="mb-12"
        >
          <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 ? (
            // eslint-disable-next-line @next/next/no-img-element
            <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={{
                  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>
  );
 }
--- a/app/_ui/ProjectsPageClient.tsx
+++ b/app/_ui/ProjectsPageClient.tsx
@@ -0,0 +1,292 @@
 "use client";
 import { useEffect, useMemo, useState } from "react";
 import { motion } from "framer-motion";
 import { ExternalLink, Github, Calendar, ArrowLeft, Search } from "lucide-react";
 import Link from "next/link";
 export type ProjectListItem = {
  id: number;
  slug: string;
  title: string;
  description: string;
  content: string;
  tags: string[];
  featured: boolean;
  category: string;
  date: string;
  github?: string | null;
  live?: string | null;
  imageUrl?: string | null;
 };
 export default function ProjectsPageClient({
  projects,
  locale,
 }: {
  projects: ProjectListItem[];
  locale: string;
 }) {
  const [selectedCategory, setSelectedCategory] = useState("All");
  const [searchQuery, setSearchQuery] = useState("");
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);
  const categories = useMemo(() => {
    const unique = Array.from(new Set(projects.map((p) => p.category))).filter(Boolean);
    return ["All", ...unique];
  }, [projects]);
  const filteredProjects = useMemo(() => {
    let result = projects;
    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)),
      );
    }
    return result;
  }, [projects, selectedCategory, searchQuery]);
  if (!mounted) return null;
  return (
    <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 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="mb-12"
        >
          <Link
            href={`/${locale}`}
            className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-800 transition-colors mb-8 group"
          >
            <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-black font-sans mb-6 text-stone-900 tracking-tight">
            My Projects
          </h1>
          <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>
        {/* Filters & Search */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          className="mb-12 flex flex-col md:flex-row gap-6 justify-between items-start md:items-center"
        >
          {/* Categories */}
          <div className="flex flex-wrap gap-2">
            {categories.map((category) => (
              <button
                key={category}
                onClick={() => setSelectedCategory(category)}
                className={`px-5 py-2 rounded-full text-sm font-medium transition-all duration-200 border ${
                  selectedCategory === category
                    ? "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 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {filteredProjects.map((project, index) => (
            <motion.div
              key={project.id}
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
              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"
            >
              {/* Image / Fallback / Cover Area */}
              <div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
                {project.imageUrl ? (
                  <>
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <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>
                )}
                {/* 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-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>
                )}
                {/* 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 flex flex-col flex-1">
                {/* Stretched Link covering the whole card (including image area) */}
                <Link
                  href={`/${locale}/projects/${project.slug}`}
                  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>
                  <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-600 mb-6 leading-relaxed line-clamp-3 text-sm flex-1">{project.description}</p>
                <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>
                <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>
  );
 }
--- a/app/api/analytics/dashboard/route.ts
+++ b/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';
@@ -14,55 +14,122 @@ export async function GET(request: NextRequest) {
          status: 429, 
          headers: { 
            'Content-Type': 'application/json',
-            ...getRateLimitHeaders(ip, 5, 60000)
+            ...getRateLimitHeaders(ip, 20, 60000)
          } 
        }
      );
    }
-    // Check admin authentication - for admin dashboard requests, we trust the session
+    // Admin-only endpoint: require explicit admin header AND a valid signed session token
    // The middleware has already verified the admin session for /manage routes
    const isAdminRequest = request.headers.get('x-admin-request') === 'true';
-    if (!isAdminRequest) {
+    if (!isAdminRequest) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
-      const authError = requireSessionAuth(request);
+    const authError = requireSessionAuth(request);
-      if (authError) {
+    if (authError) return authError;
        return authError;
      }
    }
-    // Check cache first
+    // Check cache first (but allow bypass with cache-bust parameter)
-    const cachedStats = await analyticsCache.getOverallStats();
+    const url = new URL(request.url);
-    if (cachedStats) {
+    const bypassCache = url.searchParams.get('nocache') === 'true';
-      return NextResponse.json(cachedStats);
+    
    if (!bypassCache) {
      const cachedStats = await analyticsCache.getOverallStats();
      if (cachedStats) {
        return NextResponse.json(cachedStats);
      }
    }
    // Get analytics data
    const projectsResult = await projectService.getAllProjects();
    const projects = projectsResult.projects || projectsResult;
    const performanceStats = await projectService.getPerformanceStats();
-    
+
    const since = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
    // Use DB aggregation instead of loading every PageView row into memory
    const [totalViews, sessionsByIp, viewsByProjectRows] = await Promise.all([
      prisma.pageView.count({ where: { timestamp: { gte: since } } }),
      prisma.pageView.groupBy({
        by: ['ip'],
        where: {
          timestamp: { gte: since },
          ip: { not: null },
        },
        _count: { _all: true },
        _min: { timestamp: true },
        _max: { timestamp: true },
      }),
      prisma.pageView.groupBy({
        by: ['projectId'],
        where: {
          timestamp: { gte: since },
          projectId: { not: null },
        },
        _count: { _all: true },
      }),
    ]);
    const totalSessions = sessionsByIp.length;
    const bouncedSessions = sessionsByIp.filter(s => (s as unknown as { _count?: { _all?: number } })._count?._all === 1).length;
    const bounceRate = totalSessions > 0 ? Math.round((bouncedSessions / totalSessions) * 100) : 0;
    const sessionDurationsMs = sessionsByIp
      .map(s => {
        const count = (s as unknown as { _count?: { _all?: number } })._count?._all ?? 0;
        if (count < 2) return 0;
        const minTs = (s as unknown as { _min?: { timestamp?: Date | null } })._min?.timestamp;
        const maxTs = (s as unknown as { _max?: { timestamp?: Date | null } })._max?.timestamp;
        if (!minTs || !maxTs) return 0;
        return maxTs.getTime() - minTs.getTime();
      })
      .filter(ms => ms > 0);
    const avgSessionDuration = sessionDurationsMs.length > 0
      ? Math.round(sessionDurationsMs.reduce((a, b) => a + b, 0) / sessionDurationsMs.length / 1000)
      : 0;
    const totalUsers = totalSessions;
    const viewsByProject = viewsByProjectRows.reduce((acc, row) => {
      const projectId = row.projectId as number | null;
      if (projectId != null) {
        acc[projectId] = (row as unknown as { _count?: { _all?: number } })._count?._all ?? 0;
      }
      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),
+        totalViews, // Real views from PageView table
-        totalLikes: projects.reduce((sum, p) => sum + ((p.analytics as Record<string, unknown>)?.likes as number || 0), 0),
+        totalLikes: 0, // Not implemented - no like buttons
-        totalShares: projects.reduce((sum, p) => sum + ((p.analytics as Record<string, unknown>)?.shares as number || 0), 0),
+        totalShares: 0, // Not implemented - no share buttons
-        avgLighthouse: projects.length > 0 
+        avgLighthouse: (() => {
-          ? Math.round(projects.reduce((sum, p) => sum + ((p.performance as Record<string, unknown>)?.lighthouse as number || 0), 0) / projects.length)
+          // Only calculate if we have real performance data (not defaults)
-          : 0
+          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,
+        views: viewsByProject[project.id] || 0, // Only real views from PageView table
-        likes: (project.analytics as Record<string, unknown>)?.likes as number || 0,
+        likes: 0, // Not implemented
-        shares: (project.analytics as Record<string, unknown>)?.shares as number || 0,
+        shares: 0, // Not implemented
-        lighthouse: (project.performance as Record<string, unknown>)?.lighthouse as number || 0,
+        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 +138,25 @@ export async function GET(request: NextRequest) {
      categories: performanceStats.byCategory,
      difficulties: performanceStats.byDifficulty,
      performance: {
-        avgLighthouse: performanceStats.avgLighthouse,
+        avgLighthouse: (() => {
-        totalViews: performanceStats.totalViews,
+          const projectsWithPerf = projects.filter(p => {
-        totalLikes: performanceStats.totalLikes,
+            const perf = (p.performance as Record<string, unknown>) || {};
-        totalShares: performanceStats.totalShares
+            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, // Real total views
        totalLikes: 0,
        totalShares: 0
      },
      metrics: {
        bounceRate,
        avgSessionDuration,
        pagesPerSession: totalSessions > 0 ? (totalViews / totalSessions).toFixed(1) : '0',
        newUsers: totalUsers,
        totalUsers
      }
    };
--- a/app/api/analytics/performance/route.ts
+++ b/app/api/analytics/performance/route.ts
@@ -4,14 +4,11 @@ import { requireSessionAuth } from '@/lib/auth';
 export async function GET(request: NextRequest) {
  try {
-    // Check admin authentication - for admin dashboard requests, we trust the session
+    // Admin-only endpoint
    const isAdminRequest = request.headers.get('x-admin-request') === 'true';
-    if (!isAdminRequest) {
+    if (!isAdminRequest) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
-      const authError = requireSessionAuth(request);
+    const authError = requireSessionAuth(request);
-      if (authError) {
+    if (authError) return authError;
        return authError;
      }
    }
    // Get performance data from database
    const pageViews = await prisma.pageView.findMany({
@@ -24,8 +21,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 => {
--- a/app/api/analytics/reset/route.ts
+++ b/app/api/analytics/reset/route.ts
@@ -22,97 +22,23 @@ export async function POST(request: NextRequest) {
    // Check admin authentication
    const isAdminRequest = request.headers.get('x-admin-request') === 'true';
-    if (!isAdminRequest) {
+    if (!isAdminRequest) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
-      const authError = requireSessionAuth(request);
+    const authError = requireSessionAuth(request);
-      if (authError) {
+    if (authError) return authError;
        return authError;
      }
    }
    const { type } = await request.json();
    switch (type) {
      case 'analytics':
-        // Reset all project analytics
+        // Reset all project analytics (view counts in project.analytics JSON)
-        await prisma.project.updateMany({
+        const projects = await prisma.project.findMany();
-          data: {
+        for (const project of projects) {
-            analytics: {
+          const analytics = (project.analytics as Record<string, unknown>) || {};
-              views: 0,
+          await prisma.project.update({
-              likes: 0,
+            where: { id: project.id },
              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({
            data: {
              analytics: {
                ...analytics,
                views: 0,
                likes: 0,
                shares: 0,
@@ -140,11 +66,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 +111,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({}),
--- a/app/api/analytics/route.ts
+++ b/app/api/analytics/route.ts
@@ -1,21 +1,41 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
 export async function POST(request: NextRequest) {
  try {
    // Rate limiting for POST requests
    const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
    if (!checkRateLimit(ip, 30, 60000)) { // 30 requests per minute for analytics
      return new NextResponse(
        JSON.stringify({ error: 'Rate limit exceeded' }), 
        { 
          status: 429, 
          headers: { 
            'Content-Type': 'application/json',
            ...getRateLimitHeaders(ip, 30, 60000)
          } 
        }
      );
    }
    const body = await request.json();
    // Log performance metrics (you can extend this to store in database)
-    console.log('Performance Metric:', {
+    if (process.env.NODE_ENV === 'development') {
-      timestamp: new Date().toISOString(),
+      console.log('Performance Metric:', {
-      ...body,
+        timestamp: new Date().toISOString(),
-    });
+        ...body,
      });
    }
    // You could store this in a database or send to external service
    // For now, we'll just log it since Umami handles the main analytics
    return NextResponse.json({ success: true });
  } catch (error) {
-    console.error('Analytics API Error:', error);
+    if (process.env.NODE_ENV === 'development') {
      console.error('Analytics API Error:', error);
    }
    return NextResponse.json(
      { error: 'Failed to process analytics data' },
      { status: 500 }
--- a/app/api/analytics/track/route.ts
+++ b/app/api/analytics/track/route.ts
@@ -0,0 +1,187 @@
 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) {
      let projectIdNum: number | null = null;
      if (projectId != null) {
        const raw = projectId.toString();
        const parsed = parseInt(raw, 10);
        if (Number.isFinite(parsed)) {
          projectIdNum = parsed;
        } else {
          const bySlug = await prisma.project.findFirst({
            where: { slug: raw },
            select: { id: true },
          });
          projectIdNum = bySlug?.id ?? 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 },
                  { slug }
                ]
              }
            });
            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 }
    );
  }
 }
--- a/app/api/auth/login/route.ts
+++ b/app/api/auth/login/route.ts
@@ -37,7 +37,13 @@ export async function POST(request: NextRequest) {
    }
    // Get admin credentials from environment
-    const adminAuth = process.env.ADMIN_BASIC_AUTH || 'admin:default_password_change_me';
+    const adminAuth = process.env.ADMIN_BASIC_AUTH;
    if (!adminAuth || adminAuth.trim() === '' || adminAuth === 'admin:default_password_change_me') {
      return new NextResponse(
        JSON.stringify({ error: 'Admin auth is not configured' }),
        { status: 503, headers: { 'Content-Type': 'application/json' } }
      );
    }
    const [, expectedPassword] = adminAuth.split(':');
    // Secure password comparison using constant-time comparison
@@ -48,22 +54,14 @@ export async function POST(request: NextRequest) {
    // Use constant-time comparison to prevent timing attacks
    if (passwordBuffer.length === expectedBuffer.length && 
        crypto.timingSafeEqual(passwordBuffer, expectedBuffer)) {
-      // Generate cryptographically secure session token
+      const { createSessionToken } = await import('@/lib/auth');
-      const timestamp = Date.now();
+      const sessionToken = createSessionToken(request);
-      const randomBytes = crypto.randomBytes(32);
+      if (!sessionToken) {
-      const randomString = randomBytes.toString('hex');
+        return new NextResponse(
-
+          JSON.stringify({ error: 'Session secret not configured' }),
-      // Create session data
+          { status: 503, headers: { 'Content-Type': 'application/json' } }
-      const sessionData = {
+        );
-        timestamp,
+      }
        random: randomString,
        ip: ip,
        userAgent: request.headers.get('user-agent') || 'unknown'
      };
      // Encode session data (base64 is sufficient for this use case)
      const sessionJson = JSON.stringify(sessionData);
      const sessionToken = Buffer.from(sessionJson).toString('base64');
      return new NextResponse(
        JSON.stringify({
--- a/app/api/auth/validate/route.ts
+++ b/app/api/auth/validate/route.ts
@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { verifySessionToken } from '@/lib/auth';
 export async function POST(request: NextRequest) {
  try {
@@ -20,70 +21,26 @@ export async function POST(request: NextRequest) {
      );
    }
-    // Decode and validate session token
+    const valid = verifySessionToken(request, sessionToken);
-    try {
+    if (!valid) {
      const decodedJson = atob(sessionToken);
      const sessionData = JSON.parse(decodedJson);
      // Validate session data structure
      if (!sessionData.timestamp || !sessionData.random || !sessionData.ip || !sessionData.userAgent) {
        return new NextResponse(
          JSON.stringify({ valid: false, error: 'Invalid session token structure' }),
          { status: 401, headers: { 'Content-Type': 'application/json' } }
        );
      }
      // Check if session is still valid (2 hours)
      const sessionTime = sessionData.timestamp;
      const now = Date.now();
      const sessionDuration = 2 * 60 * 60 * 1000; // 2 hours
      if (now - sessionTime > sessionDuration) {
        return new NextResponse(
          JSON.stringify({ valid: false, error: 'Session expired' }),
          { status: 401, headers: { 'Content-Type': 'application/json' } }
        );
      }
      // Validate IP address (optional, but good security practice)
      const currentIp = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
      if (sessionData.ip !== currentIp) {
        // Log potential session hijacking attempt
        console.warn(`Session IP mismatch: expected ${sessionData.ip}, got ${currentIp}`);
        return new NextResponse(
          JSON.stringify({ valid: false, error: 'Session validation failed' }),
          { status: 401, headers: { 'Content-Type': 'application/json' } }
        );
      }
      // Validate User-Agent (optional)
      const currentUserAgent = request.headers.get('user-agent') || 'unknown';
      if (sessionData.userAgent !== currentUserAgent) {
        console.warn(`Session User-Agent mismatch`);
        return new NextResponse(
          JSON.stringify({ valid: false, error: 'Session validation failed' }),
          { status: 401, headers: { 'Content-Type': 'application/json' } }
        );
      }
      return new NextResponse(
-        JSON.stringify({ valid: true, message: 'Session valid' }),
+        JSON.stringify({ valid: false, error: 'Session expired or invalid' }),
        {
          status: 200,
          headers: {
            'Content-Type': 'application/json',
            'X-Content-Type-Options': 'nosniff',
            'X-Frame-Options': 'DENY',
            'X-XSS-Protection': '1; mode=block'
          }
        }
      );
    } catch {
      return new NextResponse(
        JSON.stringify({ valid: false, error: 'Invalid session token format' }),
        { status: 401, headers: { 'Content-Type': 'application/json' } }
      );
    }
    return new NextResponse(
      JSON.stringify({ valid: true, message: 'Session valid' }),
      {
        status: 200,
        headers: {
          'Content-Type': 'application/json',
          'X-Content-Type-Options': 'nosniff',
          'X-Frame-Options': 'DENY',
          'X-XSS-Protection': '1; mode=block'
        }
      }
    );
  } catch {
    return new NextResponse(
      JSON.stringify({ valid: false, error: 'Internal server error' }),
--- a/app/api/contacts/[id]/route.tsx
+++ b/app/api/contacts/[id]/route.tsx
@@ -1,13 +1,33 @@
 import { type NextRequest, NextResponse } from "next/server";
-import { PrismaClient } from '@prisma/client';
+import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
-
+import { checkRateLimit, getRateLimitHeaders, requireSessionAuth } from '@/lib/auth';
-const prisma = new PrismaClient();
+import { prisma } from "@/lib/prisma";
 export async function PUT(
    request: NextRequest,
    { params }: { params: Promise<{ id: string }> }
 ) {
    try {
        // Rate limiting for PUT requests
        const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
        if (!checkRateLimit(ip, 5, 60000)) { // 5 requests per minute
            return new NextResponse(
                JSON.stringify({ error: 'Rate limit exceeded' }), 
                { 
                    status: 429, 
                    headers: { 
                        'Content-Type': 'application/json',
                        ...getRateLimitHeaders(ip, 5, 60000)
                    } 
                }
            );
        }
        const isAdminRequest = request.headers.get('x-admin-request') === 'true';
        if (!isAdminRequest) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
        const authError = requireSessionAuth(request);
        if (authError) return authError;
        const resolvedParams = await params;
        const id = parseInt(resolvedParams.id);
        const body = await request.json();
@@ -35,7 +55,20 @@ export async function PUT(
        });
    } catch (error) {
-        console.error('Error updating contact:', error);
+        // Handle missing database table gracefully
        if (error instanceof PrismaClientKnownRequestError && error.code === 'P2021') {
            if (process.env.NODE_ENV === 'development') {
                console.warn('Contact table does not exist.');
            }
            return NextResponse.json(
                { error: 'Database table not found. Please run migrations.' },
                { status: 503 }
            );
        }
        if (process.env.NODE_ENV === 'development') {
            console.error('Error updating contact:', error);
        }
        return NextResponse.json(
            { error: 'Failed to update contact' },
            { status: 500 }
@@ -48,6 +81,26 @@ export async function DELETE(
    { params }: { params: Promise<{ id: string }> }
 ) {
    try {
        // Rate limiting for DELETE requests
        const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
        if (!checkRateLimit(ip, 3, 60000)) { // 3 requests per minute for DELETE (more restrictive)
            return new NextResponse(
                JSON.stringify({ error: 'Rate limit exceeded' }), 
                { 
                    status: 429, 
                    headers: { 
                        'Content-Type': 'application/json',
                        ...getRateLimitHeaders(ip, 3, 60000)
                    } 
                }
            );
        }
        const isAdminRequest = request.headers.get('x-admin-request') === 'true';
        if (!isAdminRequest) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
        const authError = requireSessionAuth(request);
        if (authError) return authError;
        const resolvedParams = await params;
        const id = parseInt(resolvedParams.id);
@@ -67,7 +120,20 @@ export async function DELETE(
        });
    } catch (error) {
-        console.error('Error deleting contact:', error);
+        // Handle missing database table gracefully
        if (error instanceof PrismaClientKnownRequestError && error.code === 'P2021') {
            if (process.env.NODE_ENV === 'development') {
                console.warn('Contact table does not exist.');
            }
            return NextResponse.json(
                { error: 'Database table not found. Please run migrations.' },
                { status: 503 }
            );
        }
        if (process.env.NODE_ENV === 'development') {
            console.error('Error deleting contact:', error);
        }
        return NextResponse.json(
            { error: 'Failed to delete contact' },
            { status: 500 }
--- a/app/api/contacts/route.tsx
+++ b/app/api/contacts/route.tsx
@@ -1,10 +1,15 @@
 import { type NextRequest, NextResponse } from "next/server";
-import { PrismaClient } from '@prisma/client';
+import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
-
+import { checkRateLimit, getRateLimitHeaders, requireSessionAuth } from '@/lib/auth';
-const prisma = new PrismaClient();
+import { prisma } from '@/lib/prisma';
 export async function GET(request: NextRequest) {
    try {
        const isAdminRequest = request.headers.get('x-admin-request') === 'true';
        if (!isAdminRequest) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
        const authError = requireSessionAuth(request);
        if (authError) return authError;
        const { searchParams } = new URL(request.url);
        const filter = searchParams.get('filter') || 'all';
        const limit = parseInt(searchParams.get('limit') || '50');
@@ -40,7 +45,21 @@ export async function GET(request: NextRequest) {
        });
    } catch (error) {
-        console.error('Error fetching contacts:', error);
+        // Handle missing database table gracefully
        if (error instanceof PrismaClientKnownRequestError && error.code === 'P2021') {
            if (process.env.NODE_ENV === 'development') {
                console.warn('Contact table does not exist. Returning empty result.');
            }
            return NextResponse.json({
                contacts: [],
                total: 0,
                hasMore: false
            });
        }
        if (process.env.NODE_ENV === 'development') {
            console.error('Error fetching contacts:', error);
        }
        return NextResponse.json(
            { error: 'Failed to fetch contacts' },
            { status: 500 }
@@ -50,6 +69,21 @@ export async function GET(request: NextRequest) {
 export async function POST(request: NextRequest) {
    try {
        // Rate limiting for POST requests
        const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
        if (!checkRateLimit(ip, 5, 60000)) { // 5 requests per minute
            return new NextResponse(
                JSON.stringify({ error: 'Rate limit exceeded' }), 
                { 
                    status: 429, 
                    headers: { 
                        'Content-Type': 'application/json',
                        ...getRateLimitHeaders(ip, 5, 60000)
                    } 
                }
            );
        }
        const body = await request.json();
        const { name, email, subject, message } = body;
@@ -86,7 +120,20 @@ export async function POST(request: NextRequest) {
        }, { status: 201 });
    } catch (error) {
-        console.error('Error creating contact:', error);
+        // Handle missing database table gracefully
        if (error instanceof PrismaClientKnownRequestError && error.code === 'P2021') {
            if (process.env.NODE_ENV === 'development') {
                console.warn('Contact table does not exist.');
            }
            return NextResponse.json(
                { error: 'Database table not found. Please run migrations.' },
                { status: 503 }
            );
        }
        if (process.env.NODE_ENV === 'development') {
            console.error('Error creating contact:', error);
        }
        return NextResponse.json(
            { error: 'Failed to create contact' },
            { status: 500 }
--- a/app/api/content/page/route.ts
+++ b/app/api/content/page/route.ts
@@ -0,0 +1,25 @@
 import { NextRequest, NextResponse } from "next/server";
 import { getContentByKey } from "@/lib/content";
 export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const key = searchParams.get("key");
  const locale = searchParams.get("locale") || "en";
  if (!key) {
    return NextResponse.json({ error: "key is required" }, { status: 400 });
  }
  try {
    const translation = await getContentByKey({ key, locale });
    if (!translation) return NextResponse.json({ content: null });
    return NextResponse.json({ content: translation });
  } catch (error) {
    // If DB isn't migrated/available, fail soft so the UI can fall back to next-intl strings.
    if (process.env.NODE_ENV === "development") {
      console.warn("Content API failed; returning null content:", error);
    }
    return NextResponse.json({ content: null });
  }
 }
--- a/app/api/content/pages/route.ts
+++ b/app/api/content/pages/route.ts
@@ -0,0 +1,55 @@
 import { NextRequest, NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
 import { requireSessionAuth } from "@/lib/auth";
 import { upsertContentByKey } from "@/lib/content";
 export async function GET(request: NextRequest) {
  const isAdminRequest = request.headers.get("x-admin-request") === "true";
  if (!isAdminRequest) return NextResponse.json({ error: "Admin access required" }, { status: 403 });
  const authError = requireSessionAuth(request);
  if (authError) return authError;
  const pages = await prisma.contentPage.findMany({
    orderBy: { key: "asc" },
    include: {
      translations: {
        select: { locale: true, updatedAt: true, title: true, slug: true },
      },
    },
  });
  return NextResponse.json({ pages });
 }
 export async function POST(request: NextRequest) {
  const isAdminRequest = request.headers.get("x-admin-request") === "true";
  if (!isAdminRequest) return NextResponse.json({ error: "Admin access required" }, { status: 403 });
  const authError = requireSessionAuth(request);
  if (authError) return authError;
  const body = await request.json();
  const { key, locale, title, slug, content, metaDescription, keywords } = body as Record<string, unknown>;
  if (!key || typeof key !== "string") {
    return NextResponse.json({ error: "key is required" }, { status: 400 });
  }
  if (!locale || typeof locale !== "string") {
    return NextResponse.json({ error: "locale is required" }, { status: 400 });
  }
  if (!content || typeof content !== "object") {
    return NextResponse.json({ error: "content (JSON) is required" }, { status: 400 });
  }
  const saved = await upsertContentByKey({
    key,
    locale,
    title: typeof title === "string" ? title : null,
    slug: typeof slug === "string" ? slug : null,
    content,
    metaDescription: typeof metaDescription === "string" ? metaDescription : null,
    keywords: typeof keywords === "string" ? keywords : null,
  });
  return NextResponse.json({ saved });
 }
--- a/app/api/email/respond/route.tsx
+++ b/app/api/email/respond/route.tsx
@@ -2,436 +2,248 @@ import { type NextRequest, NextResponse } from "next/server";
 import nodemailer from "nodemailer";
 import SMTPTransport from "nodemailer/lib/smtp-transport";
 import Mail from "nodemailer/lib/mailer";
 import { checkRateLimit, getRateLimitHeaders, getClientIp, requireSessionAuth } from "@/lib/auth";
 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, "&amp;")
        .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();
 }
 // Email templates with beautiful designs
 const emailTemplates = {
    welcome: {
        subject: "Vielen Dank für deine Nachricht! 👋",
-        template: (name: string, originalMessage: string) => `
+        template: (name: string, originalMessage: string) => {
-            <!DOCTYPE html>
+            const safeName = escapeHtml(name);
-            <html lang="de">
+            const safeMsg = nl2br(escapeHtml(originalMessage));
-            <head>
+            return baseEmail({
-                <meta charset="UTF-8">
+                title: `Danke, ${safeName}!`,
-                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                subtitle: "Nachricht erhalten",
-                <title>Willkommen - Dennis Konkol</title>
+                bodyHtml: `
-            </head>
+<div style="font-size:15px;line-height:1.65;color:${BRAND.text};">
-            <body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
+  Hey ${safeName},<br><br>
-                <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
+  danke für deine Nachricht — ich habe sie erhalten und melde mich so schnell wie möglich bei dir zurück.
-                    
+</div>
-                    <!-- Header -->
+
-                    <div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 40px 30px; text-align: center;">
+<div style="margin-top:18px;background:${BRAND.bg};border:1px solid ${BRAND.border};border-radius:16px;overflow:hidden;">
-                        <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
+  <div style="padding:14px 16px;background:${BRAND.sand};border-bottom:1px solid ${BRAND.border};">
-                            👋 Hallo ${name}!
+    <div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">Deine Nachricht</div>
-                        </h1>
+  </div>
-                        <p style="color: #d1fae5; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
+  <div style="padding:16px;line-height:1.65;color:${BRAND.text};font-size:14px;border-left:4px solid ${BRAND.mint};">
-                            Vielen Dank für deine Nachricht
+    ${safeMsg}
-                        </p>
+  </div>
-                    </div>
+</div>
-                    
+
-                    <!-- Content -->
+<div style="margin-top:20px;text-align:center;">
-                    <div style="padding: 40px 30px;">
+  <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
-                        <!-- Welcome Message -->
+  </a>
-                        <div style="background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #bbf7d0;">
+</div>
-                            <div style="text-align: center; margin-bottom: 20px;">
+                `.trim(),
-                                <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>
        `
    },
    project: {
        subject: "Projekt-Anfrage erhalten! 🚀",
-        template: (name: string, originalMessage: string) => `
+        template: (name: string, originalMessage: string) => {
-            <!DOCTYPE html>
+            const safeName = escapeHtml(name);
-            <html lang="de">
+            const safeMsg = nl2br(escapeHtml(originalMessage));
-            <head>
+            return baseEmail({
-                <meta charset="UTF-8">
+                title: `Projekt-Anfrage: danke, ${safeName}!`,
-                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                subtitle: "Ich melde mich zeitnah",
-                <title>Projekt-Anfrage - Dennis Konkol</title>
+                bodyHtml: `
-            </head>
+<div style="font-size:15px;line-height:1.65;color:${BRAND.text};">
-            <body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
+  Hey ${safeName},<br><br>
-                <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
+  mega — danke für die Projekt-Anfrage. Ich schaue mir deine Nachricht an und komme mit Rückfragen/Ideen auf dich zu.
-                    
+</div>
-                    <!-- Header -->
+
-                    <div style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); padding: 40px 30px; text-align: center;">
+<div style="margin-top:18px;background:${BRAND.bg};border:1px solid ${BRAND.border};border-radius:16px;overflow:hidden;">
-                        <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
+  <div style="padding:14px 16px;background:${BRAND.sand};border-bottom:1px solid ${BRAND.border};">
-                            🚀 Projekt-Anfrage erhalten!
+    <div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">Deine Projekt-Nachricht</div>
-                        </h1>
+  </div>
-                        <p style="color: #e9d5ff; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
+  <div style="padding:16px;line-height:1.65;color:${BRAND.text};font-size:14px;border-left:4px solid ${BRAND.mint};">
-                            Hallo ${name}, lass uns etwas Großartiges schaffen!
+    ${safeMsg}
-                        </p>
+  </div>
-                    </div>
+</div>
-                    
+
-                    <!-- Content -->
+<div style="margin-top:20px;text-align:center;">
-                    <div style="padding: 40px 30px;">
+  <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
-                        <!-- Project Message -->
+  </a>
-                        <div style="background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #e9d5ff;">
+</div>
-                            <div style="text-align: center; margin-bottom: 20px;">
+                `.trim(),
-                                <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>
        `
    },
    quick: {
        subject: "Danke für deine Nachricht! ⚡",
-        template: (name: string, originalMessage: string) => `
+        template: (name: string, originalMessage: string) => {
-            <!DOCTYPE html>
+            const safeName = escapeHtml(name);
-            <html lang="de">
+            const safeMsg = nl2br(escapeHtml(originalMessage));
-            <head>
+            return baseEmail({
-                <meta charset="UTF-8">
+                title: `Danke, ${safeName}!`,
-                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                subtitle: "Kurze Bestätigung",
-                <title>Quick Response - Dennis Konkol</title>
+                bodyHtml: `
-            </head>
+<div style="font-size:15px;line-height:1.65;color:${BRAND.text};">
-            <body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
+  Hey ${safeName},<br><br>
-                <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
+  kurze Bestätigung: deine Nachricht ist angekommen. Ich melde mich bald zurück.
-                    
+</div>
-                    <!-- Header -->
+
-                    <div style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); padding: 40px 30px; text-align: center;">
+<div style="margin-top:18px;background:${BRAND.bg};border:1px solid ${BRAND.border};border-radius:16px;overflow:hidden;">
-                        <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
+  <div style="padding:14px 16px;background:${BRAND.sand};border-bottom:1px solid ${BRAND.border};">
-                            ⚡ Schnelle Antwort!
+    <div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">Deine Nachricht</div>
-                        </h1>
+  </div>
-                        <p style="color: #fef3c7; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
+  <div style="padding:16px;line-height:1.65;color:${BRAND.text};font-size:14px;border-left:4px solid ${BRAND.mint};">
-                            Hallo ${name}, danke für deine Nachricht!
+    ${safeMsg}
-                        </p>
+  </div>
-                    </div>
+</div>
-                    
+                `.trim(),
-                    <!-- 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>
        `
    },
    reply: {
        subject: "Antwort auf deine Nachricht 📧",
-        template: (name: string, originalMessage: string) => `
+        template: (name: string, originalMessage: string, responseMessage: string) => {
-            <!DOCTYPE html>
+            const safeName = escapeHtml(name);
-            <html lang="de">
+            const safeOriginal = nl2br(escapeHtml(originalMessage));
-            <head>
+            const safeResponse = nl2br(escapeHtml(responseMessage));
-                <meta charset="UTF-8">
+            return baseEmail({
-                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                title: `Antwort für ${safeName}`,
-                <title>Antwort - Dennis Konkol</title>
+                subtitle: "Neue Nachricht",
-            </head>
+                bodyHtml: `
-            <body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
+<div style="font-size:15px;line-height:1.65;color:${BRAND.text};">
-                <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
+  Hey ${safeName},<br><br>
-                    
+  hier ist meine Antwort:
-                    <!-- Header -->
+</div>
-                    <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;">
+<div style="margin-top:14px;background:${BRAND.bg};border:1px solid ${BRAND.border};border-radius:16px;overflow:hidden;">
-                            📧 Hallo ${name}!
+  <div style="padding:14px 16px;background:${BRAND.sand};border-bottom:1px solid ${BRAND.border};">
-                        </h1>
+    <div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">Antwort</div>
-                        <p style="color: #dbeafe; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
+  </div>
-                            Hier ist meine Antwort auf deine Nachricht
+  <div style="padding:16px;line-height:1.65;color:${BRAND.text};font-size:14px;border-left:4px solid ${BRAND.mint};">
-                        </p>
+    ${safeResponse}
-                    </div>
+  </div>
-                    
+</div>
-                    <!-- Content -->
+
-                    <div style="padding: 40px 30px;">
+<div style="margin-top:16px;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};">
-                        <!-- Reply Message -->
+    <div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">Deine ursprüngliche Nachricht</div>
-                        <div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #93c5fd;">
+  </div>
-                            <div style="text-align: center; margin-bottom: 20px;">
+  <div style="padding:16px;line-height:1.65;color:${BRAND.text};font-size:14px;border-left:4px solid ${BRAND.border};">
-                                <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;">
+    ${safeOriginal}
-                                    <span style="color: #ffffff; font-size: 24px;">💬</span>
+  </div>
-                                </div>
+</div>
-                                <h2 style="color: #1e40af; margin: 0; font-size: 22px; font-weight: 600;">Meine Antwort</h2>
+                `.trim(),
-                            </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>
        `
    }
 };
 export async function POST(request: NextRequest) {
    try {
        const isAdminRequest = request.headers.get("x-admin-request") === "true";
        if (!isAdminRequest) return NextResponse.json({ error: "Admin access required" }, { status: 403 });
        const authError = requireSessionAuth(request);
        if (authError) return authError;
        const ip = getClientIp(request);
        if (!checkRateLimit(ip, 10, 60000)) {
            return NextResponse.json(
                { error: "Rate limit exceeded" },
                { status: 429, headers: { ...getRateLimitHeaders(ip, 10, 60000) } },
            );
        }
        const body = (await request.json()) as {
            to: string;
            name: string;
            template: 'welcome' | 'project' | 'quick' | 'reply';
            originalMessage: string;
            response?: string;
        };
-        const { to, name, template, originalMessage } = body;
+        const { to, name, template, originalMessage, response } = body;
        console.log('📧 Email response request:', { to, name, template, messageLength: originalMessage.length });
        // Validate input
        if (!to || !name || !template || !originalMessage) {
            console.error('❌ Validation failed: Missing required fields');
            return NextResponse.json(
                { error: "Alle Felder sind erforderlich" },
                { status: 400 },
            );
        }
        if (template === "reply" && (!response || !response.trim())) {
            return NextResponse.json({ error: "Antworttext ist erforderlich" }, { status: 400 });
        }
        // Validate email format
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -445,7 +257,6 @@ export async function POST(request: NextRequest) {
        // Check if template exists
        if (!emailTemplates[template]) {
            console.error('❌ Validation failed: Invalid template');
            return NextResponse.json(
                { error: "Ungültiges Template" },
                { status: 400 },
@@ -487,9 +298,7 @@ export async function POST(request: NextRequest) {
        // Verify transport configuration
        try {
            await transport.verify();
-            console.log('✅ SMTP connection verified successfully');
+        } catch (_verifyError) {
        } catch (verifyError) {
            console.error('❌ SMTP verification failed:', verifyError);
            return NextResponse.json(
                { error: "E-Mail-Server-Verbindung fehlgeschlagen" },
                { status: 500 },
@@ -497,19 +306,27 @@ export async function POST(request: NextRequest) {
        }
        const selectedTemplate = emailTemplates[template];
        let html: string;
        if (template === "reply") {
            html = emailTemplates.reply.template(name, originalMessage, response || "");
        } else {
            // Narrow the template type so TS knows this is not the 3-arg reply template
            const nonReplyTemplate = template as Exclude<typeof template, "reply">;
            html = emailTemplates[nonReplyTemplate].template(name, originalMessage);
        }
        const mailOptions: Mail.Options = {
            from: `"Dennis Konkol" <${user}>`,
            to: to,
            replyTo: "contact@dk0.dev",
            subject: selectedTemplate.subject,
-            html: selectedTemplate.template(name, originalMessage),
+            html,
            text: `
 Hallo ${name}!
 Vielen Dank für deine Nachricht:
 ${originalMessage}
-Ich werde mich so schnell wie möglich bei dir melden.
+${template === "reply" ? `\nAntwort:\n${response || ""}\n` : "\nIch werde mich so schnell wie möglich bei dir melden.\n"}
 Beste Grüße,
 Dennis Konkol
@@ -519,23 +336,18 @@ contact@dk0.dev
            `,
        };
        console.log('📤 Sending templated email...');
        const sendMailPromise = () =>
            new Promise<string>((resolve, reject) => {
                transport.sendMail(mailOptions, function (err, info) {
                    if (!err) {
                        console.log('✅ Templated email sent successfully:', info.response);
                        resolve(info.response);
                    } else {
                        console.error("❌ Error sending templated email:", err);
                        reject(err.message);
                    }
                });
            });
        const result = await sendMailPromise();
        console.log('🎉 Templated email process completed successfully');
        return NextResponse.json({ 
            message: "Template-E-Mail erfolgreich gesendet",
@@ -544,7 +356,6 @@ contact@dk0.dev
        });
    } catch (err) {
        console.error("❌ Unexpected error in templated email API:", err);
        return NextResponse.json({ 
            error: "Fehler beim Senden der Template-E-Mail",
            details: err instanceof Error ? err.message : 'Unbekannter Fehler'
--- a/app/api/email/route.tsx
+++ b/app/api/email/route.tsx
@@ -2,10 +2,8 @@ import { type NextRequest, NextResponse } from "next/server";
 import nodemailer from "nodemailer";
 import SMTPTransport from "nodemailer/lib/smtp-transport";
 import Mail from "nodemailer/lib/mailer";
 import { PrismaClient } from '@prisma/client';
 import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
-
+import { prisma } from "@/lib/prisma";
 const prisma = new PrismaClient();
 // Sanitize input to prevent XSS
 function sanitizeInput(input: string, maxLength: number = 10000): string {
@@ -15,10 +13,19 @@ function sanitizeInput(input: string, maxLength: number = 10000): string {
        .trim();
 }
 function escapeHtml(input: string): string {
    return input
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#39;");
 }
 export async function POST(request: NextRequest) {
    try {
-        // Rate limiting
+        // Rate limiting (defensive: headers may be undefined in tests)
-        const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
+        const ip = request.headers?.get?.('x-forwarded-for') ?? request.headers?.get?.('x-real-ip') ?? 'unknown';
        if (!checkRateLimit(ip, 5, 60000)) { // 5 emails per minute per IP
            return NextResponse.json(
                { error: 'Zu viele Anfragen. Bitte versuchen Sie es später erneut.' },
@@ -45,7 +52,7 @@ export async function POST(request: NextRequest) {
        const subject = sanitizeInput(body.subject || '', 200);
        const message = sanitizeInput(body.message || '', 5000);
-        console.log('📧 Email request received:', { email, name, subject, messageLength: message.length });
+        // Email request received
        // Validate input
        if (!email || !name || !subject || !message) {
@@ -86,12 +93,6 @@ export async function POST(request: NextRequest) {
        const user = process.env.MY_EMAIL ?? "";
        const pass = process.env.MY_PASSWORD ?? "";
        console.log('🔑 Environment check:', { 
            hasEmail: !!user, 
            hasPassword: !!pass,
            emailHost: user.split('@')[1] || 'unknown'
        });
        if (!user || !pass) {
            console.error("❌ Missing email/password environment variables");
            return NextResponse.json(
@@ -114,19 +115,15 @@ export async function POST(request: NextRequest) {
            connectionTimeout: 30000, // 30 seconds
            greetingTimeout: 30000,   // 30 seconds
            socketTimeout: 60000,     // 60 seconds
-            // Additional TLS options for better compatibility
+            // TLS hardening (allow insecure/self-signed only when explicitly enabled)
-            tls: {
+            tls:
-                rejectUnauthorized: false, // Allow self-signed certificates
+              process.env.SMTP_ALLOW_INSECURE_TLS === "true" ||
-                ciphers: 'SSLv3'
+              process.env.SMTP_ALLOW_SELF_SIGNED === "true"
-            }
+                ? { rejectUnauthorized: false }
                : { rejectUnauthorized: true, minVersion: "TLSv1.2" },
        };
-        console.log('🚀 Creating transport with options:', {
+        // Creating transport with configured options
            host: transportOptions.host,
            port: transportOptions.port,
            secure: transportOptions.secure,
            user: user.split('@')[0] + '@***' // Hide full email in logs
        });
        const transport = nodemailer.createTransport(transportOptions);
@@ -138,15 +135,17 @@ export async function POST(request: NextRequest) {
        while (verificationAttempts < maxVerificationAttempts && !verificationSuccess) {
            try {
                verificationAttempts++;
                console.log(`🔍 SMTP verification attempt ${verificationAttempts}/${maxVerificationAttempts}`);
                await transport.verify();
                console.log('✅ SMTP connection verified successfully');
                verificationSuccess = true;
            } catch (verifyError) {
-                console.error(`❌ SMTP verification attempt ${verificationAttempts} failed:`, verifyError);
+                if (process.env.NODE_ENV === 'development') {
                    console.error(`SMTP verification attempt ${verificationAttempts} failed:`, verifyError);
                }
                if (verificationAttempts >= maxVerificationAttempts) {
-                    console.error('❌ All SMTP verification attempts failed');
+                    if (process.env.NODE_ENV === 'development') {
                        console.error('All SMTP verification attempts failed');
                    }
                    return NextResponse.json(
                        { error: "E-Mail-Server-Verbindung fehlgeschlagen" },
                        { status: 500 },
@@ -158,6 +157,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
@@ -171,86 +186,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;">
+                <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: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
+                  <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);">
-                        <!-- Header -->
+                      <!-- Top bar -->
-                        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px 30px; text-align: center;">
+                      <div style="background:#292524;padding:22px 26px;">
-                            <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
+                        <div style="display:flex;align-items:center;justify-content:space-between;gap:16px;">
-                                📧 Neue Kontaktanfrage
+                          <div style="font-weight:700;font-size:16px;letter-spacing:-0.01em;color:#fdfcf8;">
-                            </h1>
+                            Dennis Konkol
-                            <p style="color: #e2e8f0; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
+                          </div>
-                                Von deinem Portfolio
+                          <div style="font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;font-weight:700;font-size:14px;color:#fdfcf8;">
-                            </p>
+                            dk<span style="color:#ef4444;">0</span>.dev
                          </div>
                        </div>
-                        
+                        <div style="margin-top:10px;">
-                        <!-- Content -->
+                          <div style="font-size:22px;font-weight:800;letter-spacing:-0.02em;color:#fdfcf8;">
-                        <div style="padding: 40px 30px;">
+                            Neue Kontaktanfrage
-                            
+                          </div>
-                            <!-- Contact Info Card -->
+                          <div style="margin-top:4px;font-size:13px;color:#d6d3d1;">
-                            <div style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #e2e8f0;">
+                            Eingegangen am ${sentAt}
-                                <div style="display: flex; align-items: center; margin-bottom: 20px;">
+                          </div>
                                    <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>
-                        
+                        <div style="height:3px;background:#a7f3d0;margin-top:18px;border-radius:999px;"></div>
-                        <!-- Footer -->
+                      </div>
-                        <div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e2e8f0;">
+
-                            <div style="margin-bottom: 15px;">
+                      <!-- Content -->
-                                <span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 1px;"></span>
+                      <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;">
+                            <div style="margin-top:6px;font-size:13px;color:#78716c;line-height:1.4;">
-                                Diese E-Mail wurde automatisch von deinem Portfolio generiert.<br>
+                              <span style="font-weight:700;color:#44403c;">E-Mail:</span> ${safeEmail}<br>
-                                <strong>Dennis Konkol Portfolio</strong> • <a href="https://dki.one" style="color: #667eea; text-decoration: none;">dki.one</a>
+                              <span style="font-weight:700;color:#44403c;">Betreff:</span> ${safeSubject}
-                            </p>
+                            </div>
-                            <p style="color: #94a3b8; margin: 10px 0 0 0; font-size: 12px;">
+                          </div>
                                ${new Date().toLocaleString('de-DE', { 
                                    year: 'numeric', 
                                    month: 'long', 
                                    day: 'numeric', 
                                    hour: '2-digit', 
                                    minute: '2-digit' 
                                })}
                            </p>
                        </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>
            `,
@@ -264,11 +273,11 @@ Nachricht:
 ${message}
 ---
-Diese E-Mail wurde automatisch von deinem Portfolio generiert.
+Diese E-Mail wurde automatisch von dk0.dev generiert.
            `,
        };
-        console.log('📤 Sending email...');
+        // Sending email
        // Email sending with retry logic
        let sendAttempts = 0;
@@ -279,16 +288,18 @@ Diese E-Mail wurde automatisch von deinem Portfolio generiert.
        while (sendAttempts < maxSendAttempts && !sendSuccess) {
            try {
                sendAttempts++;
-                console.log(`📤 Email send attempt ${sendAttempts}/${maxSendAttempts}`);
+                // Email send attempt
                const sendMailPromise = () =>
                    new Promise<string>((resolve, reject) => {
                        transport.sendMail(mailOptions, function (err, info) {
                            if (!err) {
-                                console.log('✅ Email sent successfully:', info.response);
+                                // Email sent successfully
                                resolve(info.response);
                            } else {
-                                console.error("❌ Error sending email:", err);
+                                if (process.env.NODE_ENV === 'development') {
                                    console.error("Error sending email:", err);
                                }
                                reject(err.message);
                            }
                        });
@@ -296,12 +307,16 @@ Diese E-Mail wurde automatisch von deinem Portfolio generiert.
                result = await sendMailPromise();
                sendSuccess = true;
-                console.log('🎉 Email process completed successfully');
+                // Email process completed successfully
            } catch (sendError) {
-                console.error(`❌ Email send attempt ${sendAttempts} failed:`, sendError);
+                if (process.env.NODE_ENV === 'development') {
                    console.error(`Email send attempt ${sendAttempts} failed:`, sendError);
                }
                if (sendAttempts >= maxSendAttempts) {
-                    console.error('❌ All email send attempts failed');
+                    if (process.env.NODE_ENV === 'development') {
                        console.error('All email send attempts failed');
                    }
                    throw new Error(`Failed to send email after ${maxSendAttempts} attempts: ${sendError}`);
                }
@@ -321,9 +336,11 @@ Diese E-Mail wurde automatisch von deinem Portfolio generiert.
                    responded: false
                }
            });
-            console.log('✅ Contact saved to database');
+            // Contact saved to database
        } catch (dbError) {
-            console.error('❌ Error saving contact to database:', dbError);
+            if (process.env.NODE_ENV === 'development') {
                console.error('Error saving contact to database:', dbError);
            }
            // Don't fail the email send if DB save fails
        }
--- a/app/api/fetchAllProjects/route.tsx
+++ b/app/api/fetchAllProjects/route.tsx
@@ -1,57 +1,58 @@
 import { NextResponse } from "next/server";
 import http from "http";
 import fetch from "node-fetch";
 import NodeCache from "node-cache";
 import { prisma } from "@/lib/prisma";
 export const runtime = "nodejs"; // Force Node runtime
 const GHOST_API_URL = process.env.GHOST_API_URL;
 const GHOST_API_KEY = process.env.GHOST_API_KEY;
 const cache = new NodeCache({ stdTTL: 300 }); // Cache für 5 Minuten
-type GhostPost = {
+type LegacyPost = {
  slug: string;
  id: string;
  title: string;
-  feature_image: string;
+  meta_description: string | null;
  visibility: string;
  published_at: string;
  updated_at: string;
  html: string;
  reading_time: number;
  meta_description: string;
 };
-type GhostPostsResponse = {
+type LegacyPostsResponse = {
-  posts: Array<GhostPost>;
+  posts: Array<LegacyPost>;
 };
 export async function GET() {
-  const cacheKey = "ghostPosts";
+  const cacheKey = "projects:legacyPosts";
-  const cachedPosts = cache.get<GhostPostsResponse>(cacheKey);
+  const cachedPosts = cache.get<LegacyPostsResponse>(cacheKey);
  if (cachedPosts) {
    return NextResponse.json(cachedPosts);
  }
  try {
-    const agent = new http.Agent({ keepAlive: true });
+    const projects = await prisma.project.findMany({
-    const response = await fetch(
+      where: { published: true },
-      `${GHOST_API_URL}/ghost/api/content/posts/?key=${GHOST_API_KEY}&limit=all`,
+      orderBy: { updatedAt: "desc" },
-      { agent: agent as unknown as undefined }
+      select: {
-    );
+        id: true,
-    const posts: GhostPostsResponse = await response.json() as GhostPostsResponse;
+        slug: true,
        title: true,
        updatedAt: true,
        metaDescription: true,
      },
    });
-    if (!posts || !posts.posts) {
+    const payload: LegacyPostsResponse = {
-      console.error("Invalid posts data");
+      posts: projects.map((p) => ({
-      return NextResponse.json([]);
+        id: String(p.id),
-    }
+        slug: p.slug,
        title: p.title,
        meta_description: p.metaDescription ?? null,
        updated_at: (p.updatedAt ?? new Date()).toISOString(),
      })),
    };
-    cache.set(cacheKey, posts); // Daten im Cache speichern
+    cache.set(cacheKey, payload);
-
+    return NextResponse.json(payload);
    return NextResponse.json(posts);
  } catch (error) {
-    console.error("Failed to fetch posts from Ghost:", error);
+    console.error("Failed to fetch projects:", error);
    return NextResponse.json(
      { error: "Failed to fetch projects" },
      { status: 500 },
--- a/app/api/fetchImage/route.tsx
+++ b/app/api/fetchImage/route.tsx
@@ -12,9 +12,40 @@ export async function GET(req: NextRequest) {
  }
  try {
-    const response = await fetch(url);
+    // Try global fetch first, fall back to node-fetch if necessary
-    if (!response.ok) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      throw new Error(`Failed to fetch image: ${response.statusText}`);
+    let response: any;
    try {
      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) {
      response = undefined;
    }
    if (!response || typeof response.ok === "undefined" || !response.ok) {
      try {
        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);
        return NextResponse.json(
          { error: "Failed to fetch image" },
          { status: 500 },
        );
      }
    }
    if (!response || !response.ok) {
      throw new Error(
        `Failed to fetch image: ${response?.statusText ?? "no response"}`,
      );
    }
    const contentType = response.headers.get("content-type");
--- a/app/api/fetchProject/route.tsx
+++ b/app/api/fetchProject/route.tsx
@@ -1,10 +1,8 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
 export const runtime = "nodejs"; // Force Node runtime
 const GHOST_API_URL = process.env.GHOST_API_URL;
 const GHOST_API_KEY = process.env.GHOST_API_KEY;
 export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const slug = searchParams.get("slug");
@@ -14,16 +12,37 @@ export async function GET(request: Request) {
  }
  try {
-    const response = await fetch(
+    const project = await prisma.project.findUnique({
-      `${GHOST_API_URL}/ghost/api/content/posts/slug/${slug}/?key=${GHOST_API_KEY}`,
+      where: { slug },
-    );
+      select: {
-    if (!response.ok) {
+        id: true,
-      throw new Error(`Failed to fetch post: ${response.statusText}`);
+        slug: true,
        title: true,
        updatedAt: true,
        metaDescription: true,
        description: true,
        content: true,
      },
    });
    if (!project) {
      return NextResponse.json({ posts: [] }, { status: 200 });
    }
-    const post = await response.json();
+
-    return NextResponse.json(post);
+    // Legacy shape (Ghost-like) for compatibility with older frontend/tests.
    return NextResponse.json({
      posts: [
        {
          id: String(project.id),
          title: project.title,
          meta_description: project.metaDescription ?? project.description ?? "",
          slug: project.slug,
          updated_at: (project.updatedAt ?? new Date()).toISOString(),
        },
      ],
    });
  } catch (error) {
-    console.error("Failed to fetch post from Ghost:", error);
+    console.error("Failed to fetch project:", error);
    return NextResponse.json(
      { error: "Failed to fetch project" },
      { status: 500 },
--- a/app/api/n8n/chat/route.ts
+++ b/app/api/n8n/chat/route.ts
@@ -0,0 +1,302 @@
 import { NextRequest, NextResponse } from "next/server";
 import { decodeHtmlEntitiesServer } from "@/lib/html-decode";
 export async function POST(request: NextRequest) {
  let userMessage = "";
  try {
    // 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: '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 || 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(userMessage),
      });
    }
    // 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,
    });
    // 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);
      }
    }
    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");
    }
      // 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") ||
    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") ||
    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") ||
    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") ||
    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") ||
    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("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") ||
    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 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!";
 }
--- a/app/api/n8n/generate-image/route.ts
+++ b/app/api/n8n/generate-image/route.ts
@@ -0,0 +1,271 @@
 import { NextRequest, NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
 /**
 * POST /api/n8n/generate-image
 *
 * Triggers AI image generation for a project via n8n workflow
 *
 * Body:
 * {
 *   projectId: number;
 *   regenerate?: boolean; // Force regenerate even if image exists
 * }
 */
 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;
    // Validate input
    if (!projectId) {
      return NextResponse.json(
        { error: "projectId is required" },
        { status: 400 },
      );
    }
    // Check environment variables
    const n8nWebhookUrl = process.env.N8N_WEBHOOK_URL;
    const n8nSecretToken = process.env.N8N_SECRET_TOKEN;
    if (!n8nWebhookUrl) {
      return NextResponse.json(
        {
          error: "N8N_WEBHOOK_URL not configured",
          message:
            "AI image generation is not set up. Please configure n8n webhooks.",
        },
        { status: 503 },
      );
    }
    const projectIdNum = typeof projectId === "string" ? parseInt(projectId, 10) : Number(projectId);
    if (!Number.isFinite(projectIdNum)) {
      return NextResponse.json({ error: "projectId must be a number" }, { status: 400 });
    }
    // Fetch project data directly (avoid HTTP self-calls)
    const project = await prisma.project.findUnique({ where: { id: projectIdNum } });
    if (!project) {
      return NextResponse.json({ error: "Project not found" }, { status: 404 });
    }
    // Optional: Check if project already has an image
    if (!regenerate) {
      if (project.imageUrl && project.imageUrl !== "") {
        return NextResponse.json(
          {
            success: true,
            message:
              "Project already has an image. Use regenerate=true to force regeneration.",
            projectId: projectIdNum,
            existingImageUrl: project.imageUrl,
            regenerated: false,
          },
          { status: 200 },
        );
      }
    }
    // Call n8n webhook to trigger AI image generation
    // 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: projectIdNum,
          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(),
        }),
      },
    );
    if (!n8nResponse.ok) {
      const errorText = await n8nResponse.text();
      console.error("n8n webhook error:", errorText);
      return NextResponse.json(
        {
          error: "Failed to trigger image generation",
          message: "n8n workflow failed to execute",
          details: errorText,
        },
        { status: 500 },
      );
    }
    // 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) {
      try {
        await prisma.project.update({
          where: { id: projectIdNum },
          data: { imageUrl, updatedAt: new Date() },
        });
      } catch {
        // Non-fatal: image URL can still be returned to caller
        console.warn("Failed to update project with image URL");
      }
    }
    return NextResponse.json(
      {
        success: true,
        message: "AI image generation completed successfully",
        projectId: projectIdNum,
        imageUrl: imageUrl,
        generatedAt: generatedAt,
        fileSize: fileSize,
        regenerated: regenerate,
      },
      { status: 200 },
    );
  } catch (error) {
    console.error("Error in generate-image API:", error);
    return NextResponse.json(
      {
        error: "Internal server error",
        message: error instanceof Error ? error.message : "Unknown error",
      },
      { status: 500 },
    );
  }
 }
 /**
 * GET /api/n8n/generate-image?projectId=123
 *
 * Check the status of image generation for a project
 */
 export async function GET(req: NextRequest) {
  try {
    const searchParams = req.nextUrl.searchParams;
    const projectId = searchParams.get("projectId");
    if (!projectId) {
      return NextResponse.json(
        { error: "projectId query parameter is required" },
        { status: 400 },
      );
    }
    const projectIdNum = parseInt(projectId, 10);
    if (!Number.isFinite(projectIdNum)) {
      return NextResponse.json({ error: "projectId must be a number" }, { status: 400 });
    }
    const project = await prisma.project.findUnique({ where: { id: projectIdNum } });
    if (!project) {
      return NextResponse.json({ error: "Project not found" }, { status: 404 });
    }
    return NextResponse.json({
      projectId: projectIdNum,
      title: project.title,
      hasImage: !!project.imageUrl,
      imageUrl: project.imageUrl || null,
      updatedAt: project.updatedAt,
    });
  } catch (error) {
    console.error("Error checking image status:", error);
    return NextResponse.json(
      {
        error: "Internal server error",
        message: error instanceof Error ? error.message : "Unknown error",
      },
      { status: 500 },
    );
  }
 }
--- a/app/api/n8n/hardcover/currently-reading/route.ts
+++ b/app/api/n8n/hardcover/currently-reading/route.ts
@@ -0,0 +1,131 @@
 // app/api/n8n/hardcover/currently-reading/route.ts
 import { NextRequest, NextResponse } from "next/server";
 // Cache für 5 Minuten, damit wir n8n nicht zuspammen
 // Hardcover-Daten ändern sich nicht so häufig
 export const revalidate = 300;
 export async function GET(request: NextRequest) {
  // Rate limiting for n8n hardcover endpoint
  const ip =
    request.headers.get("x-forwarded-for") ||
    request.headers.get("x-real-ip") ||
    "unknown";
  const ua = request.headers.get("user-agent") || "unknown";
  const { checkRateLimit } = await import('@/lib/auth');
  // In dev, many requests can share ip=unknown; use UA to avoid a shared bucket.
  const rateKey =
    process.env.NODE_ENV === "development" && ip === "unknown"
      ? `ua:${ua.slice(0, 120)}`
      : ip;
  const maxPerMinute = process.env.NODE_ENV === "development" ? 60 : 10;
  if (!checkRateLimit(rateKey, maxPerMinute, 60000)) { // requests per minute
    return NextResponse.json(
      { error: 'Rate limit exceeded. Please try again later.' },
      { status: 429 }
    );
  }
  try {
    // Check if n8n webhook URL is configured
    const n8nWebhookUrl = process.env.N8N_WEBHOOK_URL;
    if (!n8nWebhookUrl) {
      console.warn("N8N_WEBHOOK_URL not configured for hardcover endpoint");
      // Return fallback if n8n is not configured
      return NextResponse.json({
        currentlyReading: null,
      });
    }
    // Rufe den n8n Webhook auf
    // Add timestamp to query to bypass Cloudflare cache
    const webhookUrl = `${n8nWebhookUrl}/webhook/hardcover/currently-reading?t=${Date.now()}`;
    console.log(`Fetching currently reading from: ${webhookUrl}`);
    // Add timeout to prevent hanging requests
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
    try {
      const res = await fetch(webhookUrl, {
        method: "GET",
        headers: {
          Accept: "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,
          }),
        },
        next: { revalidate: 300 },
        signal: controller.signal,
      });
      clearTimeout(timeoutId);
      if (!res.ok) {
        const errorText = await res.text().catch(() => 'Unknown error');
        console.error(`n8n hardcover webhook failed: ${res.status}`, errorText);
        throw new Error(`n8n error: ${res.status} - ${errorText}`);
      }
      const raw = await res.text().catch(() => "");
      if (!raw || !raw.trim()) {
        throw new Error("Empty response body received from n8n");
      }
      let data: unknown;
      try {
        data = JSON.parse(raw);
      } catch (_parseError) {
        // Sometimes upstream sends HTML or a partial response; include a snippet for debugging.
        const snippet = raw.slice(0, 240);
        throw new Error(
          `Invalid JSON from n8n (${res.status}): ${snippet}${raw.length > 240 ? "…" : ""}`,
        );
      }
      // n8n gibt oft ein Array zurück: [{...}]. Wir wollen nur das Objekt.
      const readingData = Array.isArray(data) ? data[0] : data;
      // Safety check: if readingData is still undefined/null (e.g. empty array), use fallback
      if (!readingData) {
        throw new Error("Empty data received from n8n");
      }
      // Ensure currentlyReading has proper structure
      if (readingData.currentlyReading && typeof readingData.currentlyReading === "object") {
        // Already properly formatted from n8n
      } else if (readingData.currentlyReading === null || readingData.currentlyReading === undefined) {
        // No reading data - keep as null
        readingData.currentlyReading = null;
      }
      return NextResponse.json(readingData);
    } catch (fetchError: unknown) {
      clearTimeout(timeoutId);
      if (fetchError instanceof Error && fetchError.name === 'AbortError') {
        console.error("n8n hardcover webhook request timed out");
      } else {
        console.error("n8n hardcover webhook fetch error:", fetchError);
      }
      throw fetchError;
    }
  } catch (error: unknown) {
    console.error("Error fetching n8n hardcover data:", 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({
      currentlyReading: null,
    });
  }
 }
--- a/app/api/n8n/status/route.ts
+++ b/app/api/n8n/status/route.ts
@@ -1,19 +1,133 @@
-import { NextResponse } from 'next/server';
+// app/api/n8n/status/route.ts
 import { NextRequest, NextResponse } from "next/server";
-export async function GET() {
+// Cache für 30 Sekunden, damit wir n8n nicht zuspammen
-  // Mock data - in real integration this would fetch from n8n webhook or database
+export const revalidate = 30;
-  return NextResponse.json({
+
-    activity: {
+export async function GET(request: NextRequest) {
-      type: 'coding', // coding, listening, watching
+  // Rate limiting for n8n status endpoint
-      details: 'Portfolio Website',
+  const ip =
-      timestamp: new Date().toISOString(),
+    request.headers.get("x-forwarded-for") ||
-    },
+    request.headers.get("x-real-ip") ||
-    music: {
+    "unknown";
-      isPlaying: true,
+  const ua = request.headers.get("user-agent") || "unknown";
-      track: 'Midnight City',
+  const { checkRateLimit } = await import('@/lib/auth');
-      artist: 'M83',
+  
-      platform: 'spotify'
+  // In dev, many requests can share ip=unknown; use UA to avoid a shared bucket.
-    },
+  const rateKey =
-    watching: null
+    process.env.NODE_ENV === "development" && ip === "unknown"
-  });
+      ? `ua:${ua.slice(0, 120)}`
      : ip;
  const maxPerMinute = process.env.NODE_ENV === "development" ? 300 : 30;
  if (!checkRateLimit(rateKey, maxPerMinute, 60000)) { // requests per minute
    return NextResponse.json(
      { error: 'Rate limit exceeded. Please try again later.' },
      { status: 429 }
    );
  }
  try {
    // 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,
      });
    }
    // 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}`);
    // Add timeout to prevent hanging requests
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
    try {
      const res = await fetch(statusUrl, {
        method: "GET",
        headers: {
          // n8n sometimes responds with empty body; we'll parse defensively below.
          Accept: "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 raw = await res.text().catch(() => "");
      if (!raw || !raw.trim()) {
        throw new Error("Empty response body received from n8n");
      }
      let data: unknown;
      try {
        data = JSON.parse(raw);
      } catch (_parseError) {
        // Sometimes upstream sends HTML or a partial response; include a snippet for debugging.
        const snippet = raw.slice(0, 240);
        throw new Error(
          `Invalid JSON from n8n (${res.status}): ${snippet}${raw.length > 240 ? "…" : ""}`,
        );
      }
      // 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,
    });
  }
 }
--- a/app/api/projects/[id]/route.ts
+++ b/app/api/projects/[id]/route.ts
@@ -1,6 +1,9 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { prisma } from '@/lib/prisma';
 import { apiCache } from '@/lib/cache';
 import { checkRateLimit, getRateLimitHeaders, requireSessionAuth } from '@/lib/auth';
 import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
 import { generateUniqueSlug } from '@/lib/slug';
 export async function GET(
  request: NextRequest,
@@ -9,6 +12,9 @@ export async function GET(
  try {
    const { id: idParam } = await params;
    const id = parseInt(idParam);
    if (!Number.isFinite(id)) {
      return NextResponse.json({ error: 'Invalid project id' }, { status: 400 });
    }
    const project = await prisma.project.findUnique({
      where: { id }
@@ -23,7 +29,20 @@ export async function GET(
    return NextResponse.json(project);
  } catch (error) {
-    console.error('Error fetching project:', error);
+    // Handle missing database table gracefully
    if (error instanceof PrismaClientKnownRequestError && error.code === 'P2021') {
      if (process.env.NODE_ENV === 'development') {
        console.warn('Project table does not exist. Returning 404.');
      }
      return NextResponse.json(
        { error: 'Project not found' },
        { status: 404 }
      );
    }
    if (process.env.NODE_ENV === 'development') {
      console.error('Error fetching project:', error);
    }
    return NextResponse.json(
      { error: 'Failed to fetch project' },
      { status: 500 }
@@ -36,6 +55,21 @@ export async function PUT(
  { params }: { params: Promise<{ id: string }> }
 ) {
  try {
    // Rate limiting for PUT requests
    const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
    if (!checkRateLimit(ip, 5, 60000)) { // 5 requests per minute for PUT
      return new NextResponse(
        JSON.stringify({ error: 'Rate limit exceeded' }), 
        { 
          status: 429, 
          headers: { 
            'Content-Type': 'application/json',
            ...getRateLimitHeaders(ip, 5, 60000)
          } 
        }
      );
    }
    // Check if this is an admin request
    const isAdminRequest = request.headers.get('x-admin-request') === 'true';
    if (!isAdminRequest) {
@@ -44,18 +78,48 @@ export async function PUT(
        { status: 403 }
      );
    }
    const authError = requireSessionAuth(request);
    if (authError) return authError;
    const { id: idParam } = await params;
    const id = parseInt(idParam);
    if (!Number.isFinite(id)) {
      return NextResponse.json({ error: 'Invalid project id' }, { status: 400 });
    }
    const data = await request.json();
    // Remove difficulty field if it exists (since we're removing it)
-    const { difficulty, ...projectData } = data;
+    const { difficulty, slug, defaultLocale, ...projectData } = data;
    // Keep slug stable by default; only update if explicitly provided,
    // or if the project currently has no slug (e.g. after migration).
    const existing = await prisma.project.findUnique({
      where: { id },
      select: { slug: true, title: true },
    });
    const nextSlug =
      typeof slug === 'string' && slug.trim()
        ? slug.trim()
        : existing?.slug?.trim()
          ? existing.slug
          : await generateUniqueSlug({
              base: String(projectData.title || existing?.title || 'project'),
              isTaken: async (candidate) => {
                const found = await prisma.project.findUnique({
                  where: { slug: candidate },
                  select: { id: true },
                });
                return !!found && found.id !== id;
              },
            });
    const project = await prisma.project.update({
      where: { id },
      data: { 
        ...projectData, 
        slug: nextSlug,
        defaultLocale: typeof defaultLocale === 'string' && defaultLocale ? defaultLocale : undefined,
        updatedAt: new Date(),
        // Keep existing difficulty if not provided
        ...(difficulty ? { difficulty } : {})
@@ -68,7 +132,20 @@ export async function PUT(
    return NextResponse.json(project);
  } catch (error) {
-    console.error('Error updating project:', error);
+    // Handle missing database table gracefully
    if (error instanceof PrismaClientKnownRequestError && error.code === 'P2021') {
      if (process.env.NODE_ENV === 'development') {
        console.warn('Project table does not exist.');
      }
      return NextResponse.json(
        { error: 'Database table not found. Please run migrations.' },
        { status: 503 }
      );
    }
    if (process.env.NODE_ENV === 'development') {
      console.error('Error updating project:', error);
    }
    return NextResponse.json(
      { error: 'Failed to update project', details: error instanceof Error ? error.message : 'Unknown error' },
      { status: 500 }
@@ -81,8 +158,37 @@ export async function DELETE(
  { params }: { params: Promise<{ id: string }> }
 ) {
  try {
    // Rate limiting for DELETE requests
    const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
    if (!checkRateLimit(ip, 3, 60000)) { // 3 requests per minute for DELETE (more restrictive)
      return new NextResponse(
        JSON.stringify({ error: 'Rate limit exceeded' }), 
        { 
          status: 429, 
          headers: { 
            'Content-Type': 'application/json',
            ...getRateLimitHeaders(ip, 3, 60000)
          } 
        }
      );
    }
    // Check if this is an admin request
    const isAdminRequest = request.headers.get('x-admin-request') === 'true';
    if (!isAdminRequest) {
      return NextResponse.json(
        { error: 'Admin access required' },
        { status: 403 }
      );
    }
    const authError = requireSessionAuth(request);
    if (authError) return authError;
    const { id: idParam } = await params;
    const id = parseInt(idParam);
    if (!Number.isFinite(id)) {
      return NextResponse.json({ error: 'Invalid project id' }, { status: 400 });
    }
    await prisma.project.delete({
      where: { id }
@@ -94,7 +200,20 @@ export async function DELETE(
    return NextResponse.json({ success: true });
  } catch (error) {
-    console.error('Error deleting project:', error);
+    // Handle missing database table gracefully
    if (error instanceof PrismaClientKnownRequestError && error.code === 'P2021') {
      if (process.env.NODE_ENV === 'development') {
        console.warn('Project table does not exist.');
      }
      return NextResponse.json(
        { error: 'Database table not found. Please run migrations.' },
        { status: 503 }
      );
    }
    if (process.env.NODE_ENV === 'development') {
      console.error('Error deleting project:', error);
    }
    return NextResponse.json(
      { error: 'Failed to delete project' },
      { status: 500 }
--- a/app/api/projects/[id]/translation/route.ts
+++ b/app/api/projects/[id]/translation/route.ts
@@ -0,0 +1,71 @@
 import { NextRequest, NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
 import { requireSessionAuth } from "@/lib/auth";
 export async function GET(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> },
 ) {
  const isAdminRequest = request.headers.get("x-admin-request") === "true";
  if (!isAdminRequest) return NextResponse.json({ error: "Admin access required" }, { status: 403 });
  const authError = requireSessionAuth(request);
  if (authError) return authError;
  const { id: idParam } = await params;
  const id = parseInt(idParam, 10);
  if (!Number.isFinite(id)) return NextResponse.json({ error: "Invalid project id" }, { status: 400 });
  const { searchParams } = new URL(request.url);
  const locale = searchParams.get("locale") || "en";
  const translation = await prisma.projectTranslation.findFirst({
    where: { projectId: id, locale },
  });
  return NextResponse.json({ translation });
 }
 export async function PUT(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> },
 ) {
  const isAdminRequest = request.headers.get("x-admin-request") === "true";
  if (!isAdminRequest) return NextResponse.json({ error: "Admin access required" }, { status: 403 });
  const authError = requireSessionAuth(request);
  if (authError) return authError;
  const { id: idParam } = await params;
  const id = parseInt(idParam, 10);
  if (!Number.isFinite(id)) return NextResponse.json({ error: "Invalid project id" }, { status: 400 });
  const body = (await request.json()) as {
    locale?: string;
    title?: string;
    description?: string;
  };
  const locale = body.locale || "en";
  const title = body.title?.trim();
  const description = body.description?.trim();
  if (!title || !description) {
    return NextResponse.json({ error: "title and description are required" }, { status: 400 });
  }
  const saved = await prisma.projectTranslation.upsert({
    where: { projectId_locale: { projectId: id, locale } },
    create: {
      projectId: id,
      locale,
      title,
      description,
    },
    update: {
      title,
      description,
    },
  });
  return NextResponse.json({ translation: saved });
 }
--- a/app/api/projects/export/route.ts
+++ b/app/api/projects/export/route.ts
@@ -1,18 +1,47 @@
-import { NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from 'next/server';
-import { projectService } from '@/lib/prisma';
+import { prisma, projectService } from '@/lib/prisma';
 import { requireSessionAuth } from '@/lib/auth';
-export async function GET() {
+export async function GET(request: NextRequest) {
  try {
-    // Get all projects with full data
+    const isAdminRequest = request.headers.get('x-admin-request') === 'true';
-    const projectsResult = await projectService.getAllProjects();
+    if (!isAdminRequest) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
    const authError = requireSessionAuth(request);
    if (authError) return authError;
    // Projects (with translations)
    const projectsResult = await projectService.getAllProjects({ limit: 10000 });
    const projects = projectsResult.projects || projectsResult;
    const projectIds = projects.map((p: { id: number }) => p.id);
    const projectTranslations = await prisma.projectTranslation.findMany({
      where: { projectId: { in: projectIds } },
      orderBy: [{ projectId: 'asc' }, { locale: 'asc' }],
    });
    // CMS content pages (with translations)
    const contentPages = await prisma.contentPage.findMany({
      orderBy: { key: 'asc' },
      include: {
        translations: {
          orderBy: { locale: 'asc' },
        },
      },
    });
    const siteSettings = await prisma.siteSettings.findUnique({ where: { id: 1 } });
    // Format for export
    const exportData = {
-      version: '1.0',
+      version: '2.0',
      exportDate: new Date().toISOString(),
      siteSettings,
      contentPages,
      projectTranslations,
      projects: projects.map(project => ({
        id: project.id,
        slug: (project as unknown as { slug?: string }).slug,
        defaultLocale: (project as unknown as { defaultLocale?: string }).defaultLocale,
        title: project.title,
        description: project.description,
        content: project.content,
--- a/app/api/projects/import/route.ts
+++ b/app/api/projects/import/route.ts
@@ -1,76 +1,309 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from "next/server";
-import { projectService } from '@/lib/prisma';
+import { prisma, projectService } from "@/lib/prisma";
 import { requireSessionAuth } from "@/lib/auth";
 import type { Prisma } from "@prisma/client";
 type ImportSiteSettings = {
  defaultLocale?: unknown;
  locales?: unknown;
  theme?: unknown;
 };
 type ImportContentPageTranslation = {
  locale?: unknown;
  title?: unknown;
  slug?: unknown;
  content?: unknown;
  metaDescription?: unknown;
  keywords?: unknown;
 };
 type ImportContentPage = {
  key?: unknown;
  status?: unknown;
  translations?: unknown;
 };
 type ImportProject = {
  id?: unknown;
  slug?: unknown;
  defaultLocale?: unknown;
  title?: unknown;
  description?: unknown;
  content?: unknown;
  tags?: unknown;
  category?: unknown;
  featured?: unknown;
  github?: unknown;
  live?: unknown;
  published?: unknown;
  imageUrl?: unknown;
  difficulty?: unknown;
  timeToComplete?: unknown;
  technologies?: unknown;
  challenges?: unknown;
  lessonsLearned?: unknown;
  futureImprovements?: unknown;
  demoVideo?: unknown;
  screenshots?: unknown;
  colorScheme?: unknown;
  accessibility?: unknown;
  performance?: unknown;
  analytics?: unknown;
 };
 type ImportProjectTranslation = {
  projectId?: unknown;
  locale?: unknown;
  title?: unknown;
  description?: unknown;
  content?: unknown;
  metaDescription?: unknown;
  keywords?: unknown;
  ogImage?: unknown;
  schema?: unknown;
 };
 type ImportPayload = {
  projects?: unknown;
  siteSettings?: unknown;
  contentPages?: unknown;
  projectTranslations?: unknown;
 };
 function asString(v: unknown): string | null {
  return typeof v === "string" ? v : null;
 }
 function asStringArray(v: unknown): string[] | null {
  if (!Array.isArray(v)) return null;
  const allStrings = v.filter((x) => typeof x === "string") as string[];
  return allStrings.length === v.length ? allStrings : null;
 }
 export async function POST(request: NextRequest) {
  try {
-    const body = await request.json();
+    const isAdminRequest = request.headers.get("x-admin-request") === "true";
    if (!isAdminRequest) {
      return NextResponse.json({ error: "Admin access required" }, { status: 403 });
    }
    const authError = requireSessionAuth(request);
    if (authError) return authError;
    const body = (await request.json()) as ImportPayload;
    // Validate import data structure
-    if (!body.projects || !Array.isArray(body.projects)) {
+    if (!Array.isArray(body.projects)) {
      return NextResponse.json(
-        { error: 'Invalid import data format' },
+        { error: "Invalid import data format" },
-        { status: 400 }
+        { status: 400 },
      );
    }
    const results = {
      imported: 0,
      skipped: 0,
-      errors: [] as string[]
+      errors: [] as string[],
    };
    // Import SiteSettings (optional)
    if (body.siteSettings && typeof body.siteSettings === "object") {
      try {
        const ss = body.siteSettings as ImportSiteSettings;
        const defaultLocale = asString(ss.defaultLocale);
        const locales = asStringArray(ss.locales);
        const theme = ss.theme as Prisma.InputJsonValue | undefined;
        await prisma.siteSettings.upsert({
          where: { id: 1 },
          create: {
            id: 1,
            ...(defaultLocale ? { defaultLocale } : {}),
            ...(locales ? { locales } : {}),
            ...(theme ? { theme } : {}),
          },
          update: {
            ...(defaultLocale ? { defaultLocale } : {}),
            ...(locales ? { locales } : {}),
            ...(theme ? { theme } : {}),
          },
        });
      } catch {
        // non-blocking
      }
    }
    // Import CMS content pages (optional)
    if (Array.isArray(body.contentPages)) {
      for (const page of body.contentPages) {
        try {
          const key = asString((page as ImportContentPage)?.key);
          if (!key) continue;
          const statusRaw = asString((page as ImportContentPage)?.status);
          const status = statusRaw === "DRAFT" || statusRaw === "PUBLISHED" ? statusRaw : "PUBLISHED";
          const upserted = await prisma.contentPage.upsert({
            where: { key },
            create: { key, status },
            update: { status },
          });
          const translations = (page as ImportContentPage)?.translations;
          if (Array.isArray(translations)) {
            for (const tr of translations as ImportContentPageTranslation[]) {
              const locale = asString(tr?.locale);
              if (!locale || typeof tr?.content === "undefined" || tr?.content === null) continue;
              await prisma.contentPageTranslation.upsert({
                where: { pageId_locale: { pageId: upserted.id, locale } },
                create: {
                  pageId: upserted.id,
                  locale,
                  title: asString(tr.title),
                  slug: asString(tr.slug),
                  content: tr.content as Prisma.InputJsonValue,
                  metaDescription: asString(tr.metaDescription),
                  keywords: asString(tr.keywords),
                },
                update: {
                  title: asString(tr.title),
                  slug: asString(tr.slug),
                  content: tr.content as Prisma.InputJsonValue,
                  metaDescription: asString(tr.metaDescription),
                  keywords: asString(tr.keywords),
                },
              });
            }
          }
        } catch (error) {
          const key = asString((page as ImportContentPage)?.key) ?? "unknown";
          results.errors.push(
            `Failed to import content page "${key}": ${error instanceof Error ? error.message : "Unknown error"}`,
          );
        }
      }
    }
    // Preload existing titles once (avoid O(n^2) DB reads during import)
    const existingProjectsResult = await projectService.getAllProjects({ limit: 10000 });
    const existingProjects = existingProjectsResult.projects || existingProjectsResult;
    const existingTitles = new Set(existingProjects.map(p => p.title));
    const existingSlugs = new Set(
      existingProjects
        .map((p) => (p as unknown as { slug?: string }).slug)
        .filter((s): s is string => typeof s === "string" && s.length > 0),
    );
    // Process each project
-    for (const projectData of body.projects) {
+    for (const projectData of body.projects as ImportProject[]) {
      try {
        // Check if project already exists (by title)
-        const existingProjectsResult = await projectService.getAllProjects();
+        const title = asString(projectData.title);
-        const existingProjects = existingProjectsResult.projects || existingProjectsResult;
+        if (!title) continue;
-        const exists = existingProjects.some(p => p.title === projectData.title);
+        const exists = existingTitles.has(title);
        if (exists) {
          results.skipped++;
-          results.errors.push(`Project "${projectData.title}" already exists`);
+          results.errors.push(`Project "${title}" already exists`);
          continue;
        }
        // Create new project
-        await projectService.createProject({
+        const created = await projectService.createProject({
-          title: projectData.title,
+          slug: asString(projectData.slug) ?? undefined,
-          description: projectData.description,
+          defaultLocale: asString(projectData.defaultLocale) ?? "en",
-          content: projectData.content,
+          title,
-          tags: projectData.tags || [],
+          description: asString(projectData.description) ?? "",
-          category: projectData.category,
+          content: projectData.content as Prisma.InputJsonValue | undefined,
-          featured: projectData.featured || false,
+          tags: (asStringArray(projectData.tags) ?? []) as string[],
-          github: projectData.github,
+          category: asString(projectData.category) ?? "General",
-          live: projectData.live,
+          featured: projectData.featured === true,
          github: asString(projectData.github) ?? undefined,
          live: asString(projectData.live) ?? undefined,
          published: projectData.published !== false, // Default to true
-          imageUrl: projectData.imageUrl,
+          imageUrl: asString(projectData.imageUrl) ?? undefined,
-          difficulty: projectData.difficulty || 'Intermediate',
+          difficulty: asString(projectData.difficulty) ?? "Intermediate",
-          timeToComplete: projectData.timeToComplete,
+          timeToComplete: asString(projectData.timeToComplete) ?? undefined,
-          technologies: projectData.technologies || [],
+          technologies: (asStringArray(projectData.technologies) ?? []) as string[],
-          challenges: projectData.challenges || [],
+          challenges: (asStringArray(projectData.challenges) ?? []) as string[],
-          lessonsLearned: projectData.lessonsLearned || [],
+          lessonsLearned: (asStringArray(projectData.lessonsLearned) ?? []) as string[],
-          futureImprovements: projectData.futureImprovements || [],
+          futureImprovements: (asStringArray(projectData.futureImprovements) ?? []) as string[],
-          demoVideo: projectData.demoVideo,
+          demoVideo: asString(projectData.demoVideo) ?? undefined,
-          screenshots: projectData.screenshots || [],
+          screenshots: (asStringArray(projectData.screenshots) ?? []) as string[],
-          colorScheme: projectData.colorScheme || 'Dark',
+          colorScheme: asString(projectData.colorScheme) ?? "Dark",
          accessibility: projectData.accessibility !== false, // Default to true
-          performance: projectData.performance || {
+          performance: (projectData.performance as Record<string, unknown> | null) || {
            lighthouse: 0,
-            bundleSize: '0KB',
+            bundleSize: "0KB",
-            loadTime: '0s'
+            loadTime: "0s",
          },
-          analytics: projectData.analytics || {
+          analytics: (projectData.analytics as Record<string, unknown> | null) || {
            views: 0,
            likes: 0,
-            shares: 0
+            shares: 0,
-          }
+          },
        });
        // Import translations (optional, from export v2)
        if (Array.isArray(body.projectTranslations)) {
          for (const tr of body.projectTranslations as ImportProjectTranslation[]) {
            const projectId = typeof tr?.projectId === "number" ? tr.projectId : null;
            const locale = asString(tr?.locale);
            if (!projectId || !locale) continue;
            // Map translation to created project by original slug/title when possible.
            // We match by slug if available in exported project list; otherwise by title.
            const exportedProject = (body.projects as ImportProject[]).find(
              (p) => typeof p.id === "number" && p.id === projectId,
            );
            const exportedSlug = asString(exportedProject?.slug);
            const matches =
              (exportedSlug && (created as unknown as { slug?: string }).slug === exportedSlug) ||
              (!!asString(exportedProject?.title) &&
                (created as unknown as { title?: string }).title === asString(exportedProject?.title));
            if (!matches) continue;
            const trTitle = asString(tr.title);
            const trDescription = asString(tr.description);
            if (!trTitle || !trDescription) continue;
            await prisma.projectTranslation.upsert({
              where: {
                projectId_locale: {
                  projectId: (created as unknown as { id: number }).id,
                  locale,
                },
              },
              create: {
                projectId: (created as unknown as { id: number }).id,
                locale,
                title: trTitle,
                description: trDescription,
                content: (tr.content as Prisma.InputJsonValue) ?? null,
                metaDescription: asString(tr.metaDescription),
                keywords: asString(tr.keywords),
                ogImage: asString(tr.ogImage),
                schema: (tr.schema as Prisma.InputJsonValue) ?? null,
              },
              update: {
                title: trTitle,
                description: trDescription,
                content: (tr.content as Prisma.InputJsonValue) ?? null,
                metaDescription: asString(tr.metaDescription),
                keywords: asString(tr.keywords),
                ogImage: asString(tr.ogImage),
                schema: (tr.schema as Prisma.InputJsonValue) ?? null,
              },
            });
          }
        }
        results.imported++;
        existingTitles.add(title);
        const slug = asString(projectData.slug);
        if (slug) existingSlugs.add(slug);
      } catch (error) {
        results.skipped++;
-        results.errors.push(`Failed to import "${projectData.title}": ${error instanceof Error ? error.message : 'Unknown error'}`);
+        const title = asString(projectData.title) ?? "unknown";
        results.errors.push(
          `Failed to import "${title}": ${error instanceof Error ? error.message : "Unknown error"}`,
        );
      }
    }
@@ -80,10 +313,10 @@ export async function POST(request: NextRequest) {
      results
    });
  } catch (error) {
-    console.error('Import error:', error);
+    console.error("Import error:", error);
    return NextResponse.json(
-      { error: 'Failed to import projects' },
+      { error: "Failed to import projects" },
-      { status: 500 }
+      { status: 500 },
    );
  }
 }
--- a/app/api/projects/route.ts
+++ b/app/api/projects/route.ts
@@ -1,20 +1,25 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { prisma } from '@/lib/prisma';
 import { apiCache } from '@/lib/cache';
-import { requireSessionAuth, checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
+import { requireSessionAuth, checkRateLimit, getRateLimitHeaders, getClientIp } from '@/lib/auth';
 import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
 import { generateUniqueSlug } from '@/lib/slug';
 export async function GET(request: NextRequest) {
  try {
    // Rate limiting
-    const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
+    const ip = getClientIp(request);
-    if (!checkRateLimit(ip, 10, 60000)) { // 10 requests per minute
+    const rlKey = ip !== "unknown" ? ip : `dev_unknown:${request.headers.get("user-agent") || "ua"}`;
    // In development we keep this very high to avoid breaking local navigation/HMR.
    const max = process.env.NODE_ENV === "development" ? 300 : 60;
    if (!checkRateLimit(rlKey, max, 60000)) {
      return new NextResponse(
        JSON.stringify({ error: 'Rate limit exceeded' }), 
        { 
          status: 429, 
          headers: { 
            'Content-Type': 'application/json',
-            ...getRateLimitHeaders(ip, 10, 60000)
+            ...getRateLimitHeaders(rlKey, max, 60000)
          } 
        }
      );
@@ -29,8 +34,10 @@ export async function GET(request: NextRequest) {
      }
    }
    const { searchParams } = new URL(request.url);
-    const page = parseInt(searchParams.get('page') || '1');
+    const pageRaw = parseInt(searchParams.get('page') || '1');
-    const limit = parseInt(searchParams.get('limit') || '50');
+    const limitRaw = parseInt(searchParams.get('limit') || '50');
    const page = Number.isFinite(pageRaw) && pageRaw > 0 ? pageRaw : 1;
    const limit = Number.isFinite(limitRaw) && limitRaw > 0 && limitRaw <= 200 ? limitRaw : 50;
    const category = searchParams.get('category');
    const featured = searchParams.get('featured');
    const published = searchParams.get('published');
@@ -96,7 +103,22 @@ export async function GET(request: NextRequest) {
    return NextResponse.json(result);
  } catch (error) {
-    console.error('Error fetching projects:', error);
+    // Handle missing database table gracefully
    if (error instanceof PrismaClientKnownRequestError && error.code === 'P2021') {
      if (process.env.NODE_ENV === 'development') {
        console.warn('Project table does not exist. Returning empty result.');
      }
      return NextResponse.json({
        projects: [],
        total: 0,
        pages: 0,
        currentPage: 1
      });
    }
    if (process.env.NODE_ENV === 'development') {
      console.error('Error fetching projects:', error);
    }
    return NextResponse.json(
      { error: 'Failed to fetch projects' },
      { status: 500 }
@@ -106,6 +128,21 @@ export async function GET(request: NextRequest) {
 export async function POST(request: NextRequest) {
  try {
    // Rate limiting for POST requests
    const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
    if (!checkRateLimit(ip, 5, 60000)) { // 5 requests per minute for POST
      return new NextResponse(
        JSON.stringify({ error: 'Rate limit exceeded' }), 
        { 
          status: 429, 
          headers: { 
            'Content-Type': 'application/json',
            ...getRateLimitHeaders(ip, 5, 60000)
          } 
        }
      );
    }
    // Check if this is an admin request
    const isAdminRequest = request.headers.get('x-admin-request') === 'true';
    if (!isAdminRequest) {
@@ -114,16 +151,34 @@ export async function POST(request: NextRequest) {
        { status: 403 }
      );
    }
    const authError = requireSessionAuth(request);
    if (authError) return authError;
    const data = await request.json();
    // Remove difficulty field if it exists (since we're removing it)
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { difficulty, ...projectData } = data;
+    const { difficulty, slug, defaultLocale, ...projectData } = data;
    const derivedSlug =
      typeof slug === 'string' && slug.trim()
        ? slug.trim()
        : await generateUniqueSlug({
            base: String(projectData.title || 'project'),
            isTaken: async (candidate) => {
              const existing = await prisma.project.findUnique({
                where: { slug: candidate },
                select: { id: true },
              });
              return !!existing;
            },
          });
    const project = await prisma.project.create({
      data: {
        ...projectData,
        slug: derivedSlug,
        defaultLocale: typeof defaultLocale === 'string' && defaultLocale ? defaultLocale : undefined,
        // Set default difficulty since it's required in schema
        difficulty: 'INTERMEDIATE',
        performance: data.performance || { lighthouse: 0, bundleSize: '0KB', loadTime: '0s' },
@@ -136,7 +191,20 @@ export async function POST(request: NextRequest) {
    return NextResponse.json(project);
  } catch (error) {
-    console.error('Error creating project:', error);
+    // Handle missing database table gracefully
    if (error instanceof PrismaClientKnownRequestError && error.code === 'P2021') {
      if (process.env.NODE_ENV === 'development') {
        console.warn('Project table does not exist.');
      }
      return NextResponse.json(
        { error: 'Database table not found. Please run migrations.' },
        { status: 503 }
      );
    }
    if (process.env.NODE_ENV === 'development') {
      console.error('Error creating project:', error);
    }
    return NextResponse.json(
      { error: 'Failed to create project', details: error instanceof Error ? error.message : 'Unknown error' },
      { status: 500 }
--- a/app/api/projects/search/route.ts
+++ b/app/api/projects/search/route.ts
@@ -9,28 +9,15 @@ export async function GET(request: NextRequest) {
    const category = searchParams.get('category');
    if (slug) {
-      // Search by slug (convert title to slug format)
+      const project = await prisma.project.findFirst({
      const projects = await prisma.project.findMany({
        where: {
-          published: true
+          published: true,
          slug,
        },
-        orderBy: { createdAt: 'desc' }
+        orderBy: { createdAt: 'desc' },
      });
-      // Find exact match by converting titles to slugs
+      return NextResponse.json({ projects: project ? [project] : [] });
      const foundProject = projects.find(project => {
        const projectSlug = project.title.toLowerCase()
          .replace(/[^a-z0-9]+/g, '-')
          .replace(/^-+|-+$/g, '');
        return projectSlug === slug;
      });
      if (foundProject) {
        return NextResponse.json({ projects: [foundProject] });
      }
      // If no exact match, return empty array
      return NextResponse.json({ projects: [] });
    }
    if (search) {
--- a/app/api/sitemap/route.tsx
+++ b/app/api/sitemap/route.tsx
@@ -1,101 +1,22 @@
 import { NextResponse } from "next/server";
-
+import { generateSitemapXml, getSitemapEntries } from "@/lib/sitemap";
 interface Project {
  slug: string;
  updated_at?: string; // Optional timestamp for last modification
 }
 interface ProjectsData {
  posts: Project[];
 }
 export const dynamic = "force-dynamic";
-export const runtime = "nodejs"; // Force Node runtime
+export const runtime = "nodejs";
 const GHOST_API_URL = process.env.GHOST_API_URL;
 const GHOST_API_KEY = process.env.GHOST_API_KEY;
 // 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"?>';
  const urlsetOpen =
    '<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">';
  const urlsetClose = "</urlset>";
  const urlEntries = sitemapRoutes
    .map(
      (route) => `
    <url>
      <loc>${route.url}</loc>
      <lastmod>${route.lastModified}</lastmod>
      <changefreq>monthly</changefreq>
      <priority>0.8</priority>
    </url>`,
    )
    .join("");
  return `${xmlHeader}${urlsetOpen}${urlEntries}${urlsetClose}`;
 }
 export async function GET() {
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
  // Statische Routen
  const staticRoutes = [
    {
      url: `${baseUrl}/`,
      lastModified: new Date().toISOString(),
      priority: 1,
      changeFreq: "weekly",
    },
    {
      url: `${baseUrl}/legal-notice`,
      lastModified: new Date().toISOString(),
      priority: 0.5,
      changeFreq: "yearly",
    },
    {
      url: `${baseUrl}/privacy-policy`,
      lastModified: new Date().toISOString(),
      priority: 0.5,
      changeFreq: "yearly",
    },
  ];
  try {
-    const response = await fetch(
+    const entries = await getSitemapEntries();
-      `${GHOST_API_URL}/ghost/api/content/posts/?key=${GHOST_API_KEY}&limit=all`,
+    const xml = generateSitemapXml(entries);
-    );
+    return new NextResponse(xml, {
    if (!response.ok) {
      console.error(`Failed to fetch posts: ${response.statusText}`);
      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
    const sitemapRoutes = projects.map((project) => {
      const lastModified = project.updated_at || new Date().toISOString();
      return {
        url: `${baseUrl}/projects/${project.slug}`,
        lastModified,
        priority: 0.8,
        changeFreq: "monthly",
      };
    });
    const allRoutes = [...staticRoutes, ...sitemapRoutes];
    // Rückgabe der Sitemap im XML-Format
    return new NextResponse(generateXml(allRoutes), {
      headers: { "Content-Type": "application/xml" },
    });
  } catch (error) {
-    console.log("Failed to fetch posts from Ghost:", error);
+    console.error("Failed to generate sitemap:", error);
-    // Rückgabe der statischen Routen, falls Fehler auftritt
+    // Fail closed: return minimal sitemap
-    return new NextResponse(generateXml(staticRoutes), {
+    const xml = generateSitemapXml([]);
    return new NextResponse(xml, {
      status: 500,
      headers: { "Content-Type": "application/xml" },
    });
  }
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -1,94 +1,258 @@
 "use client";
-import { useState, useEffect } from 'react';
+import { motion, Variants } from "framer-motion";
-import { motion } from 'framer-motion';
+import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb } from "lucide-react";
-import { Code, Terminal, Cpu, Globe } from 'lucide-react';
+import { useEffect, useState } from "react";
-import { LiquidHeading } from '@/components/LiquidHeading';
+import { useLocale, useTranslations } from "next-intl";
 import type { JSONContent } from "@tiptap/react";
 import RichTextClient from "./RichTextClient";
 import CurrentlyReading from "./CurrentlyReading";
 const staggerContainer: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.15,
      delayChildren: 0.2,
    },
  },
 };
 const fadeInUp: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.5,
      ease: [0.25, 0.1, 0.25, 1],
    },
  },
 };
 const About = () => {
-  const [mounted, setMounted] = useState(false);
+  const locale = useLocale();
  const t = useTranslations("home.about");
  const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
  useEffect(() => {
-    setMounted(true);
+    (async () => {
-  }, []);
+      try {
        const res = await fetch(
          `/api/content/page?key=${encodeURIComponent("home-about")}&locale=${encodeURIComponent(locale)}`,
        );
        const data = await res.json();
        // Only use CMS content if it exists for the active locale.
        if (data?.content?.content && data?.content?.locale === locale) {
          setCmsDoc(data.content.content as JSONContent);
        } else {
          setCmsDoc(null);
        }
      } catch {
        // ignore; fallback to static
        setCmsDoc(null);
      }
    })();
  }, [locale]);
  const techStack = [
    {
-      category: 'Frontend',
+      category: t("techStack.categories.frontendMobile"),
      icon: Globe,
-      items: ['React', 'TypeScript', 'Tailwind', 'Next.js']
+      items: ["Next.js", "Tailwind CSS", "Flutter"],
    },
    {
-      category: 'Backend',
+      category: t("techStack.categories.backendDevops"),
-      icon: Terminal,
+      icon: Server,
-      items: ['Node.js', 'PostgreSQL', 'Prisma', 'API Design']
+      items: ["Docker Swarm", "Traefik", "Nginx Proxy Manager", "Redis"],
    },
    {
-      category: 'Tools',
+      category: t("techStack.categories.toolsAutomation"),
-      icon: Cpu,
+      icon: Wrench,
-      items: ['Git', 'Docker', 'VS Code', 'Figma']
+      items: ["Git", "CI/CD", "n8n", t("techStack.items.selfHostedServices")],
-    }
+    },
    {
      category: t("techStack.categories.securityAdmin"),
      icon: Shield,
      items: ["CrowdSec", "Suricata", "Mailcow"],
    },
  ];
-  if (!mounted) return null;
+  const hobbies: Array<{ icon: typeof Code; text: string }> = [
    { icon: Code, text: t("hobbies.selfHosting") },
    { icon: Gamepad2, text: t("hobbies.gaming") },
    { icon: Server, text: t("hobbies.gameServers") },
    { icon: Activity, text: t("hobbies.jogging") },
  ];
  return (
-    <section id="about" className="py-24 px-4 bg-white relative overflow-hidden">
+    <section
      id="about"
      className="py-24 px-4 bg-gradient-to-br from-liquid-sky/15 via-liquid-lavender/10 to-liquid-pink/15 relative overflow-hidden"
    >
      <div className="max-w-6xl mx-auto relative z-10">
-        
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          {/* Text Content */}
-          <div className="space-y-8">
+          <motion.div
-             <LiquidHeading 
+            initial="hidden"
-                text="About Me" 
+            whileInView="visible"
-                level={2} 
+            viewport={{ once: true, margin: "-100px" }}
-                className="text-4xl md:text-5xl font-bold text-stone-900"
+            variants={staggerContainer}
-              />
+            className="space-y-8"
-            <div className="prose prose-stone prose-lg text-stone-600">
+          >
-              <p>
+            <motion.h2
-                Hi, I&apos;m Dennis. I&apos;m a software engineer who likes building things that work well and look good.
+              variants={fadeInUp}
-              </p>
+              className="text-4xl md:text-5xl font-bold text-stone-900"
-              <p>
+            >
-                I&apos;m currently based in Osnabrück, Germany. My journey in tech is driven by curiosity—I love figuring out how things work and how to make them better.
+              {t("title")}
-              </p>
+            </motion.h2>
-              <p>
+            <motion.div
-                When I&apos;m not in front of a screen, you can find me listening to music, exploring new ideas, or just relaxing.
+              variants={fadeInUp}
-              </p>
+              className="prose prose-stone prose-lg text-stone-700 space-y-4"
-            </div>
+            >
-          </div>
+              {cmsDoc ? (
-
+                <RichTextClient doc={cmsDoc} className="prose prose-stone max-w-none" />
-          {/* Simplified Skills / Tech Stack */}
+              ) : (
-          <div className="grid grid-cols-1 gap-6">
+                <>
-            <h3 className="text-xl font-bold text-stone-900 mb-2">My Toolbox</h3>
+                  <p>{t("p1")}</p>
-            {techStack.map((stack, idx) => (
+                  <p>{t("p2")}</p>
                  <p>{t("p3")}</p>
                </>
              )}
              <motion.div
-                key={stack.category}
+                variants={fadeInUp}
-                initial={{ opacity: 0, x: 20 }}
+                className="relative overflow-hidden bg-gradient-to-br from-liquid-mint/15 via-liquid-sky/10 to-liquid-lavender/15 border-2 border-liquid-mint/30 rounded-xl p-5 backdrop-blur-sm"
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ delay: idx * 0.1 }}
                viewport={{ once: true }}
                className="p-6 rounded-xl bg-stone-50 border border-stone-100 hover:border-stone-200 transition-colors"
              >
-                <div className="flex items-center gap-3 mb-4">
+                <div className="flex items-start gap-3">
-                  <div className="p-2 bg-white rounded-lg shadow-sm text-stone-700">
+                  <Lightbulb size={20} className="text-stone-600 flex-shrink-0 mt-0.5" />
-                    <stack.icon size={20} />
+                  <div>
                    <p className="text-sm font-semibold text-stone-800 mb-1">
                      {t("funFactTitle")}
                    </p>
                    <p className="text-sm text-stone-700 leading-relaxed">
                      {t("funFactBody")}
                    </p>
                  </div>
                  <h4 className="font-semibold text-stone-800">{stack.category}</h4>
                </div>
                <div className="flex flex-wrap gap-2">
                  {stack.items.map(item => (
                    <span key={item} className="px-3 py-1 bg-white rounded-md border border-stone-200 text-sm text-stone-600">
                      {item}
                    </span>
                  ))}
                </div>
              </motion.div>
-            ))}
+            </motion.div>
-          </div>
+          </motion.div>
          {/* Tech Stack & Hobbies */}
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, margin: "-100px" }}
            variants={staggerContainer}
            className="space-y-8"
          >
            <div>
              <motion.h3
                variants={fadeInUp}
                className="text-2xl font-bold text-stone-900 mb-6"
              >
                {t("techStackTitle")}
              </motion.h3>
              <div className="grid grid-cols-1 gap-4">
                {techStack.map((stack, idx) => (
                  <motion.div
                    key={`${stack.category}-${idx}`}
                    variants={fadeInUp}
                    whileHover={{
                      scale: 1.02,
                      transition: { duration: 0.4, ease: "easeOut" },
                    }}
                    className={`p-5 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out ${
                      idx === 0
                        ? "bg-gradient-to-br from-liquid-sky/10 to-liquid-mint/10 border-liquid-sky/30 hover:border-liquid-sky/50 hover:from-liquid-sky/15 hover:to-liquid-mint/15"
                        : idx === 1
                          ? "bg-gradient-to-br from-liquid-peach/10 to-liquid-coral/10 border-liquid-peach/30 hover:border-liquid-peach/50 hover:from-liquid-peach/15 hover:to-liquid-coral/15"
                          : idx === 2
                            ? "bg-gradient-to-br from-liquid-lavender/10 to-liquid-pink/10 border-liquid-lavender/30 hover:border-liquid-lavender/50 hover:from-liquid-lavender/15 hover:to-liquid-pink/15"
                            : "bg-gradient-to-br from-liquid-teal/10 to-liquid-lime/10 border-liquid-teal/30 hover:border-liquid-teal/50 hover:from-liquid-teal/15 hover:to-liquid-lime/15"
                    }`}
                  >
                    <div className="flex items-center gap-3 mb-3">
                      <div className="p-2 bg-white rounded-lg shadow-sm text-stone-700">
                        <stack.icon size={18} />
                      </div>
                      <h4 className="font-semibold text-stone-800">
                        {stack.category}
                      </h4>
                    </div>
                    <div className="flex flex-wrap gap-2">
                      {stack.items.map((item, itemIdx) => (
                        <span
                          key={`${stack.category}-${item}-${itemIdx}`}
                          className={`px-3 py-1.5 rounded-lg border-2 text-sm text-stone-700 font-medium transition-all duration-400 ease-out ${
                            itemIdx % 4 === 0
                              ? "bg-liquid-mint/10 border-liquid-mint/30 hover:bg-liquid-mint/20 hover:border-liquid-mint/50"
                              : itemIdx % 4 === 1
                                ? "bg-liquid-lavender/10 border-liquid-lavender/30 hover:bg-liquid-lavender/20 hover:border-liquid-lavender/50"
                                : itemIdx % 4 === 2
                                  ? "bg-liquid-rose/10 border-liquid-rose/30 hover:bg-liquid-rose/20 hover:border-liquid-rose/50"
                                  : "bg-liquid-sky/10 border-liquid-sky/30 hover:bg-liquid-sky/20 hover:border-liquid-sky/50"
                          }`}
                        >
                          {item}
                        </span>
                      ))}
                    </div>
                  </motion.div>
                ))}
              </div>
            </div>
            {/* Hobbies */}
            <div>
              <motion.h3
                variants={fadeInUp}
                className="text-xl font-bold text-stone-900 mb-4"
              >
                {t("hobbiesTitle")}
              </motion.h3>
              <div className="space-y-3">
                {hobbies.map((hobby, idx) => (
                  <motion.div
                    key={`hobby-${hobby.text}-${idx}`}
                    variants={fadeInUp}
                    whileHover={{
                      x: 8,
                      scale: 1.02,
                      transition: { duration: 0.4, ease: "easeOut" },
                    }}
                  className={`flex items-center gap-3 p-4 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out ${
                      idx === 0
                        ? "bg-gradient-to-r from-liquid-mint/10 to-liquid-sky/10 border-liquid-mint/30 hover:border-liquid-mint/50 hover:from-liquid-mint/15 hover:to-liquid-sky/15"
                        : idx === 1
                          ? "bg-gradient-to-r from-liquid-coral/10 to-liquid-peach/10 border-liquid-coral/30 hover:border-liquid-coral/50 hover:from-liquid-coral/15 hover:to-liquid-peach/15"
                          : idx === 2
                            ? "bg-gradient-to-r from-liquid-lavender/10 to-liquid-pink/10 border-liquid-lavender/30 hover:border-liquid-lavender/50 hover:from-liquid-lavender/15 hover:to-liquid-pink/15"
                            : "bg-gradient-to-r from-liquid-lime/10 to-liquid-teal/10 border-liquid-lime/30 hover:border-liquid-lime/50 hover:from-liquid-lime/15 hover:to-liquid-teal/15"
                    }`}
                  >
                    <hobby.icon size={20} className="text-stone-600" />
                    <span className="text-stone-700 font-medium">
                      {hobby.text}
                    </span>
                  </motion.div>
                ))}
              </div>
            </div>
            {/* Currently Reading */}
            <motion.div
              variants={fadeInUp}
              className="mt-8"
            >
              <CurrentlyReading />
            </motion.div>
          </motion.div>
        </div>
      </div>
    </section>
  );
 };
-export default About;
+export default About;
--- a/app/components/ActivityFeed.tsx
+++ b/app/components/ActivityFeed.tsx
--- a/app/components/BackgroundBlobsClient.tsx
+++ b/app/components/BackgroundBlobsClient.tsx
@@ -0,0 +1,17 @@
 "use client";
 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 />;
 }
--- a/app/components/ChatWidget.tsx
+++ b/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-white/80 backdrop-blur-xl text-stone-900 p-3.5 rounded-full shadow-[0_10px_26px_rgba(41,37,36,0.16)] hover:bg-white hover:scale-105 transition-all duration-300 group cursor-pointer border border-white/60 ring-1 ring-white/30"
            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-white" />
            {/* 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-white/80 backdrop-blur-xl saturate-100 rounded-2xl shadow-[0_12px_40px_rgba(41,37,36,0.16)] flex flex-col overflow-hidden border border-white/60 ring-1 ring-white/30"
          >
            {/* Header */}
            <div className="bg-white/70 text-stone-900 p-4 flex items-center justify-between border-b border-white/50">
              <div className="flex items-center gap-3">
                <div className="relative">
                  <div className="w-10 h-10 rounded-full bg-gradient-to-br from-liquid-mint/50 via-liquid-lavender/40 to-liquid-rose/40 flex items-center justify-center ring-1 ring-white/50 shadow-sm">
                    <Sparkles size={18} className="text-stone-800" />
                  </div>
                  <span className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 rounded-full border-2 border-white 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-stone-900 text-white"
                        : "bg-white/70 text-stone-900 border border-white/60"
                    }`}
                  >
                    <p className={`text-sm whitespace-pre-wrap break-words leading-relaxed ${
                      message.sender === "user" ? "text-white/90 font-normal" : "text-stone-900 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>
    </>
  );
 }
--- a/app/components/ClientOnly.tsx
+++ b/app/components/ClientOnly.tsx
@@ -0,0 +1,17 @@
 "use client";
 import React, { useEffect, useState } from "react";
 export default function ClientOnly({ children }: { children: React.ReactNode }) {
  const [hasMounted, setHasMounted] = useState(false);
  useEffect(() => {
    setHasMounted(true);
  }, []);
  if (!hasMounted) {
    return null;
  }
  return <>{children}</>;
 }
--- a/app/components/ClientProviders.tsx
+++ b/app/components/ClientProviders.tsx
@@ -0,0 +1,113 @@
 "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";
 import { ConsentProvider, useConsent } from "./ConsentProvider";
 // 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>
        <ConsentProvider>
          <GatedProviders mounted={mounted} is404Page={is404Page}>
            {children}
          </GatedProviders>
        </ConsentProvider>
      </ErrorBoundary>
    </ErrorBoundary>
  );
 }
 function GatedProviders({
  children,
  mounted,
  is404Page,
 }: {
  children: React.ReactNode;
  mounted: boolean;
  is404Page: boolean;
 }) {
  const { consent } = useConsent();
  const pathname = usePathname();
  const isAdminRoute = pathname.startsWith("/manage") || pathname.startsWith("/editor");
  // If consent is not decided yet, treat optional features as off
  const analyticsEnabled = !!consent?.analytics;
  const chatEnabled = !!consent?.chat;
  const content = (
    <ErrorBoundary>
      <ToastProvider>
        {mounted && <BackgroundBlobs />}
        <div className="relative z-10">{children}</div>
        {mounted && !is404Page && !isAdminRoute && chatEnabled && <ChatWidget />}
      </ToastProvider>
    </ErrorBoundary>
  );
  return analyticsEnabled ? <AnalyticsProvider>{content}</AnalyticsProvider> : content;
 }
--- a/app/components/ConsentBanner.tsx
+++ b/app/components/ConsentBanner.tsx
@@ -0,0 +1,116 @@
 "use client";
 import React, { useState } from "react";
 import { useConsent, type ConsentState } from "./ConsentProvider";
 import { useTranslations } from "next-intl";
 export default function ConsentBanner() {
  const { consent, ready, setConsent } = useConsent();
  const [draft, setDraft] = useState<ConsentState>({ analytics: false, chat: false });
  const [minimized, setMinimized] = useState(false);
  const t = useTranslations("consent");
  // Avoid hydration mismatch + avoid "flash then disappear":
  // Only decide whether to show the banner after consent has been read client-side.
  const shouldShow = ready && consent === null;
  if (!shouldShow) return null;
  const s = {
    title: t("title"),
    description: t("description"),
    essential: t("essential"),
    analytics: t("analytics"),
    chat: t("chat"),
    alwaysOn: t("alwaysOn"),
    acceptAll: t("acceptAll"),
    acceptSelected: t("acceptSelected"),
    rejectAll: t("rejectAll"),
    hide: t("hide"),
  };
  if (minimized) {
    return (
      <div className="fixed bottom-4 right-4 z-[60]">
        <button
          type="button"
          onClick={() => setMinimized(false)}
          className="px-4 py-2 rounded-full bg-white/80 backdrop-blur-xl border border-white/60 shadow-lg text-stone-800 font-semibold hover:bg-white transition-colors"
          aria-label="Open privacy settings"
        >
          {s.title}
        </button>
      </div>
    );
  }
  return (
    <div className="fixed bottom-4 right-4 z-[60] max-w-[calc(100vw-2rem)]">
      <div className="w-[360px] max-w-full bg-white/85 backdrop-blur-xl border border-white/60 rounded-2xl shadow-[0_12px_40px_rgba(41,37,36,0.14)] p-4">
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0">
            <div className="text-base font-bold text-stone-900">{s.title}</div>
            <p className="text-xs text-stone-600 mt-1 leading-snug">{s.description}</p>
          </div>
          <button
            type="button"
            onClick={() => setMinimized(true)}
            className="shrink-0 text-xs text-stone-500 hover:text-stone-900 transition-colors"
            aria-label="Minimize privacy banner"
            title="Minimize"
          >
            {s.hide}
          </button>
        </div>
        <div className="mt-3 space-y-2">
          <div className="flex items-center justify-between gap-3">
            <div className="text-xs font-semibold text-stone-800">{s.essential}</div>
            <div className="text-[11px] text-stone-500">{s.alwaysOn}</div>
          </div>
          <label className="flex items-center justify-between gap-3 py-1">
            <span className="text-sm font-semibold text-stone-800">{s.analytics}</span>
            <input
              type="checkbox"
              checked={draft.analytics}
              onChange={(e) => setDraft((p) => ({ ...p, analytics: e.target.checked }))}
              className="w-4 h-4 accent-stone-900"
            />
          </label>
          <label className="flex items-center justify-between gap-3 py-1">
            <span className="text-sm font-semibold text-stone-800">{s.chat}</span>
            <input
              type="checkbox"
              checked={draft.chat}
              onChange={(e) => setDraft((p) => ({ ...p, chat: e.target.checked }))}
              className="w-4 h-4 accent-stone-900"
            />
          </label>
        </div>
        <div className="mt-3 flex flex-col gap-2">
          <button
            onClick={() => setConsent({ analytics: true, chat: true })}
            className="px-4 py-2 rounded-xl bg-stone-900 text-stone-50 font-semibold hover:bg-stone-800 transition-colors"
          >
            {s.acceptAll}
          </button>
          <button
            onClick={() => setConsent(draft)}
            className="px-4 py-2 rounded-xl bg-white border border-stone-200 text-stone-800 font-semibold hover:bg-stone-50 transition-colors"
          >
            {s.acceptSelected}
          </button>
          <button
            onClick={() => setConsent({ analytics: false, chat: false })}
            className="px-4 py-2 rounded-xl bg-transparent text-stone-600 font-semibold hover:text-stone-900 transition-colors"
          >
            {s.rejectAll}
          </button>
        </div>
      </div>
    </div>
  );
 }
--- a/app/components/ConsentProvider.tsx
+++ b/app/components/ConsentProvider.tsx
@@ -0,0 +1,87 @@
 "use client";
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 export type ConsentState = {
  analytics: boolean;
  chat: boolean;
 };
 const COOKIE_NAME = "dk0_consent_v1";
 function readConsentFromCookie(): ConsentState | null {
  if (typeof document === "undefined") return null;
  const match = document.cookie
    .split(";")
    .map((c) => c.trim())
    .find((c) => c.startsWith(`${COOKIE_NAME}=`));
  if (!match) return null;
  const value = decodeURIComponent(match.split("=").slice(1).join("="));
  try {
    const parsed = JSON.parse(value) as Partial<ConsentState>;
    return {
      analytics: !!parsed.analytics,
      chat: !!parsed.chat,
    };
  } catch {
    return null;
  }
 }
 function writeConsentCookie(value: ConsentState) {
  const encoded = encodeURIComponent(JSON.stringify(value));
  // 180 days
  const maxAge = 60 * 60 * 24 * 180;
  document.cookie = `${COOKIE_NAME}=${encoded}; path=/; max-age=${maxAge}; samesite=lax`;
 }
 const ConsentContext = createContext<{
  consent: ConsentState | null;
  ready: boolean;
  setConsent: (next: ConsentState) => void;
  resetConsent: () => void;
 }>({
  consent: null,
  ready: false,
  setConsent: () => {},
  resetConsent: () => {},
 });
 export function ConsentProvider({ children }: { children: React.ReactNode }) {
  // IMPORTANT:
  // Don't read `document.cookie` during SSR render (document is undefined), otherwise the
  // server will render the banner while the client immediately hides it -> hydration mismatch.
  // We resolve consent on the client after mount and only render the banner once `ready=true`.
  const [consent, setConsentState] = useState<ConsentState | null>(null);
  const [ready, setReady] = useState(false);
  useEffect(() => {
    setConsentState(readConsentFromCookie());
    setReady(true);
  }, []);
  const setConsent = useCallback((next: ConsentState) => {
    setConsentState(next);
    writeConsentCookie(next);
  }, []);
  const resetConsent = useCallback(() => {
    setConsentState(null);
    // expire cookie
    document.cookie = `${COOKIE_NAME}=; path=/; max-age=0; samesite=lax`;
  }, []);
  const value = useMemo(
    () => ({ consent, ready, setConsent, resetConsent }),
    [consent, ready, setConsent, resetConsent],
  );
  return <ConsentContext.Provider value={value}>{children}</ConsentContext.Provider>;
 }
 export function useConsent() {
  return useContext(ConsentContext);
 }
 export const consentCookieName = COOKIE_NAME;
--- a/app/components/Contact.tsx
+++ b/app/components/Contact.tsx
@@ -1,24 +1,46 @@
 "use client";
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
-import { motion } from 'framer-motion';
+import { motion } from "framer-motion";
-import { Mail, MapPin, Send } from 'lucide-react';
+import { Mail, MapPin, Send } from "lucide-react";
-import { useToast } from '@/components/Toast';
+import { useToast } from "@/components/Toast";
-import { LiquidHeading } from '@/components/LiquidHeading';
+import { useLocale, useTranslations } from "next-intl";
 import type { JSONContent } from "@tiptap/react";
 import RichTextClient from "./RichTextClient";
 const Contact = () => {
  const [mounted, setMounted] = useState(false);
  const { showEmailSent, showEmailError } = useToast();
  const locale = useLocale();
  const t = useTranslations("home.contact");
  const tForm = useTranslations("home.contact.form");
  const tInfo = useTranslations("home.contact.info");
  const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
  useEffect(() => {
-    setMounted(true);
+    (async () => {
-  }, []);
+      try {
        const res = await fetch(
          `/api/content/page?key=${encodeURIComponent("home-contact")}&locale=${encodeURIComponent(locale)}`,
        );
        const data = await res.json();
        // Only use CMS content if it exists for the active locale.
        if (data?.content?.content && data?.content?.locale === locale) {
          setCmsDoc(data.content.content as JSONContent);
        } else {
          setCmsDoc(null);
        }
      } catch {
        // ignore; fallback to static
        setCmsDoc(null);
      }
    })();
  }, [locale]);
  const [formData, setFormData] = useState({
-    name: '',
+    name: "",
-    email: '',
+    email: "",
-    subject: '',
+    subject: "",
-    message: ''
+    message: "",
  });
  const [errors, setErrors] = useState<Record<string, string>>({});
@@ -29,27 +51,27 @@ const Contact = () => {
    const newErrors: Record<string, string> = {};
    if (!formData.name.trim()) {
-      newErrors.name = 'Name is required';
+      newErrors.name = tForm("errors.nameRequired");
    } else if (formData.name.trim().length < 2) {
-      newErrors.name = 'Name must be at least 2 characters';
+      newErrors.name = tForm("errors.nameMin");
    }
    if (!formData.email.trim()) {
-      newErrors.email = 'Email is required';
+      newErrors.email = tForm("errors.emailRequired");
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
-      newErrors.email = 'Please enter a valid email address';
+      newErrors.email = tForm("errors.emailInvalid");
    }
    if (!formData.subject.trim()) {
-      newErrors.subject = 'Subject is required';
+      newErrors.subject = tForm("errors.subjectRequired");
    } else if (formData.subject.trim().length < 3) {
-      newErrors.subject = 'Subject must be at least 3 characters';
+      newErrors.subject = tForm("errors.subjectMin");
    }
    if (!formData.message.trim()) {
-      newErrors.message = 'Message is required';
+      newErrors.message = tForm("errors.messageRequired");
    } else if (formData.message.trim().length < 10) {
-      newErrors.message = 'Message must be at least 10 characters';
+      newErrors.message = tForm("errors.messageMin");
    }
    setErrors(newErrors);
@@ -58,18 +80,18 @@ const Contact = () => {
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
-    
+
    if (!validateForm()) {
      return;
    }
    setIsSubmitting(true);
-    
+
    try {
-      const response = await fetch('/api/email', {
+      const response = await fetch("/api/email", {
-        method: 'POST',
+        method: "POST",
        headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name: formData.name,
@@ -81,41 +103,51 @@ const Contact = () => {
      if (response.ok) {
        showEmailSent(formData.email);
-        setFormData({ name: '', email: '', subject: '', message: '' });
+        setFormData({ name: "", email: "", subject: "", message: "" });
        setTouched({});
        setErrors({});
      } else {
        const errorData = await response.json();
-        showEmailError(errorData.error || 'Failed to send message. Please try again.');
+        showEmailError(
          errorData.error || "Failed to send message. Please try again.",
        );
      }
    } catch (error) {
-      console.error('Error sending email:', error);
+      if (process.env.NODE_ENV === 'development') {
-      showEmailError('Network error. Please check your connection and try again.');
+        console.error("Error sending email:", error);
      }
      showEmailError(
        "Network error. Please check your connection and try again.",
      );
    } finally {
      setIsSubmitting(false);
    }
  };
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
  ) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
-      [name]: value
+      [name]: value,
    });
    // Clear error when user starts typing
    if (errors[name]) {
      setErrors({
        ...errors,
-        [name]: ''
+        [name]: "",
      });
    }
  };
-  const handleBlur = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  const handleBlur = (
    e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>,
  ) => {
    setTouched({
      ...touched,
-      [e.target.name]: true
+      [e.target.name]: true,
    });
    validateForm();
  };
@@ -123,53 +155,58 @@ const Contact = () => {
  const contactInfo = [
    {
      icon: Mail,
-      title: 'Email',
+      title: tInfo("email"),
-      value: 'contact@dk0.dev',
+      value: "contact@dk0.dev",
-      href: 'mailto:contact@dk0.dev'
+      href: "mailto:contact@dk0.dev",
    },
    {
      icon: MapPin,
-      title: 'Location',
+      title: tInfo("location"),
-      value: 'Osnabrück, Germany',
+      value: tInfo("locationValue"),
-    }
+    },
  ];
  if (!mounted) {
    return null;
  }
  return (
-    <section id="contact" className="py-24 px-4 relative bg-cream">
+    <section
      id="contact"
      className="py-24 px-4 relative bg-gradient-to-br from-liquid-teal/15 via-liquid-mint/10 to-liquid-lime/15"
    >
      <div className="max-w-7xl mx-auto">
        {/* Section Header */}
-        <div className="text-center mb-16">
+        <motion.div
-          <LiquidHeading 
+          initial={{ opacity: 0, y: 20 }}
-            text="Contact Me" 
+          whileInView={{ opacity: 1, y: 0 }}
-            level={2} 
+          viewport={{ once: true, margin: "-50px" }}
-            className="text-4xl md:text-5xl font-bold mb-6 text-stone-800"
+          transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
-          />
+          className="text-center mb-16"
-          <p className="text-xl text-stone-500 max-w-2xl mx-auto mt-4">
+        >
-            Interested in working together or have questions about my projects? Feel free to reach out!
+          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-stone-900">
-          </p>
+            {t("title")}
-        </div>
+          </h2>
          {cmsDoc ? (
            <RichTextClient doc={cmsDoc} className="prose prose-stone max-w-2xl mx-auto mt-4 text-stone-700" />
          ) : (
            <p className="text-xl text-stone-700 max-w-2xl mx-auto mt-4">
              {t("subtitle")}
            </p>
          )}
        </motion.div>
        <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 }}
+            viewport={{ once: true, margin: "-50px" }}
-            transition={{ duration: 0.8 }}
+            transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
            className="space-y-8"
          >
            <div>
-              <h3 className="text-2xl font-bold text-stone-800 mb-6">
+              <h3 className="text-2xl font-bold text-stone-900 mb-6">
-                Get In Touch
+                {t("getInTouch")}
              </h3>
-              <p className="text-stone-600 leading-relaxed">
+              <p className="text-stone-700 leading-relaxed">
-                I&apos;m always available to discuss new opportunities, interesting projects, 
+                {t("getInTouchBody")}
                or simply chat about technology and innovation.
              </p>
            </div>
@@ -179,40 +216,53 @@ 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.6, delay: index * 0.1 }}
+                  transition={{
-                  whileHover={{ x: 5 }}
+                    duration: 0.5,
-                  className="flex items-center space-x-4 p-4 rounded-2xl glass-card hover:bg-white/60 transition-colors group border-transparent hover:border-white/60"
+                    delay: index * 0.1,
                    ease: [0.25, 0.1, 0.25, 1],
                  }}
                  whileHover={{
                    x: 8,
                    transition: { duration: 0.4, ease: "easeOut" },
                  }}
                  className="flex items-center space-x-4 p-4 rounded-2xl glass-card hover:bg-white/80 transition-[background-color,border-color,box-shadow] duration-500 ease-out group border-transparent hover:border-white/70"
                >
                  <div className="p-3 bg-white rounded-xl shadow-sm group-hover:shadow-md transition-all">
                    <info.icon className="w-6 h-6 text-stone-700" />
                  </div>
                  <div>
-                    <h4 className="font-semibold text-stone-800">{info.title}</h4>
+                    <h4 className="font-semibold text-stone-800">
                      {info.title}
                    </h4>
                    <p className="text-stone-500">{info.value}</p>
                  </div>
                </motion.a>
              ))}
            </div>
          </motion.div>
          {/* Contact Form */}
          <motion.div
-            initial={{ opacity: 0, x: 30 }}
+            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
+            viewport={{ once: true, margin: "-50px" }}
-            transition={{ duration: 0.8 }}
+            transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
-            className="glass-card p-8 rounded-3xl bg-white/40 border border-white/60"
+            className="glass-card p-8 rounded-3xl bg-white/50 border border-white/70"
          >
-            <h3 className="text-2xl font-bold text-stone-800 mb-6">Send Message</h3>
+            <h3 className="text-2xl font-bold text-gray-800 mb-6">
-            
+              {tForm("title")}
            </h3>
            <form onSubmit={handleSubmit} className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
-                  <label htmlFor="name" className="block text-sm font-medium text-stone-600 mb-2">
+                  <label
                    htmlFor="name"
                    className="block text-sm font-medium text-stone-600 mb-2"
                  >
                    Name <span className="text-liquid-rose">*</span>
                  </label>
                  <input
@@ -225,20 +275,29 @@ const Contact = () => {
                    required
                    className={`w-full px-4 py-3 bg-white/50 backdrop-blur-sm border rounded-xl text-stone-800 placeholder-stone-400 focus:outline-none focus:ring-2 transition-all ${
                      errors.name && touched.name
-                        ? 'border-red-400 focus:ring-red-400'
+                        ? "border-red-400 focus:ring-red-400"
-                        : 'border-white/60 focus:ring-liquid-blue focus:border-transparent'
+                        : "border-white/60 focus:ring-liquid-blue focus:border-transparent"
                    }`}
-                    placeholder="Your name"
+                    placeholder={tForm("placeholders.name")}
-                    aria-invalid={errors.name && touched.name ? 'true' : 'false'}
+                    aria-invalid={
-                    aria-describedby={errors.name && touched.name ? 'name-error' : undefined}
+                      errors.name && touched.name ? "true" : "false"
                    }
                    aria-describedby={
                      errors.name && touched.name ? "name-error" : undefined
                    }
                  />
                  {errors.name && touched.name && (
-                    <p id="name-error" className="mt-1 text-sm text-red-500">{errors.name}</p>
+                    <p id="name-error" className="mt-1 text-sm text-red-500">
                      {errors.name}
                    </p>
                  )}
                </div>
-                
+
                <div>
-                  <label htmlFor="email" className="block text-sm font-medium text-stone-600 mb-2">
+                  <label
                    htmlFor="email"
                    className="block text-sm font-medium text-stone-600 mb-2"
                  >
                    Email <span className="text-liquid-rose">*</span>
                  </label>
                  <input
@@ -251,21 +310,30 @@ const Contact = () => {
                    required
                    className={`w-full px-4 py-3 bg-white/50 backdrop-blur-sm border rounded-xl text-stone-800 placeholder-stone-400 focus:outline-none focus:ring-2 transition-all ${
                      errors.email && touched.email
-                        ? 'border-red-400 focus:ring-red-400'
+                        ? "border-red-400 focus:ring-red-400"
-                        : 'border-white/60 focus:ring-liquid-blue focus:border-transparent'
+                        : "border-white/60 focus:ring-liquid-blue focus:border-transparent"
                    }`}
-                    placeholder="your@email.com"
+                    placeholder={tForm("placeholders.email")}
-                    aria-invalid={errors.email && touched.email ? 'true' : 'false'}
+                    aria-invalid={
-                    aria-describedby={errors.email && touched.email ? 'email-error' : undefined}
+                      errors.email && touched.email ? "true" : "false"
                    }
                    aria-describedby={
                      errors.email && touched.email ? "email-error" : undefined
                    }
                  />
                  {errors.email && touched.email && (
-                    <p id="email-error" className="mt-1 text-sm text-red-500">{errors.email}</p>
+                    <p id="email-error" className="mt-1 text-sm text-red-500">
                      {errors.email}
                    </p>
                  )}
                </div>
              </div>
              <div>
-                <label htmlFor="subject" className="block text-sm font-medium text-stone-600 mb-2">
+                <label
                  htmlFor="subject"
                  className="block text-sm font-medium text-stone-600 mb-2"
                >
                  Subject <span className="text-liquid-rose">*</span>
                </label>
                <input
@@ -278,20 +346,31 @@ const Contact = () => {
                  required
                  className={`w-full px-4 py-3 bg-white/50 backdrop-blur-sm border rounded-xl text-stone-800 placeholder-stone-400 focus:outline-none focus:ring-2 transition-all ${
                    errors.subject && touched.subject
-                      ? 'border-red-400 focus:ring-red-400'
+                      ? "border-red-400 focus:ring-red-400"
-                      : 'border-white/60 focus:ring-liquid-blue focus:border-transparent'
+                      : "border-white/60 focus:ring-liquid-blue focus:border-transparent"
                  }`}
-                  placeholder="What's this about?"
+                  placeholder={tForm("placeholders.subject")}
-                  aria-invalid={errors.subject && touched.subject ? 'true' : 'false'}
+                  aria-invalid={
-                  aria-describedby={errors.subject && touched.subject ? 'subject-error' : undefined}
+                    errors.subject && touched.subject ? "true" : "false"
                  }
                  aria-describedby={
                    errors.subject && touched.subject
                      ? "subject-error"
                      : undefined
                  }
                />
                {errors.subject && touched.subject && (
-                  <p id="subject-error" className="mt-1 text-sm text-red-500">{errors.subject}</p>
+                  <p id="subject-error" className="mt-1 text-sm text-red-500">
                    {errors.subject}
                  </p>
                )}
              </div>
              <div>
-                <label htmlFor="message" className="block text-sm font-medium text-stone-600 mb-2">
+                <label
                  htmlFor="message"
                  className="block text-sm font-medium text-stone-600 mb-2"
                >
                  Message <span className="text-liquid-rose">*</span>
                </label>
                <textarea
@@ -304,21 +383,29 @@ const Contact = () => {
                  rows={6}
                  className={`w-full px-4 py-3 bg-white/50 backdrop-blur-sm border rounded-xl text-stone-800 placeholder-stone-400 focus:outline-none focus:ring-2 transition-all resize-none ${
                    errors.message && touched.message
-                      ? 'border-red-400 focus:ring-red-400'
+                      ? "border-red-400 focus:ring-red-400"
-                      : 'border-white/60 focus:ring-liquid-blue focus:border-transparent'
+                      : "border-white/60 focus:ring-liquid-blue focus:border-transparent"
                  }`}
-                  placeholder="Tell me more about your project or question..."
+                  placeholder={tForm("placeholders.message")}
-                  aria-invalid={errors.message && touched.message ? 'true' : 'false'}
+                  aria-invalid={
-                  aria-describedby={errors.message && touched.message ? 'message-error' : undefined}
+                    errors.message && touched.message ? "true" : "false"
                  }
                  aria-describedby={
                    errors.message && touched.message
                      ? "message-error"
                      : undefined
                  }
                />
                <div className="flex justify-between items-center mt-1">
                  {errors.message && touched.message ? (
-                    <p id="message-error" className="text-sm text-red-500">{errors.message}</p>
+                    <p id="message-error" className="text-sm text-red-500">
                      {errors.message}
                    </p>
                  ) : (
                    <span></span>
                  )}
                  <span className="text-xs text-stone-400">
-                    {formData.message.length} characters
+                    {tForm("characters", { count: formData.message.length })}
                  </span>
                </div>
              </div>
@@ -328,17 +415,18 @@ const Contact = () => {
                disabled={isSubmitting}
                whileHover={!isSubmitting ? { scale: 1.02, y: -2 } : {}}
                whileTap={!isSubmitting ? { scale: 0.98 } : {}}
-                className="w-full py-4 text-lg font-semibold disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 disabled:hover:scale-100 disabled:hover:translate-y-0 bg-stone-900 text-white rounded-xl hover:bg-black transition-all shadow-lg"
+                transition={{ duration: 0.3, ease: "easeOut" }}
                className="w-full py-4 text-lg font-semibold disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 disabled:hover:scale-100 disabled:hover:translate-y-0 bg-stone-900 text-white rounded-xl hover:bg-stone-950 transition-all duration-500 ease-out shadow-lg hover:shadow-xl"
              >
                {isSubmitting ? (
                  <>
                    <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
-                    <span>Sending Message...</span>
+                    <span>{tForm("sending")}</span>
                  </>
                ) : (
                  <>
                    <Send size={20} />
-                    <span>Send Message</span>
+                    <span className="text-cream">{tForm("send")}</span>
                  </>
                )}
              </motion.button>
--- a/app/components/CurrentlyReading.tsx
+++ b/app/components/CurrentlyReading.tsx
@@ -0,0 +1,157 @@
 "use client";
 import { motion } from "framer-motion";
 import { BookOpen } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
 interface CurrentlyReading {
  title: string;
  authors: string[];
  image: string | null;
  progress: number;
  startedAt: string | null;
 }
 const CurrentlyReading = () => {
  const t = useTranslations("home.about.currentlyReading");
  const [books, setBooks] = useState<CurrentlyReading[]>([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    // Nur einmal beim Laden der Seite
    const fetchCurrentlyReading = async () => {
      try {
        const res = await fetch("/api/n8n/hardcover/currently-reading", {
          cache: "default",
        });
        if (!res.ok) {
          throw new Error("Failed to fetch");
        }
        const data = await res.json();
        // Handle both single book and array of books
        if (data.currentlyReading) {
          const booksArray = Array.isArray(data.currentlyReading) 
            ? data.currentlyReading 
            : [data.currentlyReading];
          setBooks(booksArray);
        } else {
          setBooks([]);
        }
      } catch (error) {
        if (process.env.NODE_ENV === "development") {
          console.error("Error fetching currently reading:", error);
        }
        setBooks([]);
      } finally {
        setLoading(false);
      }
    };
    fetchCurrentlyReading();
  }, []); // Leeres Array = nur einmal beim Mount
  // Zeige nichts wenn kein Buch gelesen wird oder noch geladen wird
  if (loading || books.length === 0) {
    return null;
  }
  return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center gap-2 mb-4">
        <BookOpen size={18} className="text-stone-600 flex-shrink-0" />
        <h3 className="text-lg font-bold text-stone-900">
          {t("title")} {books.length > 1 && `(${books.length})`}
        </h3>
      </div>
      {/* Books List */}
      {books.map((book, index) => (
        <motion.div
          key={`${book.title}-${index}`}
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-50px" }}
          transition={{ duration: 0.6, delay: index * 0.1, ease: [0.25, 0.1, 0.25, 1] }}
          whileHover={{
            scale: 1.02,
            transition: { duration: 0.4, ease: "easeOut" },
          }}
          className="relative overflow-hidden bg-gradient-to-br from-liquid-lavender/15 via-liquid-pink/10 to-liquid-rose/15 border-2 border-liquid-lavender/30 rounded-xl p-6 backdrop-blur-sm hover:border-liquid-lavender/50 hover:from-liquid-lavender/20 hover:via-liquid-pink/15 hover:to-liquid-rose/20 transition-all duration-500 ease-out"
        >
          {/* Background Blob Animation */}
          <motion.div
            className="absolute -top-10 -right-10 w-32 h-32 bg-gradient-to-br from-liquid-lavender/20 to-liquid-pink/20 rounded-full blur-2xl"
            animate={{
              scale: [1, 1.2, 1],
              opacity: [0.3, 0.5, 0.3],
            }}
            transition={{
              duration: 8,
              repeat: Infinity,
              ease: "easeInOut",
              delay: index * 0.5,
            }}
          />
          <div className="relative z-10 flex flex-col sm:flex-row gap-4 items-start">
            {/* Book Cover */}
            {book.image && (
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
                className="flex-shrink-0"
              >
                <div className="relative w-24 h-36 sm:w-28 sm:h-40 rounded-lg overflow-hidden shadow-lg border-2 border-white/50">
                  <img
                    src={book.image}
                    alt={book.title}
                    className="w-full h-full object-cover"
                    loading="lazy"
                  />
                  {/* Glossy Overlay */}
                  <div className="absolute inset-0 bg-gradient-to-tr from-white/20 via-transparent to-white/10 pointer-events-none" />
                </div>
              </motion.div>
            )}
            {/* Book Info */}
            <div className="flex-1 min-w-0">
              {/* Title */}
              <h4 className="text-lg font-bold text-stone-900 mb-1 line-clamp-2">
                {book.title}
              </h4>
              {/* Authors */}
              <p className="text-sm text-stone-600 mb-4 line-clamp-1">
                {book.authors.join(", ")}
              </p>
              {/* Progress Bar */}
              <div className="space-y-2">
                <div className="flex items-center justify-between text-xs text-stone-600">
                  <span>{t("progress")}</span>
                  <span className="font-semibold">{book.progress}%</span>
                </div>
                <div className="relative h-2 bg-white/50 rounded-full overflow-hidden border border-white/70">
                  <motion.div
                    initial={{ width: 0 }}
                    animate={{ width: `${book.progress}%` }}
                    transition={{ duration: 1, delay: 0.3 + index * 0.1, ease: "easeOut" }}
                    className="absolute left-0 top-0 h-full bg-gradient-to-r from-liquid-lavender via-liquid-pink to-liquid-rose rounded-full shadow-sm"
                  />
                </div>
              </div>
            </div>
          </div>
        </motion.div>
      ))}
    </div>
  );
 };
 export default CurrentlyReading;
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -1,39 +1,35 @@
 "use client";
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { Heart, Code } from 'lucide-react';
 import { SiGithub, SiLinkedin } from 'react-icons/si';
 import Link from 'next/link';
 import { useLocale, useTranslations } from "next-intl";
 import { useConsent } from "./ConsentProvider";
 const Footer = () => {
-  const [currentYear, setCurrentYear] = useState(2024);
+  const locale = useLocale();
-  const [mounted, setMounted] = useState(false);
+  const t = useTranslations("footer");
  const { resetConsent } = useConsent();
-  useEffect(() => {
+  const [currentYear] = useState(() => new Date().getFullYear());
    setCurrentYear(new Date().getFullYear());
    setMounted(true);
  }, []);
  const socialLinks = [
    { icon: SiGithub, href: 'https://github.com/Denshooter', label: 'GitHub' },
    { icon: SiLinkedin, href: 'https://linkedin.com/in/dkonkol', label: 'LinkedIn' }
  ];
  if (!mounted) {
    return null;
  }
  return (
    <footer className="relative py-12 px-4 bg-white border-t border-stone-200">
      <div className="max-w-7xl mx-auto">
        <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 }}
+            viewport={{ once: true, margin: "-50px" }}
-            transition={{ duration: 0.6 }}
+            transition={{ duration: 0.4 }}
            className="flex items-center space-x-3"
          >
            <motion.div
@@ -44,19 +40,19 @@ const Footer = () => {
              <Code className="w-6 h-6 text-stone-800" />
            </motion.div>
            <div>
-              <Link href="/" className="text-xl font-bold font-mono text-stone-800 hover:text-liquid-blue transition-colors">
+              <Link href={`/${locale}`} className="text-xl font-bold font-mono text-stone-800 hover:text-liquid-blue transition-colors">
                dk<span className="text-liquid-rose">0</span>
              </Link>
-              <p className="text-xs text-stone-500">Software Engineer</p>
+              <p className="text-xs text-stone-500">{t("role")}</p>
            </div>
          </motion.div>
          {/* Social Links */}
          <motion.div
-            initial={{ opacity: 0, y: 20 }}
+            initial={{ opacity: 0, y: 10 }}
            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
+            viewport={{ once: true, margin: "-50px" }}
-            transition={{ duration: 0.6, delay: 0.1 }}
+            transition={{ duration: 0.4, delay: 0.05 }}
            className="flex space-x-3"
          >
            {socialLinks.map((social) => (
@@ -77,10 +73,10 @@ const Footer = () => {
          {/* Copyright */}
          <motion.div
-            initial={{ opacity: 0, y: 20 }}
+            initial={{ opacity: 0, y: 10 }}
            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
+            viewport={{ once: true, margin: "-50px" }}
-            transition={{ duration: 0.6, delay: 0.2 }}
+            transition={{ duration: 0.4, delay: 0.1 }}
            className="flex items-center space-x-2 text-stone-400 text-sm"
          >
            <span>© {currentYear}</span>
@@ -90,35 +86,50 @@ const Footer = () => {
            >
              <Heart size={14} className="text-liquid-rose fill-liquid-rose" />
            </motion.div>
-            <span>Made in Germany</span>
+            <span>{t("madeIn")}</span>
          </motion.div>
        </div>
        {/* Legal Links */}
        <motion.div
-          initial={{ opacity: 0, y: 20 }}
+          initial={{ opacity: 0, y: 10 }}
          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
+          viewport={{ once: true, margin: "-50px" }}
-          transition={{ duration: 0.6, delay: 0.3 }}
+          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">
            <Link
-              href="/legal-notice"
+              href={`/${locale}/legal-notice`}
              className="text-stone-500 hover:text-stone-800 transition-colors duration-200"
            >
-              Impressum
+              {t("legalNotice")}
            </Link>
            <Link
-              href="/privacy-policy"
+              href={`/${locale}/privacy-policy`}
              className="text-stone-500 hover:text-stone-800 transition-colors duration-200"
            >
-              Privacy Policy
+              {t("privacyPolicy")}
            </Link>
            <button
              type="button"
              onClick={() => resetConsent()}
              className="text-stone-500 hover:text-stone-800 transition-colors duration-200"
              title={t("privacySettingsTitle")}
            >
              {t("privacySettings")}
            </button>
            <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">
-            <span>Built with</span>
+            <span>{t("builtWith")}</span>
            <span className="text-stone-600 font-semibold">Next.js</span>
            <span className="text-stone-300">•</span>
            <span className="text-stone-600 font-semibold">TypeScript</span>
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -1,71 +1,93 @@
 "use client";
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion, AnimatePresence } from "framer-motion";
-import { Menu, X, Mail } from 'lucide-react';
+import { Menu, X, Mail } from "lucide-react";
-import { SiGithub, SiLinkedin } from 'react-icons/si';
+import { SiGithub, SiLinkedin } from "react-icons/si";
-import Link from 'next/link';
+import Link from "next/link";
 import { useLocale, useTranslations } from "next-intl";
 import { usePathname, useSearchParams } from "next/navigation";
 const Header = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
-  const [mounted, setMounted] = useState(false);
+  const locale = useLocale();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const t = useTranslations("nav");
-  useEffect(() => {
+  const isHome = pathname === `/${locale}` || pathname === `/${locale}/`;
    setMounted(true);
  }, []);
  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
-    window.addEventListener('scroll', handleScroll);
+    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
  }, []);
  const navItems = [
-    { name: 'Home', href: '/' },
+    { name: t("home"), href: `/${locale}` },
-    { name: 'About', href: '#about' },
+    { name: t("about"), href: isHome ? "#about" : `/${locale}#about` },
-    { name: 'Projects', href: '#projects' },
+    { name: t("projects"), href: isHome ? "#projects" : `/${locale}/projects` },
-    { name: 'Contact', href: '#contact' },
+    { name: t("contact"), href: isHome ? "#contact" : `/${locale}#contact` },
  ];
  const socialLinks = [
-    { icon: SiGithub, href: 'https://github.com/Denshooter', label: 'GitHub' },
+    { icon: SiGithub, href: "https://github.com/Denshooter", label: "GitHub" },
-    { icon: SiLinkedin, href: 'https://linkedin.com/in/dkonkol', label: 'LinkedIn' },
+    {
-    { icon: Mail, href: 'mailto:contact@dk0.dev', label: 'Email' },
+      icon: SiLinkedin,
      href: "https://linkedin.com/in/dkonkol",
      label: "LinkedIn",
    },
    { icon: Mail, href: "mailto:contact@dk0.dev", label: "Email" },
  ];
-  if (!mounted) {
+  const pathWithoutLocale = pathname.replace(new RegExp(`^/${locale}`), "") || "";
-    return null;
+  const qs = searchParams.toString();
-  }
+  const query = qs ? `?${qs}` : "";
  const enHref = `/en${pathWithoutLocale}${query}`;
  const deHref = `/de${pathWithoutLocale}${query}`;
  // Always render to prevent flash, but use opacity transition
  return (
    <>
      <motion.header
-        initial={{ y: -100, opacity: 0 }}
+        initial={false}
        animate={{ y: 0, opacity: 1 }}
-        transition={{ duration: 0.8, ease: "easeOut" }}
+        transition={{ duration: 0.3, ease: "easeOut" }}
        className="fixed top-6 left-0 right-0 z-50 flex justify-center px-4 pointer-events-none"
      >
-        <div className={`pointer-events-auto transition-all duration-500 ease-out ${
+        <div
-            scrolled ? 'w-full max-w-5xl' : 'w-full max-w-7xl'
+          className={`pointer-events-auto transition-all duration-500 ease-out ${
-          }`}>
+            scrolled ? "w-full max-w-5xl" : "w-full max-w-7xl"
-          <div className={`
+          }`}
        >
          <motion.div
            initial={false}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.3, ease: "easeOut" }}
            className={`
            backdrop-blur-xl transition-all duration-500
-            ${scrolled 
+            ${
-              ? 'bg-white/95 border border-stone-300 shadow-[0_8px_30px_rgba(0,0,0,0.12)] rounded-full px-6 py-3' 
+              scrolled
-              : 'bg-white/85 border border-stone-200 shadow-[0_4px_24px_rgba(0,0,0,0.08)] px-4 py-4 rounded-full'
+                ? "bg-white/95 border border-stone-200/50 shadow-[0_8px_30px_rgba(0,0,0,0.12)] rounded-full px-6 py-3"
                : "bg-white/85 border border-stone-200/30 shadow-[0_4px_24px_rgba(0,0,0,0.08)] px-4 py-4 rounded-full"
            }
            flex justify-between items-center
-          `}>
+          `}
          >
            <motion.div
              whileHover={{ scale: 1.05 }}
              className="flex items-center space-x-2"
            >
-              <Link href="/" className="text-2xl font-bold font-mono text-stone-800 tracking-tighter liquid-hover">
+              <Link
-                dk<span className="text-liquid-rose">0</span>
+                href={`/${locale}`}
                className="text-2xl font-black font-sans text-stone-900 tracking-tighter liquid-hover flex items-center"
              >
                dk<span className="text-red-500">0</span>
              </Link>
            </motion.div>
@@ -80,23 +102,59 @@ const Header = () => {
                    href={item.href}
                    className="text-stone-600 hover:text-stone-900 transition-colors duration-200 font-medium relative group px-2 py-1 liquid-hover"
                    onClick={(e) => {
-                      if (item.href.startsWith('#')) {
+                      if (item.href.startsWith("#")) {
                        e.preventDefault();
                        const element = document.querySelector(item.href);
                        if (element) {
-                          element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                          element.scrollIntoView({
                            behavior: "smooth",
                            block: "start",
                          });
                        }
                      }
                    }}
                  >
                    {item.name}
-                    <span className="absolute -bottom-1 left-0 right-0 h-0.5 bg-gradient-to-r from-liquid-mint to-liquid-lavender transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-center rounded-full"></span>
+                    <motion.span 
                      className="absolute -bottom-1 left-0 right-0 h-0.5 bg-gradient-to-r from-liquid-mint to-liquid-lavender rounded-full"
                      initial={{ scaleX: 0, opacity: 0 }}
                      whileHover={{ scaleX: 1, opacity: 1 }}
                      transition={{ 
                        duration: 0.4, 
                        ease: [0.25, 0.1, 0.25, 1],
                      }}
                      style={{ transformOrigin: "left center" }}
                    />
                  </Link>
                </motion.div>
              ))}
            </nav>
            <div className="hidden md:flex items-center space-x-3">
              <div className="flex items-center bg-white/40 border border-white/50 rounded-full overflow-hidden shadow-sm">
                <Link
                  href={enHref}
                  className={`px-3 py-1.5 text-xs font-semibold transition-colors ${
                    locale === "en"
                      ? "bg-stone-900 text-stone-50"
                      : "text-stone-700 hover:bg-white/60"
                  }`}
                  aria-label="Switch language to English"
                >
                  EN
                </Link>
                <Link
                  href={deHref}
                  className={`px-3 py-1.5 text-xs font-semibold transition-colors ${
                    locale === "de"
                      ? "bg-stone-900 text-stone-50"
                      : "text-stone-700 hover:bg-white/60"
                  }`}
                  aria-label="Sprache auf Deutsch umstellen"
                >
                  DE
                </Link>
              </div>
              {socialLinks.map((social) => (
                <motion.a
                  key={social.label}
@@ -116,10 +174,11 @@ const Header = () => {
              whileTap={{ scale: 0.95 }}
              onClick={() => setIsOpen(!isOpen)}
              className="md:hidden p-2 rounded-full bg-white/40 hover:bg-white/60 text-stone-800 transition-colors liquid-hover"
              aria-label={isOpen ? "Close menu" : "Open menu"}
            >
              {isOpen ? <X size={24} /> : <Menu size={24} />}
            </motion.button>
-          </div>
+          </motion.div>
        </div>
        <AnimatePresence>
@@ -153,12 +212,15 @@ const Header = () => {
                        href={item.href}
                        onClick={(e) => {
                          setIsOpen(false);
-                          if (item.href.startsWith('#')) {
+                          if (item.href.startsWith("#")) {
                            e.preventDefault();
                            setTimeout(() => {
                              const element = document.querySelector(item.href);
                              if (element) {
-                                element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                                element.scrollIntoView({
                                  behavior: "smooth",
                                  block: "start",
                                });
                              }
                            }, 100);
                          }
@@ -169,7 +231,7 @@ const Header = () => {
                      </Link>
                    </motion.div>
                  ))}
-                  
+
                  <div className="pt-6 mt-4 border-t border-stone-200">
                    <div className="flex justify-center space-x-4">
                      {socialLinks.map((social, index) => (
@@ -180,7 +242,9 @@ const Header = () => {
                          rel="noopener noreferrer"
                          initial={{ scale: 0, opacity: 0 }}
                          animate={{ scale: 1, opacity: 1 }}
-                          transition={{ delay: (navItems.length + index) * 0.05 }}
+                          transition={{
                            delay: (navItems.length + index) * 0.05,
                          }}
                          whileHover={{ scale: 1.1 }}
                          className="p-3 rounded-full bg-white/60 text-stone-600 shadow-sm"
                          aria-label={social.label}
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -1,110 +1,159 @@
 "use client";
-import { useState, useEffect } from 'react';
+import { motion } from "framer-motion";
-import { motion } from 'framer-motion';
+import { ArrowDown, Code, Zap, Rocket } from "lucide-react";
-import { ArrowDown, Code, Zap, Rocket } from 'lucide-react';
+import { useEffect, useState } from "react";
-import Image from 'next/image';
+import { useLocale, useTranslations } from "next-intl";
-import { LiquidHeading } from '@/components/LiquidHeading';
+import type { JSONContent } from "@tiptap/react";
 import RichTextClient from "./RichTextClient";
 const Hero = () => {
-  const [mounted, setMounted] = useState(false);
+  const locale = useLocale();
  const t = useTranslations("home.hero");
  const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
  useEffect(() => {
-    setMounted(true);
+    (async () => {
-  }, []);
+      try {
        const res = await fetch(
          `/api/content/page?key=${encodeURIComponent("home-hero")}&locale=${encodeURIComponent(locale)}`,
        );
        const data = await res.json();
        // Only use CMS content if it exists for the active locale.
        // If the API falls back to another locale, keep showing next-intl strings
        // so the locale switch visibly changes the page.
        if (data?.content?.content && data?.content?.locale === locale) {
          setCmsDoc(data.content.content as JSONContent);
        } else {
          setCmsDoc(null);
        }
      } catch {
        // ignore; fallback to static
        setCmsDoc(null);
      }
    })();
  }, [locale]);
  const features = [
-    { icon: Code, text: 'Full-Stack Development' },
+    { icon: Code, text: t("features.f1") },
-    { icon: Zap, text: 'Modern Technologies' },
+    { icon: Zap, text: t("features.f2") },
-    { icon: Rocket, text: 'Innovative Solutions' },
+    { icon: Rocket, text: t("features.f3") },
  ];
  if (!mounted) {
    return null;
  }
  return (
-    <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20 pb-8 bg-transparent">
+    <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">
        {/* Domain Badge */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.5 }}
          className="mb-8 inline-block"
        >
          <div className="px-6 py-2 rounded-full glass-panel text-stone-600 font-mono text-sm tracking-wider uppercase">
            dk<span className="text-liquid-rose font-bold">0</span>.dev
          </div>
        </motion.div>
        {/* Profile Image with Organic Blob Mask */}
        <motion.div
-          initial={{ opacity: 0, scale: 0.8 }}
+          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 1, delay: 0.7, ease: "easeOut" }}
+          transition={{ duration: 0.6, delay: 0.1, ease: [0.25, 0.1, 0.25, 1] }}
-          className="mb-10 flex justify-center relative z-20"
+          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">
-             {/* Large Rotating Liquid Blobs behind image */}
+            {/* Large Rotating Liquid Blobs behind image - Very slow and smooth */}
            <motion.div 
               className="absolute w-[140%] h-[140%] bg-gradient-to-tr from-liquid-mint via-liquid-blue to-liquid-lavender opacity-60 blur-3xl -z-10"
               animate={{ 
                   borderRadius: ["60% 40% 30% 70%/60% 30% 70% 40%", "30% 60% 70% 40%/50% 60% 30% 60%", "60% 40% 30% 70%/60% 30% 70% 40%"],
                   rotate: [0, 180, 360],
                   scale: [1, 1.1, 1]
               }}
               transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
            />
             <motion.div 
               className="absolute w-[120%] h-[120%] bg-gradient-to-bl from-liquid-rose via-purple-200 to-liquid-mint opacity-40 blur-2xl -z-10"
               animate={{ 
                   borderRadius: ["40% 60% 70% 30%/40% 50% 60% 50%", "60% 30% 40% 70%/60% 40% 70% 30%", "40% 60% 70% 30%/40% 50% 60% 50%"],
                   rotate: [360, 180, 0],
                   scale: [1, 0.9, 1]
               }}
               transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
            />
            {/* The Image Container with Organic Border Radius - No hard border, just shadow and glass */}
            <motion.div
-                className="absolute inset-0 overflow-hidden shadow-2xl bg-stone-100"
+              className="absolute w-[150%] h-[150%] bg-gradient-to-tr from-liquid-mint/40 via-liquid-blue/30 to-liquid-lavender/40 blur-3xl -z-10"
-                style={{ filter: "drop-shadow(0 20px 40px rgba(0,0,0,0.15))" }}
+              animate={{
-                animate={{
+                borderRadius: [
-                    borderRadius: ["60% 40% 30% 70%/60% 30% 70% 40%", "30% 60% 70% 40%/50% 60% 30% 60%", "60% 40% 30% 70%/60% 30% 70% 40%"]
+                  "60% 40% 30% 70%/60% 30% 70% 40%",
-                }}
+                  "30% 60% 70% 40%/50% 60% 30% 60%",
-                transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
+                  "60% 40% 30% 70%/60% 30% 70% 40%",
                ],
                rotate: [0, 120, 0],
                scale: [1, 1.08, 1],
              }}
              transition={{
                duration: 35,
                repeat: Infinity,
                ease: "easeInOut",
                repeatType: "reverse",
              }}
            />
            <motion.div
              className="absolute w-[130%] h-[130%] bg-gradient-to-bl from-liquid-rose/35 via-purple-200/25 to-liquid-mint/35 blur-2xl -z-10"
              animate={{
                borderRadius: [
                  "40% 60% 70% 30%/40% 50% 60% 50%",
                  "60% 30% 40% 70%/60% 40% 70% 30%",
                  "40% 60% 70% 30%/40% 50% 60% 50%",
                ],
                rotate: [0, -90, 0],
                scale: [1, 1.05, 1],
              }}
              transition={{
                duration: 40,
                repeat: Infinity,
                ease: "easeInOut",
                repeatType: "reverse",
              }}
            />
            {/* The Image Container with Organic Border Radius */}
            <motion.div
              className="absolute inset-0 overflow-hidden bg-stone-100"
              style={{
                filter: "drop-shadow(0 20px 40px rgba(0,0,0,0.1))",
                willChange: "border-radius",
              }}
              animate={{
                borderRadius: [
                  "60% 40% 30% 70%/60% 30% 70% 40%",
                  "30% 60% 70% 40%/50% 60% 30% 60%",
                  "60% 40% 30% 70%/60% 30% 70% 40%",
                ],
              }}
              transition={{
                duration: 12,
                repeat: Infinity,
                ease: "easeInOut",
                repeatType: "reverse",
              }}
            >
-                <Image
+              {/* Use a plain <img> to fully bypass Next.js image optimizer (dev 400 issue). */}
-                  src="/images/me.jpg"
+              <img
-                  alt="Dennis Konkol"
+                src="/images/me.jpg"
-                  fill
+                alt="Dennis Konkol"
-                  className="object-cover scale-105 hover:scale-110 transition-transform duration-700"
+                className="absolute inset-0 w-full h-full object-cover scale-105 hover:scale-[1.08] transition-transform duration-1000 ease-out"
-                  priority
+                loading="eager"
-                />
+                decoding="async"
-                
+              />
-                {/* Glossy Overlay for Liquid Feel */}
+
-                <div className="absolute inset-0 bg-gradient-to-tr from-white/30 via-transparent to-transparent opacity-50 pointer-events-none z-10" />
+              {/* Glossy Overlay for Liquid Feel */}
-                
+              <div className="absolute inset-0 bg-gradient-to-tr from-white/25 via-transparent to-white/10 opacity-60 pointer-events-none z-10" />
-                {/* Inner Border/Highlight */}
+
-                <div className="absolute inset-0 border-[3px] border-white/20 rounded-[inherit] pointer-events-none z-20" />
+              {/* Inner Border/Highlight */}
              <div className="absolute inset-0 border-[2px] border-white/30 rounded-[inherit] pointer-events-none z-20" />
            </motion.div>
-            
+
-            {/* Floating Badges */}
+            {/* Domain Badge - repositioned below image */}
            <motion.div
-              initial={{ scale: 0 }}
+              initial={{ opacity: 0, y: 20 }}
-              animate={{ scale: 1 }}
+              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 1.5, type: "spring" }}
+              transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }}
-              className="absolute -top-4 right-0 md:-right-4 p-3 bg-white/90 backdrop-blur-md shadow-lg rounded-full text-stone-700 z-30"
+              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-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>
            {/* Floating Badges - subtle animations */}
            <motion.div
              initial={{ scale: 0, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              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"
            >
              <Code size={24} />
            </motion.div>
-             <motion.div
+            <motion.div
-              initial={{ scale: 0 }}
+              initial={{ scale: 0, opacity: 0 }}
-              animate={{ scale: 1 }}
+              animate={{ scale: 1, opacity: 1 }}
-              transition={{ delay: 1.7, type: "spring" }}
+              transition={{ delay: 0.5, duration: 0.5, ease: "easeOut" }}
-              className="absolute bottom-4 -left-4 md:-left-8 p-3 bg-white/90 backdrop-blur-md shadow-lg rounded-full text-stone-700 z-30"
+              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"
            >
              <Zap size={24} />
            </motion.div>
@@ -112,76 +161,88 @@ const Hero = () => {
        </motion.div>
        {/* Main Title */}
-        <div className="mb-6 flex flex-col items-center justify-center relative">
+        <motion.div
-            <LiquidHeading 
+          initial={{ opacity: 0, y: 20 }}
-              text="Dennis Konkol" 
+          animate={{ opacity: 1, y: 0 }}
-              level={1} 
+          transition={{ duration: 0.6, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
-              className="text-5xl md:text-8xl font-bold tracking-tighter text-stone-800"
+          className="mb-8 flex flex-col items-center justify-center relative"
-            />
+        >
-            <LiquidHeading 
+          <h1 className="text-5xl md:text-8xl font-bold tracking-tighter text-stone-900 mb-2">
-              text="Software Engineer" 
+            Dennis Konkol
-              level={2} 
+          </h1>
-              className="text-2xl md:text-4xl font-light tracking-wide text-stone-500 mt-2"
+          <h2 className="text-2xl md:text-4xl font-light tracking-wide text-stone-600 mt-2">
-            />
+            Software Engineer
-        </div>
+          </h2>
-
+        </motion.div>
        {/* Description */}
-        <motion.p
+        <motion.div
-          initial={{ opacity: 0, y: 30 }}
+          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 1.2 }}
+          transition={{ duration: 0.6, delay: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
-          className="text-lg md:text-xl text-stone-600 mb-12 max-w-2xl mx-auto leading-relaxed"
+          className="text-lg md:text-xl text-stone-700 mb-12 max-w-2xl mx-auto leading-relaxed"
        >
-          I craft digital experiences with a focus on <span className="text-stone-900 font-semibold decoration-liquid-mint decoration-2 underline underline-offset-2">design</span>, <span className="text-stone-900 font-semibold decoration-liquid-lavender decoration-2 underline underline-offset-2">performance</span>, and <span className="text-stone-900 font-semibold decoration-liquid-rose decoration-2 underline underline-offset-2">user experience</span>.
+          {cmsDoc ? (
-        </motion.p>
+            <RichTextClient doc={cmsDoc} className="prose prose-stone max-w-none" />
          ) : (
            <p>{t("description")}</p>
          )}
        </motion.div>
        {/* Features */}
        <motion.div
-          initial={{ opacity: 0, y: 30 }}
+          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 1.4 }}
+          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) => (
            <motion.div
              key={feature.text}
-              initial={{ opacity: 0, scale: 0.8 }}
+              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
-              transition={{ duration: 0.5, delay: 1.6 + index * 0.1 }}
+              transition={{
-              whileHover={{ scale: 1.05, y: -2 }}
+                duration: 0.5,
-              className="flex items-center space-x-2 px-5 py-2.5 rounded-full bg-white/60 border border-white/80 shadow-sm backdrop-blur-sm liquid-hover"
+                delay: 0.5 + index * 0.1,
                ease: [0.25, 0.1, 0.25, 1],
              }}
              whileHover={{ scale: 1.03, y: -3 }}
              className="flex items-center space-x-2 px-5 py-2.5 rounded-full bg-white/70 border border-white/90 shadow-sm backdrop-blur-sm"
            >
              <feature.icon className="w-4 h-4 text-stone-700" />
-              <span className="text-stone-700 font-medium text-sm">{feature.text}</span>
+              <span className="text-stone-700 font-medium text-sm">
                {feature.text}
              </span>
            </motion.div>
          ))}
        </motion.div>
        {/* CTA Buttons */}
        <motion.div
-          initial={{ opacity: 0, y: 30 }}
+          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 1.8 }}
+          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
            href="#projects"
-            whileHover={{ scale: 1.05 }}
+            whileHover={{ scale: 1.03, y: -2 }}
-            whileTap={{ scale: 0.95 }}
+            whileTap={{ scale: 0.98 }}
-            className="px-8 py-4 bg-stone-900 text-cream rounded-full font-medium shadow-lg hover:shadow-xl hover:bg-black transition-all flex items-center gap-2 liquid-hover"
+            transition={{ duration: 0.3, ease: "easeOut" }}
            className="px-8 py-4 bg-stone-900 text-cream rounded-full shadow-lg hover:shadow-xl hover:bg-stone-950 transition-all duration-500 flex items-center gap-2"
          >
-            <span>View My Work</span>
+            <span className="text-cream">{t("ctaWork")}</span>
            <ArrowDown size={18} />
          </motion.a>
-          
+
          <motion.a
            href="#contact"
-            whileHover={{ scale: 1.05 }}
+            whileHover={{ scale: 1.03, y: -2 }}
-            whileTap={{ scale: 0.95 }}
+            whileTap={{ scale: 0.98 }}
-            className="px-8 py-4 bg-white text-stone-900 border border-stone-200 rounded-full font-medium shadow-sm hover:shadow-md transition-all liquid-hover"
+            transition={{ duration: 0.3, ease: "easeOut" }}
            className="px-8 py-4 bg-white text-stone-900 border border-stone-200 rounded-full font-medium shadow-sm hover:shadow-md transition-all duration-500"
          >
-            <span>Contact Me</span>
+            <span>{t("ctaContact")}</span>
          </motion.a>
        </motion.div>
      </div>
--- a/app/components/KernelPanic404.tsx
+++ b/app/components/KernelPanic404.tsx
--- a/app/components/KernelPanic404Wrapper.tsx
+++ b/app/components/KernelPanic404Wrapper.tsx
@@ -0,0 +1,40 @@
 "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"
    />
  );
 }
--- a/app/components/Projects.tsx
+++ b/app/components/Projects.tsx
@@ -1,14 +1,38 @@
 "use client";
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
-import { motion } from 'framer-motion';
+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 Link from "next/link";
-import { LiquidHeading } from '@/components/LiquidHeading';
+import Image from "next/image";
-import Image from 'next/image';
+import { useLocale, useTranslations } from "next-intl";
 const fadeInUp: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.5,
      ease: [0.25, 0.1, 0.25, 1],
    },
  },
 };
 const staggerContainer: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.2,
      delayChildren: 0.1,
    },
  },
 };
 interface Project {
  id: number;
  slug: string;
  title: string;
  description: string;
  content: string;
@@ -22,135 +46,219 @@ interface Project {
 }
 const Projects = () => {
  const [mounted, setMounted] = useState(false);
  const [projects, setProjects] = useState<Project[]>([]);
  const locale = useLocale();
  const t = useTranslations("home.projects");
  useEffect(() => {
    setMounted(true);
    const loadProjects = async () => {
      try {
-        const response = await fetch('/api/projects?featured=true&published=true&limit=6');
+        const response = await fetch(
          "/api/projects?featured=true&published=true&limit=6",
        );
        if (response.ok) {
          const data = await response.json();
          setProjects(data.projects || []);
        }
-      } catch (error) {
+        } catch (error) {
-        console.error('Error loading projects:', error);
+        if (process.env.NODE_ENV === "development") {
          console.error("Error loading projects:", error);
        }
      }
    };
    loadProjects();
  }, []);
  if (!mounted) return null;
  return (
-    <section id="projects" className="py-24 px-4 relative bg-stone-50/50">
+    <section
      id="projects"
      className="py-24 px-4 relative bg-gradient-to-br from-liquid-peach/15 via-liquid-yellow/10 to-liquid-coral/15 overflow-hidden"
    >
      <div className="max-w-7xl mx-auto">
-        <div className="text-center mb-20">
+        <motion.div
-          <LiquidHeading 
+          initial="hidden"
-            text="Selected Works" 
+          whileInView="visible"
-            level={2} 
+          viewport={{ once: true, margin: "-50px" }}
-            className="text-4xl md:text-6xl font-bold mb-6 text-stone-900"
+          variants={fadeInUp}
-          />
+          className="text-center mb-20"
-          <p className="text-lg text-stone-500 max-w-2xl mx-auto mt-4 font-light">
+        >
-            A collection of projects I&apos;ve worked on, ranging from web applications to experiments.
+          <h2 className="text-4xl md:text-6xl font-bold mb-6 text-stone-900">
            {t("title")}
          </h2>
          <p className="text-lg text-stone-600 max-w-2xl mx-auto mt-4 font-light">
            {t("subtitle")}
          </p>
-        </div>
+        </motion.div>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <motion.div
-          {projects.map((project, index) => (
+          initial="hidden"
          whileInView="visible"
          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) => (
            <motion.div
              key={project.id}
-              initial={{ opacity: 0, y: 20 }}
+              variants={fadeInUp}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              whileHover={{ y: -8 }}
-              className="group relative flex flex-col bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-stone-100"
+              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-[box-shadow,border-color,background-color] duration-500"
            >
-              {/* Project Cover / Header */}
+              {/* Project Cover / Image Area */}
-              <div className="relative aspect-[4/3] overflow-hidden bg-stone-100">
+              <div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
                {project.imageUrl ? (
-                   <Image 
+                  <>
-                     src={project.imageUrl} 
+                    <Image
-                     alt={project.title} 
+                      src={project.imageUrl}
-                     fill 
+                      alt={project.title}
-                     className="object-cover transition-transform duration-500 group-hover:scale-105"
+                      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">
+                  <div className="absolute inset-0 bg-stone-200 flex items-center justify-center overflow-hidden">
-                     <div className="w-full h-full border-2 border-dashed border-stone-300 rounded-xl flex items-center justify-center">
+                    <div className="absolute inset-0 bg-gradient-to-br from-stone-300 via-stone-200 to-stone-300" />
-                        <Layers className="text-stone-300 w-12 h-12" />
+                    <div className="absolute top-[-20%] left-[-10%] w-[70%] h-[70%] bg-white/20 rounded-full blur-3xl animate-pulse" />
-                     </div>
+                    <div className="absolute bottom-[-10%] right-[-5%] w-[60%] h-[60%] bg-stone-400/10 rounded-full blur-2xl" />
-                     <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 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">
                      {t("featured")}
                    </div>
                  </div>
                )}
                {/* Overlay Links */}
-                <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center gap-4 backdrop-blur-[2px]">
+                <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 && (
+                  {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-transform" aria-label="GitHub">
+                    <a
-                       <Github size={20} />
+                      href={project.github}
-                     </a>
+                      target="_blank"
-                   )}
+                      rel="noopener noreferrer"
-                   {project.live && (
+                      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"
-                     <a href={project.live} target="_blank" rel="noopener noreferrer" className="p-3 bg-white rounded-full text-stone-900 hover:scale-110 transition-transform" aria-label="Live Demo">
+                      aria-label="GitHub"
-                       <ExternalLink size={20} />
+                      onClick={(e) => e.stopPropagation()}
-                     </a>
+                    >
-                   )}
+                      <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>
              {/* Content */}
-              <div className="flex flex-col flex-1 p-6">
+              <div className="p-6 flex flex-col flex-1">
-                <div className="flex justify-between items-start mb-3">
+                {/* Stretched Link covering the whole card (including image area) */}
                <Link
                  href={`/${locale}/projects/${project.slug}`}
                  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">
+                  <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">
-                    {new Date(project.date).getFullYear()}
+                    <Calendar size={12} />
-                  </span>
+                    <span>{new Date(project.date).getFullYear()}</span>
                  </div>
                </div>
-                <p className="text-stone-600 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 mb-6">
-                  <div className="flex flex-wrap gap-2">
+                  {project.tags.slice(0, 4).map((tag) => (
-                    {project.tags.slice(0, 3).map(tag => (
+                    <span
-                      <span key={tag} className="text-xs px-2.5 py-1 bg-stone-50 border border-stone-100 rounded-md text-stone-500 font-medium">
+                      key={tag}
-                        {tag}
+                      className="px-2.5 py-1 bg-white/60 border border-stone-100 text-stone-600 text-xs font-medium rounded-md"
-                      </span>
+                    >
-                    ))}
+                      {tag}
-                    {project.tags.length > 3 && (
+                    </span>
-                      <span className="text-xs px-2 py-1 text-stone-400">+ {project.tags.length - 3}</span>
+                  ))}
-                    )}
+                  {project.tags.length > 4 && (
-                  </div>
+                    <span className="px-2 py-1 text-stone-400 text-xs">+ {project.tags.length - 4}</span>
-                  
+                  )}
-                  <Link 
+                </div>
-                    href={`/projects/${project.title.toLowerCase().replace(/\s+/g, '-')}`}
+
-                    className="inline-flex items-center text-sm font-semibold text-stone-900 hover:gap-2 transition-all group/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">
-                    Read more <ArrowRight size={16} className="ml-1 transition-transform group-hover/link:translate-x-1" />
+                      {project.github && (
-                  </Link>
+                        <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>
+        </motion.div>
-        <div className="mt-16 text-center">
+        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8, delay: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
          className="mt-16 text-center"
        >
          <Link
-            href="/projects"
+            href={`/${locale}/projects`}
-            className="inline-flex items-center gap-2 px-6 py-3 bg-white border border-stone-200 rounded-full text-stone-600 font-medium hover:bg-stone-50 hover:border-stone-300 transition-all shadow-sm"
+            className="inline-flex items-center gap-2 px-8 py-4 bg-white border border-stone-200 rounded-full text-stone-700 font-medium hover:bg-stone-50 hover:border-stone-300 hover:gap-3 transition-all duration-500 ease-out shadow-sm hover:shadow-md"
          >
-            Archive <ArrowRight size={16} />
+            {t("viewAll")} <ArrowRight size={16} />
          </Link>
-        </div>
+        </motion.div>
      </div>
    </section>
  );
 };
-export default Projects;
+export default Projects;
--- a/app/components/RichText.tsx
+++ b/app/components/RichText.tsx
@@ -0,0 +1,21 @@
 import React from "react";
 import type { JSONContent } from "@tiptap/react";
 import { richTextToSafeHtml } from "@/lib/richtext";
 export default function RichText({
  doc,
  className,
 }: {
  doc: JSONContent;
  className?: string;
 }) {
  const html = richTextToSafeHtml(doc);
  return (
    <div
      className={className}
      // HTML is sanitized in `richTextToSafeHtml`
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
 }
--- a/app/components/RichTextClient.tsx
+++ b/app/components/RichTextClient.tsx
@@ -0,0 +1,24 @@
 "use client";
 import React, { useMemo } from "react";
 import type { JSONContent } from "@tiptap/react";
 import { richTextToSafeHtml } from "@/lib/richtext";
 export default function RichTextClient({
  doc,
  className,
 }: {
  doc: JSONContent;
  className?: string;
 }) {
  const html = useMemo(() => richTextToSafeHtml(doc), [doc]);
  return (
    <div
      className={className}
      // HTML is sanitized in `richTextToSafeHtml`
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
 }
--- a/app/components/RootProviders.tsx
+++ b/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>
  );
 }
--- a/app/components/admin/AIImageGenerator.tsx
+++ b/app/components/admin/AIImageGenerator.tsx
@@ -0,0 +1,242 @@
 "use client";
 import { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import {
  Sparkles,
  Loader2,
  Image as ImageIcon,
  RefreshCw,
  CheckCircle,
  XCircle,
 } from "lucide-react";
 import Image from "next/image";
 interface AIImageGeneratorProps {
  projectId: number;
  projectTitle: string;
  currentImageUrl?: string | null;
  onImageGenerated?: (imageUrl: string) => void;
 }
 export default function AIImageGenerator({
  projectId,
  projectTitle,
  currentImageUrl,
  onImageGenerated,
 }: AIImageGeneratorProps) {
  const [isGenerating, setIsGenerating] = useState(false);
  const [status, setStatus] = useState<"idle" | "success" | "error">("idle");
  const [message, setMessage] = useState("");
  const [generatedImageUrl, setGeneratedImageUrl] = useState(
    currentImageUrl || null,
  );
  const [showPreview, setShowPreview] = useState(false);
  const handleGenerate = async (regenerate: boolean = false) => {
    setIsGenerating(true);
    setStatus("idle");
    setMessage("Generating AI image...");
    try {
      const response = await fetch("/api/n8n/generate-image", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          projectId: projectId,
          regenerate: regenerate,
        }),
      });
      const data = await response.json();
      if (response.ok && data.success) {
        setStatus("success");
        setMessage(data.message || "Image generated successfully!");
        setGeneratedImageUrl(data.imageUrl);
        setShowPreview(true);
        if (onImageGenerated) {
          onImageGenerated(data.imageUrl);
        }
      } else {
        setStatus("error");
        setMessage(data.error || data.message || "Failed to generate image");
      }
    } catch (error) {
      setStatus("error");
      setMessage(
        error instanceof Error ? error.message : "An unexpected error occurred",
      );
    } finally {
      setIsGenerating(false);
    }
  };
  return (
    <div className="bg-white rounded-2xl border-2 border-stone-200 p-6 shadow-sm">
      <div className="flex items-center gap-3 mb-4">
        <div className="p-2 bg-gradient-to-br from-purple-100 to-pink-100 rounded-lg">
          <Sparkles className="text-purple-600" size={20} />
        </div>
        <div>
          <h3 className="font-bold text-stone-900">AI Image Generator</h3>
          <p className="text-sm text-stone-600">
            Generate cover image for:{" "}
            <span className="font-semibold">{projectTitle}</span>
          </p>
        </div>
      </div>
      {/* Current/Generated Image Preview */}
      <AnimatePresence mode="wait">
        {(generatedImageUrl || showPreview) && (
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.3 }}
            className="mb-4 relative group"
          >
            <div className="aspect-[4/3] rounded-xl overflow-hidden border-2 border-stone-200 bg-stone-50">
              {generatedImageUrl ? (
                <Image
                  src={generatedImageUrl}
                  alt={projectTitle}
                  fill
                  className="object-cover"
                />
              ) : (
                <div className="w-full h-full flex items-center justify-center">
                  <ImageIcon className="text-stone-300" size={48} />
                </div>
              )}
            </div>
            {generatedImageUrl && (
              <div className="absolute top-2 right-2 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-full text-xs font-medium text-stone-700 border border-stone-200">
                Current Image
              </div>
            )}
          </motion.div>
        )}
      </AnimatePresence>
      {/* Status Message */}
      <AnimatePresence mode="wait">
        {message && (
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.95 }}
            transition={{ duration: 0.2 }}
            className={`mb-4 p-3 rounded-xl border-2 flex items-center gap-2 ${
              status === "success"
                ? "bg-green-50 border-green-200 text-green-800"
                : status === "error"
                  ? "bg-red-50 border-red-200 text-red-800"
                  : "bg-blue-50 border-blue-200 text-blue-800"
            }`}
          >
            {status === "success" && <CheckCircle size={18} />}
            {status === "error" && <XCircle size={18} />}
            {status === "idle" && isGenerating && (
              <Loader2 size={18} className="animate-spin" />
            )}
            <span className="text-sm font-medium">{message}</span>
          </motion.div>
        )}
      </AnimatePresence>
      {/* Action Buttons */}
      <div className="flex gap-3">
        <motion.button
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
          onClick={() => handleGenerate(false)}
          disabled={isGenerating || !!generatedImageUrl}
          className={`flex-1 py-3 px-4 rounded-xl font-semibold text-white transition-all duration-300 flex items-center justify-center gap-2 ${
            isGenerating
              ? "bg-stone-400 cursor-not-allowed"
              : generatedImageUrl
                ? "bg-stone-300 cursor-not-allowed"
                : "bg-gradient-to-br from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 shadow-lg hover:shadow-xl"
          }`}
        >
          {isGenerating ? (
            <>
              <Loader2 size={18} className="animate-spin" />
              Generating...
            </>
          ) : (
            <>
              <Sparkles size={18} />
              Generate Image
            </>
          )}
        </motion.button>
        {generatedImageUrl && (
          <motion.button
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
            onClick={() => handleGenerate(true)}
            disabled={isGenerating}
            className={`py-3 px-4 rounded-xl font-semibold transition-all duration-300 flex items-center justify-center gap-2 border-2 ${
              isGenerating
                ? "bg-stone-100 border-stone-300 text-stone-400 cursor-not-allowed"
                : "bg-white border-purple-300 text-purple-700 hover:bg-purple-50 hover:border-purple-400"
            }`}
          >
            <RefreshCw size={18} />
            Regenerate
          </motion.button>
        )}
      </div>
      {/* Info Box */}
      <div className="mt-4 p-3 bg-gradient-to-br from-blue-50 to-purple-50 border border-blue-200 rounded-lg">
        <p className="text-xs text-stone-700 leading-relaxed">
          <span className="font-semibold">💡 How it works:</span> The AI
          analyzes your project&aposs title, description, category, and tech
          stack to create a unique cover image using Stable Diffusion.
          Generation takes 15-30 seconds.
        </p>
      </div>
      {/* Advanced Options (Optional) */}
      <details className="mt-4">
        <summary className="cursor-pointer text-sm font-semibold text-stone-700 hover:text-stone-900 transition-colors">
          Advanced Options
        </summary>
        <div className="mt-3 space-y-3 pl-4 border-l-2 border-stone-200">
          <div className="text-xs text-stone-600 space-y-1">
            <p>
              <strong>Image Size:</strong> 1024x768 (4:3 aspect ratio)
            </p>
            <p>
              <strong>Quality:</strong> High (30 steps, CFG 7)
            </p>
            <p>
              <strong>Sampler:</strong> DPM++ 2M Karras
            </p>
            <p>
              <strong>Model:</strong> SDXL Base / Category-specific
            </p>
          </div>
          <button
            onClick={() =>
              window.open("/docs/ai-image-generation/SETUP.md", "_blank")
            }
            className="text-xs text-purple-600 hover:text-purple-700 font-medium underline"
          >
            View Full Documentation →
          </button>
        </div>
      </details>
    </div>
  );
 }
--- a/app/editor/page.tsx
+++ b/app/editor/page.tsx
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -0,0 +1,27 @@
 "use client";
 import { useEffect } from "react";
 export default function Error({
  error,
  reset,
 }: {
  error: Error & { digest?: string };
  reset: () => void;
 }) {
  useEffect(() => {
    console.error(error);
  }, [error]);
  return (
    <div className="flex flex-col items-center justify-center min-h-[50vh] gap-4">
      <h2 className="text-xl font-bold">Something went wrong!</h2>
      <button
        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
        onClick={() => reset()}
      >
        Try again
      </button>
    </div>
  );
 }
--- a/app/global-error.tsx
+++ b/app/global-error.tsx
@@ -0,0 +1,45 @@
 "use client";
 import { useEffect } from "react";
 export default function GlobalError({
  error,
  reset,
 }: {
  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 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>
  );
 }
--- a/app/globals.css
+++ b/app/globals.css
@@ -2,152 +2,214 @@
@tailwind components;
@tailwind utilities;
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
 :root {
-  /* Organic Modern Palette */
+    /* Organic Modern Palette */
-  --background: #FDFCF8; /* Cream */
+    --background: #fdfcf8; /* Cream */
-  --foreground: #292524; /* Warm Grey */
+    --foreground: #292524; /* Warm Grey */
-  --card: rgba(255, 255, 255, 0.6);
+    --card: rgba(255, 255, 255, 0.6);
-  --card-foreground: #292524;
+    --card-foreground: #292524;
-  --popover: #FFFFFF;
+    --popover: #ffffff;
-  --popover-foreground: #292524;
+    --popover-foreground: #292524;
-  --primary: #292524;
+    --primary: #292524;
-  --primary-foreground: #FDFCF8;
+    --primary-foreground: #fdfcf8;
-  --secondary: #E7E5E4;
+    --secondary: #e7e5e4;
-  --secondary-foreground: #292524;
+    --secondary-foreground: #292524;
-  --muted: #F5F5F4;
+    --muted: #f5f5f4;
-  --muted-foreground: #78716C;
+    --muted-foreground: #78716c;
-  --accent: #F3F1E7; /* Sand */
+    --accent: #f3f1e7; /* Sand */
-  --accent-foreground: #292524;
+    --accent-foreground: #292524;
-  --destructive: #EF4444;
+    --destructive: #ef4444;
-  --destructive-foreground: #FDFCF8;
+    --destructive-foreground: #fdfcf8;
-  --border: #E7E5E4;
+    --border: #e7e5e4;
-  --input: #E7E5E4;
+    --input: #e7e5e4;
-  --ring: #A7F3D0; /* Mint ring */
+    --ring: #a7f3d0; /* Mint ring */
-  --radius: 1rem;
+    --radius: 1rem;
 }
 body {
-  background-color: var(--background);
+    background-color: var(--background);
-  color: var(--foreground);
+    color: var(--foreground);
-  font-family: 'Inter', sans-serif;
+    font-family: "Inter", sans-serif;
-  margin: 0;
+    margin: 0;
-  padding: 0;
+    padding: 0;
-  overflow-x: hidden;
+    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
 }
 /* Custom Selection */
 ::selection {
-  background: #A7F3D0; /* Mint */
+    background: #a7f3d0; /* Mint */
-  color: #292524;
+    color: #292524;
 }
 /* Smooth Scrolling */
 html {
-  scroll-behavior: smooth;
+    scroll-behavior: smooth;
 }
 /* Liquid Glass Effects */
 .glass-panel {
-  background: rgba(255, 255, 255, 0.3);
+    background: rgba(255, 255, 255, 0.4);
-  backdrop-filter: blur(12px) saturate(120%);
+    backdrop-filter: blur(12px) saturate(120%);
-  -webkit-backdrop-filter: blur(12px) saturate(120%);
+    -webkit-backdrop-filter: blur(12px) saturate(120%);
-  border: 1px solid rgba(255, 255, 255, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.7);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    will-change: backdrop-filter;
 }
 .glass-card {
-  background: rgba(255, 255, 255, 0.65);
+    background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(24px) saturate(180%);
+    backdrop-filter: blur(24px) saturate(180%);
-  -webkit-backdrop-filter: blur(24px) saturate(180%);
+    -webkit-backdrop-filter: blur(24px) saturate(180%);
-  border: 1px solid rgba(255, 255, 255, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.85);
-  box-shadow: 
+    box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.02),
+        0 4px 6px -1px rgba(0, 0, 0, 0.03),
-    0 2px 4px -1px rgba(0, 0, 0, 0.02),
+        0 2px 4px -1px rgba(0, 0, 0, 0.02),
-    inset 0 0 20px rgba(255, 255, 255, 0.5);
+        inset 0 0 20px rgba(255, 255, 255, 0.5);
-  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+    transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform, box-shadow;
 }
 .glass-card:hover {
-  background: rgba(255, 255, 255, 0.75);
+    background: rgba(255, 255, 255, 0.8);
-  box-shadow: 
+    box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.05),
+        0 20px 25px -5px rgba(0, 0, 0, 0.08),
-    0 10px 10px -5px rgba(0, 0, 0, 0.01),
+        0 10px 10px -5px rgba(0, 0, 0, 0.02),
-    inset 0 0 20px rgba(255, 255, 255, 0.8);
+        inset 0 0 20px rgba(255, 255, 255, 0.8);
-  transform: translateY(-4px) scale(1.005);
+    transform: translateY(-4px);
-  border-color: #ffffff;
+    border-color: #ffffff;
 }
 /* Typography & Headings */
-h1, h2, h3, h4, h5, h6 {
+h1,
-  letter-spacing: -0.02em;
+h2,
 h3,
 h4,
 h5,
 h6 {
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #292524;
 }
-/* Utility for the liquid melt effect container */
+/* Improve text contrast */
-.liquid-container {
+p,
-  filter: url('#goo');
+span,
 div {
    color: #44403c;
 }
 /* Hide scrollbar but keep functionality */
 ::-webkit-scrollbar {
-  width: 8px;
+    width: 8px;
 }
 ::-webkit-scrollbar-track {
-  background: transparent;
+    background: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  background: #D6D3D1;
+    background: #d6d3d1;
-  border-radius: 4px;
+    border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: #A8A29E;
+    background: #a8a29e;
 }
 .scrollbar-hide::-webkit-scrollbar {
    display: none;
 }
 .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
 }
 /* Animations */
@keyframes float {
-  0%, 100% { transform: translateY(0px); }
+    0%,
-  50% { transform: translateY(-10px); }
+    100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
 }
 .animate-float {
-  animation: float 5s ease-in-out infinite;
+    animation: float 8s ease-in-out infinite;
-}
+    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;
+    position: absolute;
-  filter: blur(80px);
+    filter: blur(80px);
-  opacity: 0.6;
+    opacity: 0.6;
-  z-index: -1;
+    z-index: -1;
-  animation: float 10s ease-in-out infinite;
+    animation: float 10s ease-in-out infinite;
 }
 /* Markdown Specifics for Blog/Projects */
 .markdown h1 {
-  @apply text-4xl font-bold mb-6 text-stone-800 tracking-tight;
+    @apply text-4xl font-bold mb-6 text-stone-900 tracking-tight;
 }
 .markdown h2 {
-  @apply text-2xl font-semibold mt-8 mb-4 text-stone-800 tracking-tight;
+    @apply text-2xl font-semibold mt-8 mb-4 text-stone-900 tracking-tight;
 }
 .markdown p {
-  @apply mb-4 leading-relaxed text-stone-600;
+    @apply mb-4 leading-relaxed text-stone-700;
 }
 .markdown a {
-  @apply text-stone-800 underline decoration-liquid-mint decoration-2 underline-offset-2 hover:text-black transition-colors;
+    @apply text-stone-900 underline decoration-liquid-mint decoration-2 underline-offset-2 hover:text-black transition-colors duration-300;
 }
 .markdown ul {
-  @apply list-disc list-inside mb-4 space-y-2 text-stone-600;
+    @apply list-disc list-inside mb-4 space-y-2 text-stone-700;
 }
 .markdown code {
-  @apply bg-stone-100 px-1.5 py-0.5 rounded text-sm text-stone-800 font-mono;
+    @apply bg-stone-100 px-1.5 py-0.5 rounded text-sm text-stone-900 font-mono;
 }
 .markdown pre {
-  @apply bg-stone-900 text-stone-50 p-4 rounded-xl overflow-x-auto mb-6;
+    @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;
 }
--- a/Show More
+++ b/Show More