Umwandlung von Wissen in interaktive Präsentationsseiten

Hinweis

# Dokumentenanalyse und visuelle Erstellung von Webportfolios




## Inhaltliche Anforderungen
- Beibehaltung der Kerninformationen des Originaldokuments, jedoch in einer besser lesbaren, visuellen Form
- Hinzufügen eines Autoreninformationsbereichs am unteren Rand der Seite, der Folgendes enthält:
- **Name des Autors**: [Name des Autors]
- **Social Media Links**: mindestens Twitter/X
- **Copyright-Informationen und Jahr**

## Design-Stil
- Der allgemeine Stil bezieht sich auf das minimalistische, moderne Design von **Linear App**.
- Verwenden Sie eine klare visuelle Hierarchie, um wichtige Inhalte hervorzuheben
- Das Farbschema sollte **professionell, harmonisch und für längeres Lesen geeignet** sein

## Technische Spezifikationen
- verwendet **HTML5, TailwindCSS 3.0+ (eingeführt über CDN)** und notwendiges JavaScript
- implementiert **vollständige Umschaltung zwischen dunklem und hellem Modus**, folgt standardmäßig den Systemeinstellungen
- Klare Codestruktur, einschließlich angemessener Kommentare, leicht zu verstehen und zu pflegen

## Responsive Gestaltung
- Die Seite muss auf **allen Geräten (Handys, Tablets, Desktops) perfekt dargestellt werden
- Optimieren Sie **Layout und Schriftgrößen** für verschiedene Bildschirmgrößen
- Sicherstellen einer **guten Touch-Erfahrung auf **Mobilgeräten

## Medienressourcen
- Verwenden Sie **Markdown-Bildverknüpfungen in Dokumenten** (falls verfügbar)
- Verwendung des **Video-Einbettungscodes** aus der Dokumentation (sofern verfügbar)

## Icons und visuelle Elemente
- Verwenden Sie spezialisierte Symbolbibliotheken wie **Font Awesome oder Material Icons (über CDN bereitgestellt)**.
- Wählen Sie geeignete **Illustrationen oder Diagramme** für das Inhaltsthema Schaufensterdaten
- Vermeiden Sie die Verwendung von **Emoji** als Primärsymbole

## Interaktive Erfahrung
- Fügen Sie geeignete **Mikrointeraktionseffekte** hinzu, um das Nutzererlebnis zu verbessern:
- **Button Hover** mit leichtem Zoom und Farbwechsel
- Schweben von Kartenelementen** mit raffinierten Schatten- und Randeffekten
- **Gleitende Übergänge beim Scrollen der Seite** **Gleitende Übergänge beim Scrollen der Seite** **Laden von Inhaltsblöcken
- **Elegante Einblendungsanimation beim Laden von Inhaltsblöcken** **Elegante Einblendungsanimation beim Laden von Inhaltsblöcken** **Glatter Übergangseffekt beim Scrollen

## Performance-Optimierung
- Sicherstellen, dass **Seiten schnell laden und unnötig große Ressourcen vermeiden** **Lazy Loading aktivieren
- **Implementieren Sie Techniken für träges Laden** für lange Seiteninhalte

## Ausgabeanforderungen
- **Bieten Sie eine einzige, voll funktionsfähige HTML-Datei** mit allen erforderlichen CSS und JavaScript an
- Sicherstellen, dass **der Code W3C-konform und frei von Fehlerwarnungen** ist
- **Die Seiten müssen in allen Browsern einheitlich aussehen und funktionieren**

### Generierungsanforderungen:
Je nach Art des Inhalts der hochgeladenen Datei (Dokument, Daten, Bild usw.) erstellen Sie bitte eine **Visualisierung der Seite, die für die Darstellung dieses Inhalts am besten geeignet ist**.

Anweisungen für den Gebrauch

ausnutzen Claude Sonett

Achten Sie darauf, dass Sie das Kontextfenster nicht überschreiten