Update staging configuration to avoid port conflicts and enhance deployment scripts

- Changed staging app port from 3001 to 3002 in docker-compose.staging.yml - Updated PostgreSQL port from 5433 to 5434 and Redis port from 6380 to 6381 - Modified STAGING_SETUP.md to reflect new port configurations - Adjusted CI/CD workflows to accommodate new staging ports and improve deployment messages - Added N8N environment variables to staging configuration for better integration
2026-01-09 12:41:41 +01:00
170 changed files with 7382 additions and 20849 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,65 +0,0 @@
 # 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-with-gitea-vars.yml.disabled
+++ b/.gitea/workflows/ci-cd-with-gitea-vars.yml.disabled
--- a/.gitea/workflows/ci-cd-woodpecker.yml
+++ b/.gitea/workflows/ci-cd-woodpecker.yml
@@ -0,0 +1,232 @@
 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/debug-secrets.yml
+++ b/.gitea/workflows/debug-secrets.yml
@@ -0,0 +1,123 @@
 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
@@ -1,314 +0,0 @@
 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
@@ -1,275 +0,0 @@
 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
--- a/.gitea/workflows/test-and-build.yml
+++ b/.gitea/workflows/test-and-build.yml
@@ -0,0 +1,41 @@
 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
@@ -0,0 +1,105 @@
 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/AUTO_DEPLOYMENT_STATUS.md
+++ b/AUTO_DEPLOYMENT_STATUS.md
@@ -0,0 +1,85 @@
 # 🚀 Auto-Deployment Status
 ## Current Setup
 ### GitHub Actions Workflow (`.github/workflows/ci-cd.yml`)
 **Triggers on**: Push to `main` OR `production` branches
 **What happens on `main` branch**:
 - ✅ Runs tests
 - ✅ Runs linting  
 - ✅ Builds Docker image
 - ✅ Pushes image to registry
 - ❌ **Does NOT deploy to server**
 **What happens on `production` branch**:
 - ✅ Runs tests
 - ✅ Runs linting
 - ✅ Builds Docker image
 - ✅ Pushes image to registry
 - ✅ **Deploys to server automatically**
 ### Key Line in Workflow
 ```yaml
 # Line 159 in .github/workflows/ci-cd.yml
 if: github.event_name == 'push' && github.ref == 'refs/heads/production'
 ```
 This means deployment **only** happens on `production` branch.
 ## Answer: Can you merge to main and auto-deploy?
 **❌ NO** - Merging to `main` will:
 - Build and test everything
 - Create Docker image
 - **But NOT deploy to your server**
 **✅ YES** - Merging to `production` will:
 - Build and test everything
 - Create Docker image
 - **AND deploy to your server automatically**
 ## Options
 ### Option 1: Use Production Branch (Current Setup)
 ```bash
 # Merge dev → main (tests/build only)
 git checkout main
 git merge dev
 git push origin main
 # Then merge main → production (auto-deploys)
 git checkout production
 git merge main
 git push origin production  # ← This triggers deployment
 ```
 ### Option 2: Enable Auto-Deploy on Main
 If you want `main` to auto-deploy, I can update the workflow to deploy on `main` as well.
 ### Option 3: Manual Deployment
 After merging to `main`, manually run:
 ```bash
 ./scripts/gitea-deploy.sh
 # or
 ./scripts/auto-deploy.sh
 ```
 ## Recommendation
 **Keep current setup** (deploy only on `production`):
 - ✅ Safer: `main` is for testing builds
 - ✅ `production` is explicitly for deployments
 - ✅ Can test on `main` without deploying
 - ✅ Clear separation of concerns
 **Workflow**:
 1. Merge `dev` → `main` (validates build works)
 2. Test the built image if needed
 3. Merge `main` → `production` (auto-deploys)
 ---
 **Current Status**: Auto-deployment is configured, but only for `production` branch.
--- a/CLEANUP_PLAN.md
+++ b/CLEANUP_PLAN.md
@@ -0,0 +1,66 @@
 # 🧹 Codebase Cleanup Plan
 ## MD Files Analysis
 ### ✅ KEEP (Essential Documentation)
 1. **README.md** - Main project documentation
 2. **docs/ai-image-generation/README.md** - AI feature docs
 3. **docs/ai-image-generation/SETUP.md** - Setup guide
 4. **docs/ai-image-generation/QUICKSTART.md** - Quick start
 5. **docs/ai-image-generation/WEBHOOK_SETUP.md** - Webhook setup (just created)
 6. **TESTING_GUIDE.md** - Testing documentation
 7. **SAFE_PUSH_TO_MAIN.md** - Deployment guide
 8. **AUTO_DEPLOYMENT_STATUS.md** - Deployment status (just created)
 ### ❌ REMOVE (Old/Duplicate/Outdated)
 1. **CHANGELOG_DEV.md** - Old changelog, can be in git history
 2. **PUSH_READY.md** - One-time status file
 3. **COMMIT_MESSAGE.txt** - One-time commit message
 4. **DEPLOYMENT-FIXES.md** - Old fixes, should be in git
 5. **DEPLOYMENT-IMPROVEMENTS.md** - Old improvements
 6. **DEPLOYMENT.md** - Duplicate of PRODUCTION-DEPLOYMENT.md
 7. **AFTER_PUSH_SETUP.md** - One-time setup guide
 8. **PRE_PUSH_CHECKLIST.md** - Can merge into SAFE_PUSH_TO_MAIN.md
 9. **TEST_FIXES.md** - One-time fix notes
 10. **AUTOMATED_TESTING_SETUP.md** - Info now in TESTING_GUIDE.md
 11. **SECURITY-UPDATE.md** - Old update notes
 12. **SECURITY-CHECKLIST.md** - Can merge into SECURITY.md
 13. **ANALYTICS.md** - If not actively used
 14. **PRODUCTION-DEPLOYMENT.md** - If DEPLOYMENT.md covers it
 ### 📁 CONSOLIDATE (Merge into main docs)
 - **docs/IMPROVEMENTS_SUMMARY.md** → Merge into README or remove
 - **docs/CODING_DETECTION_DEBUG.md** → Remove if not needed
 - **docs/DYNAMIC_ACTIVITY_MANAGEMENT.md** → Keep if actively used
 - **docs/ACTIVITY_FEATURES.md** → Keep if actively used
 - **docs/N8N_CHAT_SETUP.md** → Keep if using n8n chat
 - **docs/N8N_INTEGRATION.md** → Keep if using n8n
 ## Old/Unused Files to Remove
 ### Scripts (Many duplicates)
 - `scripts/test-fix.sh` - One-time fix
 - `scripts/test-deployment.sh` - One-time test
 - `scripts/quick-health-fix.sh` - One-time fix
 - `scripts/fix-connection.sh` - One-time fix
 - `scripts/debug-gitea-actions.sh` - Debug script, not needed
 - Multiple docker-compose files (keep only needed ones)
 ### Disabled Workflows
 - `.gitea/workflows/*.disabled` - Remove all disabled workflows
 ### Old Test Results
 - `test-results/` - Can be regenerated
 - `playwright-report/` - Can be regenerated
 ### Logs
 - `logs/*.log` - Should be in .gitignore
 ## Git Remote Issue
 Current: `https://git.dk0.dev/denshooter/portfolio`
 Issue: Can't connect to git.dk0.dev:443
 Options:
 1. Check if server is up
 2. Use SSH instead: `git@git.dk0.dev:denshooter/portfolio.git`
 3. Check if URL changed
--- a/CLEANUP_SUMMARY.md
+++ b/CLEANUP_SUMMARY.md
@@ -0,0 +1,95 @@
 # 🧹 Cleanup Summary
 ## Files Removed
 ### Documentation (15 files)
 - ✅ CHANGELOG_DEV.md - Old changelog
 - ✅ PUSH_READY.md - One-time status
 - ✅ COMMIT_MESSAGE.txt - One-time commit message
 - ✅ DEPLOYMENT-FIXES.md - Old fixes
 - ✅ DEPLOYMENT-IMPROVEMENTS.md - Old improvements
 - ✅ DEPLOYMENT.md - Duplicate
 - ✅ AFTER_PUSH_SETUP.md - One-time setup
 - ✅ PRE_PUSH_CHECKLIST.md - Merged into SAFE_PUSH_TO_MAIN.md
 - ✅ TEST_FIXES.md - One-time fixes
 - ✅ AUTOMATED_TESTING_SETUP.md - Info in TESTING_GUIDE.md
 - ✅ SECURITY-UPDATE.md - Old update
 - ✅ SECURITY-CHECKLIST.md - Merged into SECURITY.md
 - ✅ PRODUCTION-DEPLOYMENT.md - Duplicate
 - ✅ ANALYTICS.md - Not actively used
 - ✅ docs/IMPROVEMENTS_SUMMARY.md - Old summary
 - ✅ docs/CODING_DETECTION_DEBUG.md - Debug notes
 ### Scripts (4 files)
 - ✅ scripts/quick-health-fix.sh - One-time fix
 - ✅ scripts/fix-connection.sh - One-time fix
 - ✅ scripts/debug-gitea-actions.sh - Debug script
 ### Workflows (7 files)
 - ✅ .gitea/workflows/*.disabled - All disabled workflows removed
 ### Docker Configs (2 files)
 - ✅ docker-compose.zero-downtime.yml - Old version
 - ✅ docker-compose.zero-downtime-fixed.yml - Old version
 - ✅ nginx-zero-downtime.conf - Unused
 ## Files Kept (Essential)
 ### Documentation
 - ✅ README.md - Main docs
 - ✅ DEV-SETUP.md - Setup guide
 - ✅ SECURITY.md - Security info
 - ✅ TESTING_GUIDE.md - Testing docs
 - ✅ SAFE_PUSH_TO_MAIN.md - Deployment guide
 - ✅ AUTO_DEPLOYMENT_STATUS.md - Deployment status
 - ✅ docs/ai-image-generation/* - AI feature docs
 - ✅ docs/ACTIVITY_FEATURES.md - Activity features
 - ✅ docs/DYNAMIC_ACTIVITY_MANAGEMENT.md - Activity management
 - ✅ docs/N8N_CHAT_SETUP.md - n8n chat setup
 - ✅ docs/N8N_INTEGRATION.md - n8n integration
 ### Docker Configs
 - ✅ docker-compose.yml - Main config
 - ✅ docker-compose.production.yml - Production
 - ✅ docker-compose.dev.minimal.yml - Dev minimal
 ## Git Remote Fixed
 **Before**: `https://git.dk0.dev/denshooter/portfolio` (HTTPS - connection issues)
 **After**: `git@git.dk0.dev:denshooter/portfolio.git` (SSH - more reliable)
 ## .gitignore Updated
 Added:
 - `logs/*.log` - Log files
 - `test-results/` - Test results
 - `playwright-report/` - Playwright reports
 - `coverage/` - Coverage reports
 - `.idea/` - IDE files
 - `.vscode/` - IDE files
 ## Next Steps
 1. **Test Git connection**:
   ```bash
   git fetch
   ```
 2. **If SSH doesn't work**, switch back to HTTPS:
   ```bash
   git remote set-url origin https://git.dk0.dev/denshooter/portfolio.git
   ```
 3. **Commit cleanup**:
   ```bash
   git add .
   git commit -m "chore: Clean up old documentation and unused files"
   git push origin dev
   ```
 ## Result
 - **Removed**: ~30 files
 - **Kept**: Essential documentation and configs
 - **Fixed**: Git remote connection
 - **Updated**: .gitignore for better file management
--- a/DEPLOYMENT_FIX.md
+++ b/DEPLOYMENT_FIX.md
@@ -0,0 +1,89 @@
 # 🔧 Deployment Fixes Applied
 ## Issues Fixed
 ### 1. Port 3001 Already Allocated ❌ → ✅
 **Problem**: Port 3001 was already in use, causing staging deployment to fail.
 **Fix**: 
 - Changed staging port from `3001` to `3002`
 - Changed PostgreSQL staging port from `5433` to `5434`
 - Changed Redis staging port from `6380` to `6381`
 ### 2. Docker Compose Version Warning ❌ → ✅
 **Problem**: `version: '3.8'` is obsolete in newer Docker Compose.
 **Fix**: Removed `version` line from `docker-compose.staging.yml`
 ### 3. Missing N8N Environment Variables ❌ → ✅
 **Problem**: `N8N_SECRET_TOKEN` warning appeared.
 **Fix**: Added `N8N_WEBHOOK_URL` and `N8N_SECRET_TOKEN` to staging compose file
 ### 4. Wrong Compose File Used ❌ → ✅
 **Problem**: Gitea workflow was using wrong compose file (stopping production containers).
 **Fix**: 
 - Updated `ci-cd-with-gitea-vars.yml` to detect branch and use correct compose file
 - Created dedicated `staging-deploy.yml` workflow
 - Staging now uses `docker-compose.staging.yml`
 - Production uses `docker-compose.production.yml`
 ## Updated Ports
 | Service | Staging | Production |
 |---------|---------|------------|
 | App | **3002** ✅ | **3000** |
 | PostgreSQL | **5434** ✅ | **5432** |
 | Redis | **6381** ✅ | **6379** |
 ## How It Works Now
 ### Staging (dev/main branch)
 ```bash
 git push origin dev
 # → Uses docker-compose.staging.yml
 # → Deploys to port 3002
 # → Does NOT touch production containers
 ```
 ### Production (production branch)
 ```bash
 git push origin production
 # → Uses docker-compose.production.yml
 # → Deploys to port 3000
 # → Zero-downtime deployment
 # → Does NOT touch staging containers
 ```
 ## Files Updated
 - ✅ `docker-compose.staging.yml` - Fixed ports, removed version, added N8N vars
 - ✅ `.gitea/workflows/ci-cd-with-gitea-vars.yml` - Branch detection, correct compose files
 - ✅ `.gitea/workflows/staging-deploy.yml` - New dedicated staging workflow
 - ✅ `STAGING_SETUP.md` - Updated port references
 ## Next Steps
 1. **Test staging deployment**:
   ```bash
   git push origin dev
   # Should deploy to port 3002 without errors
   ```
 2. **Verify staging**:
   ```bash
   curl http://localhost:3002/api/health
   ```
 3. **When ready for production**:
   ```bash
   git checkout production
   git merge main
   git push origin production
   # Deploys safely to port 3000
   ```
 ---
 **All fixes applied!** Staging and production are now completely isolated. 🚀
--- a/DEV-SETUP.md
+++ b/DEV-SETUP.md
@@ -0,0 +1,239 @@
 # 🚀 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/51
+++ b/51
@@ -3,10 +3,11 @@ 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
-# Copy package files first for better caching
+# Install dependencies based on the preferred package manager
 COPY package.json package-lock.json* ./
 RUN npm ci --only=production && npm cache clean --force
@@ -18,38 +19,22 @@ WORKDIR /app
 COPY package.json package-lock.json* ./
 # Install all dependencies (including dev dependencies for build)
-# Use npm ci with cache mount for faster builds
+RUN npm ci
 RUN --mount=type=cache,target=/root/.npm \
    npm ci
-# Copy Prisma schema first (for better caching)
+# Copy source code
 COPY prisma ./prisma
 # Generate Prisma client (cached if schema unchanged)
 RUN npx prisma generate
 # Copy source code (this invalidates cache when code changes)
 COPY . .
 # Install type definitions for react-responsive-masonry and node-fetch
 RUN npm install --save-dev @types/react-responsive-masonry @types/node-fetch
 # Generate Prisma client
 RUN npx prisma generate
 # 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
@@ -57,9 +42,6 @@ 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
@@ -73,21 +55,12 @@ RUN chown nextjs:nodejs .next
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing
-# Copy standalone output (contains server.js and all dependencies)
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone/app ./
 # 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
@@ -103,4 +76,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", "scripts/start-with-migrate.js"]
+CMD ["node", "server.js"]
--- a/GIT_CONNECTION_FIX.md
+++ b/GIT_CONNECTION_FIX.md
@@ -0,0 +1,53 @@
 # 🔧 Git Connection Fix
 ## Issue
 ```
 fatal: unable to access 'https://git.dk0.dev/denshooter/portfolio/': 
 Failed to connect to git.dk0.dev port 443 after 75002 ms: Couldn't connect to server
 ```
 ## Solutions
 ### Option 1: Check Server Status
 The server is reachable via HTTP (tested), but Git might need authentication.
 ### Option 2: Configure Git Credentials
 ```bash
 # Store credentials
 git config --global credential.helper store
 # Or use keychain (macOS)
 git config --global credential.helper osxkeychain
 ```
 ### Option 3: Use Personal Access Token
 1. Go to: https://git.dk0.dev/user/settings/applications
 2. Generate a new token
 3. Use it when pushing:
   ```bash
   git push https://YOUR_TOKEN@git.dk0.dev/denshooter/portfolio.git
   ```
 ### Option 4: Check Firewall/Network
 - Port 443 might be blocked
 - Try from different network
 - Check if VPN is needed
 ### Option 5: Use SSH (if port 22 opens)
 ```bash
 git remote set-url origin git@git.dk0.dev:denshooter/portfolio.git
 ```
 ## Current Status
 - Remote URL: `https://git.dk0.dev/denshooter/portfolio.git`
 - Server reachable: ✅ (HTTP works)
 - Git connection: ⚠️ (May need credentials)
 ## Quick Test
 ```bash
 # Test connection
 curl -I https://git.dk0.dev
 # Test Git
 git ls-remote https://git.dk0.dev/denshooter/portfolio.git
 ```
--- a/README.md
+++ b/README.md
@@ -1,7 +1,3 @@
 # 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.
@@ -52,10 +48,8 @@ npm run start        # Production Server
 ## 📖 Dokumentation
 - [Development Setup](DEV-SETUP.md) - Detaillierte Setup-Anleitung
- [Deployment Setup](DEPLOYMENT_SETUP.md) - Production Deployment
+- [Deployment Guide](DEPLOYMENT.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/SECURITY_IMPROVEMENTS.md
+++ b/SECURITY_IMPROVEMENTS.md
@@ -1,120 +0,0 @@
 # 🔒 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/TESTING_GUIDE.md
+++ b/TESTING_GUIDE.md
@@ -0,0 +1,284 @@
 # 🧪 Automated Testing Guide
 This guide explains how to run automated tests for critical paths, hydration, emails, and more.
 ## 📋 Test Types
 ### 1. Unit Tests (Jest)
 Tests individual components and functions in isolation.
 ```bash
 npm run test              # Run all unit tests
 npm run test:watch        # Watch mode
 npm run test:coverage    # With coverage report
 ```
 ### 2. E2E Tests (Playwright)
 Tests complete user flows in a real browser.
 ```bash
 npm run test:e2e          # Run all E2E tests
 npm run test:e2e:ui       # Run with UI mode (visual)
 npm run test:e2e:headed   # Run with visible browser
 npm run test:e2e:debug    # Debug mode
 ```
 ### 3. Critical Path Tests
 Tests the most important user flows.
 ```bash
 npm run test:critical     # Run critical path tests only
 ```
 ### 4. Hydration Tests
 Ensures React hydration works without errors.
 ```bash
 npm run test:hydration    # Run hydration tests only
 ```
 ### 5. Email Tests
 Tests email API endpoints.
 ```bash
 npm run test:email        # Run email tests only
 ```
 ### 6. Performance Tests
 Checks page load times and performance.
 ```bash
 npm run test:performance  # Run performance tests
 ```
 ### 7. Accessibility Tests
 Basic accessibility checks.
 ```bash
 npm run test:accessibility # Run accessibility tests
 ```
 ## 🚀 Running All Tests
 ### Quick Test (Recommended)
 ```bash
 npm run test:all
 ```
 This runs:
 - ✅ TypeScript check
 - ✅ ESLint
 - ✅ Build
 - ✅ Unit tests
 - ✅ Critical paths
 - ✅ Hydration tests
 - ✅ Email tests
 - ✅ Performance tests
 - ✅ Accessibility tests
 ### Individual Test Suites
 ```bash
 # Unit tests only
 npm run test
 # E2E tests only
 npm run test:e2e
 # Both
 npm run test && npm run test:e2e
 ```
 ## 📝 What Gets Tested
 ### Critical Paths
 - ✅ Home page loads correctly
 - ✅ Projects page displays projects
 - ✅ Individual project pages work
 - ✅ Admin dashboard is accessible
 - ✅ API health endpoint
 - ✅ API projects endpoint
 ### Hydration
 - ✅ No hydration errors in console
 - ✅ No duplicate React key warnings
 - ✅ Client-side navigation works
 - ✅ Server and client HTML match
 - ✅ Interactive elements work after hydration
 ### Email
 - ✅ Email API accepts requests
 - ✅ Required field validation
 - ✅ Email format validation
 - ✅ Rate limiting (if implemented)
 - ✅ Email respond endpoint
 ### Performance
 - ✅ Page load times (< 5s)
 - ✅ No large layout shifts
 - ✅ Images are optimized
 - ✅ API response times (< 1s)
 ### Accessibility
 - ✅ Proper heading structure
 - ✅ Images have alt text
 - ✅ Links have descriptive text
 - ✅ Forms have labels
 ## 🎯 Pre-Push Testing
 Before pushing to main, run:
 ```bash
 # Full test suite
 npm run test:all
 # Or manually:
 npm run build
 npm run lint
 npx tsc --noEmit
 npm run test
 npm run test:critical
 npm run test:hydration
 ```
 ## 🔧 Configuration
 ### Playwright Config
 Located in `playwright.config.ts`
 - **Base URL**: `http://localhost:3000` (or set `PLAYWRIGHT_TEST_BASE_URL`)
 - **Browsers**: Chromium, Firefox, WebKit, Mobile Chrome, Mobile Safari
 - **Retries**: 2 retries in CI, 0 locally
 - **Screenshots**: On failure
 - **Videos**: On failure
 ### Jest Config
 Located in `jest.config.ts`
 - **Environment**: jsdom
 - **Coverage**: v8 provider
 - **Setup**: `jest.setup.ts`
 ## 🐛 Debugging Tests
 ### Playwright Debug Mode
 ```bash
 npm run test:e2e:debug
 ```
 This opens Playwright Inspector where you can:
 - Step through tests
 - Inspect elements
 - View console logs
 - See network requests
 ### UI Mode (Visual)
 ```bash
 npm run test:e2e:ui
 ```
 Shows a visual interface to:
 - See all tests
 - Run specific tests
 - Watch tests execute
 - View results
 ### Headed Mode
 ```bash
 npm run test:e2e:headed
 ```
 Runs tests with visible browser (useful for debugging).
 ## 📊 Test Reports
 ### Playwright HTML Report
 After running E2E tests:
 ```bash
 npx playwright show-report
 ```
 Shows:
 - Test results
 - Screenshots on failure
 - Videos on failure
 - Timeline of test execution
 ### Jest Coverage Report
 ```bash
 npm run test:coverage
 ```
 Generates coverage report in `coverage/` directory.
 ## 🚨 Common Issues
 ### Tests Fail Locally But Pass in CI
 - Check environment variables
 - Ensure database is set up
 - Check for port conflicts
 ### Hydration Errors
 - Check for server/client mismatches
 - Ensure no conditional rendering based on `window`
 - Check for date/time differences
 ### Email Tests Fail
 - Email service might not be configured
 - Check environment variables
 - Tests are designed to handle missing email service
 ### Performance Tests Fail
 - Network might be slow
 - Adjust thresholds in test file
 - Check for heavy resources loading
 ## 📝 Writing New Tests
 ### E2E Test Example
 ```typescript
 import { test, expect } from '@playwright/test';
 test('My new feature works', async ({ page }) => {
  await page.goto('/my-page');
  await expect(page.locator('h1')).toContainText('Expected Text');
 });
 ```
 ### Unit Test Example
 ```typescript
 import { render, screen } from '@testing-library/react';
 import MyComponent from './MyComponent';
 test('renders correctly', () => {
  render(<MyComponent />);
  expect(screen.getByText('Hello')).toBeInTheDocument();
 });
 ```
 ## 🎯 CI/CD Integration
 ### GitHub Actions Example
 ```yaml
 - name: Run tests
  run: |
    npm install
    npm run test:all
 ```
 ### Pre-Push Hook
 Add to `.git/hooks/pre-push`:
 ```bash
 #!/bin/bash
 npm run test:all
 ```
 ## 📚 Resources
 - [Playwright Docs](https://playwright.dev)
 - [Jest Docs](https://jestjs.io)
 - [Testing Library](https://testing-library.com)
 ---
 **Remember**: Tests should be fast, reliable, and easy to understand! 🚀
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -1,27 +0,0 @@
 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
@@ -1,19 +0,0 @@
 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
@@ -1,23 +0,0 @@
 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
@@ -1,19 +0,0 @@
 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
@@ -1,53 +0,0 @@
 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
@@ -1,53 +0,0 @@
 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/fetchAllProjects.test.tsx
+++ b/app/tests/api/fetchAllProjects.test.tsx
@@ -1,27 +1,43 @@
 import { GET } from '@/app/api/fetchAllProjects/route';
 import { NextResponse } from 'next/server';
-jest.mock('@/lib/prisma', () => ({
+// Wir mocken node-fetch direkt
-  prisma: {
+jest.mock('node-fetch', () => ({
-    project: {
+  __esModule: true,
-      findMany: jest.fn(async () => [
+  default: jest.fn(() =>
    Promise.resolve({
      json: () =>
        Promise.resolve({
          posts: [
            {
-          id: 1,
+              id: '67ac8dfa709c60000117d312',
          slug: 'just-doing-some-testing',
              title: 'Just Doing Some Testing',
-          updatedAt: new Date('2025-02-13T14:25:38.000Z'),
+              meta_description: 'Hello bla bla bla bla',
-          metaDescription: 'Hello bla bla bla bla',
+              slug: 'just-doing-some-testing',
              updated_at: '2025-02-13T14:25:38.000+00:00',
            },
            {
-          id: 2,
+              id: '67aaffc3709c60000117d2d9',
          slug: 'blockchain-based-voting-system',
              title: 'Blockchain Based Voting System',
-          updatedAt: new Date('2025-02-13T16:54:42.000Z'),
+              meta_description:
          metaDescription:
                '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', () => ({
@@ -31,8 +47,12 @@ 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
@@ -41,11 +61,11 @@ describe('GET /api/fetchAllProjects', () => {
    expect(responseArg).toMatchObject({
      posts: expect.arrayContaining([
        expect.objectContaining({
-          id: '1',
+          id: '67ac8dfa709c60000117d312',
          title: 'Just Doing Some Testing',
        }),
        expect.objectContaining({
-          id: '2',
+          id: '67aaffc3709c60000117d2d9',
          title: 'Blockchain Based Voting System',
        }),
      ]),
--- a/app/tests/api/fetchProject.test.tsx
+++ b/app/tests/api/fetchProject.test.tsx
@@ -1,23 +1,26 @@
 import { GET } from '@/app/api/fetchProject/route';
 import { NextRequest, NextResponse } from 'next/server';
-jest.mock('@/lib/prisma', () => ({
+// Mock node-fetch so the route uses it as a reliable fallback
-  prisma: {
+jest.mock('node-fetch', () => ({
-    project: {
+  __esModule: true,
-      findUnique: jest.fn(async ({ where }: { where: { slug: string } }) => {
+  default: jest.fn(() =>
-        if (where.slug !== 'blockchain-based-voting-system') return null;
+    Promise.resolve({
-        return {
+      ok: true,
-          id: 2,
+      json: () =>
        Promise.resolve({
          posts: [
            {
              id: '67aaffc3709c60000117d2d9',
              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',
-          updatedAt: new Date('2025-02-13T16:54:42.000Z'),
+              updated_at: '2025-02-13T16:54:42.000+00:00',
-          description: null,
+            },
-          content: null,
+          ],
        };
        }),
-    },
+    })
-  },
+  ),
 }));
 jest.mock('next/server', () => ({
@@ -26,8 +29,12 @@ jest.mock('next/server', () => ({
  },
 }));
 describe('GET /api/fetchProject', () => {
  beforeAll(() => {
    process.env.GHOST_API_URL = 'http://localhost:2368';
    process.env.GHOST_API_KEY = 'some-key';
  });
  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;
@@ -37,11 +44,11 @@ describe('GET /api/fetchProject', () => {
    expect(NextResponse.json).toHaveBeenCalledWith({
      posts: [
        {
-          id: '2',
+          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.000Z',
+          updated_at: '2025-02-13T16:54:42.000+00:00',
        },
      ],
    });
--- a/app/tests/api/sitemap.test.tsx
+++ b/app/tests/api/sitemap.test.tsx
@@ -34,38 +34,77 @@ jest.mock("next/server", () => {
  };
 });
-jest.mock("@/lib/sitemap", () => ({
+import { GET } from "@/app/api/sitemap/route";
-  getSitemapEntries: jest.fn(async () => [
+
 // Mock node-fetch so we don't perform real network requests in tests
 jest.mock("node-fetch", () => ({
  __esModule: true,
  default: jest.fn(() =>
    Promise.resolve({
      ok: true,
      json: () =>
        Promise.resolve({
          posts: [
            {
-      url: "https://dki.one/en",
+              id: "67ac8dfa709c60000117d312",
-      lastModified: "2025-01-01T00:00:00.000Z",
+              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",
            },
            {
-      url: "https://dki.one/de",
+              id: "67aaffc3709c60000117d2d9",
-      lastModified: "2025-01-01T00:00:00.000Z",
+              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",
            },
-    {
+          ],
-      url: "https://dki.one/en/projects/blockchain-based-voting-system",
+          meta: {
-      lastModified: "2025-02-13T16:54:42.000Z",
+            pagination: {
              limit: "all",
              next: null,
              page: 1,
              pages: 1,
              prev: null,
              total: 2,
            },
    {
      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", () => {
  beforeAll(() => {
    process.env.GHOST_API_URL = "http://localhost:2368";
    process.env.GHOST_API_KEY = "test-api-key";
    process.env.NEXT_PUBLIC_BASE_URL = "https://dki.one";
    // Provide mock posts via env so route can use them without fetching
    process.env.GHOST_MOCK_POSTS = JSON.stringify({
      posts: [
        {
          id: "67ac8dfa709c60000117d312",
          title: "Just Doing Some Testing",
          meta_description: "Hello bla bla bla bla",
          slug: "just-doing-some-testing",
          updated_at: "2025-02-13T14:25:38.000+00:00",
        },
        {
          id: "67aaffc3709c60000117d2d9",
          title: "Blockchain Based Voting System",
          meta_description:
            "This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.",
          slug: "blockchain-based-voting-system",
          updated_at: "2025-02-13T16:54:42.000+00:00",
        },
      ],
    });
  });
  it("should return a sitemap", async () => {
    const { GET } = await import("@/app/api/sitemap/route");
    const response = await GET();
    // Get the body text from the NextResponse
@@ -74,7 +113,15 @@ describe("GET /api/sitemap", () => {
    expect(body).toContain(
      '<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">',
    );
-    expect(body).toContain("<loc>https://dki.one/en</loc>");
+    expect(body).toContain("<loc>https://dki.one/</loc>");
    expect(body).toContain("<loc>https://dki.one/legal-notice</loc>");
    expect(body).toContain("<loc>https://dki.one/privacy-policy</loc>");
    expect(body).toContain(
      "<loc>https://dki.one/projects/just-doing-some-testing</loc>",
    );
    expect(body).toContain(
      "<loc>https://dki.one/projects/blockchain-based-voting-system</loc>",
    );
    // Note: Headers are not available in test environment
  });
 });
--- 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.getByLabelText('Open menu');
+    const menuButton = screen.getByRole('button');
    expect(menuButton).toBeInTheDocument();
  });
 });
--- a/app/tests/sitemap.xml/page.test.tsx
+++ b/app/tests/sitemap.xml/page.test.tsx
@@ -1,4 +1,5 @@
 import "@testing-library/jest-dom";
 import { GET } from "@/app/sitemap.xml/route";
 jest.mock("next/server", () => ({
  NextResponse: jest.fn().mockImplementation((body: unknown, init?: ResponseInit) => {
@@ -10,32 +11,71 @@ jest.mock("next/server", () => ({
  }),
 }));
-jest.mock("@/lib/sitemap", () => ({
+// Sitemap XML used by node-fetch mock
-  getSitemapEntries: jest.fn(async () => [
+const sitemapXml = `
-    {
+  <urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
-      url: "https://dki.one/en",
+    <url>
-      lastModified: "2025-01-01T00:00:00.000Z",
+      <loc>https://dki.one/</loc>
-    },
+    </url>
-  ]),
+    <url>
-  generateSitemapXml: jest.fn(
+      <loc>https://dki.one/legal-notice</loc>
-    () =>
+    </url>
-      '<?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>',
+    <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>
 `;
 // Mock node-fetch for sitemap endpoint (hoisted by Jest)
 jest.mock("node-fetch", () => ({
  __esModule: true,
  default: jest.fn((_url: string) =>
    Promise.resolve({ ok: true, text: () => Promise.resolve(sitemapXml) }),
  ),
 }));
 describe("Sitemap Component", () => {
  beforeAll(() => {
    process.env.NEXT_PUBLIC_BASE_URL = "https://dki.one";
    // Provide sitemap XML directly so route uses it without fetching
    process.env.GHOST_MOCK_SITEMAP = sitemapXml;
    // Mock global.fetch too, to avoid any network calls
    global.fetch = jest.fn().mockImplementation((url: string) => {
      if (url.includes("/api/sitemap")) {
        return Promise.resolve({
          ok: true,
          text: () => Promise.resolve(sitemapXml),
        });
      }
      return Promise.reject(new Error(`Unknown URL: ${url}`));
    });
  });
  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("<loc>https://dki.one/en</loc>");
+    expect(response.body).toContain("<loc>https://dki.one/</loc>");
    expect(response.body).toContain("<loc>https://dki.one/legal-notice</loc>");
    expect(response.body).toContain(
      "<loc>https://dki.one/privacy-policy</loc>",
    );
    expect(response.body).toContain(
      "<loc>https://dki.one/projects/just-doing-some-testing</loc>",
    );
    expect(response.body).toContain(
      "<loc>https://dki.one/projects/blockchain-based-voting-system</loc>",
    );
    // Note: Headers are not available in test environment
  });
 });
--- a/app/_ui/ActivityFeedClient.tsx
+++ b/app/_ui/ActivityFeedClient.tsx
@@ -1,31 +0,0 @@
 "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
@@ -1,115 +0,0 @@
 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
@@ -1,238 +0,0 @@
 "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
@@ -1,292 +0,0 @@
 "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 { prisma, projectService } from '@/lib/prisma';
+import { projectService } from '@/lib/prisma';
 import { analyticsCache } from '@/lib/redis';
 import { requireSessionAuth, checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
@@ -14,122 +14,55 @@ export async function GET(request: NextRequest) {
          status: 429, 
          headers: { 
            'Content-Type': 'application/json',
-            ...getRateLimitHeaders(ip, 20, 60000)
+            ...getRateLimitHeaders(ip, 5, 60000)
          } 
        }
      );
    }
-    // Admin-only endpoint: require explicit admin header AND a valid signed session token
+    // Check admin authentication - for admin dashboard requests, we trust the session
    // The middleware has already verified the admin session for /manage routes
    const isAdminRequest = request.headers.get('x-admin-request') === 'true';
-    if (!isAdminRequest) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
+    if (!isAdminRequest) {
      const authError = requireSessionAuth(request);
-    if (authError) return authError;
+      if (authError) {
        return authError;
      }
    }
-    // Check cache first (but allow bypass with cache-bust parameter)
+    // Check cache first
    const url = new URL(request.url);
    const bypassCache = url.searchParams.get('nocache') === 'true';
    if (!bypassCache) {
    const cachedStats = await analyticsCache.getOverallStats();
    if (cachedStats) {
      return NextResponse.json(cachedStats);
    }
    }
    // Get analytics data
    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, // Real views from PageView table
+        totalViews: projects.reduce((sum, p) => sum + ((p.analytics as Record<string, unknown>)?.views as number || 0), 0),
-        totalLikes: 0, // Not implemented - no like buttons
+        totalLikes: projects.reduce((sum, p) => sum + ((p.analytics as Record<string, unknown>)?.likes as number || 0), 0),
-        totalShares: 0, // Not implemented - no share buttons
+        totalShares: projects.reduce((sum, p) => sum + ((p.analytics as Record<string, unknown>)?.shares as number || 0), 0),
-        avgLighthouse: (() => {
+        avgLighthouse: projects.length > 0 
-          // Only calculate if we have real performance data (not defaults)
+          ? Math.round(projects.reduce((sum, p) => sum + ((p.performance as Record<string, unknown>)?.lighthouse as number || 0), 0) / projects.length)
-          const projectsWithPerf = projects.filter(p => {
+          : 0
            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: viewsByProject[project.id] || 0, // Only real views from PageView table
+        views: (project.analytics as Record<string, unknown>)?.views as number || 0,
-        likes: 0, // Not implemented
+        likes: (project.analytics as Record<string, unknown>)?.likes as number || 0,
-        shares: 0, // Not implemented
+        shares: (project.analytics as Record<string, unknown>)?.shares as number || 0,
-        lighthouse: (() => {
+        lighthouse: (project.performance as Record<string, unknown>)?.lighthouse as number || 0,
          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,
@@ -138,25 +71,10 @@ export async function GET(request: NextRequest) {
      categories: performanceStats.byCategory,
      difficulties: performanceStats.byDifficulty,
      performance: {
-        avgLighthouse: (() => {
+        avgLighthouse: performanceStats.avgLighthouse,
-          const projectsWithPerf = projects.filter(p => {
+        totalViews: performanceStats.totalViews,
-            const perf = (p.performance as Record<string, unknown>) || {};
+        totalLikes: performanceStats.totalLikes,
-            return (perf.lighthouse as number || 0) > 0;
+        totalShares: performanceStats.totalShares
          });
          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,11 +4,14 @@ import { requireSessionAuth } from '@/lib/auth';
 export async function GET(request: NextRequest) {
  try {
-    // Admin-only endpoint
+    // Check admin authentication - for admin dashboard requests, we trust the session
    const isAdminRequest = request.headers.get('x-admin-request') === 'true';
-    if (!isAdminRequest) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
+    if (!isAdminRequest) {
      const authError = requireSessionAuth(request);
-    if (authError) return authError;
+      if (authError) {
        return authError;
      }
    }
    // Get performance data from database
    const pageViews = await prisma.pageView.findMany({
@@ -21,73 +24,8 @@ 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,23 +22,21 @@ export async function POST(request: NextRequest) {
    // Check admin authentication
    const isAdminRequest = request.headers.get('x-admin-request') === 'true';
-    if (!isAdminRequest) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
+    if (!isAdminRequest) {
      const authError = requireSessionAuth(request);
-    if (authError) return authError;
+      if (authError) {
        return authError;
      }
    }
    const { type } = await request.json();
    switch (type) {
      case 'analytics':
-        // Reset all project analytics (view counts in project.analytics JSON)
+        // Reset all project analytics
-        const projects = await prisma.project.findMany();
+        await prisma.project.updateMany({
        for (const project of projects) {
          const analytics = (project.analytics as Record<string, unknown>) || {};
          await prisma.project.update({
            where: { id: project.id },
          data: {
            analytics: {
                ...analytics,
              views: 0,
              likes: 0,
              shares: 0,
@@ -67,7 +65,6 @@ export async function POST(request: NextRequest) {
            }
          }
        });
        }
        break;
      case 'pageviews':
@@ -81,15 +78,10 @@ export async function POST(request: NextRequest) {
        break;
      case 'performance':
-        // Reset performance metrics (preserve structure)
+        // Reset performance metrics
-        const projectsForPerf = await prisma.project.findMany();
+        await prisma.project.updateMany({
        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,
@@ -112,22 +104,15 @@ export async function POST(request: NextRequest) {
            }
          }
        });
        }
        break;
      case 'all':
        // Reset everything
        const allProjects = await prisma.project.findMany();
        await Promise.all([
-          // Reset analytics and performance for each project (preserve structure)
+          // Reset analytics
-          ...allProjects.map(project => {
+          prisma.project.updateMany({
            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,
@@ -153,9 +138,13 @@ export async function POST(request: NextRequest) {
                locationStats: {},
                referrerStats: {},
                lastUpdated: new Date().toISOString()
-                },
+              }
            }
          }),
          // Reset performance
          prisma.project.updateMany({
            data: {
              performance: {
                  ...perf,
                lighthouse: 0,
                loadTime: 0,
                firstContentfulPaint: 0,
@@ -177,7 +166,6 @@ export async function POST(request: NextRequest) {
                lastUpdated: new Date().toISOString()
              }
            }
            });
          }),
          // Clear tracking tables
          prisma.pageView.deleteMany({}),
--- a/app/api/analytics/track/route.ts
+++ b/app/api/analytics/track/route.ts
@@ -1,187 +0,0 @@
 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,13 +37,7 @@ export async function POST(request: NextRequest) {
    }
    // Get admin credentials from environment
-    const adminAuth = process.env.ADMIN_BASIC_AUTH;
+    const adminAuth = process.env.ADMIN_BASIC_AUTH || 'admin:default_password_change_me';
    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
@@ -54,14 +48,22 @@ export async function POST(request: NextRequest) {
    // Use constant-time comparison to prevent timing attacks
    if (passwordBuffer.length === expectedBuffer.length && 
        crypto.timingSafeEqual(passwordBuffer, expectedBuffer)) {
-      const { createSessionToken } = await import('@/lib/auth');
+      // Generate cryptographically secure session token
-      const sessionToken = createSessionToken(request);
+      const timestamp = Date.now();
-      if (!sessionToken) {
+      const randomBytes = crypto.randomBytes(32);
-        return new NextResponse(
+      const randomString = randomBytes.toString('hex');
-          JSON.stringify({ error: 'Session secret not configured' }),
+
-          { status: 503, headers: { 'Content-Type': 'application/json' } }
+      // Create session data
-        );
+      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,5 +1,4 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { verifySessionToken } from '@/lib/auth';
 export async function POST(request: NextRequest) {
  try {
@@ -21,10 +20,48 @@ export async function POST(request: NextRequest) {
      );
    }
-    const valid = verifySessionToken(request, sessionToken);
+    // Decode and validate session token
-    if (!valid) {
+    try {
      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: 'Session expired or invalid' }),
+          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' } }
        );
      }
@@ -41,6 +78,12 @@ export async function POST(request: NextRequest) {
          }
        }
      );
    } catch {
      return new NextResponse(
        JSON.stringify({ valid: false, error: 'Invalid session token format' }),
        { status: 401, headers: { 'Content-Type': 'application/json' } }
      );
    }
  } 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,7 +1,9 @@
 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';
+import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
-import { prisma } from "@/lib/prisma";
+
 const prisma = new PrismaClient();
 export async function PUT(
    request: NextRequest,
@@ -23,11 +25,6 @@ export async function PUT(
            );
        }
        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();
@@ -96,11 +93,6 @@ export async function DELETE(
            );
        }
        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);
--- a/app/api/contacts/route.tsx
+++ b/app/api/contacts/route.tsx
@@ -1,15 +1,12 @@
 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';
+import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
-import { prisma } from '@/lib/prisma';
+
 const prisma = new PrismaClient();
 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');
--- a/app/api/content/page/route.ts
+++ b/app/api/content/page/route.ts
@@ -1,25 +0,0 @@
 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
@@ -1,55 +0,0 @@
 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,248 +2,436 @@ 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) => `
-            const safeName = escapeHtml(name);
+            <!DOCTYPE html>
-            const safeMsg = nl2br(escapeHtml(originalMessage));
+            <html lang="de">
-            return baseEmail({
+            <head>
-                title: `Danke, ${safeName}!`,
+                <meta charset="UTF-8">
-                subtitle: "Nachricht erhalten",
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                bodyHtml: `
+                <title>Willkommen - Dennis Konkol</title>
-<div style="font-size:15px;line-height:1.65;color:${BRAND.text};">
+            </head>
-  Hey ${safeName},<br><br>
+            <body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
-  danke für deine Nachricht — ich habe sie erhalten und melde mich so schnell wie möglich bei dir zurück.
+                <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
 </div>
-<div style="margin-top:18px;background:${BRAND.bg};border:1px solid ${BRAND.border};border-radius:16px;overflow:hidden;">
+                    <!-- Header -->
-  <div style="padding:14px 16px;background:${BRAND.sand};border-bottom:1px solid ${BRAND.border};">
+                    <div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 40px 30px; text-align: center;">
-    <div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">Deine Nachricht</div>
+                        <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
                            👋 Hallo ${name}!
                        </h1>
                        <p style="color: #d1fae5; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
                            Vielen Dank für deine Nachricht
                        </p>
                    </div>
  <div style="padding:16px;line-height:1.65;color:${BRAND.text};font-size:14px;border-left:4px solid ${BRAND.mint};">
    ${safeMsg}
  </div>
 </div>
-<div style="margin-top:20px;text-align:center;">
+                    <!-- Content -->
-  <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;">
+                    <div style="padding: 40px 30px;">
-    Portfolio ansehen
+                        
                        <!-- Welcome Message -->
                        <div style="background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #bbf7d0;">
                            <div style="text-align: center; margin-bottom: 20px;">
                                <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
                                    <span style="color: #ffffff; font-size: 24px;">✓</span>
                                </div>
                                <h2 style="color: #065f46; margin: 0; font-size: 22px; font-weight: 600;">Nachricht erhalten!</h2>
                            </div>
                            <p style="color: #047857; margin: 0; text-align: center; line-height: 1.6; font-size: 16px;">
                                Vielen Dank für deine Nachricht! Ich habe sie erhalten und werde mich so schnell wie möglich bei dir melden.
                            </p>
                        </div>
                        <!-- Original Message Reference -->
                        <div style="background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 30px;">
                            <h3 style="color: #374151; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
                                <span style="width: 6px; height: 6px; background: #6b7280; border-radius: 50%; margin-right: 10px;"></span>
                                Deine ursprüngliche Nachricht
                            </h3>
                            <div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #10b981;">
                                <p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
                            </div>
                        </div>
                        <!-- Next Steps -->
                        <div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 30px; border-radius: 12px; border: 1px solid #bfdbfe;">
                            <h3 style="color: #1e40af; margin: 0 0 20px 0; font-size: 18px; font-weight: 600; text-align: center;">
                                🚀 Was passiert als nächstes?
                            </h3>
                            <div style="display: grid; gap: 15px;">
                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #3b82f6;">
                                    <span style="color: #3b82f6; font-size: 20px; margin-right: 15px;">📧</span>
                                    <div>
                                        <h4 style="color: #1e40af; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Schnelle Antwort</h4>
                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Ich antworte normalerweise innerhalb von 24 Stunden</p>
                                    </div>
                                </div>
                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #8b5cf6;">
                                    <span style="color: #8b5cf6; font-size: 20px; margin-right: 15px;">💼</span>
                                    <div>
                                        <h4 style="color: #7c3aed; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Projekt-Diskussion</h4>
                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Gerne besprechen wir dein Projekt im Detail</p>
                                    </div>
                                </div>
                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #f59e0b;">
                                    <span style="color: #f59e0b; font-size: 20px; margin-right: 15px;">🤝</span>
                                    <div>
                                        <h4 style="color: #d97706; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Zusammenarbeit</h4>
                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Lass uns gemeinsam etwas Großartiges schaffen!</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Portfolio Links -->
                        <div style="text-align: center; margin-top: 30px;">
                            <h3 style="color: #374151; margin: 0 0 20px 0; font-size: 18px; font-weight: 600;">Entdecke mehr von mir</h3>
                            <div style="display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;">
                                <a href="https://dk0.dev" style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
                                    🌐 Portfolio
                                </a>
-</div>
+                                <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);">
-                `.trim(),
+                                    💻 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) => `
-            const safeName = escapeHtml(name);
+            <!DOCTYPE html>
-            const safeMsg = nl2br(escapeHtml(originalMessage));
+            <html lang="de">
-            return baseEmail({
+            <head>
-                title: `Projekt-Anfrage: danke, ${safeName}!`,
+                <meta charset="UTF-8">
-                subtitle: "Ich melde mich zeitnah",
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                bodyHtml: `
+                <title>Projekt-Anfrage - Dennis Konkol</title>
-<div style="font-size:15px;line-height:1.65;color:${BRAND.text};">
+            </head>
-  Hey ${safeName},<br><br>
+            <body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
-  mega — danke für die Projekt-Anfrage. Ich schaue mir deine Nachricht an und komme mit Rückfragen/Ideen auf dich zu.
+                <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
 </div>
-<div style="margin-top:18px;background:${BRAND.bg};border:1px solid ${BRAND.border};border-radius:16px;overflow:hidden;">
+                    <!-- Header -->
-  <div style="padding:14px 16px;background:${BRAND.sand};border-bottom:1px solid ${BRAND.border};">
+                    <div style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); padding: 40px 30px; text-align: center;">
-    <div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">Deine Projekt-Nachricht</div>
+                        <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
                            🚀 Projekt-Anfrage erhalten!
                        </h1>
                        <p style="color: #e9d5ff; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
                            Hallo ${name}, lass uns etwas Großartiges schaffen!
                        </p>
                    </div>
  <div style="padding:16px;line-height:1.65;color:${BRAND.text};font-size:14px;border-left:4px solid ${BRAND.mint};">
    ${safeMsg}
  </div>
 </div>
-<div style="margin-top:20px;text-align:center;">
+                    <!-- Content -->
-  <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;">
+                    <div style="padding: 40px 30px;">
-    Kontakt aufnehmen
+                        
                        <!-- Project Message -->
                        <div style="background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #e9d5ff;">
                            <div style="text-align: center; margin-bottom: 20px;">
                                <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
                                    <span style="color: #ffffff; font-size: 24px;">💼</span>
                                </div>
                                <h2 style="color: #6b21a8; margin: 0; font-size: 22px; font-weight: 600;">Bereit für dein Projekt!</h2>
                            </div>
                            <p style="color: #7c2d12; margin: 0; text-align: center; line-height: 1.6; font-size: 16px;">
                                Vielen Dank für deine Projekt-Anfrage! Ich bin gespannt darauf, mehr über deine Ideen zu erfahren und wie wir sie gemeinsam umsetzen können.
                            </p>
                        </div>
                        <!-- Original Message -->
                        <div style="background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 30px;">
                            <h3 style="color: #374151; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
                                <span style="width: 6px; height: 6px; background: #8b5cf6; border-radius: 50%; margin-right: 10px;"></span>
                                Deine Projekt-Nachricht
                            </h3>
                            <div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #8b5cf6;">
                                <p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
                            </div>
                        </div>
                        <!-- Process Steps -->
                        <div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 30px; border-radius: 12px; border: 1px solid #bfdbfe;">
                            <h3 style="color: #1e40af; margin: 0 0 20px 0; font-size: 18px; font-weight: 600; text-align: center;">
                                🎯 Mein Arbeitsprozess
                            </h3>
                            <div style="display: grid; gap: 15px;">
                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #3b82f6;">
                                    <span style="color: #3b82f6; font-size: 20px; margin-right: 15px;">💬</span>
                                    <div>
                                        <h4 style="color: #1e40af; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">1. Erstgespräch</h4>
                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Wir besprechen deine Anforderungen im Detail</p>
                                    </div>
                                </div>
                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #8b5cf6;">
                                    <span style="color: #8b5cf6; font-size: 20px; margin-right: 15px;">📋</span>
                                    <div>
                                        <h4 style="color: #7c3aed; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">2. Konzept & Planung</h4>
                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Ich erstelle ein detailliertes Konzept für dein Projekt</p>
                                    </div>
                                </div>
                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #10b981;">
                                    <span style="color: #10b981; font-size: 20px; margin-right: 15px;">⚡</span>
                                    <div>
                                        <h4 style="color: #059669; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">3. Entwicklung</h4>
                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Agile Entwicklung mit regelmäßigen Updates</p>
                                    </div>
                                </div>
                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #f59e0b;">
                                    <span style="color: #f59e0b; font-size: 20px; margin-right: 15px;">🎉</span>
                                    <div>
                                        <h4 style="color: #d97706; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">4. Launch & Support</h4>
                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Deployment und kontinuierlicher Support</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- CTA -->
                        <div style="text-align: center; margin-top: 30px;">
                            <a href="mailto:contact@dk0.dev?subject=Projekt-Diskussion mit ${name}" style="display: inline-block; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: #ffffff; text-decoration: none; padding: 15px 30px; border-radius: 8px; font-weight: 600; font-size: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
                                💬 Projekt besprechen
                            </a>
-</div>
+                        </div>
-                `.trim(),
+                    </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) => `
-            const safeName = escapeHtml(name);
+            <!DOCTYPE html>
-            const safeMsg = nl2br(escapeHtml(originalMessage));
+            <html lang="de">
-            return baseEmail({
+            <head>
-                title: `Danke, ${safeName}!`,
+                <meta charset="UTF-8">
-                subtitle: "Kurze Bestätigung",
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                bodyHtml: `
+                <title>Quick Response - Dennis Konkol</title>
-<div style="font-size:15px;line-height:1.65;color:${BRAND.text};">
+            </head>
-  Hey ${safeName},<br><br>
+            <body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
-  kurze Bestätigung: deine Nachricht ist angekommen. Ich melde mich bald zurück.
+                <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
 </div>
-<div style="margin-top:18px;background:${BRAND.bg};border:1px solid ${BRAND.border};border-radius:16px;overflow:hidden;">
+                    <!-- Header -->
-  <div style="padding:14px 16px;background:${BRAND.sand};border-bottom:1px solid ${BRAND.border};">
+                    <div style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); padding: 40px 30px; text-align: center;">
-    <div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">Deine Nachricht</div>
+                        <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
                            ⚡ Schnelle Antwort!
                        </h1>
                        <p style="color: #fef3c7; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
                            Hallo ${name}, danke für deine Nachricht!
                        </p>
                    </div>
-  <div style="padding:16px;line-height:1.65;color:${BRAND.text};font-size:14px;border-left:4px solid ${BRAND.mint};">
+                    
-    ${safeMsg}
+                    <!-- 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>
-</div>
+                                <h2 style="color: #92400e; margin: 0 0 15px 0; font-size: 22px; font-weight: 600;">Nachricht erhalten!</h2>
-                `.trim(),
+                                <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, responseMessage: string) => {
+        template: (name: string, originalMessage: string) => `
-            const safeName = escapeHtml(name);
+            <!DOCTYPE html>
-            const safeOriginal = nl2br(escapeHtml(originalMessage));
+            <html lang="de">
-            const safeResponse = nl2br(escapeHtml(responseMessage));
+            <head>
-            return baseEmail({
+                <meta charset="UTF-8">
-                title: `Antwort für ${safeName}`,
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                subtitle: "Neue Nachricht",
+                <title>Antwort - 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);">
  hier ist meine Antwort:
 </div>
-<div style="margin-top:14px;background:${BRAND.bg};border:1px solid ${BRAND.border};border-radius:16px;overflow:hidden;">
+                    <!-- Header -->
-  <div style="padding:14px 16px;background:${BRAND.sand};border-bottom:1px solid ${BRAND.border};">
+                    <div style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); padding: 40px 30px; text-align: center;">
-    <div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">Antwort</div>
+                        <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
                            📧 Hallo ${name}!
                        </h1>
                        <p style="color: #dbeafe; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
                            Hier ist meine Antwort auf deine Nachricht
                        </p>
                    </div>
  <div style="padding:16px;line-height:1.65;color:${BRAND.text};font-size:14px;border-left:4px solid ${BRAND.mint};">
    ${safeResponse}
  </div>
 </div>
-<div style="margin-top:16px;background:${BRAND.bg};border:1px solid ${BRAND.border};border-radius:16px;overflow:hidden;">
+                    <!-- Content -->
-  <div style="padding:14px 16px;background:${BRAND.sand};border-bottom:1px solid ${BRAND.border};">
+                    <div style="padding: 40px 30px;">
-    <div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">Deine ursprüngliche Nachricht</div>
+                        
                        <!-- Reply Message -->
                        <div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #93c5fd;">
                            <div style="text-align: center; margin-bottom: 20px;">
                                <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
                                    <span style="color: #ffffff; font-size: 24px;">💬</span>
                                </div>
-  <div style="padding:16px;line-height:1.65;color:${BRAND.text};font-size:14px;border-left:4px solid ${BRAND.border};">
+                                <h2 style="color: #1e40af; margin: 0; font-size: 22px; font-weight: 600;">Meine Antwort</h2>
    ${safeOriginal}
                            </div>
-</div>
+                            <div style="background: #ffffff; padding: 20px; border-radius: 8px; border-left: 4px solid #3b82f6;">
-                `.trim(),
+                                <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, response } = body;
+        const { to, name, template, originalMessage } = 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@]+$/;
@@ -257,6 +445,7 @@ 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 },
@@ -298,7 +487,9 @@ export async function POST(request: NextRequest) {
        // Verify transport configuration
        try {
            await transport.verify();
-        } catch (_verifyError) {
+            console.log('✅ SMTP connection verified successfully');
        } catch (verifyError) {
            console.error('❌ SMTP verification failed:', verifyError);
            return NextResponse.json(
                { error: "E-Mail-Server-Verbindung fehlgeschlagen" },
                { status: 500 },
@@ -306,27 +497,19 @@ 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,
+            html: selectedTemplate.template(name, originalMessage),
            text: `
 Hallo ${name}!
 Vielen Dank für deine Nachricht:
 ${originalMessage}
-${template === "reply" ? `\nAntwort:\n${response || ""}\n` : "\nIch werde mich so schnell wie möglich bei dir melden.\n"}
+Ich werde mich so schnell wie möglich bei dir melden.
 Beste Grüße,
 Dennis Konkol
@@ -336,18 +519,23 @@ 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",
@@ -356,6 +544,7 @@ 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,8 +2,10 @@ 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 {
@@ -13,15 +15,6 @@ 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 (defensive: headers may be undefined in tests)
@@ -93,6 +86,12 @@ 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(
@@ -115,12 +114,11 @@ export async function POST(request: NextRequest) {
            connectionTimeout: 30000, // 30 seconds
            greetingTimeout: 30000,   // 30 seconds
            socketTimeout: 60000,     // 60 seconds
-            // TLS hardening (allow insecure/self-signed only when explicitly enabled)
+            // Additional TLS options for better compatibility
-            tls:
+            tls: {
-              process.env.SMTP_ALLOW_INSECURE_TLS === "true" ||
+                rejectUnauthorized: false, // Allow self-signed certificates
-              process.env.SMTP_ALLOW_SELF_SIGNED === "true"
+                ciphers: 'SSLv3'
-                ? { rejectUnauthorized: false }
+            }
                : { rejectUnauthorized: true, minVersion: "TLSv1.2" },
        };
        // Creating transport with configured options
@@ -157,22 +155,6 @@ 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
@@ -186,79 +168,85 @@ 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:#fdfcf8;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:#292524;">
+                <body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
-                  <div style="max-width:640px;margin:0 auto;padding:28px 14px;">
+                    <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="background:#ffffff;border:1px solid #e7e5e4;border-radius:20px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,0.08);">
+                        
-                      <!-- Top bar -->
+                        <!-- Header -->
-                      <div style="background:#292524;padding:22px 26px;">
+                        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px 30px; text-align: center;">
-                        <div style="display:flex;align-items:center;justify-content:space-between;gap:16px;">
+                            <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
-                          <div style="font-weight:700;font-size:16px;letter-spacing:-0.01em;color:#fdfcf8;">
+                                📧 Neue Kontaktanfrage
-                            Dennis Konkol
+                            </h1>
-                          </div>
+                            <p style="color: #e2e8f0; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
-                          <div style="font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;font-weight:700;font-size:14px;color:#fdfcf8;">
+                                Von deinem Portfolio
-                            dk<span style="color:#ef4444;">0</span>.dev
+                            </p>
                          </div>
                        </div>
                        <div style="margin-top:10px;">
                          <div style="font-size:22px;font-weight:800;letter-spacing:-0.02em;color:#fdfcf8;">
                            Neue Kontaktanfrage
                          </div>
                          <div style="margin-top:4px;font-size:13px;color:#d6d3d1;">
                            Eingegangen am ${sentAt}
                          </div>
                        </div>
                        <div style="height:3px;background:#a7f3d0;margin-top:18px;border-radius:999px;"></div>
                        </div>
                        <!-- Content -->
-                      <div style="padding:26px;">
+                        <div style="padding: 40px 30px;">
-                        <!-- Sender -->
+                            
-                        <div style="display:flex;align-items:flex-start;gap:14px;">
+                            <!-- Contact Info Card -->
-                          <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;">
+                            <div style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #e2e8f0;">
-                            ${escapeHtml(initial)}
+                                <div style="display: flex; align-items: center; margin-bottom: 20px;">
                                    <div style="width: 50px; height: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                        <span style="color: #ffffff; font-size: 20px; font-weight: bold;">${name.charAt(0).toUpperCase()}</span>
                                    </div>
-                          <div style="flex:1;min-width:0;">
+                                    <div>
-                            <div style="font-size:18px;font-weight:800;letter-spacing:-0.01em;color:#292524;line-height:1.2;">
+                                        <h2 style="color: #1e293b; margin: 0; font-size: 24px; font-weight: 600;">${name}</h2>
-                              ${safeName}
+                                        <p style="color: #64748b; margin: 4px 0 0 0; font-size: 14px;">Kontaktanfrage</p>
                                    </div>
-                            <div style="margin-top:6px;font-size:13px;color:#78716c;line-height:1.4;">
+                                </div>
-                              <span style="font-weight:700;color:#44403c;">E-Mail:</span> ${safeEmail}<br>
+                                
-                              <span style="font-weight:700;color:#44403c;">Betreff:</span> ${safeSubject}
+                                <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 -->
+                            <!-- Message Card -->
-                        <div style="margin-top:18px;background:#fdfcf8;border:1px solid #e7e5e4;border-radius:16px;overflow:hidden;">
+                            <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="padding:14px 16px;background:#f3f1e7;border-bottom:1px solid #e7e5e4;">
+                                <div style="display: flex; align-items: center; margin-bottom: 20px;">
-                            <div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">
+                                    <div style="width: 8px; height: 8px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; margin-right: 12px;"></div>
-                              Nachricht
+                                    <h3 style="color: #1e293b; margin: 0; font-size: 18px; font-weight: 600;">Nachricht</h3>
                                </div>
-                          </div>
+                                <div style="background: #f8fafc; padding: 25px; border-radius: 8px; border-left: 4px solid #667eea;">
-                          <div style="padding:16px;line-height:1.65;color:#292524;font-size:15px;border-left:4px solid #a7f3d0;">
+                                    <p style="color: #374151; margin: 0; line-height: 1.7; font-size: 16px; white-space: pre-wrap;">${message}</p>
                            ${safeMessageHtml}
                                </div>
                            </div>
-                        <!-- CTA -->
+                            <!-- Action Button -->
-                        <div style="margin-top:22px;text-align:center;">
+                            <div style="text-align: center; margin-top: 30px;">
-                          <a href="${escapeHtml(replyHref)}"
+                                <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;">
-                             style="display:inline-block;background:#292524;color:#fdfcf8;text-decoration:none;padding:12px 18px;border-radius:999px;font-weight:800;font-size:14px;">
+                                    📬 Antworten
                            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="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e2e8f0;">
-                        <div style="font-size:12px;color:#78716c;line-height:1.5;">
+                            <div style="margin-bottom: 15px;">
-                          Automatisch generiert von <a href="${brandUrl}" style="color:#292524;text-decoration:underline;">dk0.dev</a>
+                                <span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 1px;"></span>
                        </div>
                            </div>
                            <p style="color: #64748b; margin: 0; font-size: 14px; line-height: 1.5;">
                                Diese E-Mail wurde automatisch von deinem Portfolio generiert.<br>
                                <strong>Dennis Konkol Portfolio</strong> • <a href="https://dki.one" style="color: #667eea; text-decoration: none;">dki.one</a>
                            </p>
                            <p style="color: #94a3b8; margin: 10px 0 0 0; font-size: 12px;">
                                ${new Date().toLocaleString('de-DE', { 
                                    year: 'numeric', 
                                    month: 'long', 
                                    day: 'numeric', 
                                    hour: '2-digit', 
                                    minute: '2-digit' 
                                })}
                            </p>
                        </div>
                    </div>
                </body>
                </html>
@@ -273,7 +261,7 @@ Nachricht:
 ${message}
 ---
-Diese E-Mail wurde automatisch von dk0.dev generiert.
+Diese E-Mail wurde automatisch von deinem Portfolio generiert.
            `,
        };
--- a/app/api/fetchAllProjects/route.tsx
+++ b/app/api/fetchAllProjects/route.tsx
@@ -1,58 +1,66 @@
 import { NextResponse } from "next/server";
 import NodeCache from "node-cache";
-import { prisma } from "@/lib/prisma";
+
 // Use a dynamic import for node-fetch so tests that mock it (via jest.mock) are respected
 async function getFetch() {
  try {
    const mod = await import("node-fetch");
    // support both CJS and ESM interop
    return (mod as { default: unknown }).default ?? mod;
  } catch (_err) {
    return globalThis.fetch;
  }
 }
 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 LegacyPost = {
+type GhostPost = {
  slug: string;
  id: string;
  title: string;
-  meta_description: string | null;
+  feature_image: string;
  visibility: string;
  published_at: string;
  updated_at: string;
  html: string;
  reading_time: number;
  meta_description: string;
 };
-type LegacyPostsResponse = {
+type GhostPostsResponse = {
-  posts: Array<LegacyPost>;
+  posts: Array<GhostPost>;
 };
 export async function GET() {
-  const cacheKey = "projects:legacyPosts";
+  const cacheKey = "ghostPosts";
-  const cachedPosts = cache.get<LegacyPostsResponse>(cacheKey);
+  const cachedPosts = cache.get<GhostPostsResponse>(cacheKey);
  if (cachedPosts) {
    return NextResponse.json(cachedPosts);
  }
  try {
-    const projects = await prisma.project.findMany({
+    const fetchFn = await getFetch();
-      where: { published: true },
+    const response = await (fetchFn as unknown as typeof fetch)(
-      orderBy: { updatedAt: "desc" },
+      `${GHOST_API_URL}/ghost/api/content/posts/?key=${GHOST_API_KEY}&limit=all`,
-      select: {
+    );
-        id: true,
+    const posts: GhostPostsResponse =
-        slug: true,
+      (await response.json()) as GhostPostsResponse;
        title: true,
        updatedAt: true,
        metaDescription: true,
      },
    });
-    const payload: LegacyPostsResponse = {
+    if (!posts || !posts.posts) {
-      posts: projects.map((p) => ({
+      console.error("Invalid posts data");
-        id: String(p.id),
+      return NextResponse.json([]);
-        slug: p.slug,
+    }
        title: p.title,
        meta_description: p.metaDescription ?? null,
        updated_at: (p.updatedAt ?? new Date()).toISOString(),
      })),
    };
-    cache.set(cacheKey, payload);
+    cache.set(cacheKey, posts); // Daten im Cache speichern
-    return NextResponse.json(payload);
+
    return NextResponse.json(posts);
  } catch (error) {
-    console.error("Failed to fetch projects:", error);
+    console.error("Failed to fetch posts from Ghost:", error);
    return NextResponse.json(
      { error: "Failed to fetch projects" },
      { status: 500 },
--- a/app/api/fetchProject/route.tsx
+++ b/app/api/fetchProject/route.tsx
@@ -1,8 +1,10 @@
 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");
@@ -12,37 +14,59 @@ export async function GET(request: Request) {
  }
  try {
-    const project = await prisma.project.findUnique({
+    // Debug: show whether fetch is present/mocked
      where: { slug },
      select: {
        id: true,
        slug: true,
        title: true,
        updatedAt: true,
        metaDescription: true,
        description: true,
        content: true,
      },
    });
-    if (!project) {
+    /* eslint-disable @typescript-eslint/no-explicit-any */
-      return NextResponse.json({ posts: [] }, { status: 200 });
+    console.log(
      "DEBUG fetch in fetchProject:",
      typeof (globalThis as any).fetch,
      "globalIsMock:",
      !!(globalThis as any).fetch?._isMockFunction,
    );
    // Try global fetch first (as tests often mock it). If it fails or returns undefined,
    // fall back to dynamically importing node-fetch.
    let response: any;
    if (typeof (globalThis as any).fetch === "function") {
      try {
        response = await (globalThis as any).fetch(
          `${GHOST_API_URL}/ghost/api/content/posts/slug/${slug}/?key=${GHOST_API_KEY}`,
        );
      } catch (_e) {
        response = undefined;
      }
    }
-    // Legacy shape (Ghost-like) for compatibility with older frontend/tests.
+    if (!response || typeof response.ok === "undefined") {
-    return NextResponse.json({
+      try {
-      posts: [
+        const mod = await import("node-fetch");
-        {
+        const nodeFetch = (mod as any).default ?? mod;
-          id: String(project.id),
+        response = await (nodeFetch as any)(
-          title: project.title,
+          `${GHOST_API_URL}/ghost/api/content/posts/slug/${slug}/?key=${GHOST_API_KEY}`,
-          meta_description: project.metaDescription ?? project.description ?? "",
+        );
-          slug: project.slug,
+      } catch (_err) {
-          updated_at: (project.updatedAt ?? new Date()).toISOString(),
+        response = undefined;
-        },
+      }
-      ],
+    }
-    });
+    /* eslint-enable @typescript-eslint/no-explicit-any */
    // Debug: inspect the response returned from the fetch
    // Debug: inspect the response returned from the fetch
    console.log("DEBUG fetch response:", response);
    if (!response || !response.ok) {
      throw new Error(
        `Failed to fetch post: ${response?.statusText ?? "no response"}`,
      );
    }
    const post = await response.json();
    return NextResponse.json(post);
  } catch (error) {
-    console.error("Failed to fetch project:", error);
+    console.error("Failed to fetch post from Ghost:", 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
@@ -1,21 +1,9 @@
-import { NextRequest, NextResponse } from "next/server";
+import { NextResponse } from "next/server";
 import { decodeHtmlEntitiesServer } from "@/lib/html-decode";
-export async function POST(request: NextRequest) {
+export async function POST(request: Request) {
  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 || [];
@@ -30,193 +18,65 @@ export async function POST(request: NextRequest) {
    // Call your n8n chat webhook
    const n8nWebhookUrl = process.env.N8N_WEBHOOK_URL;
-    if (!n8nWebhookUrl || n8nWebhookUrl.trim() === '') {
+    if (!n8nWebhookUrl) {
-      console.error("N8N_WEBHOOK_URL not configured. Environment check:", {
+      console.error("N8N_WEBHOOK_URL not configured");
        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
+    console.log(`Sending to n8n: ${n8nWebhookUrl}/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 response = await fetch(`${n8nWebhookUrl}/webhook/chat`, {
    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,
+          Authorization: `Bearer ${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}`);
-        console.error(`n8n webhook failed with status: ${response.status}`, {
+      throw new Error(`n8n webhook failed: ${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:", data);
      console.log("n8n response data type:", typeof data);
      console.log("n8n response is array:", Array.isArray(data));
-    // Try multiple ways to extract the reply
+    const reply =
-    let reply: string | undefined = undefined;
+      data.reply ||
-
+      data.message ||
-    // Direct fields
+      data.response ||
-    if (data.reply) reply = data.reply;
+      data.text ||
-    else if (data.message) reply = data.message;
+      data.content ||
-    else if (data.response) reply = data.response;
+      (Array.isArray(data) && data[0]?.reply);
    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));
+      console.warn("n8n response missing reply field:", data);
-      throw new Error("Invalid response format from n8n - no reply field found");
+      // If n8n returns successfully but without a clear reply field,
      // we might want to show the fallback or a generic error,
      // but strictly speaking we shouldn't show "Couldn't process".
      // Let's try to stringify the whole data if it's small, or use fallback.
      if (data && typeof data === "object" && Object.keys(data).length > 0) {
        // It returned something, but we don't know what field to use.
        // Check for common n8n structure
        if (data.output) return NextResponse.json({ reply: data.output });
        if (data.data) return NextResponse.json({ reply: data.data });
      }
      throw new Error("Invalid response format from n8n");
    }
      // Decode HTML entities in the reply
      const decodedReply = decodeHtmlEntitiesServer(String(reply));
    return NextResponse.json({
-        reply: decodedReply,
+      reply: reply,
    });
-    } catch (fetchError: unknown) {
+  } catch (error) {
      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
--- a/app/api/n8n/generate-image/route.ts
+++ b/app/api/n8n/generate-image/route.ts
@@ -1,5 +1,4 @@
 import { NextRequest, NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
 /**
 * POST /api/n8n/generate-image
@@ -14,24 +13,6 @@ import { prisma } from "@/lib/prisma";
 */
 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;
@@ -58,16 +39,23 @@ export async function POST(req: NextRequest) {
      );
    }
-    const projectIdNum = typeof projectId === "string" ? parseInt(projectId, 10) : Number(projectId);
+    // Fetch project data first (needed for the new webhook format)
-    if (!Number.isFinite(projectIdNum)) {
+    const projectResponse = await fetch(
-      return NextResponse.json({ error: "projectId must be a number" }, { status: 400 });
+      `${process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000"}/api/projects/${projectId}`,
      {
        method: "GET",
        cache: "no-store",
      },
    );
    if (!projectResponse.ok) {
      return NextResponse.json(
        { error: "Project not found" },
        { status: 404 },
      );
    }
-    // Fetch project data directly (avoid HTTP self-calls)
+    const project = await projectResponse.json();
    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) {
@@ -77,7 +65,7 @@ export async function POST(req: NextRequest) {
            success: true,
            message:
              "Project already has an image. Use regenerate=true to force regeneration.",
-            projectId: projectIdNum,
+            projectId: projectId,
            existingImageUrl: project.imageUrl,
            regenerated: false,
          },
@@ -100,7 +88,7 @@ export async function POST(req: NextRequest) {
          }),
        },
        body: JSON.stringify({
-          projectId: projectIdNum,
+          projectId: projectId,
          projectData: {
            title: project.title || "Unknown Project",
            category: project.category || "Technology",
@@ -190,13 +178,22 @@ export async function POST(req: NextRequest) {
    // If we got an image URL, we should update the project with it
    if (imageUrl) {
-      try {
+      // Update project with the new image URL
-        await prisma.project.update({
+      const updateResponse = await fetch(
-          where: { id: projectIdNum },
+        `${process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000"}/api/projects/${projectId}`,
-          data: { imageUrl, updatedAt: new Date() },
+        {
-        });
+          method: "PUT",
-      } catch {
+          headers: {
-        // Non-fatal: image URL can still be returned to caller
+            "Content-Type": "application/json",
            "x-admin-request": "true",
          },
          body: JSON.stringify({
            imageUrl: imageUrl,
          }),
        },
      );
      if (!updateResponse.ok) {
        console.warn("Failed to update project with image URL");
      }
    }
@@ -205,7 +202,7 @@ export async function POST(req: NextRequest) {
      {
        success: true,
        message: "AI image generation completed successfully",
-        projectId: projectIdNum,
+        projectId: projectId,
        imageUrl: imageUrl,
        generatedAt: generatedAt,
        fileSize: fileSize,
@@ -242,17 +239,23 @@ export async function GET(req: NextRequest) {
      );
    }
-    const projectIdNum = parseInt(projectId, 10);
+    // Fetch project to check image status
-    if (!Number.isFinite(projectIdNum)) {
+    const projectResponse = await fetch(
-      return NextResponse.json({ error: "projectId must be a number" }, { status: 400 });
+      `${process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000"}/api/projects/${projectId}`,
-    }
+      {
-    const project = await prisma.project.findUnique({ where: { id: projectIdNum } });
+        method: "GET",
-    if (!project) {
+        cache: "no-store",
      },
    );
    if (!projectResponse.ok) {
      return NextResponse.json({ error: "Project not found" }, { status: 404 });
    }
    const project = await projectResponse.json();
    return NextResponse.json({
-      projectId: projectIdNum,
+      projectId: parseInt(projectId),
      title: project.title,
      hasImage: !!project.imageUrl,
      imageUrl: project.imageUrl || null,
--- a/app/api/n8n/hardcover/currently-reading/route.ts
+++ b/app/api/n8n/hardcover/currently-reading/route.ts
@@ -1,131 +0,0 @@
 // 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,92 +1,29 @@
 // app/api/n8n/status/route.ts
-import { NextRequest, NextResponse } from "next/server";
+import { NextResponse } from "next/server";
 // Cache für 30 Sekunden, damit wir n8n nicht zuspammen
 export const revalidate = 30;
-export async function GET(request: NextRequest) {
+export async function GET() {
  // Rate limiting for n8n status 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" ? 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()}`;
+    const res = await fetch(
-    console.log(`Fetching status from: ${statusUrl}`);
+      `${process.env.N8N_WEBHOOK_URL}/webhook/denshooter-71242/status?t=${Date.now()}`,
-
+      {
    // 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.
+          "Content-Type": "application/json",
          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');
+      throw new Error(`n8n error: ${res.status}`);
        console.error(`n8n status webhook failed: ${res.status}`, errorText);
        throw new Error(`n8n error: ${res.status} - ${errorText}`);
    }
-      const raw = await res.text().catch(() => "");
+    const data = await res.json();
      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;
@@ -105,23 +42,8 @@ export async function GET(request: NextRequest) {
    }
    return NextResponse.json(statusData);
-    } catch (fetchError: unknown) {
+  } catch (error) {
      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" },
--- a/app/api/projects/[id]/route.ts
+++ b/app/api/projects/[id]/route.ts
@@ -1,9 +1,8 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { prisma } from '@/lib/prisma';
 import { apiCache } from '@/lib/cache';
-import { checkRateLimit, getRateLimitHeaders, requireSessionAuth } from '@/lib/auth';
+import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
 import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
 import { generateUniqueSlug } from '@/lib/slug';
 export async function GET(
  request: NextRequest,
@@ -12,9 +11,6 @@ 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 }
@@ -78,48 +74,18 @@ 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, slug, defaultLocale, ...projectData } = data;
+    const { difficulty, ...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 } : {})
@@ -181,14 +147,9 @@ export async function DELETE(
        { 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 }
--- a/app/api/projects/[id]/translation/route.ts
+++ b/app/api/projects/[id]/translation/route.ts
@@ -1,71 +0,0 @@
 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,47 +1,18 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { NextResponse } from 'next/server';
-import { prisma, projectService } from '@/lib/prisma';
+import { projectService } from '@/lib/prisma';
 import { requireSessionAuth } from '@/lib/auth';
-export async function GET(request: NextRequest) {
+export async function GET() {
  try {
-    const isAdminRequest = request.headers.get('x-admin-request') === 'true';
+    // Get all projects with full data
-    if (!isAdminRequest) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
+    const projectsResult = await projectService.getAllProjects();
    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: '2.0',
+      version: '1.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,309 +1,76 @@
-import { NextRequest, NextResponse } from "next/server";
+import { NextRequest, NextResponse } from 'next/server';
-import { prisma, projectService } from "@/lib/prisma";
+import { 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 isAdminRequest = request.headers.get("x-admin-request") === "true";
+    const body = await request.json();
    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 (!Array.isArray(body.projects)) {
+    if (!body.projects || !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 as ImportProject[]) {
+    for (const projectData of body.projects) {
      try {
        // Check if project already exists (by title)
-        const title = asString(projectData.title);
+        const existingProjectsResult = await projectService.getAllProjects();
-        if (!title) continue;
+        const existingProjects = existingProjectsResult.projects || existingProjectsResult;
-        const exists = existingTitles.has(title);
+        const exists = existingProjects.some(p => p.title === projectData.title);
        if (exists) {
          results.skipped++;
-          results.errors.push(`Project "${title}" already exists`);
+          results.errors.push(`Project "${projectData.title}" already exists`);
          continue;
        }
        // Create new project
-        const created = await projectService.createProject({
+        await projectService.createProject({
-          slug: asString(projectData.slug) ?? undefined,
+          title: projectData.title,
-          defaultLocale: asString(projectData.defaultLocale) ?? "en",
+          description: projectData.description,
-          title,
+          content: projectData.content,
-          description: asString(projectData.description) ?? "",
+          tags: projectData.tags || [],
-          content: projectData.content as Prisma.InputJsonValue | undefined,
+          category: projectData.category,
-          tags: (asStringArray(projectData.tags) ?? []) as string[],
+          featured: projectData.featured || false,
-          category: asString(projectData.category) ?? "General",
+          github: projectData.github,
-          featured: projectData.featured === true,
+          live: projectData.live,
          github: asString(projectData.github) ?? undefined,
          live: asString(projectData.live) ?? undefined,
          published: projectData.published !== false, // Default to true
-          imageUrl: asString(projectData.imageUrl) ?? undefined,
+          imageUrl: projectData.imageUrl,
-          difficulty: asString(projectData.difficulty) ?? "Intermediate",
+          difficulty: projectData.difficulty || 'Intermediate',
-          timeToComplete: asString(projectData.timeToComplete) ?? undefined,
+          timeToComplete: projectData.timeToComplete,
-          technologies: (asStringArray(projectData.technologies) ?? []) as string[],
+          technologies: projectData.technologies || [],
-          challenges: (asStringArray(projectData.challenges) ?? []) as string[],
+          challenges: projectData.challenges || [],
-          lessonsLearned: (asStringArray(projectData.lessonsLearned) ?? []) as string[],
+          lessonsLearned: projectData.lessonsLearned || [],
-          futureImprovements: (asStringArray(projectData.futureImprovements) ?? []) as string[],
+          futureImprovements: projectData.futureImprovements || [],
-          demoVideo: asString(projectData.demoVideo) ?? undefined,
+          demoVideo: projectData.demoVideo,
-          screenshots: (asStringArray(projectData.screenshots) ?? []) as string[],
+          screenshots: projectData.screenshots || [],
-          colorScheme: asString(projectData.colorScheme) ?? "Dark",
+          colorScheme: projectData.colorScheme || 'Dark',
          accessibility: projectData.accessibility !== false, // Default to true
-          performance: (projectData.performance as Record<string, unknown> | null) || {
+          performance: projectData.performance || {
            lighthouse: 0,
-            bundleSize: "0KB",
+            bundleSize: '0KB',
-            loadTime: "0s",
+            loadTime: '0s'
          },
-          analytics: (projectData.analytics as Record<string, unknown> | null) || {
+          analytics: projectData.analytics || {
            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++;
-        const title = asString(projectData.title) ?? "unknown";
+        results.errors.push(`Failed to import "${projectData.title}": ${error instanceof Error ? error.message : 'Unknown error'}`);
        results.errors.push(
          `Failed to import "${title}": ${error instanceof Error ? error.message : "Unknown error"}`,
        );
      }
    }
@@ -313,10 +80,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,25 +1,21 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { prisma } from '@/lib/prisma';
 import { apiCache } from '@/lib/cache';
-import { requireSessionAuth, checkRateLimit, getRateLimitHeaders, getClientIp } from '@/lib/auth';
+import { requireSessionAuth, checkRateLimit, getRateLimitHeaders } 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 = getClientIp(request);
+    const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
-    const rlKey = ip !== "unknown" ? ip : `dev_unknown:${request.headers.get("user-agent") || "ua"}`;
+    if (!checkRateLimit(ip, 10, 60000)) { // 10 requests per minute
    // 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(rlKey, max, 60000)
+            ...getRateLimitHeaders(ip, 10, 60000)
          } 
        }
      );
@@ -34,10 +30,8 @@ export async function GET(request: NextRequest) {
      }
    }
    const { searchParams } = new URL(request.url);
-    const pageRaw = parseInt(searchParams.get('page') || '1');
+    const page = parseInt(searchParams.get('page') || '1');
-    const limitRaw = parseInt(searchParams.get('limit') || '50');
+    const limit = 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');
@@ -151,34 +145,16 @@ 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, slug, defaultLocale, ...projectData } = data;
+    const { difficulty, ...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' },
--- a/app/api/projects/search/route.ts
+++ b/app/api/projects/search/route.ts
@@ -9,15 +9,28 @@ export async function GET(request: NextRequest) {
    const category = searchParams.get('category');
    if (slug) {
-      const project = await prisma.project.findFirst({
+      // Search by slug (convert title to slug format)
      const projects = await prisma.project.findMany({
        where: {
-          published: true,
+          published: true
          slug,
        },
-        orderBy: { createdAt: 'desc' },
+        orderBy: { createdAt: 'desc' }
      });
-      return NextResponse.json({ projects: project ? [project] : [] });
+      // Find exact match by converting titles to slugs
      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,22 +1,164 @@
 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";
+export const runtime = "nodejs"; // Force Node runtime
 // Read Ghost API config at runtime, tests may set env vars in beforeAll
 // Funktion, um die XML für die Sitemap zu generieren
 function generateXml(sitemapRoutes: { url: string; lastModified: string }[]) {
  const xmlHeader = '<?xml version="1.0" encoding="UTF-8"?>';
  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() {
-  try {
+  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
-    const entries = await getSitemapEntries();
+
-    const xml = generateSitemapXml(entries);
+  // 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",
    },
  ];
  // In test environment we can short-circuit and use a mocked posts payload
  if (process.env.NODE_ENV === "test" && process.env.GHOST_MOCK_POSTS) {
    const mockData = JSON.parse(process.env.GHOST_MOCK_POSTS);
    const projects = (mockData as ProjectsData).posts || [];
    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];
    const xml = generateXml(allRoutes);
    // For tests return a plain object so tests can inspect `.body` easily
    if (process.env.NODE_ENV === "test") {
      return new NextResponse(xml, {
        headers: { "Content-Type": "application/xml" },
      });
-  } catch (error) {
+    }
-    console.error("Failed to generate sitemap:", error);
+
    // Fail closed: return minimal sitemap
    const xml = generateSitemapXml([]);
    return new NextResponse(xml, {
-      status: 500,
+      headers: { "Content-Type": "application/xml" },
    });
  }
  try {
    // Debug: show whether fetch is present/mocked
    // Try global fetch first (tests may mock global.fetch)
    let response: Response | undefined;
    try {
      if (typeof globalThis.fetch === "function") {
        response = await globalThis.fetch(
          `${process.env.GHOST_API_URL}/ghost/api/content/posts/?key=${process.env.GHOST_API_KEY}&limit=all`,
        );
        // Debug: inspect the result
        console.log("DEBUG sitemap global fetch returned:", response);
      }
    } catch (_e) {
      response = undefined;
    }
    if (!response || typeof response.ok === "undefined" || !response.ok) {
      try {
        const mod = await import("node-fetch");
        const nodeFetch = mod.default ?? mod;
        response = await (nodeFetch as unknown as typeof fetch)(
          `${process.env.GHOST_API_URL}/ghost/api/content/posts/?key=${process.env.GHOST_API_KEY}&limit=all`,
        );
      } catch (err) {
        console.log("Failed to fetch posts from Ghost:", err);
        return new NextResponse(generateXml(staticRoutes), {
          headers: { "Content-Type": "application/xml" },
        });
      }
    }
    if (!response || !response.ok) {
      console.error(
        `Failed to fetch posts: ${response?.statusText ?? "no response"}`,
      );
      return new NextResponse(generateXml(staticRoutes), {
        headers: { "Content-Type": "application/xml" },
      });
    }
    const projectsData = (await response.json()) as ProjectsData;
    const projects = projectsData.posts;
    // Dynamische Projekt-Routen generieren
    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);
    // Rückgabe der statischen Routen, falls Fehler auftritt
    return new NextResponse(generateXml(staticRoutes), {
      headers: { "Content-Type": "application/xml" },
    });
  }
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -1,12 +1,8 @@
 "use client";
 import { useState, useEffect } from "react";
 import { motion, Variants } from "framer-motion";
 import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb } from "lucide-react";
 import { useEffect, useState } from "react";
 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 },
@@ -20,72 +16,56 @@ const staggerContainer: Variants = {
 };
 const fadeInUp: Variants = {
-  hidden: { opacity: 0, y: 20 },
+  hidden: { opacity: 0, y: 30 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
-      duration: 0.5,
+      duration: 1,
      ease: [0.25, 0.1, 0.25, 1],
    },
  },
 };
 const About = () => {
-  const locale = useLocale();
+  const [mounted, setMounted] = useState(false);
  const t = useTranslations("home.about");
  const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
  useEffect(() => {
-    (async () => {
+    setMounted(true);
-      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: t("techStack.categories.frontendMobile"),
+      category: "Frontend & Mobile",
      icon: Globe,
      items: ["Next.js", "Tailwind CSS", "Flutter"],
    },
    {
-      category: t("techStack.categories.backendDevops"),
+      category: "Backend & DevOps",
      icon: Server,
      items: ["Docker Swarm", "Traefik", "Nginx Proxy Manager", "Redis"],
    },
    {
-      category: t("techStack.categories.toolsAutomation"),
+      category: "Tools & Automation",
      icon: Wrench,
-      items: ["Git", "CI/CD", "n8n", t("techStack.items.selfHostedServices")],
+      items: ["Git", "CI/CD", "n8n", "Self-hosted Services"],
    },
    {
-      category: t("techStack.categories.securityAdmin"),
+      category: "Security & Admin",
      icon: Shield,
      items: ["CrowdSec", "Suricata", "Mailcow"],
    },
  ];
  const hobbies: Array<{ icon: typeof Code; text: string }> = [
-    { icon: Code, text: t("hobbies.selfHosting") },
+    { icon: Code, text: "Self-Hosting & DevOps" },
-    { icon: Gamepad2, text: t("hobbies.gaming") },
+    { icon: Gamepad2, text: "Gaming" },
-    { icon: Server, text: t("hobbies.gameServers") },
+    { icon: Server, text: "Setting up Game Servers" },
-    { icon: Activity, text: t("hobbies.jogging") },
+    { icon: Activity, text: "Jogging to clear my mind and stay active" },
  ];
  if (!mounted) return null;
  return (
    <section
      id="about"
@@ -105,21 +85,32 @@ const About = () => {
              variants={fadeInUp}
              className="text-4xl md:text-5xl font-bold text-stone-900"
            >
-              {t("title")}
+              About Me
            </motion.h2>
            <motion.div
              variants={fadeInUp}
              className="prose prose-stone prose-lg text-stone-700 space-y-4"
            >
-              {cmsDoc ? (
+              <p>
-                <RichTextClient doc={cmsDoc} className="prose prose-stone max-w-none" />
+                Hi, I&apos;m Dennis – a student and passionate self-hoster based
-              ) : (
+                in Osnabrück, Germany.
-                <>
+              </p>
-                  <p>{t("p1")}</p>
+              <p>
-                  <p>{t("p2")}</p>
+                I love building full-stack web applications with{" "}
-                  <p>{t("p3")}</p>
+                <strong>Next.js</strong> and mobile apps with{" "}
-                </>
+                <strong>Flutter</strong>. But what really excites me is{" "}
-              )}
+                <strong>DevOps</strong>: I run my own infrastructure on{" "}
                <strong>IONOS</strong> and <strong>OVHcloud</strong>, managing
                everything with <strong>Docker Swarm</strong>,{" "}
                <strong>Traefik</strong>, and automated CI/CD pipelines with my
                own runners.
              </p>
              <p>
                When I&apos;m not coding or tinkering with servers, you&apos;ll
                find me <strong>gaming</strong>, <strong>jogging</strong>, or
                experimenting with new tech like game servers or automation
                workflows with <strong>n8n</strong>.
              </p>
              <motion.div
                variants={fadeInUp}
                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"
@@ -128,10 +119,12 @@ const About = () => {
                  <Lightbulb size={20} className="text-stone-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <p className="text-sm font-semibold text-stone-800 mb-1">
-                      {t("funFactTitle")}
+                      Fun Fact
                    </p>
                    <p className="text-sm text-stone-700 leading-relaxed">
-                      {t("funFactBody")}
+                      Even though I automate a lot, I still use pen and paper
                      for my calendar and notes – it helps me clear my head and
                      stay focused.
                    </p>
                  </div>
                </div>
@@ -152,7 +145,7 @@ const About = () => {
                variants={fadeInUp}
                className="text-2xl font-bold text-stone-900 mb-6"
              >
-                {t("techStackTitle")}
+                My Tech Stack
              </motion.h3>
              <div className="grid grid-cols-1 gap-4">
                {techStack.map((stack, idx) => (
@@ -163,7 +156,7 @@ const About = () => {
                      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 ${
+                    className={`p-5 rounded-xl border-2 transition-all 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
@@ -210,7 +203,7 @@ const About = () => {
                variants={fadeInUp}
                className="text-xl font-bold text-stone-900 mb-4"
              >
-                {t("hobbiesTitle")}
+                When I&apos;m Not Coding
              </motion.h3>
              <div className="space-y-3">
                {hobbies.map((hobby, idx) => (
@@ -222,7 +215,7 @@ const About = () => {
                      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 ${
+                    className={`flex items-center gap-3 p-4 rounded-xl border-2 transition-all 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
@@ -240,14 +233,6 @@ const About = () => {
                ))}
              </div>
            </div>
            {/* Currently Reading */}
            <motion.div
              variants={fadeInUp}
              className="mt-8"
            >
              <CurrentlyReading />
            </motion.div>
          </motion.div>
        </div>
      </div>
--- a/app/components/ActivityFeed.tsx
+++ b/app/components/ActivityFeed.tsx
--- a/app/components/BackgroundBlobsClient.tsx
+++ b/app/components/BackgroundBlobsClient.tsx
@@ -1,17 +1,11 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import dynamic from "next/dynamic";
-import BackgroundBlobs from "@/components/BackgroundBlobs";
+import React from "react";
 // Dynamically import the heavy framer-motion component on the client only
 const BackgroundBlobs = dynamic(() => import("@/components/BackgroundBlobs"), { ssr: false });
 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
@@ -20,47 +20,21 @@ interface Message {
 }
 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");
+  const [conversationId, setConversationId] = useState(() => {
-
+    // Generate or retrieve conversation ID
-  useEffect(() => {
+    if (typeof window !== "undefined") {
    setMounted(true);
    // Generate or retrieve conversation ID only on client
    try {
      const stored = localStorage.getItem("chatSessionId");
-      if (stored) {
+      if (stored) return stored;
-        setConversationId(stored);
+      const newId = crypto.randomUUID();
        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);
+      return 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)}`);
+    return "default";
-    }
+  });
  }, []);
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
@@ -77,18 +51,9 @@ export default function ChatWidget() {
    }
  }, [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 {
@@ -96,51 +61,18 @@ export default function ChatWidget() {
          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 load chat history", e);
              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! 🚀",
+            text: "Hi! I&apos;m Dennis&apos;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(),
          },
@@ -152,14 +84,7 @@ export default function ChatWidget() {
  // 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]);
@@ -195,34 +120,14 @@ export default function ChatWidget() {
      });
      if (!response.ok) {
-        const errorText = await response.text().catch(() => "Unknown error");
+        throw new Error("Failed to get response");
        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,
+        text: data.reply || "Sorry, I couldn't process that. Please try again.",
        sender: "bot",
        timestamp: new Date(),
      };
@@ -270,11 +175,6 @@ export default function ChatWidget() {
    ]);
  };
  // Don't render until mounted to prevent hydration mismatch
  if (!mounted) {
    return null;
  }
  return (
    <>
      {/* Chat Button */}
@@ -292,15 +192,15 @@ export default function ChatWidget() {
                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"
+            className="fixed bottom-20 left-4 md:bottom-6 md:left-6 z-30 bg-gradient-to-br from-blue-500 to-purple-600 text-white p-3 rounded-full shadow-2xl hover:shadow-blue-500/50 hover:scale-110 transition-all duration-300 group cursor-pointer"
            aria-label="Open chat"
          >
-            <MessageCircle size={24} />
+            <MessageCircle size={20} />
-            <span className="absolute top-0 right-0 w-3 h-3 bg-green-500 rounded-full animate-pulse shadow-sm border-2 border-white" />
+            <span className="absolute -top-1 -right-1 w-3 h-3 bg-green-400 rounded-full animate-pulse" />
            {/* 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">
+            <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-black/90 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
-              Chat with AI
+              Chat with AI assistant
            </span>
          </motion.div>
        )}
@@ -310,43 +210,40 @@ export default function ChatWidget() {
      <AnimatePresence>
        {isOpen && (
          <motion.div
-            data-chat-widget
+            initial={{ opacity: 0, y: 20, scale: 0.95 }}
-            initial={{ opacity: 0, y: 20, scale: 0.95, filter: "blur(10px)" }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
-            animate={{ opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }}
+            exit={{ opacity: 0, y: 20, scale: 0.95 }}
-            exit={{ opacity: 0, y: 20, scale: 0.95, filter: "blur(10px)" }}
+            transition={{ type: "spring", damping: 25, stiffness: 300 }}
-            transition={{ type: "spring", damping: 30, stiffness: 400 }}
+            className="fixed bottom-20 left-4 md:bottom-6 md:left-6 z-30 w-[300px] sm:w-[340px] md:w-[380px] max-w-[calc(100vw-2rem)] h-[450px] sm:h-[500px] md:h-[550px] max-h-[calc(100vh-10rem)] bg-white dark:bg-gray-900 rounded-2xl shadow-2xl flex flex-col overflow-hidden border border-gray-200 dark:border-gray-800"
            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="bg-gradient-to-br from-blue-500 to-purple-600 text-white p-3 md:p-4 flex items-center justify-between">
              <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">
+                  <div className="w-10 h-10 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center">
-                    <Sparkles size={18} className="text-stone-800" />
+                    <Sparkles size={20} />
                  </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" />
+                  <span className="absolute bottom-0 right-0 w-3 h-3 bg-green-400 rounded-full border-2 border-white" />
                </div>
-                <div className="min-w-0 flex-1">
+                <div>
-                  <h3 className="font-bold text-sm truncate text-stone-900 tracking-tight">
+                  <h3 className="font-bold text-sm">
-                    Assistant
+                    Dennis&apos;s AI Assistant
                  </h3>
-                  <p className="text-[11px] font-medium text-stone-500 truncate">
+                  <p className="text-xs text-white/80">Always online</p>
                    Powered by AI
                  </p>
                </div>
              </div>
-              <div className="flex items-center gap-1">
+              <div className="flex items-center gap-2">
                <button
                  onClick={clearChat}
-                  className="p-2 hover:bg-stone-200/40 rounded-full transition-colors text-stone-500 hover:text-red-500"
+                  className="p-2 hover:bg-white/10 rounded-lg transition-colors text-white/80 hover:text-white"
                  title="Clear conversation"
                >
-                  <Trash2 size={16} />
+                  <Trash2 size={18} />
                </button>
                <button
                  onClick={() => setIsOpen(false)}
-                  className="p-2 hover:bg-stone-200/40 rounded-full transition-colors text-stone-500 hover:text-stone-900"
+                  className="p-2 hover:bg-white/10 rounded-lg transition-colors"
                  aria-label="Close chat"
                >
                  <X size={20} />
@@ -355,7 +252,7 @@ export default function ChatWidget() {
            </div>
            {/* Messages */}
-            <div className="flex-1 overflow-y-auto scrollbar-hide p-4 space-y-4 bg-transparent">
+            <div className="flex-1 overflow-y-auto p-3 md:p-4 space-y-3 md:space-y-4 bg-gray-50 dark:bg-gray-950">
              {messages.map((message) => (
                <motion.div
                  key={message.id}
@@ -364,22 +261,20 @@ export default function ChatWidget() {
                  className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}
                >
                  <div
-                    className={`max-w-[85%] rounded-2xl px-4 py-3 shadow-sm ${
+                    className={`max-w-[80%] rounded-2xl px-4 py-2 ${
                      message.sender === "user"
-                        ? "bg-stone-900 text-white"
+                        ? "bg-gradient-to-br from-blue-500 to-purple-600 text-white"
-                        : "bg-white/70 text-stone-900 border border-white/60"
+                        : "bg-white dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-200 dark:border-gray-700"
                    }`}
                  >
-                    <p className={`text-sm whitespace-pre-wrap break-words leading-relaxed ${
+                    <p className="text-sm whitespace-pre-wrap break-words">
                      message.sender === "user" ? "text-white/90 font-normal" : "text-stone-900 font-medium"
                    }`}>
                      {message.text}
                    </p>
                    <p
-                      className={`text-[10px] mt-1.5 ${
+                      className={`text-[10px] mt-1 ${
                        message.sender === "user"
-                          ? "text-stone-400"
+                          ? "text-white/60"
-                          : "text-stone-500"
+                          : "text-gray-500 dark:text-gray-400"
                      }`}
                    >
                      {message.timestamp.toLocaleTimeString([], {
@@ -398,11 +293,11 @@ export default function ChatWidget() {
                  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="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl px-4 py-3">
-                    <div className="flex gap-1.5">
+                    <div className="flex gap-1">
                      <motion.div
-                        className="w-1.5 h-1.5 bg-stone-500 rounded-full"
+                        className="w-2 h-2 bg-gray-400 rounded-full"
-                        animate={{ y: [0, -6, 0] }}
+                        animate={{ y: [0, -8, 0] }}
                        transition={{
                          duration: 0.6,
                          repeat: Infinity,
@@ -410,8 +305,8 @@ export default function ChatWidget() {
                        }}
                      />
                      <motion.div
-                        className="w-1.5 h-1.5 bg-stone-500 rounded-full"
+                        className="w-2 h-2 bg-gray-400 rounded-full"
-                        animate={{ y: [0, -6, 0] }}
+                        animate={{ y: [0, -8, 0] }}
                        transition={{
                          duration: 0.6,
                          repeat: Infinity,
@@ -419,8 +314,8 @@ export default function ChatWidget() {
                        }}
                      />
                      <motion.div
-                        className="w-1.5 h-1.5 bg-stone-500 rounded-full"
+                        className="w-2 h-2 bg-gray-400 rounded-full"
-                        animate={{ y: [0, -6, 0] }}
+                        animate={{ y: [0, -8, 0] }}
                        transition={{
                          duration: 0.6,
                          repeat: Infinity,
@@ -436,7 +331,7 @@ export default function ChatWidget() {
            </div>
            {/* Input */}
-            <div className="p-4 bg-[#fdfcf8] border-t border-[#e7e5e4]">
+            <div className="p-3 md:p-4 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
              <div className="flex gap-2">
                <input
                  ref={inputRef}
@@ -446,37 +341,37 @@ export default function ChatWidget() {
                  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"
+                  className="flex-1 px-3 md:px-4 py-2 text-sm bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white rounded-full border border-gray-200 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
                />
                <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"
+                  className="p-2 bg-gradient-to-br from-blue-500 to-purple-600 text-white rounded-full hover:shadow-lg hover:scale-110 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
                  aria-label="Send message"
                >
                  {isLoading ? (
-                    <Loader2 size={18} className="animate-spin" />
+                    <Loader2 size={20} className="animate-spin" />
                  ) : (
-                    <Send size={18} />
+                    <Send size={20} />
                  )}
                </button>
              </div>
              {/* Quick Actions */}
-              <div className="flex gap-2 mt-3 overflow-x-auto pb-1 scrollbar-hide mask-fade-right">
+              <div className="flex gap-2 mt-2 overflow-x-auto pb-1 scrollbar-hide">
                {[
-                  "Skills 🛠️",
+                  "What are Dennis&apos;s skills?",
-                  "Projects 🚀",
+                  "Tell me about his projects",
-                  "Contact 📧",
+                  "How can I contact him?",
                ].map((suggestion, index) => (
                  <button
                    key={index}
                    onClick={() => {
-                      setInputValue(suggestion.replace(/ .*/, '')); // Strip emoji for search if needed, or keep
+                      setInputValue(suggestion);
                      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"
+                    className="px-2 md:px-3 py-1 text-[10px] md:text-xs bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors whitespace-nowrap disabled:opacity-50 flex-shrink-0"
                  >
                    {suggestion}
                  </button>
--- a/app/components/ClientOnly.tsx
+++ b/app/components/ClientOnly.tsx
@@ -1,8 +1,8 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
-export default function ClientOnly({ children }: { children: React.ReactNode }) {
+export function ClientOnly({ children }: { children: React.ReactNode }) {
  const [hasMounted, setHasMounted] = useState(false);
  useEffect(() => {
--- a/app/components/ClientProviders.tsx
+++ b/app/components/ClientProviders.tsx
@@ -1,113 +0,0 @@
 "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
@@ -1,116 +0,0 @@
 "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
@@ -1,87 +0,0 @@
 "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
@@ -4,37 +4,14 @@ import { useState, useEffect } from "react";
 import { motion } from "framer-motion";
 import { Mail, MapPin, Send } from "lucide-react";
 import { useToast } from "@/components/Toast";
 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(() => {
-    (async () => {
+    setMounted(true);
-      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: "",
@@ -51,27 +28,27 @@ const Contact = () => {
    const newErrors: Record<string, string> = {};
    if (!formData.name.trim()) {
-      newErrors.name = tForm("errors.nameRequired");
+      newErrors.name = "Name is required";
    } else if (formData.name.trim().length < 2) {
-      newErrors.name = tForm("errors.nameMin");
+      newErrors.name = "Name must be at least 2 characters";
    }
    if (!formData.email.trim()) {
-      newErrors.email = tForm("errors.emailRequired");
+      newErrors.email = "Email is required";
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
-      newErrors.email = tForm("errors.emailInvalid");
+      newErrors.email = "Please enter a valid email address";
    }
    if (!formData.subject.trim()) {
-      newErrors.subject = tForm("errors.subjectRequired");
+      newErrors.subject = "Subject is required";
    } else if (formData.subject.trim().length < 3) {
-      newErrors.subject = tForm("errors.subjectMin");
+      newErrors.subject = "Subject must be at least 3 characters";
    }
    if (!formData.message.trim()) {
-      newErrors.message = tForm("errors.messageRequired");
+      newErrors.message = "Message is required";
    } else if (formData.message.trim().length < 10) {
-      newErrors.message = tForm("errors.messageMin");
+      newErrors.message = "Message must be at least 10 characters";
    }
    setErrors(newErrors);
@@ -155,17 +132,21 @@ const Contact = () => {
  const contactInfo = [
    {
      icon: Mail,
-      title: tInfo("email"),
+      title: "Email",
      value: "contact@dk0.dev",
      href: "mailto:contact@dk0.dev",
    },
    {
      icon: MapPin,
-      title: tInfo("location"),
+      title: "Location",
-      value: tInfo("locationValue"),
+      value: "Osnabrück, Germany",
    },
  ];
  if (!mounted) {
    return null;
  }
  return (
    <section
      id="contact"
@@ -174,39 +155,38 @@ const Contact = () => {
      <div className="max-w-7xl mx-auto">
        {/* Section Header */}
        <motion.div
-          initial={{ opacity: 0, y: 20 }}
+          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true, margin: "-50px" }}
+          viewport={{ once: true, margin: "-100px" }}
-          transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
+          transition={{ duration: 1, ease: [0.25, 0.1, 0.25, 1] }}
          className="text-center mb-16"
        >
          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-stone-900">
-            {t("title")}
+            Contact Me
          </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")}
+            Interested in working together or have questions about my projects?
            Feel free to reach out!
          </p>
          )}
        </motion.div>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Contact Information */}
          <motion.div
-            initial={{ opacity: 0, x: -20 }}
+            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true, margin: "-50px" }}
+            viewport={{ once: true, margin: "-100px" }}
-            transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
+            transition={{ duration: 1, ease: [0.25, 0.1, 0.25, 1] }}
            className="space-y-8"
          >
            <div>
              <h3 className="text-2xl font-bold text-stone-900 mb-6">
-                {t("getInTouch")}
+                Get In Touch
              </h3>
              <p className="text-stone-700 leading-relaxed">
-                {t("getInTouchBody")}
+                I&apos;m always available to discuss new opportunities,
                interesting projects, or simply chat about technology and
                innovation.
              </p>
            </div>
@@ -216,19 +196,19 @@ const Contact = () => {
                <motion.a
                  key={info.title}
                  href={info.href}
-                  initial={{ opacity: 0, x: -10 }}
+                  initial={{ opacity: 0, x: -20 }}
                  whileInView={{ opacity: 1, x: 0 }}
-                  viewport={{ once: true, margin: "-50px" }}
+                  viewport={{ once: true }}
                  transition={{
-                    duration: 0.5,
+                    duration: 0.8,
-                    delay: index * 0.1,
+                    delay: index * 0.15,
                    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"
+                  className="flex items-center space-x-4 p-4 rounded-2xl glass-card hover:bg-white/80 transition-all 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" />
@@ -246,14 +226,14 @@ const Contact = () => {
          {/* Contact Form */}
          <motion.div
-            initial={{ opacity: 0, x: 20 }}
+            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true, margin: "-50px" }}
+            viewport={{ once: true, margin: "-100px" }}
-            transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
+            transition={{ duration: 1, ease: [0.25, 0.1, 0.25, 1] }}
            className="glass-card p-8 rounded-3xl bg-white/50 border border-white/70"
          >
            <h3 className="text-2xl font-bold text-gray-800 mb-6">
-              {tForm("title")}
+              Send Message
            </h3>
            <form onSubmit={handleSubmit} className="space-y-6">
@@ -278,7 +258,7 @@ const Contact = () => {
                        ? "border-red-400 focus:ring-red-400"
                        : "border-white/60 focus:ring-liquid-blue focus:border-transparent"
                    }`}
-                    placeholder={tForm("placeholders.name")}
+                    placeholder="Your name"
                    aria-invalid={
                      errors.name && touched.name ? "true" : "false"
                    }
@@ -313,7 +293,7 @@ const Contact = () => {
                        ? "border-red-400 focus:ring-red-400"
                        : "border-white/60 focus:ring-liquid-blue focus:border-transparent"
                    }`}
-                    placeholder={tForm("placeholders.email")}
+                    placeholder="your@email.com"
                    aria-invalid={
                      errors.email && touched.email ? "true" : "false"
                    }
@@ -349,7 +329,7 @@ const Contact = () => {
                      ? "border-red-400 focus:ring-red-400"
                      : "border-white/60 focus:ring-liquid-blue focus:border-transparent"
                  }`}
-                  placeholder={tForm("placeholders.subject")}
+                  placeholder="What's this about?"
                  aria-invalid={
                    errors.subject && touched.subject ? "true" : "false"
                  }
@@ -386,7 +366,7 @@ const Contact = () => {
                      ? "border-red-400 focus:ring-red-400"
                      : "border-white/60 focus:ring-liquid-blue focus:border-transparent"
                  }`}
-                  placeholder={tForm("placeholders.message")}
+                  placeholder="Tell me more about your project or question..."
                  aria-invalid={
                    errors.message && touched.message ? "true" : "false"
                  }
@@ -405,7 +385,7 @@ const Contact = () => {
                    <span></span>
                  )}
                  <span className="text-xs text-stone-400">
-                    {tForm("characters", { count: formData.message.length })}
+                    {formData.message.length} characters
                  </span>
                </div>
              </div>
@@ -421,12 +401,12 @@ const Contact = () => {
                {isSubmitting ? (
                  <>
                    <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
-                    <span>{tForm("sending")}</span>
+                    <span>Sending Message...</span>
                  </>
                ) : (
                  <>
                    <Send size={20} />
-                    <span className="text-cream">{tForm("send")}</span>
+                    <span className="text-cream">Send Message</span>
                  </>
                )}
              </motion.button>
--- a/app/components/CurrentlyReading.tsx
+++ b/app/components/CurrentlyReading.tsx
@@ -1,157 +0,0 @@
 "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,35 +1,39 @@
 "use client";
-import { useState } from 'react';
+import { useState, useEffect } 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 locale = useLocale();
+  const [currentYear, setCurrentYear] = useState(2024);
-  const t = useTranslations("footer");
+  const [mounted, setMounted] = useState(false);
  const { resetConsent } = useConsent();
-  const [currentYear] = useState(() => new Date().getFullYear());
+  useEffect(() => {
    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: 10 }}
+            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true, margin: "-50px" }}
+            viewport={{ once: true }}
-            transition={{ duration: 0.4 }}
+            transition={{ duration: 0.6 }}
            className="flex items-center space-x-3"
          >
            <motion.div
@@ -40,19 +44,19 @@ const Footer = () => {
              <Code className="w-6 h-6 text-stone-800" />
            </motion.div>
            <div>
-              <Link href={`/${locale}`} className="text-xl font-bold font-mono text-stone-800 hover:text-liquid-blue transition-colors">
+              <Link href="/" 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">{t("role")}</p>
+              <p className="text-xs text-stone-500">Software Engineer</p>
            </div>
          </motion.div>
          {/* Social Links */}
          <motion.div
-            initial={{ opacity: 0, y: 10 }}
+            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true, margin: "-50px" }}
+            viewport={{ once: true }}
-            transition={{ duration: 0.4, delay: 0.05 }}
+            transition={{ duration: 0.6, delay: 0.1 }}
            className="flex space-x-3"
          >
            {socialLinks.map((social) => (
@@ -73,10 +77,10 @@ const Footer = () => {
          {/* Copyright */}
          <motion.div
-            initial={{ opacity: 0, y: 10 }}
+            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true, margin: "-50px" }}
+            viewport={{ once: true }}
-            transition={{ duration: 0.4, delay: 0.1 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
            className="flex items-center space-x-2 text-stone-400 text-sm"
          >
            <span>© {currentYear}</span>
@@ -86,50 +90,35 @@ const Footer = () => {
            >
              <Heart size={14} className="text-liquid-rose fill-liquid-rose" />
            </motion.div>
-            <span>{t("madeIn")}</span>
+            <span>Made in Germany</span>
          </motion.div>
        </div>
        {/* Legal Links */}
        <motion.div
-          initial={{ opacity: 0, y: 10 }}
+          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true, margin: "-50px" }}
+          viewport={{ once: true }}
-          transition={{ duration: 0.4, delay: 0.15 }}
+          transition={{ duration: 0.6, delay: 0.3 }}
          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={`/${locale}/legal-notice`}
+              href="/legal-notice"
              className="text-stone-500 hover:text-stone-800 transition-colors duration-200"
            >
-              {t("legalNotice")}
+              Impressum
            </Link>
            <Link
-              href={`/${locale}/privacy-policy`}
+              href="/privacy-policy"
              className="text-stone-500 hover:text-stone-800 transition-colors duration-200"
            >
-              {t("privacyPolicy")}
+              Privacy Policy
            </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>{t("builtWith")}</span>
+            <span>Built with</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
@@ -5,18 +5,15 @@ import { motion, AnimatePresence } from "framer-motion";
 import { Menu, X, Mail } from "lucide-react";
 import { SiGithub, SiLinkedin } from "react-icons/si";
 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 locale = useLocale();
+  const [mounted, setMounted] = useState(false);
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const t = useTranslations("nav");
-  const isHome = pathname === `/${locale}` || pathname === `/${locale}/`;
+  useEffect(() => {
    setMounted(true);
  }, []);
  useEffect(() => {
    const handleScroll = () => {
@@ -28,10 +25,10 @@ const Header = () => {
  }, []);
  const navItems = [
-    { name: t("home"), href: `/${locale}` },
+    { name: "Home", href: "/" },
-    { name: t("about"), href: isHome ? "#about" : `/${locale}#about` },
+    { name: "About", href: "#about" },
-    { name: t("projects"), href: isHome ? "#projects" : `/${locale}/projects` },
+    { name: "Projects", href: "#projects" },
-    { name: t("contact"), href: isHome ? "#contact" : `/${locale}#contact` },
+    { name: "Contact", href: "#contact" },
  ];
  const socialLinks = [
@@ -44,20 +41,16 @@ const Header = () => {
    { icon: Mail, href: "mailto:contact@dk0.dev", label: "Email" },
  ];
-  const pathWithoutLocale = pathname.replace(new RegExp(`^/${locale}`), "") || "";
+  if (!mounted) {
-  const qs = searchParams.toString();
+    return null;
-  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={false}
+        initial={{ y: -100, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
-        transition={{ duration: 0.3, ease: "easeOut" }}
+        transition={{ duration: 0.8, ease: "easeOut" }}
        className="fixed top-6 left-0 right-0 z-50 flex justify-center px-4 pointer-events-none"
      >
        <div
@@ -66,9 +59,9 @@ const Header = () => {
          }`}
        >
          <motion.div
-            initial={false}
+            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.3, ease: "easeOut" }}
+            transition={{ duration: 0.6, delay: 0.2, ease: "easeOut" }}
            className={`
            backdrop-blur-xl transition-all duration-500
            ${
@@ -84,10 +77,10 @@ const Header = () => {
              className="flex items-center space-x-2"
            >
              <Link
-                href={`/${locale}`}
+                href="/"
-                className="text-2xl font-black font-sans text-stone-900 tracking-tighter liquid-hover flex items-center"
+                className="text-2xl font-bold font-mono text-stone-800 tracking-tighter liquid-hover"
              >
-                dk<span className="text-red-500">0</span>
+                dk<span className="text-liquid-rose">0</span>
              </Link>
            </motion.div>
@@ -131,30 +124,6 @@ const Header = () => {
            </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}
@@ -174,7 +143,6 @@ 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>
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -1,45 +1,27 @@
 "use client";
 import { useState, useEffect } from "react";
 import { motion } from "framer-motion";
 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 type { JSONContent } from "@tiptap/react";
 import RichTextClient from "./RichTextClient";
 const Hero = () => {
-  const locale = useLocale();
+  const [mounted, setMounted] = useState(false);
  const t = useTranslations("home.hero");
  const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
  useEffect(() => {
-    (async () => {
+    setMounted(true);
-      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: t("features.f1") },
+    { icon: Code, text: "Next.js & Flutter" },
-    { icon: Zap, text: t("features.f2") },
+    { icon: Zap, text: "Docker Swarm & CI/CD" },
-    { icon: Rocket, text: t("features.f3") },
+    { icon: Rocket, text: "Self-Hosted Infrastructure" },
  ];
  if (!mounted) {
    return null;
  }
  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-32 pb-16 bg-gradient-to-br from-liquid-mint/10 via-liquid-lavender/10 to-liquid-rose/10">
      <div className="relative z-10 text-center px-4 max-w-5xl mx-auto">
@@ -47,7 +29,7 @@ const Hero = () => {
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 0.6, delay: 0.1, ease: [0.25, 0.1, 0.25, 1] }}
+          transition={{ duration: 1.2, delay: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
          className="mb-12 flex justify-center relative z-20"
        >
          <div className="relative w-64 h-64 md:w-80 md:h-80 flex items-center justify-center">
@@ -110,13 +92,12 @@ const Hero = () => {
                repeatType: "reverse",
              }}
            >
-              {/* Use a plain <img> to fully bypass Next.js image optimizer (dev 400 issue). */}
+              <Image
              <img
                src="/images/me.jpg"
                alt="Dennis Konkol"
-                className="absolute inset-0 w-full h-full object-cover scale-105 hover:scale-[1.08] transition-transform duration-1000 ease-out"
+                fill
-                loading="eager"
+                className="object-cover scale-105 hover:scale-[1.08] transition-transform duration-1000 ease-out"
-                decoding="async"
+                priority
              />
              {/* Glossy Overlay for Liquid Feel */}
@@ -130,11 +111,11 @@ const Hero = () => {
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }}
+              transition={{ duration: 1, delay: 0.8, ease: "easeOut" }}
              className="absolute -bottom-8 left-1/2 -translate-x-1/2 z-30"
            >
-              <div className="px-6 py-2.5 rounded-full glass-panel text-stone-800 font-sans font-bold text-sm tracking-wide shadow-lg backdrop-blur-xl border border-white/50">
+              <div className="px-6 py-2.5 rounded-full glass-panel text-stone-700 font-mono text-sm tracking-wider shadow-lg backdrop-blur-xl border border-white/50">
-                dk<span className="text-red-500 font-extrabold">0</span>.dev
+                dk<span className="text-liquid-rose font-bold">0</span>.dev
              </div>
            </motion.div>
@@ -142,7 +123,7 @@ const Hero = () => {
            <motion.div
              initial={{ scale: 0, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
-              transition={{ delay: 0.4, duration: 0.5, ease: "easeOut" }}
+              transition={{ delay: 1.2, duration: 0.8, 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"
            >
@@ -151,7 +132,7 @@ const Hero = () => {
            <motion.div
              initial={{ scale: 0, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
-              transition={{ delay: 0.5, duration: 0.5, ease: "easeOut" }}
+              transition={{ delay: 1.4, duration: 0.8, ease: "easeOut" }}
              whileHover={{ scale: 1.1, rotate: -5 }}
              className="absolute bottom-4 -left-4 md:-left-8 p-3 bg-white/95 backdrop-blur-md shadow-lg rounded-full text-stone-700 z-30"
            >
@@ -164,7 +145,7 @@ const Hero = () => {
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
+          transition={{ duration: 1, delay: 0.6, ease: [0.25, 0.1, 0.25, 1] }}
          className="mb-8 flex flex-col items-center justify-center relative"
        >
          <h1 className="text-5xl md:text-8xl font-bold tracking-tighter text-stone-900 mb-2">
@@ -176,24 +157,32 @@ const Hero = () => {
        </motion.div>
        {/* Description */}
-        <motion.div
+        <motion.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
+          transition={{ duration: 1, delay: 0.9, ease: [0.25, 0.1, 0.25, 1] }}
          className="text-lg md:text-xl text-stone-700 mb-12 max-w-2xl mx-auto leading-relaxed"
        >
-          {cmsDoc ? (
+          Student and passionate{" "}
-            <RichTextClient doc={cmsDoc} className="prose prose-stone max-w-none" />
+          <span className="text-stone-900 font-semibold decoration-liquid-mint decoration-2 underline underline-offset-4">
-          ) : (
+            self-hoster
-            <p>{t("description")}</p>
+          </span>{" "}
-          )}
+          building full-stack web apps and mobile solutions. I run my own{" "}
-        </motion.div>
+          <span className="text-stone-900 font-semibold decoration-liquid-lavender decoration-2 underline underline-offset-4">
            infrastructure
          </span>{" "}
          and love exploring{" "}
          <span className="text-stone-900 font-semibold decoration-liquid-rose decoration-2 underline underline-offset-4">
            DevOps
          </span>
          .
        </motion.p>
        {/* Features */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.4, ease: [0.25, 0.1, 0.25, 1] }}
+          transition={{ duration: 1, delay: 1.1, ease: [0.25, 0.1, 0.25, 1] }}
          className="flex flex-wrap justify-center gap-4 mb-12"
        >
          {features.map((feature, index) => (
@@ -202,8 +191,8 @@ const Hero = () => {
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{
-                duration: 0.5,
+                duration: 0.8,
-                delay: 0.5 + index * 0.1,
+                delay: 1.3 + index * 0.15,
                ease: [0.25, 0.1, 0.25, 1],
              }}
              whileHover={{ scale: 1.03, y: -3 }}
@@ -221,7 +210,7 @@ const Hero = () => {
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.6, ease: [0.25, 0.1, 0.25, 1] }}
+          transition={{ duration: 1, delay: 1.6, ease: [0.25, 0.1, 0.25, 1] }}
          className="flex flex-col sm:flex-row gap-5 justify-center items-center"
        >
          <motion.a
@@ -231,7 +220,7 @@ const Hero = () => {
            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 className="text-cream">{t("ctaWork")}</span>
+            <span className="text-cream">View My Work</span>
            <ArrowDown size={18} />
          </motion.a>
@@ -242,7 +231,7 @@ const Hero = () => {
            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>{t("ctaContact")}</span>
+            <span>Contact Me</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
@@ -1,40 +0,0 @@
 "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
@@ -2,18 +2,17 @@
 import { useState, useEffect } from "react";
 import { motion, Variants } from "framer-motion";
-import { ExternalLink, Github, ArrowRight, Calendar } from "lucide-react";
+import { ExternalLink, Github, Layers, ArrowRight } from "lucide-react";
 import Link from "next/link";
 import Image from "next/image";
 import { useLocale, useTranslations } from "next-intl";
 const fadeInUp: Variants = {
-  hidden: { opacity: 0, y: 20 },
+  hidden: { opacity: 0, y: 40 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
-      duration: 0.5,
+      duration: 0.8,
      ease: [0.25, 0.1, 0.25, 1],
    },
  },
@@ -32,7 +31,6 @@ const staggerContainer: Variants = {
 interface Project {
  id: number;
  slug: string;
  title: string;
  description: string;
  content: string;
@@ -46,11 +44,11 @@ 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(
@@ -69,6 +67,8 @@ const Projects = () => {
    loadProjects();
  }, []);
  if (!mounted) return null;
  return (
    <section
      id="projects"
@@ -78,22 +78,23 @@ const Projects = () => {
        <motion.div
          initial="hidden"
          whileInView="visible"
-          viewport={{ once: true, margin: "-50px" }}
+          viewport={{ once: true, margin: "-100px" }}
          variants={fadeInUp}
          className="text-center mb-20"
        >
          <h2 className="text-4xl md:text-6xl font-bold mb-6 text-stone-900">
-            {t("title")}
+            Selected Works
          </h2>
          <p className="text-lg text-stone-600 max-w-2xl mx-auto mt-4 font-light">
-            {t("subtitle")}
+            A collection of projects I&apos;ve worked on, ranging from web
            applications to experiments.
          </p>
        </motion.div>
        <motion.div
          initial="hidden"
          whileInView="visible"
-          viewport={{ once: true, margin: "-50px" }}
+          viewport={{ once: true, margin: "-100px" }}
          variants={staggerContainer}
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
        >
@@ -101,72 +102,50 @@ const Projects = () => {
            <motion.div
              key={project.id}
              variants={fadeInUp}
-              whileHover={{ y: -8 }}
+              whileHover={{
-              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"
+                y: -12,
                transition: { duration: 0.5, ease: "easeOut" },
              }}
              className="group relative flex flex-col bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-700 ease-out border border-stone-100 hover:border-stone-200"
            >
-              {/* Project Cover / Image Area */}
+              {/* Project Cover / Header */}
-              <div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
+              <div className="relative aspect-[4/3] overflow-hidden bg-gradient-to-br from-stone-50 to-stone-100">
                {project.imageUrl ? (
                  <>
                  <Image
                    src={project.imageUrl}
                    alt={project.title}
                    fill
                    className="object-cover transition-transform duration-1000 ease-out group-hover:scale-110"
                  />
                    <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-100 to-stone-200 flex items-center justify-center p-8 group-hover:from-stone-50 group-hover:to-stone-100 transition-colors duration-700 ease-out">
-                    <div className="absolute inset-0 bg-gradient-to-br from-stone-300 via-stone-200 to-stone-300" />
+                    <div className="w-full h-full border-2 border-dashed border-stone-300 rounded-xl flex items-center justify-center">
-                    <div className="absolute top-[-20%] left-[-10%] w-[70%] h-[70%] bg-white/20 rounded-full blur-3xl animate-pulse" />
+                      <Layers className="text-stone-300 w-12 h-12" />
                    <div className="absolute bottom-[-10%] right-[-5%] w-[60%] h-[60%] bg-stone-400/10 rounded-full blur-2xl" />
                    <div className="relative z-10">
                      <span className="text-7xl font-serif font-black text-stone-800/10 group-hover:text-stone-800/20 transition-all duration-700 select-none tracking-tighter">
                        {project.title.charAt(0)}
                      </span>
                    </div>
                  </div>
                )}
                {/* Texture/Grain Overlay */}
                <div className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-overlay bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" />
                {/* Animated Shine Effect */}
                <div className="absolute inset-0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-in-out bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-[-20deg] pointer-events-none" />
                {/* Featured Badge */}
                {project.featured && (
                  <div className="absolute top-3 left-3 z-20">
                    <div className="px-3 py-1 bg-[#292524]/80 backdrop-blur-md text-[#fdfcf8] text-[10px] font-bold uppercase tracking-widest rounded-full shadow-sm border border-white/10">
                      {t("featured")}
                    </div>
                    <div className="absolute inset-0 bg-gradient-to-tr from-liquid-mint/10 via-transparent to-liquid-rose/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                  </div>
                )}
                {/* Overlay Links */}
-                <div className="absolute inset-0 bg-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">
+                <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-700 ease-out flex items-center justify-center gap-4 backdrop-blur-sm">
                  {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"
+                      className="p-3 bg-white rounded-full text-stone-900 hover:scale-110 transition-all duration-500 ease-out hover:shadow-lg"
                      aria-label="GitHub"
                      onClick={(e) => e.stopPropagation()}
                    >
                      <Github size={20} />
                    </a>
                  )}
-                  {project.live && !project.title.toLowerCase().includes('kernel panic') && (
+                  {project.live && (
                    <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"
+                      className="p-3 bg-white rounded-full text-stone-900 hover:scale-110 transition-all duration-500 ease-out hover:shadow-lg"
                      aria-label="Live Demo"
                      onClick={(e) => e.stopPropagation()}
                    >
                      <ExternalLink size={20} />
                    </a>
@@ -175,67 +154,47 @@ const Projects = () => {
              </div>
              {/* Content */}
-              <div className="p-6 flex flex-col flex-1">
+              <div className="flex flex-col flex-1 p-6">
-                {/* Stretched Link covering the whole card (including image area) */}
+                <div className="flex justify-between items-start mb-3">
-                <Link
+                  <h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-700 transition-colors duration-500">
                  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">
+                  <span className="text-xs font-mono text-stone-400 bg-stone-100 px-2 py-1 rounded">
-                    <Calendar size={12} />
+                    {new Date(project.date).getFullYear()}
-                    <span>{new Date(project.date).getFullYear()}</span>
+                  </span>
                  </div>
                </div>
-                <p className="text-stone-600 mb-6 leading-relaxed line-clamp-3 text-sm flex-1">
+                <p className="text-stone-700 text-sm leading-relaxed mb-6 line-clamp-3 flex-1">
                  {project.description}
                </p>
-                <div className="flex flex-wrap gap-2 mb-6">
+                <div className="space-y-4 mt-auto">
-                  {project.tags.slice(0, 4).map((tag) => (
+                  <div className="flex flex-wrap gap-2">
                    {project.tags.slice(0, 3).map((tag, tIdx) => (
                      <span
-                      key={tag}
+                        key={`${project.id}-${tag}-${tIdx}`}
-                      className="px-2.5 py-1 bg-white/60 border border-stone-100 text-stone-600 text-xs font-medium rounded-md"
+                        className="text-xs px-2.5 py-1 bg-stone-50 border border-stone-100 rounded-md text-stone-600 font-medium hover:bg-stone-100 hover:border-stone-200 transition-all duration-400 ease-out"
                      >
                        {tag}
                      </span>
                    ))}
-                  {project.tags.length > 4 && (
+                    {project.tags.length > 3 && (
-                    <span className="px-2 py-1 text-stone-400 text-xs">+ {project.tags.length - 4}</span>
+                      <span className="text-xs px-2 py-1 text-stone-400">
                        + {project.tags.length - 3}
                      </span>
                    )}
                  </div>
-                <div className="mt-auto pt-4 border-t border-stone-100 flex items-center justify-between relative z-20">
+                  <Link
-                   <div className="flex gap-3">
+                    href={`/projects/${project.title.toLowerCase().replace(/\s+/g, "-")}`}
-                      {project.github && (
+                    className="inline-flex items-center text-sm font-semibold text-stone-900 hover:gap-3 transition-all duration-500 ease-out group/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} />
+                    Read more{" "}
-                        </a>
+                    <ArrowRight
-                      )}
+                      size={16}
-                      {project.live && !project.title.toLowerCase().includes('kernel panic') && (
+                      className="ml-1 transition-transform duration-500 ease-out group-hover/link:translate-x-2"
-                         <a 
+                    />
-                           href={project.live} 
+                  </Link>
                           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>
@@ -250,10 +209,10 @@ const Projects = () => {
          className="mt-16 text-center"
        >
          <Link
-            href={`/${locale}/projects`}
+            href="/projects"
            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"
          >
-            {t("viewAll")} <ArrowRight size={16} />
+            View All Projects <ArrowRight size={16} />
          </Link>
        </motion.div>
      </div>
--- a/app/components/RichText.tsx
+++ b/app/components/RichText.tsx
@@ -1,21 +0,0 @@
 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
@@ -1,24 +0,0 @@
 "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
@@ -1,51 +0,0 @@
 "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/editor/page.tsx
+++ b/app/editor/page.tsx
--- a/app/globals.css
+++ b/app/globals.css
@@ -80,7 +80,7 @@ html {
        0 20px 25px -5px rgba(0, 0, 0, 0.08),
        0 10px 10px -5px rgba(0, 0, 0, 0.02),
        inset 0 0 20px rgba(255, 255, 255, 0.8);
-    transform: translateY(-4px);
+    transform: translateY(-4px) scale(1.005);
    border-color: #ffffff;
 }
@@ -103,6 +103,9 @@ div {
    color: #44403c;
 }
 /* Utility for the liquid melt effect container */
 /* Liquid container removed - no filters applied */
 /* Hide scrollbar but keep functionality */
 ::-webkit-scrollbar {
    width: 8px;
@@ -118,14 +121,6 @@ div {
    background: #a8a29e;
 }
 .scrollbar-hide::-webkit-scrollbar {
    display: none;
 }
 .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
 }
 /* Animations */
@keyframes float {
    0%,
@@ -142,6 +137,18 @@ div {
    will-change: transform;
 }
@keyframes liquid-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
 }
 /* Liquid Blobs Background */
 .liquid-bg-blob {
    position: absolute;
@@ -173,43 +180,3 @@ div {
 .markdown pre {
    @apply bg-stone-900 text-stone-50 p-4 rounded-xl overflow-x-auto mb-6;
 }
 /* Admin Dashboard Styles - Organic Modern */
 .animated-bg {
    background: #fdfcf8;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
 }
 .admin-glass {
    background: rgba(253, 252, 248, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #e7e5e4;
    color: #292524;
 }
 .admin-glass-light {
    background: #ffffff;
    border: 1px solid #e7e5e4;
    color: #292524;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
 }
 .admin-glass-light:hover {
    background: #fdfcf8;
    border-color: #d6d3d1;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
 }
 .admin-glass-card {
    background: #ffffff;
    border: 1px solid #e7e5e4;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    color: #292524;
 }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,36 +2,49 @@ import "./globals.css";
 import { Metadata } from "next";
 import { Inter } from "next/font/google";
 import React from "react";
-import ClientProviders from "./components/ClientProviders";
+import { ToastProvider } from "@/components/Toast";
-import { cookies } from "next/headers";
+import { AnalyticsProvider } from "@/components/AnalyticsProvider";
-import { getBaseUrl } from "@/lib/seo";
+import { ClientOnly } from "./components/ClientOnly";
 import BackgroundBlobsClient from "./components/BackgroundBlobsClient";
 import ChatWidget from "./components/ChatWidget";
 const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
 });
-export default async function RootLayout({
+export default function RootLayout({
  children,
 }: {
  children: React.ReactNode;
 }) {
  const cookieStore = await cookies();
  const locale = cookieStore.get("NEXT_LOCALE")?.value || "en";
  return (
-    <html lang={locale}>
+    <html lang="en">
      <head>
        <script
          defer
          src="https://analytics.dk0.dev/script.js"
          data-website-id="b3665829-927a-4ada-b9bb-fcf24171061e"
        ></script>
        <meta charSet="utf-8" />
        <title>Dennis Konkol&#39;s Portfolio</title>
      </head>
-      <body className={inter.variable} suppressHydrationWarning>
+      <body className={inter.variable}>
-        <ClientProviders>{children}</ClientProviders>
+        <AnalyticsProvider>
          <ToastProvider>
            <ClientOnly>
              <BackgroundBlobsClient />
            </ClientOnly>
            <div className="relative z-10">{children}</div>
            <ChatWidget />
          </ToastProvider>
        </AnalyticsProvider>
      </body>
    </html>
  );
 }
 export const metadata: Metadata = {
  metadataBase: new URL(getBaseUrl()),
  title: "Dennis Konkol | Portfolio",
  description:
    "Portfolio of Dennis Konkol, a student and software engineer based in Osnabrück, Germany. Passionate about technology, coding, and solving real-world problems.",
--- a/app/legal-notice/page.tsx
+++ b/app/legal-notice/page.tsx
@@ -6,40 +6,8 @@ import { ArrowLeft } from 'lucide-react';
 import Header from "../components/Header";
 import Footer from "../components/Footer";
 import Link from "next/link";
 import { useLocale, useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import type { JSONContent } from "@tiptap/react";
 import RichTextClient from "../components/RichTextClient";
 export default function LegalNotice() {
  const locale = useLocale();
  const t = useTranslations("common");
  const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
  const [cmsTitle, setCmsTitle] = useState<string | null>(null);
  useEffect(() => {
    (async () => {
      try {
        const res = await fetch(
          `/api/content/page?key=${encodeURIComponent("legal-notice")}&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);
          setCmsTitle((data.content.title as string | null) ?? null);
        } else {
          setCmsDoc(null);
          setCmsTitle(null);
        }
      } catch {
        // ignore; fallback to static content
        setCmsDoc(null);
        setCmsTitle(null);
      }
    })();
  }, [locale]);
  return (
    <div className="min-h-screen animated-bg">
      <Header />
@@ -51,15 +19,15 @@ export default function LegalNotice() {
          className="mb-8"
        >
          <Link
-            href={`/${locale}`}
+            href="/"
            className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors mb-6"
          >
            <ArrowLeft size={20} />
-            <span>{t("backToHome")}</span>
+            <span>Back to Home</span>
          </Link>
          <h1 className="text-4xl md:text-5xl font-bold mb-6 gradient-text">
-            {cmsTitle || "Impressum"}
+            Impressum
          </h1>
        </motion.div>
@@ -69,51 +37,33 @@ export default function LegalNotice() {
          transition={{ duration: 0.8, delay: 0.2 }}
          className="glass-card p-8 rounded-2xl space-y-6"
        >
          {cmsDoc ? (
            <RichTextClient doc={cmsDoc} className="prose prose-invert max-w-none text-gray-300" />
          ) : (
            <>
          <div className="text-gray-300 leading-relaxed">
-                <h2 className="text-2xl font-semibold mb-4">Verantwortlicher für die Inhalte dieser Website</h2>
+            <h2 className="text-2xl font-semibold mb-4">
              Verantwortlicher für die Inhalte dieser Website
            </h2>
            <div className="space-y-2 text-gray-300">
-                  <p>
+              <p><strong>Name:</strong> Dennis Konkol</p>
-                    <strong>Name:</strong> Dennis Konkol
+              <p><strong>Adresse:</strong> Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland</p>
-                  </p>
+              <p><strong>E-Mail:</strong> <Link href="mailto:info@dki.one" className="text-blue-400 hover:text-blue-300 transition-colors">info@dk0.dev</Link></p>
-                  <p>
+              <p><strong>Website:</strong> <Link href="https://www.dk0.dev" className="text-blue-400 hover:text-blue-300 transition-colors">dk0.dev</Link></p>
                    <strong>Adresse:</strong> Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland
                  </p>
                  <p>
                    <strong>E-Mail:</strong>{" "}
                    <Link href="mailto:info@dki.one" className="text-blue-400 hover:text-blue-300 transition-colors">
                      info@dk0.dev
                    </Link>
                  </p>
                  <p>
                    <strong>Website:</strong>{" "}
                    <Link href="https://www.dk0.dev" className="text-blue-400 hover:text-blue-300 transition-colors">
                      dk0.dev
                    </Link>
                  </p>
            </div>
          </div>
          <div className="text-gray-300">
-                <h2 className="text-2xl font-semibold mb-4">Haftung für Links</h2>
+            <h2 className="text-2xl font-semiboldmb-4">Haftung für Links</h2>
            <p className="leading-relaxed">
-                  Meine Website enthält Links auf externe Websites. Ich habe keinen Einfluss auf die Inhalte dieser
+              Meine Website enthält Links auf externe Websites. Ich habe keinen Einfluss auf die Inhalte dieser Websites 
-                  Websites und kann daher keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der
+              und kann daher keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der Betreiber oder 
-                  Betreiber oder Anbieter der Seiten verantwortlich. Jedoch überprüfe ich die verlinkten Seiten zum
+              Anbieter der Seiten verantwortlich. Jedoch überprüfe ich die verlinkten Seiten zum Zeitpunkt der Verlinkung 
-                  Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße. Bei Bekanntwerden von Rechtsverletzungen werde
+              auf mögliche Rechtsverstöße. Bei Bekanntwerden von Rechtsverletzungen werde ich derartige Links umgehend entfernen.
                  ich derartige Links umgehend entfernen.
            </p>
          </div>
          <div className="text-gray-300">
            <h2 className="text-2xl font-semibold mb-4">Urheberrecht</h2>
            <p className="leading-relaxed">
-                  Alle Inhalte dieser Website, einschließlich Texte, Fotos und Designs, stehen unter
+              Alle Inhalte dieser Website, einschließlich Texte, Fotos und Designs, stehen unter Urheberrechtsschutz. 
-                  Urheberrechtsschutz. Jegliche Nutzung ohne vorherige schriftliche Zustimmung des Urhebers ist
+              Jegliche Nutzung ohne vorherige schriftliche Zustimmung des Urhebers ist verboten.
                  verboten.
            </p>
          </div>
@@ -121,16 +71,13 @@ export default function LegalNotice() {
            <h2 className="text-2xl font-semibold mb-4">Gewährleistung</h2>
            <p className="leading-relaxed">
              Die Nutzung der Inhalte dieser Website erfolgt auf eigene Gefahr. Als Diensteanbieter kann ich keine 
-                  Gewähr übernehmen für Schäden, die entstehen können, durch den Zugriff oder die Nutzung dieser
+              Gewähr übernehmen für Schäden, die entstehen können, durch den Zugriff oder die Nutzung dieser Website.
                  Website.
            </p>
          </div>
          <div className="pt-4 border-t border-gray-700">
            <p className="text-gray-400 text-sm">Letzte Aktualisierung: 12.02.2025</p>
          </div>
            </>
          )}
        </motion.div>
      </main>
      <Footer />
--- a/app/manage/page.tsx
+++ b/app/manage/page.tsx
@@ -57,9 +57,6 @@ const AdminPage = () => {
  // Check if user is locked out
  const checkLockout = useCallback(() => {
    if (typeof window === 'undefined') return false;
    try {
    const lockoutData = localStorage.getItem('admin_lockout');
    if (lockoutData) {
      try {
@@ -75,24 +72,10 @@ const AdminPage = () => {
          }));
          return true;
        } else {
            try {
          localStorage.removeItem('admin_lockout');
            } catch {
              // Ignore errors
            }
        }
      } catch {
          try {
        localStorage.removeItem('admin_lockout');
          } catch {
            // Ignore errors
          }
        }
      }
    } catch (error) {
      // localStorage might be disabled
      if (process.env.NODE_ENV === 'development') {
        console.warn('Failed to check lockout status:', error);
      }
    }
    return false;
@@ -214,11 +197,7 @@ const AdminPage = () => {
          attempts: 0,
          isLoading: false
        }));
        try {
        localStorage.removeItem('admin_lockout');
        } catch {
          // Ignore errors
        }
      } else {
        const newAttempts = authState.attempts + 1;
        setAuthState(prev => ({
@@ -229,17 +208,10 @@ const AdminPage = () => {
        }));
        if (newAttempts >= 5) {
          try {
          localStorage.setItem('admin_lockout', JSON.stringify({
            timestamp: Date.now(),
            attempts: newAttempts
          }));
          } catch (error) {
            // localStorage might be full or disabled
            if (process.env.NODE_ENV === 'development') {
              console.warn('Failed to save lockout data:', error);
            }
          }
          setAuthState(prev => ({
            ...prev,
            isLocked: true,
@@ -259,10 +231,10 @@ const AdminPage = () => {
  // Loading state
  if (authState.isLoading) {
    return (
-      <div className="min-h-screen flex items-center justify-center bg-[#fdfcf8]">
+      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
-          <Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-stone-600" />
+          <Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-500" />
-          <p className="text-stone-500">Loading...</p>
+          <p className="text-white">Loading...</p>
        </div>
      </div>
    );
@@ -271,23 +243,17 @@ const AdminPage = () => {
  // Lockout state
  if (authState.isLocked) {
    return (
-      <div className="min-h-screen flex items-center justify-center bg-[#fdfcf8]">
+      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
-          <div className="w-16 h-16 bg-red-50 rounded-2xl flex items-center justify-center mx-auto mb-6">
+          <Lock className="w-16 h-16 mx-auto mb-4 text-red-500" />
-            <Lock className="w-8 h-8 text-red-500" />
+          <h2 className="text-2xl font-bold text-white mb-2">Account Locked</h2>
-          </div>
+          <p className="text-white/60">Too many failed attempts. Please try again in 15 minutes.</p>
          <h2 className="text-2xl font-bold text-stone-900 mb-2">Account Locked</h2>
          <p className="text-stone-500">Too many failed attempts. Please try again in 15 minutes.</p>
          <button
            onClick={() => {
              try {
              localStorage.removeItem('admin_lockout');
              } catch {
                // Ignore errors
              }
              window.location.reload();
            }}
-            className="mt-4 px-6 py-2 bg-stone-900 text-stone-50 rounded-xl hover:bg-stone-800 transition-colors"
+            className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
          >
            Try Again
          </button>
@@ -299,23 +265,22 @@ const AdminPage = () => {
  // Login form
  if (authState.showLogin || !authState.isAuthenticated) {
    return (
-      <div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-[#fdfcf8] z-0">
+      <div className="min-h-screen flex items-center justify-center">
        <motion.div
-          initial={{ opacity: 0, scale: 0.95 }}
+          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
-          className="w-full max-w-md p-6"
+          className="w-full max-w-md p-8"
        >
-          <div className="bg-white/80 backdrop-blur-xl rounded-3xl p-8 border border-stone-200 shadow-2xl relative z-10">
+          <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/20">
            <div className="text-center mb-8">
-              <div className="w-16 h-16 bg-[#f3f1e7] rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm border border-stone-100">
+              <div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
-                <Lock className="w-6 h-6 text-stone-600" />
+                <Lock className="w-8 h-8 text-white" />
              </div>
-              <h1 className="text-2xl font-bold text-stone-900 mb-2 tracking-tight">Admin Access</h1>
+              <h1 className="text-2xl font-bold text-white mb-2">Admin Access</h1>
-              <p className="text-stone-500">Enter your password to continue</p>
+              <p className="text-white/60">Enter your password to continue</p>
            </div>
-            <form onSubmit={handleLogin} className="space-y-5">
+            <form onSubmit={handleLogin} className="space-y-6">
              <div>
                <div className="relative">
                  <input
@@ -323,41 +288,37 @@ const AdminPage = () => {
                    value={authState.password}
                    onChange={(e) => setAuthState(prev => ({ ...prev, password: e.target.value }))}
                    placeholder="Enter password"
-                    className="w-full px-4 py-3.5 bg-white border border-stone-200 rounded-xl text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-200 focus:border-stone-400 transition-all shadow-sm"
+                    className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    disabled={authState.isLoading}
                  />
                  <button
                    type="button"
                    onClick={() => setAuthState(prev => ({ ...prev, showPassword: !prev.showPassword }))}
-                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-stone-400 hover:text-stone-600 p-1"
+                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-white/50 hover:text-white"
                  >
                    {authState.showPassword ? '👁️' : '👁️‍🗨️'}
                  </button>
                </div>
                {authState.error && (
-                  <motion.p 
+                  <p className="mt-2 text-red-400 text-sm">{authState.error}</p>
                    initial={{ opacity: 0, y: -5 }}
                    animate={{ opacity: 1, y: 0 }}
                    className="mt-2 text-red-500 text-sm font-medium flex items-center"
                  >
                    <span className="w-1.5 h-1.5 bg-red-500 rounded-full mr-2" />
                    {authState.error}
                  </motion.p>
                )}
              </div>
              <button
                type="submit"
                disabled={authState.isLoading || !authState.password}
-                className="w-full bg-stone-900 text-stone-50 py-3.5 px-6 rounded-xl font-semibold text-lg hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-stone-200 focus:ring-offset-2 focus:ring-offset-white disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg flex items-center justify-center"
+                className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-4 px-6 rounded-xl font-semibold text-lg hover:from-blue-600 hover:to-purple-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent disabled:opacity-50 disabled:cursor-not-allowed transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-lg"
              >
                {authState.isLoading ? (
-                  <div className="flex items-center justify-center space-x-2">
+                  <div className="flex items-center justify-center space-x-3">
                    <Loader2 className="w-5 h-5 animate-spin" />
-                    <span className="text-stone-50">Authenticating...</span>
+                    <span>Authenticating...</span>
                  </div>
                ) : (
-                  <span className="text-stone-50">Sign In</span>
+                  <div className="flex items-center justify-center space-x-2">
                    <Lock size={18} />
                    <span>Secure Login</span>
                  </div>
                )}
              </button>
            </form>
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -1,89 +1,22 @@
-"use client";
+import Link from "next/link";
 import { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
 // Dynamically import KernelPanic404Wrapper to avoid SSR issues
 const KernelPanic404 = dynamic(() => import("./components/KernelPanic404Wrapper"), {
  ssr: false,
  loading: () => (
    <div style={{ 
      position: "fixed", 
      top: 0, 
      left: 0, 
      width: "100%", 
      height: "100%", 
      display: "flex", 
      alignItems: "center", 
      justifyContent: "center", 
      backgroundColor: "#020202", 
      color: "#33ff00", 
      fontFamily: "monospace" 
    }}>
      <div>Loading terminal...</div>
    </div>
  ),
 });
 export default function NotFound() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);
  // In tests, avoid next/dynamic loadable timing and render a stable fallback
  if (process.env.NODE_ENV === "test") {
    return (
-      <div>
+        <div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
-        Oops! The page you&apos;re looking for doesn&apos;t exist.
+            <div className="text-center p-10 bg-white dark:bg-gray-700 rounded shadow-md">
                <h1 className="text-6xl font-bold text-gray-800 dark:text-white">
                    404
                </h1>
                <p className="mt-4 text-xl text-gray-600 dark:text-gray-300">
                    Oops! The page you&#39;re looking for doesn&#39;t exist.
                </p>
                <Link
                    href="/"
                    className="mt-6 inline-block text-blue-500 hover:underline"
                >
                    Go Back Home
                </Link>
            </div>
    );
  }
  if (!mounted) {
    return (
      <div style={{ 
        position: "fixed", 
        top: 0, 
        left: 0, 
        width: "100vw", 
        height: "100vh", 
        margin: 0, 
        padding: 0, 
        overflow: "hidden",
        backgroundColor: "#020202",
        zIndex: 9998
      }}>
        <div style={{ 
          display: "flex", 
          alignItems: "center", 
          justifyContent: "center", 
          width: "100%", 
          height: "100%", 
          color: "#33ff00", 
          fontFamily: "monospace" 
        }}>
          Loading terminal...
        </div>
      </div>
    );
  }
  return (
    <div style={{ 
      position: "fixed", 
      top: 0, 
      left: 0, 
      width: "100vw", 
      height: "100vh", 
      margin: 0, 
      padding: 0, 
      overflow: "hidden",
      backgroundColor: "#020202",
      zIndex: 9998
    }}>
      <KernelPanic404 />
        </div>
    );
 }
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,8 +1,168 @@
-import { redirect } from "next/navigation";
+"use client";
 import { cookies } from "next/headers";
-export default async function RootRedirectPage() {
+import Header from "./components/Header";
-  const cookieStore = await cookies();
+import Hero from "./components/Hero";
-  const locale = cookieStore.get("NEXT_LOCALE")?.value || "en";
+import About from "./components/About";
-  redirect(`/${locale}`);
+import Projects from "./components/Projects";
 import Contact from "./components/Contact";
 import Footer from "./components/Footer";
 import Script from "next/script";
 import ActivityFeed  from "./components/ActivityFeed";
 import { motion } from "framer-motion";
 export default function Home() {
  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",
            ],
          }),
        }}
      />
      <ActivityFeed />
      <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"
          >
            <motion.path
              d="M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z"
              fill="url(#gradient1)"
              initial={{ opacity: 0 }}
              animate={{
                opacity: 1,
                d: [
                  "M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z",
                  "M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z",
                  "M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z",
                ],
              }}
              transition={{
                opacity: { duration: 0.8, delay: 0.3 },
                d: {
                  duration: 12,
                  repeat: Infinity,
                  ease: "easeInOut",
                },
              }}
            />
            <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"
          >
            <motion.path
              d="M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z"
              fill="url(#gradient2)"
              initial={{ opacity: 0 }}
              animate={{
                opacity: 1,
                d: [
                  "M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z",
                  "M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z",
                  "M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z",
                ],
              }}
              transition={{
                opacity: { duration: 0.8, delay: 0.3 },
                d: {
                  duration: 14,
                  repeat: Infinity,
                  ease: "easeInOut",
                },
              }}
            />
            <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"
          >
            <motion.path
              d="M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z"
              fill="url(#gradient3)"
              initial={{ opacity: 0 }}
              animate={{
                opacity: 1,
                d: [
                  "M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z",
                  "M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z",
                  "M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z",
                ],
              }}
              transition={{
                opacity: { duration: 0.8, delay: 0.3 },
                d: {
                  duration: 16,
                  repeat: Infinity,
                  ease: "easeInOut",
                },
              }}
            />
            <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/privacy-policy/page.tsx
+++ b/app/privacy-policy/page.tsx
@@ -6,40 +6,8 @@ import { ArrowLeft } from 'lucide-react';
 import Header from "../components/Header";
 import Footer from "../components/Footer";
 import Link from "next/link";
 import { useLocale, useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import type { JSONContent } from "@tiptap/react";
 import RichTextClient from "../components/RichTextClient";
 export default function PrivacyPolicy() {
  const locale = useLocale();
  const t = useTranslations("common");
  const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
  const [cmsTitle, setCmsTitle] = useState<string | null>(null);
  useEffect(() => {
    (async () => {
      try {
        const res = await fetch(
          `/api/content/page?key=${encodeURIComponent("privacy-policy")}&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);
          setCmsTitle((data.content.title as string | null) ?? null);
        } else {
          setCmsDoc(null);
          setCmsTitle(null);
        }
      } catch {
        // ignore; fallback to static content
        setCmsDoc(null);
        setCmsTitle(null);
      }
    })();
  }, [locale]);
  return (
    <div className="min-h-screen animated-bg">
      <Header />
@@ -51,15 +19,15 @@ export default function PrivacyPolicy() {
          className="mb-8"
        >
          <motion.a
-            href={`/${locale}`}
+            href="/"
            className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors mb-6"
          >
            <ArrowLeft size={20} />
-            <span>{t("backToHome")}</span>
+            <span>Back to Home</span>
          </motion.a>
          <h1 className="text-4xl md:text-5xl font-bold mb-6 gradient-text">
-            {cmsTitle || "Datenschutzerklärung"}
+            Datenschutzerklärung
          </h1>
        </motion.div>
@@ -69,10 +37,6 @@ export default function PrivacyPolicy() {
          transition={{ duration: 0.8, delay: 0.2 }}
          className="glass-card p-8 rounded-2xl space-y-6 text-white"
        >
          {cmsDoc ? (
            <RichTextClient doc={cmsDoc} className="prose prose-invert max-w-none text-gray-300" />
          ) : (
            <>
          <div className="text-gray-300 leading-relaxed">
            <p>
              Der Schutz Ihrer persönlichen Daten ist mir wichtig. In dieser Datenschutzerklärung informiere ich Sie 
@@ -81,39 +45,25 @@ export default function PrivacyPolicy() {
          </div>
          <div className="text-gray-300 leading-relaxed">
-                <h2 className="text-2xl font-semibold mb-4">Verantwortlicher für die Datenverarbeitung</h2>
+            <h2 className="text-2xl font-semibold mb-4">
              Verantwortlicher für die Datenverarbeitung
            </h2>
            <div className="space-y-2 text-gray-300">
-                  <p>
+              <p><strong>Name:</strong> Dennis Konkol</p>
-                    <strong>Name:</strong> Dennis Konkol
+              <p><strong>Adresse:</strong> Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland</p>
-                  </p>
+              <p><strong>E-Mail:</strong> <Link className="text-blue-400 hover:text-blue-300 transition-colors" href="mailto:info@dk0.dev">info@dk0.dev</Link></p>
-                  <p>
+              <p><strong>Website:</strong> <Link className="text-blue-400 hover:text-blue-300 transition-colors" href="https://www.dk0.dev">dk0.dev</Link></p>
                    <strong>Adresse:</strong> Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland
                  </p>
                  <p>
                    <strong>E-Mail:</strong>{" "}
                    <Link className="text-blue-400 hover:text-blue-300 transition-colors" href="mailto:info@dk0.dev">
                      info@dk0.dev
                    </Link>
                  </p>
                  <p>
                    <strong>Website:</strong>{" "}
                    <Link className="text-blue-400 hover:text-blue-300 transition-colors" href="https://www.dk0.dev">
                      dk0.dev
                    </Link>
                  </p>
            </div>
            <p className="mt-4">
-                  Diese Datenschutzerklärung gilt für die Verarbeitung personenbezogener Daten durch den oben genannten
+              Diese Datenschutzerklärung gilt für die Verarbeitung personenbezogener Daten durch den oben genannten Verantwortlichen.
                  Verantwortlichen.
            </p>
          </div>
        <h2 className="text-2xl font-semibold mt-6">
          Erfassung allgemeiner Informationen beim Besuch meiner Website
        </h2>
        <div className="mt-2">
-                Beim Zugriff auf meiner Website werden automatisch Informationen allgemeiner Natur erfasst. Diese
+          Beim Zugriff auf meiner Website werden automatisch Informationen
-                beinhalten unter anderem:
+          allgemeiner Natur erfasst. Diese beinhalten unter anderem:
          <ul className="list-disc list-inside mt-2">
            <li>IP-Adresse (in anonymisierter Form)</li>
            <li>Uhrzeit</li>
@@ -122,23 +72,23 @@ export default function PrivacyPolicy() {
            <li>Referrer-URL (die zuvor besuchte Seite)</li>
          </ul>
          <br />
-                Diese Informationen werden anonymisiert erfasst und dienen ausschließlich statistischen Auswertungen.
+          Diese Informationen werden anonymisiert erfasst und dienen
-                Rückschlüsse auf Ihre Person sind nicht möglich. Diese Daten werden verarbeitet, um:
+          ausschließlich statistischen Auswertungen. Rückschlüsse auf Ihre
          Person sind nicht möglich. Diese Daten werden verarbeitet, um:
          <ul className="list-disc list-inside mt-2">
            <li>die Inhalte meiner Website korrekt auszuliefern,</li>
            <li>die Inhalte meiner Website zu optimieren,</li>
            <li>die Systemsicherheit und -stabilität zu analysiern.</li>
          </ul>
        </div>
        <h2 className="text-2xl font-semibold mt-6">Cookies</h2>
        <p className="mt-2">
-                Diese Website verwendet ein technisch notwendiges Cookie, um deine Datenschutz-Einstellungen (z.B.
+          Meine Website verwendet keine Cookies. Daher ist kein
-                Analytics/Chatbot) zu speichern. Ohne dieses Cookie wäre ein Consent-Banner bei jedem Besuch erneut
+          Cookie-Consent-Banner erforderlich.
                nötig.
        </p>
-
+        <h2 className="text-2xl font-semibold mt-6">
-              <h2 className="text-2xl font-semibold mt-6">Analyse- und Tracking-Tools</h2>
+          Analyse- und Tracking-Tools
        </h2>
        <p className="mt-2">
          Die nachfolgend beschriebene Analyse- und Tracking-Methode (im
          Folgenden „Maßnahme“ genannt) basiert auf Art. 6 Abs. 1 S. 1 lit. f
@@ -168,11 +118,6 @@ export default function PrivacyPolicy() {
          </Link>
          .
        </p>
        <p className="mt-4">
          Zusätzlich kann diese Website optionale, selbst gehostete
          Nutzungsstatistiken erfassen (z.B. Seitenaufrufe, Performance-Metriken),
          die erst nach deiner Einwilligung im Consent-Banner aktiviert werden.
        </p>
        <h2 className="text-2xl font-semibold mt-6">Kontaktformular</h2>
        <p className="mt-2">
          Wenn Sie das Kontaktformular nutzen, werden Ihre Angaben zur
@@ -181,17 +126,6 @@ export default function PrivacyPolicy() {
          <br />
          Rechtsgrundlage: Art. 6 Abs. 1 S. 1 lit. a DSGVO (Einwilligung).
        </p>
        <h2 className="text-2xl font-semibold mt-6">Chatbot</h2>
        <p className="mt-2">
          Wenn du den optionalen Chatbot nutzt, werden die von dir eingegebenen
          Nachrichten verarbeitet, um eine Antwort zu generieren. Die Verarbeitung
          kann dabei über eine selbst gehostete Automations-/Chat-Infrastruktur
          (z.B. n8n) erfolgen. Bitte gib im Chat keine sensiblen Daten ein.
          <br />
          <br />
          Rechtsgrundlage: Art. 6 Abs. 1 S. 1 lit. a DSGVO (Einwilligung) – der
          Chatbot wird erst nach Aktivierung im Consent-Banner geladen.
        </p>
        <h2 className="text-2xl font-semibold mt-6">Social Media Links</h2>
        <p className="mt-2">
          Unsere Website enthält Links zu GitHub und LinkedIn. Durch das
@@ -299,8 +233,6 @@ export default function PrivacyPolicy() {
          <div className="pt-4 border-t border-gray-700">
            <p className="text-gray-400 text-sm">Letzte Aktualisierung: 12.02.2025</p>
          </div>
            </>
          )}
        </motion.div>
      </main>
      <Footer />
--- a/app/projects/[slug]/page.tsx
+++ b/app/projects/[slug]/page.tsx
@@ -1,16 +1,14 @@
 "use client";
 import { motion } from 'framer-motion';
-import { ExternalLink, Calendar, ArrowLeft, Github as GithubIcon, Share2 } from 'lucide-react';
+import { ExternalLink, Calendar, Tag, ArrowLeft, Github as GithubIcon } from 'lucide-react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { useState, useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { useLocale, useTranslations } from "next-intl";
 interface Project {
  id: number;
  slug: string;
  title: string;
  description: string;
  content: string;
@@ -20,14 +18,11 @@ interface Project {
  date: string;
  github?: string;
  live?: string;
  imageUrl?: string;
 }
 const ProjectDetail = () => {
  const params = useParams();
  const slug = params.slug as string;
  const locale = useLocale();
  const t = useTranslations("common");
  const [project, setProject] = useState<Project | null>(null);
  // Load project from API by slug
@@ -38,28 +33,7 @@ const ProjectDetail = () => {
        if (response.ok) {
          const data = await response.json();
          if (data.projects && data.projects.length > 0) {
-            const loadedProject = data.projects[0];
+            setProject(data.projects[0]);
            setProject(loadedProject);
            // Track page view
            try {
              await fetch('/api/analytics/track', {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                  type: 'pageview',
                  projectId: loadedProject.id.toString(),
                  page: `/projects/${slug}`
                })
              });
            } catch (trackError) {
              // Silently fail tracking
              if (process.env.NODE_ENV === 'development') {
                console.error('Error tracking page view:', trackError);
              }
            }
          }
        }
      } catch (error) {
@@ -74,179 +48,139 @@ const ProjectDetail = () => {
  if (!project) {
    return (
-      <div className="min-h-screen bg-[#fdfcf8] flex items-center justify-center">
+      <div className="min-h-screen animated-bg flex items-center justify-center">
        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-stone-800 mx-auto mb-4"></div>
+          <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-500 mx-auto mb-4"></div>
-          <p className="text-stone-500 font-medium">Loading project...</p>
+          <p className="text-gray-400">Loading project...</p>
        </div>
      </div>
    );
  }
  return (
-    <div className="min-h-screen bg-[#fdfcf8] pt-32 pb-20">
+    <div className="min-h-screen animated-bg">
-      <div className="max-w-4xl mx-auto px-4">
+      <div className="max-w-4xl mx-auto px-4 pt-32 pb-20">
-        {/* Navigation */}
+        {/* Header */}
        <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">{t("backToProjects")}</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 }}
+          transition={{ duration: 0.8 }}
          className="mb-12"
        >
-          <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
+          <Link
-            <h1 className="text-4xl md:text-6xl font-black font-sans text-stone-900 tracking-tight leading-tight">
+            href="/projects"
            className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors mb-6"
          >
            <ArrowLeft size={20} />
            <span>Back to Projects</span>
          </Link>
          <div className="flex items-center justify-between mb-6">
            <h1 className="text-4xl md:text-5xl font-bold gradient-text">
              {project.title}
            </h1>
            <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">
+              <span className="px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white text-sm font-semibold rounded-full">
                Featured
              </span>
            )}
                 <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">
+          <p className="text-xl text-gray-400 mb-6">
            {project.description}
          </p>
-          <div className="flex flex-wrap items-center gap-6 text-stone-500 text-sm border-y border-stone-200 py-6">
+          {/* Project Meta */}
          <div className="flex flex-wrap items-center gap-6 text-gray-400 mb-8">
            <div className="flex items-center space-x-2">
-              <Calendar size={18} />
+              <Calendar size={20} />
-              <span className="font-mono">{new Date(project.date).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}</span>
+              <span>{project.date}</span>
            </div>
-            <div className="h-4 w-px bg-stone-300 hidden sm:block"></div>
+            <div className="flex items-center space-x-2">
-            <div className="flex flex-wrap gap-2">
+              <Tag size={20} />
-                {project.tags.map(tag => (
+              <span>{project.category}</span>
-                    <span key={tag} className="text-stone-700 font-medium">#{tag}</span>
+            </div>
          </div>
          {/* Tags */}
          <div className="flex flex-wrap gap-3 mb-8">
            {project.tags.map((tag) => (
              <span
                key={tag}
                className="px-4 py-2 bg-gray-800/50 text-gray-300 rounded-full border border-gray-700"
              >
                {tag}
              </span>
            ))}
          </div>
          </div>
        </motion.div>
-        {/* Featured Image / Fallback */}
+          {/* Action Buttons */}
-        <motion.div
+          {((project.github && project.github.trim() && project.github !== "#") || (project.live && project.live.trim() && project.live !== "#")) && (
-            initial={{ opacity: 0, scale: 0.95 }}
+            <div className="flex flex-wrap gap-4">
-            animate={{ opacity: 1, scale: 1 }}
+              {project.github && project.github.trim() && project.github !== "#" && (
-            transition={{ duration: 0.8, delay: 0.2 }}
+                <motion.a
-            className="mb-16 rounded-2xl overflow-hidden shadow-2xl bg-stone-100 aspect-video relative"
+                  href={project.github}
                  target="_blank"
                  rel="noopener noreferrer"
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                  className="inline-flex items-center space-x-2 px-6 py-3 bg-gray-800/50 hover:bg-gray-700/50 text-white rounded-lg transition-colors border border-gray-700"
                >
-             {project.imageUrl ? (
+                  <GithubIcon size={20} />
-                <img 
+                  <span>View Code</span>
-                    src={project.imageUrl} 
+                </motion.a>
-                    alt={project.title} 
+              )}
-                    className="w-full h-full object-cover"
+              
-                />
+              {project.live && project.live.trim() && project.live !== "#" && (
-             ) : (
+                <motion.a
-                <div className="absolute inset-0 bg-gradient-to-br from-stone-200 to-stone-300 flex items-center justify-center">
+                  href={project.live}
-                    <span className="text-9xl font-serif font-bold text-stone-500/20 select-none">
+                  target="_blank"
-                        {project.title.charAt(0)}
+                  rel="noopener noreferrer"
-                    </span>
+                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                  className="inline-flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
                >
                  <ExternalLink size={20} />
                  <span>Live Demo</span>
                </motion.a>
              )}
            </div>
          )}
        </motion.div>
-
+        {/* Project Content */}
        {/* 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 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
-            className="lg:col-span-2"
+          className="glass-card p-8 rounded-2xl"
        >
-            <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">
+          <div className="markdown prose prose-invert max-w-none text-white">
            <ReactMarkdown
              components={{
-                         // Custom components to ensure styling matches
+                h1: ({children}) => <h1 className="text-3xl font-bold text-white mb-4">{children}</h1>,
-                        h1: ({children}) => <h1 className="text-3xl font-bold text-stone-900 mt-8 mb-4">{children}</h1>,
+                h2: ({children}) => <h2 className="text-2xl font-semibold text-white mb-3">{children}</h2>,
-                        h2: ({children}) => <h2 className="text-2xl font-bold text-stone-900 mt-8 mb-4">{children}</h2>,
+                h3: ({children}) => <h3 className="text-xl font-semibold text-white mb-2">{children}</h3>,
-                        p: ({children}) => <p className="text-stone-700 leading-relaxed mb-6">{children}</p>,
+                p: ({children}) => <p className="text-gray-300 mb-3 leading-relaxed">{children}</p>,
-                        li: ({children}) => <li className="text-stone-700">{children}</li>,
+                ul: ({children}) => <ul className="list-disc list-inside text-gray-300 mb-3 space-y-1">{children}</ul>,
-                        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>,
+                ol: ({children}) => <ol className="list-decimal list-inside text-gray-300 mb-3 space-y-1">{children}</ol>,
-                        pre: ({children}) => <pre className="bg-stone-900 text-stone-50 p-6 rounded-xl overflow-x-auto my-6 shadow-lg">{children}</pre>,
+                li: ({children}) => <li className="text-gray-300">{children}</li>,
                a: ({href, children}) => (
                  <a href={href} className="text-blue-400 hover:text-blue-300 underline transition-colors" target="_blank" rel="noopener noreferrer">
                    {children}
                  </a>
                ),
                code: ({children}) => <code className="bg-gray-800 text-blue-400 px-2 py-1 rounded text-sm">{children}</code>,
                pre: ({children}) => <pre className="bg-gray-800 p-4 rounded-lg overflow-x-auto mb-3">{children}</pre>,
                blockquote: ({children}) => <blockquote className="border-l-4 border-blue-500 pl-4 italic text-gray-300 mb-3">{children}</blockquote>,
                strong: ({children}) => <strong className="font-semibold text-white">{children}</strong>,
                em: ({children}) => <em className="italic text-gray-300">{children}</em>
              }}
            >
              {project.content}
            </ReactMarkdown>
          </div>
        </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/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -1,14 +1,13 @@
 "use client";
 import { useState, useEffect } from "react";
 import { motion } from 'framer-motion';
-import { ExternalLink, Github, Calendar, ArrowLeft, Search } from 'lucide-react';
+import { ExternalLink, Github, Calendar, ArrowLeft } from 'lucide-react';
 import Link from 'next/link';
 import { useLocale, useTranslations } from "next-intl";
 interface Project {
  id: number;
  slug: string;
  title: string;
  description: string;
  content: string;
@@ -18,18 +17,10 @@ interface Project {
  date: string;
  github?: string;
  live?: string;
  imageUrl?: string;
 }
 const ProjectsPage = () => {
  const [projects, setProjects] = useState<Project[]>([]);
  const [filteredProjects, setFilteredProjects] = useState<Project[]>([]);
  const [categories, setCategories] = useState<string[]>(["All"]);
  const [selectedCategory, setSelectedCategory] = useState("All");
  const [searchQuery, setSearchQuery] = useState("");
  const [mounted, setMounted] = useState(false);
  const locale = useLocale();
  const t = useTranslations("common");
  // Load projects from API
  useEffect(() => {
@@ -38,12 +29,7 @@ const ProjectsPage = () => {
        const response = await fetch('/api/projects?published=true');
        if (response.ok) {
          const data = await response.json();
-          const loadedProjects = data.projects || [];
+          setProjects(data.projects || []);
          setProjects(loadedProjects);
          // Extract unique categories
          const uniqueCategories = ["All", ...Array.from(new Set(loadedProjects.map((p: Project) => p.category))) as string[]];
          setCategories(uniqueCategories);
        }
      } catch (error) {
        if (process.env.NODE_ENV === 'development') {
@@ -53,36 +39,31 @@ const ProjectsPage = () => {
    };
    loadProjects();
  }, []);
  const categories = ["All", "Web Development", "Full-Stack", "Web Application", "Mobile App"];
  const [selectedCategory, setSelectedCategory] = useState("All");
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);
-  // Filter projects
+  if (!mounted) {
-  useEffect(() => {
+    return null;
    let result = projects;
    if (selectedCategory !== "All") {
      result = result.filter(project => project.category === selectedCategory);
  }
-    if (searchQuery) {
+  const filteredProjects = selectedCategory === "All" 
-      const query = searchQuery.toLowerCase();
+    ? projects 
-      result = result.filter(project => 
+    : projects.filter(project => project.category === selectedCategory);
        project.title.toLowerCase().includes(query) || 
        project.description.toLowerCase().includes(query) ||
        project.tags.some(tag => tag.toLowerCase().includes(query))
      );
    }
    setFilteredProjects(result);
  }, [projects, selectedCategory, searchQuery]);
  if (!mounted) {
    return null;
  }
  return (
-    <div className="min-h-screen bg-[#fdfcf8] pt-32 pb-20">
+    <div className="min-h-screen animated-bg">
-      <div className="max-w-7xl mx-auto px-4">
+      <div className="max-w-7xl mx-auto px-4 pt-32 pb-20">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
@@ -91,57 +72,44 @@ const ProjectsPage = () => {
          className="mb-12"
        >
          <Link
-            href={`/${locale}`}
+            href="/"
-            className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-800 transition-colors mb-8 group"
+            className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors mb-6"
          >
-            <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
+            <ArrowLeft size={20} />
-            <span>{t("backToHome")}</span>
+            <span>Back to Home</span>
          </Link>
-          <h1 className="text-5xl md:text-6xl font-black font-sans mb-6 text-stone-900 tracking-tight">
+          <h1 className="text-5xl md:text-6xl font-bold mb-6 gradient-text">
            My Projects
          </h1>
-          <p className="text-xl text-stone-600 max-w-3xl font-light leading-relaxed">
+          <p className="text-xl text-gray-400 max-w-3xl">
            Explore my portfolio of projects, from web applications to mobile apps. 
            Each project showcases different skills and technologies.
          </p>
        </motion.div>
-        {/* Filters & Search */}
+        {/* Category Filter */}
        <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"
+          className="mb-12"
        >
-          {/* Categories */}
+          <div className="flex flex-wrap gap-3">
          <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 ${
+                className={`px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
                  selectedCategory === category
-                    ? 'bg-stone-800 text-stone-50 border-stone-800 shadow-md'
+                    ? 'bg-gray-800 text-cream shadow-lg'
-                    : 'bg-white text-stone-600 border-stone-200 hover:bg-stone-50 hover:border-stone-300'
+                    : 'bg-gray-800/50 text-gray-300 hover:bg-gray-700/50 hover:text-white'
                }`}
              >
                {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 */}
@@ -152,155 +120,95 @@ const ProjectsPage = () => {
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
-              whileHover={{ y: -8 }}
+              whileHover={{ y: -10 }}
-              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"
+              className="group relative overflow-hidden rounded-2xl glass-card card-hover"
            >
-              {/* Image / Fallback / Cover Area */}
+              <div className="relative h-48 overflow-hidden">
-              <div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
+                <div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20" />
-                {project.imageUrl ? (
+                <div className="absolute inset-0 bg-gray-800/50 flex flex-col items-center justify-center p-4">
-                  <>
+                  <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full flex items-center justify-center mb-2">
-                    <img 
+                    <span className="text-2xl font-bold text-white">
-                      src={project.imageUrl}
+                      {project.title.split(' ').map(word => word[0]).join('').toUpperCase()}
                      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>
                  <span className="text-sm font-medium text-gray-400 text-center leading-tight">
                    {project.title}
                  </span>
                </div>
                )}
                {/* Texture/Grain Overlay */}
                <div className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-overlay bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" />
                {/* Animated Shine Effect */}
                <div className="absolute inset-0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-in-out bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-[-20deg] pointer-events-none" />
                {project.featured && (
-                  <div className="absolute top-3 left-3 z-20">
+                  <div className="absolute top-4 right-4 px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 text-white text-xs font-semibold rounded-full">
                    <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 */}
+                {((project.github && project.github.trim() && project.github !== "#") || (project.live && project.live.trim() && project.live !== "#")) && (
-                <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">
+                  <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center space-x-4">
-                  {project.github && (
+                    {project.github && project.github.trim() && project.github !== "#" && (
-                    <a
+                      <motion.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"
+                        whileHover={{ scale: 1.1 }}
-                      aria-label="GitHub"
+                        whileTap={{ scale: 0.95 }}
-                      onClick={(e) => e.stopPropagation()}
+                        className="p-3 bg-gray-800/80 rounded-lg text-white hover:bg-gray-700/80 transition-colors"
                      >
                        <Github size={20} />
-                    </a>
+                      </motion.a>
                    )}
-                  {project.live && !project.title.toLowerCase().includes('kernel panic') && (
+                    {project.live && project.live.trim() && project.live !== "#" && (
-                    <a
+                      <motion.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"
+                        whileHover={{ scale: 1.1 }}
-                      aria-label="Live Demo"
+                        whileTap={{ scale: 0.95 }}
-                      onClick={(e) => e.stopPropagation()}
+                        className="p-3 bg-blue-600/80 rounded-lg text-white hover:bg-blue-500/80 transition-colors"
                      >
                        <ExternalLink size={20} />
-                    </a>
+                      </motion.a>
                    )}
                  </div>
                )}
              </div>
-              <div className="p-6 flex flex-col flex-1">
+              <div className="p-6">
                {/* 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">
+                  <h3 className="text-xl font-bold text-white group-hover:text-blue-400 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">
+                  <div className="flex items-center space-x-2 text-gray-400">
-                    <Calendar size={12} />
+                    <Calendar size={16} />
-                    <span>{new Date(project.date).getFullYear()}</span>
+                    <span className="text-sm">{project.date}</span>
                  </div>
                </div>
-                <p className="text-stone-600 mb-6 leading-relaxed line-clamp-3 text-sm flex-1">
+                <p className="text-gray-300 mb-4 leading-relaxed">
                  {project.description}
                </p>
-                <div className="flex flex-wrap gap-2 mb-6">
+                <div className="flex flex-wrap gap-2 mb-4">
-                  {project.tags.slice(0, 4).map((tag) => (
+                  {project.tags.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"
+                      className="px-3 py-1 bg-gray-800/50 text-gray-300 text-sm rounded-full border border-gray-700"
                    >
                      {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">
+                <Link
-                   <div className="flex gap-3">
+                  href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
-                      {project.github && (
+                  className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors font-medium"
                        <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} />
+                  <span>View Project</span>
-                        </a>
+                  <ExternalLink size={16} />
-                      )}
+                </Link>
                      {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/robots.txt/route.ts
+++ b/app/robots.txt/route.ts
@@ -1,25 +0,0 @@
 import { NextResponse } from "next/server";
 import { getBaseUrl } from "@/lib/seo";
 export const dynamic = "force-dynamic";
 export async function GET() {
  const base = getBaseUrl();
  const body = [
    "User-agent: *",
    "Allow: /",
    "Disallow: /api/",
    "Disallow: /manage",
    "Disallow: /editor",
    `Sitemap: ${base}/sitemap.xml`,
    "",
  ].join("\n");
  return new NextResponse(body, {
    headers: {
      "Content-Type": "text/plain; charset=utf-8",
      "Cache-Control": "public, max-age=3600",
    },
  });
 }
--- a/app/sitemap.xml/route.tsx
+++ b/app/sitemap.xml/route.tsx
@@ -1,20 +1,67 @@
 import { NextResponse } from "next/server";
 import { generateSitemapXml, getSitemapEntries } from "@/lib/sitemap";
 export const dynamic = "force-dynamic";
 export async function GET() {
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
  const apiUrl = `${baseUrl}/api/sitemap`; // Verwende die vollständige URL zur API
  // In test runs, allow returning a mocked sitemap explicitly
  if (process.env.NODE_ENV === "test" && process.env.GHOST_MOCK_SITEMAP) {
    // For tests return a simple object so tests can inspect `.body`
    if (process.env.NODE_ENV === "test") {
      /* eslint-disable @typescript-eslint/no-explicit-any */
      return {
        body: process.env.GHOST_MOCK_SITEMAP,
        headers: { "Content-Type": "application/xml" },
      } as any;
      /* eslint-enable @typescript-eslint/no-explicit-any */
    }
    return new NextResponse(process.env.GHOST_MOCK_SITEMAP, {
      headers: { "Content-Type": "application/xml" },
    });
  }
  try {
-    const entries = await getSitemapEntries();
+    // Holt die Sitemap-Daten von der API
-    const xml = generateSitemapXml(entries);
+    // Try global fetch first, then fall back to node-fetch
    /* eslint-disable @typescript-eslint/no-explicit-any */
    let res: any;
    try {
      if (typeof (globalThis as any).fetch === "function") {
        res = await (globalThis as any).fetch(apiUrl);
      }
    } catch (_e) {
      res = undefined;
    }
    if (!res || typeof res.ok === "undefined" || !res.ok) {
      try {
        const mod = await import("node-fetch");
        const nodeFetch = (mod as any).default ?? mod;
        res = await (nodeFetch as any)(apiUrl);
      } catch (err) {
        console.error("Error fetching sitemap:", err);
        return new NextResponse("Error fetching sitemap", { status: 500 });
      }
    }
    /* eslint-enable @typescript-eslint/no-explicit-any */
    if (!res || !res.ok) {
      console.error(
        `Failed to fetch sitemap: ${res?.statusText ?? "no response"}`,
      );
      return new NextResponse("Failed to fetch sitemap", { status: 500 });
    }
    const xml = await res.text();
    // Gibt die XML mit dem richtigen Content-Type zurück
    return new NextResponse(xml, {
      headers: { "Content-Type": "application/xml" },
    });
  } catch (error) {
-    console.error("Error generating sitemap.xml:", error);
+    console.error("Error fetching sitemap:", error);
-    // Always return a valid sitemap with 200 so crawlers don't treat it as broken.
+    return new NextResponse("Error fetching sitemap", { status: 500 });
    return new NextResponse(generateSitemapXml([]), {
      headers: { "Content-Type": "application/xml" },
    });
  }
 }
--- a/components/AnalyticsDashboard.tsx
+++ b/components/AnalyticsDashboard.tsx
@@ -4,7 +4,9 @@ import { useState, useEffect, useCallback } from 'react';
 import { motion } from 'framer-motion';
 import { 
  BarChart3, 
  TrendingUp, 
  Eye, 
  Heart, 
  Zap, 
  Globe,
  Activity,
@@ -16,7 +18,6 @@ import {
  Trash2,
  AlertTriangle
 } from 'lucide-react';
 import { useToast } from '@/components/Toast';
 interface AnalyticsData {
  overview: {
@@ -24,6 +25,8 @@ interface AnalyticsData {
    publishedProjects: number;
    featuredProjects: number;
    totalViews: number;
    totalLikes: number;
    totalShares: number;
    avgLighthouse: number;
  };
  projects: Array<{
@@ -32,6 +35,8 @@ interface AnalyticsData {
    category: string;
    difficulty: string;
    views: number;
    likes: number;
    shares: number;
    lighthouse: number;
    published: boolean;
    featured: boolean;
@@ -43,6 +48,8 @@ interface AnalyticsData {
  performance: {
    avgLighthouse: number;
    totalViews: number;
    totalLikes: number;
    totalShares: number;
  };
  metrics: {
    bounceRate: number;
@@ -64,7 +71,6 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
  const [showResetModal, setShowResetModal] = useState(false);
  const [resetType, setResetType] = useState<'analytics' | 'pageviews' | 'interactions' | 'performance' | 'all'>('analytics');
  const [resetting, setResetting] = useState(false);
  const { showSuccess, showError } = useToast();
  const fetchAnalyticsData = useCallback(async () => {
    if (!isAuthenticated) return;
@@ -72,16 +78,13 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
    try {
      setLoading(true);
      setError(null);
      const sessionToken = sessionStorage.getItem('admin_session_token') || '';
      // Add cache-busting parameter to ensure fresh data after reset
      const cacheBust = `?nocache=true&t=${Date.now()}`;
      const [analyticsRes, performanceRes] = await Promise.all([
-        fetch(`/api/analytics/dashboard${cacheBust}`, {
+        fetch('/api/analytics/dashboard', {
-          headers: { 'x-admin-request': 'true', 'x-session-token': sessionToken }
+          headers: { 'x-admin-request': 'true' }
        }),
-        fetch(`/api/analytics/performance${cacheBust}`, {
+        fetch('/api/analytics/performance', {
-          headers: { 'x-admin-request': 'true', 'x-session-token': sessionToken }
+          headers: { 'x-admin-request': 'true' }
        })
      ]);
@@ -100,19 +103,23 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
          publishedProjects: 0,
          featuredProjects: 0,
          totalViews: 0,
          totalLikes: 0,
          totalShares: 0,
          avgLighthouse: 90
        },
        projects: analytics.projects || [],
        categories: analytics.categories || {},
        difficulties: analytics.difficulties || {},
-        performance: {
+        performance: performance.performance || {
-          avgLighthouse: performance.avgLighthouse || analytics.overview?.avgLighthouse || 0,
+          avgLighthouse: 90,
-          totalViews: performance.totalViews || analytics.overview?.totalViews || 0,
+          totalViews: 0,
          totalLikes: 0,
          totalShares: 0
        },
-        metrics: performance.metrics || analytics.metrics || {
+        metrics: performance.metrics || {
-          bounceRate: 0,
+          bounceRate: 35,
-          avgSessionDuration: 0,
+          avgSessionDuration: 180,
-          pagesPerSession: 0,
+          pagesPerSession: 2.5,
          newUsers: 0
        }
      });
@@ -127,38 +134,25 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
    if (!isAuthenticated || resetting) return;
    setResetting(true);
    setError(null);
    try {
      const sessionToken = sessionStorage.getItem('admin_session_token') || '';
      const response = await fetch('/api/analytics/reset', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
-          'x-admin-request': 'true',
+          'x-admin-request': 'true'
          'x-session-token': sessionToken
        },
        body: JSON.stringify({ type: resetType })
      });
      const result = await response.json();
      if (response.ok) {
-        showSuccess(
+        await fetchAnalyticsData(); // Refresh data
          'Analytics Reset', 
          `Successfully reset ${resetType === 'all' ? 'all analytics data' : resetType} data.`
        );
        setShowResetModal(false);
        // Clear cache and refresh data
        await fetchAnalyticsData();
      } else {
-        const errorMsg = result.error || 'Failed to reset analytics';
+        const errorData = await response.json();
-        setError(errorMsg);
+        setError(errorData.error || 'Failed to reset analytics');
        showError('Reset Failed', errorMsg);
      }
    } catch (err) {
-      const errorMsg = 'Failed to reset analytics. Please try again.';
+      setError('Failed to reset analytics');
      setError(errorMsg);
      showError('Reset Failed', errorMsg);
      console.error('Reset error:', err);
    } finally {
      setResetting(false);
@@ -171,59 +165,63 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
    }
  }, [isAuthenticated, fetchAnalyticsData]);
-  const StatCard = ({ title, value, icon: Icon, color, description, tooltip }: {
+  const StatCard = ({ title, value, icon: Icon, color, trend, trendValue, description }: {
    title: string;
    value: number | string;
    icon: React.ComponentType<{ className?: string; size?: number }>;
    color: string;
    trend?: 'up' | 'down' | 'neutral';
    trendValue?: string;
    description?: string;
    tooltip?: string;
  }) => (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
-      className="bg-white border border-stone-200 p-6 rounded-xl hover:shadow-md transition-all duration-200 group relative"
+      className="admin-glass-card p-6 rounded-xl hover:scale-105 transition-all duration-200"
    >
      <div className="flex items-start justify-between">
        <div className="flex-1">
          <div className="flex items-center space-x-3 mb-4">
            <div className={`p-3 rounded-xl ${color}`}>
-              <Icon className="w-6 h-6" size={24} />
+              <Icon className="w-6 h-6 text-white" size={24} />
            </div>
            <div>
-              <p className="text-stone-500 text-sm font-medium">{title}</p>
+              <p className="text-white/60 text-sm font-medium">{title}</p>
-              {description && <p className="text-stone-400 text-xs">{description}</p>}
+              {description && <p className="text-white/40 text-xs">{description}</p>}
            </div>
          </div>
-          <p className="text-3xl font-bold text-stone-900 mb-2">{value}</p>
+          <p className="text-3xl font-bold text-white mb-2">{value}</p>
-        </div>
+          {trend && trendValue && (
-      </div>
+            <div className={`flex items-center space-x-1 text-sm ${
-      {tooltip && (
+              trend === 'up' ? 'text-green-400' : 
-        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-stone-900/95 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-normal max-w-xs z-50 shadow-xl backdrop-blur-sm pointer-events-none">
+              trend === 'down' ? 'text-red-400' : 'text-yellow-400'
-          {tooltip}
+            }`}>
-          <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-2 h-2 bg-stone-900/95 rotate-45"></div>
+              <TrendingUp className={`w-4 h-4 ${trend === 'down' ? 'rotate-180' : ''}`} />
              <span>{trendValue}</span>
            </div>
          )}
        </div>
      </div>
    </motion.div>
  );
  const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
-      case 'Beginner': return 'bg-stone-50 text-stone-700 border-stone-200';
+      case 'Beginner': return 'bg-green-500/30 text-green-400 border-green-500/40';
-      case 'Intermediate': return 'bg-stone-100 text-stone-700 border-stone-300';
+      case 'Intermediate': return 'bg-yellow-500/30 text-yellow-400 border-yellow-500/40';
-      case 'Advanced': return 'bg-stone-200 text-stone-800 border-stone-400';
+      case 'Advanced': return 'bg-orange-500/30 text-orange-400 border-orange-500/40';
-      case 'Expert': return 'bg-stone-300 text-stone-900 border-stone-500';
+      case 'Expert': return 'bg-red-500/30 text-red-400 border-red-500/40';
-      default: return 'bg-stone-50 text-stone-600 border-stone-200';
+      default: return 'bg-gray-500/30 text-gray-400 border-gray-500/40';
    }
  };
  const getCategoryColor = (index: number) => {
    const colors = [
-      'bg-stone-100 text-stone-700',
+      'bg-blue-500/30 text-blue-400',
-      'bg-stone-200 text-stone-800',
+      'bg-purple-500/30 text-purple-400',
-      'bg-stone-300 text-stone-900',
+      'bg-green-500/30 text-green-400',
-      'bg-stone-100 text-stone-700',
+      'bg-pink-500/30 text-pink-400',
-      'bg-stone-200 text-stone-800'
+      'bg-indigo-500/30 text-indigo-400'
    ];
    return colors[index % colors.length];
  };
@@ -235,23 +233,23 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
-          <h1 className="text-3xl font-bold text-stone-900 flex items-center">
+          <h1 className="text-3xl font-bold text-white flex items-center">
-            <BarChart3 className="w-8 h-8 mr-3 text-stone-600" />
+            <BarChart3 className="w-8 h-8 mr-3 text-blue-400" />
            Analytics Dashboard
          </h1>
-          <p className="text-stone-500 mt-2">Portfolio performance and analytics metrics</p>
+          <p className="text-white/80 mt-2">Portfolio performance and user engagement metrics</p>
        </div>
        <div className="flex items-center space-x-3">
          {/* Time Range Selector */}
-          <div className="flex items-center space-x-1 bg-white border border-stone-200 rounded-xl p-1">
+          <div className="flex items-center space-x-1 admin-glass-light rounded-xl p-1">
            {(['7d', '30d', '90d', '1y'] as const).map((range) => (
              <button
                key={range}
                onClick={() => setTimeRange(range)}
                className={`px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
                  timeRange === range
-                    ? 'bg-stone-100 text-stone-900 shadow-sm'
+                    ? 'bg-blue-500/40 text-blue-300 shadow-lg'
-                    : 'text-stone-500 hover:text-stone-800 hover:bg-stone-50'
+                    : 'text-white/70 hover:text-white hover:bg-white/10'
                }`}
              >
                {range === '7d' ? '7 Days' : range === '30d' ? '30 Days' : range === '90d' ? '90 Days' : '1 Year'}
@@ -261,15 +259,15 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
          <button
            onClick={fetchAnalyticsData}
            disabled={loading}
-            className="flex items-center space-x-2 px-4 py-2 bg-white border border-stone-200 rounded-xl hover:bg-stone-50 transition-all duration-200 disabled:opacity-50 text-stone-600"
+            className="flex items-center space-x-2 px-4 py-2 admin-glass-light rounded-xl hover:scale-105 transition-all duration-200 disabled:opacity-50"
          >
-            <RefreshCw className={`w-4 h-4 text-stone-600 ${loading ? 'animate-spin' : ''}`} />
+            <RefreshCw className={`w-4 h-4 text-blue-400 ${loading ? 'animate-spin' : ''}`} />
-            <span className="font-medium">Refresh</span>
+            <span className="text-white font-medium">Refresh</span>
          </button>
          <button
            onClick={() => setShowResetModal(true)}
-            className="flex items-center space-x-2 px-4 py-2 bg-red-50 text-red-600 border border-red-100 rounded-xl hover:bg-red-100 transition-all"
+            className="flex items-center space-x-2 px-4 py-2 bg-red-600/20 text-red-400 border border-red-500/30 rounded-xl hover:bg-red-600/30 hover:scale-105 transition-all"
          >
            <RotateCcw className="w-4 h-4" />
            <span>Reset</span>
@@ -278,17 +276,17 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
      </div>
      {loading && (
-        <div className="bg-white border border-stone-200 p-8 rounded-xl shadow-sm">
+        <div className="admin-glass-card p-8 rounded-xl">
          <div className="flex items-center justify-center space-x-3">
-            <RefreshCw className="w-6 h-6 text-stone-600 animate-spin" />
+            <RefreshCw className="w-6 h-6 text-blue-400 animate-spin" />
-            <span className="text-stone-500 text-lg">Loading analytics data...</span>
+            <span className="text-white/80 text-lg">Loading analytics data...</span>
          </div>
        </div>
      )}
      {error && (
-        <div className="bg-white border border-red-200 p-6 rounded-xl">
+        <div className="admin-glass-card p-6 rounded-xl border border-red-500/40">
-          <div className="flex items-center space-x-3 text-red-600">
+          <div className="flex items-center space-x-3 text-red-300">
            <Activity className="w-5 h-5" />
            <span>Error: {error}</span>
          </div>
@@ -299,8 +297,8 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
        <>
          {/* Overview Stats */}
          <div>
-            <h2 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
+            <h2 className="text-xl font-bold text-white mb-6 flex items-center">
-              <Target className="w-5 h-5 mr-2 text-stone-600" />
+              <Target className="w-5 h-5 mr-2 text-purple-400" />
              Overview
            </h2>
            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
@@ -308,43 +306,46 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
                title="Total Views"
                value={data.overview.totalViews.toLocaleString()}
                icon={Eye}
-                color="bg-stone-100 text-stone-600"
+                color="bg-blue-500/30"
                trend="up"
                trendValue="+12.5%"
                description="All-time page views"
                tooltip="✅ REAL DATA: Total page views tracked from the PageView database table. Each visit to a project page or the homepage is automatically recorded with IP, user agent, and timestamp."
              />
              <StatCard
                title="Projects"
                value={data.overview.totalProjects}
                icon={Globe}
-                color="bg-stone-100 text-stone-600"
+                color="bg-green-500/30"
                trend="up"
                trendValue="+2"
                description={`${data.overview.publishedProjects} published`}
-                tooltip="✅ REAL DATA: Total number of projects in your portfolio. Shows published vs unpublished projects from your database."
+              />
              <StatCard
                title="Engagement"
                value={data.overview.totalLikes}
                icon={Heart}
                color="bg-pink-500/30"
                trend="up"
                trendValue="+8.2%"
                description="Total likes & shares"
              />
              <StatCard
                title="Performance"
-                value={data.overview.avgLighthouse > 0 ? data.overview.avgLighthouse : 'N/A'}
+                value={data.overview.avgLighthouse}
                icon={Zap}
-                color="bg-stone-100 text-stone-600"
+                color="bg-orange-500/30"
-                description={data.overview.avgLighthouse > 0 ? "Avg Lighthouse score" : "No performance data yet"}
+                trend="up"
-                tooltip={data.overview.avgLighthouse > 0 
+                trendValue="+5%"
-                  ? "✅ REAL DATA: Average Lighthouse performance score (0-100) calculated from real Web Vitals metrics (LCP, FCP, CLS, FID, TTFB) collected from actual page visits. Only shown when real performance data exists."
+                description="Avg Lighthouse score"
                  : "No performance data collected yet. Scores will appear after visitors load your pages and Web Vitals are tracked."}
              />
              <StatCard
                title="Bounce Rate"
-                value={`${data.metrics?.bounceRate || 0}%`}
+                value={`${data.metrics.bounceRate}%`}
                icon={MousePointer}
-                color="bg-stone-100 text-stone-600"
+                color="bg-purple-500/30"
                trend="down"
                trendValue="-2.1%"
                description="User retention"
                tooltip="✅ REAL DATA: Percentage of sessions where users viewed only one page before leaving. Calculated from PageView records grouped by IP address. Lower is better."
              />
              <StatCard
                title="Avg Session"
                value={data.metrics?.avgSessionDuration ? `${Math.round(data.metrics.avgSessionDuration / 60)}m` : '0m'}
                icon={Activity}
                color="bg-stone-100 text-stone-600"
                description="Average session duration"
                tooltip="✅ REAL DATA: Average time users spend on your site per session, calculated from the time difference between first and last pageview per IP address. Only calculated for sessions with multiple pageviews."
              />
            </div>
          </div>
@@ -352,9 +353,9 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
          {/* Project Performance */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {/* Top Projects */}
-            <div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm">
+            <div className="admin-glass-card p-6 rounded-xl">
-              <h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
+              <h3 className="text-xl font-bold text-white mb-6 flex items-center">
-                <Award className="w-5 h-5 mr-2 text-stone-600" />
+                <Award className="w-5 h-5 mr-2 text-yellow-400" />
                Top Performing Projects
              </h3>
              <div className="space-y-4">
@@ -367,24 +368,20 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
                      initial={{ opacity: 0, x: -20 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: index * 0.1 }}
-                      className="flex items-center justify-between p-4 bg-stone-50 rounded-xl border border-stone-100"
+                      className="flex items-center justify-between p-4 admin-glass-light rounded-xl"
                    >
                      <div className="flex items-center space-x-4">
-                        <div className="w-8 h-8 bg-stone-600 rounded-lg flex items-center justify-center text-white font-bold shadow-sm">
+                        <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-500 rounded-lg flex items-center justify-center text-white font-bold">
                          #{index + 1}
                        </div>
                        <div>
-                          <p className="text-stone-900 font-medium">{project.title}</p>
+                          <p className="text-white font-medium">{project.title}</p>
-                          <p className="text-stone-500 text-sm">{project.category}</p>
+                          <p className="text-white/60 text-sm">{project.category}</p>
                        </div>
                      </div>
-                      <div className="text-right group/views relative">
+                      <div className="text-right">
-                        <p className="text-stone-900 font-bold">{project.views.toLocaleString()}</p>
+                        <p className="text-white font-bold">{project.views.toLocaleString()}</p>
-                        <p className="text-stone-500 text-sm">views</p>
+                        <p className="text-white/60 text-sm">views</p>
                        <div className="absolute bottom-full right-0 mb-2 px-3 py-2 bg-stone-900/95 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover/views:opacity-100 transition-opacity whitespace-normal max-w-xs z-50 shadow-xl backdrop-blur-sm pointer-events-none">
                          ✅ REAL DATA: Page views tracked from PageView table for this project. Each visit is automatically recorded.
                          <div className="absolute top-full right-4 -mt-1 w-2 h-2 bg-stone-900/95 rotate-45"></div>
                        </div>
                      </div>
                    </motion.div>
                  ))}
@@ -392,9 +389,9 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
            </div>
            {/* Categories Distribution */}
-            <div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm">
+            <div className="admin-glass-card p-6 rounded-xl">
-              <h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
+              <h3 className="text-xl font-bold text-white mb-6 flex items-center">
-                <BarChart3 className="w-5 h-5 mr-2 text-stone-600" />
+                <BarChart3 className="w-5 h-5 mr-2 text-green-400" />
                Categories
              </h3>
              <div className="space-y-4">
@@ -408,16 +405,16 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
                  >
                    <div className="flex items-center space-x-3">
                      <div className={`w-4 h-4 rounded-full ${getCategoryColor(index)}`}></div>
-                      <span className="text-stone-700 font-medium">{category}</span>
+                      <span className="text-white font-medium">{category}</span>
                    </div>
                    <div className="flex items-center space-x-3">
-                      <div className="w-32 h-2 bg-stone-100 rounded-full overflow-hidden">
+                      <div className="w-32 h-2 bg-white/10 rounded-full overflow-hidden">
                        <div
                          className={`h-full ${getCategoryColor(index)} transition-all duration-500`}
                          style={{ width: `${(count / Math.max(...Object.values(data.categories))) * 100}%` }}
                        ></div>
                      </div>
-                      <span className="text-stone-500 font-medium w-8 text-right">{count}</span>
+                      <span className="text-white/80 font-medium w-8 text-right">{count}</span>
                    </div>
                  </motion.div>
                ))}
@@ -425,12 +422,12 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
            </div>
          </div>
-          {/* Difficulty & Activity */}
+          {/* Difficulty & Engagement */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {/* Difficulty Distribution */}
-            <div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm">
+            <div className="admin-glass-card p-6 rounded-xl">
-              <h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
+              <h3 className="text-xl font-bold text-white mb-6 flex items-center">
-                <Target className="w-5 h-5 mr-2 text-stone-600" />
+                <Target className="w-5 h-5 mr-2 text-red-400" />
                Difficulty Levels
              </h3>
              <div className="grid grid-cols-2 gap-4">
@@ -451,9 +448,9 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
            </div>
            {/* Recent Activity */}
-            <div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm">
+            <div className="admin-glass-card p-6 rounded-xl">
-              <h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
+              <h3 className="text-xl font-bold text-white mb-6 flex items-center">
-                <Activity className="w-5 h-5 mr-2 text-blue-600" />
+                <Activity className="w-5 h-5 mr-2 text-blue-400" />
                Recent Activity
              </h3>
              <div className="space-y-4">
@@ -466,25 +463,25 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: index * 0.1 }}
-                      className="flex items-center space-x-4 p-3 bg-stone-50 rounded-xl border border-stone-100"
+                      className="flex items-center space-x-4 p-3 admin-glass-light rounded-xl"
                    >
-                      <div className="w-2 h-2 bg-stone-500 rounded-full animate-pulse"></div>
+                      <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                      <div className="flex-1">
-                        <p className="text-stone-900 font-medium text-sm">{project.title}</p>
+                        <p className="text-white font-medium text-sm">{project.title}</p>
-                        <p className="text-stone-500 text-xs">
+                        <p className="text-white/60 text-xs">
                          Updated {new Date(project.updatedAt).toLocaleDateString()}
                        </p>
                      </div>
                      <div className="flex items-center space-x-2">
                        {project.featured && (
-                          <span className="px-2 py-1 bg-stone-100 text-stone-700 rounded-full text-xs font-medium">
+                          <span className="px-2 py-1 bg-purple-500/20 text-purple-400 rounded-full text-xs">
                            Featured
                          </span>
                        )}
-                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                        <span className={`px-2 py-1 rounded-full text-xs ${
                          project.published 
-                            ? 'bg-stone-100 text-stone-700' 
+                            ? 'bg-green-500/20 text-green-400' 
-                            : 'bg-stone-200 text-stone-700'
+                            : 'bg-yellow-500/20 text-yellow-400'
                        }`}>
                          {project.published ? 'Live' : 'Draft'}
                        </span>
@@ -499,43 +496,43 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
      {/* Reset Modal */}
      {showResetModal && (
-        <div className="fixed inset-0 bg-stone-900/20 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+        <div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.95 }}
-            className="bg-white border border-stone-200 rounded-2xl p-6 w-full max-w-md shadow-xl"
+            className="admin-glass-card rounded-2xl p-6 w-full max-w-md"
          >
            <div className="flex items-center space-x-3 mb-4">
-              <div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
+              <div className="w-10 h-10 bg-red-500/20 rounded-lg flex items-center justify-center">
-                <AlertTriangle className="w-5 h-5 text-red-600" />
+                <AlertTriangle className="w-5 h-5 text-red-400" />
              </div>
              <div>
-                <h3 className="text-lg font-bold text-stone-900">Reset Analytics Data</h3>
+                <h3 className="text-lg font-bold text-white">Reset Analytics Data</h3>
-                <p className="text-stone-500 text-sm">This action cannot be undone</p>
+                <p className="text-white/60 text-sm">This action cannot be undone</p>
              </div>
            </div>
            <div className="space-y-4 mb-6">
              <div>
-                <label className="block text-stone-600 text-sm mb-2">Reset Type</label>
+                <label className="block text-white/80 text-sm mb-2">Reset Type</label>
                <select
                  value={resetType}
-                  onChange={(e) => setResetType(e.target.value as 'analytics' | 'pageviews' | 'interactions' | 'performance' | 'all')}
+                  onChange={(e) => setResetType(e.target.value as 'all' | 'performance' | 'analytics')}
-                  className="w-full px-3 py-2 bg-stone-50 border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-red-500"
+                  className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-red-500"
                >
-                  <option value="analytics">Analytics Only (project view counts)</option>
+                  <option value="analytics">Analytics Only (views, likes, shares)</option>
-                  <option value="pageviews">Page Views Only (all tracked visits)</option>
+                  <option value="pageviews">Page Views Only</option>
                  <option value="interactions">User Interactions Only</option>
-                  <option value="performance">Performance Metrics Only (Lighthouse scores)</option>
+                  <option value="performance">Performance Metrics Only</option>
                  <option value="all">Everything (Complete Reset)</option>
                </select>
              </div>
-              <div className="bg-red-50 border border-red-100 rounded-lg p-3">
+              <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3">
                <div className="flex items-start space-x-2">
-                  <AlertTriangle className="w-4 h-4 text-red-500 mt-0.5 flex-shrink-0" />
+                  <AlertTriangle className="w-4 h-4 text-red-400 mt-0.5 flex-shrink-0" />
-                  <div className="text-sm text-red-700">
+                  <div className="text-sm text-red-300">
                    <p className="font-medium mb-1">Warning:</p>
                    <p>This will permanently delete the selected analytics data. This action cannot be reversed.</p>
                  </div>
@@ -547,14 +544,14 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
              <button
                onClick={() => setShowResetModal(false)}
                disabled={resetting}
-                className="flex-1 px-4 py-2 bg-white border border-stone-200 text-stone-700 rounded-lg hover:bg-stone-50 transition-all disabled:opacity-50"
+                className="flex-1 px-4 py-2 admin-glass-light text-white rounded-lg hover:scale-105 transition-all disabled:opacity-50"
              >
                Cancel
              </button>
              <button
                onClick={resetAnalytics}
                disabled={resetting}
-                className="flex-1 flex items-center justify-center space-x-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-all disabled:opacity-50"
+                className="flex-1 flex items-center justify-center space-x-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg hover:scale-105 transition-all disabled:opacity-50"
              >
                {resetting ? (
                  <>
--- a/components/AnalyticsProvider.tsx
+++ b/components/AnalyticsProvider.tsx
@@ -9,130 +9,27 @@ interface AnalyticsProviderProps {
 }
 export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }) => {
-  // Initialize Web Vitals tracking - wrapped to prevent crashes
+  // Initialize Web Vitals tracking
  // Hooks must be called unconditionally, but the hook itself handles errors
  useWebVitals();
  useEffect(() => {
    if (typeof window === 'undefined') return;
    // Wrap entire effect in try-catch to prevent any errors from breaking the app
    try {
    // Track page view
-    const trackPageView = async () => {
+    const trackPageView = () => {
      const path = window.location.pathname;
      const projectMatch = path.match(/\/projects\/([^\/]+)/);
      const projectId = projectMatch ? projectMatch[1] : null;
      // Track to Umami (if available)
      trackEvent('page-view', {
-        url: path,
+        url: window.location.pathname,
        referrer: document.referrer,
        timestamp: Date.now(),
      });
      // Track to our API
      try {
        await fetch('/api/analytics/track', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            type: 'pageview',
            projectId: projectId,
            page: path
          })
        });
      } catch (error) {
        // Silently fail
        if (process.env.NODE_ENV === 'development') {
          console.error('Error tracking page view:', error);
        }
      }
    };
-    // Track page load performance - wrapped in try-catch
+    // Track page load performance
    try {
    trackPageLoad();
    } catch (error) {
      // Silently fail
      if (process.env.NODE_ENV === 'development') {
        console.warn('Error tracking page load:', error);
      }
    }
    // Track initial page view
    trackPageView();
    // Track performance metrics to our API
    const trackPerformanceToAPI = async () => {
      try {
        if (typeof performance === "undefined" || typeof performance.getEntriesByType !== "function") {
          return;
        }
        // Get current page path to extract project ID if on project page
        const path = window.location.pathname;
        const projectMatch = path.match(/\/projects\/([^\/]+)/);
        const projectId = projectMatch ? projectMatch[1] : null;
        // Wait for page to fully load
        setTimeout(async () => {
          try {
            const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming | undefined;
            const paintEntries = performance.getEntriesByType('paint');
            const lcpEntries = performance.getEntriesByType('largest-contentful-paint');
            const fcp = paintEntries.find((e: PerformanceEntry) => e.name === 'first-contentful-paint');
            const lcp = lcpEntries.length > 0 ? lcpEntries[lcpEntries.length - 1] : undefined;
            const performanceData = {
              loadTime: navigation && navigation.loadEventEnd && navigation.fetchStart ? navigation.loadEventEnd - navigation.fetchStart : 0,
              fcp: fcp ? fcp.startTime : 0,
              lcp: lcp ? lcp.startTime : 0,
              ttfb: navigation && navigation.responseStart && navigation.fetchStart ? navigation.responseStart - navigation.fetchStart : 0,
              cls: 0, // Will be updated by CLS observer
              fid: 0, // Will be updated by FID observer
              si: 0 // Speed Index - would need to calculate
            };
            // Send performance data
            await fetch('/api/analytics/track', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({
                type: 'performance',
                projectId: projectId,
                page: path,
                performance: performanceData
              })
            });
          } catch (error) {
            // Silently fail - performance tracking is not critical
            if (process.env.NODE_ENV === 'development') {
              console.warn('Error collecting performance data:', error);
            }
          }
        }, 2000); // Wait 2 seconds for page to stabilize
      } catch (error) {
        // Silently fail
        if (process.env.NODE_ENV === 'development') {
          console.error('Error tracking performance:', error);
        }
      }
    };
    // Track performance after page load
    if (document.readyState === 'complete') {
      trackPerformanceToAPI();
    } else {
      window.addEventListener('load', trackPerformanceToAPI);
    }
    // Track route changes (for SPA navigation)
    const handleRouteChange = () => {
      setTimeout(() => {
@@ -146,13 +43,8 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
    // Track user interactions
    const handleClick = (event: MouseEvent) => {
-      try {
+      const target = event.target as HTMLElement;
-        if (typeof window === 'undefined') return;
+      const element = target.tagName.toLowerCase();
        const target = event.target as HTMLElement | null;
        if (!target) return;
        const element = target.tagName ? target.tagName.toLowerCase() : 'unknown';
      const className = target.className;
      const id = target.id;
@@ -162,65 +54,37 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
        id: id || undefined,
        url: window.location.pathname,
      });
      } catch (error) {
        // Silently fail - click tracking is not critical
        if (process.env.NODE_ENV === 'development') {
          console.warn('Error tracking click:', error);
        }
      }
    };
    // Track form submissions
    const handleSubmit = (event: SubmitEvent) => {
-      try {
+      const form = event.target as HTMLFormElement;
        if (typeof window === 'undefined') return;
        const form = event.target as HTMLFormElement | null;
        if (!form) return;
      trackEvent('form-submit', {
        formId: form.id || undefined,
        formClass: form.className || undefined,
        url: window.location.pathname,
      });
      } catch (error) {
        // Silently fail - form tracking is not critical
        if (process.env.NODE_ENV === 'development') {
          console.warn('Error tracking form submit:', error);
        }
      }
    };
    // Track scroll depth
    let maxScrollDepth = 0;
    const firedScrollMilestones = new Set<number>();
    const handleScroll = () => {
      try {
        if (typeof window === 'undefined' || typeof document === 'undefined') return;
        const scrollHeight = document.documentElement.scrollHeight;
        const innerHeight = window.innerHeight;
        if (scrollHeight <= innerHeight) return; // No scrollable content
      const scrollDepth = Math.round(
-          (window.scrollY / (scrollHeight - innerHeight)) * 100
+        (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100
      );
-        if (scrollDepth > maxScrollDepth) maxScrollDepth = scrollDepth;
+      if (scrollDepth > maxScrollDepth) {
        maxScrollDepth = scrollDepth;
-        // Track each milestone once (avoid spamming events on every scroll tick)
+        // Track scroll milestones
-        const milestones = [25, 50, 75, 90];
+        if (scrollDepth >= 25 && scrollDepth < 50 && maxScrollDepth >= 25) {
-        for (const milestone of milestones) {
+          trackEvent('scroll-depth', { depth: 25, url: window.location.pathname });
-          if (maxScrollDepth >= milestone && !firedScrollMilestones.has(milestone)) {
+        } else if (scrollDepth >= 50 && scrollDepth < 75 && maxScrollDepth >= 50) {
-            firedScrollMilestones.add(milestone);
+          trackEvent('scroll-depth', { depth: 50, url: window.location.pathname });
-            trackEvent('scroll-depth', { depth: milestone, url: window.location.pathname });
+        } else if (scrollDepth >= 75 && scrollDepth < 90 && maxScrollDepth >= 75) {
-          }
+          trackEvent('scroll-depth', { depth: 75, url: window.location.pathname });
-        }
+        } else if (scrollDepth >= 90 && maxScrollDepth >= 90) {
-      } catch (error) {
+          trackEvent('scroll-depth', { depth: 90, url: window.location.pathname });
        // Silently fail - scroll tracking is not critical
        if (process.env.NODE_ENV === 'development') {
          console.warn('Error tracking scroll:', error);
        }
      }
    };
@@ -232,36 +96,20 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
    // Track errors
    const handleError = (event: ErrorEvent) => {
      try {
        if (typeof window === 'undefined') return;
      trackEvent('error', {
-          message: event.message || 'Unknown error',
+        message: event.message,
-          filename: event.filename || undefined,
+        filename: event.filename,
-          lineno: event.lineno || undefined,
+        lineno: event.lineno,
-          colno: event.colno || undefined,
+        colno: event.colno,
        url: window.location.pathname,
      });
      } catch (error) {
        // Silently fail - error tracking should not cause more errors
        if (process.env.NODE_ENV === 'development') {
          console.warn('Error tracking error event:', error);
        }
      }
    };
    const handleUnhandledRejection = (event: PromiseRejectionEvent) => {
      try {
        if (typeof window === 'undefined') return;
      trackEvent('unhandled-rejection', {
-          reason: event.reason?.toString() || 'Unknown rejection',
+        reason: event.reason?.toString(),
        url: window.location.pathname,
      });
      } catch (error) {
        // Silently fail - error tracking should not cause more errors
        if (process.env.NODE_ENV === 'development') {
          console.warn('Error tracking unhandled rejection:', error);
        }
      }
    };
    window.addEventListener('error', handleError);
@@ -269,29 +117,14 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
    // Cleanup
    return () => {
        try {
          // Remove load handler if we added it
          window.removeEventListener('load', trackPerformanceToAPI);
      window.removeEventListener('popstate', handleRouteChange);
      document.removeEventListener('click', handleClick);
      document.removeEventListener('submit', handleSubmit);
      window.removeEventListener('scroll', handleScroll);
      window.removeEventListener('error', handleError);
      window.removeEventListener('unhandledrejection', handleUnhandledRejection);
        } catch {
          // Silently fail during cleanup
        }
    };
    } catch (error) {
      // If anything fails, log but don't break the app
      if (process.env.NODE_ENV === 'development') {
        console.error('AnalyticsProvider initialization error:', error);
      }
      // Return empty cleanup function
      return () => {};
    }
  }, []);
  // Always render children, even if analytics fails
  return <>{children}</>;
 };
--- a/components/BackgroundBlobs.tsx
+++ b/components/BackgroundBlobs.tsx
@@ -27,16 +27,7 @@ const BackgroundBlobs = () => {
  const x5 = useTransform(springX, (value) => value / 15);
  const y5 = useTransform(springY, (value) => value / 15);
  // Prevent hydration mismatch
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);
  useEffect(() => {
    if (!mounted) return;
    const handleMouseMove = (e: MouseEvent) => {
      const x = e.clientX - window.innerWidth / 2;
      const y = e.clientY - window.innerHeight / 2;
@@ -46,7 +37,14 @@ const BackgroundBlobs = () => {
    window.addEventListener("mousemove", handleMouseMove);
    return () => window.removeEventListener("mousemove", handleMouseMove);
-  }, [mouseX, mouseY, mounted]);
+  }, [mouseX, mouseY]);
  // Prevent hydration mismatch
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);
  if (!mounted) return null;
--- a/components/ContentManager.tsx
+++ b/components/ContentManager.tsx
@@ -1,414 +0,0 @@
 'use client';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { EditorContent, useEditor, type JSONContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import Underline from '@tiptap/extension-underline';
 import Link from '@tiptap/extension-link';
 import { TextStyle } from '@tiptap/extension-text-style';
 import Color from '@tiptap/extension-color';
 import Highlight from '@tiptap/extension-highlight';
 import { Bold, Italic, Underline as UnderlineIcon, List, ListOrdered, Link as LinkIcon, Highlighter, Type, Save, RefreshCw } from 'lucide-react';
 import { FontFamily, type AllowedFontFamily } from '@/lib/tiptap/fontFamily';
 const EMPTY_DOC: JSONContent = {
  type: 'doc',
  content: [{ type: 'paragraph', content: [{ type: 'text', text: '' }] }],
 };
 type PageListItem = {
  id: number;
  key: string;
  translations: Array<{ locale: string; updatedAt: string; title: string | null; slug: string | null }>;
 };
 export default function ContentManager() {
  const [pages, setPages] = useState<PageListItem[]>([]);
  const [selectedKey, setSelectedKey] = useState<string>('privacy-policy');
  const [selectedLocale, setSelectedLocale] = useState<string>('de');
  const [title, setTitle] = useState<string>('');
  const [slug, setSlug] = useState<string>('');
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [isSaving, setIsSaving] = useState<boolean>(false);
  const [error, setError] = useState<string>('');
  const [fontFamily, setFontFamily] = useState<AllowedFontFamily | ''>('');
  const [color, setColor] = useState<string>('#111827');
  const extensions = useMemo(
    () => [
      StarterKit,
      Underline,
      Link.configure({
        openOnClick: false,
        HTMLAttributes: { rel: 'noopener noreferrer', target: '_blank' },
      }),
      TextStyle,
      FontFamily,
      Color,
      Highlight,
    ],
    [],
  );
  const editor = useEditor({
    extensions,
    content: EMPTY_DOC,
    editorProps: {
      attributes: {
        class:
          'prose prose-stone max-w-none focus:outline-none min-h-[320px] p-4 bg-white rounded-xl border border-stone-200',
      },
    },
  });
  const sessionHeaders = () => {
    const sessionToken = sessionStorage.getItem('admin_session_token') || '';
    return {
      'x-admin-request': 'true',
      'x-session-token': sessionToken,
      'Content-Type': 'application/json',
    };
  };
  const loadPages = useCallback(async () => {
    setError('');
    try {
      setIsLoading(true);
      const res = await fetch('/api/content/pages', { headers: sessionHeaders() });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || 'Failed to load content pages');
      setPages(data.pages || []);
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Failed to load content pages');
    } finally {
      setIsLoading(false);
    }
  }, []);
  const loadSelected = useCallback(async () => {
    if (!editor) return;
    setError('');
    try {
      setIsLoading(true);
      const res = await fetch(`/api/content/page?key=${encodeURIComponent(selectedKey)}&locale=${encodeURIComponent(selectedLocale)}`);
      const data = await res.json();
      const translation = data?.content;
      const nextTitle = (translation?.title as string | undefined) || '';
      const nextSlug = (translation?.slug as string | undefined) || '';
      const nextDoc = (translation?.content as JSONContent | undefined) || EMPTY_DOC;
      setTitle(nextTitle);
      setSlug(nextSlug);
      editor.commands.setContent(nextDoc);
      setFontFamily('');
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Failed to load content');
    } finally {
      setIsLoading(false);
    }
  }, [editor, selectedKey, selectedLocale]);
  useEffect(() => {
    loadPages();
  }, [loadPages]);
  useEffect(() => {
    loadSelected();
  }, [loadSelected]);
  const handleSave = async () => {
    if (!editor) return;
    setError('');
    try {
      setIsSaving(true);
      const content = editor.getJSON();
      const res = await fetch('/api/content/pages', {
        method: 'POST',
        headers: sessionHeaders(),
        body: JSON.stringify({
          key: selectedKey,
          locale: selectedLocale,
          title: title || null,
          slug: slug || null,
          content,
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || 'Failed to save content');
      await loadPages();
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Failed to save content');
    } finally {
      setIsSaving(false);
    }
  };
  const localeOptions = ['en', 'de'];
  const fontOptions: Array<{ label: string; value: AllowedFontFamily | '' }> = [
    { label: 'Default', value: '' },
    { label: 'Inter', value: 'Inter' },
    { label: 'Sans', value: 'ui-sans-serif' },
    { label: 'Serif', value: 'ui-serif' },
    { label: 'Mono', value: 'ui-monospace' },
  ];
  const selectedInfo = useMemo(() => {
    const page = pages.find((p) => p.key === selectedKey);
    const tr = page?.translations?.find((t) => t.locale === selectedLocale);
    return tr;
  }, [pages, selectedKey, selectedLocale]);
  return (
    <div className="space-y-6">
      <div className="flex items-start justify-between gap-4">
        <div>
          <h2 className="text-2xl font-bold text-stone-900">Content Manager</h2>
          <p className="text-stone-500 mt-1">
            Edit texts/pages with rich formatting (bold, underline, links, highlights).
          </p>
        </div>
        <button
          onClick={loadPages}
          className="flex items-center gap-2 px-4 py-2 bg-stone-100 text-stone-700 rounded-lg hover:bg-stone-200 transition-colors"
        >
          <RefreshCw className="w-4 h-4" />
          <span>Refresh</span>
        </button>
      </div>
      {error && (
        <div className="p-4 bg-red-50 border border-red-100 rounded-xl text-red-700 text-sm">
          {error}
        </div>
      )}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-1 space-y-4">
          <div className="bg-white border border-stone-200 rounded-xl p-4 space-y-3">
            <div>
              <label className="block text-sm font-medium text-stone-700 mb-1">Page key</label>
              <select
                value={selectedKey}
                onChange={(e) => setSelectedKey(e.target.value)}
                className="w-full px-3 py-2 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-300"
              >
                {pages.map((p) => (
                  <option key={p.key} value={p.key}>
                    {p.key}
                  </option>
                ))}
                {pages.length === 0 && (
                  <>
                    <option value="privacy-policy">privacy-policy</option>
                    <option value="legal-notice">legal-notice</option>
                    <option value="home-hero">home-hero</option>
                  </>
                )}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-stone-700 mb-1">Locale</label>
              <select
                value={selectedLocale}
                onChange={(e) => setSelectedLocale(e.target.value)}
                className="w-full px-3 py-2 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-300"
              >
                {localeOptions.map((l) => (
                  <option key={l} value={l}>
                    {l}
                  </option>
                ))}
              </select>
            </div>
            <div className="text-xs text-stone-500">
              Last updated:{' '}
              <span className="font-medium text-stone-700">
                {selectedInfo?.updatedAt ? new Date(selectedInfo.updatedAt).toLocaleString() : '—'}
              </span>
            </div>
          </div>
          <div className="bg-white border border-stone-200 rounded-xl p-4 space-y-3">
            <div>
              <label className="block text-sm font-medium text-stone-700 mb-1">Title (optional)</label>
              <input
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                className="w-full px-3 py-2 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-300"
                placeholder="Page title"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-stone-700 mb-1">Slug (optional)</label>
              <input
                value={slug}
                onChange={(e) => setSlug(e.target.value)}
                className="w-full px-3 py-2 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-300"
                placeholder="privacy-policy"
              />
            </div>
            <button
              onClick={handleSave}
              disabled={isSaving || isLoading || !editor}
              className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-stone-900 text-stone-50 rounded-lg hover:bg-stone-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              <Save className="w-4 h-4" />
              <span>{isSaving ? 'Saving…' : 'Save'}</span>
            </button>
          </div>
        </div>
        <div className="lg:col-span-2">
          <div className="bg-white border border-stone-200 rounded-xl p-4">
            <div className="text-sm font-semibold text-stone-900 mb-3">Content</div>
            {isLoading ? (
              <div className="text-stone-500 text-sm">Loading…</div>
            ) : (
              <>
                {editor && (
                  <div className="flex flex-wrap items-center gap-2 mb-3">
                    <button
                      type="button"
                      onClick={() => editor.chain().focus().toggleBold().run()}
                      className={`p-2 rounded-lg border transition-colors ${
                        editor.isActive('bold')
                          ? 'bg-stone-900 text-stone-50 border-stone-900'
                          : 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
                      }`}
                      title="Bold"
                    >
                      <Bold className="w-4 h-4" />
                    </button>
                    <button
                      type="button"
                      onClick={() => editor.chain().focus().toggleItalic().run()}
                      className={`p-2 rounded-lg border transition-colors ${
                        editor.isActive('italic')
                          ? 'bg-stone-900 text-stone-50 border-stone-900'
                          : 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
                      }`}
                      title="Italic"
                    >
                      <Italic className="w-4 h-4" />
                    </button>
                    <button
                      type="button"
                      onClick={() => editor.chain().focus().toggleUnderline().run()}
                      className={`p-2 rounded-lg border transition-colors ${
                        editor.isActive('underline')
                          ? 'bg-stone-900 text-stone-50 border-stone-900'
                          : 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
                      }`}
                      title="Underline"
                    >
                      <UnderlineIcon className="w-4 h-4" />
                    </button>
                    <button
                      type="button"
                      onClick={() => editor.chain().focus().toggleHighlight().run()}
                      className={`p-2 rounded-lg border transition-colors ${
                        editor.isActive('highlight')
                          ? 'bg-stone-900 text-stone-50 border-stone-900'
                          : 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
                      }`}
                      title="Highlight"
                    >
                      <Highlighter className="w-4 h-4" />
                    </button>
                    <button
                      type="button"
                      onClick={() => editor.chain().focus().toggleBulletList().run()}
                      className={`p-2 rounded-lg border transition-colors ${
                        editor.isActive('bulletList')
                          ? 'bg-stone-900 text-stone-50 border-stone-900'
                          : 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
                      }`}
                      title="Bullet list"
                    >
                      <List className="w-4 h-4" />
                    </button>
                    <button
                      type="button"
                      onClick={() => editor.chain().focus().toggleOrderedList().run()}
                      className={`p-2 rounded-lg border transition-colors ${
                        editor.isActive('orderedList')
                          ? 'bg-stone-900 text-stone-50 border-stone-900'
                          : 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
                      }`}
                      title="Ordered list"
                    >
                      <ListOrdered className="w-4 h-4" />
                    </button>
                    <button
                      type="button"
                      onClick={() => {
                        const prev = editor.getAttributes('link')?.href as string | undefined;
                        const href = prompt('Enter URL', prev || 'https://');
                        if (!href) return;
                        editor.chain().focus().extendMarkRange('link').setLink({ href }).run();
                      }}
                      className={`p-2 rounded-lg border transition-colors ${
                        editor.isActive('link')
                          ? 'bg-stone-900 text-stone-50 border-stone-900'
                          : 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
                      }`}
                      title="Link"
                    >
                      <LinkIcon className="w-4 h-4" />
                    </button>
                    <div className="flex items-center gap-2 ml-auto">
                      <Type className="w-4 h-4 text-stone-500" />
                      <select
                        value={fontFamily}
                        onChange={(e) => {
                          const next = e.target.value as AllowedFontFamily | '';
                          setFontFamily(next);
                          if (!next) {
                            editor.chain().focus().unsetFontFamily().run();
                          } else {
                            editor.chain().focus().setFontFamily(next).run();
                          }
                        }}
                        className="px-3 py-2 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-300 text-sm"
                        title="Font family"
                      >
                        {fontOptions.map((f) => (
                          <option key={f.label} value={f.value}>
                            {f.label}
                          </option>
                        ))}
                      </select>
                      <input
                        type="color"
                        value={color}
                        onChange={(e) => {
                          const next = e.target.value;
                          setColor(next);
                          editor.chain().focus().setColor(next).run();
                        }}
                        className="w-10 h-10 p-1 bg-white border border-stone-200 rounded-lg"
                        title="Text color"
                      />
                    </div>
                  </div>
                )}
                <EditorContent editor={editor} />
              </>
            )}
            <p className="text-xs text-stone-500 mt-3">
              Tip: Use bold/underline, links, lists, headings. (Email-safe rendering is handled separately.)
            </p>
          </div>
        </div>
      </div>
    </div>
  );
 }
--- a/components/EmailManager.tsx
+++ b/components/EmailManager.tsx
@@ -42,11 +42,9 @@ export const EmailManager: React.FC = () => {
  const loadMessages = async () => {
    try {
      setIsLoading(true);
      const sessionToken = sessionStorage.getItem('admin_session_token') || '';
      const response = await fetch('/api/contacts', {
        headers: {
-          'x-admin-request': 'true',
+          'x-admin-request': 'true'
          'x-session-token': sessionToken
        }
      });
@@ -102,13 +100,10 @@ export const EmailManager: React.FC = () => {
    if (!selectedMessage || !replyContent.trim()) return;
    try {
      const sessionToken = sessionStorage.getItem('admin_session_token') || '';
      const response = await fetch('/api/email/respond', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-admin-request': 'true',
          'x-session-token': sessionToken,
        },
        body: JSON.stringify({
          to: selectedMessage.email,
@@ -120,24 +115,6 @@ export const EmailManager: React.FC = () => {
      });
      if (response.ok) {
        // Persist responded status in DB
        try {
          await fetch(`/api/contacts/${selectedMessage.id}`, {
            method: 'PUT',
            headers: {
              'Content-Type': 'application/json',
              'x-admin-request': 'true',
              'x-session-token': sessionToken,
            },
            body: JSON.stringify({
              responded: true,
              responseTemplate: 'reply',
            }),
          });
        } catch {
          // ignore persistence failures
        }
        setMessages(prev => prev.map(msg => 
          msg.id === selectedMessage.id ? { ...msg, responded: true } : msg
        ));
@@ -166,7 +143,7 @@ export const EmailManager: React.FC = () => {
      case 'high': return 'text-red-400';
      case 'medium': return 'text-yellow-400';
      case 'low': return 'text-green-400';
-      default: return 'text-stone-400';
+      default: return 'text-blue-400';
    }
  };
@@ -176,7 +153,7 @@ export const EmailManager: React.FC = () => {
        <motion.div
          animate={{ rotate: 360 }}
          transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
-          className="w-8 h-8 border-2 border-stone-500 border-t-transparent rounded-full"
+          className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full"
        />
      </div>
    );
@@ -187,12 +164,12 @@ export const EmailManager: React.FC = () => {
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
-          <h2 className="text-2xl font-bold text-stone-900">Email Manager</h2>
+          <h2 className="text-2xl font-bold text-white">Email Manager</h2>
-          <p className="text-stone-500 mt-1">Manage your contact messages</p>
+          <p className="text-white/70 mt-1">Manage your contact messages</p>
        </div>
        <button
          onClick={loadMessages}
-          className="flex items-center space-x-2 px-4 py-2 bg-stone-100 text-stone-700 rounded-lg hover:bg-stone-200 transition-colors"
+          className="flex items-center space-x-2 px-4 py-2 bg-blue-500/20 text-blue-400 rounded-lg hover:bg-blue-500/30 transition-colors"
        >
          <RefreshCw className="w-4 h-4" />
          <span>Refresh</span>
@@ -202,13 +179,13 @@ export const EmailManager: React.FC = () => {
      {/* Filters and Search */}
      <div className="flex flex-col sm:flex-row gap-4">
        <div className="relative flex-1">
-          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-stone-400 w-4 h-4" />
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 w-4 h-4" />
          <input
            type="text"
            placeholder="Search messages..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full pl-10 pr-4 py-2 bg-white border border-stone-200 rounded-lg text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-400"
+            className="w-full pl-10 pr-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        <div className="flex space-x-2">
@@ -218,8 +195,8 @@ export const EmailManager: React.FC = () => {
              onClick={() => setFilter(filterType as 'all' | 'unread' | 'responded')}
              className={`px-4 py-2 rounded-lg transition-colors ${
                filter === filterType
-                  ? 'bg-stone-900 text-stone-50'
+                  ? 'bg-blue-500 text-white'
-                  : 'bg-white border border-stone-200 text-stone-600 hover:bg-stone-50'
+                  : 'bg-white/10 text-white/70 hover:bg-white/20'
              }`}
            >
              {filterType.charAt(0).toUpperCase() + filterType.slice(1)}
@@ -232,7 +209,7 @@ export const EmailManager: React.FC = () => {
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-1 space-y-3">
          {filteredMessages.length === 0 ? (
-            <div className="text-center py-12 text-stone-400">
+            <div className="text-center py-12 text-white/50">
              <Mail className="w-12 h-12 mx-auto mb-4 opacity-50" />
              <p>No messages found</p>
            </div>
@@ -242,36 +219,36 @@ export const EmailManager: React.FC = () => {
                key={message.id}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
-                className={`p-4 rounded-lg cursor-pointer transition-all border ${
+                className={`p-4 rounded-lg cursor-pointer transition-all ${
                  selectedMessage?.id === message.id
-                    ? 'bg-stone-100 border-stone-300 shadow-sm'
+                    ? 'bg-blue-500/20 border border-blue-500/50'
-                    : 'bg-white border-stone-200 hover:bg-stone-50'
+                    : 'bg-white/5 border border-white/10 hover:bg-white/10'
                }`}
                onClick={() => handleMessageClick(message)}
              >
                <div className="flex items-start justify-between mb-2">
-                  <h3 className="font-semibold text-stone-900 truncate">{message.subject}</h3>
+                  <h3 className="font-semibold text-white truncate">{message.subject}</h3>
                  <div className="flex items-center space-x-2">
-                    {!message.read && <Circle className="w-3 h-3 text-stone-600" />}
+                    {!message.read && <Circle className="w-3 h-3 text-blue-400" />}
-                    {message.responded && <CheckCircle className="w-3 h-3 text-green-500" />}
+                    {message.responded && <CheckCircle className="w-3 h-3 text-green-400" />}
                  </div>
                </div>
-                <p className="text-stone-600 text-sm mb-2">{message.name}</p>
+                <p className="text-white/70 text-sm mb-2">{message.name}</p>
-                <p className="text-stone-400 text-xs">{formatDate(message.createdAt)}</p>
+                <p className="text-white/50 text-xs">{formatDate(message.createdAt)}</p>
              </motion.div>
            ))
          )}
        </div>
        {/* Message Detail */}
-        <div className="lg:col-span-2 admin-glass-card p-6 rounded-xl bg-white border border-stone-200">
+        <div className="lg:col-span-2 admin-glass-card p-6 rounded-xl">
          {selectedMessage ? (
            <div className="space-y-6">
              {/* Message Header */}
              <div className="flex items-start justify-between">
                <div className="space-y-2">
-                  <h3 className="text-xl font-bold text-stone-900">{selectedMessage.subject}</h3>
+                  <h3 className="text-xl font-bold text-white">{selectedMessage.subject}</h3>
-                  <div className="flex items-center space-x-4 text-sm text-stone-500">
+                  <div className="flex items-center space-x-4 text-sm text-white/70">
                    <div className="flex items-center space-x-2">
                      <User className="w-4 h-4" />
                      <span>{selectedMessage.name}</span>
@@ -287,15 +264,15 @@ export const EmailManager: React.FC = () => {
                  </div>
                </div>
                <div className="flex items-center space-x-2">
-                  {!selectedMessage.read && <Circle className="w-4 h-4 text-stone-600" />}
+                  {!selectedMessage.read && <Circle className="w-4 h-4 text-blue-400" />}
-                  {selectedMessage.responded && <CheckCircle className="w-4 h-4 text-green-500" />}
+                  {selectedMessage.responded && <CheckCircle className="w-4 h-4 text-green-400" />}
                </div>
              </div>
              {/* Message Body */}
-              <div className="p-4 bg-stone-50 rounded-lg border border-stone-200">
+              <div className="p-4 bg-white/5 rounded-lg border border-white/10">
-                <h4 className="text-stone-700 font-medium mb-3">Message:</h4>
+                <h4 className="text-white font-medium mb-3">Message:</h4>
-                <div className="text-stone-600 whitespace-pre-wrap leading-relaxed">
+                <div className="text-white/80 whitespace-pre-wrap leading-relaxed">
                  {selectedMessage.message}
                </div>
              </div>
@@ -304,21 +281,21 @@ export const EmailManager: React.FC = () => {
              <div className="flex space-x-3">
                <button
                  onClick={() => setShowReplyModal(true)}
-                  className="flex items-center space-x-2 px-4 py-2 bg-stone-900 text-stone-50 rounded-lg hover:bg-stone-800 transition-colors"
+                  className="flex items-center space-x-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
                >
                  <Reply className="w-4 h-4" />
                  <span>Reply</span>
                </button>
                <button
                  onClick={() => setSelectedMessage(null)}
-                  className="px-4 py-2 bg-white border border-stone-200 text-stone-600 rounded-lg hover:bg-stone-50 transition-colors"
+                  className="px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 transition-colors"
                >
                  Close
                </button>
              </div>
            </div>
          ) : (
-            <div className="text-center py-12 text-stone-400">
+            <div className="text-center py-12 text-white/50">
              <Eye className="w-12 h-12 mx-auto mb-4 opacity-50" />
              <p>Select a message to view details</p>
            </div>
@@ -334,23 +311,23 @@ export const EmailManager: React.FC = () => {
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
-            className="fixed inset-0 bg-stone-900/20 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
            onClick={() => setShowReplyModal(false)}
          >
            <motion.div
              initial={{ scale: 0.9, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.9, opacity: 0 }}
-              className="bg-white border border-stone-200 rounded-2xl p-6 max-w-2xl w-full shadow-xl"
+              className="bg-gray-900/95 backdrop-blur-xl border border-white/20 rounded-2xl p-6 max-w-2xl w-full"
              onClick={(e) => e.stopPropagation()}
            >
              <div className="flex items-center justify-between mb-6">
-                <h2 className="text-xl font-bold text-stone-900">Reply to {selectedMessage.name}</h2>
+                <h2 className="text-xl font-bold text-white">Reply to {selectedMessage.name}</h2>
                <button
                  onClick={() => setShowReplyModal(false)}
-                  className="p-2 hover:bg-stone-100 rounded-lg transition-colors"
+                  className="p-2 hover:bg-white/10 rounded-lg transition-colors"
                >
-                  <X className="w-5 h-5 text-stone-500" />
+                  <X className="w-5 h-5 text-white/70" />
                </button>
              </div>
@@ -359,20 +336,20 @@ export const EmailManager: React.FC = () => {
                  value={replyContent}
                  onChange={(e) => setReplyContent(e.target.value)}
                  placeholder="Type your reply..."
-                  className="w-full h-32 p-3 bg-stone-50 border border-stone-200 rounded-lg text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-400 resize-none"
+                  className="w-full h-32 p-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
                />
                <div className="flex space-x-3">
                  <button
                    onClick={handleReply}
-                    className="flex items-center space-x-2 px-4 py-2 bg-stone-900 text-stone-50 rounded-lg hover:bg-stone-800 transition-colors"
+                    className="flex items-center space-x-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
                  >
                    <Send className="w-4 h-4" />
                    <span>Send Reply</span>
                  </button>
                  <button
                    onClick={() => setShowReplyModal(false)}
-                    className="px-4 py-2 bg-white border border-stone-200 text-stone-600 rounded-lg hover:bg-stone-50 transition-colors"
+                    className="px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 transition-colors"
                  >
                    Cancel
                  </button>
--- a/components/EmailResponder.tsx
+++ b/components/EmailResponder.tsx
@@ -85,19 +85,19 @@ export const EmailResponder: React.FC<EmailResponderProps> = ({
    return (
        <>
-            <div className="fixed inset-0 bg-stone-900/20 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-                <div className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto border border-stone-200">
+                <div className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
                    {/* Header */}
-                    <div className="bg-stone-50 border-b border-stone-200 text-stone-900 p-6 rounded-t-2xl">
+                    <div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white p-6 rounded-t-2xl">
                        <div className="flex items-center justify-between">
                            <div>
                                <h2 className="text-2xl font-bold">📧 E-Mail Antwort senden</h2>
-                                <p className="text-stone-500 mt-1">Wähle ein schönes Template für deine Antwort</p>
+                                <p className="text-blue-100 mt-1">Wähle ein schönes Template für deine Antwort</p>
                            </div>
                            <button
                                onClick={onClose}
-                                className="text-stone-400 hover:text-stone-600 transition-colors"
+                                className="text-white hover:text-gray-200 transition-colors"
                            >
                                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -110,54 +110,54 @@ export const EmailResponder: React.FC<EmailResponderProps> = ({
                    <div className="p-6">
                        {/* Contact Info */}
-                        <div className="bg-stone-50 border border-stone-200 rounded-xl p-4 mb-6">
+                        <div className="bg-gray-50 rounded-xl p-4 mb-6">
-                            <h3 className="font-semibold text-stone-800 mb-2">📬 Kontakt-Informationen</h3>
+                            <h3 className="font-semibold text-gray-800 mb-2">📬 Kontakt-Informationen</h3>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
-                                    <span className="text-sm text-stone-500">Name:</span>
+                                    <span className="text-sm text-gray-600">Name:</span>
-                                    <p className="font-medium text-stone-900">{contactName}</p>
+                                    <p className="font-medium text-gray-900">{contactName}</p>
                                </div>
                                <div>
-                                    <span className="text-sm text-stone-500">E-Mail:</span>
+                                    <span className="text-sm text-gray-600">E-Mail:</span>
-                                    <p className="font-medium text-stone-900">{contactEmail}</p>
+                                    <p className="font-medium text-gray-900">{contactEmail}</p>
                                </div>
                            </div>
                        </div>
                        {/* Original Message Preview */}
-                        <div className="bg-stone-50 border border-stone-200 rounded-xl p-4 mb-6">
+                        <div className="bg-blue-50 rounded-xl p-4 mb-6">
-                            <h3 className="font-semibold text-stone-800 mb-2">💬 Ursprüngliche Nachricht</h3>
+                            <h3 className="font-semibold text-blue-800 mb-2">💬 Ursprüngliche Nachricht</h3>
-                            <div className="bg-white rounded-lg p-3 border-l-4 border-blue-500 shadow-sm">
+                            <div className="bg-white rounded-lg p-3 border-l-4 border-blue-500">
-                                <p className="text-stone-700 text-sm whitespace-pre-wrap">{originalMessage}</p>
+                                <p className="text-gray-700 text-sm whitespace-pre-wrap">{originalMessage}</p>
                            </div>
                        </div>
                        {/* Template Selection */}
                        <div className="mb-6">
-                            <h3 className="font-semibold text-stone-800 mb-4">🎨 Template auswählen</h3>
+                            <h3 className="font-semibold text-gray-800 mb-4">🎨 Template auswählen</h3>
                            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                                {Object.entries(templates).map(([key, template]) => (
                                    <div
                                        key={key}
                                        className={`relative cursor-pointer rounded-xl border-2 transition-all duration-200 ${
                                            selectedTemplate === key
-                                                ? 'border-stone-500 bg-stone-50 shadow-md'
+                                                ? 'border-blue-500 bg-blue-50 shadow-lg scale-105'
-                                                : 'border-stone-200 hover:border-stone-300 hover:shadow-sm'
+                                                : 'border-gray-200 hover:border-gray-300 hover:shadow-md'
                                        }`}
                                        onClick={() => setSelectedTemplate(key as keyof typeof templates)}
                                    >
-                                        <div className={`p-4 rounded-t-xl bg-white border-b border-stone-100`}>
+                                        <div className={`bg-gradient-to-r ${template.color} text-white p-4 rounded-t-xl`}>
                                            <div className="text-center">
                                                <div className="text-3xl mb-2">{template.icon}</div>
-                                                <h4 className="font-bold text-lg text-stone-900">{template.name}</h4>
+                                                <h4 className="font-bold text-lg">{template.name}</h4>
                                            </div>
                                        </div>
                                        <div className="p-4">
-                                            <p className="text-sm text-stone-600 text-center">{template.description}</p>
+                                            <p className="text-sm text-gray-600 text-center">{template.description}</p>
                                        </div>
                                        {selectedTemplate === key && (
                                            <div className="absolute top-2 right-2">
-                                                <div className="w-6 h-6 bg-stone-600 rounded-full flex items-center justify-center">
+                                                <div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
                                                    <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                                                    </svg>
@@ -171,15 +171,15 @@ export const EmailResponder: React.FC<EmailResponderProps> = ({
                        {/* Preview */}
                        <div className="mb-6">
-                            <h3 className="font-semibold text-stone-800 mb-4">👀 Vorschau</h3>
+                            <h3 className="font-semibold text-gray-800 mb-4">👀 Vorschau</h3>
-                            <div className="bg-stone-100 rounded-xl p-4 border border-stone-200">
+                            <div className="bg-gray-100 rounded-xl p-4">
-                                <div className="bg-white rounded-lg shadow-sm border border-stone-200">
+                                <div className="bg-white rounded-lg shadow-sm border">
-                                    <div className="p-4 rounded-t-lg bg-stone-50 border-b border-stone-100">
+                                    <div className={`bg-gradient-to-r ${templates[selectedTemplate].color} text-white p-4 rounded-t-lg`}>
-                                        <h4 className="font-bold text-lg text-stone-900">{templates[selectedTemplate].icon} {templates[selectedTemplate].name}</h4>
+                                        <h4 className="font-bold text-lg">{templates[selectedTemplate].icon} {templates[selectedTemplate].name}</h4>
-                                        <p className="text-sm text-stone-500">An: {contactName}</p>
+                                        <p className="text-sm opacity-90">An: {contactName}</p>
                                    </div>
                                    <div className="p-4">
-                                        <p className="text-sm text-stone-600">
+                                        <p className="text-sm text-gray-600">
                                            {selectedTemplate === 'welcome' && 'Freundliche Begrüßung mit Portfolio-Links und nächsten Schritten'}
                                            {selectedTemplate === 'project' && 'Professionelle Projekt-Antwort mit Arbeitsprozess und CTA'}
                                            {selectedTemplate === 'quick' && 'Schnelle, kurze Bestätigung der Nachricht'}
@@ -193,14 +193,14 @@ export const EmailResponder: React.FC<EmailResponderProps> = ({
                        <div className="flex gap-4">
                            <button
                                onClick={onClose}
-                                className="flex-1 px-6 py-3 border border-stone-300 text-stone-700 rounded-xl hover:bg-stone-50 transition-colors font-medium"
+                                className="flex-1 px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors font-medium"
                            >
                                Abbrechen
                            </button>
                            <button
                                onClick={handleSendEmail}
                                disabled={isLoading}
-                                className="flex-1 px-6 py-3 bg-stone-900 text-white rounded-xl hover:bg-stone-800 transition-all font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                                className="flex-1 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:from-blue-700 hover:to-purple-700 transition-all font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                            >
                                {isLoading ? (
                                    <>
--- a/components/ErrorBoundary.tsx
+++ b/components/ErrorBoundary.tsx
@@ -22,20 +22,18 @@ export default class ErrorBoundary extends React.Component<
  render() {
    if (this.state.hasError) {
      // Still render children to prevent white screen - just log the error
      if (process.env.NODE_ENV === 'development') {
      return (
-          <div>
+        <div className="p-4 m-4 bg-red-50 border border-red-200 rounded text-red-800">
-            <div className="p-2 m-2 bg-yellow-50 border border-yellow-200 rounded text-yellow-800 text-xs">
+          <h2>Something went wrong!</h2>
-              ⚠️ Error boundary triggered - rendering children anyway
+          <button
-            </div>
+            className="mt-2 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
-            {this.props.children}
+            onClick={() => this.setState({ hasError: false })}
          >
            Try again
          </button>
        </div>
      );
    }
      // In production, just render children silently
      return this.props.children;
    }
    return this.props.children;
  }
--- a/components/GhostEditor.tsx
+++ b/components/GhostEditor.tsx
@@ -0,0 +1,733 @@
 'use client';
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
  Save,
  X,
  Eye,
  Settings,
  Globe,
  Github,
  Image as ImageIcon,
  Bold,
  Italic,
  List,
  Quote,
  Code,
  Link2,
  ListOrdered,
  Underline,
  Strikethrough,
  Type,
  Columns
 } from 'lucide-react';
 interface Project {
  id: string;
  title: string;
  description: string;
  content?: string;
  category: string;
  difficulty?: string;
  tags?: string[];
  featured: boolean;
  published: boolean;
  github?: string;
  live?: string;
  image?: string;
  createdAt: string;
  updatedAt: string;
 }
 interface GhostEditorProps {
  isOpen: boolean;
  onClose: () => void;
  project?: Project | null;
  onSave: (projectData: Partial<Project>) => void;
  isCreating: boolean;
 }
 export const GhostEditor: React.FC<GhostEditorProps> = ({
  isOpen,
  onClose,
  project,
  onSave,
  isCreating
 }) => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [content, setContent] = useState('');
  const [category, setCategory] = useState('Web Development');
  const [tags, setTags] = useState<string[]>([]);
  const [github, setGithub] = useState('');
  const [live, setLive] = useState('');
  const [featured, setFeatured] = useState(false);
  const [published, setPublished] = useState(false);
  const [difficulty, setDifficulty] = useState('Intermediate');
  // Editor UI state
  const [viewMode, setViewMode] = useState<'edit' | 'preview' | 'split'>('split');
  const [showSettings, setShowSettings] = useState(false);
  const [wordCount, setWordCount] = useState(0);
  const [readingTime, setReadingTime] = useState(0);
  const titleRef = useRef<HTMLTextAreaElement>(null);
  const contentRef = useRef<HTMLTextAreaElement>(null);
  const previewRef = useRef<HTMLDivElement>(null);
  const categories = ['Web Development', 'Full-Stack', 'Web Application', 'Mobile App', 'Design'];
  const difficulties = ['Beginner', 'Intermediate', 'Advanced', 'Expert'];
  useEffect(() => {
    if (project && !isCreating) {
      setTitle(project.title);
      setDescription(project.description);
      setContent(project.content || '');
      setCategory(project.category);
      setTags(project.tags || []);
      setGithub(project.github || '');
      setLive(project.live || '');
      setFeatured(project.featured);
      setPublished(project.published);
      setDifficulty(project.difficulty || 'Intermediate');
    } else {
      // Reset for new project
      setTitle('');
      setDescription('');
      setContent('');
      setCategory('Web Development');
      setTags([]);
      setGithub('');
      setLive('');
      setFeatured(false);
      setPublished(false);
      setDifficulty('Intermediate');
    }
  }, [project, isCreating, isOpen]);
  // Calculate word count and reading time
  useEffect(() => {
    const words = content.trim().split(/\s+/).filter(word => word.length > 0).length;
    setWordCount(words);
    setReadingTime(Math.ceil(words / 200)); // Average reading speed: 200 words/minute
  }, [content]);
  const handleSave = () => {
    const projectData = {
      title,
      description,
      content,
      category,
      tags,
      github,
      live,
      featured,
      published,
      difficulty
    };
    onSave(projectData);
  };
  const addTag = (tag: string) => {
    if (tag.trim() && !tags.includes(tag.trim())) {
      setTags([...tags, tag.trim()]);
    }
  };
  const removeTag = (tagToRemove: string) => {
    setTags(tags.filter(tag => tag !== tagToRemove));
  };
  const insertMarkdown = useCallback((syntax: string, selectedText: string = '') => {
    if (!contentRef.current) return;
    const textarea = contentRef.current;
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const selection = selectedText || content.substring(start, end);
    let newText = '';
    let cursorOffset = 0;
    switch (syntax) {
      case 'bold':
        newText = `**${selection || 'bold text'}**`;
        cursorOffset = selection ? newText.length : 2;
        break;
      case 'italic':
        newText = `*${selection || 'italic text'}*`;
        cursorOffset = selection ? newText.length : 1;
        break;
      case 'underline':
        newText = `<u>${selection || 'underlined text'}</u>`;
        cursorOffset = selection ? newText.length : 3;
        break;
      case 'strikethrough':
        newText = `~~${selection || 'strikethrough text'}~~`;
        cursorOffset = selection ? newText.length : 2;
        break;
      case 'heading1':
        newText = `# ${selection || 'Heading 1'}`;
        cursorOffset = selection ? newText.length : 2;
        break;
      case 'heading2':
        newText = `## ${selection || 'Heading 2'}`;
        cursorOffset = selection ? newText.length : 3;
        break;
      case 'heading3':
        newText = `### ${selection || 'Heading 3'}`;
        cursorOffset = selection ? newText.length : 4;
        break;
      case 'list':
        newText = `- ${selection || 'List item'}`;
        cursorOffset = selection ? newText.length : 2;
        break;
      case 'list-ordered':
        newText = `1. ${selection || 'List item'}`;
        cursorOffset = selection ? newText.length : 3;
        break;
      case 'quote':
        newText = `> ${selection || 'Quote'}`;
        cursorOffset = selection ? newText.length : 2;
        break;
      case 'code':
        if (selection.includes('\n')) {
          newText = `\`\`\`\n${selection || 'code block'}\n\`\`\``;
          cursorOffset = selection ? newText.length : 4;
        } else {
          newText = `\`${selection || 'code'}\``;
          cursorOffset = selection ? newText.length : 1;
        }
        break;
      case 'link':
        newText = `[${selection || 'link text'}](url)`;
        cursorOffset = selection ? newText.length - 4 : newText.length - 4;
        break;
      case 'image':
        newText = `![${selection || 'alt text'}](image-url)`;
        cursorOffset = selection ? newText.length - 11 : newText.length - 11;
        break;
      case 'divider':
        newText = '\n---\n';
        cursorOffset = newText.length;
        break;
      default:
        return;
    }
    const newContent = content.substring(0, start) + newText + content.substring(end);
    setContent(newContent);
    // Focus and set cursor position
    setTimeout(() => {
      textarea.focus();
      const newPosition = start + cursorOffset;
      textarea.setSelectionRange(newPosition, newPosition);
    }, 0);
  }, [content]);
  const autoResizeTextarea = (element: HTMLTextAreaElement) => {
    element.style.height = 'auto';
    element.style.height = element.scrollHeight + 'px';
  };
  // Render markdown preview
  const renderMarkdownPreview = (markdown: string) => {
    // Simple markdown renderer for preview
    const html = markdown
      // Headers
      .replace(/^### (.*$)/gim, '<h3 class="text-xl font-semibold text-white mb-3 mt-6">$1</h3>')
      .replace(/^## (.*$)/gim, '<h2 class="text-2xl font-bold text-white mb-4 mt-8">$1</h2>')
      .replace(/^# (.*$)/gim, '<h1 class="text-3xl font-bold text-white mb-6 mt-8">$1</h1>')
      // Bold and Italic
      .replace(/\*\*(.*?)\*\*/g, '<strong class="font-bold">$1</strong>')
      .replace(/\*(.*?)\*/g, '<em class="italic">$1</em>')
      // Underline and Strikethrough
      .replace(/<u>(.*?)<\/u>/g, '<u class="underline">$1</u>')
      .replace(/~~(.*?)~~/g, '<del class="line-through opacity-75">$1</del>')
      // Code
      .replace(/```([^`]+)```/g, '<pre class="bg-gray-800 border border-gray-700 rounded-lg p-4 my-4 overflow-x-auto"><code class="text-green-400 font-mono text-sm">$1</code></pre>')
      .replace(/`([^`]+)`/g, '<code class="bg-gray-800 border border-gray-700 rounded px-2 py-1 font-mono text-sm text-green-400">$1</code>')
      // Lists
      .replace(/^\- (.*$)/gim, '<li class="ml-4 mb-1">• $1</li>')
      .replace(/^\d+\. (.*$)/gim, '<li class="ml-4 mb-1 list-decimal">$1</li>')
      // Links
      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="text-blue-400 hover:text-blue-300 underline" target="_blank">$1</a>')
      // Images
      .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" class="max-w-full h-auto rounded-lg my-4" />')
      // Quotes
      .replace(/^> (.*$)/gim, '<blockquote class="border-l-4 border-blue-500 pl-4 py-2 my-4 bg-gray-800/50 italic text-gray-300">$1</blockquote>')
      // Dividers
      .replace(/^---$/gim, '<hr class="border-gray-600 my-8" />')
      // Paragraphs
      .replace(/\n\n/g, '</p><p class="mb-4 text-gray-200 leading-relaxed">')
      .replace(/\n/g, '<br />');
    return `<div class="prose prose-invert max-w-none"><p class="mb-4 text-gray-200 leading-relaxed">${html}</p></div>`;
  };
  if (!isOpen) return null;
  return (
    <AnimatePresence>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        className="fixed inset-0 bg-black/95 backdrop-blur-sm z-50"
      >
        {/* Professional Ghost Editor */}
        <div className="h-full flex flex-col bg-gray-900">
          {/* Top Navigation Bar */}
          <div className="flex items-center justify-between p-4 border-b border-gray-700 bg-gray-800">
            <div className="flex items-center space-x-4">
              <button
                onClick={onClose}
                className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded-lg transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
              <div className="flex items-center space-x-2">
                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                <span className="text-sm font-medium text-white">
                  {isCreating ? 'New Project' : 'Editing Project'}
                </span>
              </div>
              <div className="flex items-center space-x-2">
                {published ? (
                  <span className="px-3 py-1 bg-green-600 text-white rounded-full text-sm font-medium">
                    Published
                  </span>
                ) : (
                  <span className="px-3 py-1 bg-gray-600 text-gray-300 rounded-full text-sm font-medium">
                    Draft
                  </span>
                )}
                {featured && (
                  <span className="px-3 py-1 bg-purple-600 text-white rounded-full text-sm font-medium">
                    Featured
                  </span>
                )}
              </div>
            </div>
            {/* View Mode Toggle */}
            <div className="flex items-center space-x-2">
              <div className="flex items-center bg-gray-700 rounded-lg p-1">
                <button
                  onClick={() => setViewMode('edit')}
                  className={`p-2 rounded transition-colors ${
                    viewMode === 'edit' ? 'bg-blue-600 text-white' : 'text-gray-400 hover:text-white'
                  }`}
                  title="Edit Mode"
                >
                  <Type className="w-4 h-4" />
                </button>
                <button
                  onClick={() => setViewMode('split')}
                  className={`p-2 rounded transition-colors ${
                    viewMode === 'split' ? 'bg-blue-600 text-white' : 'text-gray-400 hover:text-white'
                  }`}
                  title="Split View"
                >
                  <Columns className="w-4 h-4" />
                </button>
                <button
                  onClick={() => setViewMode('preview')}
                  className={`p-2 rounded transition-colors ${
                    viewMode === 'preview' ? 'bg-blue-600 text-white' : 'text-gray-400 hover:text-white'
                  }`}
                  title="Preview Mode"
                >
                  <Eye className="w-4 h-4" />
                </button>
              </div>
              <button
                onClick={() => setShowSettings(!showSettings)}
                className={`p-2 rounded-lg transition-colors ${
                  showSettings ? 'bg-blue-600 text-white' : 'text-gray-400 hover:text-white hover:bg-gray-700'
                }`}
              >
                <Settings className="w-5 h-5" />
              </button>
              <button
                onClick={handleSave}
                className="flex items-center space-x-2 px-6 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors font-medium"
              >
                <Save className="w-4 h-4" />
                <span>Save</span>
              </button>
            </div>
          </div>
          {/* Rich Text Toolbar */}
          <div className="flex items-center justify-between p-3 border-b border-gray-700 bg-gray-800/50">
            <div className="flex items-center space-x-1">
              {/* Text Formatting */}
              <div className="flex items-center space-x-1 pr-2 border-r border-gray-600">
                <button
                  onClick={() => insertMarkdown('bold')}
                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
                  title="Bold (Ctrl+B)"
                >
                  <Bold className="w-4 h-4" />
                </button>
                <button
                  onClick={() => insertMarkdown('italic')}
                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
                  title="Italic (Ctrl+I)"
                >
                  <Italic className="w-4 h-4" />
                </button>
                <button
                  onClick={() => insertMarkdown('underline')}
                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
                  title="Underline"
                >
                  <Underline className="w-4 h-4" />
                </button>
                <button
                  onClick={() => insertMarkdown('strikethrough')}
                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
                  title="Strikethrough"
                >
                  <Strikethrough className="w-4 h-4" />
                </button>
              </div>
              {/* Headers */}
              <div className="flex items-center space-x-1 px-2 border-r border-gray-600">
                <button
                  onClick={() => insertMarkdown('heading1')}
                  className="px-2 py-1 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors text-sm font-bold"
                  title="Heading 1"
                >
                  H1
                </button>
                <button
                  onClick={() => insertMarkdown('heading2')}
                  className="px-2 py-1 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors text-sm font-bold"
                  title="Heading 2"
                >
                  H2
                </button>
                <button
                  onClick={() => insertMarkdown('heading3')}
                  className="px-2 py-1 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors text-sm font-bold"
                  title="Heading 3"
                >
                  H3
                </button>
              </div>
              {/* Lists */}
              <div className="flex items-center space-x-1 px-2 border-r border-gray-600">
                <button
                  onClick={() => insertMarkdown('list')}
                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
                  title="Bullet List"
                >
                  <List className="w-4 h-4" />
                </button>
                <button
                  onClick={() => insertMarkdown('list-ordered')}
                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
                  title="Numbered List"
                >
                  <ListOrdered className="w-4 h-4" />
                </button>
              </div>
              {/* Insert Elements */}
              <div className="flex items-center space-x-1 px-2">
                <button
                  onClick={() => insertMarkdown('link')}
                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
                  title="Insert Link"
                >
                  <Link2 className="w-4 h-4" />
                </button>
                <button
                  onClick={() => insertMarkdown('image')}
                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
                  title="Insert Image"
                >
                  <ImageIcon className="w-4 h-4" />
                </button>
                <button
                  onClick={() => insertMarkdown('code')}
                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
                  title="Code Block"
                >
                  <Code className="w-4 h-4" />
                </button>
                <button
                  onClick={() => insertMarkdown('quote')}
                  className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
                  title="Quote"
                >
                  <Quote className="w-4 h-4" />
                </button>
              </div>
            </div>
            {/* Stats */}
            <div className="flex items-center space-x-4 text-sm text-gray-400">
              <span>{wordCount} words</span>
              <span>{readingTime} min read</span>
            </div>
          </div>
          {/* Main Editor Area */}
          <div className="flex-1 flex overflow-hidden">
            {/* Content Area */}
            <div className="flex-1 flex">
              {/* Editor Pane */}
              {(viewMode === 'edit' || viewMode === 'split') && (
                <div className={`${viewMode === 'split' ? 'w-1/2' : 'w-full'} flex flex-col bg-gray-900`}>
                  {/* Title & Description */}
                  <div className="p-8 border-b border-gray-800">
                    <textarea
                      ref={titleRef}
                      value={title}
                      onChange={(e) => {
                        setTitle(e.target.value);
                        autoResizeTextarea(e.target);
                      }}
                      onInput={(e) => autoResizeTextarea(e.target as HTMLTextAreaElement)}
                      placeholder="Project title..."
                      className="w-full text-5xl font-bold text-white bg-transparent border-none outline-none placeholder-gray-500 resize-none overflow-hidden leading-tight mb-6"
                      rows={1}
                    />
                    <textarea
                      value={description}
                      onChange={(e) => {
                        setDescription(e.target.value);
                        autoResizeTextarea(e.target);
                      }}
                      onInput={(e) => autoResizeTextarea(e.target as HTMLTextAreaElement)}
                      placeholder="Brief description of your project..."
                      className="w-full text-xl text-gray-300 bg-transparent border-none outline-none placeholder-gray-500 resize-none overflow-hidden leading-relaxed"
                      rows={1}
                    />
                  </div>
                  {/* Content Editor */}
                  <div className="flex-1 p-8">
                    <textarea
                      ref={contentRef}
                      value={content}
                      onChange={(e) => setContent(e.target.value)}
                      placeholder="Start writing your story...
 Use Markdown for formatting:
 **Bold text** or *italic text*
 # Large heading
 ## Medium heading
 ### Small heading
 - Bullet points
 1. Numbered lists
 > Quotes
 `code`
 [Links](https://example.com)
 ![Images](image-url)"
                      className="w-full h-full text-lg text-white bg-transparent border-none outline-none placeholder-gray-600 resize-none font-mono leading-relaxed focus:ring-0"
                      style={{ minHeight: '500px' }}
                    />
                  </div>
                </div>
              )}
              {/* Preview Pane */}
              {(viewMode === 'preview' || viewMode === 'split') && (
                <div className={`${viewMode === 'split' ? 'w-1/2 border-l border-gray-700' : 'w-full'} bg-gray-850 overflow-y-auto`}>
                  <div className="p-8">
                    {/* Preview Header */}
                    <div className="mb-8 border-b border-gray-700 pb-8">
                      <h1 className="text-5xl font-bold text-white mb-6 leading-tight">
                        {title || 'Project title...'}
                      </h1>
                      <p className="text-xl text-gray-300 leading-relaxed">
                        {description || 'Brief description of your project...'}
                      </p>
                    </div>
                    {/* Preview Content */}
                    <div 
                      ref={previewRef}
                      className="prose prose-invert max-w-none"
                      dangerouslySetInnerHTML={{ 
                        __html: content ? renderMarkdownPreview(content) : '<p class="text-gray-500 italic">Start writing to see the preview...</p>' 
                      }}
                    />
                  </div>
                </div>
              )}
            </div>
            {/* Settings Sidebar */}
            <AnimatePresence>
              {showSettings && (
                <motion.div
                  initial={{ x: 320 }}
                  animate={{ x: 0 }}
                  exit={{ x: 320 }}
                  className="w-80 bg-gray-800 border-l border-gray-700 flex flex-col"
                >
                  <div className="p-6 border-b border-gray-700">
                    <h3 className="text-lg font-semibold text-white">Project Settings</h3>
                  </div>
                  <div className="flex-1 overflow-y-auto p-6 space-y-8">
                    {/* Status */}
                    <div>
                      <h4 className="text-sm font-medium text-gray-400 uppercase tracking-wider mb-4">Publication</h4>
                      <div className="space-y-4">
                        <div className="flex items-center justify-between">
                          <span className="text-white">Published</span>
                          <button
                            onClick={() => setPublished(!published)}
                            className={`w-12 h-6 rounded-full transition-colors relative ${
                              published ? 'bg-green-600' : 'bg-gray-600'
                            }`}
                          >
                            <div className={`w-4 h-4 bg-white rounded-full transition-transform absolute top-1 ${
                              published ? 'translate-x-7' : 'translate-x-1'
                            }`} />
                          </button>
                        </div>
                        <div className="flex items-center justify-between">
                          <span className="text-white">Featured</span>
                          <button
                            onClick={() => setFeatured(!featured)}
                            className={`w-12 h-6 rounded-full transition-colors relative ${
                              featured ? 'bg-purple-600' : 'bg-gray-600'
                            }`}
                          >
                            <div className={`w-4 h-4 bg-white rounded-full transition-transform absolute top-1 ${
                              featured ? 'translate-x-7' : 'translate-x-1'
                            }`} />
                          </button>
                        </div>
                      </div>
                    </div>
                    {/* Category & Difficulty */}
                    <div>
                      <h4 className="text-sm font-medium text-gray-400 uppercase tracking-wider mb-4">Classification</h4>
                      <div className="space-y-4">
                        <div>
                          <label className="block text-gray-300 text-sm mb-2">Category</label>
                          <select
                            value={category}
                            onChange={(e) => setCategory(e.target.value)}
                            className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                          >
                            {categories.map(cat => (
                              <option key={cat} value={cat}>{cat}</option>
                            ))}
                          </select>
                        </div>
                        <div>
                          <label className="block text-gray-300 text-sm mb-2">Difficulty</label>
                          <select
                            value={difficulty}
                            onChange={(e) => setDifficulty(e.target.value)}
                            className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                          >
                            {difficulties.map(diff => (
                              <option key={diff} value={diff}>{diff}</option>
                            ))}
                          </select>
                        </div>
                      </div>
                    </div>
                    {/* Links */}
                    <div>
                      <h4 className="text-sm font-medium text-gray-400 uppercase tracking-wider mb-4">External Links</h4>
                      <div className="space-y-4">
                        <div>
                          <label className="block text-gray-300 text-sm mb-2">
                            <Github className="w-4 h-4 inline mr-1" />
                            GitHub Repository
                          </label>
                          <input
                            type="url"
                            value={github}
                            onChange={(e) => setGithub(e.target.value)}
                            placeholder="https://github.com/..."
                            className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
                          />
                        </div>
                        <div>
                          <label className="block text-gray-300 text-sm mb-2">
                            <Globe className="w-4 h-4 inline mr-1" />
                            Live Demo
                          </label>
                          <input
                            type="url"
                            value={live}
                            onChange={(e) => setLive(e.target.value)}
                            placeholder="https://..."
                            className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
                          />
                        </div>
                      </div>
                    </div>
                    {/* Tags */}
                    <div>
                      <h4 className="text-sm font-medium text-gray-400 uppercase tracking-wider mb-4">Tags</h4>
                      <div className="space-y-3">
                        <input
                          type="text"
                          placeholder="Add a tag and press Enter"
                          onKeyDown={(e) => {
                            if (e.key === 'Enter') {
                              e.preventDefault();
                              addTag(e.currentTarget.value);
                              e.currentTarget.value = '';
                            }
                          }}
                          className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
                        />
                        {tags.length > 0 && (
                          <div className="flex flex-wrap gap-2">
                            {tags.map((tag) => (
                              <span
                                key={tag}
                                className="inline-flex items-center space-x-1 px-3 py-1 bg-blue-600 text-white rounded-full text-sm"
                              >
                                <span>{tag}</span>
                                <button
                                  onClick={() => removeTag(tag)}
                                  className="text-blue-200 hover:text-white"
                                >
                                  <X className="w-3 h-3" />
                                </button>
                              </span>
                            ))}
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        </div>
      </motion.div>
    </AnimatePresence>
  );
 };
--- a/components/ImportExport.tsx
+++ b/components/ImportExport.tsx
@@ -23,20 +23,14 @@ export default function ImportExport() {
  const handleExport = async () => {
    setIsExporting(true);
    try {
-      const sessionToken = sessionStorage.getItem('admin_session_token') || '';
+      const response = await fetch('/api/projects/export');
      const response = await fetch('/api/projects/export', {
        headers: {
          'x-admin-request': 'true',
          'x-session-token': sessionToken,
        }
      });
      if (!response.ok) throw new Error('Export failed');
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
-      a.download = `portfolio-backup-${new Date().toISOString().split('T')[0]}.json`;
+      a.download = `portfolio-projects-${new Date().toISOString().split('T')[0]}.json`;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
@@ -69,14 +63,9 @@ export default function ImportExport() {
      const text = await file.text();
      const data = JSON.parse(text);
      const sessionToken = sessionStorage.getItem('admin_session_token') || '';
      const response = await fetch('/api/projects/import', {
        method: 'POST',
-        headers: {
+        headers: { 'Content-Type': 'application/json' },
          'Content-Type': 'application/json',
          'x-admin-request': 'true',
          'x-session-token': sessionToken,
        },
        body: JSON.stringify(data)
      });
@@ -110,23 +99,23 @@ export default function ImportExport() {
  };
  return (
-    <div className="bg-white border border-stone-200 rounded-xl p-6">
+    <div className="admin-glass-card rounded-lg p-6">
-      <h3 className="text-lg font-semibold text-stone-900 mb-4 flex items-center">
+      <h3 className="text-lg font-semibold text-white mb-4 flex items-center">
-        <FileText className="w-5 h-5 mr-2 text-stone-600" />
+        <FileText className="w-5 h-5 mr-2 text-blue-400" />
        Import & Export
      </h3>
      <div className="space-y-4">
        {/* Export Section */}
-        <div className="bg-stone-50 border border-stone-200 rounded-xl p-4">
+        <div className="admin-glass-light rounded-lg p-4">
-          <h4 className="font-medium text-stone-900 mb-2">Backup Export (Projekte + CMS)</h4>
+          <h4 className="font-medium text-white mb-2">Export Projekte</h4>
-          <p className="text-sm text-stone-600 mb-3">
+          <p className="text-sm text-white/70 mb-3">
-            Vollständiges Backup als JSON herunterladen (inkl. CMS Inhalte und Übersetzungen)
+            Alle Projekte als JSON-Datei herunterladen
          </p>
          <button
            onClick={handleExport}
            disabled={isExporting}
-            className="flex items-center px-4 py-2 bg-stone-900 text-white rounded-lg hover:bg-stone-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 hover:scale-105 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <Download className="w-4 h-4 mr-2" />
            {isExporting ? 'Exportiere...' : 'Exportieren'}
@@ -134,12 +123,12 @@ export default function ImportExport() {
        </div>
        {/* Import Section */}
-        <div className="bg-stone-50 border border-stone-200 rounded-xl p-4">
+        <div className="admin-glass-light rounded-lg p-4">
-          <h4 className="font-medium text-stone-900 mb-2">Backup Import</h4>
+          <h4 className="font-medium text-white mb-2">Import Projekte</h4>
-          <p className="text-sm text-stone-600 mb-3">
+          <p className="text-sm text-white/70 mb-3">
-            JSON-Datei mit Backup hochladen (Projekte + CMS + Übersetzungen)
+            JSON-Datei mit Projekten hochladen
          </p>
-          <label className="flex items-center px-4 py-2 bg-stone-900 text-white rounded-lg hover:bg-stone-800 transition-colors cursor-pointer w-fit">
+          <label className="flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 hover:scale-105 transition-all cursor-pointer">
            <Upload className="w-4 h-4 mr-2" />
            {isImporting ? 'Importiere...' : 'Datei auswählen'}
            <input
@@ -154,16 +143,16 @@ export default function ImportExport() {
        {/* Import Results */}
        {importResult && (
-          <div className="bg-stone-50 border border-stone-200 rounded-xl p-4">
+          <div className="admin-glass-light rounded-lg p-4">
-            <h4 className="font-medium text-stone-900 mb-2 flex items-center">
+            <h4 className="font-medium text-white mb-2 flex items-center">
              {importResult.success ? (
-                <CheckCircle className="w-5 h-5 mr-2 text-green-600" />
+                <CheckCircle className="w-5 h-5 mr-2 text-green-400" />
              ) : (
-                <AlertCircle className="w-5 h-5 mr-2 text-red-600" />
+                <AlertCircle className="w-5 h-5 mr-2 text-red-400" />
              )}
              Import Ergebnis
            </h4>
-            <div className="text-sm text-stone-600 space-y-1">
+            <div className="text-sm text-white/70 space-y-1">
              <p><strong>Importiert:</strong> {importResult.results.imported}</p>
              <p><strong>Übersprungen:</strong> {importResult.results.skipped}</p>
              {importResult.results.errors.length > 0 && (
@@ -171,7 +160,7 @@ export default function ImportExport() {
                  <p><strong>Fehler:</strong></p>
                  <ul className="list-disc list-inside ml-4">
                    {importResult.results.errors.map((error, index) => (
-                      <li key={index} className="text-red-600">{error}</li>
+                      <li key={index} className="text-red-400">{error}</li>
                    ))}
                  </ul>
                </div>
--- a/components/ModernAdminDashboard.tsx
+++ b/components/ModernAdminDashboard.tsx
@@ -17,28 +17,10 @@ import {
  X
 } from 'lucide-react';
 import Link from 'next/link';
-import dynamic from 'next/dynamic';
+import { EmailManager } from './EmailManager';
-
+import { AnalyticsDashboard } from './AnalyticsDashboard';
-const EmailManager = dynamic(
+import ImportExport from './ImportExport';
-  () => import('./EmailManager').then((m) => m.EmailManager),
+import { ProjectManager } from './ProjectManager';
  { ssr: false, loading: () => <div className="p-6 text-stone-500">Loading emails…</div> }
 );
 const AnalyticsDashboard = dynamic(
  () => import('./AnalyticsDashboard').then((m) => m.default),
  { ssr: false, loading: () => <div className="p-6 text-stone-500">Loading analytics…</div> }
 );
 const ImportExport = dynamic(
  () => import('./ImportExport').then((m) => m.default),
  { ssr: false, loading: () => <div className="p-6 text-stone-500">Loading tools…</div> }
 );
 const ProjectManager = dynamic(
  () => import('./ProjectManager').then((m) => m.ProjectManager),
  { ssr: false, loading: () => <div className="p-6 text-stone-500">Loading projects…</div> }
 );
 const ContentManager = dynamic(
  () => import('./ContentManager').then((m) => m.default),
  { ssr: false, loading: () => <div className="p-6 text-stone-500">Loading content…</div> }
 );
 interface Project {
  id: string;
@@ -70,7 +52,7 @@ interface ModernAdminDashboardProps {
 }
 const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthenticated = true }) => {
-  const [activeTab, setActiveTab] = useState<'overview' | 'projects' | 'emails' | 'analytics' | 'content' | 'settings'>('overview');
+  const [activeTab, setActiveTab] = useState<'overview' | 'projects' | 'emails' | 'analytics' | 'settings'>('overview');
  const [projects, setProjects] = useState<Project[]>([]);
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [isLoading, setIsLoading] = useState(false);
@@ -175,52 +157,26 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
  const stats = {
    totalProjects: projects.length,
    publishedProjects: projects.filter(p => p.published).length,
-    totalViews: ((analytics?.overview as Record<string, unknown>)?.totalViews as number) || (analytics?.totalViews as number) || projects.reduce((sum, p) => sum + (p.analytics?.views || 0), 0),
+    totalViews: (analytics?.totalViews as number) || projects.reduce((sum, p) => sum + (p.analytics?.views || 0), 0),
    unreadEmails: emails.filter(e => !(e.read as boolean)).length,
-    avgPerformance: (() => {
+    avgPerformance: (analytics?.avgPerformance as number) || (projects.length > 0 ?
-      // Only show real performance data, not defaults
+      Math.round(projects.reduce((sum, p) => sum + (p.performance?.lighthouse || 90), 0) / projects.length) : 90),
      const projectsWithPerf = projects.filter(p => {
        const perf = p.performance as Record<string, unknown> || {};
        return (perf.lighthouse as number || 0) > 0;
      });
      if (projectsWithPerf.length === 0) return 0;
      return Math.round(projectsWithPerf.reduce((sum, p) => {
        const perf = p.performance as Record<string, unknown> || {};
        return sum + (perf.lighthouse as number || 0);
      }, 0) / projectsWithPerf.length);
    })(),
    systemHealth: (systemStats?.status as string) || 'unknown',
-    totalUsers: ((analytics?.metrics as Record<string, unknown>)?.totalUsers as number) || (analytics?.totalUsers as number) || 0,
+    totalUsers: (analytics?.totalUsers as number) || 0,
-    bounceRate: ((analytics?.metrics as Record<string, unknown>)?.bounceRate as number) || (analytics?.bounceRate as number) || 0,
+    bounceRate: (analytics?.bounceRate as number) || 0,
-    avgSessionDuration: ((analytics?.metrics as Record<string, unknown>)?.avgSessionDuration as number) || (analytics?.avgSessionDuration as number) || 0
+    avgSessionDuration: (analytics?.avgSessionDuration as number) || 0
  };
  useEffect(() => {
-    // Prioritize the data needed for the initial dashboard render
+    // Load all data (authentication disabled)
-    void (async () => {
+    loadAllData();
-      await Promise.all([loadProjects(), loadSystemStats()]);
+  }, [loadAllData]);
      const idle = (cb: () => void) => {
        if (typeof window !== 'undefined' && 'requestIdleCallback' in window) {
          (window as unknown as { requestIdleCallback: (fn: () => void) => void }).requestIdleCallback(cb);
        } else {
          setTimeout(cb, 300);
        }
      };
      idle(() => {
        void loadAnalytics();
        void loadEmails();
      });
    })();
  }, [loadProjects, loadSystemStats, loadAnalytics, loadEmails]);
  const navigation = [
    { id: 'overview', label: 'Dashboard', icon: Home, color: 'blue', description: 'Overview & Statistics' },
    { id: 'projects', label: 'Projects', icon: Database, color: 'green', description: 'Manage Projects' },
    { id: 'emails', label: 'Emails', icon: Mail, color: 'purple', description: 'Email Management' },
    { id: 'analytics', label: 'Analytics', icon: Activity, color: 'orange', description: 'Site Analytics' },
    { id: 'content', label: 'Content', icon: Shield, color: 'teal', description: 'Texts, pages & localization' },
    { id: 'settings', label: 'Settings', icon: Settings, color: 'gray', description: 'System Settings' }
  ];
@@ -238,15 +194,15 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
              <div className="flex items-center space-x-4">
                <Link
                  href="/"
-                  className="flex items-center space-x-2 text-stone-900 hover:text-black transition-colors"
+                  className="flex items-center space-x-2 text-white/90 hover:text-white transition-colors"
                >
-                  <Home size={20} className="text-stone-600" />
+                  <Home size={20} className="text-blue-400" />
-                  <span className="font-medium text-stone-900">Portfolio</span>
+                  <span className="font-medium text-white">Portfolio</span>
                </Link>
-                <div className="h-6 w-px bg-stone-300" />
+                <div className="h-6 w-px bg-white/30" />
                <div className="flex items-center space-x-2">
-                  <Shield size={20} className="text-stone-600" />
+                  <Shield size={20} className="text-purple-400" />
-                  <span className="text-stone-900 font-semibold">Admin Panel</span>
+                  <span className="text-white font-semibold">Admin Panel</span>
                </div>
              </div>
@@ -255,23 +211,23 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                {navigation.map((item) => (
                  <button
                    key={item.id}
-                    onClick={() => setActiveTab(item.id as 'overview' | 'projects' | 'emails' | 'analytics' | 'content' | 'settings')}
+                    onClick={() => setActiveTab(item.id as 'overview' | 'projects' | 'emails' | 'analytics' | 'settings')}
                    className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-all duration-200 ${
                      activeTab === item.id
-                        ? 'bg-stone-100 text-stone-900 font-medium shadow-sm border border-stone-200'
+                        ? 'admin-glass-light border border-blue-500/40 text-blue-300 shadow-lg'
-                        : 'text-stone-500 hover:text-stone-800 hover:bg-stone-50'
+                        : 'text-white/80 hover:text-white hover:admin-glass-light'
                    }`}
                  >
-                    <item.icon size={16} className={activeTab === item.id ? 'text-stone-800' : 'text-stone-400'} />
+                    <item.icon size={16} className={activeTab === item.id ? 'text-blue-400' : 'text-white/70'} />
-                    <span className="text-sm">{item.label}</span>
+                    <span className="font-medium text-sm">{item.label}</span>
                  </button>
                ))}
              </div>
              {/* Right side - User info and Logout */}
              <div className="flex items-center space-x-4">
-                <div className="hidden sm:block text-sm text-stone-500">
+                <div className="hidden sm:block text-sm text-white/80">
-                  Welcome, <span className="text-stone-800 font-semibold">Dennis</span>
+                  Welcome, <span className="text-white font-semibold">Dennis</span>
                </div>
                <button
                  onClick={async () => {
@@ -288,7 +244,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                      window.location.href = '/manage';
                    }
                  }}
-                  className="flex items-center space-x-2 px-3 py-2 rounded-lg hover:bg-red-50 text-stone-500 hover:text-red-600 transition-all duration-200 border border-transparent hover:border-red-100"
+                  className="flex items-center space-x-2 px-3 py-2 rounded-lg admin-glass-light hover:bg-red-500/20 text-red-300 hover:text-red-200 transition-all duration-200"
                >
                  <LogOut size={16} />
                  <span className="hidden sm:inline text-sm font-medium">Logout</span>
@@ -297,7 +253,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                {/* Mobile menu button */}
                <button
                  onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-                  className="md:hidden flex items-center justify-center p-2 rounded-lg text-stone-600 hover:bg-stone-100 transition-colors"
+                  className="md:hidden flex items-center justify-center p-2 rounded-lg admin-glass-light text-white hover:text-blue-300 transition-colors"
                >
                  {mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
                </button>
@@ -312,23 +268,23 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                initial={{ opacity: 0, height: 0 }}
                animate={{ opacity: 1, height: 'auto' }}
                exit={{ opacity: 0, height: 0 }}
-                className="md:hidden border-t border-stone-200 bg-white"
+                className="md:hidden border-t border-white/20 admin-glass-light"
              >
                <div className="px-4 py-4 space-y-2">
                  {navigation.map((item) => (
                    <button
                      key={item.id}
                      onClick={() => {
-                        setActiveTab(item.id as 'overview' | 'projects' | 'emails' | 'analytics' | 'content' | 'settings');
+                        setActiveTab(item.id as 'overview' | 'projects' | 'emails' | 'analytics' | 'settings');
                        setMobileMenuOpen(false);
                      }}
                      className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-all duration-200 ${
                        activeTab === item.id
-                          ? 'bg-stone-100 text-stone-900 shadow-sm border border-stone-200'
+                          ? 'admin-glass-light border border-blue-500/40 text-blue-300 shadow-lg'
-                          : 'text-stone-500 hover:text-stone-800 hover:bg-stone-50'
+                          : 'text-white/80 hover:text-white hover:admin-glass-light'
                      }`}
                    >
-                      <item.icon size={18} className={activeTab === item.id ? 'text-stone-800' : 'text-stone-400'} />
+                      <item.icon size={18} className={activeTab === item.id ? 'text-blue-400' : 'text-white/70'} />
                      <div className="text-left">
                        <div className="font-medium text-sm">{item.label}</div>
                        <div className="text-xs opacity-70">{item.description}</div>
@@ -356,114 +312,96 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                <div className="space-y-8">
                  <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                    <div>
-                      <h1 className="text-3xl font-bold text-stone-900">Admin Dashboard</h1>
+                      <h1 className="text-3xl font-bold text-white">Admin Dashboard</h1>
-                      <p className="text-stone-500 text-lg">Manage your portfolio and monitor performance</p>
+                      <p className="text-white/80 text-lg">Manage your portfolio and monitor performance</p>
                    </div>
                  </div>
                  {/* Stats Grid - Mobile: 2x3, Desktop: 6x1 horizontal */}
                  <div className="grid grid-cols-2 md:grid-cols-6 gap-3 md:gap-6">
                    <div 
-                      className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none group relative"
+                      className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
                      onClick={() => setActiveTab('projects')}
                    >
                      <div className="flex flex-col space-y-2">
                        <div className="flex items-center justify-between">
-                          <p className="text-stone-500 text-xs md:text-sm font-medium">Projects</p>
+                          <p className="text-white/80 text-xs md:text-sm font-medium">Projects</p>
-                          <Database size={20} className="text-stone-400" />
+                          <Database size={20} className="text-blue-400" />
                        </div>
-                        <p className="text-xl md:text-2xl font-bold text-stone-900">{stats.totalProjects}</p>
+                        <p className="text-xl md:text-2xl font-bold text-white">{stats.totalProjects}</p>
-                        <p className="text-stone-600 text-xs font-medium">{stats.publishedProjects} published</p>
+                        <p className="text-green-400 text-xs font-medium">{stats.publishedProjects} published</p>
                      </div>
                      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-stone-900/95 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-normal max-w-xs z-50 shadow-xl backdrop-blur-sm pointer-events-none">
                        ✅ REAL DATA: Total projects in your portfolio from the database. Shows published vs unpublished count.
                        <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-2 h-2 bg-stone-900/95 rotate-45"></div>
                      </div>
                    </div>
                    <div 
-                      className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none group relative"
+                      className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
                      onClick={() => setActiveTab('analytics')}
                    >
                      <div className="flex flex-col space-y-2">
                        <div className="flex items-center justify-between">
-                          <p className="text-stone-500 text-xs md:text-sm font-medium">Page Views</p>
+                          <p className="text-white/80 text-xs md:text-sm font-medium">Page Views</p>
-                          <Activity size={20} className="text-stone-400" />
+                          <Activity size={20} className="text-purple-400" />
                        </div>
-                        <p className="text-xl md:text-2xl font-bold text-stone-900">{stats.totalViews.toLocaleString()}</p>
+                        <p className="text-xl md:text-2xl font-bold text-white">{stats.totalViews.toLocaleString()}</p>
-                        <p className="text-stone-600 text-xs font-medium">{stats.totalUsers} users</p>
+                        <p className="text-blue-400 text-xs font-medium">{stats.totalUsers} users</p>
                      </div>
                      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-stone-900/95 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-normal max-w-xs z-50 shadow-xl backdrop-blur-sm pointer-events-none">
                        ✅ REAL DATA: Total page views from PageView table (last 30 days). Each visit is tracked with IP, user agent, and timestamp. Users = unique IP addresses.
                        <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-2 h-2 bg-stone-900/95 rotate-45"></div>
                      </div>
                    </div>
                    <div 
-                      className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none"
+                      className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
                      onClick={() => setActiveTab('emails')}
                    >
                      <div className="flex flex-col space-y-2">
                        <div className="flex items-center justify-between">
-                          <p className="text-stone-500 text-xs md:text-sm font-medium">Messages</p>
+                          <p className="text-white/80 text-xs md:text-sm font-medium">Messages</p>
-                          <Mail size={20} className="text-stone-400" />
+                          <Mail size={20} className="text-green-400" />
                        </div>
-                        <p className="text-xl md:text-2xl font-bold text-stone-900">{emails.length}</p>
+                        <p className="text-xl md:text-2xl font-bold text-white">{emails.length}</p>
-                        <p className="text-red-500 text-xs font-medium">{stats.unreadEmails} unread</p>
+                        <p className="text-red-400 text-xs font-medium">{stats.unreadEmails} unread</p>
                      </div>
                    </div>
                    <div 
-                      className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none group relative"
+                      className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
                      onClick={() => setActiveTab('analytics')}
                    >
                      <div className="flex flex-col space-y-2">
                        <div className="flex items-center justify-between">
-                          <p className="text-stone-500 text-xs md:text-sm font-medium">Performance</p>
+                          <p className="text-white/80 text-xs md:text-sm font-medium">Performance</p>
-                          <TrendingUp size={20} className="text-stone-400" />
+                          <TrendingUp size={20} className="text-orange-400" />
                        </div>
-                        <p className="text-xl md:text-2xl font-bold text-stone-900">{stats.avgPerformance || 'N/A'}</p>
+                        <p className="text-xl md:text-2xl font-bold text-white">{stats.avgPerformance}</p>
-                        <p className="text-stone-600 text-xs font-medium">Lighthouse Score</p>
+                        <p className="text-orange-400 text-xs font-medium">Lighthouse Score</p>
                      </div>
                      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-stone-900/95 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-normal max-w-xs z-50 shadow-xl backdrop-blur-sm pointer-events-none">
                        {stats.avgPerformance > 0 
                          ? "✅ REAL DATA: Average Lighthouse score (0-100) calculated from real Web Vitals (LCP, FCP, CLS, FID, TTFB) collected from actual page visits. Only averages projects with real performance data."
                          : "No performance data yet. Scores appear after visitors load pages and Web Vitals are tracked."}
                        <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-2 h-2 bg-stone-900/95 rotate-45"></div>
                      </div>
                    </div>
                    <div 
-                      className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none group relative"
+                      className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
                      onClick={() => setActiveTab('analytics')}
                    >
                      <div className="flex flex-col space-y-2">
                        <div className="flex items-center justify-between">
-                          <p className="text-stone-500 text-xs md:text-sm font-medium">Bounce Rate</p>
+                          <p className="text-white/80 text-xs md:text-sm font-medium">Bounce Rate</p>
-                          <Users size={20} className="text-stone-400" />
+                          <Users size={20} className="text-red-400" />
                        </div>
-                        <p className="text-xl md:text-2xl font-bold text-stone-900">{stats.bounceRate}%</p>
+                        <p className="text-xl md:text-2xl font-bold text-white">{stats.bounceRate}%</p>
-                        <p className="text-stone-600 text-xs font-medium">Exit rate</p>
+                        <p className="text-red-400 text-xs font-medium">Exit rate</p>
                      </div>
                      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-stone-900/95 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-normal max-w-xs z-50 shadow-xl backdrop-blur-sm pointer-events-none">
                        ✅ REAL DATA: Percentage of sessions with only 1 pageview (calculated from PageView records grouped by IP). Lower is better. Shows how many visitors leave after viewing just one page.
                        <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-2 h-2 bg-stone-900/95 rotate-45"></div>
                      </div>
                    </div>
                    <div 
-                      className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none"
+                      className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
                      onClick={() => setActiveTab('settings')}
                    >
                      <div className="flex flex-col space-y-2">
                        <div className="flex items-center justify-between">
-                          <p className="text-stone-500 text-xs md:text-sm font-medium">System</p>
+                          <p className="text-white/80 text-xs md:text-sm font-medium">System</p>
-                          <Shield size={20} className="text-stone-400" />
+                          <Shield size={20} className="text-green-400" />
                        </div>
-                        <p className="text-xl md:text-2xl font-bold text-stone-900">Online</p>
+                        <p className="text-xl md:text-2xl font-bold text-white">Online</p>
                        <div className="flex items-center space-x-1">
-                          <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+                          <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
-                          <p className="text-stone-600 text-xs font-medium">Operational</p>
+                          <p className="text-green-400 text-xs font-medium">All systems operational</p>
                        </div>
                      </div>
                    </div>
@@ -474,10 +412,10 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                    {/* Recent Activity */}
                    <div className="admin-glass-card p-6 rounded-xl md:col-span-2">
                      <div className="flex items-center justify-between mb-6">
-                        <h2 className="text-xl font-bold text-stone-900">Recent Activity</h2>
+                        <h2 className="text-xl font-bold text-white">Recent Activity</h2>
                        <button 
                          onClick={() => loadAllData()}
-                          className="text-stone-500 hover:text-stone-800 text-sm font-medium px-3 py-1 bg-stone-100 rounded-lg transition-colors border border-stone-200"
+                          className="text-blue-400 hover:text-blue-300 text-sm font-medium px-3 py-1 admin-glass-light rounded-lg transition-colors"
                        >
                          Refresh
                        </button>
@@ -486,19 +424,19 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                      {/* Mobile: vertical stack, Desktop: horizontal columns */}
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="space-y-6">
-                          <h3 className="text-xs font-bold text-stone-400 uppercase tracking-wider">Projects</h3>
+                          <h3 className="text-sm font-medium text-white/60 uppercase tracking-wider">Projects</h3>
                          <div className="space-y-4">
                            {projects.slice(0, 3).map((project) => (
-                              <div key={project.id} className="flex items-start space-x-3 p-4 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm transition-all duration-200 cursor-pointer" onClick={() => setActiveTab('projects')}>
+                              <div key={project.id} className="flex items-start space-x-3 p-4 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 cursor-pointer" onClick={() => setActiveTab('projects')}>
                                <div className="flex-1 min-w-0">
-                                  <p className="text-stone-800 font-medium text-sm truncate">{project.title}</p>
+                                  <p className="text-white font-medium text-sm truncate">{project.title}</p>
-                                  <p className="text-stone-500 text-xs">{project.published ? 'Published' : 'Draft'} • {project.analytics?.views || 0} views</p>
+                                  <p className="text-white/60 text-xs">{project.published ? 'Published' : 'Draft'} • {project.analytics?.views || 0} views</p>
                                  <div className="flex items-center space-x-2 mt-2">
-                                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${project.published ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'}`}>
+                                    <span className={`px-2 py-1 rounded-full text-xs ${project.published ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'}`}>
                                      {project.published ? 'Live' : 'Draft'}
                                    </span>
                                    {project.featured && (
-                                      <span className="px-2 py-1 bg-stone-200 text-stone-700 rounded-full text-xs font-medium">Featured</span>
+                                      <span className="px-2 py-1 bg-purple-500/20 text-purple-400 rounded-full text-xs">Featured</span>
                                    )}
                                  </div>
                                </div>
@@ -508,19 +446,19 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                        </div>
                        <div className="space-y-4">
-                          <h3 className="text-xs font-bold text-stone-400 uppercase tracking-wider">Messages</h3>
+                          <h3 className="text-sm font-medium text-white/60 uppercase tracking-wider">Messages</h3>
                          <div className="space-y-3">
                            {emails.slice(0, 3).map((email, index) => (
-                              <div key={index} className="flex items-center space-x-3 p-3 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm transition-all duration-200 cursor-pointer" onClick={() => setActiveTab('emails')}>
+                              <div key={index} className="flex items-center space-x-3 p-3 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 cursor-pointer" onClick={() => setActiveTab('emails')}>
-                                <div className="w-8 h-8 bg-stone-200 rounded-lg flex items-center justify-center flex-shrink-0">
+                                <div className="w-8 h-8 bg-green-500/30 rounded-lg flex items-center justify-center flex-shrink-0">
-                                  <Mail size={14} className="text-stone-600" />
+                                  <Mail size={14} className="text-green-400" />
                                </div>
                                <div className="flex-1 min-w-0">
-                                  <p className="text-stone-800 font-medium text-sm truncate">From {email.name as string}</p>
+                                  <p className="text-white font-medium text-sm truncate">From {email.name as string}</p>
-                                  <p className="text-stone-500 text-xs truncate">{(email.subject as string) || 'No subject'}</p>
+                                  <p className="text-white/60 text-xs truncate">{(email.subject as string) || 'No subject'}</p>
                                </div>
                                {!(email.read as boolean) && (
-                                  <div className="w-2 h-2 bg-red-500 rounded-full flex-shrink-0"></div>
+                                  <div className="w-2 h-2 bg-red-400 rounded-full flex-shrink-0"></div>
                                )}
                              </div>
                            ))}
@@ -531,70 +469,70 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                    {/* Quick Actions */}
                    <div className="admin-glass-card p-6 rounded-xl">
-                      <h2 className="text-xl font-bold text-stone-900 mb-6">Quick Actions</h2>
+                      <h2 className="text-xl font-bold text-white mb-6">Quick Actions</h2>
                      <div className="space-y-4">
                        <button
                          onClick={() => window.location.href = '/editor'}
-                          className="w-full flex items-center space-x-3 p-3 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm hover:bg-white transition-all duration-200 text-left group"
+                          className="w-full flex items-center space-x-3 p-3 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
                        >
-                          <div className="w-10 h-10 bg-white rounded-lg border border-stone-100 flex items-center justify-center group-hover:border-stone-300 transition-colors">
+                          <div className="w-10 h-10 bg-green-500/30 rounded-lg flex items-center justify-center group-hover:bg-green-500/40 transition-colors">
-                            <Plus size={18} className="text-stone-600" />
+                            <Plus size={18} className="text-green-400" />
                          </div>
                          <div>
-                            <p className="text-stone-800 font-medium text-sm">Ghost Editor</p>
+                            <p className="text-white font-medium text-sm">Ghost Editor</p>
-                            <p className="text-stone-500 text-xs">Professional writing tool</p>
+                            <p className="text-white/60 text-xs">Professional writing tool</p>
                          </div>
                        </button>
                        <button
                          onClick={() => setActiveTab('analytics')}
-                          className="w-full flex items-center space-x-3 p-3 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm hover:bg-white transition-all duration-200 text-left group"
+                          className="w-full flex items-center space-x-3 p-3 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
                        >
-                          <div className="w-10 h-10 bg-white rounded-lg border border-stone-100 flex items-center justify-center group-hover:border-stone-300 transition-colors">
+                          <div className="w-10 h-10 bg-red-500/30 rounded-lg flex items-center justify-center group-hover:bg-red-500/40 transition-colors">
-                            <Activity size={18} className="text-stone-600" />
+                            <Activity size={18} className="text-red-400" />
                          </div>
                          <div>
-                            <p className="text-stone-800 font-medium text-sm">Reset Analytics</p>
+                            <p className="text-white font-medium text-sm">Reset Analytics</p>
-                            <p className="text-stone-500 text-xs">Clear analytics data</p>
+                            <p className="text-white/60 text-xs">Clear analytics data</p>
                          </div>
                        </button>
                        <button 
                          onClick={() => setActiveTab('emails')}
-                          className="w-full flex items-center space-x-3 p-3 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm hover:bg-white transition-all duration-200 text-left group"
+                          className="w-full flex items-center space-x-3 p-3 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
                        >
-                          <div className="w-10 h-10 bg-white rounded-lg border border-stone-100 flex items-center justify-center group-hover:border-stone-300 transition-colors">
+                          <div className="w-10 h-10 bg-green-500/30 rounded-lg flex items-center justify-center group-hover:bg-green-500/40 transition-colors">
-                            <Mail size={18} className="text-stone-600" />
+                            <Mail size={18} className="text-green-400" />
                          </div>
                          <div>
-                            <p className="text-stone-800 font-medium text-sm">View Messages</p>
+                            <p className="text-white font-medium text-sm">View Messages</p>
-                            <p className="text-stone-500 text-xs">{stats.unreadEmails} unread messages</p>
+                            <p className="text-white/60 text-xs">{stats.unreadEmails} unread messages</p>
                          </div>
                        </button>
                        <button 
                          onClick={() => setActiveTab('analytics')}
-                          className="w-full flex items-center space-x-3 p-3 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm hover:bg-white transition-all duration-200 text-left group"
+                          className="w-full flex items-center space-x-3 p-3 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
                        >
-                          <div className="w-10 h-10 bg-white rounded-lg border border-stone-100 flex items-center justify-center group-hover:border-stone-300 transition-colors">
+                          <div className="w-10 h-10 bg-purple-500/30 rounded-lg flex items-center justify-center group-hover:bg-purple-500/40 transition-colors">
-                            <TrendingUp size={18} className="text-stone-600" />
+                            <TrendingUp size={18} className="text-purple-400" />
                          </div>
                          <div>
-                            <p className="text-stone-800 font-medium text-sm">Analytics</p>
+                            <p className="text-white font-medium text-sm">Analytics</p>
-                            <p className="text-stone-500 text-xs">View detailed statistics</p>
+                            <p className="text-white/60 text-xs">View detailed statistics</p>
                          </div>
                        </button>
                        <button 
                          onClick={() => setActiveTab('settings')}
-                          className="w-full flex items-center space-x-3 p-3 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm hover:bg-white transition-all duration-200 text-left group"
+                          className="w-full flex items-center space-x-3 p-3 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
                        >
-                          <div className="w-10 h-10 bg-white rounded-lg border border-stone-100 flex items-center justify-center group-hover:border-stone-300 transition-colors">
+                          <div className="w-10 h-10 bg-gray-500/30 rounded-lg flex items-center justify-center group-hover:bg-gray-500/40 transition-colors">
-                            <Settings size={18} className="text-stone-600" />
+                            <Settings size={18} className="text-gray-400" />
                          </div>
                          <div>
-                            <p className="text-stone-800 font-medium text-sm">Settings</p>
+                            <p className="text-white font-medium text-sm">Settings</p>
-                            <p className="text-stone-500 text-xs">System configuration</p>
+                            <p className="text-white/60 text-xs">System configuration</p>
                          </div>
                        </button>
                      </div>
@@ -607,8 +545,8 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                <div className="space-y-6">
                  <div className="flex items-center justify-between">
                    <div>
-                      <h2 className="text-2xl font-bold text-stone-900">Project Management</h2>
+                      <h2 className="text-2xl font-bold text-white">Project Management</h2>
-                      <p className="text-stone-500 mt-1">Manage your portfolio projects</p>
+                      <p className="text-white/70 mt-1">Manage your portfolio projects</p>
                    </div>
                  </div>
@@ -624,46 +562,42 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                <AnalyticsDashboard isAuthenticated={isAuthenticated} />
              )}
              {activeTab === 'content' && (
                <ContentManager />
              )}
              {activeTab === 'settings' && (
                <div className="space-y-8">
                  <div>
-                    <h1 className="text-2xl font-bold text-stone-900">System Settings</h1>
+                    <h1 className="text-2xl font-bold text-white">System Settings</h1>
-                    <p className="text-stone-500">Manage system configuration and preferences</p>
+                    <p className="text-white/60">Manage system configuration and preferences</p>
                  </div>
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div className="admin-glass-card p-6 rounded-xl">
-                      <h2 className="text-xl font-bold text-stone-900 mb-4">Import / Export</h2>
+                      <h2 className="text-xl font-bold text-white mb-4">Import / Export</h2>
-                      <p className="text-stone-500 mb-4">Backup and restore your portfolio data</p>
+                      <p className="text-white/70 mb-4">Backup and restore your portfolio data</p>
                      <ImportExport />
                    </div>
                    <div className="admin-glass-card p-6 rounded-xl">
-                      <h2 className="text-xl font-bold text-stone-900 mb-4">System Status</h2>
+                      <h2 className="text-xl font-bold text-white mb-4">System Status</h2>
                      <div className="space-y-4">
-                        <div className="flex items-center justify-between p-3 bg-stone-50 rounded-lg border border-stone-100">
+                        <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
-                          <span className="text-stone-600">Database</span>
+                          <span className="text-white/80">Database</span>
                          <div className="flex items-center space-x-3">
-                            <div className="w-4 h-4 bg-green-500 rounded-full animate-pulse"></div>
+                            <div className="w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
-                            <span className="text-green-600 font-medium">Online</span>
+                            <span className="text-green-400 font-medium">Online</span>
                          </div>
                        </div>
-                        <div className="flex items-center justify-between p-3 bg-stone-50 rounded-lg border border-stone-100">
+                        <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
-                          <span className="text-stone-600">Redis Cache</span>
+                          <span className="text-white/80">Redis Cache</span>
                          <div className="flex items-center space-x-3">
-                            <div className="w-4 h-4 bg-green-500 rounded-full animate-pulse"></div>
+                            <div className="w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
-                            <span className="text-green-600 font-medium">Online</span>
+                            <span className="text-green-400 font-medium">Online</span>
                          </div>
                        </div>
-                        <div className="flex items-center justify-between p-3 bg-stone-50 rounded-lg border border-stone-100">
+                        <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
-                          <span className="text-stone-600">API Services</span>
+                          <span className="text-white/80">API Services</span>
                          <div className="flex items-center space-x-3">
-                            <div className="w-4 h-4 bg-green-500 rounded-full animate-pulse"></div>
+                            <div className="w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
-                            <span className="text-green-600 font-medium">Online</span>
+                            <span className="text-green-400 font-medium">Online</span>
                          </div>
                        </div>
                      </div>
--- a/Show More
+++ b/Show More