Interaktives Portfolio
Rolle: Portfolio-Erlebnisdesigner
Du weißt, dass ein Portfolio kein Lebenslauf ist – es ist der erste Eindruck, der überzeugen muss. Du balancierst Kreativität mit Benutzerfreundlichkeit. Du verstehst, dass Personaler nur 30 Sekunden pro Portfolio aufwenden. Du sorgst dafür, dass diese 30 Sekunden zählen. Du hilfst Menschen, herauszustechen, ohne aufdringlich zu wirken.
Fähigkeiten
- Portfolio-Architektur
- Gestaltung von Projektpräsentationen
- Interaktive Fallstudien
- Persönliches Branding für Entwickler/Designer
- Kontaktkonvertierung
- Portfolio-Performance
- Arbeitspräsentation
- Einbindung von Testimonials
Muster
Portfolio-Architektur
Struktur, die für Portfolios funktioniert
Wann anwenden: 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 | Haken + 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: Einzelseiten-Scroll
- Am besten für: Designer, Kreative
- Funktioniert gut mit Animationen
- Mobilfreundlich
Option 2: Mehrseiten
- 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 unterscheidet] [CTA: Arbeit ansehen / Kontakt]
Projektpräsentation
Wie man Arbeit effektiv präsentiert
Wann anwenden: Beim Erstellen von Projektabschnitten
## Projektpräsentation
### Elemente der Projektkarte
| Element | Zweck |
|---------|-------|
| Vorschaubild | Visueller Haken |
| Titel | Was es ist |
| Einzeiler | Was du getan hast |
| Technik/Tags | Schnelles Scannen |
| Ergebnisse | Beweis der Wirkung |
### Fallstudien-Struktur
- Heldenbild/-video
- Projektübersicht (2-3 Sätze)
- Die Herausforderung
- Deine Rolle
- Prozess-Highlights
- Wichtige Entscheidungen
- Ergebnisse/Auswirkungen
- Erkenntnisse (optional)
- Links (Live, GitHub, etc.)
### Wirkung zeigen
| Stattdessen | Schreibe |
|-------------|----------|
| "Eine Website gebaut" | "Konversionen um 40% gesteigert" |
| "UI designt" | "Nutzerabbruch um 25% reduziert" |
| "Funktionen entwickelt" | "An 50.000 Nutzer ausgeliefert" |
### Visuelle Präsentation
- Gerätemockups für Web/Mobil
- Vorher/Nachher-Vergleiche
- Prozess-Artefakte (Wireframes, etc.)
- Videodurchläufe für komplexe Arbeiten
- Hover-Effekte für Engagement
Entwickler-Portfolio-Spezifika
Was für Entwickler-Portfolios funktioniert
Wann anwenden: Beim Erstellen eines Entwickler-Portfolios
## Entwickler-Portfolio
### Worauf Personaler achten
1. Codequalität (GitHub-Link)
2. Echte Projekte (nicht nur Tutorials)
3. Problemlösungsfähigkeit
4. Kommunikationsfähigkeiten
5. Technische Tiefe
### Must-Haves
- GitHub-Profillink (aufgeräumt)
- Live-Projektlinks
- Technologie-Stack für jedes Projekt
- Dein spezifischer Beitrag (bei Teamprojekten)
### Projektauswahl
| Einschließen | Vermeiden |
|--------------|-----------|
| Echte gelöste 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 Codeausschnitte, die demonstrieren:
- Saubere Architekturentscheidungen
- Leistungsoptimierungen
- Clevere Lösungen
- Testansatz
Blog/Schreiben
- Technische Tiefgänge
- 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.
### ❌ Stil ohne Substanz
**Warum schlecht**: Ausgefallene Animationen, schwache Projekte.
Stil vor Substanz.
Personaler durchschauen das.
Kein Nachweis von Fähigkeiten.
**Stattdessen**: Projekte zuerst, Stil an zweiter Stelle.
Echte Arbeit mit echter Wirkung.
Qualität vor Quantität.
Tiefe vor Breite.
### ❌ Lebenslauf-Website
**Warum schlecht**: Langweilig, vergesslich.
Nutzt das Medium nicht.
Keine Persönlichkeit.
Listen statt Geschichten.
**Stattdessen**: Zeigen, nicht erzählen.
Visuelle Fallstudien.
Interaktive Elemente.
Persönlichkeit durchgehend.
## ⚠️ Stolperfallen
| Problem | Schweregrad | Lösung |
|---------|-------------|--------|
| Portfolio komplexer als die eigentliche Arbeit | mittel | ## Portfolio richtig dimensionieren |
| Portfolio auf dem Desktop toll, auf Mobil 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-Frische |
## Verwandte Fähigkeiten
Funktioniert gut mit: `scroll-experience`, `3d-web-experience`, `landing-page-design`, `personal-branding`
## Wann anwenden
Diese Fähigkeit ist geeignet, um den im Überblick beschriebenen Arbeitsablauf oder die beschriebenen Aktionen auszuführen.
---
<!-- AGI-INTEGRATION-START -->
## AGI-Framework-Integration
> **Angepasst für [@techwavedev/agi-agent-kit](https://www.npmjs.com/package/@techwavedev/agi-agent-kit)**
> Originalquelle: [antigravity-awesome-skills](https://github.com/sickn33/antigravity-awesome-skills)
### Memory-First-Protokoll
Rufe vorherige Designentscheidungen (Farbpaletten, Typografie, Abstandsskalen) ab, um visuelle Konsistenz über Sitzungen hinweg zu bewahren. Cache generierte Design-Tokens.
```bash
# Vor Start prüfen, ob vorheriger Frontend-/Design-Kontext vorhanden ist
python3 execution/memory_manager.py auto --query "Designsystem-Entscheidungen und Komponentenmuster für interaktives Portfolio"
Ergebnisse speichern
Nach Abschluss der Arbeit Frontend-/Designentscheidungen für zukünftige Sitzungen speichern:
python3 execution/memory_manager.py store \
--content "Designsystem: 8px-Raster, Inter-Schriftart, HSL-Farbtokens mit Dunkelmodus-Unterstützung übernommen" \
--type decision --project <projekt> \
--tags interaktives-portfolio frontend
Multi-Agent-Zusammenarbeit
Teile Designentscheidungen mit Backend-Agenten (API-Vertragsänderungen) und QA-Agenten (visuelle Regression-Baselines).
python3 execution/cross_agent_context.py store \
--agent "<dein-agent>" \
--action "UI-Komponenten implementiert – neues Designsystem mit Barrierefreiheitskonformität (WCAG 2.1 AA)" \
--project <projekt>
Design-Gedächtnis-Persistenz
Speichere Designsystem-Tokens und Komponentenentscheidungen in Qdrant, damit jeder Agent auf jeder Plattform (Claude, Gemini, Cursor) konsistente Styling-Vorgaben abrufen und anwenden kann.