Portfolio-Website-Skill
Erstellt eine professionelle Portfolio-Website: Heldenbereich, Projektgalerie, Über-mich-Abschnitt und Kontaktformular. Sauber, typografisch, minimalistisch.
Metadaten
Name: portfolio-site
Beschreibung: Erzeuge eine professionelle Portfolio-Website mit Helden-, Projekt-, Über-mich- und Kontaktabschnitten.
Trigger-Keywords: "Portfolio", "persönliche Website", "Entwickler-Portfolio", "Kreativ-Portfolio", "Lebenslauf-Seite"
Eingaben & Parameter
| Parameter | Typ | Erforderlich | Standard |
|---|---|---|---|
name | Zeichenkette | ✓ | — |
tagline | Zeichenkette | ✓ | — |
projects | Array | ✓ | — |
github_url | Zeichenkette | — | — |
linkedin_url | Zeichenkette | — | — |
email | Zeichenkette | — | — |
years_experience | Zahl | — | 3 |
skills | Array | — | [] |
Elemente des Projects-Arrays:
{ title: string; description: string; tags: string[]; url?: string; image?: string }
Erforderliche Abschnitte (in der Reihenfolge)
- Navigation – Name als Logo, Links: Projekte / Über mich / Kontakt
- Heldenbereich – Name, Tagline, einzeiliges Wertversprechen, soziale Links (GitHub, LinkedIn, E-Mail)
- Projektgalerie – Dreispaltiges responsives Raster, jede Karte: Titel + Beschreibung + Tags + Link
- Über mich – Zweispaltig: Biotext links, Fähigkeiten/Statistiken rechts
- Kontakt – Einfaches Formular: Name, E-Mail, Nachricht, Senden-Button
- Footer – Copyright + soziale Links
Design-Regeln
- Einseitig, vollständig responsiv
- Dark Mode als Standard (verwende DESIGN.md-Dark-Mode-Tokens)
- Alle Links öffnen in neuem Tab
- Keine externen JS-Bibliotheken
- Gesamtes CSS im
<style>-Block - Semantisches HTML5 (
<header>,<nav>,<main>,<section>,<footer>)
Ausgabe
Einzelne Datei: index.html (in sich geschlossen)
Selbstprüfung
- Helden-Überschrift ist der Name, nicht „Willkommen“
- Mindestens 4 Projekte angezeigt
- Soziale Links nutzen SVG-Icons (keine Emojis)
- Mobil: einspaltiges Raster
- Kontaktformular hat kein defektes
action-Attribut