Hugging Face's logo

Spaces:
hansmoritzhafen
/
jeanwebsite
Running

App Files Community
1
jeanwebsite / index.html
hansmoritzhafen's picture
hansmoritzhafen
Update index.html
bae491f verified
Raw History Blame
17.3 kB
<!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>