denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: denshooter:80f2ac61ac97de8c8aee58610121badaaba2c41c
Branches Tags
denshooter:production denshooter:dev denshooter:dev_test denshooter:dev_n8n
..
compare: denshooter:dev_n8n
Branches Tags
denshooter:dev denshooter:dev_test denshooter:production denshooter:dev_n8n

1 Commits
80f2ac61ac ... dev_n8n

Author SHA1 Message Date
denshooter
40a18676e5 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
83 changed files with 4827 additions and 13044 deletions
Expand all files Collapse all files

64
.dockerignore
View File

@@ -1,64 +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
# Misc
.cache
.temp
tmp

0
.gitea/workflows/ci-cd-with-gitea-vars.yml.disabled → .gitea/workflows/ci-cd-with-gitea-vars.yml
View File

232
.gitea/workflows/ci-cd-woodpecker.yml Normal file
View File

@@ -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:

123
.gitea/workflows/debug-secrets.yml Normal file
View File

@@ -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

132
.gitea/workflows/dev-deploy.yml
View File

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

273
.gitea/workflows/production-deploy.yml
View File

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

0
.gitea/workflows/staging-deploy.yml.disabled → .gitea/workflows/staging-deploy.yml
View File

41
.gitea/workflows/test-and-build.yml Normal file
View File

@@ -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..."

105
.gitea/workflows/test-gitea-variables.yml Normal file
View File

@@ -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]")"

85
AUTO_DEPLOYMENT_STATUS.md Normal file
View File

@@ -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.

66
CLEANUP_PLAN.md Normal file
View File

@@ -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

95
CLEANUP_SUMMARY.md Normal file
View File

@@ -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

89
DEPLOYMENT_FIX.md Normal file
View File

@@ -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. 🚀

200
DEPLOYMENT_SETUP.md
View File

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

43
Dockerfile
View File

@@ -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 --mount=type=cache,target=/root/.npm \
npm ci
RUN npm ci
# Copy Prisma schema first (for better caching)
COPY prisma ./prisma
# Generate Prisma client (cached if schema unchanged)
RUN npx prisma generate
# Copy source code (this invalidates cache when code changes)
# Copy source code
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,10 +55,7 @@ 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)
# 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/standalone/app ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
# Copy Prisma files

185
GITEA_VARIABLES_SETUP.md
View File

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

53
GIT_CONNECTION_FIX.md Normal file
View File

@@ -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
```

198
NGINX_PROXY_MANAGER_SETUP.md
View File

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

120
SECURITY_IMPROVEMENTS.md
View File

@@ -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');
```

114
app/api/analytics/dashboard/route.ts
View File

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

65
app/api/analytics/performance/route.ts
View File

@@ -24,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 => {

177
app/api/analytics/reset/route.ts
View File

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

174
app/api/analytics/track/route.ts
View File

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

4
app/api/contacts/route.ts → app/api/contacts/route.tsx
View File

@@ -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 } from '@/lib/auth';
import { prisma } from '@/lib/prisma';
const prisma = new PrismaClient();
export async function GET(request: NextRequest) {
try {

575
app/api/email/respond/route.tsx
View File

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

167
app/api/email/route.tsx
View File

@@ -15,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)
@@ -164,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
@@ -193,80 +168,86 @@ 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;">
<div style="max-width:640px;margin:0 auto;padding:28px 14px;">
<div style="background:#ffffff;border:1px solid #e7e5e4;border-radius:20px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,0.08);">
<!-- Top bar -->
<div style="background:#292524;padding:22px 26px;">
<div style="display:flex;align-items:center;justify-content:space-between;gap:16px;">
<div style="font-weight:700;font-size:16px;letter-spacing:-0.01em;color:#fdfcf8;">
Dennis Konkol
</div>
<div style="font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;font-weight:700;font-size:14px;color:#fdfcf8;">
dk<span style="color:#ef4444;">0</span>.dev
</div>
<body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
<div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
<!-- Header -->
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px 30px; text-align: center;">
<h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
📧 Neue Kontaktanfrage
</h1>
<p style="color: #e2e8f0; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
Von deinem Portfolio
</p>
</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;">
<!-- Sender -->
<div style="display:flex;align-items:flex-start;gap:14px;">
<div style="width:44px;height:44px;border-radius:14px;background:#f3f1e7;border:1px solid #e7e5e4;display:flex;align-items:center;justify-content:center;font-weight:800;color:#292524;">
${escapeHtml(initial)}
</div>
<div style="flex:1;min-width:0;">
<div style="font-size:18px;font-weight:800;letter-spacing:-0.01em;color:#292524;line-height:1.2;">
${safeName}
<!-- Content -->
<div style="padding: 40px 30px;">
<!-- Contact Info Card -->
<div style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #e2e8f0;">
<div style="display: flex; align-items: center; margin-bottom: 20px;">
<div style="width: 50px; height: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
<span style="color: #ffffff; font-size: 20px; font-weight: bold;">${name.charAt(0).toUpperCase()}</span>
</div>
<div>
<h2 style="color: #1e293b; margin: 0; font-size: 24px; font-weight: 600;">${name}</h2>
<p style="color: #64748b; margin: 4px 0 0 0; font-size: 14px;">Kontaktanfrage</p>
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px;">
<div style="background: #ffffff; padding: 20px; border-radius: 8px; border-left: 4px solid #10b981;">
<h4 style="color: #059669; margin: 0 0 8px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">E-Mail</h4>
<p style="color: #374151; margin: 0; font-size: 16px; font-weight: 500;">${email}</p>
</div>
<div style="background: #ffffff; padding: 20px; border-radius: 8px; border-left: 4px solid #3b82f6;">
<h4 style="color: #2563eb; margin: 0 0 8px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Betreff</h4>
<p style="color: #374151; margin: 0; font-size: 16px; font-weight: 500;">${subject}</p>
</div>
</div>
</div>
<div style="margin-top:6px;font-size:13px;color:#78716c;line-height:1.4;">
<span style="font-weight:700;color:#44403c;">E-Mail:</span> ${safeEmail}<br>
<span style="font-weight:700;color:#44403c;">Betreff:</span> ${safeSubject}
<!-- Message Card -->
<div style="background: #ffffff; padding: 30px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);">
<div style="display: flex; align-items: center; margin-bottom: 20px;">
<div style="width: 8px; height: 8px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; margin-right: 12px;"></div>
<h3 style="color: #1e293b; margin: 0; font-size: 18px; font-weight: 600;">Nachricht</h3>
</div>
<div style="background: #f8fafc; padding: 25px; border-radius: 8px; border-left: 4px solid #667eea;">
<p style="color: #374151; margin: 0; line-height: 1.7; font-size: 16px; white-space: pre-wrap;">${message}</p>
</div>
</div>
</div>
</div>
<!-- Message -->
<div style="margin-top:18px;background:#fdfcf8;border:1px solid #e7e5e4;border-radius:16px;overflow:hidden;">
<div style="padding:14px 16px;background:#f3f1e7;border-bottom:1px solid #e7e5e4;">
<div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">
Nachricht
<!-- Action Button -->
<div style="text-align: center; margin-top: 30px;">
<a href="mailto:${email}?subject=Re: ${subject}" style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; text-decoration: none; padding: 15px 30px; border-radius: 8px; font-weight: 600; font-size: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: all 0.2s;">
📬 Antworten
</a>
</div>
</div>
<div style="padding:16px;line-height:1.65;color:#292524;font-size:15px;border-left:4px solid #a7f3d0;">
${safeMessageHtml}
</div>
</div>
<!-- CTA -->
<div style="margin-top:22px;text-align:center;">
<a href="${escapeHtml(replyHref)}"
style="display:inline-block;background:#292524;color:#fdfcf8;text-decoration:none;padding:12px 18px;border-radius:999px;font-weight:800;font-size:14px;">
Antworten
</a>
<div style="margin-top:10px;font-size:12px;color:#78716c;">
Oder antworte direkt auf diese E-Mail.
</div>
<!-- Footer -->
<div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e2e8f0;">
<div style="margin-bottom: 15px;">
<span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 1px;"></span>
</div>
<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>
<!-- Footer -->
<div style="padding:18px 26px;background:#fdfcf8;border-top:1px solid #e7e5e4;">
<div style="font-size:12px;color:#78716c;line-height:1.5;">
Automatisch generiert von <a href="${brandUrl}" style="color:#292524;text-decoration:underline;">dk0.dev</a>
</div>
</div>
</div>
</div>
</body>
</html>
`,
@@ -280,7 +261,7 @@ Nachricht:
${message}
---
Diese E-Mail wurde automatisch von dk0.dev generiert.
Diese E-Mail wurde automatisch von deinem Portfolio generiert.
`,
};

236
app/api/n8n/chat/route.ts
View File

@@ -1,21 +1,9 @@
import { NextRequest, NextResponse } from "next/server";
import { decodeHtmlEntitiesServer } from "@/lib/html-decode";
import { NextResponse } from "next/server";
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() === '') {
console.error("N8N_WEBHOOK_URL not configured. Environment check:", {
hasUrl: !!process.env.N8N_WEBHOOK_URL,
urlValue: process.env.N8N_WEBHOOK_URL || '(empty)',
nodeEnv: process.env.NODE_ENV,
});
if (!n8nWebhookUrl) {
console.error("N8N_WEBHOOK_URL not configured");
return NextResponse.json({
reply: getFallbackResponse(userMessage),
});
}
// Ensure URL doesn't have trailing slash before adding /webhook/chat
const baseUrl = n8nWebhookUrl.replace(/\/$/, '');
const webhookUrl = `${baseUrl}/webhook/chat`;
console.log(`Sending to n8n: ${webhookUrl}`, {
hasSecretToken: !!process.env.N8N_SECRET_TOKEN,
hasApiKey: !!process.env.N8N_API_KEY,
});
console.log(`Sending to n8n: ${n8nWebhookUrl}/webhook/chat`);
// Add timeout to prevent hanging requests
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout
try {
const response = await fetch(webhookUrl, {
method: "POST",
headers: {
"Content-Type": "application/json",
...(process.env.N8N_SECRET_TOKEN && {
Authorization: `Bearer ${process.env.N8N_SECRET_TOKEN}`,
}),
...(process.env.N8N_API_KEY && {
"X-API-Key": process.env.N8N_API_KEY,
}),
},
body: JSON.stringify({
message: userMessage,
history: history,
const response = await fetch(`${n8nWebhookUrl}/webhook/chat`, {
method: "POST",
headers: {
"Content-Type": "application/json",
...(process.env.N8N_API_KEY && {
Authorization: `Bearer ${process.env.N8N_API_KEY}`,
}),
signal: controller.signal,
});
clearTimeout(timeoutId);
if (!response.ok) {
const errorText = await response.text().catch(() => 'Unknown error');
console.error(`n8n webhook failed with status: ${response.status}`, {
status: response.status,
statusText: response.statusText,
error: errorText,
webhookUrl: webhookUrl.replace(/\/\/[^:]+:[^@]+@/, '//***:***@'), // Hide credentials in logs
});
throw new Error(`n8n webhook failed: ${response.status} - ${errorText.substring(0, 200)}`);
}
const data = await response.json();
console.log("n8n response data (full):", JSON.stringify(data, null, 2));
console.log("n8n response data type:", typeof data);
console.log("n8n response is array:", Array.isArray(data));
// Try multiple ways to extract the reply
let reply: string | undefined = undefined;
// Direct fields
if (data.reply) reply = data.reply;
else if (data.message) reply = data.message;
else if (data.response) reply = data.response;
else if (data.text) reply = data.text;
else if (data.content) reply = data.content;
else if (data.answer) reply = data.answer;
else if (data.output) reply = data.output;
else if (data.result) reply = data.result;
// Array handling
else if (Array.isArray(data) && data.length > 0) {
const firstItem = data[0];
if (typeof firstItem === 'string') {
reply = firstItem;
} else if (typeof firstItem === 'object') {
reply = firstItem.reply || firstItem.message || firstItem.response ||
firstItem.text || firstItem.content || firstItem.answer ||
firstItem.output || firstItem.result;
}
}
// Nested structures (common in n8n)
else if (data && typeof data === "object") {
// Check nested data field
if (data.data) {
if (typeof data.data === 'string') {
reply = data.data;
} else if (typeof data.data === 'object') {
reply = data.data.reply || data.data.message || data.data.response ||
data.data.text || data.data.content || data.data.answer;
}
}
// Check nested json field
if (!reply && data.json) {
if (typeof data.json === 'string') {
reply = data.json;
} else if (typeof data.json === 'object') {
reply = data.json.reply || data.json.message || data.json.response ||
data.json.text || data.json.content || data.json.answer;
}
}
// Check items array (n8n often wraps in items)
if (!reply && Array.isArray(data.items) && data.items.length > 0) {
const firstItem = data.items[0];
if (typeof firstItem === 'string') {
reply = firstItem;
} else if (typeof firstItem === 'object') {
reply = firstItem.reply || firstItem.message || firstItem.response ||
firstItem.text || firstItem.content || firstItem.answer ||
firstItem.json?.reply || firstItem.json?.message;
}
}
// Last resort: if it's a single string value object, try to extract
if (!reply && Object.keys(data).length === 1) {
const value = Object.values(data)[0];
if (typeof value === 'string') {
reply = value;
}
}
// If still no reply but data exists, stringify it (for debugging)
if (!reply && Object.keys(data).length > 0) {
console.warn("n8n response structure not recognized, attempting to extract any string value");
// Try to find any string value in the object
const findStringValue = (obj: unknown): string | undefined => {
if (typeof obj === 'string' && obj.length > 0) return obj;
if (Array.isArray(obj) && obj.length > 0) {
return findStringValue(obj[0]);
}
if (obj && typeof obj === 'object' && obj !== null) {
const objRecord = obj as Record<string, unknown>;
for (const key of ['reply', 'message', 'response', 'text', 'content', 'answer', 'output', 'result']) {
if (objRecord[key] && typeof objRecord[key] === 'string') {
return objRecord[key] as string;
}
}
// Recursively search
for (const value of Object.values(objRecord)) {
const found = findStringValue(value);
if (found) return found;
}
}
return undefined;
};
reply = findStringValue(data);
}
},
body: JSON.stringify({
message: userMessage,
history: history,
}),
});
if (!response.ok) {
console.error(`n8n webhook failed with status: ${response.status}`);
throw new Error(`n8n webhook failed: ${response.status}`);
}
const data = await response.json();
console.log("n8n response data:", data);
const reply =
data.reply ||
data.message ||
data.response ||
data.text ||
data.content ||
(Array.isArray(data) && data[0]?.reply);
if (!reply) {
console.error("n8n response missing reply field. Full response:", JSON.stringify(data, null, 2));
throw new Error("Invalid response format from n8n - no reply field found");
}
// Decode HTML entities in the reply
const decodedReply = decodeHtmlEntitiesServer(String(reply));
return NextResponse.json({
reply: decodedReply,
});
} catch (fetchError: unknown) {
clearTimeout(timeoutId);
if (fetchError instanceof Error && fetchError.name === 'AbortError') {
console.error("n8n webhook request timed out");
} else {
console.error("n8n webhook fetch error:", fetchError);
console.warn("n8n response missing reply field:", data);
// 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 fetchError;
throw new Error("Invalid response format from n8n");
}
} 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,
return NextResponse.json({
reply: reply,
});
} catch (error) {
console.error("Chat API error:", error);
// Fallback to mock responses
// Now using the variable captured at the start

18
app/api/n8n/generate-image/route.ts
View File

@@ -13,24 +13,6 @@ import { NextRequest, NextResponse } from "next/server";
*/
export async function POST(req: NextRequest) {
try {
// Rate limiting for n8n endpoints
const ip = req.headers.get('x-forwarded-for') || req.headers.get('x-real-ip') || 'unknown';
const { checkRateLimit } = await import('@/lib/auth');
if (!checkRateLimit(ip, 10, 60000)) { // 10 requests per minute
return NextResponse.json(
{ error: 'Rate limit exceeded. Please try again later.' },
{ status: 429 }
);
}
// Require admin authentication for n8n endpoints
const { requireAdminAuth } = await import('@/lib/auth');
const authError = requireAdminAuth(req);
if (authError) {
return authError;
}
const body = await req.json();
const { projectId, regenerate = false } = body;

112
app/api/n8n/status/route.ts
View File

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

13
app/components/About.tsx
View File

@@ -1,5 +1,6 @@
"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";
@@ -15,18 +16,24 @@ 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 [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
const techStack = [
{
category: "Frontend & Mobile",
@@ -57,6 +64,8 @@ const About = () => {
{ icon: Activity, text: "Jogging to clear my mind and stay active" },
];
if (!mounted) return null;
return (
<section
id="about"

1387
app/components/ActivityFeed.tsx
View File

File diff suppressed because it is too large Load Diff

16
app/components/BackgroundBlobsClient.tsx
View File

@@ -1,17 +1,11 @@
"use client";
import React, { useEffect, useState } from "react";
import BackgroundBlobs from "@/components/BackgroundBlobs";
import dynamic from "next/dynamic";
import React from "react";
// Dynamically import the heavy framer-motion component on the client only
const BackgroundBlobs = dynamic(() => import("@/components/BackgroundBlobs"), { ssr: false });
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 />;
}

255
app/components/ChatWidget.tsx
View File

@@ -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");
useEffect(() => {
setMounted(true);
// Generate or retrieve conversation ID only on client
try {
const [conversationId, setConversationId] = useState(() => {
// Generate or retrieve conversation ID
if (typeof window !== "undefined") {
const stored = localStorage.getItem("chatSessionId");
if (stored) {
setConversationId(stored);
return;
}
// Generate UUID with fallback for browsers without crypto.randomUUID
let newId: string;
if (typeof crypto !== "undefined" && crypto.randomUUID) {
newId = crypto.randomUUID();
} else {
// Fallback UUID generation
newId = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
const r = Math.random() * 16 | 0;
const v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
if (stored) return stored;
const newId = crypto.randomUUID();
localStorage.setItem("chatSessionId", newId);
setConversationId(newId);
} catch (error) {
// localStorage might be disabled or full
if (process.env.NODE_ENV === 'development') {
console.warn('Failed to access localStorage for chat session:', error);
}
setConversationId(`session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`);
return newId;
}
}, []);
return "default";
});
const messagesEndRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null);
@@ -77,70 +51,28 @@ 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 {
const parsed = JSON.parse(stored);
setMessages(
parsed.map((m: Message) => ({
...m,
text: decodeHtmlEntities(m.text), // Decode HTML entities when loading
timestamp: new Date(m.timestamp),
})),
);
} catch (e) {
if (process.env.NODE_ENV === 'development') {
console.error("Failed to parse chat history", e);
}
// Clear corrupted data
try {
localStorage.removeItem("chatMessages");
} catch {
// Ignore cleanup errors
}
// Add welcome message
setMessages([
{
id: "welcome",
text: "Hi! I'm Dennis's AI assistant. Ask me anything about his skills, projects, or experience! 🚀",
sender: "bot",
timestamp: new Date(),
},
]);
}
} else {
// Add welcome message
setMessages([
{
id: "welcome",
text: "Hi! I'm Dennis's AI assistant. Ask me anything about his skills, projects, or experience! 🚀",
sender: "bot",
timestamp: new Date(),
},
]);
const stored = localStorage.getItem("chatMessages");
if (stored) {
try {
const parsed = JSON.parse(stored);
setMessages(
parsed.map((m: Message) => ({
...m,
timestamp: new Date(m.timestamp),
})),
);
} catch (e) {
console.error("Failed to load chat history", e);
}
} 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
} 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(),
},
@@ -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);
}
}
localStorage.setItem("chatMessages", JSON.stringify(messages));
}
}, [messages]);
@@ -195,34 +120,14 @@ export default function ChatWidget() {
});
if (!response.ok) {
const errorText = await response.text().catch(() => "Unknown error");
console.error("Chat API error:", {
status: response.status,
statusText: response.statusText,
error: errorText,
});
throw new Error(
`Failed to get response: ${response.status} - ${errorText.substring(0, 100)}`,
);
throw new Error("Failed to get response");
}
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-[#292524] text-[#fdfcf8] p-3.5 rounded-full shadow-[0_8px_20px_rgba(41,37,36,0.25)] hover:bg-[#44403c] hover:scale-105 transition-all duration-300 group cursor-pointer border border-[#f3f1e7]/20 ring-1 ring-[#f3f1e7]/10"
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} />
<span className="absolute top-0 right-0 w-3 h-3 bg-green-500 rounded-full animate-pulse shadow-sm border-2 border-[#292524]" />
<MessageCircle size={20} />
<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">
Chat with AI
<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 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, filter: "blur(10px)" }}
animate={{ opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }}
exit={{ opacity: 0, y: 20, scale: 0.95, filter: "blur(10px)" }}
transition={{ type: "spring", damping: 30, stiffness: 400 }}
className="fixed bottom-20 left-4 right-4 md:bottom-24 md:left-6 md:right-auto z-30 md:w-[380px] h-[60vh] md:h-[550px] max-h-[600px] bg-[#fdfcf8]/95 backdrop-blur-xl saturate-100 rounded-2xl shadow-[0_12px_40px_rgba(41,37,36,0.2)] flex flex-col overflow-hidden border border-[#e7e5e4] ring-1 ring-[#f3f1e7]"
initial={{ opacity: 0, y: 20, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 20, scale: 0.95 }}
transition={{ type: "spring", damping: 25, stiffness: 300 }}
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"
>
{/* Header */}
<div className="bg-[#fdfcf8] text-[#292524] p-4 flex items-center justify-between border-b border-[#e7e5e4]">
<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-[#f3f1e7] to-[#fdfcf8] flex items-center justify-center ring-1 ring-[#e7e5e4] shadow-sm">
<Sparkles size={18} className="text-[#57534e]" />
<div className="w-10 h-10 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center">
<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-[#fdfcf8] 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">
<h3 className="font-bold text-sm truncate text-stone-900 tracking-tight">
Assistant
<div>
<h3 className="font-bold text-sm">
Dennis&apos;s AI Assistant
</h3>
<p className="text-[11px] font-medium text-stone-500 truncate">
Powered by AI
</p>
<p className="text-xs text-white/80">Always online</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-[#292524] text-[#fdfcf8]"
: "bg-[#f3f1e7] text-[#292524] border border-[#e7e5e4]"
? "bg-gradient-to-br from-blue-500 to-purple-600 text-white"
: "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 ${
message.sender === "user" ? "text-[#fdfcf8]/90 font-light" : "text-[#292524] font-medium"
}`}>
<p className="text-sm whitespace-pre-wrap break-words">
{message.text}
</p>
<p
className={`text-[10px] mt-1.5 ${
className={`text-[10px] mt-1 ${
message.sender === "user"
? "text-stone-400"
: "text-stone-500"
? "text-white/60"
: "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="flex gap-1.5">
<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">
<motion.div
className="w-1.5 h-1.5 bg-stone-500 rounded-full"
animate={{ y: [0, -6, 0] }}
className="w-2 h-2 bg-gray-400 rounded-full"
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"
animate={{ y: [0, -6, 0] }}
className="w-2 h-2 bg-gray-400 rounded-full"
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"
animate={{ y: [0, -6, 0] }}
className="w-2 h-2 bg-gray-400 rounded-full"
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 🛠️",
"Projects 🚀",
"Contact 📧",
"What are Dennis&apos;s skills?",
"Tell me about his projects",
"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>

4
app/components/ClientOnly.tsx
View File

@@ -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(() => {

58
app/components/ClientProviders.tsx
View File

@@ -1,58 +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 { AnalyticsProvider } from "@/components/AnalyticsProvider";
// Dynamic import with SSR disabled to avoid framer-motion issues
const BackgroundBlobs = dynamic(() => import("@/components/BackgroundBlobs").catch(() => ({ default: () => null })), {
ssr: false,
loading: () => null,
});
const ChatWidget = dynamic(() => import("./ChatWidget").catch(() => ({ default: () => null })), {
ssr: false,
loading: () => null,
});
export default function ClientProviders({
children,
}: {
children: React.ReactNode;
}) {
const [mounted, setMounted] = useState(false);
const [is404Page, setIs404Page] = useState(false);
const pathname = usePathname();
useEffect(() => {
setMounted(true);
// Check if we're on a 404 page by looking for the data attribute or pathname
const check404 = () => {
if (typeof window !== "undefined") {
const has404Component = document.querySelector('[data-404-page]');
const is404Path = pathname === '/404' || window.location.pathname === '/404' || window.location.pathname.includes('404');
setIs404Page(!!has404Component || is404Path);
}
};
// Check immediately and after a short delay
check404();
const timeout = setTimeout(check404, 100);
const interval = setInterval(check404, 500);
return () => {
clearTimeout(timeout);
clearInterval(interval);
};
}, [pathname]);
return (
<AnalyticsProvider>
<ToastProvider>
{mounted && <BackgroundBlobs />}
<div className="relative z-10">{children}</div>
{mounted && !is404Page && <ChatWidget />}
</ToastProvider>
</AnalyticsProvider>
);
}

26
app/components/Contact.tsx
View File

@@ -155,10 +155,10 @@ 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" }}
transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
viewport={{ once: true, margin: "-100px" }}
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">
@@ -173,10 +173,10 @@ const Contact = () => {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Contact Information */}
<motion.div
initial={{ opacity: 0, x: -20 }}
initial={{ opacity: 0, x: -30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, margin: "-50px" }}
transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 1, ease: [0.25, 0.1, 0.25, 1] }}
className="space-y-8"
>
<div>
@@ -196,12 +196,12 @@ const Contact = () => {
<motion.a
key={info.title}
href={info.href}
initial={{ opacity: 0, x: -10 }}
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, margin: "-50px" }}
viewport={{ once: true }}
transition={{
duration: 0.5,
delay: index * 0.1,
duration: 0.8,
delay: index * 0.15,
ease: [0.25, 0.1, 0.25, 1],
}}
whileHover={{
@@ -226,10 +226,10 @@ 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" }}
transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
viewport={{ once: true, margin: "-100px" }}
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">

31
app/components/Footer.tsx
View File

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

26
app/components/Header.tsx
View File

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

35
app/components/Hero.tsx
View File

@@ -1,16 +1,27 @@
"use client";
import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { ArrowDown, Code, Zap, Rocket } from "lucide-react";
import Image from "next/image";
const Hero = () => {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
const features = [
{ icon: Code, text: "Next.js & Flutter" },
{ icon: Zap, text: "Docker Swarm & CI/CD" },
{ icon: Rocket, text: "Self-Hosted Infrastructure" },
];
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">
@@ -18,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">
@@ -100,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">
dk<span className="text-red-500 font-extrabold">0</span>.dev
<div className="px-6 py-2.5 rounded-full glass-panel text-stone-700 font-mono text-sm tracking-wider shadow-lg backdrop-blur-xl border border-white/50">
dk<span className="text-liquid-rose font-bold">0</span>.dev
</div>
</motion.div>
@@ -112,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"
>
@@ -121,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"
>
@@ -134,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">
@@ -149,7 +160,7 @@ const Hero = () => {
<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"
>
Student and passionate{" "}
@@ -171,7 +182,7 @@ const Hero = () => {
<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) => (
@@ -180,8 +191,8 @@ const Hero = () => {
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{
duration: 0.5,
delay: 0.5 + index * 0.1,
duration: 0.8,
delay: 1.3 + index * 0.15,
ease: [0.25, 0.1, 0.25, 1],
}}
whileHover={{ scale: 1.03, y: -3 }}
@@ -199,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

1902
app/components/KernelPanic404.tsx
View File

File diff suppressed because it is too large Load Diff

41
app/components/KernelPanic404Wrapper.tsx
View File

@@ -1,41 +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"
allowTransparency={false}
/>
);
}

166
app/components/Projects.tsx
View File

@@ -2,17 +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";
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],
},
},
@@ -44,9 +44,11 @@ interface Project {
}
const Projects = () => {
const [mounted, setMounted] = useState(false);
const [projects, setProjects] = useState<Project[]>([]);
useEffect(() => {
setMounted(true);
const loadProjects = async () => {
try {
const response = await fetch(
@@ -56,7 +58,7 @@ const Projects = () => {
const data = await response.json();
setProjects(data.projects || []);
}
} catch (error) {
} catch (error) {
if (process.env.NODE_ENV === "development") {
console.error("Error loading projects:", error);
}
@@ -65,6 +67,8 @@ const Projects = () => {
loadProjects();
}, []);
if (!mounted) return null;
return (
<section
id="projects"
@@ -74,7 +78,7 @@ 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"
>
@@ -90,7 +94,7 @@ const Projects = () => {
<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"
>
@@ -98,72 +102,50 @@ const Projects = () => {
<motion.div
key={project.id}
variants={fadeInUp}
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"
whileHover={{
y: -12,
transition: { duration: 0.5, ease: "easeOut" },
}}
className="group relative flex flex-col bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-700 ease-out border border-stone-100 hover:border-stone-200"
>
{/* Project Cover / Image Area */}
<div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
{/* Project Cover / Header */}
<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" />
</>
<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-stone-200 flex items-center justify-center overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-stone-300 via-stone-200 to-stone-300" />
<div className="absolute top-[-20%] left-[-10%] w-[70%] h-[70%] bg-white/20 rounded-full blur-3xl animate-pulse" />
<div className="absolute bottom-[-10%] right-[-5%] w-[60%] h-[60%] bg-stone-400/10 rounded-full blur-2xl" />
<div className="relative z-10">
<span className="text-7xl font-serif font-black text-stone-800/10 group-hover:text-stone-800/20 transition-all duration-700 select-none tracking-tighter">
{project.title.charAt(0)}
</span>
</div>
</div>
)}
{/* Texture/Grain Overlay */}
<div className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-overlay bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" />
{/* Animated Shine Effect */}
<div className="absolute inset-0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-in-out bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-[-20deg] pointer-events-none" />
{/* Featured Badge */}
{project.featured && (
<div className="absolute top-3 left-3 z-20">
<div className="px-3 py-1 bg-[#292524]/80 backdrop-blur-md text-[#fdfcf8] text-[10px] font-bold uppercase tracking-widest rounded-full shadow-sm border border-white/10">
Featured
<div className="absolute inset-0 bg-gradient-to-br from-stone-100 to-stone-200 flex items-center justify-center p-8 group-hover:from-stone-50 group-hover:to-stone-100 transition-colors duration-700 ease-out">
<div className="w-full h-full border-2 border-dashed border-stone-300 rounded-xl flex items-center justify-center">
<Layers className="text-stone-300 w-12 h-12" />
</div>
<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>
@@ -172,67 +154,47 @@ const Projects = () => {
</div>
{/* Content */}
<div className="p-6 flex flex-col flex-1">
{/* Stretched Link covering the whole card (including image area) */}
<Link
href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
className="absolute inset-0 z-10"
aria-label={`View project ${project.title}`}
/>
<div className="flex items-center justify-between mb-3">
<h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-600 transition-colors">
<div className="flex flex-col flex-1 p-6">
<div className="flex justify-between items-start mb-3">
<h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-700 transition-colors duration-500">
{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>
<span className="text-xs font-mono text-stone-400 bg-stone-100 px-2 py-1 rounded">
{new Date(project.date).getFullYear()}
</span>
</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">
{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="space-y-4 mt-auto">
<div className="flex flex-wrap gap-2">
{project.tags.slice(0, 3).map((tag, tIdx) => (
<span
key={`${project.id}-${tag}-${tIdx}`}
className="text-xs px-2.5 py-1 bg-stone-50 border border-stone-100 rounded-md text-stone-600 font-medium hover:bg-stone-100 hover:border-stone-200 transition-all duration-400 ease-out"
>
{tag}
</span>
))}
{project.tags.length > 3 && (
<span className="text-xs px-2 py-1 text-stone-400">
+ {project.tags.length - 3}
</span>
)}
</div>
<div className="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>
<Link
href={`/projects/${project.title.toLowerCase().replace(/\s+/g, "-")}`}
className="inline-flex items-center text-sm font-semibold text-stone-900 hover:gap-3 transition-all duration-500 ease-out group/link"
>
Read more{" "}
<ArrowRight
size={16}
className="ml-1 transition-transform duration-500 ease-out group-hover/link:translate-x-2"
/>
</Link>
</div>
</div>
</motion.div>

51
app/components/RootProviders.tsx
View File

@@ -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>
);
}

691
app/editor/page.tsx
View File

@@ -29,7 +29,6 @@ import {
Github,
Tag,
} from "lucide-react";
import { useToast } from "@/components/Toast";
interface Project {
id: string;
@@ -51,7 +50,6 @@ function EditorPageContent() {
const searchParams = useSearchParams();
const projectId = searchParams.get("id");
const contentRef = useRef<HTMLDivElement>(null);
const { showSuccess, showError } = useToast();
const [, setProject] = useState<Project | null>(null);
const [isAuthenticated, setIsAuthenticated] = useState(false);
@@ -59,11 +57,7 @@ function EditorPageContent() {
const [isSaving, setIsSaving] = useState(false);
const [isCreating, setIsCreating] = useState(!projectId);
const [showPreview, setShowPreview] = useState(false);
const [_isTyping, setIsTyping] = useState(false);
const [history, setHistory] = useState<typeof formData[]>([]);
const [historyIndex, setHistoryIndex] = useState(-1);
const [originalFormData, setOriginalFormData] = useState<typeof formData | null>(null);
const shouldUpdateContentRef = useRef(true);
const [isTyping, setIsTyping] = useState(false);
// Form state
const [formData, setFormData] = useState({
@@ -90,7 +84,8 @@ function EditorPageContent() {
);
if (foundProject) {
const initialData = {
setProject(foundProject);
setFormData({
title: foundProject.title || "",
description: foundProject.description || "",
content: foundProject.content || "",
@@ -101,19 +96,7 @@ function EditorPageContent() {
github: foundProject.github || "",
live: foundProject.live || "",
image: foundProject.image || "",
};
setProject(foundProject);
setFormData(initialData);
setOriginalFormData(initialData);
setHistory([initialData]);
setHistoryIndex(0);
shouldUpdateContentRef.current = true;
// Initialize contentEditable after state update
setTimeout(() => {
if (contentRef.current && initialData.content) {
contentRef.current.textContent = initialData.content;
}
}, 0);
});
}
} else {
if (process.env.NODE_ENV === "development") {
@@ -143,30 +126,6 @@ function EditorPageContent() {
await loadProject(projectId);
} else {
setIsCreating(true);
// Initialize history for new project
const initialData = {
title: "",
description: "",
content: "",
category: "web",
tags: [],
featured: false,
published: false,
github: "",
live: "",
image: "",
};
setFormData(initialData);
setOriginalFormData(initialData);
setHistory([initialData]);
setHistoryIndex(0);
shouldUpdateContentRef.current = true;
// Initialize contentEditable after state update
setTimeout(() => {
if (contentRef.current) {
contentRef.current.textContent = "";
}
}, 0);
}
} else {
setIsAuthenticated(false);
@@ -184,20 +143,18 @@ function EditorPageContent() {
init();
}, [projectId, loadProject]);
const handleSave = useCallback(async () => {
const handleSave = async () => {
try {
setIsSaving(true);
// Validate required fields
if (!formData.title.trim()) {
showError("Validation Error", "Please enter a project title");
setIsSaving(false);
alert("Please enter a project title");
return;
}
if (!formData.description.trim()) {
showError("Validation Error", "Please enter a project description");
setIsSaving(false);
alert("Please enter a project description");
return;
}
@@ -248,156 +205,40 @@ function EditorPageContent() {
image: savedProject.imageUrl || "",
}));
// Show success toast (smaller, smoother)
showSuccess("Saved", `"${savedProject.title}" saved`);
// Update project ID if it was a new project
if (!projectId && savedProject.id) {
const newUrl = `/editor?id=${savedProject.id}`;
window.history.replaceState({}, '', newUrl);
}
// Show success and redirect
alert("Project saved successfully!");
setTimeout(() => {
window.location.href = "/manage";
}, 1000);
} else {
const errorData = await response.json();
if (process.env.NODE_ENV === "development") {
console.error("Error saving project:", response.status, errorData);
}
showError("Save Failed", errorData.error || "Failed to save");
alert(`Error saving project: ${errorData.error || "Unknown error"}`);
}
} catch (error) {
if (process.env.NODE_ENV === "development") {
console.error("Error saving project:", error);
}
showError(
"Save Failed",
error instanceof Error ? error.message : "Failed to save"
alert(
`Error saving project: ${error instanceof Error ? error.message : "Unknown error"}`,
);
} finally {
setIsSaving(false);
}
}, [projectId, formData, showSuccess, showError]);
};
const handleInputChange = (
field: string,
value: string | boolean | string[],
) => {
setFormData((prev) => {
const newData = {
...prev,
[field]: value,
};
// Add to history for undo/redo
setHistory((hist) => {
const newHistory = hist.slice(0, historyIndex + 1);
newHistory.push(newData);
// Keep only last 50 history entries
const trimmedHistory = newHistory.slice(-50);
setHistoryIndex(trimmedHistory.length - 1);
return trimmedHistory;
});
return newData;
});
setFormData((prev) => ({
...prev,
[field]: value,
}));
};
const handleUndo = useCallback(() => {
setHistoryIndex((currentIndex) => {
if (currentIndex > 0) {
const newIndex = currentIndex - 1;
shouldUpdateContentRef.current = true;
setFormData(history[newIndex]);
return newIndex;
}
return currentIndex;
});
}, [history]);
const handleRedo = useCallback(() => {
setHistoryIndex((currentIndex) => {
if (currentIndex < history.length - 1) {
const newIndex = currentIndex + 1;
shouldUpdateContentRef.current = true;
setFormData(history[newIndex]);
return newIndex;
}
return currentIndex;
});
}, [history]);
const handleRevert = useCallback(() => {
if (originalFormData) {
if (confirm("Are you sure you want to revert all changes? This cannot be undone.")) {
shouldUpdateContentRef.current = true;
setFormData(originalFormData);
setHistory([originalFormData]);
setHistoryIndex(0);
}
} else if (projectId) {
// Reload from server
if (confirm("Are you sure you want to revert all changes? This will reload the project from the server.")) {
shouldUpdateContentRef.current = true;
loadProject(projectId);
}
}
}, [originalFormData, projectId, loadProject]);
// Sync contentEditable when formData.content changes externally (undo/redo/revert)
useEffect(() => {
if (contentRef.current && shouldUpdateContentRef.current) {
const currentContent = contentRef.current.textContent || "";
if (currentContent !== formData.content) {
contentRef.current.textContent = formData.content;
}
shouldUpdateContentRef.current = false;
}
}, [formData.content]);
// Initialize contentEditable when formData.content is set and editor is empty
useEffect(() => {
if (contentRef.current) {
const currentText = contentRef.current.textContent || "";
// Initialize if editor is empty and we have content, or if content changed externally
if ((!currentText && formData.content) || (shouldUpdateContentRef.current && currentText !== formData.content)) {
contentRef.current.textContent = formData.content;
shouldUpdateContentRef.current = false;
}
}
}, [formData.content]);
// Keyboard shortcuts
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
// Ctrl+S or Cmd+S - Save
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
e.preventDefault();
if (!isSaving) {
handleSave();
}
}
// Ctrl+Z or Cmd+Z - Undo
if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
e.preventDefault();
handleUndo();
}
// Ctrl+Shift+Z or Cmd+Shift+Z - Redo
if ((e.ctrlKey || e.metaKey) && e.key === 'z' && e.shiftKey) {
e.preventDefault();
handleRedo();
}
// Ctrl+R or Cmd+R - Revert (but allow browser refresh if not in editor)
if ((e.ctrlKey || e.metaKey) && e.key === 'r') {
const target = e.target as HTMLElement;
if (target.isContentEditable || target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
e.preventDefault();
handleRevert();
}
}
};
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, [isSaving, handleSave, handleUndo, handleRedo, handleRevert]);
const handleTagsChange = (tagsString: string) => {
const tags = tagsString
.split(",")
@@ -410,13 +251,19 @@ function EditorPageContent() {
};
// Markdown components for react-markdown with security
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const markdownComponents: any = {
a: ({ node: _node, ...props }: { node?: unknown; href?: string; children?: React.ReactNode }) => {
const markdownComponents = {
a: ({
node: _node,
...props
}: {
node?: unknown;
href?: string;
children?: React.ReactNode;
}) => {
// Validate URLs to prevent javascript: and data: protocols
const href = props.href || "";
const isSafe =
href && typeof href === 'string' && !href.startsWith("javascript:") && !href.startsWith("data:");
href && !href.startsWith("javascript:") && !href.startsWith("data:");
return (
<a
{...props}
@@ -430,11 +277,18 @@ function EditorPageContent() {
/>
);
},
img: ({ node: _node, ...props }: { node?: unknown; src?: string; alt?: string }) => {
img: ({
node: _node,
...props
}: {
node?: unknown;
src?: string;
alt?: string;
}) => {
// Validate image URLs
const src = props.src;
const src = props.src || "";
const isSafe =
src && typeof src === 'string' && !src.startsWith("javascript:") && !src.startsWith("data:");
src && !src.startsWith("javascript:") && !src.startsWith("data:");
// eslint-disable-next-line @next/next/no-img-element
return isSafe ? <img {...props} src={src} alt={props.alt || ""} /> : null;
},
@@ -517,7 +371,7 @@ function EditorPageContent() {
<motion.div
animate={{ rotate: 360 }}
transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
className="w-12 h-12 border-3 border-stone-500 border-t-transparent rounded-full mx-auto mb-6"
className="w-12 h-12 border-3 border-blue-500 border-t-transparent rounded-full mx-auto mb-6"
/>
<h2 className="text-xl font-semibold gradient-text mb-2">
Loading Editor
@@ -549,7 +403,7 @@ function EditorPageContent() {
<button
onClick={() => (window.location.href = "/manage")}
className="w-full px-6 py-3 bg-stone-600 text-white rounded-xl hover:bg-stone-700 transition-all font-medium"
className="w-full px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-xl hover:scale-105 transition-all font-medium"
>
Go to Admin Login
</button>
@@ -559,15 +413,15 @@ function EditorPageContent() {
}
return (
<div className="min-h-screen animated-bg flex flex-col overflow-hidden">
<div className="min-h-screen animated-bg">
{/* Header */}
<div className="glass-card border-b border-white/10 sticky top-0 z-50 flex-shrink-0">
<div className="glass-card border-b border-white/10 sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between h-auto sm:h-16 py-4 sm:py-0 gap-4 sm:gap-0">
<div className="flex flex-col sm:flex-row items-start sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
<button
onClick={() => (window.location.href = "/manage")}
className="inline-flex items-center space-x-2 text-stone-400 hover:text-stone-300 transition-colors"
className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors"
>
<ArrowLeft className="w-5 h-5" />
<span className="hidden sm:inline">Back to Dashboard</span>
@@ -586,8 +440,8 @@ function EditorPageContent() {
onClick={() => setShowPreview(!showPreview)}
className={`flex items-center space-x-2 px-4 py-2 rounded-lg font-medium transition-all duration-200 text-sm ${
showPreview
? "bg-stone-600 text-white shadow-lg"
: "bg-gray-800/50 text-stone-300 hover:bg-gray-700/50 hover:text-stone-100"
? "bg-blue-600 text-white shadow-lg"
: "bg-gray-800/50 text-gray-300 hover:bg-gray-700/50 hover:text-white"
}`}
>
<Eye className="w-4 h-4" />
@@ -611,10 +465,9 @@ function EditorPageContent() {
</div>
</div>
{/* Editor Content - Scrollable */}
<div className="flex-1 overflow-y-auto">
<div className="max-w-7xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
<div className="flex flex-col lg:flex-row gap-6 lg:gap-8">
{/* Editor Content */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
<div className="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8">
{/* Floating particles background */}
<div className="particles">
{[...Array(20)].map((_, i) => (
@@ -629,12 +482,187 @@ function EditorPageContent() {
/>
))}
</div>
{/* Sidebar - Left (appears first in DOM for left positioning) */}
<div className="w-full lg:w-80 flex-shrink-0 space-y-6 order-1 lg:order-1">
{/* Main Editor */}
<div className="xl:col-span-3 space-y-6">
{/* Project Title */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="glass-card p-6 rounded-2xl"
>
<input
type="text"
value={formData.title}
onChange={(e) => handleInputChange("title", e.target.value)}
className="w-full text-3xl font-bold form-input-enhanced focus:outline-none p-4 rounded-lg"
placeholder="Enter project title..."
/>
</motion.div>
{/* Rich Text Toolbar */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 }}
className="glass-card p-4 rounded-2xl"
>
<div className="flex flex-wrap items-center gap-1 sm:gap-2">
<div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
<button
onClick={() => insertFormatting("bold")}
className="p-2 rounded-lg text-gray-300"
title="Bold"
>
<Bold className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("italic")}
className="p-2 rounded-lg text-gray-300"
title="Italic"
>
<Italic className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("code")}
className="p-2 rounded-lg text-gray-300"
title="Code"
>
<Code className="w-4 h-4" />
</button>
</div>
<div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
<button
onClick={() => insertFormatting("h1")}
className="p-2 rounded-lg text-gray-300"
title="Heading 1"
>
<Hash className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("h2")}
className="p-2 hover:bg-gray-800/50 rounded-lg transition-all duration-200 text-xs sm:text-sm text-gray-300 hover:text-white hover:scale-105"
title="Heading 2"
>
H2
</button>
<button
onClick={() => insertFormatting("h3")}
className="p-2 hover:bg-gray-800/50 rounded-lg transition-all duration-200 text-xs sm:text-sm text-gray-300 hover:text-white hover:scale-105"
title="Heading 3"
>
H3
</button>
</div>
<div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
<button
onClick={() => insertFormatting("list")}
className="p-2 rounded-lg text-gray-300"
title="Bullet List"
>
<List className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("orderedList")}
className="p-2 rounded-lg text-gray-300"
title="Numbered List"
>
<ListOrdered className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("quote")}
className="p-2 rounded-lg text-gray-300"
title="Quote"
>
<Quote className="w-4 h-4" />
</button>
</div>
<div className="flex items-center space-x-1">
<button
onClick={() => insertFormatting("link")}
className="p-2 rounded-lg text-gray-300"
title="Link"
>
<Link className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("image")}
className="p-2 rounded-lg text-gray-300"
title="Image"
>
{/* eslint-disable-next-line jsx-a11y/alt-text */}
<Image className="w-4 h-4" />
</button>
</div>
</div>
</motion.div>
{/* Content Editor */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
className="glass-card p-6 rounded-2xl"
>
<h3 className="text-lg font-semibold gradient-text mb-4">
Content
</h3>
<div
ref={contentRef}
contentEditable
className="editor-content-editable w-full min-h-[400px] p-6 form-input-enhanced rounded-lg focus:outline-none leading-relaxed"
style={{ whiteSpace: "pre-wrap" }}
onInput={(e) => {
const target = e.target as HTMLDivElement;
setIsTyping(true);
setFormData((prev) => ({
...prev,
content: target.textContent || "",
}));
}}
onBlur={() => {
setIsTyping(false);
}}
suppressContentEditableWarning={true}
data-placeholder="Start writing your project content..."
>
{!isTyping ? formData.content : undefined}
</div>
<p className="text-xs text-white/50 mt-2">
Supports Markdown formatting. Use the toolbar above or type
directly.
</p>
</motion.div>
{/* Description */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
className="glass-card p-6 rounded-2xl"
>
<h3 className="text-lg font-semibold gradient-text mb-4">
Description
</h3>
<textarea
value={formData.description}
onChange={(e) =>
handleInputChange("description", e.target.value)
}
rows={4}
className="w-full px-4 py-3 form-input-enhanced rounded-lg focus:outline-none resize-none"
placeholder="Brief description of your project..."
/>
</motion.div>
</div>
{/* Sidebar */}
<div className="space-y-6">
{/* Project Settings */}
<motion.div
initial={{ opacity: 0, x: -20 }}
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.4 }}
className="glass-card p-6 rounded-2xl"
@@ -645,7 +673,7 @@ function EditorPageContent() {
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-stone-300 mb-2">
<label className="block text-sm font-medium text-white/70 mb-2">
Category
</label>
<div className="custom-select">
@@ -666,7 +694,7 @@ function EditorPageContent() {
</div>
<div>
<label className="block text-sm font-medium text-stone-300 mb-2">
<label className="block text-sm font-medium text-white/70 mb-2">
Tags
</label>
<input
@@ -682,7 +710,7 @@ function EditorPageContent() {
{/* Links */}
<motion.div
initial={{ opacity: 0, x: -20 }}
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.5 }}
className="glass-card p-6 rounded-2xl"
@@ -693,7 +721,7 @@ function EditorPageContent() {
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-stone-300 mb-2">
<label className="block text-sm font-medium text-white/70 mb-2">
GitHub URL
</label>
<input
@@ -708,7 +736,7 @@ function EditorPageContent() {
</div>
<div>
<label className="block text-sm font-medium text-stone-300 mb-2">
<label className="block text-sm font-medium text-white/70 mb-2">
Live URL
</label>
<input
@@ -724,7 +752,7 @@ function EditorPageContent() {
{/* Publish */}
<motion.div
initial={{ opacity: 0, x: -20 }}
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.6 }}
className="glass-card p-6 rounded-2xl"
@@ -741,9 +769,9 @@ function EditorPageContent() {
onChange={(e) =>
handleInputChange("featured", e.target.checked)
}
className="w-4 h-4 text-stone-500 bg-gray-900/80 border-gray-600/50 rounded focus:ring-stone-500 focus:ring-2"
className="w-4 h-4 text-blue-500 bg-gray-900/80 border-gray-600/50 rounded focus:ring-blue-500 focus:ring-2"
/>
<span className="text-stone-200">Featured Project</span>
<span className="text-white">Featured Project</span>
</label>
<label className="flex items-center space-x-3">
@@ -753,20 +781,20 @@ function EditorPageContent() {
onChange={(e) =>
handleInputChange("published", e.target.checked)
}
className="w-4 h-4 text-stone-500 bg-gray-900/80 border-gray-600/50 rounded focus:ring-stone-500 focus:ring-2"
className="w-4 h-4 text-blue-500 bg-gray-900/80 border-gray-600/50 rounded focus:ring-blue-500 focus:ring-2"
/>
<span className="text-stone-200">Published</span>
<span className="text-white">Published</span>
</label>
</div>
<div className="mt-6 pt-4 border-t border-white/20">
<h4 className="text-sm font-medium text-stone-300 mb-2">
<h4 className="text-sm font-medium text-white/70 mb-2">
Preview
</h4>
<div className="text-xs text-stone-400 space-y-1">
<div className="text-xs text-white/50 space-y-1">
<p>Status: {formData.published ? "Published" : "Draft"}</p>
{formData.featured && (
<p className="text-stone-400">⭐ Featured</p>
<p className="text-blue-400">⭐ Featured</p>
)}
<p>Category: {formData.category}</p>
<p>Tags: {formData.tags.length} tags</p>
@@ -774,227 +802,8 @@ function EditorPageContent() {
</div>
</motion.div>
</div>
{/* Main Editor - Right (appears second in DOM for right positioning) */}
<div className="flex-1 space-y-6 order-2 lg:order-2 min-w-0">
{/* Project Title */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="glass-card p-6 rounded-2xl"
>
<input
type="text"
value={formData.title}
onChange={(e) => handleInputChange("title", e.target.value)}
className="w-full text-3xl font-bold form-input-enhanced focus:outline-none p-4 rounded-lg"
placeholder="Enter project title..."
/>
</motion.div>
{/* Description - Under Title */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 }}
className="glass-card p-6 rounded-2xl"
>
<h3 className="text-lg font-semibold gradient-text mb-4">
Description
</h3>
<textarea
value={formData.description}
onChange={(e) =>
handleInputChange("description", e.target.value)
}
rows={4}
className="w-full px-4 py-3 form-input-enhanced rounded-lg focus:outline-none resize-none"
placeholder="Brief description of your project..."
/>
</motion.div>
{/* Rich Text Toolbar */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
className="glass-card p-4 rounded-2xl"
>
<div className="flex flex-wrap items-center gap-1 sm:gap-2">
<div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
<button
onClick={() => insertFormatting("bold")}
className="p-2 rounded-lg text-stone-300"
title="Bold"
>
<Bold className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("italic")}
className="p-2 rounded-lg text-stone-300"
title="Italic"
>
<Italic className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("code")}
className="p-2 rounded-lg text-stone-300"
title="Code"
>
<Code className="w-4 h-4" />
</button>
</div>
<div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
<button
onClick={() => insertFormatting("h1")}
className="p-2 rounded-lg text-stone-300"
title="Heading 1"
>
<Hash className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("h2")}
className="p-2 hover:bg-gray-800/50 rounded-lg transition-all duration-200 text-xs sm:text-sm text-stone-300 hover:text-stone-100"
title="Heading 2"
>
H2
</button>
<button
onClick={() => insertFormatting("h3")}
className="p-2 hover:bg-gray-800/50 rounded-lg transition-all duration-200 text-xs sm:text-sm text-stone-300 hover:text-stone-100"
title="Heading 3"
>
H3
</button>
</div>
<div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
<button
onClick={() => insertFormatting("list")}
className="p-2 rounded-lg text-stone-300"
title="Bullet List"
>
<List className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("orderedList")}
className="p-2 rounded-lg text-stone-300"
title="Numbered List"
>
<ListOrdered className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("quote")}
className="p-2 rounded-lg text-stone-300"
title="Quote"
>
<Quote className="w-4 h-4" />
</button>
</div>
<div className="flex items-center space-x-1">
<button
onClick={() => insertFormatting("link")}
className="p-2 rounded-lg text-stone-300"
title="Link"
>
<Link className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("image")}
className="p-2 rounded-lg text-stone-300"
title="Image"
>
{/* eslint-disable-next-line jsx-a11y/alt-text */}
<Image className="w-4 h-4" />
</button>
</div>
</div>
</motion.div>
{/* Content Editor */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
className="glass-card p-6 rounded-2xl"
>
<h3 className="text-lg font-semibold gradient-text mb-4">
Content
</h3>
<div className="relative">
<div
ref={contentRef}
contentEditable
className="editor-content-editable w-full min-h-[500px] p-6 form-input-enhanced rounded-lg focus:outline-none leading-relaxed"
style={{ whiteSpace: "pre-wrap" }}
onFocus={(e) => {
// Ensure content is set when focusing if empty
const target = e.target as HTMLDivElement;
const currentText = target.textContent || "";
if (!currentText && formData.content) {
target.textContent = formData.content;
} else if (currentText !== formData.content && shouldUpdateContentRef.current) {
// Sync if content changed externally (undo/redo)
target.textContent = formData.content;
}
shouldUpdateContentRef.current = false;
}}
onMouseDown={(e) => {
// Prevent content from being cleared on click
const target = e.target as HTMLDivElement;
const currentText = target.textContent || "";
if (!currentText && formData.content) {
target.textContent = formData.content;
}
shouldUpdateContentRef.current = false;
}}
onClick={(e) => {
// Ensure content persists on click
const target = e.target as HTMLDivElement;
if (!target.textContent && formData.content) {
target.textContent = formData.content;
}
}}
onInput={(e) => {
const target = e.target as HTMLDivElement;
setIsTyping(true);
shouldUpdateContentRef.current = false;
const newContent = target.textContent || "";
setFormData((prev) => {
const newData = {
...prev,
content: newContent,
};
// Add to history for undo/redo
setHistory((hist) => {
const newHistory = hist.slice(0, historyIndex + 1);
newHistory.push(newData);
// Keep only last 50 history entries
const trimmedHistory = newHistory.slice(-50);
setHistoryIndex(trimmedHistory.length - 1);
return trimmedHistory;
});
return newData;
});
}}
onBlur={() => {
setIsTyping(false);
}}
suppressContentEditableWarning={true}
data-placeholder="Start writing your project content..."
/>
</div>
<p className="text-xs text-stone-400 mt-2">
Supports Markdown formatting. Use the toolbar above or type
directly.
</p>
</motion.div>
</div>
</div>
</div>
</div>
{/* Preview Modal */}
<AnimatePresence>
@@ -1010,7 +819,7 @@ function EditorPageContent() {
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.9, opacity: 0 }}
className="glass-card rounded-2xl p-8 max-w-4xl w-full max-h-[90vh] overflow-y-auto scrollbar-hide"
className="glass-card rounded-2xl p-8 max-w-4xl w-full max-h-[90vh] overflow-y-auto"
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-center justify-between mb-6">
@@ -1038,12 +847,12 @@ function EditorPageContent() {
{/* Project Meta */}
<div className="flex flex-wrap justify-center gap-4 mb-6">
<div className="flex items-center space-x-2 text-stone-300">
<div className="flex items-center space-x-2 text-gray-300">
<Tag className="w-4 h-4" />
<span className="capitalize">{formData.category}</span>
</div>
{formData.featured && (
<div className="flex items-center space-x-2 text-stone-400">
<div className="flex items-center space-x-2 text-blue-400">
<span className="text-sm font-semibold">
⭐ Featured
</span>
@@ -1057,7 +866,7 @@ function EditorPageContent() {
{formData.tags.map((tag, index) => (
<span
key={index}
className="px-3 py-1 bg-gray-800/50 text-stone-300 text-sm rounded-full border border-gray-700"
className="px-3 py-1 bg-gray-800/50 text-gray-300 text-sm rounded-full border border-gray-700"
>
{tag}
</span>
@@ -1074,7 +883,7 @@ function EditorPageContent() {
href={formData.github}
target="_blank"
rel="noopener noreferrer"
className="flex items-center space-x-2 px-4 py-2 bg-gray-800/50 text-stone-300 rounded-lg"
className="flex items-center space-x-2 px-4 py-2 bg-gray-800/50 text-gray-300 rounded-lg"
>
<Github className="w-4 h-4" />
<span>GitHub</span>
@@ -1085,7 +894,7 @@ function EditorPageContent() {
href={formData.live}
target="_blank"
rel="noopener noreferrer"
className="flex items-center space-x-2 px-4 py-2 bg-stone-600/80 text-white rounded-lg"
className="flex items-center space-x-2 px-4 py-2 bg-blue-600/80 text-white rounded-lg"
>
<ExternalLink className="w-4 h-4" />
<span>Live Demo</span>
@@ -1102,7 +911,7 @@ function EditorPageContent() {
Content
</h3>
<div className="prose prose-invert max-w-none">
<div className="markdown text-stone-300 leading-relaxed">
<div className="markdown text-gray-300 leading-relaxed">
<ReactMarkdown components={markdownComponents}>
{formData.content}
</ReactMarkdown>
@@ -1125,7 +934,7 @@ function EditorPageContent() {
{formData.published ? "Published" : "Draft"}
</span>
{formData.featured && (
<span className="px-3 py-1 bg-stone-500/20 text-stone-400 rounded-full text-sm font-medium">
<span className="px-3 py-1 bg-blue-500/20 text-blue-400 rounded-full text-sm font-medium">
Featured
</span>
)}

65
app/globals.css
View File

@@ -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;
}

18
app/layout.tsx
View File

@@ -2,7 +2,11 @@ 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 { AnalyticsProvider } from "@/components/AnalyticsProvider";
import { ClientOnly } from "./components/ClientOnly";
import BackgroundBlobsClient from "./components/BackgroundBlobsClient";
import ChatWidget from "./components/ChatWidget";
const inter = Inter({
variable: "--font-inter",
@@ -25,8 +29,16 @@ export default function RootLayout({
<meta charSet="utf-8" />
<title>Dennis Konkol&#39;s Portfolio</title>
</head>
<body className={inter.variable} suppressHydrationWarning>
<ClientProviders>{children}</ClientProviders>
<body className={inter.variable}>
<AnalyticsProvider>
<ToastProvider>
<ClientOnly>
<BackgroundBlobsClient />
</ClientOnly>
<div className="relative z-10">{children}</div>
<ChatWidget />
</ToastProvider>
</AnalyticsProvider>
</body>
</html>
);

139
app/manage/page.tsx
View File

@@ -57,42 +57,25 @@ 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 {
const { timestamp, attempts } = JSON.parse(lockoutData);
const now = Date.now();
const lockoutData = localStorage.getItem('admin_lockout');
if (lockoutData) {
try {
const { timestamp, attempts } = JSON.parse(lockoutData);
const now = Date.now();
if (now - timestamp < LOCKOUT_DURATION) {
setAuthState(prev => ({
...prev,
isLocked: true,
attempts,
isLoading: false
}));
return true;
} else {
try {
localStorage.removeItem('admin_lockout');
} catch {
// Ignore errors
}
}
} catch {
try {
localStorage.removeItem('admin_lockout');
} catch {
// Ignore errors
}
if (now - timestamp < LOCKOUT_DURATION) {
setAuthState(prev => ({
...prev,
isLocked: true,
attempts,
isLoading: false
}));
return true;
} else {
localStorage.removeItem('admin_lockout');
}
}
} catch (error) {
// localStorage might be disabled
if (process.env.NODE_ENV === 'development') {
console.warn('Failed to check lockout status:', error);
} catch {
localStorage.removeItem('admin_lockout');
}
}
return false;
@@ -214,11 +197,7 @@ const AdminPage = () => {
attempts: 0,
isLoading: false
}));
try {
localStorage.removeItem('admin_lockout');
} catch {
// Ignore errors
}
localStorage.removeItem('admin_lockout');
} 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);
}
}
localStorage.setItem('admin_lockout', JSON.stringify({
timestamp: Date.now(),
attempts: newAttempts
}));
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" />
<p className="text-stone-500">Loading...</p>
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-500" />
<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-8 h-8 text-red-500" />
</div>
<h2 className="text-2xl font-bold text-stone-900 mb-2">Account Locked</h2>
<p className="text-stone-500">Too many failed attempts. Please try again in 15 minutes.</p>
<Lock className="w-16 h-16 mx-auto mb-4 text-red-500" />
<h2 className="text-2xl font-bold text-white mb-2">Account Locked</h2>
<p className="text-white/60">Too many failed attempts. Please try again in 15 minutes.</p>
<button
onClick={() => {
try {
localStorage.removeItem('admin_lockout');
} catch {
// Ignore errors
}
localStorage.removeItem('admin_lockout');
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">
<Lock className="w-6 h-6 text-stone-600" />
<div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
<Lock className="w-8 h-8 text-white" />
</div>
<h1 className="text-2xl font-bold text-stone-900 mb-2 tracking-tight">Admin Access</h1>
<p className="text-stone-500">Enter your password to continue</p>
<h1 className="text-2xl font-bold text-white mb-2">Admin Access</h1>
<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
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>
<p className="mt-2 text-red-400 text-sm">{authState.error}</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>

90
app/not-found.tsx
View File

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

276
app/projects/[slug]/page.tsx
View File

@@ -1,7 +1,7 @@
"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';
@@ -18,7 +18,6 @@ interface Project {
date: string;
github?: string;
live?: string;
imageUrl?: string;
}
const ProjectDetail = () => {
@@ -34,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(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);
}
}
setProject(data.projects[0]);
}
}
} catch (error) {
@@ -70,182 +48,142 @@ 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>
<p className="text-stone-500 font-medium">Loading project...</p>
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-500 mx-auto mb-4"></div>
<p className="text-gray-400">Loading project...</p>
</div>
</div>
);
}
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="/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 */}
<div className="min-h-screen animated-bg">
<div className="max-w-4xl mx-auto px-4 pt-32 pb-20">
{/* Header */}
<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">
<h1 className="text-4xl md:text-6xl font-black font-sans text-stone-900 tracking-tight leading-tight">
<Link
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">
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>
{project.featured && (
<span className="px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white text-sm font-semibold rounded-full">
Featured
</span>
)}
</div>
<p className="text-xl 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} />
<span className="font-mono">{new Date(project.date).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}</span>
<Calendar size={20} />
<span>{project.date}</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 className="flex items-center space-x-2">
<Tag size={20} />
<span>{project.category}</span>
</div>
</div>
</motion.div>
{/* Featured Image / Fallback */}
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="mb-16 rounded-2xl overflow-hidden shadow-2xl bg-stone-100 aspect-video relative"
>
{project.imageUrl ? (
<img
src={project.imageUrl}
alt={project.title}
className="w-full h-full object-cover"
/>
) : (
<div className="absolute inset-0 bg-gradient-to-br from-stone-200 to-stone-300 flex items-center justify-center">
<span className="text-9xl font-serif font-bold text-stone-500/20 select-none">
{project.title.charAt(0)}
</span>
</div>
)}
</motion.div>
{/* 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>
{/* Content & Sidebar Layout */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
{/* Main Content */}
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.3 }}
className="lg:col-span-2"
>
<div className="markdown prose prose-stone max-w-none prose-lg prose-headings:font-bold prose-headings:tracking-tight prose-a:text-stone-900 prose-a:decoration-stone-300 hover:prose-a:decoration-stone-900 prose-img:rounded-xl prose-img:shadow-lg">
<ReactMarkdown
components={{
// Custom components to ensure styling matches
h1: ({children}) => <h1 className="text-3xl font-bold text-stone-900 mt-8 mb-4">{children}</h1>,
h2: ({children}) => <h2 className="text-2xl font-bold text-stone-900 mt-8 mb-4">{children}</h2>,
p: ({children}) => <p className="text-stone-700 leading-relaxed mb-6">{children}</p>,
li: ({children}) => <li className="text-stone-700">{children}</li>,
code: ({children}) => <code className="bg-stone-100 text-stone-800 px-1.5 py-0.5 rounded text-sm font-mono font-medium">{children}</code>,
pre: ({children}) => <pre className="bg-stone-900 text-stone-50 p-6 rounded-xl overflow-x-auto my-6 shadow-lg">{children}</pre>,
}}
{/* Action Buttons */}
{((project.github && project.github.trim() && project.github !== "#") || (project.live && project.live.trim() && project.live !== "#")) && (
<div className="flex flex-wrap gap-4">
{project.github && project.github.trim() && project.github !== "#" && (
<motion.a
href={project.github}
target="_blank"
rel="noopener noreferrer"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="inline-flex items-center space-x-2 px-6 py-3 bg-gray-800/50 hover:bg-gray-700/50 text-white rounded-lg transition-colors border border-gray-700"
>
{project.content}
</ReactMarkdown>
<GithubIcon size={20} />
<span>View Code</span>
</motion.a>
)}
{project.live && project.live.trim() && project.live !== "#" && (
<motion.a
href={project.live}
target="_blank"
rel="noopener noreferrer"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="inline-flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
>
<ExternalLink size={20} />
<span>Live Demo</span>
</motion.a>
)}
</div>
</motion.div>
)}
</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"
{/* Project Content */}
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="glass-card p-8 rounded-2xl"
>
<div className="markdown prose prose-invert max-w-none text-white">
<ReactMarkdown
components={{
h1: ({children}) => <h1 className="text-3xl font-bold text-white mb-4">{children}</h1>,
h2: ({children}) => <h2 className="text-2xl font-semibold text-white mb-3">{children}</h2>,
h3: ({children}) => <h3 className="text-xl font-semibold text-white mb-2">{children}</h3>,
p: ({children}) => <p className="text-gray-300 mb-3 leading-relaxed">{children}</p>,
ul: ({children}) => <ul className="list-disc list-inside text-gray-300 mb-3 space-y-1">{children}</ul>,
ol: ({children}) => <ol className="list-decimal list-inside text-gray-300 mb-3 space-y-1">{children}</ol>,
li: ({children}) => <li className="text-gray-300">{children}</li>,
a: ({href, children}) => (
<a href={href} className="text-blue-400 hover:text-blue-300 underline transition-colors" target="_blank" rel="noopener noreferrer">
{children}
</a>
),
code: ({children}) => <code className="bg-gray-800 text-blue-400 px-2 py-1 rounded text-sm">{children}</code>,
pre: ({children}) => <pre className="bg-gray-800 p-4 rounded-lg overflow-x-auto mb-3">{children}</pre>,
blockquote: ({children}) => <blockquote className="border-l-4 border-blue-500 pl-4 italic text-gray-300 mb-3">{children}</blockquote>,
strong: ({children}) => <strong className="font-semibold text-white">{children}</strong>,
em: ({children}) => <em className="italic text-gray-300">{children}</em>
}}
>
<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>
{project.content}
</ReactMarkdown>
</div>
</motion.div>
</div>
</div>
);
};
export default ProjectDetail;
export default ProjectDetail;

272
app/projects/page.tsx
View File

@@ -1,8 +1,9 @@
"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';
interface Project {
@@ -16,16 +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);
// Load projects from API
useEffect(() => {
@@ -34,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(loadedProjects);
// Extract unique categories
const uniqueCategories = ["All", ...Array.from(new Set(loadedProjects.map((p: Project) => p.category))) as string[]];
setCategories(uniqueCategories);
setProjects(data.projects || []);
}
} catch (error) {
if (process.env.NODE_ENV === 'development') {
@@ -49,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
useEffect(() => {
let result = projects;
if (!mounted) {
return null;
}
if (selectedCategory !== "All") {
result = result.filter(project => project.category === selectedCategory);
}
if (searchQuery) {
const query = searchQuery.toLowerCase();
result = result.filter(project =>
project.title.toLowerCase().includes(query) ||
project.description.toLowerCase().includes(query) ||
project.tags.some(tag => tag.toLowerCase().includes(query))
);
}
setFilteredProjects(result);
}, [projects, selectedCategory, searchQuery]);
const filteredProjects = selectedCategory === "All"
? projects
: projects.filter(project => project.category === selectedCategory);
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">
<div className="min-h-screen animated-bg">
<div className="max-w-7xl mx-auto px-4 pt-32 pb-20">
{/* Header */}
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -88,56 +73,43 @@ const ProjectsPage = () => {
>
<Link
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>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-2">
<div className="flex flex-wrap gap-3">
{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-white text-stone-600 border-stone-200 hover:bg-stone-50 hover:border-stone-300'
? 'bg-gray-800 text-cream shadow-lg'
: '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 */}
@@ -148,158 +120,98 @@ const ProjectsPage = () => {
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"
whileHover={{ y: -10 }}
className="group relative overflow-hidden rounded-2xl glass-card card-hover"
>
{/* Image / Fallback / Cover Area */}
<div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
{project.imageUrl ? (
<>
<img
src={project.imageUrl}
alt={project.title}
className="w-full h-full object-cover transition-transform duration-1000 ease-out group-hover:scale-110"
/>
<div className="absolute inset-0 bg-gradient-to-t from-stone-900/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
</>
) : (
<div className="absolute inset-0 bg-stone-200 flex items-center justify-center overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-stone-300 via-stone-200 to-stone-300" />
<div className="absolute top-[-20%] left-[-10%] w-[70%] h-[70%] bg-white/20 rounded-full blur-3xl animate-pulse" />
<div className="absolute bottom-[-10%] right-[-5%] w-[60%] h-[60%] bg-stone-400/10 rounded-full blur-2xl" />
<div className="relative z-10">
<span className="text-7xl font-serif font-black text-stone-800/10 group-hover:text-stone-800/20 transition-all duration-700 select-none tracking-tighter">
{project.title.charAt(0)}
</span>
</div>
<div className="relative h-48 overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20" />
<div className="absolute inset-0 bg-gray-800/50 flex flex-col items-center justify-center p-4">
<div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full flex items-center justify-center mb-2">
<span className="text-2xl font-bold text-white">
{project.title.split(' ').map(word => word[0]).join('').toUpperCase()}
</span>
</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>
)}
<span className="text-sm font-medium text-gray-400 text-center leading-tight">
{project.title}
</span>
</div>
{project.featured && (
<div className="absolute top-4 right-4 px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 text-white text-xs font-semibold rounded-full">
Featured
</div>
)}
{((project.github && project.github.trim() && project.github !== "#") || (project.live && project.live.trim() && project.live !== "#")) && (
<div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center space-x-4">
{project.github && project.github.trim() && project.github !== "#" && (
<motion.a
href={project.github}
target="_blank"
rel="noopener noreferrer"
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.95 }}
className="p-3 bg-gray-800/80 rounded-lg text-white hover:bg-gray-700/80 transition-colors"
>
<Github size={20} />
</motion.a>
)}
{project.live && project.live.trim() && project.live !== "#" && (
<motion.a
href={project.live}
target="_blank"
rel="noopener noreferrer"
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.95 }}
className="p-3 bg-blue-600/80 rounded-lg text-white hover:bg-blue-500/80 transition-colors"
>
<ExternalLink size={20} />
</motion.a>
)}
</div>
)}
</div>
<div className="p-6 flex flex-col flex-1">
{/* Stretched Link covering the whole card (including image area) */}
<Link
href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
className="absolute inset-0 z-10"
aria-label={`View project ${project.title}`}
/>
<div className="p-6">
<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">
<Calendar size={12} />
<span>{new Date(project.date).getFullYear()}</span>
<div className="flex items-center space-x-2 text-gray-400">
<Calendar size={16} />
<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">
{project.tags.slice(0, 4).map((tag) => (
<div className="flex flex-wrap gap-2 mb-4">
{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">
<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>
<Link
href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors font-medium"
>
<span>View Project</span>
<ExternalLink size={16} />
</Link>
</div>
</motion.div>
))}
</div>
{filteredProjects.length === 0 && (
<div className="text-center py-20">
<p className="text-stone-500 text-lg">No projects found matching your criteria.</p>
<button
onClick={() => {setSelectedCategory("All"); setSearchQuery("");}}
className="mt-4 text-stone-800 font-medium hover:underline"
>
Clear filters
</button>
</div>
)}
</div>
</div>
);
};
export default ProjectsPage;
export default ProjectsPage;

282
components/AnalyticsDashboard.tsx
View File

@@ -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;
@@ -73,13 +79,11 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
setLoading(true);
setError(null);
// Add cache-busting parameter to ensure fresh data after reset
const cacheBust = `?nocache=true&t=${Date.now()}`;
const [analyticsRes, performanceRes] = await Promise.all([
fetch(`/api/analytics/dashboard${cacheBust}`, {
fetch('/api/analytics/dashboard', {
headers: { 'x-admin-request': 'true' }
}),
fetch(`/api/analytics/performance${cacheBust}`, {
fetch('/api/analytics/performance', {
headers: { 'x-admin-request': 'true' }
})
]);
@@ -99,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: {
avgLighthouse: performance.avgLighthouse || analytics.overview?.avgLighthouse || 0,
totalViews: performance.totalViews || analytics.overview?.totalViews || 0,
performance: performance.performance || {
avgLighthouse: 90,
totalViews: 0,
totalLikes: 0,
totalShares: 0
},
metrics: performance.metrics || analytics.metrics || {
bounceRate: 0,
avgSessionDuration: 0,
pagesPerSession: 0,
metrics: performance.metrics || {
bounceRate: 35,
avgSessionDuration: 180,
pagesPerSession: 2.5,
newUsers: 0
}
});
@@ -126,7 +134,6 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
if (!isAuthenticated || resetting) return;
setResetting(true);
setError(null);
try {
const response = await fetch('/api/analytics/reset', {
method: 'POST',
@@ -137,25 +144,15 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
body: JSON.stringify({ type: resetType })
});
const result = await response.json();
if (response.ok) {
showSuccess(
'Analytics Reset',
`Successfully reset ${resetType === 'all' ? 'all analytics data' : resetType} data.`
);
await fetchAnalyticsData(); // Refresh data
setShowResetModal(false);
// Clear cache and refresh data
await fetchAnalyticsData();
} else {
const errorMsg = result.error || 'Failed to reset analytics';
setError(errorMsg);
showError('Reset Failed', errorMsg);
const errorData = await response.json();
setError(errorData.error || 'Failed to reset analytics');
}
} catch (err) {
const errorMsg = 'Failed to reset analytics. Please try again.';
setError(errorMsg);
showError('Reset Failed', errorMsg);
setError('Failed to reset analytics');
console.error('Reset error:', err);
} finally {
setResetting(false);
@@ -168,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>
{description && <p className="text-stone-400 text-xs">{description}</p>}
<p className="text-white/60 text-sm font-medium">{title}</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>
{trend && trendValue && (
<div className={`flex items-center space-x-1 text-sm ${
trend === 'up' ? 'text-green-400' :
trend === 'down' ? 'text-red-400' : 'text-yellow-400'
}`}>
<TrendingUp className={`w-4 h-4 ${trend === 'down' ? 'rotate-180' : ''}`} />
<span>{trendValue}</span>
</div>
)}
</div>
</div>
{tooltip && (
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-stone-900/95 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-normal max-w-xs z-50 shadow-xl backdrop-blur-sm pointer-events-none">
{tooltip}
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-2 h-2 bg-stone-900/95 rotate-45"></div>
</div>
)}
</motion.div>
);
const getDifficultyColor = (difficulty: string) => {
switch (difficulty) {
case 'Beginner': return 'bg-stone-50 text-stone-700 border-stone-200';
case 'Intermediate': return 'bg-stone-100 text-stone-700 border-stone-300';
case 'Advanced': return 'bg-stone-200 text-stone-800 border-stone-400';
case 'Expert': return 'bg-stone-300 text-stone-900 border-stone-500';
default: return 'bg-stone-50 text-stone-600 border-stone-200';
case 'Beginner': return 'bg-green-500/30 text-green-400 border-green-500/40';
case 'Intermediate': return 'bg-yellow-500/30 text-yellow-400 border-yellow-500/40';
case 'Advanced': return 'bg-orange-500/30 text-orange-400 border-orange-500/40';
case 'Expert': return 'bg-red-500/30 text-red-400 border-red-500/40';
default: return 'bg-gray-500/30 text-gray-400 border-gray-500/40';
}
};
const getCategoryColor = (index: number) => {
const colors = [
'bg-stone-100 text-stone-700',
'bg-stone-200 text-stone-800',
'bg-stone-300 text-stone-900',
'bg-stone-100 text-stone-700',
'bg-stone-200 text-stone-800'
'bg-blue-500/30 text-blue-400',
'bg-purple-500/30 text-purple-400',
'bg-green-500/30 text-green-400',
'bg-pink-500/30 text-pink-400',
'bg-indigo-500/30 text-indigo-400'
];
return colors[index % colors.length];
};
@@ -232,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">
<BarChart3 className="w-8 h-8 mr-3 text-stone-600" />
<h1 className="text-3xl font-bold text-white flex items-center">
<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'
: 'text-stone-500 hover:text-stone-800 hover:bg-stone-50'
? 'bg-blue-500/40 text-blue-300 shadow-lg'
: 'text-white/70 hover:text-white hover:bg-white/10'
}`}
>
{range === '7d' ? '7 Days' : range === '30d' ? '30 Days' : range === '90d' ? '90 Days' : '1 Year'}
@@ -258,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' : ''}`} />
<span className="font-medium">Refresh</span>
<RefreshCw className={`w-4 h-4 text-blue-400 ${loading ? 'animate-spin' : ''}`} />
<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>
@@ -275,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" />
<span className="text-stone-500 text-lg">Loading analytics data...</span>
<RefreshCw className="w-6 h-6 text-blue-400 animate-spin" />
<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="flex items-center space-x-3 text-red-600">
<div className="admin-glass-card p-6 rounded-xl border border-red-500/40">
<div className="flex items-center space-x-3 text-red-300">
<Activity className="w-5 h-5" />
<span>Error: {error}</span>
</div>
@@ -296,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">
<Target className="w-5 h-5 mr-2 text-stone-600" />
<h2 className="text-xl font-bold text-white mb-6 flex items-center">
<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">
@@ -305,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"
description={data.overview.avgLighthouse > 0 ? "Avg Lighthouse score" : "No performance data yet"}
tooltip={data.overview.avgLighthouse > 0
? "✅ REAL DATA: Average Lighthouse performance score (0-100) calculated from real Web Vitals metrics (LCP, FCP, CLS, FID, TTFB) collected from actual page visits. Only shown when real performance data exists."
: "No performance data collected yet. Scores will appear after visitors load your pages and Web Vitals are tracked."}
color="bg-orange-500/30"
trend="up"
trendValue="+5%"
description="Avg Lighthouse score"
/>
<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>
@@ -349,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">
<h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
<Award className="w-5 h-5 mr-2 text-stone-600" />
<div className="admin-glass-card p-6 rounded-xl">
<h3 className="text-xl font-bold text-white mb-6 flex items-center">
<Award className="w-5 h-5 mr-2 text-yellow-400" />
Top Performing Projects
</h3>
<div className="space-y-4">
@@ -364,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-stone-500 text-sm">{project.category}</p>
<p className="text-white font-medium">{project.title}</p>
<p className="text-white/60 text-sm">{project.category}</p>
</div>
</div>
<div className="text-right group/views relative">
<p className="text-stone-900 font-bold">{project.views.toLocaleString()}</p>
<p className="text-stone-500 text-sm">views</p>
<div className="absolute bottom-full right-0 mb-2 px-3 py-2 bg-stone-900/95 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover/views:opacity-100 transition-opacity whitespace-normal max-w-xs z-50 shadow-xl backdrop-blur-sm pointer-events-none">
✅ REAL DATA: Page views tracked from PageView table for this project. Each visit is automatically recorded.
<div className="absolute top-full right-4 -mt-1 w-2 h-2 bg-stone-900/95 rotate-45"></div>
</div>
<div className="text-right">
<p className="text-white font-bold">{project.views.toLocaleString()}</p>
<p className="text-white/60 text-sm">views</p>
</div>
</motion.div>
))}
@@ -389,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">
<h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
<BarChart3 className="w-5 h-5 mr-2 text-stone-600" />
<div className="admin-glass-card p-6 rounded-xl">
<h3 className="text-xl font-bold text-white mb-6 flex items-center">
<BarChart3 className="w-5 h-5 mr-2 text-green-400" />
Categories
</h3>
<div className="space-y-4">
@@ -405,16 +405,16 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
>
<div className="flex items-center space-x-3">
<div className={`w-4 h-4 rounded-full ${getCategoryColor(index)}`}></div>
<span className="text-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>
))}
@@ -422,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">
<h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
<Target className="w-5 h-5 mr-2 text-stone-600" />
<div className="admin-glass-card p-6 rounded-xl">
<h3 className="text-xl font-bold text-white mb-6 flex items-center">
<Target className="w-5 h-5 mr-2 text-red-400" />
Difficulty Levels
</h3>
<div className="grid grid-cols-2 gap-4">
@@ -448,9 +448,9 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
</div>
{/* Recent Activity */}
<div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm">
<h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
<Activity className="w-5 h-5 mr-2 text-blue-600" />
<div className="admin-glass-card p-6 rounded-xl">
<h3 className="text-xl font-bold text-white mb-6 flex items-center">
<Activity className="w-5 h-5 mr-2 text-blue-400" />
Recent Activity
</h3>
<div className="space-y-4">
@@ -463,25 +463,25 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
className="flex items-center space-x-4 p-3 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-stone-500 text-xs">
<p className="text-white font-medium text-sm">{project.title}</p>
<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-stone-200 text-stone-700'
? 'bg-green-500/20 text-green-400'
: 'bg-yellow-500/20 text-yellow-400'
}`}>
{project.published ? 'Live' : 'Draft'}
</span>
@@ -496,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">
<AlertTriangle className="w-5 h-5 text-red-600" />
<div className="w-10 h-10 bg-red-500/20 rounded-lg flex items-center justify-center">
<AlertTriangle className="w-5 h-5 text-red-400" />
</div>
<div>
<h3 className="text-lg font-bold text-stone-900">Reset Analytics Data</h3>
<p className="text-stone-500 text-sm">This action cannot be undone</p>
<h3 className="text-lg font-bold text-white">Reset Analytics Data</h3>
<p className="text-white/60 text-sm">This action cannot be undone</p>
</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')}
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"
onChange={(e) => setResetType(e.target.value as 'all' | 'performance' | 'analytics')}
className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-red-500"
>
<option value="analytics">Analytics Only (project view counts)</option>
<option value="pageviews">Page Views Only (all tracked visits)</option>
<option value="analytics">Analytics Only (views, likes, shares)</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" />
<div className="text-sm text-red-700">
<AlertTriangle className="w-4 h-4 text-red-400 mt-0.5 flex-shrink-0" />
<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>
@@ -544,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 ? (
<>

230
components/AnalyticsProvider.tsx
View File

@@ -16,37 +16,12 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
if (typeof window === 'undefined') return;
// Track page view
const trackPageView = async () => {
const path = window.location.pathname;
const projectMatch = path.match(/\/projects\/([^\/]+)/);
const projectId = projectMatch ? projectMatch[1] : null;
// Track to Umami (if available)
const trackPageView = () => {
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
@@ -55,69 +30,6 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
// Track initial page view
trackPageView();
// Track performance metrics to our API
const trackPerformanceToAPI = async () => {
try {
// Get current page path to extract project ID if on project page
const path = window.location.pathname;
const projectMatch = path.match(/\/projects\/([^\/]+)/);
const projectId = projectMatch ? projectMatch[1] : null;
// Wait for page to fully load
setTimeout(async () => {
try {
const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming | undefined;
const paintEntries = performance.getEntriesByType('paint');
const lcpEntries = performance.getEntriesByType('largest-contentful-paint');
const fcp = paintEntries.find((e: PerformanceEntry) => e.name === 'first-contentful-paint');
const lcp = lcpEntries.length > 0 ? lcpEntries[lcpEntries.length - 1] : undefined;
const performanceData = {
loadTime: navigation && navigation.loadEventEnd && navigation.fetchStart ? navigation.loadEventEnd - navigation.fetchStart : 0,
fcp: fcp ? fcp.startTime : 0,
lcp: lcp ? lcp.startTime : 0,
ttfb: navigation && navigation.responseStart && navigation.fetchStart ? navigation.responseStart - navigation.fetchStart : 0,
cls: 0, // Will be updated by CLS observer
fid: 0, // Will be updated by FID observer
si: 0 // Speed Index - would need to calculate
};
// Send performance data
await fetch('/api/analytics/track', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
type: 'performance',
projectId: projectId,
page: path,
performance: performanceData
})
});
} catch (error) {
// Silently fail - performance tracking is not critical
if (process.env.NODE_ENV === 'development') {
console.warn('Error collecting performance data:', error);
}
}
}, 2000); // Wait 2 seconds for page to stabilize
} catch (error) {
// Silently fail
if (process.env.NODE_ENV === 'development') {
console.error('Error tracking performance:', error);
}
}
};
// Track performance after page load
if (document.readyState === 'complete') {
trackPerformanceToAPI();
} else {
window.addEventListener('load', trackPerformanceToAPI);
}
// Track route changes (for SPA navigation)
const handleRouteChange = () => {
setTimeout(() => {
@@ -131,84 +43,48 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
// Track user interactions
const handleClick = (event: MouseEvent) => {
try {
if (typeof window === 'undefined') return;
const target = event.target as HTMLElement | null;
if (!target) return;
const element = target.tagName ? target.tagName.toLowerCase() : 'unknown';
const className = target.className;
const id = target.id;
trackEvent('click', {
element,
className: (typeof className === 'string' && className) ? className.split(' ')[0] : undefined,
id: id || undefined,
url: window.location.pathname,
});
} catch (error) {
// Silently fail - click tracking is not critical
if (process.env.NODE_ENV === 'development') {
console.warn('Error tracking click:', error);
}
}
const target = event.target as HTMLElement;
const element = target.tagName.toLowerCase();
const className = target.className;
const id = target.id;
trackEvent('click', {
element,
className: (typeof className === 'string' && className) ? className.split(' ')[0] : undefined,
id: id || undefined,
url: window.location.pathname,
});
};
// Track form submissions
const handleSubmit = (event: SubmitEvent) => {
try {
if (typeof window === 'undefined') return;
const form = event.target as HTMLFormElement | null;
if (!form) return;
trackEvent('form-submit', {
formId: form.id || undefined,
formClass: form.className || undefined,
url: window.location.pathname,
});
} catch (error) {
// Silently fail - form tracking is not critical
if (process.env.NODE_ENV === 'development') {
console.warn('Error tracking form submit:', error);
}
}
const form = event.target as HTMLFormElement;
trackEvent('form-submit', {
formId: form.id || undefined,
formClass: form.className || undefined,
url: window.location.pathname,
});
};
// Track scroll depth
let maxScrollDepth = 0;
const handleScroll = () => {
try {
if (typeof window === 'undefined' || typeof document === 'undefined') return;
const scrollDepth = Math.round(
(window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100
);
if (scrollDepth > maxScrollDepth) {
maxScrollDepth = scrollDepth;
const scrollHeight = document.documentElement.scrollHeight;
const innerHeight = window.innerHeight;
if (scrollHeight <= innerHeight) return; // No scrollable content
const scrollDepth = Math.round(
(window.scrollY / (scrollHeight - innerHeight)) * 100
);
if (scrollDepth > maxScrollDepth) {
maxScrollDepth = scrollDepth;
// Track scroll milestones
if (scrollDepth >= 25 && scrollDepth < 50 && maxScrollDepth >= 25) {
trackEvent('scroll-depth', { depth: 25, url: window.location.pathname });
} else if (scrollDepth >= 50 && scrollDepth < 75 && maxScrollDepth >= 50) {
trackEvent('scroll-depth', { depth: 50, url: window.location.pathname });
} else if (scrollDepth >= 75 && scrollDepth < 90 && maxScrollDepth >= 75) {
trackEvent('scroll-depth', { depth: 75, url: window.location.pathname });
} else if (scrollDepth >= 90 && maxScrollDepth >= 90) {
trackEvent('scroll-depth', { depth: 90, url: window.location.pathname });
}
}
} catch (error) {
// Silently fail - scroll tracking is not critical
if (process.env.NODE_ENV === 'development') {
console.warn('Error tracking scroll:', error);
// Track scroll milestones
if (scrollDepth >= 25 && scrollDepth < 50 && maxScrollDepth >= 25) {
trackEvent('scroll-depth', { depth: 25, url: window.location.pathname });
} else if (scrollDepth >= 50 && scrollDepth < 75 && maxScrollDepth >= 50) {
trackEvent('scroll-depth', { depth: 50, url: window.location.pathname });
} else if (scrollDepth >= 75 && scrollDepth < 90 && maxScrollDepth >= 75) {
trackEvent('scroll-depth', { depth: 75, url: window.location.pathname });
} else if (scrollDepth >= 90 && maxScrollDepth >= 90) {
trackEvent('scroll-depth', { depth: 90, url: window.location.pathname });
}
}
};
@@ -220,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',
filename: event.filename || undefined,
lineno: event.lineno || undefined,
colno: event.colno || undefined,
url: window.location.pathname,
});
} catch (error) {
// Silently fail - error tracking should not cause more errors
if (process.env.NODE_ENV === 'development') {
console.warn('Error tracking error event:', error);
}
}
trackEvent('error', {
message: event.message,
filename: event.filename,
lineno: event.lineno,
colno: event.colno,
url: window.location.pathname,
});
};
const handleUnhandledRejection = (event: PromiseRejectionEvent) => {
try {
if (typeof window === 'undefined') return;
trackEvent('unhandled-rejection', {
reason: event.reason?.toString() || 'Unknown rejection',
url: window.location.pathname,
});
} catch (error) {
// Silently fail - error tracking should not cause more errors
if (process.env.NODE_ENV === 'development') {
console.warn('Error tracking unhandled rejection:', error);
}
}
trackEvent('unhandled-rejection', {
reason: event.reason?.toString(),
url: window.location.pathname,
});
};
window.addEventListener('error', handleError);

18
components/BackgroundBlobs.tsx
View File

@@ -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;

74
components/EmailManager.tsx
View File

@@ -143,7 +143,7 @@ export const EmailManager: React.FC = () => {
case 'high': return 'text-red-400';
case 'medium': return 'text-yellow-400';
case 'low': return 'text-green-400';
default: return 'text-stone-400';
default: return 'text-blue-400';
}
};
@@ -153,7 +153,7 @@ export const EmailManager: React.FC = () => {
<motion.div
animate={{ rotate: 360 }}
transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
className="w-8 h-8 border-2 border-stone-500 border-t-transparent rounded-full"
className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full"
/>
</div>
);
@@ -164,12 +164,12 @@ export const EmailManager: React.FC = () => {
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h2 className="text-2xl font-bold text-stone-900">Email Manager</h2>
<p className="text-stone-500 mt-1">Manage your contact messages</p>
<h2 className="text-2xl font-bold text-white">Email Manager</h2>
<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>
@@ -179,13 +179,13 @@ export const EmailManager: React.FC = () => {
{/* Filters and Search */}
<div className="flex flex-col sm:flex-row gap-4">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-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">
@@ -195,8 +195,8 @@ export const EmailManager: React.FC = () => {
onClick={() => setFilter(filterType as 'all' | 'unread' | 'responded')}
className={`px-4 py-2 rounded-lg transition-colors ${
filter === filterType
? 'bg-stone-900 text-stone-50'
: 'bg-white border border-stone-200 text-stone-600 hover:bg-stone-50'
? 'bg-blue-500 text-white'
: 'bg-white/10 text-white/70 hover:bg-white/20'
}`}
>
{filterType.charAt(0).toUpperCase() + filterType.slice(1)}
@@ -209,7 +209,7 @@ export const EmailManager: React.FC = () => {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="lg:col-span-1 space-y-3">
{filteredMessages.length === 0 ? (
<div className="text-center py-12 text-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>
@@ -219,36 +219,36 @@ export const EmailManager: React.FC = () => {
key={message.id}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className={`p-4 rounded-lg cursor-pointer transition-all border ${
className={`p-4 rounded-lg cursor-pointer transition-all ${
selectedMessage?.id === message.id
? 'bg-stone-100 border-stone-300 shadow-sm'
: 'bg-white border-stone-200 hover:bg-stone-50'
? 'bg-blue-500/20 border border-blue-500/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.responded && <CheckCircle className="w-3 h-3 text-green-500" />}
{!message.read && <Circle className="w-3 h-3 text-blue-400" />}
{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-stone-400 text-xs">{formatDate(message.createdAt)}</p>
<p className="text-white/70 text-sm mb-2">{message.name}</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>
<div className="flex items-center space-x-4 text-sm text-stone-500">
<h3 className="text-xl font-bold text-white">{selectedMessage.subject}</h3>
<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>
@@ -264,15 +264,15 @@ export const EmailManager: React.FC = () => {
</div>
</div>
<div className="flex items-center space-x-2">
{!selectedMessage.read && <Circle className="w-4 h-4 text-stone-600" />}
{selectedMessage.responded && <CheckCircle className="w-4 h-4 text-green-500" />}
{!selectedMessage.read && <Circle className="w-4 h-4 text-blue-400" />}
{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">
<h4 className="text-stone-700 font-medium mb-3">Message:</h4>
<div className="text-stone-600 whitespace-pre-wrap leading-relaxed">
<div className="p-4 bg-white/5 rounded-lg border border-white/10">
<h4 className="text-white font-medium mb-3">Message:</h4>
<div className="text-white/80 whitespace-pre-wrap leading-relaxed">
{selectedMessage.message}
</div>
</div>
@@ -281,21 +281,21 @@ export const EmailManager: React.FC = () => {
<div className="flex space-x-3">
<button
onClick={() => setShowReplyModal(true)}
className="flex items-center space-x-2 px-4 py-2 bg-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>
@@ -311,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>
@@ -336,20 +336,20 @@ export const EmailManager: React.FC = () => {
value={replyContent}
onChange={(e) => setReplyContent(e.target.value)}
placeholder="Type your reply..."
className="w-full h-32 p-3 bg-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>

62
components/EmailResponder.tsx
View File

@@ -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="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto border border-stone-200">
<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">
{/* 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">
<h3 className="font-semibold text-stone-800 mb-2">📬 Kontakt-Informationen</h3>
<div className="bg-gray-50 rounded-xl p-4 mb-6">
<h3 className="font-semibold text-gray-800 mb-2">📬 Kontakt-Informationen</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<span className="text-sm text-stone-500">Name:</span>
<p className="font-medium text-stone-900">{contactName}</p>
<span className="text-sm text-gray-600">Name:</span>
<p className="font-medium text-gray-900">{contactName}</p>
</div>
<div>
<span className="text-sm text-stone-500">E-Mail:</span>
<p className="font-medium text-stone-900">{contactEmail}</p>
<span className="text-sm text-gray-600">E-Mail:</span>
<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">
<h3 className="font-semibold text-stone-800 mb-2">💬 Ursprüngliche Nachricht</h3>
<div className="bg-white rounded-lg p-3 border-l-4 border-blue-500 shadow-sm">
<p className="text-stone-700 text-sm whitespace-pre-wrap">{originalMessage}</p>
<div className="bg-blue-50 rounded-xl p-4 mb-6">
<h3 className="font-semibold text-blue-800 mb-2">💬 Ursprüngliche Nachricht</h3>
<div className="bg-white rounded-lg p-3 border-l-4 border-blue-500">
<p className="text-gray-700 text-sm whitespace-pre-wrap">{originalMessage}</p>
</div>
</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-stone-200 hover:border-stone-300 hover:shadow-sm'
? 'border-blue-500 bg-blue-50 shadow-lg scale-105'
: '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>
<div className="bg-stone-100 rounded-xl p-4 border border-stone-200">
<div className="bg-white rounded-lg shadow-sm border border-stone-200">
<div className="p-4 rounded-t-lg bg-stone-50 border-b border-stone-100">
<h4 className="font-bold text-lg text-stone-900">{templates[selectedTemplate].icon} {templates[selectedTemplate].name}</h4>
<p className="text-sm text-stone-500">An: {contactName}</p>
<h3 className="font-semibold text-gray-800 mb-4">👀 Vorschau</h3>
<div className="bg-gray-100 rounded-xl p-4">
<div className="bg-white rounded-lg shadow-sm border">
<div className={`bg-gradient-to-r ${templates[selectedTemplate].color} text-white p-4 rounded-t-lg`}>
<h4 className="font-bold text-lg">{templates[selectedTemplate].icon} {templates[selectedTemplate].name}</h4>
<p className="text-sm opacity-90">An: {contactName}</p>
</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 ? (
<>

733
components/GhostEditor.tsx Normal file
View File

@@ -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>
);
};

34
components/ImportExport.tsx
View File

@@ -99,23 +99,23 @@ export default function ImportExport() {
};
return (
<div className="bg-white border border-stone-200 rounded-xl p-6">
<h3 className="text-lg font-semibold text-stone-900 mb-4 flex items-center">
<FileText className="w-5 h-5 mr-2 text-stone-600" />
<div className="admin-glass-card rounded-lg p-6">
<h3 className="text-lg font-semibold text-white mb-4 flex items-center">
<FileText className="w-5 h-5 mr-2 text-blue-400" />
Import & Export
</h3>
<div className="space-y-4">
{/* Export Section */}
<div className="bg-stone-50 border border-stone-200 rounded-xl p-4">
<h4 className="font-medium text-stone-900 mb-2">Export Projekte</h4>
<p className="text-sm text-stone-600 mb-3">
<div className="admin-glass-light rounded-lg p-4">
<h4 className="font-medium text-white mb-2">Export Projekte</h4>
<p className="text-sm text-white/70 mb-3">
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'}
@@ -123,12 +123,12 @@ export default function ImportExport() {
</div>
{/* Import Section */}
<div className="bg-stone-50 border border-stone-200 rounded-xl p-4">
<h4 className="font-medium text-stone-900 mb-2">Import Projekte</h4>
<p className="text-sm text-stone-600 mb-3">
<div className="admin-glass-light rounded-lg p-4">
<h4 className="font-medium text-white mb-2">Import Projekte</h4>
<p className="text-sm text-white/70 mb-3">
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
@@ -143,16 +143,16 @@ export default function ImportExport() {
{/* Import Results */}
{importResult && (
<div className="bg-stone-50 border border-stone-200 rounded-xl p-4">
<h4 className="font-medium text-stone-900 mb-2 flex items-center">
<div className="admin-glass-light rounded-lg p-4">
<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 && (
@@ -160,7 +160,7 @@ export default function ImportExport() {
<p><strong>Fehler:</strong></p>
<ul className="list-disc list-inside ml-4">
{importResult.results.errors.map((error, index) => (
<li key={index} className="text-red-600">{error}</li>
<li key={index} className="text-red-400">{error}</li>
))}
</ul>
</div>

262
components/ModernAdminDashboard.tsx
View File

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

31
components/ObfuscatedEmail.tsx
View File

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

2
components/PerformanceDashboard.tsx
View File

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

87
components/ProjectManager.tsx
View File

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

750
components/ResizableGhostEditor.tsx Normal file
View File

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

63
components/Toast.tsx
View File

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

7
docker-compose.production.yml
View File

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

5
docker-compose.staging.yml
View File

@@ -13,7 +13,7 @@ services:
- NODE_ENV=staging
- DATABASE_URL=postgresql://portfolio_user:portfolio_staging_pass@postgres-staging:5432/portfolio_staging_db?schema=public
- REDIS_URL=redis://redis-staging:6379
- NEXT_PUBLIC_BASE_URL=${NEXT_PUBLIC_BASE_URL:-https://dev.dk0.dev}
- NEXT_PUBLIC_BASE_URL=${NEXT_PUBLIC_BASE_URL:-https://staging.dk0.dev}
- MY_EMAIL=${MY_EMAIL:-contact@dk0.dev}
- MY_INFO_EMAIL=${MY_INFO_EMAIL:-info@dk0.dev}
- MY_PASSWORD=${MY_PASSWORD}
@@ -26,7 +26,6 @@ services:
- portfolio_staging_data:/app/.next/cache
networks:
- portfolio_staging_net
- proxy
depends_on:
postgres-staging:
condition: service_healthy
@@ -113,5 +112,3 @@ volumes:
networks:
portfolio_staging_net:
driver: bridge
proxy:
external: true

314
docs/ADD_404_PROJECT_TO_PRODUCTION.md
View File

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

146
docs/N8N_CHAT_PRODUCTION_SETUP.md
View File

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

312
docs/N8N_STATUS_TEXT_GUIDE.md
View File

@@ -1,312 +0,0 @@
# 📝 n8n Status-Text ändern - Anleitung
## Übersicht
Der Status-Text (z.B. "dnd", "online", "offline", "away") wird von deinem n8n Workflow zurückgegeben und auf der Website angezeigt.
---
## 🔍 Wo kommt der Status-Text her?
Der Status-Text kommt von deinem n8n Webhook:
- **Webhook URL**: `/webhook/denshooter-71242/status`
- **Methode**: GET
- **Antwort-Format**: JSON mit `status: { text: string, color: string }`
---
## 🎯 Option 1: Status-Text direkt im n8n Workflow ändern
### Schritt 1: Workflow finden
1. Öffne dein n8n Dashboard
2. Suche nach dem Workflow, der den Status zurückgibt
3. Der Workflow sollte einen **Webhook** oder **HTTP Response** Node haben
### Schritt 2: Status-Text im Workflow anpassen
**Beispiel: Function Node oder Set Node**
```javascript
// In einem Function Node oder Set Node
return [{
json: {
status: {
text: "dnd", // ← Hier kannst du den Text ändern
color: "red" // ← Und hier die Farbe (green, yellow, red, gray)
},
music: { /* ... */ },
gaming: { /* ... */ },
coding: { /* ... */ }
}
}];
```
**Mögliche Status-Texte:**
- `"online"` → Wird als "Online" angezeigt
- `"offline"` → Wird als "Offline" angezeigt
- `"away"` → Wird als "Abwesend" angezeigt
- `"dnd"` → Wird als "Nicht stören" angezeigt
- `"custom"` → Wird als "Custom" angezeigt (oder beliebiger Text)
**Mögliche Farben:**
- `"green"` → Grüner Punkt
- `"yellow"` → Gelber Punkt
- `"red"` → Roter Punkt
- `"gray"` → Grauer Punkt
---
## 🎯 Option 2: Status über Datenbank setzen
Falls dein n8n Workflow die Datenbank liest, kannst du den Status dort setzen:
### Schritt 1: Datenbank-Update
```sql
-- Status über status_mood und status_message setzen
UPDATE activity_status
SET
status_mood = '🔴', -- Emoji für den Status
status_message = 'Do Not Disturb - In Deep Work'
WHERE id = 1;
```
### Schritt 2: n8n Workflow anpassen
Dein n8n Workflow muss dann die Datenbank-Daten in das richtige Format umwandeln:
```javascript
// Function Node: Convert Database to API Format
const dbData = items[0].json;
// Bestimme Status-Text basierend auf status_mood oder status_message
let statusText = "online";
let statusColor = "green";
if (dbData.status_message?.toLowerCase().includes("dnd") ||
dbData.status_message?.toLowerCase().includes("do not disturb")) {
statusText = "dnd";
statusColor = "red";
} else if (dbData.status_message?.toLowerCase().includes("away") ||
dbData.status_message?.toLowerCase().includes("abwesend")) {
statusText = "away";
statusColor = "yellow";
} else if (dbData.status_message?.toLowerCase().includes("offline")) {
statusText = "offline";
statusColor = "gray";
}
return [{
json: {
status: {
text: statusText,
color: statusColor
},
// ... rest of data
}
}];
```
---
## 🎯 Option 3: Status über Webhook setzen
Erstelle einen separaten n8n Workflow, um den Status manuell zu ändern:
### Workflow: "Set Status"
**Node 1: Webhook (POST)**
- Path: `set-status`
- Method: POST
**Node 2: Function Node**
```javascript
// Parse incoming data
const { statusText, statusColor } = items[0].json.body;
// Update database
return [{
json: {
query: "UPDATE activity_status SET status_message = $1 WHERE id = 1",
params: [statusText]
}
}];
```
**Node 3: PostgreSQL Node**
- Operation: Execute Query
- Query: `={{$json.query}}`
- Parameters: `={{$json.params}}`
**Node 4: Respond to Webhook**
```json
{
"success": true,
"message": "Status updated"
}
```
**Verwendung:**
```bash
curl -X POST https://your-n8n.com/webhook/set-status \
-H "Content-Type: application/json" \
-d '{"statusText": "dnd", "statusColor": "red"}'
```
---
## 🎨 Status-Text Übersetzungen in der Website
Die Website übersetzt folgende Status-Texte automatisch:
| n8n Status-Text | Website-Anzeige |
|----------------|-----------------|
| `"dnd"` | "Nicht stören" |
| `"online"` | "Online" |
| `"offline"` | "Offline" |
| `"away"` | "Abwesend" |
| Andere | Wird 1:1 angezeigt |
**Wo wird übersetzt?**
- Datei: `app/components/ActivityFeed.tsx`
- Zeile: ~1559-1567
Falls du einen neuen Status-Text hinzufügen willst, musst du die Übersetzung dort hinzufügen.
---
## 🔧 Praktische Beispiele
### Beispiel 1: "Focus Mode" Status
**In n8n Function Node:**
```javascript
return [{
json: {
status: {
text: "focus", // Neuer Status
color: "red"
},
// ... rest
}
}];
```
**In ActivityFeed.tsx hinzufügen:**
```typescript
{data.status.text === "dnd"
? "Nicht stören"
: data.status.text === "focus" // ← Neue Übersetzung
? "Fokus-Modus"
: data.status.text === "online"
? "Online"
// ... rest
}
```
### Beispiel 2: Status basierend auf Uhrzeit
**In n8n Function Node:**
```javascript
const hour = new Date().getHours();
let statusText = "online";
let statusColor = "green";
if (hour >= 22 || hour < 7) {
statusText = "dnd";
statusColor = "red";
} else if (hour >= 9 && hour < 17) {
statusText = "online";
statusColor = "green";
} else {
statusText = "away";
statusColor = "yellow";
}
return [{
json: {
status: { text: statusText, color: statusColor },
// ... rest
}
}];
```
### Beispiel 3: Status über Discord Bot
**Discord Command:**
```
!status dnd
!status online
!status away
```
**n8n Workflow:**
```javascript
// Parse Discord command
const command = items[0].json.content.split(' ')[1]; // "dnd", "online", etc.
return [{
json: {
status: {
text: command,
color: command === "dnd" ? "red" : command === "away" ? "yellow" : "green"
}
}
}];
```
---
## 🐛 Troubleshooting
### Problem: Status-Text ändert sich nicht
**Lösung:**
1. Prüfe, ob der n8n Workflow aktiviert ist
2. Prüfe die Webhook-URL in `app/api/n8n/status/route.ts`
3. Prüfe die Browser-Konsole auf Fehler
4. Prüfe n8n Execution Logs
### Problem: Status wird nicht angezeigt
**Lösung:**
1. Prüfe, ob das `status` Objekt im JSON vorhanden ist
2. Prüfe, ob `status.text` und `status.color` gesetzt sind
3. Prüfe die Browser-Konsole: `console.log("ActivityFeed data:", json)`
### Problem: Übersetzung funktioniert nicht
**Lösung:**
1. Prüfe, ob der Status-Text exakt übereinstimmt (case-sensitive)
2. Füge die Übersetzung in `ActivityFeed.tsx` hinzu
3. Baue die Website neu: `npm run build`
---
## 📚 Weitere Ressourcen
- [n8n Documentation](https://docs.n8n.io/)
- [N8N_INTEGRATION.md](./N8N_INTEGRATION.md) - Vollständige n8n Integration
- [DYNAMIC_ACTIVITY_MANAGEMENT.md](./DYNAMIC_ACTIVITY_MANAGEMENT.md) - Activity Management
---
## 💡 Quick Reference
**Status-Text ändern:**
1. Öffne n8n Dashboard
2. Finde den Status-Workflow
3. Ändere `status.text` im Function/Set Node
4. Aktiviere den Workflow
5. Warte 30 Sekunden (Cache-Intervall)
**Neue Übersetzung hinzufügen:**
1. Öffne `app/components/ActivityFeed.tsx`
2. Füge neue Bedingung hinzu (Zeile ~1559)
3. Baue neu: `npm run build`
4. Deploy
---
Happy automating! 🎉

283
docs/PRODUCTION_TROUBLESHOOTING.md
View File

@@ -1,283 +0,0 @@
# Production Troubleshooting Guide
## 502 Bad Gateway Errors
### Symptome
- Website zeigt 502 Bad Gateway
- Activity Feed zeigt nur "Loading"
- Chat funktioniert nicht
- API-Endpunkte geben 502 zurück
### Ursachen
1. **Container läuft nicht** - Der `portfolio-app` Container ist gestoppt oder crashed
2. **Proxy Netzwerk fehlt** - Das `proxy` Netzwerk existiert nicht oder Container ist nicht verbunden
3. **Nginx Proxy Manager Konfiguration** - Falsche Hostname/IP oder Port-Konfiguration
4. **Container Health Check fehlgeschlagen** - Container läuft, aber die Anwendung ist nicht bereit
### Lösungsschritte
#### 1. Diagnose ausführen
```bash
./scripts/diagnose-production.sh
```
Dieses Script prüft:
- Container-Status
- Netzwerk-Verbindungen
- Health Checks
- API-Endpunkte
- Environment Variables
#### 2. Automatischer Fix
```bash
./scripts/fix-production.sh
```
Dieses Script:
- Erstellt das `proxy` Netzwerk falls es fehlt
- Verbindet den Container mit dem `proxy` Netzwerk
- Startet den Container neu falls nötig
- Prüft Health Checks
#### 3. Manuelle Schritte
**Container-Status prüfen:**
```bash
docker ps -a | grep portfolio-app
docker logs portfolio-app --tail=50
```
**Proxy Netzwerk prüfen:**
```bash
docker network ls | grep proxy
docker inspect portfolio-app | grep -A 10 Networks
```
**Container neu starten:**
```bash
cd /workspace/denshooter/portfolio
docker compose -f docker-compose.production.yml restart portfolio
```
**Container mit Proxy-Netzwerk verbinden:**
```bash
# Falls Netzwerk fehlt
docker network create proxy
# Container neu erstellen
docker compose -f docker-compose.production.yml up -d --force-recreate
```
#### 4. Nginx Proxy Manager Konfiguration prüfen
1. **Gehe zu Nginx Proxy Manager** → Hosts → Proxy Hosts
2. **Öffne die Konfiguration für `dk0.dev`**
3. **Details Tab prüfen:**
- **Forward Hostname/IP:** Muss `portfolio-app` sein (NICHT `localhost` oder `127.0.0.1`)
- **Forward Port:** `3000`
- **Forward Scheme:** `http`
4. **Advanced Tab prüfen:**
```
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
```
#### 5. Container-Logs prüfen
```bash
# Alle Logs
docker logs portfolio-app
# Letzte 100 Zeilen
docker logs portfolio-app --tail=100
# Logs in Echtzeit
docker logs portfolio-app -f
```
## React Hydration Error #418
### Symptome
- Browser Console zeigt: `Error: Minified React error #418`
- Website funktioniert, aber es gibt Warnungen
- Unterschiede zwischen Server- und Client-Rendering
### Ursachen
1. **Client-only Komponenten werden auf dem Server gerendert**
2. **Unterschiedliche Daten zwischen Server und Client**
3. **Browser-spezifische APIs auf dem Server**
### Lösung
**ActivityFeed Komponente:**
- Die Komponente ist bereits als `"use client"` markiert
- Verwendet `ClientOnly` Wrapper für client-only Features
- Loading-State verhindert Hydration-Mismatches
**Wenn der Fehler weiterhin auftritt:**
1. Browser Cache leeren
2. Hard Refresh (Ctrl+Shift+R / Cmd+Shift+R)
3. Container-Logs auf React-Fehler prüfen
## Activity Feed zeigt nur "Loading"
### Ursachen
1. **n8n Webhook nicht erreichbar** - `N8N_WEBHOOK_URL` ist nicht gesetzt oder falsch
2. **API-Endpunkt gibt Fehler zurück** - `/api/n8n/status` funktioniert nicht
3. **CORS-Probleme** - n8n blockiert Requests
4. **Rate Limiting** - Zu viele Requests
### Lösung
**1. Environment Variables prüfen:**
```bash
docker exec portfolio-app printenv | grep N8N
```
**2. API-Endpunkt direkt testen:**
```bash
# Von außen
curl https://dk0.dev/api/n8n/status
# Von innen
docker exec portfolio-app curl http://localhost:3000/api/n8n/status
```
**3. n8n Webhook testen:**
```bash
# Ersetze WEBHOOK_URL mit deiner tatsächlichen URL
curl "https://n8n.dk0.dev/webhook/denshooter-71242/status"
```
**4. Gitea Variables prüfen:**
- Gehe zu Gitea → Repository → Settings → Variables
- Prüfe ob `N8N_WEBHOOK_URL`, `N8N_SECRET_TOKEN`, `N8N_API_KEY` gesetzt sind
- Stelle sicher, dass diese auch in `docker-compose.production.yml` verwendet werden
## Chat funktioniert nicht
### Ursachen
1. **n8n Webhook nicht erreichbar** - Gleiche Ursache wie Activity Feed
2. **API-Endpunkt gibt 502 zurück** - Container-Problem
3. **CORS-Probleme** - n8n blockiert Requests
4. **Timeout** - n8n antwortet zu langsam
### Lösung
**1. API-Endpunkt testen:**
```bash
# POST Request testen
curl -X POST https://dk0.dev/api/n8n/chat \
-H "Content-Type: application/json" \
-d '{"message": "Hello"}'
```
**2. Container-Logs prüfen:**
```bash
docker logs portfolio-app | grep -i "chat\|n8n"
```
**3. n8n Webhook direkt testen:**
```bash
curl -X POST "https://n8n.dk0.dev/webhook/chat" \
-H "Content-Type: application/json" \
-d '{"message": "Hello", "history": []}'
```
## Häufige Probleme und Lösungen
### Problem: Container startet, aber Health Check schlägt fehl
**Lösung:**
```bash
# Prüfe ob curl im Container verfügbar ist
docker exec portfolio-app which curl
# Teste Health Endpoint manuell
docker exec portfolio-app curl -f http://localhost:3000/api/health
```
### Problem: Container läuft, aber Port 3000 ist nicht erreichbar
**Lösung:**
```bash
# Prüfe Port-Mapping
docker port portfolio-app
# Teste von innen
docker exec portfolio-app curl http://localhost:3000/api/health
# Teste von außen (sollte funktionieren wenn Port gemappt ist)
curl http://localhost:3000/api/health
```
### Problem: Proxy Netzwerk existiert nicht
**Lösung:**
```bash
# Erstelle Proxy Netzwerk
docker network create proxy
# Verbinde Container
docker network connect proxy portfolio-app
# Oder Container neu erstellen
docker compose -f docker-compose.production.yml up -d --force-recreate
```
### Problem: Nginx Proxy Manager kann Container nicht erreichen
**Lösung:**
1. Stelle sicher, dass beide im `proxy` Netzwerk sind:
```bash
docker network inspect proxy
```
2. Prüfe Nginx Proxy Manager Container:
```bash
docker ps | grep nginx
docker inspect <nginx-container> | grep -A 10 Networks
```
3. Teste Verbindung von Nginx Container zu Portfolio Container:
```bash
docker exec <nginx-container> ping portfolio-app
```
## Nützliche Befehle
```bash
# Container-Status
docker ps -a | grep portfolio
# Container-Logs
docker logs portfolio-app --tail=100 -f
# Container-Netzwerke
docker inspect portfolio-app | grep -A 20 Networks
# Health Check Status
docker inspect portfolio-app --format='{{.State.Health.Status}}'
# Environment Variables
docker exec portfolio-app printenv
# Shell im Container öffnen
docker exec -it portfolio-app sh
# Container neu starten
docker compose -f docker-compose.production.yml restart portfolio
# Container neu erstellen
docker compose -f docker-compose.production.yml up -d --force-recreate
# Alle Container stoppen
docker compose -f docker-compose.production.yml down
# Container mit Logs starten
docker compose -f docker-compose.production.yml up
```
## Support
Wenn die Probleme weiterhin bestehen:
1. Führe `./scripts/diagnose-production.sh` aus
2. Speichere die Ausgabe
3. Prüfe Container-Logs: `docker logs portfolio-app --tail=100`
4. Prüfe Nginx Proxy Manager Logs
5. Erstelle ein Issue mit allen Informationen

65
lib/analytics.ts
View File

@@ -57,55 +57,34 @@ export const trackWebVitals = (metric: WebVitalsMetric) => {
// Track page load performance
export const trackPageLoad = () => {
if (typeof window === 'undefined' || typeof performance === 'undefined') return;
if (typeof window === 'undefined') return;
try {
const navigationEntries = performance.getEntriesByType('navigation');
const navigation = navigationEntries[0] as PerformanceNavigationTiming | undefined;
if (navigation && navigation.loadEventEnd && navigation.fetchStart) {
trackPerformance({
name: 'page-load',
value: navigation.loadEventEnd - navigation.fetchStart,
url: window.location.pathname,
timestamp: Date.now(),
userAgent: navigator.userAgent,
});
const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
if (navigation) {
trackPerformance({
name: 'page-load',
value: navigation.loadEventEnd - navigation.fetchStart,
url: window.location.pathname,
timestamp: Date.now(),
userAgent: navigator.userAgent,
});
// Track individual timing phases
trackEvent('page-timing', {
dns: navigation.domainLookupEnd && navigation.domainLookupStart
? Math.round(navigation.domainLookupEnd - navigation.domainLookupStart)
: 0,
tcp: navigation.connectEnd && navigation.connectStart
? Math.round(navigation.connectEnd - navigation.connectStart)
: 0,
request: navigation.responseStart && navigation.requestStart
? Math.round(navigation.responseStart - navigation.requestStart)
: 0,
response: navigation.responseEnd && navigation.responseStart
? Math.round(navigation.responseEnd - navigation.responseStart)
: 0,
dom: navigation.domContentLoadedEventEnd && navigation.responseEnd
? Math.round(navigation.domContentLoadedEventEnd - navigation.responseEnd)
: 0,
load: navigation.loadEventEnd && navigation.domContentLoadedEventEnd
? Math.round(navigation.loadEventEnd - navigation.domContentLoadedEventEnd)
: 0,
url: window.location.pathname,
});
}
} catch (error) {
// Silently fail - performance tracking is not critical
if (process.env.NODE_ENV === 'development') {
console.warn('Error tracking page load:', error);
}
// Track individual timing phases
trackEvent('page-timing', {
dns: Math.round(navigation.domainLookupEnd - navigation.domainLookupStart),
tcp: Math.round(navigation.connectEnd - navigation.connectStart),
request: Math.round(navigation.responseStart - navigation.requestStart),
response: Math.round(navigation.responseEnd - navigation.responseStart),
dom: Math.round(navigation.domContentLoadedEventEnd - navigation.responseEnd),
load: Math.round(navigation.loadEventEnd - navigation.domContentLoadedEventEnd),
url: window.location.pathname,
});
}
};
// Track API response times
export const trackApiCall = (endpoint: string, duration: number, status: number) => {
if (typeof window === 'undefined') return;
trackEvent('api-call', {
endpoint,
duration: Math.round(duration),
@@ -116,7 +95,6 @@ export const trackApiCall = (endpoint: string, duration: number, status: number)
// Track user interactions
export const trackInteraction = (action: string, element?: string) => {
if (typeof window === 'undefined') return;
trackEvent('interaction', {
action,
element,
@@ -126,7 +104,6 @@ export const trackInteraction = (action: string, element?: string) => {
// Track errors
export const trackError = (error: string, context?: string) => {
if (typeof window === 'undefined') return;
trackEvent('error', {
error,
context,

69
lib/email-obfuscate.ts
View File

@@ -1,69 +0,0 @@
/**
* Email and URL obfuscation utilities
* Prevents automated scraping while keeping functionality
*/
/**
* Obfuscates an email address by encoding it
* @param email - The email address to obfuscate
* @returns Obfuscated email string that can be decoded by JavaScript
*/
export function obfuscateEmail(email: string): string {
// Simple base64 encoding (can be decoded by bots, but adds a layer)
// For better protection, use a custom encoding scheme
return Buffer.from(email).toString('base64');
}
/**
* Deobfuscates an email address
* @param obfuscated - The obfuscated email string
* @returns Original email address
*/
export function deobfuscateEmail(obfuscated: string): string {
try {
return Buffer.from(obfuscated, 'base64').toString('utf-8');
} catch {
return obfuscated; // Return as-is if decoding fails
}
}
/**
* Creates an obfuscated mailto link component
* @param email - The email address
* @param displayText - Text to display (optional, defaults to email)
* @returns HTML string with obfuscated email
*/
export function createObfuscatedMailto(email: string, displayText?: string): string {
const obfuscated = obfuscateEmail(email);
const text = displayText || email;
// Use data attributes and JavaScript to decode
return `<a href="#" data-email="${obfuscated}" class="obfuscated-email" onclick="this.href='mailto:'+atob(this.dataset.email); return true;">${text}</a>`;
}
/**
* Obfuscates a URL by encoding parts of it
* @param url - The URL to obfuscate
* @returns Obfuscated URL string
*/
export function obfuscateUrl(url: string): string {
// Encode the URL
return Buffer.from(url).toString('base64');
}
/**
* Creates an obfuscated link
* @param url - The URL
* @param displayText - Text to display
* @returns HTML string with obfuscated URL
*/
export function createObfuscatedLink(url: string, displayText: string): string {
const obfuscated = obfuscateUrl(url);
return `<a href="#" data-url="${obfuscated}" class="obfuscated-link" onclick="this.href=atob(this.dataset.url); return true;">${displayText}</a>`;
}
/**
* React component helper for obfuscated emails
* Note: This is a TypeScript utility file. For React components, create a separate .tsx file
* or use the HTML string functions instead.
*/

58
lib/html-decode.ts
View File

@@ -1,58 +0,0 @@
/**
* Decode HTML entities in strings
* Converts &apos; &quot; &amp; &lt; &gt; etc. to their actual characters
*/
export function decodeHtmlEntities(text: string): string {
if (!text || typeof text !== 'string') {
return text;
}
// Create a temporary element to decode HTML entities
const textarea = document.createElement('textarea');
textarea.innerHTML = text;
return textarea.value;
}
/**
* Server-side HTML entity decoding (for Node.js/Next.js API routes)
*/
export function decodeHtmlEntitiesServer(text: string): string {
if (!text || typeof text !== 'string') {
return text;
}
// Map of common HTML entities (including all variations of apostrophe)
const entityMap: Record<string, string> = {
'&apos;': "'",
'&quot;': '"',
'&amp;': '&',
'&lt;': '<',
'&gt;': '>',
'&#39;': "'",
'&#x27;': "'",
'&#x2F;': '/',
'&#x60;': '`',
'&#x3D;': '=',
'&rsquo;': "'",
'&lsquo;': "'",
'&rdquo;': '"',
'&ldquo;': '"',
};
// First replace known entities
let decoded = text;
for (const [entity, replacement] of Object.entries(entityMap)) {
decoded = decoded.replace(new RegExp(entity, 'gi'), replacement);
}
// Then handle numeric entities (&#39; &#x27; etc.)
decoded = decoded.replace(/&#(\d+);/g, (match, num) => {
return String.fromCharCode(parseInt(num, 10));
});
decoded = decoded.replace(/&#x([0-9a-f]+);/gi, (match, hex) => {
return String.fromCharCode(parseInt(hex, 16));
});
return decoded;
}

305
lib/useWebVitals.ts
View File

@@ -13,192 +13,104 @@ interface Metric {
// Simple Web Vitals implementation (since we don't want to add external dependencies)
const getCLS = (onPerfEntry: (metric: Metric) => void) => {
if (typeof window === 'undefined' || typeof PerformanceObserver === 'undefined') return null;
try {
let clsValue = 0;
let sessionValue = 0;
let sessionEntries: PerformanceEntry[] = [];
let clsValue = 0;
let sessionValue = 0;
let sessionEntries: PerformanceEntry[] = [];
const observer = new PerformanceObserver((list) => {
try {
for (const entry of list.getEntries()) {
if (!(entry as PerformanceEntry & { hadRecentInput?: boolean }).hadRecentInput) {
const firstSessionEntry = sessionEntries[0];
const lastSessionEntry = sessionEntries[sessionEntries.length - 1];
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (!(entry as PerformanceEntry & { hadRecentInput?: boolean }).hadRecentInput) {
const firstSessionEntry = sessionEntries[0];
const lastSessionEntry = sessionEntries[sessionEntries.length - 1];
if (sessionValue && entry.startTime - lastSessionEntry.startTime < 1000 && entry.startTime - firstSessionEntry.startTime < 5000) {
sessionValue += (entry as PerformanceEntry & { value?: number }).value || 0;
sessionEntries.push(entry);
} else {
sessionValue = (entry as PerformanceEntry & { value?: number }).value || 0;
sessionEntries = [entry];
}
if (sessionValue > clsValue) {
clsValue = sessionValue;
onPerfEntry({
name: 'CLS',
value: clsValue,
delta: clsValue,
id: `cls-${Date.now()}`,
});
}
}
if (sessionValue && entry.startTime - lastSessionEntry.startTime < 1000 && entry.startTime - firstSessionEntry.startTime < 5000) {
sessionValue += (entry as PerformanceEntry & { value?: number }).value || 0;
sessionEntries.push(entry);
} else {
sessionValue = (entry as PerformanceEntry & { value?: number }).value || 0;
sessionEntries = [entry];
}
} catch (error) {
// Silently fail - CLS tracking is not critical
if (process.env.NODE_ENV === 'development') {
console.warn('CLS tracking error:', error);
if (sessionValue > clsValue) {
clsValue = sessionValue;
onPerfEntry({
name: 'CLS',
value: clsValue,
delta: clsValue,
id: `cls-${Date.now()}`,
});
}
}
});
observer.observe({ type: 'layout-shift', buffered: true });
return observer;
} catch (error) {
if (process.env.NODE_ENV === 'development') {
console.warn('CLS observer initialization failed:', error);
}
return null;
}
});
observer.observe({ type: 'layout-shift', buffered: true });
};
const getFID = (onPerfEntry: (metric: Metric) => void) => {
if (typeof window === 'undefined' || typeof PerformanceObserver === 'undefined') return null;
try {
const observer = new PerformanceObserver((list) => {
try {
for (const entry of list.getEntries()) {
const processingStart = (entry as PerformanceEntry & { processingStart?: number }).processingStart;
if (processingStart !== undefined) {
onPerfEntry({
name: 'FID',
value: processingStart - entry.startTime,
delta: processingStart - entry.startTime,
id: `fid-${Date.now()}`,
});
}
}
} catch (error) {
if (process.env.NODE_ENV === 'development') {
console.warn('FID tracking error:', error);
}
}
});
observer.observe({ type: 'first-input', buffered: true });
return observer;
} catch (error) {
if (process.env.NODE_ENV === 'development') {
console.warn('FID observer initialization failed:', error);
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
onPerfEntry({
name: 'FID',
value: (entry as PerformanceEntry & { processingStart?: number }).processingStart! - entry.startTime,
delta: (entry as PerformanceEntry & { processingStart?: number }).processingStart! - entry.startTime,
id: `fid-${Date.now()}`,
});
}
return null;
}
});
observer.observe({ type: 'first-input', buffered: true });
};
const getFCP = (onPerfEntry: (metric: Metric) => void) => {
if (typeof window === 'undefined' || typeof PerformanceObserver === 'undefined') return null;
try {
const observer = new PerformanceObserver((list) => {
try {
for (const entry of list.getEntries()) {
if (entry.name === 'first-contentful-paint') {
onPerfEntry({
name: 'FCP',
value: entry.startTime,
delta: entry.startTime,
id: `fcp-${Date.now()}`,
});
}
}
} catch (error) {
if (process.env.NODE_ENV === 'development') {
console.warn('FCP tracking error:', error);
}
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.name === 'first-contentful-paint') {
onPerfEntry({
name: 'FCP',
value: entry.startTime,
delta: entry.startTime,
id: `fcp-${Date.now()}`,
});
}
});
observer.observe({ type: 'paint', buffered: true });
return observer;
} catch (error) {
if (process.env.NODE_ENV === 'development') {
console.warn('FCP observer initialization failed:', error);
}
return null;
}
});
observer.observe({ type: 'paint', buffered: true });
};
const getLCP = (onPerfEntry: (metric: Metric) => void) => {
if (typeof window === 'undefined' || typeof PerformanceObserver === 'undefined') return null;
try {
const observer = new PerformanceObserver((list) => {
try {
const entries = list.getEntries();
const lastEntry = entries[entries.length - 1];
if (lastEntry) {
onPerfEntry({
name: 'LCP',
value: lastEntry.startTime,
delta: lastEntry.startTime,
id: `lcp-${Date.now()}`,
});
}
} catch (error) {
if (process.env.NODE_ENV === 'development') {
console.warn('LCP tracking error:', error);
}
}
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
const lastEntry = entries[entries.length - 1];
onPerfEntry({
name: 'LCP',
value: lastEntry.startTime,
delta: lastEntry.startTime,
id: `lcp-${Date.now()}`,
});
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });
return observer;
} catch (error) {
if (process.env.NODE_ENV === 'development') {
console.warn('LCP observer initialization failed:', error);
}
return null;
}
observer.observe({ type: 'largest-contentful-paint', buffered: true });
};
const getTTFB = (onPerfEntry: (metric: Metric) => void) => {
if (typeof window === 'undefined' || typeof PerformanceObserver === 'undefined') return null;
try {
const observer = new PerformanceObserver((list) => {
try {
for (const entry of list.getEntries()) {
if (entry.entryType === 'navigation') {
const navEntry = entry as PerformanceNavigationTiming;
if (navEntry.responseStart && navEntry.fetchStart) {
onPerfEntry({
name: 'TTFB',
value: navEntry.responseStart - navEntry.fetchStart,
delta: navEntry.responseStart - navEntry.fetchStart,
id: `ttfb-${Date.now()}`,
});
}
}
}
} catch (error) {
if (process.env.NODE_ENV === 'development') {
console.warn('TTFB tracking error:', error);
}
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.entryType === 'navigation') {
const navEntry = entry as PerformanceNavigationTiming;
onPerfEntry({
name: 'TTFB',
value: navEntry.responseStart - navEntry.fetchStart,
delta: navEntry.responseStart - navEntry.fetchStart,
id: `ttfb-${Date.now()}`,
});
}
});
observer.observe({ type: 'navigation', buffered: true });
return observer;
} catch (error) {
if (process.env.NODE_ENV === 'development') {
console.warn('TTFB observer initialization failed:', error);
}
return null;
}
});
observer.observe({ type: 'navigation', buffered: true });
};
// Custom hook for Web Vitals tracking
@@ -206,99 +118,46 @@ export const useWebVitals = () => {
useEffect(() => {
if (typeof window === 'undefined') return;
// Store web vitals for batch sending
const webVitals: Record<string, number> = {};
const path = window.location.pathname;
const projectMatch = path.match(/\/projects\/([^\/]+)/);
const projectId = projectMatch ? projectMatch[1] : null;
const observers: PerformanceObserver[] = [];
const sendWebVitals = async () => {
if (Object.keys(webVitals).length >= 3) { // Wait for at least FCP, LCP, CLS
try {
await fetch('/api/analytics/track', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
type: 'performance',
projectId: projectId,
page: path,
performance: {
fcp: webVitals.FCP || 0,
lcp: webVitals.LCP || 0,
cls: webVitals.CLS || 0,
fid: webVitals.FID || 0,
ttfb: webVitals.TTFB || 0,
loadTime: performance.now()
}
})
});
} catch (error) {
// Silently fail
if (process.env.NODE_ENV === 'development') {
console.error('Error sending web vitals:', error);
}
}
}
};
// Track Core Web Vitals
const clsObserver = getCLS((metric) => {
webVitals.CLS = metric.value;
getCLS((metric) => {
trackWebVitals({
...metric,
name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB',
url: window.location.pathname,
});
sendWebVitals();
});
if (clsObserver) observers.push(clsObserver);
const fidObserver = getFID((metric) => {
webVitals.FID = metric.value;
getFID((metric) => {
trackWebVitals({
...metric,
name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB',
url: window.location.pathname,
});
sendWebVitals();
});
if (fidObserver) observers.push(fidObserver);
const fcpObserver = getFCP((metric) => {
webVitals.FCP = metric.value;
getFCP((metric) => {
trackWebVitals({
...metric,
name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB',
url: window.location.pathname,
});
sendWebVitals();
});
if (fcpObserver) observers.push(fcpObserver);
const lcpObserver = getLCP((metric) => {
webVitals.LCP = metric.value;
getLCP((metric) => {
trackWebVitals({
...metric,
name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB',
url: window.location.pathname,
});
sendWebVitals();
});
if (lcpObserver) observers.push(lcpObserver);
const ttfbObserver = getTTFB((metric) => {
webVitals.TTFB = metric.value;
getTTFB((metric) => {
trackWebVitals({
...metric,
name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB',
url: window.location.pathname,
});
sendWebVitals();
});
if (ttfbObserver) observers.push(ttfbObserver);
// Track page load performance
const handleLoad = () => {
@@ -320,14 +179,6 @@ export const useWebVitals = () => {
}
return () => {
// Cleanup all observers
observers.forEach(observer => {
try {
observer.disconnect();
} catch {
// Silently fail
}
});
window.removeEventListener('load', handleLoad);
};
}, []);

10
middleware.ts
View File

@@ -5,18 +5,8 @@ export function middleware(request: NextRequest) {
// For /manage and /editor routes, the pages handle their own authentication
// No middleware redirect needed - let the pages show login forms
// Fix for 421 Misdirected Request with Nginx Proxy Manager
// Ensure proper host header handling for reverse proxy
const hostname = request.headers.get('host') || request.headers.get('x-forwarded-host') || '';
// Add security headers to all responses
const response = NextResponse.next();
// Set proper headers for Nginx Proxy Manager
if (hostname) {
response.headers.set('X-Forwarded-Host', hostname);
response.headers.set('X-Real-IP', request.headers.get('x-real-ip') || request.headers.get('x-forwarded-for') || '');
}
// Security headers (complementing next.config.ts headers)
response.headers.set("X-DNS-Prefetch-Control", "on");

31
next.config.ts
View File

@@ -29,14 +29,9 @@ const nextConfig: NextConfig = {
},
// Performance optimizations
// NOTE: `optimizePackageImports` can cause dev-time webpack runtime issues with some setups.
// Keep it enabled for production builds only.
experimental:
process.env.NODE_ENV === "production"
? {
optimizePackageImports: ["lucide-react", "framer-motion"],
}
: {},
experimental: {
optimizePackageImports: ["lucide-react", "framer-motion"],
},
// Image optimization
images: {
@@ -59,7 +54,7 @@ const nextConfig: NextConfig = {
},
// Webpack configuration
webpack: (config) => {
webpack: (config, { isServer, dev, webpack }) => {
// Fix for module resolution issues
config.resolve.fallback = {
...config.resolve.fallback,
@@ -68,6 +63,24 @@ const nextConfig: NextConfig = {
tls: false,
};
// Safari + React 19 + Next.js 15 compatibility fixes
if (dev && !isServer) {
// Disable module concatenation to prevent factory initialization issues
config.optimization = {
...config.optimization,
concatenateModules: false,
providedExports: false,
usedExports: false,
};
// Add DefinePlugin to ensure proper environment detection
config.plugins.push(
new webpack.DefinePlugin({
"process.env.__NEXT_DISABLE_REACT_STRICT_MODE": JSON.stringify(false),
}),
);
}
return config;
},

2085
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

17
package.json
View File

@@ -15,7 +15,7 @@
"pre-push": "./scripts/pre-push.sh",
"pre-push:full": "./scripts/pre-push-full.sh",
"pre-push:quick": "./scripts/pre-push-quick.sh",
"test:all": "npm run test && npm run test:e2e",
"test:all": "./scripts/test-all.sh",
"buildAnalyze": "cross-env ANALYZE=true next build",
"test": "jest",
"test:production": "NODE_ENV=production jest --config jest.config.production.ts",
@@ -25,6 +25,7 @@
"test:e2e:ui": "playwright test --ui",
"test:e2e:headed": "playwright test --headed",
"test:e2e:debug": "playwright test --debug",
"test:all": "npm run test && npm run test:e2e",
"test:critical": "playwright test e2e/critical-paths.spec.ts",
"test:hydration": "playwright test e2e/hydration.spec.ts",
"test:email": "playwright test e2e/email.spec.ts",
@@ -36,8 +37,8 @@
"db:reset": "prisma db push --force-reset",
"docker:build": "docker build -t portfolio-app .",
"docker:run": "docker run -p 3000:3000 portfolio-app",
"docker:compose": "docker compose -f docker-compose.production.yml up -d",
"docker:down": "docker compose -f docker-compose.production.yml down",
"docker:compose": "docker compose -f docker-compose.prod.yml up -d",
"docker:down": "docker compose -f docker-compose.prod.yml down",
"docker:dev": "docker compose -f docker-compose.dev.minimal.yml up -d",
"docker:dev:down": "docker compose -f docker-compose.dev.minimal.yml down",
"deploy": "./scripts/deploy.sh",
@@ -55,8 +56,8 @@
"@next/bundle-analyzer": "^15.1.7",
"@prisma/client": "^5.22.0",
"@vercel/og": "^0.6.5",
"clsx": "^2.1.1",
"dotenv": "^16.6.1",
"clsx": "^2.1.0",
"dotenv": "^16.4.7",
"framer-motion": "^12.24.10",
"gray-matter": "^4.0.3",
"lucide-react": "^0.542.0",
@@ -64,13 +65,13 @@
"node-cache": "^5.1.2",
"node-fetch": "^2.7.0",
"nodemailer": "^7.0.11",
"react": "^19.2.3",
"react-dom": "^19.2.3",
"react": "^19.0.1",
"react-dom": "^19.0.1",
"react-icons": "^5.5.0",
"react-markdown": "^10.1.0",
"react-responsive-masonry": "^2.7.1",
"redis": "^5.8.2",
"tailwind-merge": "^2.6.0"
"tailwind-merge": "^2.2.1"
},
"devDependencies": {
"@eslint/eslintrc": "^3",

129
prisma/seed.ts
View File

@@ -816,135 +816,6 @@ Built to demonstrate ML model deployment, API design for ML services, and scalab
shares: 29,
},
},
{
title: "Kernel Panic 404 - Interactive Terminal",
description:
"An interactive terminal-style 404 page with a fully functional command line, file system navigation, and Easter eggs inspired by Stranger Things, Mr. Robot, and Hitchhiker's Guide to the Galaxy.",
content: `# Kernel Panic 404 - Interactive Terminal
An immersive, retro-style 404 page that transforms the error experience into an interactive terminal adventure.
## 🎯 Purpose
Instead of showing a boring "Page Not Found" message, visitors are greeted with a fully functional terminal emulator where they can explore a virtual file system, run commands, and discover hidden Easter eggs.
## 🚀 Features
- **Interactive Terminal**: Full command-line interface with command history
- **Virtual File System**: Navigate directories, read files, and explore hidden content
- **CRT Monitor Effects**: Authentic retro computer terminal aesthetics
- **Easter Eggs**: Hidden references to pop culture (Stranger Things, Mr. Robot, Hitchhiker's Guide)
- **Command Autocomplete**: Tab completion for commands and file paths
- **Audio Synthesis**: Sound effects for key presses and special events
- **Visual Effects**: Glitch effects, color shifts, and screen distortions
## 🛠️ Technologies Used
- Next.js 15 (App Router)
- React (Client Components)
- TypeScript
- CSS Animations
- Web Audio API
- Framer Motion (for effects)
## 💻 Available Commands
### System Commands
- \`ls\`, \`cd\`, \`cat\`, \`grep\`, \`find\`, \`pwd\`
- \`whoami\`, \`uname\`, \`date\`, \`uptime\`
- \`clear\`, \`history\`, \`help\`
### Easter Egg Commands
- \`hawkins\` / \`011\` / \`eleven\` - Enter the Upside Down
- \`fsociety\` / \`elliot\` / \`bonsoir\` - Mr. Robot mode
- \`42\` / \`answer\` - Deep Thought calculation
- \`rm -rf /\` - Trigger kernel panic
## 🎨 Design Features
- **CRT Monitor Aesthetics**: Scanlines, phosphor glow, authentic terminal colors
- **Retro Typography**: Monospace font with terminal-style appearance
- **Interactive Elements**: Fully functional command line with history navigation
- **Visual Effects**: Screen glitches, color shifts, and distortion effects
## 🔍 Hidden Content
The file system contains hidden clues and references:
- \`/var/log/syslog\` - Contains hints about Easter eggs
- \`~/.bash_history\` - Shows previous commands
- \`~/readme.txt\` - Welcome message and hints
## 💡 What I Learned
- Building interactive terminal emulators in React
- Web Audio API for sound synthesis
- Complex state management for file systems
- CSS animations for retro effects
- Creating engaging error pages
## 🔮 Future Enhancements
- More Easter eggs and hidden commands
- Additional visual effects
- Sound theme variations
- More complex file system structures
- Network commands (ping, curl, etc.)
## 🎮 Try It Out
Visit any non-existent page on the site to see the terminal in action. Or click the "404" link in the footer!
**Try these commands:**
- \`ls -la\` - List all files including hidden ones
- \`cat readme.txt\` - Read the welcome message
- \`cd /var/log\` - Navigate to system logs
- \`hawkins\` - Enter the Upside Down mode
- \`42\` - Get the answer to everything`,
tags: ["Next.js", "React", "TypeScript", "Terminal", "404", "Interactive", "Easter Eggs"],
featured: true,
category: "Web Development",
date: "2025",
published: true,
difficulty: "INTERMEDIATE",
timeToComplete: "1-2 weeks",
technologies: ["Next.js", "React", "TypeScript", "CSS", "Web Audio API"],
challenges: [
"Terminal emulator implementation",
"File system state management",
"Command parsing and execution",
"Audio synthesis for effects",
"Retro visual effects with CSS"
],
lessonsLearned: [
"Building interactive UIs",
"Web Audio API usage",
"Complex state management",
"CSS animation techniques",
"Creating engaging error pages"
],
futureImprovements: [
"More Easter eggs",
"Additional visual effects",
"Sound theme variations",
"Network command simulation"
],
demoVideo: "",
screenshots: [],
colorScheme: "Retro terminal green on black",
accessibility: true,
performance: {
lighthouse: 0,
bundleSize: "0KB",
loadTime: "0s",
},
analytics: {
views: 0,
likes: 0,
shares: 0,
},
live: "/404",
github: "",
},
];
for (const project of projects) {

1700
public/404-terminal.html
View File

File diff suppressed because it is too large Load Diff

158
scripts/diagnose-production.sh
View File

@@ -1,158 +0,0 @@
#!/bin/bash
# Production diagnosis script
# Checks container status, network connectivity, and API endpoints
set -e
echo "🔍 Production Diagnosis Script"
echo "=============================="
echo ""
# Colors
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
NC='\033[0m' # No Color
# Check if docker is running
if ! docker info > /dev/null 2>&1; then
echo -e "${RED}❌ Docker is not running${NC}"
exit 1
fi
echo -e "${GREEN}✅ Docker is running${NC}"
echo ""
# Check container status
echo "📦 Container Status:"
echo "-------------------"
CONTAINER_ID=$(docker ps -q -f "name=portfolio-app")
if [ -z "$CONTAINER_ID" ]; then
echo -e "${RED}❌ portfolio-app container is not running${NC}"
echo ""
echo "Checking for stopped containers:"
docker ps -a -f "name=portfolio-app" --format "table {{.Names}}\t{{.Status}}\t{{.Ports}}"
exit 1
else
echo -e "${GREEN}✅ Container is running (ID: ${CONTAINER_ID})${NC}"
docker ps -f "name=portfolio-app" --format "table {{.Names}}\t{{.Status}}\t{{.Ports}}\t{{.Health}}"
fi
echo ""
# Check container health
echo "🏥 Container Health:"
echo "-------------------"
HEALTH=$(docker inspect portfolio-app --format='{{.State.Health.Status}}' 2>/dev/null || echo "no-healthcheck")
STATUS=$(docker inspect portfolio-app --format='{{.State.Status}}' 2>/dev/null || echo "unknown")
echo "Status: $STATUS"
echo "Health: $HEALTH"
echo ""
# Check networks
echo "🌐 Network Connectivity:"
echo "----------------------"
if docker network ls | grep -q "proxy"; then
echo -e "${GREEN}✅ 'proxy' network exists${NC}"
if docker inspect portfolio-app --format='{{range $net, $conf := .NetworkSettings.Networks}}{{$net}} {{end}}' | grep -q "proxy"; then
echo -e "${GREEN}✅ Container is connected to 'proxy' network${NC}"
else
echo -e "${YELLOW}⚠️ Container is NOT connected to 'proxy' network${NC}"
echo "Connected networks:"
docker inspect portfolio-app --format='{{range $net, $conf := .NetworkSettings.Networks}}{{$net}} {{end}}'
fi
else
echo -e "${RED}❌ 'proxy' network does not exist${NC}"
echo "Creating proxy network..."
docker network create proxy || echo "Failed to create network (may already exist)"
fi
echo ""
# Check port mapping
echo "🔌 Port Mapping:"
echo "---------------"
PORT_MAPPING=$(docker port portfolio-app 2>/dev/null | grep 3000 || echo "No port mapping found")
if [ -n "$PORT_MAPPING" ]; then
echo -e "${GREEN}✅ Port mapping: $PORT_MAPPING${NC}"
else
echo -e "${RED}❌ No port mapping found for port 3000${NC}"
fi
echo ""
# Test from inside container
echo "🧪 Testing from inside container:"
echo "-------------------------------"
if docker exec portfolio-app curl -f -s --max-time 5 http://localhost:3000/api/health > /dev/null 2>&1; then
echo -e "${GREEN}✅ Health endpoint responds from inside container${NC}"
docker exec portfolio-app curl -s http://localhost:3000/api/health | head -5
else
echo -e "${RED}❌ Health endpoint does not respond from inside container${NC}"
echo "Container logs (last 20 lines):"
docker logs portfolio-app --tail=20
fi
echo ""
# Test from host
echo "🧪 Testing from host:"
echo "-------------------"
if curl -f -s --max-time 5 http://localhost:3000/api/health > /dev/null 2>&1; then
echo -e "${GREEN}✅ Health endpoint responds from host${NC}"
curl -s http://localhost:3000/api/health | head -5
else
echo -e "${RED}❌ Health endpoint does not respond from host${NC}"
echo "This is normal if the container is only accessible via proxy network"
fi
echo ""
# Check environment variables
echo "🔐 Environment Variables:"
echo "------------------------"
echo "N8N_WEBHOOK_URL: $(docker exec portfolio-app printenv N8N_WEBHOOK_URL 2>/dev/null | grep -v '^$' || echo 'NOT SET')"
echo "N8N_SECRET_TOKEN: $(docker exec portfolio-app printenv N8N_SECRET_TOKEN 2>/dev/null | grep -v '^$' | sed 's/./*/g' || echo 'NOT SET')"
echo "N8N_API_KEY: $(docker exec portfolio-app printenv N8N_API_KEY 2>/dev/null | grep -v '^$' | sed 's/./*/g' || echo 'NOT SET')"
echo "NODE_ENV: $(docker exec portfolio-app printenv NODE_ENV 2>/dev/null || echo 'NOT SET')"
echo "NEXT_PUBLIC_BASE_URL: $(docker exec portfolio-app printenv NEXT_PUBLIC_BASE_URL 2>/dev/null || echo 'NOT SET')"
echo ""
# Check container logs for errors
echo "📋 Recent Container Logs (last 30 lines):"
echo "----------------------------------------"
docker logs portfolio-app --tail=30 2>&1 | tail -30
echo ""
# Check API endpoints
echo "🌐 Testing API Endpoints:"
echo "------------------------"
ENDPOINTS=("/api/health" "/api/n8n/status" "/api/n8n/chat")
for endpoint in "${ENDPOINTS[@]}"; do
echo -n "Testing $endpoint: "
if docker exec portfolio-app curl -f -s --max-time 5 "http://localhost:3000${endpoint}" > /dev/null 2>&1; then
echo -e "${GREEN}✅ OK${NC}"
else
echo -e "${RED}❌ FAILED${NC}"
fi
done
echo ""
# Summary
echo "📊 Summary:"
echo "---------"
if [ "$STATUS" == "running" ] && [ "$HEALTH" == "healthy" ]; then
echo -e "${GREEN}✅ Container appears to be healthy${NC}"
echo ""
echo "If you're still seeing 502 errors:"
echo "1. Check Nginx Proxy Manager configuration"
echo "2. Ensure the proxy host points to: portfolio-app:3000 (not localhost:3000)"
echo "3. Ensure the proxy network is correctly configured"
echo "4. Check Nginx Proxy Manager logs"
else
echo -e "${RED}❌ Container has issues${NC}"
echo ""
echo "Recommended actions:"
if [ "$STATUS" != "running" ]; then
echo "1. Restart the container: docker compose -f docker-compose.production.yml restart portfolio"
fi
if [ "$HEALTH" != "healthy" ]; then
echo "2. Check container logs: docker logs portfolio-app --tail=50"
echo "3. Check if the application is starting correctly"
fi
fi

118
scripts/fix-production.sh
View File

@@ -1,118 +0,0 @@
#!/bin/bash
# Quick fix script for production issues
# Ensures proxy network exists and container is properly connected
set -e
echo "🔧 Production Fix Script"
echo "======================="
echo ""
# Colors
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
NC='\033[0m' # No Color
COMPOSE_FILE="docker-compose.production.yml"
# Check if proxy network exists
echo "🌐 Checking proxy network..."
if docker network ls | grep -q "proxy"; then
echo -e "${GREEN}✅ 'proxy' network exists${NC}"
else
echo -e "${YELLOW}⚠️ 'proxy' network does not exist. Creating...${NC}"
docker network create proxy || {
echo -e "${RED}❌ Failed to create proxy network${NC}"
echo "This might be because Nginx Proxy Manager hasn't created it yet."
echo "Please ensure Nginx Proxy Manager is running and has created the 'proxy' network."
exit 1
}
echo -e "${GREEN}✅ 'proxy' network created${NC}"
fi
echo ""
# Check if container is running
echo "📦 Checking container status..."
CONTAINER_ID=$(docker ps -q -f "name=portfolio-app")
if [ -z "$CONTAINER_ID" ]; then
echo -e "${RED}❌ Container is not running${NC}"
echo "Starting container..."
docker compose -f $COMPOSE_FILE up -d
echo "Waiting for container to start..."
sleep 10
else
echo -e "${GREEN}✅ Container is running${NC}"
fi
echo ""
# Check if container is connected to proxy network
echo "🔗 Checking network connectivity..."
if docker inspect portfolio-app --format='{{range $net, $conf := .NetworkSettings.Networks}}{{$net}} {{end}}' | grep -q "proxy"; then
echo -e "${GREEN}✅ Container is connected to 'proxy' network${NC}"
else
echo -e "${YELLOW}⚠️ Container is NOT connected to 'proxy' network${NC}"
echo "Connecting container to proxy network..."
# Stop container
docker compose -f $COMPOSE_FILE stop portfolio
# Connect to proxy network
docker network connect proxy portfolio-app || {
echo -e "${RED}❌ Failed to connect container to proxy network${NC}"
echo "Trying to recreate container..."
docker compose -f $COMPOSE_FILE up -d --force-recreate
}
# Start container
docker compose -f $COMPOSE_FILE start portfolio
echo -e "${GREEN}✅ Container recreated and connected to proxy network${NC}"
fi
echo ""
# Wait for health check
echo "⏳ Waiting for container to be healthy..."
for i in {1..30}; do
HEALTH=$(docker inspect portfolio-app --format='{{.State.Health.Status}}' 2>/dev/null || echo "starting")
if [ "$HEALTH" == "healthy" ]; then
echo -e "${GREEN}✅ Container is healthy${NC}"
break
fi
if [ $i -eq 30 ]; then
echo -e "${YELLOW}⚠️ Container health check timeout${NC}"
echo "Container logs:"
docker logs portfolio-app --tail=30
else
echo "Waiting... ($i/30)"
sleep 2
fi
done
echo ""
# Test API endpoints
echo "🧪 Testing API endpoints..."
if docker exec portfolio-app curl -f -s --max-time 5 http://localhost:3000/api/health > /dev/null 2>&1; then
echo -e "${GREEN}✅ Health endpoint is working${NC}"
else
echo -e "${RED}❌ Health endpoint is not working${NC}"
echo "Container logs:"
docker logs portfolio-app --tail=50
exit 1
fi
echo ""
# Summary
echo "📊 Summary:"
echo "---------"
echo -e "${GREEN}✅ Production fix completed${NC}"
echo ""
echo "Next steps:"
echo "1. Verify Nginx Proxy Manager configuration:"
echo " - Forward Hostname/IP: portfolio-app"
echo " - Forward Port: 3000"
echo " - Ensure 'proxy' network is selected"
echo ""
echo "2. Test the website: https://dk0.dev"
echo ""
echo "3. If still having issues, run: ./scripts/diagnose-production.sh"

2
scripts/monitor.sh
View File

@@ -7,7 +7,7 @@ set -e
# Configuration
CONTAINER_NAME="portfolio-app"
COMPOSE_FILE="docker-compose.production.yml"
COMPOSE_FILE="docker-compose.prod.yml"
# Colors for output
RED='\033[0;31m'

121
scripts/rollback.sh
View File

@@ -1,121 +0,0 @@
#!/bin/bash
# Rollback Script for Portfolio Deployment
# Restores previous version of the application
set -e
# Colors
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
BLUE='\033[0;34m'
NC='\033[0m'
log() {
echo -e "${BLUE}[$(date +'%Y-%m-%d %H:%M:%S')]${NC} $1"
}
error() {
echo -e "${RED}[ERROR]${NC} $1" >&2
}
success() {
echo -e "${GREEN}[SUCCESS]${NC} $1"
}
warning() {
echo -e "${YELLOW}[WARNING]${NC} $1"
}
# Check if environment is specified
ENV=${1:-production}
COMPOSE_FILE="docker-compose.production.yml"
CONTAINER_NAME="portfolio-app"
IMAGE_TAG="production"
if [ "$ENV" == "dev" ] || [ "$ENV" == "staging" ]; then
COMPOSE_FILE="docker-compose.staging.yml"
CONTAINER_NAME="portfolio-app-staging"
IMAGE_TAG="staging"
HEALTH_PORT="3002"
else
HEALTH_PORT="3000"
fi
log "🔄 Starting rollback for $ENV environment..."
# Check if Docker is running
if ! docker info > /dev/null 2>&1; then
error "Docker is not running. Please start Docker and try again."
exit 1
fi
# List available image tags
log "📋 Available image versions:"
docker images portfolio-app --format "table {{.Tag}}\t{{.ID}}\t{{.CreatedAt}}" | head -10
# Get current container image
CURRENT_IMAGE=$(docker inspect $CONTAINER_NAME --format='{{.Config.Image}}' 2>/dev/null || echo "")
if [ ! -z "$CURRENT_IMAGE" ]; then
log "Current image: $CURRENT_IMAGE"
fi
# Find previous image tags
PREVIOUS_TAGS=$(docker images portfolio-app --format "{{.Tag}}" | grep -E "^(production|staging|latest|previous|backup)" | grep -v "^$IMAGE_TAG$" | head -5)
if [ -z "$PREVIOUS_TAGS" ]; then
error "No previous images found for rollback!"
log "Available images:"
docker images portfolio-app
exit 1
fi
# Use the first previous tag (most recent)
PREVIOUS_TAG=$(echo "$PREVIOUS_TAGS" | head -1)
log "Selected previous image: portfolio-app:$PREVIOUS_TAG"
# Confirm rollback
read -p "Do you want to rollback to portfolio-app:$PREVIOUS_TAG? (y/N): " -n 1 -r
echo
if [[ ! $REPLY =~ ^[Yy]$ ]]; then
log "Rollback cancelled."
exit 0
fi
# Tag the previous image as current
log "🔄 Tagging previous image as current..."
docker tag "portfolio-app:$PREVIOUS_TAG" "portfolio-app:$IMAGE_TAG" || {
error "Failed to tag previous image"
exit 1
}
# Stop current container
log "🛑 Stopping current container..."
docker compose -f $COMPOSE_FILE down || true
# Start with previous image
log "🚀 Starting previous version..."
docker compose -f $COMPOSE_FILE up -d
# Wait for health check
log "⏳ Waiting for health check..."
for i in {1..40}; do
if curl -f http://localhost:$HEALTH_PORT/api/health > /dev/null 2>&1; then
success "✅ Rollback successful! Application is healthy."
break
fi
echo -n "."
sleep 3
done
if ! curl -f http://localhost:$HEALTH_PORT/api/health > /dev/null 2>&1; then
error "❌ Health check failed after rollback!"
log "Container logs:"
docker compose -f $COMPOSE_FILE logs --tail=50
exit 1
fi
success "🎉 Rollback completed successfully!"
log "Application is available at: http://localhost:$HEALTH_PORT"
log "To rollback further, run: ./scripts/rollback.sh $ENV"