11jon.com - Portfolio Website

Professionelle statische Portfolio-Website für Jon-Alexander Hanke gebaut mit React + Vite und optimiert für Nginx.

🎯 Features

✅ Vollständig responsiv - Mobile, Tablet, Desktop
✅ SEO optimiert - Meta-Tags, Open Graph, strukturierte Daten
✅ Performance optimiert - Gzip, HTTP/2, Caching-Strategien
✅ Sicher - SSL/TLS, Security Headers, Input Validation
✅ Zugänglich - WCAG konform, Keyboard Navigation
✅ Moderne Stack - React 18, Vite, TypeScript-ready

🚀 Quick Start

1. Installation

npm install

2. Lokale Entwicklung

npm run dev
# Öffnet http://localhost:5173

3. Production Build

npm run build
# Erstellt dist/ mit optimierten statischen Dateien

4. Preview des Production-Builds

npm run preview
# Öffnet http://localhost:4173

📁 Projektstruktur

.
├── src/
│   ├── main.jsx           # React entry point
│   ├── App.jsx            # Haupt-Komponente mit allen Sections
│   ├── App.css            # Hauptstyles
│   ├── index.css          # Globale Styles
│   └── components/        # Wiederverwendbare Komponenten
├── public/
│   ├── index.html         # HTML Template
│   ├── favicon.ico        # Website Icon
│   └── downloads/         # Zertifikat-Downloads
├── dist/                  # Build Output (nach npm run build)
├── package.json
├── vite.config.js
└── README.md

🎨 Sektionen

1. Navigation

• Sticky Header mit Logo
• Mobile Menu (Hamburger)
• CV Download Button
• Scroll-zu-Sektion Links

2. Hero Section

• Professionelle Einführung
• Statistiken (Projekte, Erfahrung)
• Call-to-Action Buttons
• Avatar/Profilfoto

3. Projekte

• 8+ Projekte mit Details
• Projekt-Status Badges
• Technologie-Tags
• Highlights pro Projekt

4. Skills

• Kategorisierte Fähigkeiten
• Frontend, Backend, Datenbanken, Mobile, KI/ML
• Badge-basierte Anzeige

5. Kontakt

• Kontaktinformationen (E-Mail, Telefon, Ort)
• Kontaktformular (Backend-Integration erforderlich)
• Social Links

6. Downloads

• CV/Lebenslauf PDF
• Zertifikate
• Direktes Herunterladen

7. Footer

• Impressum, Datenschutz
• Social Media Links
• Copyright

🛠️ Entwicklung

ESLint prüfen (falls konfiguriert)

npm run lint

TypeScript hinzufügen

Das Projekt ist TypeScript-ready. Zum Aktivieren:

npm install --save-dev typescript
# Rename .jsx → .tsx

Environment Variables

# .env (nicht committen!)
VITE_API_URL=https://api.example.com

In Code nutzen:

const apiUrl = import.meta.env.VITE_API_URL;

📦 Build Output

Nach npm run build enthält dist/:

dist/
├── index.html              # Minimiertes HTML
├── assets/
│   ├── index-abc123.js     # Minimiertes JS mit Content Hash
│   └── index-def456.css    # Minimiertes CSS mit Content Hash
└── downloads/              # Zertifikate (falls kopiert)

🚀 Deployment auf Nginx

Siehe DEPLOYMENT-GUIDE.md für detaillierte Anweisungen.

Schnelleinstieg:

# Build
npm run build

# Zu Nginx kopieren
sudo cp -r dist/* /var/www/11jon.com/html/

# Permissions
sudo chown -R www-data:www-data /var/www/11jon.com/html
sudo chmod -R 755 /var/www/11jon.com/html

# Test & Reload
sudo nginx -t
sudo systemctl reload nginx

📊 Performance Metriken

• Bundle Size: ~200KB (gzip)
• Lighthouse Score: 95+ (Performance, Accessibility, Best Practices, SEO)
• Time to Interactive: <1s
• First Contentful Paint: <500ms

🔐 Sicherheit

✅ SSL/TLS (Let's Encrypt)
✅ Security Headers (HSTS, X-Frame-Options, CSP)
✅ Input Validation
✅ XSS Protection
✅ CSRF Token (falls Backend hinzugefügt)

♿ Accessibility

✅ WCAG 2.1 Level AA konform
✅ Semantic HTML
✅ ARIA Labels
✅ Keyboard Navigation
✅ Color Contrast
✅ Screen Reader Friendly

📱 Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+
• Mobile Safari 14+
• Chrome Mobile 90+

🔄 Automatisches Deployment (Optional)

# Create deploy script
chmod +x deploy.sh

# Add to crontab
0 2 * * * /path/to/deploy.sh

Siehe portfolio-build-deploy.sh für vollständiges Skript.

🐛 Troubleshooting

CSS/JS lädt nicht

• Cache leeren: Ctrl+Shift+R oder Cmd+Shift+R
• Nginx-Cache leeren: sudo systemctl reload nginx

404 auf Subpages

• Nginx SPA-Routing überprüfen: try_files $uri $uri/ /index.html;

PDF-Downloads funktionieren nicht

• Download-Verzeichnis existiert? ls /var/www/11jon.com/downloads/
• Permissions richtig? chmod 644 /var/www/11jon.com/downloads/*

Zertifikat-Fehler

• Zertifikat aktuell? sudo certbot certificates
• Erneuern: sudo certbot renew --force-renewal

📚 Dokumentation

• DEPLOYMENT-GUIDE.md - Detaillierte Deployment-Anleitung
• package.json - Alle Dependencies
• vite.config.js - Build-Konfiguration
• 11jon.com.nginx.conf - Nginx-Konfiguration

🤝 Zusammenarbeit

Zum Hinzufügen von Features:

1. Branch erstellen: git checkout -b feature/name
2. Changes committen: git commit -am 'Add feature'
3. Pushen: git push origin feature/name
4. Pull Request erstellen

📝 Lizenz

© 2025 Jon Hanke. Alle Rechte vorbehalten.

👤 Autor

Jon-Alexander Peere Andreas Philipp Hanke

• Email: jonboy051990@gmail.com
• Website: https://11jon.com
• Location: Torgelow, Deutschland

📞 Support

Bei technischen Fragen:

• GitHub Issues
• Email: jonboy051990@gmail.com
• Website Kontaktformular

---

Built with ❤️ using React + Vite
Last Updated: December 2025