cbazzaandClaude Sonnet 4.5
30a380cae8
- Add all Next.js application files - Include components, app structure, and public assets - Remove empty bewerbung placeholder folder - Update .gitignore for Next.js project 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
191 lines
5.0 KiB
Markdown
191 lines
5.0 KiB
Markdown
# ✅ beWerbung 2025 - Setup Checkliste
|
|
|
|
## 🎉 Was wurde erstellt:
|
|
|
|
### Komponenten
|
|
- ✅ Hero.tsx - Hero-Section mit Parallax-Effekt
|
|
- ✅ Intro.tsx - Über mich mit Intersection Observer
|
|
- ✅ Experience.tsx - Berufserfahrung mit Tab-Navigation
|
|
- ✅ Skills.tsx - Kompetenzen mit animierten Progress Bars
|
|
- ✅ Portfolio.tsx - Portfolio mit Filter und Modal
|
|
- ✅ Contact.tsx - Kontakt-Section mit Icons
|
|
- ✅ DownloadSection.tsx - Wiederverwendbare Download-Komponente
|
|
- ✅ Footer.tsx - Footer mit Call-to-Action
|
|
|
|
### Konfiguration
|
|
- ✅ layout.tsx - SEO & Metadata konfiguriert
|
|
- ✅ page.tsx - Alle Komponenten zusammengeführt
|
|
- ✅ globals.css - Custom Farben & Animationen
|
|
- ✅ README.md - Vollständige Dokumentation
|
|
- ✅ .env.example - Environment Variables Template
|
|
|
|
## 🚀 Nächste Schritte zum Start:
|
|
|
|
### 1. Assets kopieren (Bilder & PDFs)
|
|
```bash
|
|
cd /Users/sebastianfrohlich/Projekte/bewerbung2025/bewerbung
|
|
npm run copy-assets
|
|
```
|
|
|
|
**Oder manuell:**
|
|
```bash
|
|
mkdir -p public/img public/downloads
|
|
cp /Users/sebastianfrohlich/Projekte/bewerbung/img/*.jpg public/img/
|
|
cp /Users/sebastianfrohlich/Projekte/bewerbung/img/*.png public/img/
|
|
cp /Users/sebastianfrohlich/Projekte/bewerbung/downloads/*.pdf public/downloads/
|
|
```
|
|
|
|
### 2. Development Server starten
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Dann öffne: **http://localhost:3000**
|
|
|
|
### 3. Inhalte anpassen
|
|
|
|
#### 📝 Persönliche Daten
|
|
- [ ] `components/Intro.tsx` - Geburtsjahr in Zeile 26 anpassen
|
|
- [ ] `components/Contact.tsx` - Kontaktdaten prüfen
|
|
- [ ] `app/layout.tsx` - Meta-Beschreibung anpassen
|
|
|
|
#### 💼 Berufserfahrung
|
|
- [ ] `components/Experience.tsx` - Jobs-Array aktualisieren
|
|
- [ ] Aktuelle Tätigkeiten hinzufügen
|
|
- [ ] Zeiträume prüfen
|
|
|
|
#### 🎨 Skills
|
|
- [ ] `components/Skills.tsx` - skillsData Array anpassen
|
|
- [ ] Neue Technologien hinzufügen
|
|
- [ ] Level-Werte überprüfen (1-5)
|
|
|
|
#### 🖼️ Portfolio
|
|
- [ ] `components/Portfolio.tsx` - projects Array aktualisieren
|
|
- [ ] Neue Projekte hinzufügen
|
|
- [ ] Bilder-Pfade prüfen
|
|
|
|
### 4. Bilder optimieren
|
|
|
|
**Fehlende Bilder erstellen:**
|
|
- [ ] workspace-bg.jpg - Für Lebenslauf-Download-Section
|
|
- [ ] certificates-bg.jpg - Für Zeugnisse-Download-Section
|
|
- [ ] keyboard-bg.jpg - Für Referenzen-Download-Section
|
|
|
|
**Tipp:** Du kannst die vorhandenen Bilder aus dem alten Projekt umbenennen:
|
|
```bash
|
|
cp public/img/Workspace.png public/img/workspace-bg.jpg
|
|
cp public/img/Flyer-Mockup-3---Infinity---Zeugnisse.jpg public/img/certificates-bg.jpg
|
|
cp public/img/keyboard-bg.jpg public/img/keyboard-bg.jpg
|
|
```
|
|
|
|
### 5. PDFs prüfen
|
|
|
|
Stelle sicher, dass diese PDFs in `public/downloads/` liegen:
|
|
- [ ] Lebenslauf2020.pdf (oder aktualisiere zu Lebenslauf2025.pdf)
|
|
- [ ] Zeugnisse.pdf
|
|
- [ ] Referenzen.pdf
|
|
|
|
## 🎨 Farben anpassen (Optional)
|
|
|
|
In `app/globals.css`:
|
|
```css
|
|
:root {
|
|
--color-primary: #3dc9b3; /* Deine Wunschfarbe */
|
|
--color-primary-dark: #309383;
|
|
}
|
|
```
|
|
|
|
## 📱 Responsive Testen
|
|
|
|
Teste die Webseite auf verschiedenen Bildschirmgrößen:
|
|
- [ ] Desktop (1920px+)
|
|
- [ ] Laptop (1280px)
|
|
- [ ] Tablet (768px)
|
|
- [ ] Mobile (375px)
|
|
|
|
**Browser Dev Tools:** F12 → Responsive Design Mode
|
|
|
|
## 🚀 Deployment Vorbereiten
|
|
|
|
### Vercel (Empfohlen)
|
|
1. GitHub Repository erstellen
|
|
2. Code pushen
|
|
3. Mit Vercel verbinden
|
|
4. Automatisches Deployment
|
|
|
|
### Manuell
|
|
```bash
|
|
npm run build
|
|
npm start
|
|
```
|
|
|
|
## 🐛 Bekannte Todos
|
|
|
|
- [ ] Bilder durch Next.js Image-Komponente ersetzen (Performance)
|
|
- [ ] Loading States für Animationen
|
|
- [ ] Error Boundaries hinzufügen
|
|
- [ ] 404 Seite erstellen
|
|
- [ ] Sitemap generieren
|
|
- [ ] robots.txt erstellen
|
|
|
|
## 💡 Optionale Erweiterungen
|
|
|
|
- [ ] Kontaktformular mit Backend (z.B. Resend, SendGrid)
|
|
- [ ] Blog-Sektion für Artikel
|
|
- [ ] Dark Mode Toggle
|
|
- [ ] Animations-Library (Framer Motion)
|
|
- [ ] Analytics Integration
|
|
- [ ] Cookie Consent Banner
|
|
- [ ] Newsletter Integration
|
|
|
|
## 📊 Vergleich Alt vs. Neu
|
|
|
|
| Feature | Alt (2014) | Neu (2025) |
|
|
|---------|------------|------------|
|
|
| Framework | Vanilla HTML | Next.js 15 |
|
|
| CSS | Bootstrap 3 | Tailwind 4 |
|
|
| JavaScript | jQuery 1.11 | React 19 |
|
|
| Charts | Google Charts | Custom Components |
|
|
| Responsive | Ja | Ja (Mobile-First) |
|
|
| TypeScript | Nein | Ja |
|
|
| Performance | 🟡 Mittel | 🟢 Hoch |
|
|
| Wartbarkeit | 🟡 Mittel | 🟢 Hoch |
|
|
| Modern | 🔴 Veraltet | 🟢 Aktuell |
|
|
|
|
## ✨ Verbesserungen gegenüber alter Version
|
|
|
|
1. **Performance:**
|
|
- Server-Side Rendering mit Next.js
|
|
- Automatisches Code Splitting
|
|
- Image Optimization
|
|
- Moderne JavaScript Features
|
|
|
|
2. **Wartbarkeit:**
|
|
- Komponentenbasiert
|
|
- TypeScript für Type Safety
|
|
- Modularer Code
|
|
- Klare Struktur
|
|
|
|
3. **Sicherheit:**
|
|
- Keine veralteten Dependencies
|
|
- Keine jQuery Vulnerabilities
|
|
- Moderne Security Headers möglich
|
|
|
|
4. **UX:**
|
|
- Smooth Animations
|
|
- Bessere Mobile Experience
|
|
- Schnellere Ladezeiten
|
|
- Moderne UI Patterns
|
|
|
|
## 📞 Support
|
|
|
|
Bei Fragen oder Problemen:
|
|
1. README.md lesen
|
|
2. Console Errors prüfen (F12)
|
|
3. Google / Stack Overflow
|
|
4. Next.js Dokumentation: https://nextjs.org/docs
|
|
|
|
---
|
|
|
|
🎉 **Viel Erfolg mit deiner neuen Bewerbungswebseite!**
|