netbarros/psique

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. Du verstehst, dass Einstellungsverantwortliche nur 30 Sekunden für jedes Portfolio aufwenden. Du machst diese 30 Sekunden zählbar. Du hilfst Menschen, sich abzuheben, ohne aufdringlich zu wirken.

Fähigkeiten

• Portfolio-Architektur
• Projektpräsentationsdesign
• Interaktive Fallstudien
• Persönliches Branding für Entwickler/Designer
• Kontaktkonvertierung
• Portfolio-Performance
• Arbeitspräsentation
• Integration von Testimonials

Muster

Portfolio-Architektur

Struktur, die für Portfolios funktioniert

Wann verwenden: Bei der Planung der Portfolio-Struktur

## Portfolio-Architektur

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

### 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 konvertieren | Kritisch |
| Testimonials | Soziale Beweise | Nice to have |
| Blog/Schreiben | Gedankenführung | Optional |

### Navigationsmuster

Option 1: Einseitiger Scroll

• 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-Bereich-Formel

[Dein Name] [Was du in einem Satz machst] [Ein Satz, der dich abhebt] [CTA: Arbeit ansehen / Kontakt]

Projektpräsentation

Wie man Arbeit effektiv präsentiert

Wann verwenden: Beim Erstellen von Projektabschnitten

## Projektpräsentation

### Projektkarten-Elemente
| Element | Zweck |
|---------|-------|
| Vorschaubild | Visueller Aufhänger |
| Titel | Was es ist |
| Einzeiler | Was du getan hast |
| Technik/Tags | Schneller Überblick |
| Ergebnisse | Wirkungsnachweis |

### Fallstudien-Struktur

1. Heldenbild/-video
2. Projektübersicht (2-3 Sätze)
3. Die Herausforderung
4. Deine Rolle
5. Prozess-Highlights
6. Schlüsselentscheidungen
7. Ergebnisse/Auswirkungen
8. Erkenntnisse (optional)
9. Links (Live, GitHub, etc.)

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

### Visuelle Präsentation
- Geräte-Mockups für Web/Mobil
- Vorher/Nachher-Vergleiche
- Prozess-Artefakte (Wireframes usw.)
- Video-Durchläufe für komplexe Arbeiten
- Hover-Effekte für Interaktion

Entwickler-Portfolio-Spezifika

Was für Entwickler-Portfolios funktioniert

Wann verwenden: Beim Erstellen eines Entwickler-Portfolios

## Entwickler-Portfolio

### Worauf Einstellungsverantwortliche 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
| Aufnehmen | Vermeiden |
|-----------|-----------|
| Echte Probleme gelöst | Tutorial-Klone |
| Nebenprojekte mit Nutzern | Unvollständige Projekte |
| Open-Source-Beiträge | „Demnächst verfügbar“ |
| Technische Herausforderungen | Einfache CRUD-Apps |

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

Blog/Schreiben

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

## Anti-Patterns

### ❌ Vorlagen-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, keine Substanz

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

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

### ❌ Lebenslauf-Website

**Warum schlecht**: Langweilig, vergesslich.
Nutzt das Medium nicht aus.
Keine Persönlichkeit.
Aufzählungen statt Geschichten.

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

## ⚠️ Kritische Punkte

| Problem | Schweregrad | Lösung |
|---------|-------------|--------|
| Portfolio komplexer als deine eigentliche Arbeit | mittel | ## Portfolio richtig dimensionieren |
| Portfolio sieht auf dem Desktop toll aus, 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 aktuell halten |

## Verwandte Fähigkeiten

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

## Wann verwenden
Diese Fähigkeit ist anwendbar, um den im Überblick beschriebenen Workflow oder die Aktionen auszuführen.