Personal Portfolio Site Builder
Hilf dem Benutzer, seinen eigenen Hintergrund und seine Arbeit in eine klare, wiederverwendbare Portfolio-Website zu verwandeln. Das Referenzsystem basiert auf einem echten Multi-Page-UI/UX-Portfolio, aber seine visuelle Identität ist optional: Bewahre den vom Benutzer gewählten Stil und verwende die Referenzstruktur nur dort, wo sie passt.
Workflow
- Ermittle das Publikum des Benutzers, seine Rolle, den Portfolio-Inhalt, den bevorzugten Stack (falls vorhanden) und ob er eine einseitige oder mehrseitige Seite wünscht. Empfehle Anfängern eine einfache Implementierung und erkläre Kompromisse in einfacher Sprache.
- Schlage eine Seitenkarte und eine Abschnittsreihenfolge vor, bevor du sie mit erfundenen Biografie- oder Projektfakten füllst. Frage nach fehlenden Inhalten, wenn sie die Geschichte ändern; verwende ansonsten deutlich gekennzeichnete Platzhalter.
- Baue das gemeinsame Gerüst und die wiederverwendbaren Abschnitte, die in references/page-patterns.md beschrieben werden. Mache Projekt-Case-Studies konfigurierbar: Benutzer können die relevanten Abschnitte einfügen, weglassen und neu anordnen.
- Biete benannte Bewegungsrezepte aus references/motion-catalog.md an. Beschreibe das sichtbare Verhalten in einfacher Sprache und implementiere dann das gewählte Rezept mit dem Stack des Benutzers. Füge nicht standardmäßig jede Bewegung hinzu; verwende Bewegung, um Hierarchie oder Interaktion zu verdeutlichen.
- Wende die visuelle Ausrichtung des Benutzers konsequent auf Typografie, Farbe, Abstände, Bilder und Komponenten an. Die Palette der Referenzseite ist nur ein mögliches Startthema; Themen können geändert werden, ohne die Seitenstruktur zu ändern.
- Gestalte Layouts responsiv und Interaktionen mit Tastatur und Touch nutzbar. Respektiere die Einstellung für reduzierte Bewegung, sorge für sichtbare Fokus-Zustände und halte wesentliche Inhalte verfügbar, wenn Animationen deaktiviert sind.
- Fasse die gelieferten Seiten/Komponenten und benannten Bewegungen zusammen und weise auf Inhalte hin, die der Benutzer noch bereitstellen muss.
Wiederverwendbare Design-Prinzipien
- Beginne mit der Rolle und dem Wert der Person, dann mache ausgewählte Arbeiten leicht auffindbar.
- Halte die Startseite als prägnante Einführung und Einstiegspunkt; jede Case-Study trägt ihre eigene Erzählung und Nachweise.
- Verwende ein konsistentes Muster für Abschnittsüberschriften, Abstandsskala, Navigation, Fußzeile und ein Projektkarten-System.
- Erlaube Projektseiten, eine flexible Sequenz zu teilen, anstatt jedes Projekt in identische Inhalte zu zwingen.
- Halte Bewegung subtil, zweckmäßig und konsistent. Ein Bewegungsname beschreibt ein wiederverwendbares Verhalten, keine erforderliche Bibliothek oder exakte Implementierung.
- Kopiere keine Referenztexte, persönlichen Daten, Projektbehauptungen, Bilder oder Quellcode in die neue Seite des Benutzers. Frage nach eigenem Material oder verwende gekennzeichnete Platzhalter.
Referenzen
- Lies references/page-patterns.md bei der Planung der Seitenkarte oder beim Erstellen von Seiten- und Case-Study-Abschnitten.
- Lies references/motion-catalog.md, wenn der Benutzer darum bittet, Bewegung auszuwählen, zu benennen oder zu implementieren.