Communitygithub.com

HarryXC09/resume-portfolio-skill

Aus Benutzer-Lebenslauf, Personen-Aktionsvideos und Firmenlogos eine interaktive persönliche Portfolio-Webseite nachbauen. Geeignet für das Herunterladen dieses Projekts, um Materialien zu sammeln, den Lebenslauf zu analysieren, zweisprachige Texte zu erstellen und Vorlageninhalte zu ersetzen.

Was ist resume-portfolio-skill?

Diese Skill ermöglicht es, aus einem bestehenden React-Projekt (mit GSAP-Scroll-Animationen, Kartenlayout und responsivem Design) eine maßgeschneiderte persönliche Portfolio-Webseite zu erstellen. Sie führt den Agenten durch einen strukturierten Workflow: Zuerst werden die erforderlichen Materialien (Lebenslauf, Personen-Aktionsvideos, Fotos, Logos, optionale 3D-Modelle) gesammelt, dann der Lebenslauf als Faktenquelle analysiert, die Inhalte in eine vorgegebene Word-Tabelle übertragen und schließlich die Vorlage mit den individuellen Daten befüllt. Die Skill unterstützt mehrere Plattformen (z. B. Agenten, die DOCX- und Python-Skripte ausführen können) und erfordert keine spezifische Cloud-API oder API-Schlüssel. Besonders nützlich für Entwickler oder Agenten, die schnell eine interaktive, animierte Webseite aus Benutzerdaten generieren möchten, ohne tief in das Frontend-Framework einsteigen zu müssen. Der Workflow enthält Qualitätssicherungsschritte (Browser-Vorschau, lokaler Build, Deploy nach Bestätigung) und adressiert typische Fallstricke wie unvollständige Materialien, Green-Screen-Ränder oder lizenzrechtliche Bedenken bei Logos.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add HarryXC09/resume-portfolio-skill

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Lebenslauf Portfolio Nachbau

Mit dem Verzeichnis, das diesen Skill enthält, als Projektstammverzeichnis bleiben React, GSAP-Scroll-Animationen, Kartenlayout und responsives Design erhalten. Wenn der Benutzer ein persönliches Portfolio anfordert, überprüfe zuerst die Materialien und erstelle dann die gesamte Webseite basierend auf dem echten Lebenslauf. Dieses Repository enthält ausführbaren Quellcode und benötigt keinen spezifischen Agenten, Cloud-Dienst oder API-Schlüssel.

Erste Übernahme

  1. Lies references/materials.md und führe node scripts/intake.mjs aus. Das Skript erstellt ein festes Materialverzeichnis und gibt fehlende Elemente aus.
  2. Erkläre dem Benutzer in seiner Sprache auf einmal: Lebenslauf in inputs/resume/; Aktionsvideos in inputs/videos/; Fotos in inputs/photos/; Logos von Schule/Arbeitgeber in inputs/logos/; optionale Modelle in inputs/models/. Gib die Kameratipps aus dem Material-Leitfaden und weise darauf hin, dass der Green-Screen gleichmäßig ausgeleuchtet sein sollte und die Person keine grüne Kleidung tragen darf.
  3. Überprüfe die eingereichten Materialien. Wenn ein Lebenslauf fehlt, warte, denn er darf nicht frei erfunden werden. Wenn Teile des Videos fehlen, analysiere zuerst den Lebenslauf und erstelle die Texte; teile dem Benutzer mit, welche Bereiche vorläufig mit Fotos/wiederholten Aufnahmen gefüllt werden und welche Materialien noch ergänzt werden müssen. Leere Verzeichnisse und Platzhalterbilder zählen nicht als Benutzermaterialien.
  4. Lies references/adaptation.md und führe Faktenextraktion, Textzuordnung, Materialbearbeitung, Komponentenaustausch und Browser-Abnahme durch. Nachdem der Benutzer sagt, dass die Materialien bereit sind, führe intake erneut aus, und frage nicht wiederholt, ob fortgefahren werden soll.
  5. Verwende template/resume-portfolio-content-template-general.docx als Texteingabetabelle. Sie verwendet das von den Maintainern optimierte Layout mit vier Spalten; fülle zuerst Identität, Über mich, Bildung/beruflicher Werdegang, Kontaktdaten aus, dann die modules[] in hoher Dichte. Die modules[] in der Word-Tabelle haben keine voreingestellte Branche; der Agent soll basierend auf dem Lebenslauf Projektarbeit, persönliches Portfolio, Auszeichnungen, Forschung, Veröffentlichungen, Kundenfallstudien oder Berufspraxis usw. auswählen; für den ersten Entwurf können 3 Module mit maximal 4 Einträgen im ersten Modul ausgefüllt werden – nach manueller Bestätigung dann kürzen. Das Repository nutzt template/resume-portfolio-layout-source.docx als Layout-Vorlage ohne persönliche Metadaten; wenn eine aktualisierte Version mit generischen Feldern benötigt wird, führe python scripts/adapt_user_word_template.py aus, aber schreibe nicht in die Quelldatei zurück.

Fakten und Inhalt

  • Der Lebenslauf-Originaltext ist die Faktenquelle der Person. Notiere jede zu veröffentlichende Tatsache mit der entsprechenden Seitenzahl/Paragraph aus dem Originaltext in work/facts.md; unterscheide zwischen offiziellem Titel, Studienphase, Teilnahme und Leitung, veröffentlicht und eingereicht. Bei Konflikten oder unklaren Daten frage nur nach fehlenden Informationen, die das Ergebnis beeinflussen.
  • src/content/profile.js ist der einzige Dateneingang für Seitentexte und Mediennummern. Die Word-Tabelle ist der Benutzereingang, profile.json ist nur ein Zwischenprodukt der Konvertierung und darf nicht parallel zur Seite langfristig gepflegt werden. Beim normalen Nachbau priorisiere die Änderung dieser Datenpassen; wenn die Struktur nicht passt, können Komponenten angepasst werden – erzwinge keine sechs Fähigkeiten oder vier Stationen.
  • Generiere prägnante chinesische Texte und getreue englische Übersetzungen; behalte die tatsächliche Fachrichtung der Person bei. Clinical, Research, Publication sind nur visuelle Slots des Originals, keine Branchenbeschränkung. Bei nicht-akademischen Personen sollten diese auf Projektarbeit, persönliches Portfolio, Auszeichnungen, Kundenfallstudien oder Berufspraxis abgebildet werden, und Titel, Bildunterschriften sowie Modellbeschreibungen entsprechend angepasst werden; generische medizinische / mikroskopische / Tumor-Visuals dürfen nicht als Qualifikation des Neulings interpretiert werden.
  • Externe Kontaktdaten werden vom Benutzer bereitgestellt und zur Veröffentlichung bestimmt; nicht angegebene Telefonnummern, Geburtsdaten, Adressen, Ausweise usw. werden nicht veröffentlicht. Der Original-Lebenslauf und die Original-Videos verbleiben nur im inputs-Ordner und dürfen nicht in public/ kopiert werden.

Material und Auslieferung

Verwende npm run media zur Verarbeitung der nummerierten Green-Screen MP4s 01–07; Parameter und Kamerazuordnung siehe materials. Nach der Verarbeitung prüfe Kanten, Hauttöne und Loop-Übergänge; Skriptparameter sind ein Ausgangspunkt, keine Qualitätssicherung für beliebige Green-Screens.

Führe nacheinander npm ci, npm run intake, Word-Konvertierung / Inhaltszuordnung, npm run media, npm run build, npm run preview aus. Überprüfe mit verfügbaren Browser-Tools Desktop und Mobil, Zweisprachigkeit, Karussell, Scrollen, transparente Videos und Degradation ohne Modell. Stelle die Vorschau zuerst auf einem statischen Hosting oder einer lokal erreichbaren Adresse bereit; der Benutzer klickt zur Abnahme und gibt Änderungen ein; Änderungen gehen vorrangig zurück in die Word-Tabelle, dann Synchronisation auf Profile und Webseite. Führe das offizielle Deployment erst nach endgültiger Bestätigung durch den Benutzer durch. Überprüfe die Ersetzung mit einem wirklich anderen neuen Profil; suche nach allen Namen/Institutionen/Kontaktdaten und Platzhaltertexten; behaupte keine Fertigstellung nur aufgrund eines erfolgreichen Builds.

Standardisierter Kreislauf und Fallstricke

Nach dem Herunterladen des Projekts sammle zuerst die Materialien in inputs/, dann lese die Fakten aus dem Lebenslauf aus und fülle die Word-Tabelle aus; nach Materialbearbeitung und Textzuordnung erstelle eine statische Website und gib dem Benutzer zuerst eine Vorab-URL; Änderungswünsche des Benutzers schreibe in die Word-Tabelle zurück und baue neu; schließlich nach ausdrücklicher Bestätigung deployen. Die statische Website benötigt standardmäßig keinen Backend-Server, aber Videos, Schriftarten und 3D-Modelle beeinflussen den Paketumfang, die First-Paint-Geschwindigkeit und das Hosting-Kontingent.

Häufige Fallstricke sind: komplexer Lebenslauf führt zu unvollständiger Faktenextraktion, Green-Screen-Farbüberlauf, Logos ohne öffentliche Lizenz, zu große Videos oder GLB, einige Agenten ohne DOCX-Parsing-Bibliothek, statisches Hosting, das große Dateien oder SPA-Fallback nicht handhaben kann. Lösungen sind: Seitenzahl/Paragraph-Faktenindex behalten, vorübergehend mit Fotos degradieren, Materialquellen dokumentieren, WebM/GLB komprimieren, scripts/word_to_profile.py und gebündeltes Python verwenden, große Materialien auf Objektspeicher oder statisches CDN auslagern und nach jedem Build eine echte Browser-Abnahme durchführen.

Liefere lokale Vorschau, vollständigen Quellcode der Website, Materialnutzungsindex und Abnahmeergebnisse aus. Standardmäßig keine Benutzermaterialien hochladen und kein automatisches Deployment. Bei Veröffentlichung oder Hochladen die aktuellen Autorisierungen des Benutzers beachten. Fehlende Materialien, die zu Platzhalterbereichen führen, werden explizit aufgelistet.

Verwandte Skills