## Kernaufgabe

### Hintergrund der Aufgabe

In der heutigen Arbeitswelt können individuell gestaltete Profilwebseiten für verschiedene Positionen das professionelle Image und die Wettbewerbsfähigkeit von Bewerbern deutlich verbessern. Traditionelle Lebensläufe sind oft unstrukturiert und stellen die Eignung des Bewerbers für die angestrebte Position nicht ausreichend dar. Diese Technologie nutzt KI-Funktionen, um Stellenanforderungen automatisch zu analysieren, die Präsentation persönlicher Informationen zu optimieren und hochwertige, personalisierte Jobwebseiten zu erstellen.

### Spezifische Ziele

1. Erfassung vollständiger grundlegender persönlicher Daten von Arbeitssuchenden (Grundinformationen, Ausbildung, Berufserfahrung, Qualifikationsliste, persönliches Foto).

2. Führen Sie eine eingehende Analyse des Branchenprofils, der Qualifikationsanforderungen und der Präferenzmerkmale der Zielposition durch und gewinnen Sie Erkenntnisse über mindestens 5-8 Schlüsseldimensionen.

3. Persönliche Lebensläufe intelligent mit Stellenanforderungen abgleichen und mindestens 3-5 gezielte Optimierungsvorschläge generieren.

4. Erstellen Sie eine optisch ansprechende, klar strukturierte und branchenübergreifend kompatible interaktive persönliche Website.

5. Stellen Sie sicher, dass die Website-Inhalte nachvollziehbar sind; alle Optimierungsvorschläge basieren auf realen Jobanalysedaten.

### Wichtigste Einschränkungen

Persönliche Angaben müssen wahrheitsgemäß und vollständig sein und dürfen nicht erfunden oder übertrieben werden.

Die Stellenanalyse muss auf realen Internet-Suchergebnissen basieren und mindestens drei Quellen einbeziehen.

- Der Webdesignstil muss den Standards von „universeller Ästhetik, elegantem Minimalismus und einem professionellen und einprägsamen Eindruck“ entsprechen.

Die finale Website muss alle wichtigen Informationen vollständig auf einer einzigen Seite darstellen und ein responsives Layout unterstützen.

### Schritt 1: Persönliche Lebenslaufinformationen sammeln und strukturieren

**Ziel:** Alle notwendigen Informationen über Arbeitssuchende zu erfassen und in strukturierte Daten umzuwandeln, um die anschließende Analyse und die Erstellung der Website vorzubereiten.

**Aktion**:

- Erfordert von den Nutzern das Hochladen persönlicher Informationen, oder:

- Weisen Sie die Benutzer an, die folgenden erforderlichen Informationen in YouMind anzugeben oder zu bearbeiten:

- **Grundlegende Informationen**: Name, Alter, Kontaktinformationen (E-Mail-Adresse, Telefonnummer, LinkedIn/GitHub usw.)

- **Persönliches Foto:** Bitte laden Sie ein professionell aussehendes persönliches Foto hoch (vorzugsweise im JPG/PNG-Format).

- **Bildungshintergrund**: Name der Schule, Studienfach, Abschluss, Studiendauer, Pflichtkurse oder Auszeichnungen (falls vorhanden)

- **Berufserfahrung**: Firmenname, Position, Beschäftigungsdauer, Hauptaufgaben und Erfolge (3-5 Absätze empfohlen)

- **Fähigkeitenliste**: Fachliche Kompetenzen, sicherer Umgang mit Tools/Plattformen, Sprachkenntnisse, Soft Skills usw.

- **Weitere Highlights** (optional): Projekterfahrung, Auszeichnungen, Veröffentlichungen, Freiwilligenarbeit usw.

- Ordnen Sie die gesammelten Informationen in einem übersichtlichen, strukturierten Format an (Markdown oder Tabellen werden empfohlen).

- Überprüfen Sie die Vollständigkeit der Angaben: Stellen Sie sicher, dass alle Pflichtfelder ausgefüllt sind und dass das Foto hochgeladen wurde und im richtigen Format vorliegt.

- Speichern Sie die geordneten persönlichen Informationen als Material oder Notiz in YouMind, um später leicht darauf zugreifen zu können.

**Qualitätsstandards**:

- Alle Pflichtfelder (Name, Alter, Kontaktdaten, Ausbildung, Beruf, Fähigkeiten, Foto) sind vollständig ausgefüllt.

- Beschreiben Sie Ihre Berufserfahrung und Ihren Bildungshintergrund detailliert und quantitativ (z. B. „Verantwortlich für das Projekt XX, Verbesserung des Leistungsindikators von YY um 30 %)“.

- Klare, professionelle Porträtfotos mit schlichtem Hintergrund.

### Dokumentsprachenstil

**Tonfall**: Seien Sie professionell, direkt und strukturiert; vermeiden Sie einen zu umgangssprachlichen oder akademischen Ton.

**Aussage**: Verwenden Sie den Aktiv und Sätze, die mit Verben beginnen (z. B. „verantwortlich für XX“, „führend bei XX“, „erreichend bei XX“), um Handlungen und Ergebnisse hervorzuheben.

**Daten:** Quantifizieren Sie die Ergebnisse so genau wie möglich (z. B. „Steigern Sie die Konversionsrate um 30 %“, „Verwalten Sie ein Budget von 500.000 US-Dollar“, „Leiten Sie ein Team von 10 Personen“).

**Schlüsselwörter:** Integrieren Sie häufig verwendete Schlüsselwörter aus der Stellenanalyse auf natürliche Weise in Ihre Beschreibungen Ihrer Berufserfahrung und Ihrer Fähigkeiten, vermeiden Sie jedoch erzwungenes oder künstliches Keyword-Stuffing.

### Schritt 2: Branchenprofil und Anforderungen der Zielposition analysieren

**Ziel:** Durch umfassende Online-Recherchen ein tiefes Verständnis des typischen Profils, der Kernkompetenzanforderungen, der Branchenpräferenzen und der impliziten Erwartungen an die Zielpositionen gewinnen und so eine Datengrundlage für die Optimierung des Lebenslaufs schaffen.

**Aktion**:

- Ermitteln der vom Benutzer eingegebenen Zielberufsbezeichnung (z. B. „Overseas Growth Manager eines KI-Unternehmens“, „Experte für Produktbetrieb“ usw.).

- Verwenden Sie das Tool `googleSearch`, um eine mehrdimensionale Suche durchzuführen, die mindestens die folgenden Suchanfragen umfasst:

- "[Zielposition] Stellenbeschreibung und Anforderungen"

- "[Zielposition] Fähigkeiten und Qualifikationen"

- "[Zielposition] Interviewfragen" (Interviewfragen, die den Fokus des Arbeitgebers widerspiegeln)

- "[Zielposition] Karriereweg" (Karriereweg, Branchenkenntnisse)

- Für spezifische Branchen (wie KI, SaaS) sollten Sie branchenspezifische Schlüsselwörter in Ihre Suche einbeziehen.

- Extrahieren und fassen Sie die folgenden Schlüsselinformationen aus den Suchergebnissen zusammen:

- **Fachliche Kompetenzen**: Unverzichtbare berufliche Fähigkeiten, Tools, Plattformen und Technologie-Stack (Liste von 5-8 häufig verwendeten Fähigkeiten)

- **Erwünschte Soft Skills**: Kommunikationsfähigkeit, Führungsqualitäten, interkulturelle Zusammenarbeit usw. (Bitte 3-5 Punkte auflisten)

- **Ausbildung und Erfahrung**: Anforderungen an den Bildungshintergrund, Jahre der Berufserfahrung und Branchenpräferenzen.

- **Aufgabenbeschreibung**: Die Kernaufgaben, die typischerweise in dieser Position anfallen (3-5 Punkte)

- **Branchentrends**: Diese Rolle ist stark nachgefragt oder es entstehen neue Anforderungen im aktuellen Markt (z. B. Einsatz von KI-Tools, datengestützte Entscheidungsfindung usw.).

- **Präferenzen hinsichtlich der Unternehmenskultur:** Falls möglich, erfassen Sie die kulturellen Merkmale der Zielbranche bzw. des Zielunternehmenstyps (z. B. Unternehmergeist, Ergebnisorientierung usw.).

- Die Analyseergebnisse werden in einem strukturierten Bericht zusammengefasst, der für jede Dimension Links zu den Originalquellen enthält (mindestens 3 verschiedene Quellen).

- Erstellen Sie eine "Zusammenfassung des Ziel-Stellenprofils" (200-300 Wörter), die die Kernmerkmale der Stelle zusammenfasst.

**Qualitätsstandards**:

- Informationen aus mindestens 3 verschiedenen, maßgeblichen Quellen einholen (z. B. LinkedIn, Glassdoor, Branchenberichte und Jobportale).

Die Liste der Fachkompetenzen sollte mindestens 5 Punkte enthalten, die Liste der Sozialkompetenzen mindestens 3 Punkte.

- Jedem wichtigen Befund ist der ursprüngliche Link beigefügt, um die Rückverfolgbarkeit zu gewährleisten.

- Die Zusammenfassung der Stellenbeschreibung ist klar und präzise, ​​vage Allgemeinplätze werden vermieden.

# Zielarbeitsanalysebericht

## Zielposition

[Berufsbezeichnung, z. B. „Manager für internationales Wachstum bei einem KI-Unternehmen“]

## Zusammenfassung des Stellenprofils

[Eine Zusammenfassung von 200-300 Wörtern, die die Kernmerkmale, die Hauptverantwortlichkeiten und den Branchenhintergrund dieser Position beschreibt]

## Anforderungen an die fachlichen Kompetenzen

1. [Fertigkeit 1] - Quelle: [Link]

2. [Fertigkeit 2] - Quelle: [Link]

3. [Fertigkeit 3] - Quelle: [Link]

...

## Präferenz für Soft Skills

1. [Fertigkeit 1] - Quelle: [Link]

2. [Fertigkeit 2] - Quelle: [Link]

...

## Typische Aufgaben

1. [Verantwortung 1]

2. [Verantwortung 2]

...

## Bildungs- und Berufserfahrungsanforderungen

- Ausbildung: [Erforderlich]

- Jahre Berufserfahrung: [Erforderlich]

- Branchenhintergrund: [Präferenz]

## Branchentrends und neue Anforderungen

[Beschreiben Sie die neuesten Trends für diese Rolle, wie zum Beispiel den Einsatz von KI-Tools und datengetriebenen Ansätzen.]

## Referenzen

1. [Quelle 1 Titel] - [Link]

2. [Quelle 2 Titel] - [Link]

3. [Quelle 3 Titel] - [Link]

### Schritt 3: Optimieren Sie Ihren Lebenslauf intelligent, um ihn an die Stellenanforderungen anzupassen

**Zielsetzung:** Persönliche Informationen sollen optimal mit den Anforderungen der Stelle abgeglichen, Stärken und Schwächen identifiziert und gezielte Vorschläge zur Inhaltsoptimierung generiert werden, um Lebensläufe individueller zu gestalten.

**Aktion**:

- Vergleichen Sie die persönlichen Informationen aus Schritt 1 mit dem Stellenprofil aus Schritt 2 und führen Sie eine punktweise Übereinstimmungsanalyse durch:

- **Kompetenzabgleich:** Welche Ihrer persönlichen Kompetenzen decken sich mit den Stellenanforderungen? Welche fehlen?

- **Berufsrelevanz der Erfahrung**: Welche Aspekte Ihrer Berufserfahrung sind für Ihre Aufgaben besonders relevant? Wie können Sie diese Punkte umformulieren, um ihre Relevanz hervorzuheben?

- **Keyword-Abstimmung:** Erscheinen häufig verwendete Keywords aus der Stellenbeschreibung (wie z. B. „Growth Hacking“, „datengetrieben“ und „grenzüberschreitende Operationen“) in Ihrem persönlichen Profil?

- **Nachweis von Soft Skills:** Gibt es konkrete Beispiele aus Ihrer persönlichen Erfahrung, die die für die Position erforderlichen Soft Skills (wie Führungs- und Kommunikationsfähigkeiten) belegen?

- Generieren Sie 3-5 konkrete Optimierungsvorschläge, wobei jeder Vorschlag Folgendes beinhaltet:

- **Optimierungspunkte:** Spezifische Details, die angepasst werden müssen (z. B. „Beispiele für die Ergänzung der Berufserfahrung um Datenanalysefähigkeiten“).

- **Gründe für die Optimierung:** Warum diese Anpassung vorgenommen wurde (z. B. „Die Zielposition erfordert datengestützte Entscheidungen, aber die aktuelle Beschreibung enthält keine quantitativen Daten“).

- **Optimierungsbeispiel**: Geben Sie konkrete Umschreibungsvorschläge oder ergänzende Inhalte an.

- Identifizieren Sie 2-3 "differenzierende Stärken" einer Person (d. h. Eigenschaften oder Erfahrungen, die die Person besitzt, die aber nicht explizit in der Stellenbeschreibung erwähnt werden, die aber ein Pluspunkt sein können).

- Sollten Sie eine signifikante Lücke in Ihren Fähigkeiten oder Ihrer Erfahrung feststellen, weisen Sie ehrlich darauf hin und schlagen Sie vor, wie Sie diese auf der Website als Indikator für „Lernmotivation“ oder „relevanten Erfahrungstransfer“ darstellen können.

Auf Grundlage der Optimierungsvorschläge wird eine „optimierte Version der persönlichen Informationen“ erstellt, die die Authentizität der Originalinformationen beibehält, aber die Formulierung und die Reihenfolge des Inhalts so anpasst, dass die Relevanz hervorgehoben wird.

**Qualitätsstandards**:

- Geben Sie mindestens 3 konkrete, umsetzbare Optimierungsvorschläge an.

- Jeder Vorschlag beinhaltet einen klaren Vergleich „vor der Optimierung – nach der Optimierung“ oder ein konkretes Beispiel.

- Der optimierte Inhalt muss auf wahren Informationen beruhen und darf nicht erfunden oder übertrieben sein.

- Nennen Sie mindestens zwei Alleinstellungsmerkmale

# Vorschläge zur Lebenslaufoptimierung

## Matching-Analyse

- **Fähigkeitsabgleich**: [Übereinstimmende Fähigkeiten] / [Fehlende Fähigkeiten]

- **Relevanz der Erfahrung**: [Sehr relevante Erfahrung] / [Verbesserungsbedarf]

- **Schlüsselwortabgleich**: [Enthaltene Schlüsselwörter] / [Noch hinzuzufügende Schlüsselwörter]

## Optimierungsvorschläge

### Vorschlag 1: [Optimierungspunkte]

- **Grund:** [Warum eine Optimierung notwendig ist]

- **Vor der Optimierung**: [Originaltext]

- **Optimiert**: [Verbesserte Formulierung]

### Vorschlag 2: [Optimierungspunkte]

...

## Differenzierungsvorteil

1. [Vorteil 1]: [Detaillierte Beschreibung]

2. [Vorteil 2]: [Detaillierte Beschreibung]

## Optimierte persönliche Informationen

[Vollständige, optimierte persönliche Informationen, formatiert wie das "Strukturierte Dokument mit persönlichen Informationen"]

### Dokumentsprachenstil

**Tonfall**: Seien Sie professionell, direkt und strukturiert; vermeiden Sie einen zu umgangssprachlichen oder akademischen Ton.

**Aussage**: Verwenden Sie den Aktiv und Sätze, die mit Verben beginnen (z. B. „verantwortlich für XX“, „führend bei XX“, „erreichend bei XX“), um Handlungen und Ergebnisse hervorzuheben.

**Daten:** Quantifizieren Sie die Ergebnisse so genau wie möglich (z. B. „Steigern Sie die Konversionsrate um 30 %“, „Verwalten Sie ein Budget von 500.000 US-Dollar“, „Leiten Sie ein Team von 10 Personen“).

**Schlüsselwörter:** Integrieren Sie häufig verwendete Schlüsselwörter aus der Stellenanalyse auf natürliche Weise in Ihre Beschreibungen Ihrer Berufserfahrung und Fähigkeiten, vermeiden Sie jedoch erzwungenes oder künstliches Keyword-Stuffing.

### Schritt 4: Erstellen Sie eine persönliche Jobsuche-Website im postmodernen Stil

**Ziel:** Mit dem Tool `generateWebpage` von YouMind soll eine postmoderne, visuell ansprechende und unkonventionelle einseitige Webseite für die persönliche Jobsuche erstellt werden, die Ihre optimierten persönlichen Informationen vollständig präsentiert.

**Aktion**:

- Rufen Sie das Tool `generateWebpage` auf und übergeben Sie die folgenden Befehle und Parameter:

- **Anleitung**: „Erstellen Sie eine einseitige Webseite zur persönlichen Jobsuche, die die vollständigen Lebenslaufinformationen des Jobsuchenden anzeigt. Die Webseite muss folgende Anforderungen erfüllen:“

**Designstil:** Postmoderne. Der Fokus liegt auf Regelbrüchen, Stilmix, Dekonstruktion, Ironie, Collage, Asymmetrie, kräftigen Farben und einem ästhetischen Kontrast. Ziel ist eine visuell einprägsame, unverwechselbare und herausfordernde Website, die jegliches konservative oder generische Design vermeidet.

- **Layoutstruktur**: Verabschieden Sie sich vom fragmentierten, asymmetrischen Layout herkömmlicher Raster. Elemente können sich überlappen und drehen, um Tiefe und ein Gefühl von Chaos zu erzeugen. Die Modulreihenfolge kann beliebig angeordnet oder nichtlinear dargestellt werden. Eine Hierarchie entlang der Z-Achse wird empfohlen. Folgende Module sind enthalten, die Darstellung kann jedoch unkonventionell sein:

1. **Hero Section** (First Screen): Ein visuell eindrucksvoller Einstieg, der Effekte wie Collage, überlappende Texte und Bilder sowie Glitch Art nutzen kann.

2. **Über mich**: Dieser Text kann auf verschiedene Bereiche der Seite verteilt oder mit einer Mischung aus verschiedenen Schriftarten formatiert werden.

3. **Erlebnis**: Verzichten Sie auf die traditionelle Zeitleiste und verwenden Sie Karten unterschiedlicher Größe, unregelmäßiger Formen oder Parallax-Scrolling, um jedes Erlebnis darzustellen.

4. **Bildung**: Als dekoratives oder strukturelles Element im Gesamtlayout, nicht als eigenständiges, strukturiertes Modul.

5. **Fähigkeiten:** Chaotische Tag-Clouds verwenden, Text als grafische Elemente zum Streuen einsetzen oder auf unkonventionelle Weise visualisieren.

6. **Kontakt**: Icons und Links können riesig oder winzig groß gestaltet und an unerwarteten Stellen auf der Seite platziert werden.

**Farbschema**: Kräftige, kontrastreiche und hochgesättigte Farbkombinationen. Verwenden Sie fluoreszierende Farben, disharmonische Nachbarfarben und starke Farbverläufe. Kombinieren Sie beispielsweise leuchtendes Pink (#FF00FF) mit Limettengrün (#00FF00) oder nutzen Sie einen Farbbruch-Effekt im Glitch-Art-Stil. Hintergründe können mehrfarbige Collagen oder Rausch-/Gittermuster sein.

- **Schriftsystem**: Eine Mischung aus Schriftarten mit unterschiedlichen Stilen, wie z. B. fette Serifenschriften und geometrische serifenlose Schriften. Extreme Schriftgrößenkontraste sind zulässig; Überschriften können riesig, Fließtext hingegen sehr klein sein. Text kann gedreht, geneigt, überlappend und sogar teilweise als rein dekoratives Grafikelement verwendet werden.

**Interaktionsdesign**: Überzeichnete und unerwartete Interaktionseffekte. Beim Überfahren mit der Maus können Glitch-Effekte, Farbumkehrungen oder Elementverschiebungen ausgelöst werden. Scrollen kann ruckartig erfolgen oder einen starken Parallaxeneffekt aufweisen. Navigationslinks können beim Anklicken unerwartete Animationen anzeigen.

**Responsives Design:** Das postmoderne, „fragmentierte“ Erscheinungsbild soll auf verschiedenen Geräten erhalten bleiben, während die Lesbarkeit der Kerninformationen gewährleistet wird. Mobile Versionen können bestimmte Effekte vereinfachen, die stilistische Konsistenz muss jedoch gewahrt bleiben.

- **Referenzen**: Geben Sie die Material-/Notizreferenzen aus den in Schritt 3 generierten "optimierten persönlichen Informationen" sowie die URL Ihres persönlichen Fotos an.

- Überprüfen Sie nach der Website-Generierung die folgenden Qualitätsmerkmale:

- Werden alle persönlichen Informationen vollständig und korrekt dargestellt (auch wenn das Layout unübersichtlich ist)?

Entspricht der visuelle Stil den Anforderungen des „Postmodernismus“? Ist er gewagt und wirkungsvoll?

Sind die Informationen in den einzelnen Modulen auffindbar und verständlich?

- Funktionieren die interaktiven Effekte wie erwartet, auch wenn sie "unerwartet" sind?

- Falls die generierte Webseite nicht den Erwartungen entspricht, notieren Sie die spezifischen Probleme und verwenden Sie den Parameter `webpage_id` von `generateWebpage` zur iterativen Optimierung.

**Qualitätsstandards**:

Die Website enthält alle notwendigen Module (Held, Über mich, Erfahrung, Ausbildung, Fähigkeiten, Kontakt), aber das Format ist nicht beschränkt.

- Das visuelle Design ist kühn und im Sinne der Postmoderne gehalten; es besitzt eine starke Persönlichkeit und einen einprägsamen Reiz.

- Alle persönlichen Angaben sind korrekt und stimmen mit den optimierten Inhalten überein.

- Die wichtigsten Informationen der Website sind sowohl auf Desktop- als auch auf Mobilgeräten gut lesbar, und der Stil ist einheitlich.

Der Gesamteindruck ist „kühne, avantgardistische und kreative“ Bewerbungen, wodurch sie sich von zahlreichen anderen Lebensläufen abheben.

## Stil und Präsentation

### Visueller Stil der Website (Kernstandard)

**Designästhetik:** Postmoderne. Ihr Kern ist die „Rebellion gegen und Dekonstruktion der Moderne“. Sie zelebriert Chaos, Widersprüchlichkeit, Ironie und einen spielerischen Geist. Design soll lebendig, vielseitig und sogar leicht provokativ sein. Es verbindet Hochkultur mit Popkultur und bricht mit den traditionellen Regeln des „guten Designs“.

**Farbschema**:

- **Kernprinzipien:** Kühnheit, Konflikt und hohe Farbsättigung. Harmonie ablehnen und visuelle Spannung anstreben.

- **Farbkombinationen**: Verwenden Sie fluoreszierende Farben, Neonfarben und kontrastierende, benachbarte Farben. Zum Beispiel: Glitzer (#FF00FF) + leuchtendes Gelb (#FFFF00) + Cyan (#00FFFF).

**Hintergrund:** Vermeiden Sie reines Weiß. Verwenden Sie Hintergründe mit Mustern wie Rauschen, Gitterlinien, geometrischen Mustern oder mehrfarbigen Blöcken. Auch Hintergründe mit starken Farbverläufen sind geeignet.

- **Sekundärfarben**: Es gibt kein strenges Konzept von Sekundärfarben; jede Farbe kann zur Hauptfarbe werden. Man kann bewusst „unvorteilhafte“ Farbkombinationen verwenden, um einen ironischen Effekt zu erzielen.

**Schriftsystem**:

**Kernprinzip:** Gleichförmigkeit und Eintönigkeit sind abzulehnen. Mischung, Konflikt und Kontrast sind der Schlüssel.

- **Gemischte Schriftarten**: Die Verwendung mehrerer Schriftarten mit unterschiedlichen Stilen auf einer einzigen Seite, z. B. die Gegenüberstellung von klassischen Serifenschriften (wie Times New Roman) mit fetten serifenlosen Schriften (wie Arial Black) oder handgeschriebenen Schriften.

- **Größenkontrast**: Extreme. Überschriften können so riesig sein, dass sie die Hälfte des Bildschirms einnehmen, während der Fließtext so klein sein kann, dass er (als Designentscheidung) nur mit Mühe zu lesen ist.

- **Textverarbeitung**: Text wie Grafiken behandeln. Drehen, verzerren, vertikal ausrichten, spiegeln und überlappen. Text kann entlang von Pfaden angeordnet oder in einzelne Buchstaben zerlegt und über die Seite verteilt werden.

**Layoutprinzipien**:

- **Das Raster durchbrechen:** Das traditionelle Rastersystem wird vollständig aufgegeben. Die Elemente sind asymmetrisch und scheinbar zufällig angeordnet.

- **Collage und Überlappung**: Durch die intensive Nutzung von Ebenen und der Z-Achse werden Bilder, Texte und Farbblöcke überlappt, um einen Collage-Effekt zu erzeugen.

- **Fragmentierung**: Das Aufteilen eines vollständigen Gestaltungselements (wie z. B. eines Bildes oder eines Textblocks) in mehrere Teile und deren Verteilung an verschiedenen Stellen.

- **Weißraum**: Unregelmäßiger und dynamischer Weißraum, bei dem der Weißraum selbst zu einer Form und einem Gestaltungselement wird und nicht nur „Atemraum“ ist.

**Interaktionsdetails**:

- **Hover-Effekte**: Überzeichnet und subversiv. Wenn der Mauszeiger über ein Element bewegt wird, kann sich dieses drastisch verändern, Farben invertieren, einen Glitch-Effekt erzeugen oder ein unerwartetes GIF abspielen.

- **Scrollen**: Starkes Parallax-Scrollen, bei dem sich verschiedene Ebenen mit unterschiedlichen Geschwindigkeiten bewegen, wodurch ein Gefühl von Tiefe und ein psychedelischer Effekt erzeugt wird.

- **Animationen**: Abrupte, nichtlineare Animationen. Elemente können aus unerwarteten Richtungen herbeifliegen oder auf eine „falsche“ Weise geladen werden.

- **Cursor**: Sie können benutzerdefinierte, riesige oder sich ständig ändernde Cursor verwenden, um den interaktiven Spaß zu erhöhen.

**Moduldesignspezifikationen**:

1. **Heldenbereich** (Erster Bildschirm):

- Verwenden Sie einen Collage-Stil, um persönliche Fotos (die gefiltert oder mit Glitch-Effekten bearbeitet werden können), riesige Namensinitialen, rotierenden Zieljob-Text und geometrische Formen miteinander zu kombinieren.

- Der Hintergrund kann aus dynamischem Rauschen oder sich schnell verändernden Farbblöcken bestehen.

2. **Über mich**:

Der Text ist in mehrere kleine Blöcke unterteilt, die in verschiedenen Schriftarten und -größen angeordnet sind und über einen Bereich der Seite verteilt sind. Manche Textpassagen verschmelzen mit dem Hintergrund, sodass der Nutzer genau hinsehen muss.

3. **Berufserfahrung**:

Jedes Erlebnis wird als unregelmäßig geformte, farbenfrohe „Karte“ dargestellt, die übereinander gestapelt und geneigt angeordnet ist. Wenn der Mauszeiger über die Karte bewegt wird, „schwebt“ diese nach oben und zeigt detaillierte Informationen an.

4. **Ausbildung** (Bildungshintergrund):

Informationen können in dekorative Ränder auf der Seite integriert oder als Teil einer Hintergrundtextur in einer sehr kleinen Schriftart verwendet werden.

5. **Fähigkeiten**

Eine chaotische, dynamische Wortwolke, in der die Fachbegriffe in Größe, Schriftart und Farbe variieren. Wörter können sich vergrößern oder flackern, wenn der Mauszeiger darüberfährt.

6. **Kontaktinformationen:**

Verwenden Sie übergroße oder pixelige Symbole und platzieren Sie diese am Rand oder in einer Ecke der Seite. Links können hinter unerwarteten grafischen Elementen verborgen werden.

**Responsives Design**:

- **Kernaufgabe**: Aufrechterhaltung eines „geordneten Chaos“ auf verschiedenen Geräten.

- **Desktopversion** (>1200px): Zeigt komplexe Layouts mit überlappenden und mehrspaltigen Elementen vollständig an.

- **Flaches Panel** (768-1200px): Reduziert die Überlappung von Elementen bei gleichzeitiger Beibehaltung der Asymmetrie und eines fragmentierten Eindrucks.

- **Mobil** (<768px): Umgestellt auf ein einspaltiges Layout, behält aber durch übertriebenen Schriftgrößenkontrast, kräftige Farbblöcke und nichtlineares Scrollen einen postmodernen Stil bei.

###

### Schritt 5: Qualitätsprüfung und Lieferung

**Zielsetzung:** Durchführung einer umfassenden Qualitätsprüfung der generierten Website, um korrekte Informationen, ein ansprechendes Design und eine reibungslose Benutzererfahrung zu gewährleisten und eine Benutzeranleitung bereitzustellen.

**Aktion**:

- Führen Sie Qualitätskontrollen für jeden einzelnen Artikel durch:

- **Informationsgenauigkeit**: Wir haben jeden Namen, jede Kontaktinformation, jede Berufserfahrung, jeden Bildungshintergrund und jede Qualifikation auf der Website sorgfältig überprüft, um die Übereinstimmung mit den Originalinformationen sicherzustellen.

- **Visuelle Konsistenz**: Prüfen Sie auf Konsistenz bei Schriftart, Farbe, Abständen und Ausrichtung; achten Sie auf visuelle Mängel.

- **Interaktionsflüssigkeit:** Testen Sie, ob Navigationsübergänge, Scroll-Effekte und Hover-Animationen korrekt funktionieren.

- **Reaktive Anpassung:** Simuliert verschiedene Gerätegrößen, um zu prüfen, ob das Layout sinnvoll ist.

- **Lesbarkeit:** Achten Sie auf eine angemessene Textgröße, ausreichenden Kontrast und eine klare Informationshierarchie.

- Erstellen Sie eine "Website-Benutzeranleitung" mit folgendem Inhalt:

- Link zum Website-Zugang (Webseiten-URL, generiert von YouMind)

- So teilen Sie Ihre Website (Link kopieren, QR-Code generieren usw.).

- Wie man Inhalte schnell an unterschiedliche Stellenanforderungen anpasst (z. B. durch Ändern der Zielposition, Aktualisieren der Berufserfahrung usw.).

- Vorschläge zur zukünftigen Optimierung (z. B. regelmäßige Aktualisierung der Inhalte, Hinzufügen von Projektbeispielen usw.)

Zeigen Sie dem Benutzer die fertige Website und fragen Sie, ob Anpassungen erforderlich sind.

- Wenn Benutzer Änderungen vorschlagen, protokollieren Sie diese und verwenden Sie `generateWebpage` zur iterativen Optimierung.

**Qualitätsstandards**:

Alle Angaben sind zu 100 % korrekt und enthalten keine Tipp- oder Formatierungsfehler.

- Die Website hat die Tests auf mindestens zwei Geräten (Desktop + Mobilgerät) bestanden.

- Bietet klare Benutzerrichtlinien, die es den Benutzern ermöglichen, die Website selbstständig zu teilen und zu pflegen.

- Der Nutzer ist mit dem Endergebnis zufrieden oder hat auf Basis von Feedback eine Optimierung abgeschlossen.