189 lines
4.5 KiB
Markdown
189 lines
4.5 KiB
Markdown
 
|
# 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
|