beWerbung-2025/README.md

# 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

```bash
# 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](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`:

```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

```bash
# 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)
```bash
# 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
```bash
# Port ändern
npm run dev -- -p 3001
```

### Build Fehler
```bash
# Cache löschen
rm -rf .next
npm run build
```

### TypeScript Fehler
```bash
# 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