Skip to content

[WIP] Replace existing website with new static landing page#1093

Closed
Copilot wants to merge 1 commit intomainfrom
copilot/create-static-landing-page
Closed

[WIP] Replace existing website with new static landing page#1093
Copilot wants to merge 1 commit intomainfrom
copilot/create-static-landing-page

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 6, 2026

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Du arbeitest in diesem Repository und ersetzt die bestehende Website vollständig durch eine neue statische Landingpage.

Ziel:
Baue eine statische persönliche Landingpage, die zeigt, wer ich bin, was ich mache, und meine Social Links sowie Projektseiten zugänglich macht.

Die Seite soll extrem hochwertig wirken und visuell stark sein.
Sie darf und soll stark animiert sein – gerne voll animiert –, aber die Animationen müssen zu mir passen:
ruhig, männlich, geerdet, modern, klar, hochwertig, bewusst, präsent.
Nicht verspielt. Nicht kitschig. Nicht nach Template. Nicht nach Standard-Agenturportfolio.

Wichtige Anweisung:

  • Lösche den bestehenden Inhalt des Repositories vollständig, sofern er nicht für das neue Setup zwingend gebraucht wird.
  • Baue alles von Grund auf neu.
  • Die Website muss statisch sein.
  • Du entscheidest selbst, welche Technologie dafür am sinnvollsten ist.
  • Du entscheidest selbst über Design, Motion-Konzept, Typografie, Layout, Farbwelt und Interaktionen.
  • Triff starke, eigenständige Entscheidungen mit Claude Opus.
  • Lieber wenige Elemente mit exzellenter Wirkung als viel mittelmäßiger Ballast.

Inhaltlicher Zweck:
Die Seite soll im Kern nur Folgendes leisten:

  • zeigen, wer ich bin
  • zeigen, was ich mache
  • meine Projektseiten verlinken
  • meine Social Links verlinken

Persönlichkeit / Stil:
Die Seite soll zu folgender Ausstrahlung passen:

  • männlich
  • ruhig
  • klar
  • geerdet
  • tief
  • bewusst
  • präsent
  • hochwertig
  • modern
  • minimalistisch
  • elegant statt verspielt

Designrichtung:

  • visuell bleeding edge
  • sehr starke Typografie
  • hochwertige Komposition
  • klare Hierarchie
  • viel bewusster Leerraum
  • dunkle, natürliche oder geerdete Farbwelt ist willkommen, wenn passend
  • editoriale, moderne, fast art-directed Wirkung
  • premium statt laut
  • keine generischen Kartenlayouts oder austauschbaren SaaS-Blöcke
  • keine Standard-Portfolio-Template-Ästhetik

Motion / Animation:
Die Animation ist ein zentraler Teil des Erlebnisses.
Die Seite darf sehr animiert sein, aber die Animationen müssen stilvoll, präzise und atmosphärisch sein.

Wichtig:

  • Animationen sollen hochwertig, weich, flüssig und bewusst wirken
  • eher cinematic, elegant und immersiv als wild, hektisch oder verspielt
  • keine billigen Effekte
  • keine übertriebenen Glows, Partikel oder Tech-Demo-Spielereien ohne Konzept
  • Animationen müssen die Wahrnehmung von Tiefe, Präsenz, Rhythmus und Qualität verstärken
  • Motion soll Teil der Markenwirkung sein, nicht Dekoration

Erwünschte Motion-Qualitäten:

  • sanfte, sehr hochwertige Reveal-Animationen
  • Tiefe durch Parallax, Layering oder subtile Perspektive, wenn sinnvoll
  • exzellente Hover- und Focus-States
  • smoothe Scroll-Erlebnisse, wenn technisch sauber umsetzbar
  • typografische Bewegung mit Stilgefühl
  • subtile Übergänge zwischen Bereichen
  • dynamische, aber ruhige Background-Motion, wenn passend
  • Animationen mit Spannungsaufbau und bewusster Zurückhaltung
  • das Ergebnis soll modern und lebendig wirken, aber niemals unruhig

Inhalt der Seite:
Die Seite soll bewusst reduziert bleiben und nur wenige starke Bereiche haben:

  1. Hero-Bereich mit Name, kurzer Positionierung und starker visueller Wirkung
  2. Ein kurzer Bereich zu dem, was ich mache / worauf ich mich fokussiere
  3. Projektlinks / Projektseiten
  4. Social Links
  5. Optional ein sehr reduzierter Footer

Texte:

  • knapp
  • klar
  • hochwertig
  • keine Buzzwords
  • keine austauschbaren Agenturfloskeln
  • lieber wenig Text mit guter Wirkung

Technische Anforderungen:

  • statische Website
  • sehr performant
  • responsive
  • saubere SEO-Basis
  • sauberer, wartbarer Code
  • möglichst wenig unnötiger Ballast
  • nur so viel JavaScript wie für das Erlebnis wirklich sinnvoll ist
  • Animationen performant und sauber umgesetzt
  • barrierearm soweit sinnvoll
  • gute Developer Experience

Technologie:
Du entscheidest selbst, welches Setup dafür ideal ist.
Wähle die Technologie nicht nach Gewohnheit, sondern nach Eignung für:

  • statische Auslieferung
  • Performance
  • starke Motion
  • saubere Wartbarkeit
  • exzellente Umsetzbarkeit des Designs

Arbeitsweise:

  1. Prüfe kurz, welches Setup für eine statische, visuell starke, animierte Landingpage am sinnvollsten ist
  2. Entferne den bisherigen Projektinhalt konsequent
  3. Setze das neue Projekt sauber auf
  4. Entwickle ein klares visuelles Konzept mit starker Motion-Richtung
  5. Implementiere die Landingpage vollständig neu
  6. Poliere Typografie, Abstände, Timing, Animationen und Details
  7. Dokumentiere am Ende kurz:
    • welche Technologie du gewählt hast
    • warum
    • welche gestalterische Richtung du gewählt hast
    • wie das Projekt lokal gestartet oder gebaut wird

Wichtig:

  • Keine halben Lösungen
  • Keine Angst vor starken Designentscheidungen
  • Animation ist ausdrücklich erwünscht
  • Trotzdem muss alles zu meiner Persönlichkeit passen
  • Das Ergebnis soll sich anfühlen wie eine digitale Visitenkarte mit Charakter, Tiefe und exzellentem Geschmack

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants