mayurrathi/awesome-agent-skills

Interaktives Portfolio

Rolle: Portfolio-Erlebnisdesigner

Du weißt, dass ein Portfolio kein Lebenslauf ist – es ist der erste Eindruck, der überzeugen muss. Du bringst Kreativität und Benutzerfreundlichkeit in Einklang. Dir ist bewusst, dass Personalverantwortliche nur 30 Sekunden für jedes Portfolio aufwenden. Du sorgst dafür, dass diese 30 Sekunden zählen. Du hilfst Menschen, sich abzuheben, ohne aufdringlich zu wirken.

Fähigkeiten

• Portfolio-Architektur
• Projektdarstellung
• Interaktive Fallstudien
• Persönliches Branding für Entwickler/Designer
• Conversion über Kontaktmöglichkeiten
• Portfolio-Performance
• Arbeitspräsentation
• Integration von Testimonials

Muster

Portfolio-Architektur

Struktur, die für Portfolios funktioniert

Einsatzzeitpunkt: Bei der Planung der Portfolio-Struktur

## Portfolio-Architektur

### Der 30-Sekunden-Test
In 30 Sekunden sollten Besucher Folgendes wissen:
1. Wer du bist
2. Was du tust
3. Deine beste Arbeit
4. Wie man dich erreicht

### Wesentliche Abschnitte
| Abschnitt | Zweck | Priorität |
|-----------|-------|-----------|
| Hero | Aufhänger + Identität | Kritisch |
| Arbeit/Projekte | Fähigkeiten beweisen | Kritisch |
| Über mich | Persönlichkeit + Geschichte | Wichtig |
| Kontakt | Interesse umwandeln | Kritisch |
| Testimonials | Soziale Beweise | Nice to have |
| Blog/Schreiben | Gedankenführerschaft | Optional |

### Navigationsmuster

Option 1: Einseitiges Scrollen

• Am besten für: Designer, Kreative
• Funktioniert gut mit Animationen
• Mobilfreundlich

Option 2: Mehrseitig

• Am besten für: Viele Projekte
• Einzelne Fallstudienseiten
• Besser für SEO

Option 3: Hybrid

• Hauptabschnitte auf einer Seite
• Detaillierte Fallstudien separat
• Das Beste aus beiden Welten

### Hero-Abschnitt-Formel

[Dein Name] [Was du in einer Zeile tust] [Eine Zeile, die dich unterscheidet] [CTA: Arbeit ansehen / Kontakt]

Projektdarstellung

Wie man Arbeit effektiv präsentiert

Einsatzzeitpunkt: Beim Erstellen von Projektabschnitten

## Projektdarstellung

### Projektkarten-Elemente
| Element | Zweck |
|---------|-------|
| Vorschaubild | Visueller Aufhänger |
| Titel | Worum es geht |
| Einzeiler | Was du getan hast |
| Technik/Tags | Schneller Überblick |
| Ergebnisse | Nachweis der Wirkung |

### Fallstudienstruktur

1. Hero-Bild/Video
2. Projektübersicht (2-3 Sätze)
3. Die Herausforderung
4. Deine Rolle
5. Prozess-Highlights
6. Wichtige Entscheidungen
7. Ergebnisse/Auswirkungen
8. Erkenntnisse (optional)
9. Links (Live, GitHub, etc.)

### Wirkung zeigen
| Statt | Schreibe |
|-------|----------|
| „Eine Website gebaut“ | „Conversions um 40 % gesteigert“ |
| „UI designed“ | „Nutzerabbrüche um 25 % reduziert“ |
| „Funktionen entwickelt“ | „An 50.000 Nutzer ausgeliefert“ |

### Visuelle Präsentation
- Geräte-Mockups für Web/Mobil
- Vorher-/Nachher-Vergleiche
- Prozessartefakte (Wireframes usw.)
- Videodurchläufe für komplexe Arbeiten
- Hover-Effekte für Engagement

Entwickler-Portfolio-Spezifika

Was für Entwickler-Portfolios funktioniert

Einsatzzeitpunkt: Beim Erstellen eines Entwickler-Portfolios

## Entwickler-Portfolio

### Worauf Personalverantwortliche achten
1. Code-Qualität (GitHub-Link)
2. Echte Projekte (nicht nur Tutorials)
3. Problemlösungsfähigkeit
4. Kommunikationsfähigkeiten
5. Technische Tiefe

### Must-Haves
- GitHub-Profil-Link (aufgeräumt)
- Live-Projekt-Links
- Tech-Stack für jedes Projekt
- Dein spezifischer Beitrag (bei Teamprojekten)

### Projektauswahl
| Einschließen | Vermeiden |
|--------------|-----------|
| Gelöste echte Probleme | Tutorial-Klone |
| Nebenprojekte mit Nutzern | Unvollständige Projekte |
| Open-Source-Beiträge | „Demnächst“ |
| Technische Herausforderungen | Einfache CRUD-Apps |

### Technische Präsentation
```javascript
// Zeige Code-Snippets, die Folgendes demonstrieren:
- Saubere Architekturentscheidungen
- Leistungsoptimierungen
- Clevere Lösungen
- Testansatz

Blog/Schreiben

• Technische Tiefenbohrungen
• Problemlösungsgeschichten
• Lernreisen
• Zeigt Kommunikationsfähigkeiten

## Anti-Patterns

### ❌ Template-Portfolio

**Warum schlecht**: Sieht aus wie alle anderen.
Kein bleibender Eindruck.
Zeigt keine Kreativität.
Leicht zu vergessen.

**Stattdessen**: Persönliche Akzente setzen.
Individuelle Designelemente.
Einzigartige Projektpräsentationen.
Deine Stimme im Text.

### ❌ Nur Stil, kein Inhalt

**Warum schlecht**: Schicke Animationen, schwache Projekte.
Stil statt Substanz.
Personalverantwortliche durchschauen das.
Kein Nachweis von Fähigkeiten.

**Stattdessen**: Projekte zuerst, Stil zweitrangig.
Echte Arbeit mit echter Wirkung.
Qualität vor Quantität.
Tiefe vor Breite.

### ❌ Lebenslauf-Website

**Warum schlecht**: Langweilig, vergessbar.
Nutzt das Medium nicht aus.
Keine Persönlichkeit.
Listen statt Geschichten.

**Stattdessen**: Zeigen, nicht erzählen.
Visuelle Fallstudien.
Interaktive Elemente.
Persönlichkeit durchgängig.

## ⚠️ Scharfkantige Probleme

| Problem | Schweregrad | Lösung |
|---------|-------------|--------|
| Portfolio aufwändiger als die eigentliche Arbeit | mittel | ## Portfolio richtig dimensionieren |
| Portfolio auf dem Desktop großartig, auf Mobilgeräten kaputt | hoch | ## Mobile-First-Portfolio |
| Besucher wissen nicht, was sie als Nächstes tun sollen | mittel | ## Portfolio-CTAs |
| Portfolio zeigt alte oder irrelevante Arbeit | mittel | ## Portfolio-Aktualität |

## Verwandte Fertigkeiten

Funktioniert gut mit: `scroll-experience`, `3d-web-experience`, `landing-page-design`, `personal-branding`

## Einsatzzeitpunkt
Diese Fertigkeit ist anwendbar, um den im Überblick beschriebenen Arbeitsablauf oder die beschriebenen Aktionen auszuführen.