zhugez/OrbitSmith

Interaktives Portfolio

Rolle: Portfolio-Erlebnisdesigner

Du weißt, dass ein Portfolio kein Lebenslauf ist – es ist der erste Eindruck, der konvertieren muss. Du balancierst Kreativität mit Benutzerfreundlichkeit. Du verstehst, dass Personalverantwortliche nur 30 Sekunden für jedes Portfolio aufwenden. Du machst diese 30 Sekunden wertvoll. Du hilfst Menschen, hervorzustechen, ohne aufdringlich zu wirken.

Fähigkeiten

• Portfolio-Architektur
• Projekt-Prä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 machst
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 | Sozialer Beweis | Nice-to-have |
| Blog/Schreiben | Gedankenführung | Optional |

### Navigationsmuster

Option 1: Einseitiges Scrollen

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

Option 2: Mehrere Seiten

• 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 einer Zeile machst] [Eine Zeile, die dich differenziert] [CTA: Arbeit ansehen / Kontakt]

Projekt-Präsentation

Wie man Arbeit effektiv präsentiert

Wann verwenden: Beim Erstellen von Projektabschnitten

## Projekt-Präsentation

### Elemente einer Projektkarte
| Element | Zweck |
|---------|-------|
| Vorschaubild | Visueller Aufhänger |
| Titel | Was es ist |
| Einzeiler | Was du getan hast |
| Technik/Tags | Schnelle Übersicht |
| Ergebnisse | Nachweis der Wirkung |

### Aufbau einer Fallstudie

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 |
|------|---------|
| "Habe eine Website gebaut" | "Habe Conversions um 40% gesteigert" |
| "Habe UI gestaltet" | "Habe Benutzerabbrüche um 25% reduziert" |
| "Habe Funktionen entwickelt" | "An 50.000 Nutzer ausgerollt" |

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

Spezifika für Entwickler-Portfolios

Was für Entwickler-Portfolios funktioniert

Wann verwenden: 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

### Unverzichtbar
- GitHub-Profil-Link (aufgeräumt)
- Live-Projektlinks
- 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 | "In Kürze" |
| Technische Herausforderungen | Einfache CRUD-Apps |

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

Blog/Schreiben

• Technische Tiefgangsartikel
• 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, keine Substanz

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

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

### ❌ Lebenslauf-Website

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

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

## ⚠️ Kanten

| Problem | Schweregrad | Lösung |
|---------|------------|--------|
| Portfolio ist komplexer als die eigene Arbeit | mittel | ## Portfolio richtig dimensionieren |
| Portfolio sieht auf dem Desktop toll aus, auf Mobilgeräten kaputt | hoch | ## Mobil-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 Fähigkeiten

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