index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>PromptGenie & PromptGott | AI Prompts, SEO Workflows & Automation</title>
  <meta name="description" content="PromptGenie und PromptGott: AI Prompts, SEO-Workflows, Prompt Engineering, Automatisierung, GitHub-Projekte, ORCID-Profil und MindPal AI Workflows von Jean Maurice Port." />
  <meta name="robots" content="index, follow" />
  <meta property="og:title" content="PromptGenie & PromptGott" />
  <meta property="og:description" content="AI Prompts, SEO Workflows, Automatisierung und Research-Profile von Jean Maurice Port." />
  <meta property="og:type" content="website" />
  <meta name="theme-color" content="#111827" />

  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />

  <style>
    :root {
      --bg: #070816;
      --card: rgba(255, 255, 255, 0.08);
      --card-border: rgba(255, 255, 255, 0.16);
      --text: #f8fafc;
      --muted: #cbd5e1;
      --accent: #a78bfa;
      --accent-2: #22d3ee;
      --accent-3: #f472b6;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background:
        radial-gradient(circle at 15% 10%, rgba(124, 58, 237, 0.35), transparent 32rem),
        radial-gradient(circle at 80% 15%, rgba(34, 211, 238, 0.22), transparent 30rem),
        radial-gradient(circle at 55% 90%, rgba(244, 114, 182, 0.18), transparent 34rem),
        var(--bg);
      color: var(--text);
      overflow-x: hidden;
    }

    .noise::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.13;
      z-index: 1;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    }

    .glass {
      background: var(--card);
      border: 1px solid var(--card-border);
      box-shadow: 0 24px 80px rgba(0,0,0,0.28);
      backdrop-filter: blur(18px);
    }

    .gradient-text {
      background: linear-gradient(90deg, #fff, #c4b5fd, #67e8f9, #f9a8d4);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .orb {
      position: absolute;
      border-radius: 999px;
      filter: blur(8px);
      opacity: 0.8;
      animation: float 9s ease-in-out infinite;
    }

    .orb:nth-child(2) { animation-delay: -3s; }
    .orb:nth-child(3) { animation-delay: -6s; }

    @keyframes float {
      0%, 100% { transform: translate3d(0,0,0) scale(1); }
      50% { transform: translate3d(18px,-22px,0) scale(1.06); }
    }

    .link-card {
      position: relative;
      overflow: hidden;
      transition: transform .28s ease, border-color .28s ease, background .28s ease;
    }

    .link-card::before {
      content: '';
      position: absolute;
      inset: -1px;
      background: linear-gradient(120deg, transparent, rgba(255,255,255,.18), transparent);
      transform: translateX(-120%);
      transition: transform .7s ease;
    }

    .link-card:hover {
      transform: translateY(-6px);
      border-color: rgba(255,255,255,.32);
      background: rgba(255,255,255,.12);
    }

    .link-card:hover::before { transform: translateX(120%); }

    .pill {
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
    }

    .grid-bg {
      background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: linear-gradient(to bottom, black, transparent 85%);
    }
  </style>
</head>
<body class="noise">
  <div class="fixed inset-0 grid-bg opacity-50 pointer-events-none"></div>

  <header class="relative z-10">
    <nav class="mx-auto flex max-w-7xl items-center justify-between px-6 py-6 lg:px-8">
      <a href="#top" class="flex items-center gap-3 font-black tracking-tight">
        <span class="flex h-10 w-10 items-center justify-center rounded-2xl bg-white text-gray-950 shadow-xl">PG</span>
        <span>PromptGenie</span>
      </a>
      <div class="hidden items-center gap-6 text-sm text-slate-300 md:flex">
        <a href="#links" class="hover:text-white">Links</a>
        <a href="#system" class="hover:text-white">System</a>
        <a href="#about" class="hover:text-white">Profil</a>
        <a href="https://promptgenie.substack.com" target="_blank" rel="noopener" class="rounded-full bg-white px-5 py-2 font-bold text-gray-950 transition hover:scale-105">Substack öffnen</a>
      </div>
    </nav>
  </header>

  <main id="top" class="relative z-10">
    <section class="relative mx-auto max-w-7xl px-6 pb-20 pt-14 lg:px-8 lg:pb-28 lg:pt-20">
      <div class="orb left-8 top-24 h-24 w-24 bg-cyan-400/30"></div>
      <div class="orb right-16 top-20 h-32 w-32 bg-violet-500/30"></div>
      <div class="orb bottom-24 left-1/2 h-20 w-20 bg-pink-400/30"></div>

      <div class="mx-auto max-w-5xl text-center">
        <div class="mx-auto mb-8 inline-flex items-center gap-2 rounded-full pill px-4 py-2 text-sm text-slate-200">
          <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
          AI Prompts · SEO Workflows · Automation · Research
        </div>

        <h1 class="text-5xl font-black leading-[0.95] tracking-tight md:text-7xl lg:text-8xl">
          Sichtbarkeit für <span class="gradient-text">PromptGenie</span> & PromptGott.
        </h1>

        <p class="mx-auto mt-8 max-w-3xl text-lg leading-8 text-slate-300 md:text-xl">
          Ein kuratierter Link-Hub für AI-Prompts, SEO-Systeme, Prompt Engineering, Automatisierung,
          Research-Profile und technische Experimente von Jean Maurice Port.
        </p>

        <div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
          <a href="#links" class="group inline-flex w-full items-center justify-center gap-3 rounded-full bg-white px-8 py-4 text-base font-extrabold text-gray-950 shadow-2xl shadow-white/10 transition hover:scale-[1.03] sm:w-auto">
            Alle Links entdecken
            <i class="fa-solid fa-arrow-down text-sm transition group-hover:translate-y-1"></i>
          </a>
          <a href="https://own.page/promptgott" target="_blank" rel="noopener" class="inline-flex w-full items-center justify-center gap-3 rounded-full border border-white/20 px-8 py-4 text-base font-bold text-white transition hover:bg-white/10 sm:w-auto">
            PromptGott öffnen
            <i class="fa-solid fa-arrow-up-right-from-square text-sm"></i>
          </a>
        </div>
      </div>
    </section>

    <section id="links" class="mx-auto max-w-7xl px-6 py-16 lg:px-8">
      <div class="mb-10 flex flex-col justify-between gap-6 md:flex-row md:items-end">
        <div>
          <p class="mb-3 text-sm font-bold uppercase tracking-[0.25em] text-cyan-300">Link Promotion</p>
          <h2 class="text-3xl font-black tracking-tight md:text-5xl">Zentrale Accounts</h2>
        </div>
        <p class="max-w-xl text-slate-300">
          Jede Karte ist als klarer Conversion-Pfad gebaut: sofort verständlich, mobil nutzbar, visuell stark und direkt klickbar.
        </p>
      </div>

      <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
        <a href="https://promptgenie.substack.com" target="_blank" rel="noopener" class="link-card glass rounded-3xl p-7">
          <div class="mb-8 flex items-center justify-between">
            <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-orange-400/20 text-2xl text-orange-200">
              <i class="fa-solid fa-newspaper"></i>
            </div>
            <i class="fa-solid fa-arrow-up-right-from-square text-slate-400"></i>
          </div>
          <h3 class="mb-3 text-2xl font-black">PromptGenie Newsletter</h3>
          <p class="text-slate-300">AI-Prompts, SEO-Workflows, Automatisierung und praktische KI-Anwendungen als Substack.</p>
        </a>

        <a href="https://own.page/promptgott" target="_blank" rel="noopener" class="link-card glass rounded-3xl p-7 md:col-span-1 xl:col-span-2">
          <div class="mb-8 flex items-center justify-between">
            <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-violet-400/20 text-2xl text-violet-200">
              <i class="fa-solid fa-wand-magic-sparkles"></i>
            </div>
            <i class="fa-solid fa-arrow-up-right-from-square text-slate-400"></i>
          </div>
          <h3 class="mb-3 text-3xl font-black">PromptGott Linkhub</h3>
          <p class="max-w-2xl text-slate-300">Der kompakte Hub für Profile, Inhalte, Tools und externe Ressourcen rund um AI, SEO und Prompt-Systeme.</p>
        </a>

        <a href="https://promptgenie.substack.com/publish/home" target="_blank" rel="noopener" class="link-card glass rounded-3xl p-7">
          <div class="mb-8 flex items-center justify-between">
            <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-emerald-400/20 text-2xl text-emerald-200">
              <i class="fa-solid fa-pen-nib"></i>
            </div>
            <i class="fa-solid fa-arrow-up-right-from-square text-slate-400"></i>
          </div>
          <h3 class="mb-3 text-2xl font-black">Publishing Desk</h3>
          <p class="text-slate-300">Direkter Zugang zum Substack-Publishing-Bereich für neue PromptGenie-Inhalte.</p>
        </a>

        <a href="https://orcid.org/0009-0009-5853-149X" target="_blank" rel="noopener" class="link-card glass rounded-3xl p-7">
          <div class="mb-8 flex items-center justify-between">
            <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-green-400/20 text-2xl text-green-200">
              <i class="fa-brands fa-orcid"></i>
            </div>
            <i class="fa-solid fa-arrow-up-right-from-square text-slate-400"></i>
          </div>
          <h3 class="mb-3 text-2xl font-black">ORCID Profile</h3>
          <p class="text-slate-300">Research-ID für wissenschaftliche Zuordnung, Publikationen und akademische Sichtbarkeit.</p>
        </a>

        <a href="http://github.com/HanSEOHafen" target="_blank" rel="noopener" class="link-card glass rounded-3xl p-7">
          <div class="mb-8 flex items-center justify-between">
            <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-slate-400/20 text-2xl text-slate-100">
              <i class="fa-brands fa-github"></i>
            </div>
            <i class="fa-solid fa-arrow-up-right-from-square text-slate-400"></i>
          </div>
          <h3 class="mb-3 text-2xl font-black">GitHub</h3>
          <p class="text-slate-300">Code, technische SEO-Experimente, Automatisierungsideen und AI-Prototypen.</p>
        </a>

        <a href="https://app.mindpal.space?referral_code=i2AWuWNmB4zkoppl" target="_blank" rel="noopener" class="link-card glass rounded-3xl p-7 md:col-span-2 xl:col-span-3">
          <div class="mb-8 flex items-center justify-between">
            <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-cyan-400/20 text-2xl text-cyan-200">
              <i class="fa-solid fa-diagram-project"></i>
            </div>
            <i class="fa-solid fa-arrow-up-right-from-square text-slate-400"></i>
          </div>
          <h3 class="mb-3 text-3xl font-black">MindPal AI Workflows</h3>
          <p class="max-w-3xl text-slate-300">AI-Agenten, Workflow-Automatisierung und produktive Systeme für wiederholbare Prompt- und SEO-Prozesse.</p>
        </a>
      </div>
    </section>

    <section id="system" class="mx-auto max-w-7xl px-6 py-16 lg:px-8">
      <div class="glass rounded-[2rem] p-8 md:p-12">
        <div class="grid gap-10 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
          <div>
            <p class="mb-3 text-sm font-bold uppercase tracking-[0.25em] text-pink-300">Positionierung</p>
            <h2 class="text-3xl font-black tracking-tight md:text-5xl">Ein Ökosystem statt loser Links.</h2>
            <p class="mt-6 text-lg leading-8 text-slate-300">
              Die Seite bündelt Substack, Linkhub, GitHub, Research-ID und AI-Workflow-Tooling in einer klaren Markenarchitektur.
            </p>
          </div>

          <div class="grid gap-4 sm:grid-cols-2">
            <div class="rounded-3xl border border-white/10 bg-white/5 p-6">
              <div class="mb-4 text-3xl">🧠</div>
              <h3 class="mb-2 font-black">Prompt Engineering</h3>
              <p class="text-sm leading-6 text-slate-300">Prompt-Systeme, Templates und AI-gestützte Arbeitsprozesse.</p>
            </div>
            <div class="rounded-3xl border border-white/10 bg-white/5 p-6">
              <div class="mb-4 text-3xl">📈</div>
              <h3 class="mb-2 font-black">SEO Workflows</h3>
              <p class="text-sm leading-6 text-slate-300">Suchintention, Content-Optimierung, technische SEO und Automatisierung.</p>
            </div>
            <div class="rounded-3xl border border-white/10 bg-white/5 p-6">
              <div class="mb-4 text-3xl">⚙️</div>
              <h3 class="mb-2 font-black">Automation</h3>
              <p class="text-sm leading-6 text-slate-300">AI-Agenten, Toolchains und wiederverwendbare Produktionssysteme.</p>
            </div>
            <div class="rounded-3xl border border-white/10 bg-white/5 p-6">
              <div class="mb-4 text-3xl">🔬</div>
              <h3 class="mb-2 font-black">Research</h3>
              <p class="text-sm leading-6 text-slate-300">ORCID, Experimente, GitHub und nachvollziehbare digitale Identität.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="about" class="mx-auto max-w-7xl px-6 py-16 lg:px-8">
      <div class="grid gap-8 md:grid-cols-3">
        <div class="glass rounded-3xl p-7">
          <p class="text-4xl font-black gradient-text">SEO</p>
          <p class="mt-3 text-slate-300">Strategie, technische Optimierung und organische Reichweite.</p>
        </div>
        <div class="glass rounded-3xl p-7">
          <p class="text-4xl font-black gradient-text">AI</p>
          <p class="mt-3 text-slate-300">Prompt Engineering, LLM-Workflows und Content-Systeme.</p>
        </div>
        <div class="glass rounded-3xl p-7">
          <p class="text-4xl font-black gradient-text">Links</p>
          <p class="mt-3 text-slate-300">Zentrale Profile für bessere Auffindbarkeit und klare Nutzerführung.</p>
        </div>
      </div>
    </section>

    <section class="mx-auto max-w-5xl px-6 py-20 text-center lg:px-8">
      <div class="glass rounded-[2rem] p-8 md:p-12">
        <h2 class="text-3xl font-black tracking-tight md:text-5xl">Starte beim wichtigsten Kanal.</h2>
        <p class="mx-auto mt-5 max-w-2xl text-slate-300">Für neue Inhalte, AI-Prompt-Systeme und SEO-Workflows ist PromptGenie der primäre Einstiegspunkt.</p>
        <div class="mt-8 flex flex-col justify-center gap-4 sm:flex-row">
          <a href="https://promptgenie.substack.com" target="_blank" rel="noopener" class="inline-flex items-center justify-center gap-3 rounded-full bg-white px-8 py-4 font-extrabold text-gray-950 transition hover:scale-[1.03]">
            PromptGenie lesen
            <i class="fa-solid fa-arrow-up-right-from-square text-sm"></i>
          </a>
          <a href="http://github.com/HanSEOHafen" target="_blank" rel="noopener" class="inline-flex items-center justify-center gap-3 rounded-full border border-white/20 px-8 py-4 font-bold text-white transition hover:bg-white/10">
            GitHub ansehen
            <i class="fa-brands fa-github"></i>
          </a>
        </div>
      </div>
    </section>
  </main>

  <footer class="relative z-10 border-t border-white/10 px-6 py-10 lg:px-8">
    <div class="mx-auto flex max-w-7xl flex-col justify-between gap-6 text-sm text-slate-400 md:flex-row md:items-center">
      <p>© 2026 Jean Maurice Port · PromptGenie · PromptGott</p>
      <div class="flex flex-wrap gap-4">
        <a href="https://promptgenie.substack.com" target="_blank" rel="noopener" class="hover:text-white">Substack</a>
        <a href="https://own.page/promptgott" target="_blank" rel="noopener" class="hover:text-white">PromptGott</a>
        <a href="https://orcid.org/0009-0009-5853-149X" target="_blank" rel="noopener" class="hover:text-white">ORCID</a>
        <a href="http://github.com/HanSEOHafen" target="_blank" rel="noopener" class="hover:text-white">GitHub</a>
      </div>
    </div>
  </footer>
</body>
</html>