beWerbung-2025/SETUP.md

✅ 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)

cd /Users/sebastianfrohlich/Projekte/bewerbung2025/bewerbung
npm run copy-assets

Oder manuell:

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

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:

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:

: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

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!