beWerbung 2025 - Moderne Bewerbungswebseite

Eine moderne, responsive Bewerbungswebseite mit Next.js 15, React 19, Tailwind CSS 4 und TypeScript.

🚀 Features

• ✅ Modern Stack: Next.js 15 App Router, React 19, Tailwind CSS 4
• ✅ TypeScript: Vollständig typisiert
• ✅ Responsive: Mobile-first Design
• ✅ Performance: Optimiert mit Next.js Image, lazy loading
• ✅ Animationen: Smooth scroll, fade-in effects, hover animations
• ✅ SEO: Meta-Tags, strukturierte Daten
• ✅ Accessibility: ARIA-Labels, semantisches HTML

📦 Installation

# Dependencies installieren
npm install

# Development Server starten
npm run dev

# Production Build erstellen
npm run build

# Production Server starten
npm start

Die Webseite läuft dann auf http://localhost:3000

🏗️ Projektstruktur

bewerbung/
├── app/
│   ├── layout.tsx       # Root Layout mit Metadata
│   ├── page.tsx         # Hauptseite (Home)
│   └── globals.css      # Globale Styles
├── components/
│   ├── Hero.tsx         # Hero-Section mit Parallax
│   ├── Intro.tsx        # Über mich Sektion
│   ├── Experience.tsx   # Berufserfahrung
│   ├── Skills.tsx       # Kompetenzen mit Progress Bars
│   ├── Portfolio.tsx    # Portfolio mit Modal
│   ├── Contact.tsx      # Kontakt-Section
│   ├── DownloadSection.tsx  # Download-Komponente
│   └── Footer.tsx       # Footer
├── public/
│   ├── downloads/       # PDFs (Lebenslauf, Zeugnisse, etc.)
│   └── img/            # Bilder
└── package.json

🎨 Anpassungen

Farben ändern

In app/globals.css:

:root {
  --color-primary: #3dc9b3;        /* Hauptfarbe */
  --color-primary-dark: #309383;   /* Dunklere Variante */
  --color-text: #353535;           /* Text */
  --color-text-light: #8c9398;     /* Heller Text */
  --color-bg-light: #f3f5f8;       /* Heller Hintergrund */
  --color-bg-dark: #242830;        /* Dunkler Hintergrund */
}

Inhalte anpassen

Persönliche Daten

• components/Intro.tsx - Über mich Text & Alter
• components/Contact.tsx - Kontaktdaten
• app/layout.tsx - Meta-Tags

Skills

• components/Skills.tsx - Array skillsData anpassen

Berufserfahrung

• components/Experience.tsx - Array jobs anpassen

Portfolio

• components/Portfolio.tsx - Array projects anpassen

Bilder hinzufügen

1. Bilder in public/img/ ablegen
2. PDFs in public/downloads/ ablegen
3. Pfade in Komponenten anpassen

🎯 Nächste Schritte

Sofort einsatzbereit:

• Persönliche Daten anpassen
• PDFs hochladen (Lebenslauf, Zeugnisse, Referenzen)
• Bilder aus altem Projekt kopieren
• Favicon anpassen

Erweiterungen:

• Kontaktformular mit Validierung
• Blog-Sektion
• Dark Mode Toggle
• Mehrsprachigkeit (i18n)
• Analytics (Google Analytics / Plausible)
• Cookie Consent Banner

🖼️ Bilder aus altem Projekt kopieren

# Im Terminal ausführen:
cp -r /Users/sebastianfrohlich/Projekte/bewerbung/img/* /Users/sebastianfrohlich/Projekte/bewerbung2025/bewerbung/public/img/
cp -r /Users/sebastianfrohlich/Projekte/bewerbung/downloads/* /Users/sebastianfrohlich/Projekte/bewerbung2025/bewerbung/public/downloads/

📱 Deployment

Vercel (Empfohlen)

# Vercel CLI installieren
npm i -g vercel

# Deployen
vercel

Netlify

1. GitHub Repository erstellen
2. Mit Netlify verbinden
3. Build Command: npm run build
4. Publish Directory: .next

🔧 Technologien

• Framework: Next.js 15.5.4
• UI Library: React 19.1.0
• Styling: Tailwind CSS 4
• Language: TypeScript 5
• Font: Varela Round (Google Fonts)

📄 Migration vom alten Projekt

Was wurde modernisiert:

✅ jQuery → React Hooks ✅ Bootstrap → Tailwind CSS ✅ Google Charts → Custom Progress Bars ✅ FlexSlider → React State Management ✅ Magnific Popup → Custom Modal ✅ Veraltete Dependencies → Moderne Stack

Was bleibt gleich:

• Design-Sprache und Farbschema
• Inhaltsstruktur
• Bewerbungskonzept "beWerbung"

🐛 Troubleshooting

Port bereits belegt

# Port ändern
npm run dev -- -p 3001

Build Fehler

# Cache löschen
rm -rf .next
npm run build

TypeScript Fehler

# Types neu generieren
npm run build

📧 Kontakt

Sebastian Fröhlich

• Email: froehlich.sebastian@gmail.com
• Tel: +49 9874 322 429

---

Made with ❤️ and ☕ in Neuendettelsau