# W-Make Portfolio VPS Deployment Guide
**Generiert:** 2026-08-22  
**Commits:** c822a11, 7228fee, 4717404  
**Änderungen:** Hero-Copy, Demo-CTA, Benefit-Liste, SEO, Mobile-Optimierung

---

## ✅ Was wurde geändert

### Content:
- Hero H1: "Wenn Zahlen zwischen Schichten verschwinden..." (statt Fachsprache)
- Neue Demo-CTA Section nach Hero
- CTA-Box mit Benefit-Checklist (✓ 2 Tage Response, ✓ Ehrliche Einschätzung, ✓ Keine Folien)
- Aside erweitert: erklärt Versagensmodell

### Technical:
- `"type": "module"` in package.json (behebt Node.js Warnungen)
- `/api/health` endpoint hinzugefügt
- Twitter Card + OG Image Support
- Meta Descriptions aktualisiert
- Mobile Touch-Targets (44x44px WCAG 2.1 AA)
- Responsive Typography mit clamp()

---

## 🚀 Deployment auf free-warez.win VPS

### Option A: Automatisches Script (empfohlen)

```bash
# 1. SSH zum VPS
ssh eldov@free-warez.win  # oder 100.90.92.125

# 2. Script von lokal kopieren (von deinem Laptop aus)
scp /home/eldov-ryzen5/workspace/Coding/Web/w-make-com/deploy-vps.sh \
    eldov@free-warez.win:~/

# 3. Auf VPS ausführen
ssh eldov@free-warez.win
bash ~/deploy-vps.sh
```

### Option B: Manuelle Schritte

```bash
# 1. SSH zum VPS
ssh eldov@free-warez.win

# 2. Zum Projekt (Pfad anpassen falls anders)
cd /home/eldov/projects/w-make-portfolio  # oder /opt/ oder /srv/
# Falls unsicher: find / -name "w-make-portfolio" -type d 2>/dev/null

# 3. Git pull
git pull origin main

# Erwartete Commits:
# 4717404 feat: complete SEO and mobile Quick Wins
# 7228fee feat(homepage): improve hero copy and CTA conversion
# c822a11 chore: add ES module type, health endpoint, and security docs

# 4. Docker neu bauen
docker-compose build w-make-portfolio

# 5. Container neu starten
docker-compose up -d w-make-portfolio

# 6. Warten & Health-Check
sleep 5
curl http://localhost:3000/api/health

# Erwartete Antwort:
# {"status":"ok","timestamp":"2026-08-22T...","service":"w-make-portfolio"}

# 7. Logs prüfen
docker-compose logs --tail=30 w-make-portfolio

# Erwartete Zeile:
# ✓ Ready in XXXms
# ○ Local: http://0.0.0.0:3000
```

---

## ✅ Validierung nach Deployment

### 1. Homepage testen (https://w-make.com)

**Hero-Section:**
```
✓ H1: "Wenn Zahlen zwischen Schichten verschwinden, liegt es meist an der Software."
✓ Aside: "Die Software kennt die Reihenfolge nicht."
✓ Aside erwähnt: "stille Korrekturen und Zahlen, die morgens nicht mehr stimmen"
```

**Demo-CTA:**
```
✓ Nach Hero erscheint Section mit dunklerem Hintergrund
✓ Text: "W-Make Batch live erleben"
✓ Subtext: "Öffentliche Demo ohne Anmeldung · batch.w-make.com"
✓ Button: "Demo öffnen →" (führt zu https://batch.w-make.com)
```

**CTA-Box (am Ende):**
```
✓ Kicker: "30-Min. Erstanalyse · Kostenlos"
✓ H2: "Beschreiben Sie den Prozess, der heute bricht."
✓ Benefit-Liste mit ✓-Symbolen:
  ✓ Antwort innerhalb von 2 Werktagen
  ✓ Ehrliche Einschätzung, ob ich den Fall führen kann
  ✓ Keine Folien nötig, nur Verständnis des Ablaufs
✓ Button hat Hover-Effekt (copper-deep)
```

### 2. Meta-Tags validieren

**Open Graph:**
```bash
curl -sI https://w-make.com | grep -i "content-type\|x-"
```

**Tools:**
- https://www.opengraph.xyz/ → URL eingeben
- https://cards-dev.twitter.com/validator

**Erwartete OG-Werte:**
- Title: "Jan Wagner · Software für industrielle Prozesse"
- Description: "Software für industrielle Prozesse, in denen Rezept, Material..."
- Image: 1200x630 mit neuem Hero-Text

### 3. Mobile-Test

**Chrome DevTools:**
```
F12 → Toggle Device Toolbar (Ctrl+Shift+M)
Testen auf:
  - iPhone SE (375px)
  - iPad (768px)
  - Desktop (1920px)
```

**Prüfen:**
```
✓ Touch-Targets mind. 44x44px
✓ Hero-H1 skaliert mit clamp() (nicht abgeschnitten)
✓ Sections haben reduzierten Padding auf Mobile
✓ Alle Links/Buttons klickbar ohne Zoom
```

### 4. Health-Endpoint

```bash
curl https://w-make.com/api/health

# Erwartete Antwort:
{
  "status": "ok",
  "timestamp": "2026-08-22T...",
  "service": "w-make-portfolio"
}
```

---

## 🐛 Troubleshooting

### Container startet nicht
```bash
# Logs prüfen
docker-compose logs w-make-portfolio

# Häufige Probleme:
# - Port 3000 bereits belegt
# - .env.local fehlt
# - Node.js Build-Fehler
```

### Health-Endpoint 404
```bash
# Prüfen ob Route existiert
docker-compose exec w-make-portfolio ls -la /app/.next/server/app/api/health/

# Falls nicht: Build war nicht vollständig
docker-compose build --no-cache w-make-portfolio
docker-compose up -d w-make-portfolio
```

### Alte Version noch online
```bash
# Hard-Refresh im Browser (Ctrl+Shift+R)
# Oder Traefik-Cache clearen (wenn vorhanden)

# Prüfen welche Version läuft:
docker-compose exec w-make-portfolio cat /app/package.json | grep version
```

### Git Pull schlägt fehl
```bash
# Auth-Problem mit Gitea
git remote -v
# Falls SSH: git remote set-url origin https://gitea.free-warez.win/eldov/w-make-portfolio.git

# Untracked files im Weg
git status
git stash  # Lokale Änderungen sichern
git pull origin main
```

---

## 📊 Erwartete Metriken (nach 7 Tagen)

| Metrik | Erwartet |
|--------|----------|
| Bounce Rate | -15% bis -25% |
| Avg. Session Duration | +30s bis +60s |
| Demo-Klicks | 5-10% aller Besucher |
| Contact Form Views | +20% bis +40% |
| Mobile Bounce | -10% bis -15% |

---

## 📝 Notizen

- Code liegt auf Laptop: `/home/eldov-ryzen5/workspace/Coding/Web/w-make-com`
- Git-Remote: `https://gitea.free-warez.win/eldov/w-make-portfolio.git`
- VPS Tailscale: `100.90.92.125`
- Alle Tests bestanden (17/17)
- Build erfolgreich (Next.js 16.3.1)

**Commit-IDs für Rollback (falls nötig):**
```bash
git log --oneline -5
# 4717404 feat: complete SEO and mobile Quick Wins
# 7228fee feat(homepage): improve hero copy and CTA conversion
# c822a11 chore: add ES module type, health endpoint, and security docs
# 042ea88 feat(site): rewrite public copy around the batch chain  ← Fallback
```