hansmoritzhafen commited on
Commit
2f78f01
·
1 Parent(s): 6a09633

Update index.html (#1)

Browse files

- Update index.html (bae491fff3daef4a021594ab677b29b44d12de82)

Files changed (1) hide show
  1. index.html +317 -730
index.html CHANGED
@@ -1,754 +1,341 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Jean Maurice Port | SEO & AI Expert</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
- <style>
10
- @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
-
12
- body {
13
- font-family: 'Poppins', sans-serif;
14
- scroll-behavior: smooth;
15
- }
16
-
17
- .gradient-bg {
18
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
- }
20
-
21
- .timeline-item:not(:last-child)::after {
22
- content: '';
23
- position: absolute;
24
- left: 7px;
25
- top: 24px;
26
- height: calc(100% - 24px);
27
- width: 2px;
28
- background: #e2e8f0;
29
- }
30
-
31
- .skill-bar {
32
- height: 8px;
33
- background-color: #e2e8f0;
34
- border-radius: 4px;
35
- overflow: hidden;
36
- }
37
-
38
- .skill-progress {
39
- height: 100%;
40
- border-radius: 4px;
41
- background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
42
- transition: width 1s ease-in-out;
43
- }
44
-
45
- .card-hover:hover {
46
- transform: translateY(-5px);
47
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
48
- }
49
-
50
- .animate-on-scroll {
51
- opacity: 0;
52
- transform: translateY(20px);
53
- transition: opacity 0.6s ease-out, transform 0.6s ease-out;
54
- }
55
-
56
- .animate-on-scroll.visible {
57
- opacity: 1;
58
- transform: translateY(0);
59
- }
60
-
61
- .form-message {
62
- display: none;
63
- padding: 1rem;
64
- margin-top: 1rem;
65
- border-radius: 0.5rem;
66
- }
67
-
68
- .success {
69
- background-color: #d1fae5;
70
- color: #065f46;
71
- }
72
-
73
- .error {
74
- background-color: #fee2e2;
75
- color: #b91c1c;
76
- }
77
-
78
- .comic-avatar {
79
- border: 4px solid white;
80
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
81
- filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
82
- }
83
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
84
  </head>
85
- <body class="bg-gray-50 text-gray-800">
86
- <!-- Navigation -->
87
- <nav class="fixed w-full bg-white shadow-md z-50">
88
- <div class="container mx-auto px-6 py-3 flex justify-between items-center">
89
- <a href="#" class="text-2xl font-bold text-indigo-600">JMP</a>
90
- <div class="hidden md:flex space-x-8">
91
- <a href="#about" class="text-gray-600 hover:text-indigo-600 transition">About</a>
92
- <a href="#experience" class="text-gray-600 hover:text-indigo-600 transition">Experience</a>
93
- <a href="#education" class="text-gray-600 hover:text-indigo-600 transition">Education</a>
94
- <a href="#skills" class="text-gray-600 hover:text-indigo-600 transition">Skills</a>
95
- <a href="#contact" class="text-gray-600 hover:text-indigo-600 transition">Contact</a>
96
- </div>
97
- <button class="md:hidden focus:outline-none" id="mobile-menu-button">
98
- <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
99
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
100
- </svg>
101
- </button>
 
 
 
 
 
 
 
 
 
 
 
102
  </div>
103
- <div class="md:hidden hidden bg-white w-full px-6 py-3" id="mobile-menu">
104
- <div class="flex flex-col space-y-3">
105
- <a href="#about" class="text-gray-600 hover:text-indigo-600 transition">About</a>
106
- <a href="#experience" class="text-gray-600 hover:text-indigo-600 transition">Experience</a>
107
- <a href="#education" class="text-gray-600 hover:text-indigo-600 transition">Education</a>
108
- <a href="#skills" class="text-gray-600 hover:text-indigo-600 transition">Skills</a>
109
- <a href="#contact" class="text-gray-600 hover:text-indigo-600 transition">Contact</a>
110
- </div>
 
 
 
 
 
 
 
 
 
 
 
111
  </div>
112
- </nav>
 
 
 
 
 
 
 
 
 
 
 
 
113
 
114
- <!-- Hero Section -->
115
- <section class="gradient-bg text-white pt-32 pb-20">
116
- <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
117
- <div class="md:w-1/2 mb-10 md:mb-0 animate-on-scroll">
118
- <h1 class="text-4xl md:text-5xl font-bold mb-4">Jean Maurice Port</h1>
119
- <h2 class="text-2xl md:text-3xl font-semibold mb-6">SEO & AI Expert</h2>
120
- <p class="text-lg mb-8">Highly experienced and results-driven SEO professional with 5+ years of experience across diverse industries including iGaming, Finance, Retail, E-commerce, and Cryptocurrency.</p>
121
- <div class="flex space-x-4">
122
- <a href="#contact" class="bg-white text-indigo-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition">Contact Me</a>
123
- <a href="#experience" class="border-2 border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-indigo-600 transition">My Experience</a>
124
- </div>
125
  </div>
126
- <div class="md:w-1/2 flex justify-center animate-on-scroll">
127
- <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden comic-avatar">
128
- <img src="https://i.imgur.com/3QZk7Qj.png" alt="Jean Maurice Port" class="w-full h-full object-cover">
129
- </div>
 
 
 
 
 
 
130
  </div>
131
- </div>
132
- </section>
 
 
 
133
 
134
- <!-- About Section -->
135
- <section id="about" class="py-20 bg-white">
136
- <div class="container mx-auto px-6">
137
- <h2 class="text-3xl font-bold text-center mb-12 animate-on-scroll">About Me</h2>
138
- <div class="flex flex-col md:flex-row items-center animate-on-scroll">
139
- <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
140
- <p class="text-lg mb-6">Proven track record of developing and executing comprehensive SEO strategies that drive significant organic traffic growth, improve search rankings, and enhance user engagement.</p>
141
- <p class="text-lg mb-6">Expertise spans all areas of SEO, including technical SEO, on-page optimization, off-page optimization (link building), content strategy, and App Store Optimization (ASO).</p>
142
- <p class="text-lg">Proficient in leveraging a wide range of SEO and AI tools to analyze data, identify opportunities, and implement data-driven solutions. Strong leadership and collaboration skills, with experience managing projects, leading teams, and working effectively with cross-functional stakeholders.</p>
143
- </div>
144
- <div class="md:w-1/2 bg-gray-50 p-8 rounded-xl shadow-lg">
145
- <h3 class="text-xl font-semibold mb-4">Personal Information</h3>
146
- <div class="space-y-4">
147
- <div class="flex items-center">
148
- <div class="w-8 text-indigo-600">
149
- <i class="fas fa-phone"></i>
150
- </div>
151
- <span>(+356) 99660356</span>
152
- </div>
153
- <div class="flex items-center">
154
- <div class="w-8 text-indigo-600">
155
- <i class="fas fa-envelope"></i>
156
- </div>
157
- <span>onpointmalta@gmail.com</span>
158
- </div>
159
- <div class="flex items-center">
160
- <div class="w-8 text-indigo-600">
161
- <i class="fab fa-linkedin"></i>
162
- </div>
163
- <a href="https://www.linkedin.com/in/hansmoritzhafen/" target="_blank" class="hover:text-indigo-600">linkedin.com/in/hansmoritzhafen/</a>
164
- </div>
165
- <div class="flex items-center">
166
- <div class="w-8 text-indigo-600">
167
- <i class="fas fa-language"></i>
168
- </div>
169
- <span>German (Native), English (Fluent)</span>
170
- </div>
171
- <div class="flex items-center">
172
- <div class="w-8 text-indigo-600">
173
- <i class="fas fa-map-marker-alt"></i>
174
- </div>
175
- <span>Malta (Able to travel)</span>
176
- </div>
177
- </div>
178
- <h3 class="text-xl font-semibold mt-8 mb-4">Key Strengths</h3>
179
- <div class="flex flex-wrap gap-2">
180
- <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">SEO Strategy</span>
181
- <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">AI Integration</span>
182
- <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Technical SEO</span>
183
- <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Content Optimization</span>
184
- <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Link Building</span>
185
- <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Data Analysis</span>
186
- <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Team Leadership</span>
187
- <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Cross-functional Collaboration</span>
188
- </div>
189
- </div>
190
  </div>
191
- </div>
192
- </section>
 
 
 
193
 
194
- <!-- Experience Section -->
195
- <section id="experience" class="py-20 bg-gray-50">
196
- <div class="container mx-auto px-6">
197
- <h2 class="text-3xl font-bold text-center mb-12 animate-on-scroll">Professional Experience</h2>
198
-
199
- <div class="relative max-w-3xl mx-auto">
200
- <!-- Greyheart Media -->
201
- <div class="mb-12 timeline-item pl-8 relative animate-on-scroll">
202
- <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-indigo-600 border-4 border-white shadow-md"></div>
203
- <div class="bg-white p-6 rounded-xl shadow-md card-hover transition duration-300">
204
- <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
205
- <h3 class="text-xl font-bold">Greyheart Media Ltd, Leeds, England</h3>
206
- <span class="text-indigo-600 font-semibold">AUGUST 2024 – TODAY</span>
207
- </div>
208
- <h4 class="text-lg font-semibold mb-4">Head of Artificial Intelligence (SEO & Team Leadership)</h4>
209
- <div class="mb-4">
210
- <span class="font-semibold text-indigo-600">Key Achievement:</span> Spearheaded the development and implementation of AI-driven solutions that significantly improved SEO performance, technical efficiency, content quality, and user engagement across multiple brands.
211
- </div>
212
- <ul class="list-disc pl-5 space-y-2">
213
- <li>Planned, monitored, and oversaw comprehensive SEO strategies, encompassing technical SEO, on-page optimization, link building and content marketing.</li>
214
- <li>Developed and evaluated LLM prompts for content generation, technical SEO tasks (e.g., schema markup), and on-page optimization.</li>
215
- <li>Provided team leadership and guidance, fostering collaboration and knowledge sharing.</li>
216
- </ul>
217
- </div>
218
- </div>
219
-
220
- <!-- OnPoint Media -->
221
- <div class="mb-12 timeline-item pl-8 relative animate-on-scroll">
222
- <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-indigo-600 border-4 border-white shadow-md"></div>
223
- <div class="bg-white p-6 rounded-xl shadow-md card-hover transition duration-300">
224
- <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
225
- <h3 class="text-xl font-bold">OnPoint Media, Xlendi, Malta</h3>
226
- <span class="text-indigo-600 font-semibold">JANUARY 2023 – AUGUST 2024</span>
227
- </div>
228
- <h4 class="text-lg font-semibold mb-4">Generative AI Engineer (Focus: SEO, iGaming & Finance Market)</h4>
229
- <div class="mb-4">
230
- <span class="font-semibold text-indigo-600">Key Achievement:</span> Implemented AI-powered solutions that enhanced SEO performance, addressed technical website issues, and improved content quality for clients across various industries, with a primary focus on iGaming and related sectors.
231
- </div>
232
- <ul class="list-disc pl-5 space-y-2">
233
- <li>Optimized prompts and developed generative models for SEO, ASO, and content creation, including applications for technical SEO, on-page optimization, and content marketing.</li>
234
- <li>Utilized a wide range of SEO and AI tools to streamline workflows, analyze data, and improve results.</li>
235
- <li>Trained iGaming teams in prompt engineering and AI-supported work processes.</li>
236
- </ul>
237
- </div>
238
- </div>
239
-
240
- <!-- iGaming.com -->
241
- <div class="mb-12 timeline-item pl-8 relative animate-on-scroll">
242
- <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-indigo-600 border-4 border-white shadow-md"></div>
243
- <div class="bg-white p-6 rounded-xl shadow-md card-hover transition duration-300">
244
- <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
245
- <h3 class="text-xl font-bold">iGaming.com, Bulgaria / Berlin</h3>
246
- <span class="text-indigo-600 font-semibold">JUNE 2020 – DECEMBER 2022</span>
247
- </div>
248
- <h4 class="text-lg font-semibold mb-4">Senior OffPage SEO Manager</h4>
249
- <div class="mb-4">
250
- <span class="font-semibold text-indigo-600">Key Achievement:</span> Developed and executed comprehensive SEO strategies, encompassing technical SEO audits, on-page optimization, link building campaigns, and content strategy, resulting in significant increases in organic traffic, search rankings, and user engagement for a network of iGaming sites across global markets.
251
- </div>
252
- <ul class="list-disc pl-5 space-y-2">
253
- <li>Conceived and implemented SEO strategies covering all aspects of SEO: technical SEO, on-page optimization, content planning, link building (including various link types) and semantic analysis.</li>
254
- <li>Conducted in-depth technical SEO audits, identified and resolved website issues (including Mobile-First Index optimization), and improved site performance.</li>
255
- <li>Managed organic backlinks opportunities, identified and resolved missed opportunities, created and improved link outreach campaigns, and built topical Expertise-Authority-Trust (E-A-T).</li>
256
- </ul>
257
- </div>
258
- </div>
259
-
260
- <!-- Previous Roles -->
261
- <div class="mb-12 pl-8 animate-on-scroll">
262
- <div class="bg-white p-6 rounded-xl shadow-md card-hover transition duration-300">
263
- <h3 class="text-xl font-bold mb-4">Previous Roles</h3>
264
- <div class="space-y-6">
265
- <div>
266
- <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-2">
267
- <h4 class="font-semibold">Digital Media Transformers, Saarbrücken, Germany</h4>
268
- <span class="text-indigo-600 text-sm">NOVEMBER 2016 – JANUARY 2021</span>
269
- </div>
270
- <p class="text-gray-700">Managing Director Marketing - Provided strategic consulting and implemented digital marketing and branding concepts for clients across various industries, including iGaming, finance, retail, and consumer electronics.</p>
271
- </div>
272
- <div>
273
- <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-2">
274
- <h4 class="font-semibold">kannkind GmbH, Kandel, Rhineland-Palatinate, Germany</h4>
275
- <span class="text-indigo-600 text-sm">AUGUST 2015 – AUGUST 2017</span>
276
- </div>
277
- <p class="text-gray-700">CEO & Co-Owner - Developed digital business models and brand strategies for digital startups, including in the iGaming sector.</p>
278
- </div>
279
- <div>
280
- <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-2">
281
- <h4 class="font-semibold">Novomatic AG / GreenTube</h4>
282
- <span class="text-indigo-600 text-sm">JANUARY 2009 - OCTOBER 2016</span>
283
- </div>
284
- <p class="text-gray-700">Power Affiliate & Consultant - Built a network of 500+ websites focused on Novomatic & Gauselmann slot games (iGaming industry), generating over €30 million in deposits.</p>
285
- </div>
286
- </div>
287
- </div>
288
- </div>
289
  </div>
290
- </div>
291
- </section>
 
 
 
292
 
293
- <!-- Education Section -->
294
- <section id="education" class="py-20 bg-white">
295
- <div class="container mx-auto px-6">
296
- <h2 class="text-3xl font-bold text-center mb-12 animate-on-scroll">Education & Certifications</h2>
297
-
298
- <div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-8">
299
- <!-- Education -->
300
- <div class="animate-on-scroll">
301
- <h3 class="text-2xl font-semibold mb-6 text-indigo-600">Education</h3>
302
- <div class="space-y-6">
303
- <div class="bg-gray-50 p-6 rounded-xl shadow-md card-hover transition duration-300">
304
- <h4 class="font-bold text-lg mb-2">University of Trier, Germany</h4>
305
- <p class="text-gray-600 mb-2">Master of Arts (M.A.) in Economics</p>
306
- <p class="text-sm text-gray-500 mb-2">2013 – 2017 | Grade: 1,6</p>
307
- <p class="text-gray-700">Focus: Economic analysis, strategic management, digital markets. Freelance lecturer for Finance & Accounting as well as Online Marketing & SEO under Prof. Dr. Christian Kammlott.</p>
308
- </div>
309
- <div class="bg-gray-50 p-6 rounded-xl shadow-md card-hover transition duration-300">
310
- <h4 class="font-bold text-lg mb-2">University of Trier, Germany</h4>
311
- <p class="text-gray-600 mb-2">Bachelor of Arts in Economics</p>
312
- <p class="text-sm text-gray-500 mb-2">2007 – 2010 | Grade: 1,3</p>
313
- <p class="text-gray-700">Focus areas: economics, business management, statistics</p>
314
- </div>
315
- <div class="bg-gray-50 p-6 rounded-xl shadow-md card-hover transition duration-300">
316
- <h4 class="font-bold text-lg mb-2">Saarland University, Germany</h4>
317
- <p class="text-gray-600 mb-2">Further education in English literature</p>
318
- <p class="text-sm text-gray-500 mb-2">2012 – 2013</p>
319
- <p class="text-gray-700">Study of literary history, linguistic analysis and creative writing techniques</p>
320
- </div>
321
- </div>
322
- </div>
323
-
324
- <!-- Certifications -->
325
- <div class="animate-on-scroll">
326
- <h3 class="text-2xl font-semibold mb-6 text-indigo-600">Certifications</h3>
327
- <div class="bg-gray-50 p-6 rounded-xl shadow-md card-hover transition duration-300 h-full">
328
- <div class="space-y-4">
329
- <div>
330
- <h4 class="font-bold">Google Certificates (2024)</h4>
331
- <ul class="list-disc pl-5 mt-2 space-y-1 text-sm">
332
- <li>Attention Mechanism (Certificate ID: 6876862)</li>
333
- <li>Create Image Captioning Models (Certificate ID: 6876967)</li>
334
- <li>Digital Transformation with Google Cloud (Certificate ID: 6874941)</li>
335
- <li>Duet AI in Google Sheets (Certificate ID: 6877216)</li>
336
- <li>Encoder-Decoder Architecture (Certificate ID: 6876912)</li>
337
- <li>Generative AI Fundamentals (Certificate ID: 6874812)</li>
338
- <li>Infrastructure and Application Modernization with Google Cloud (Certificate ID: 6876357)</li>
339
- <li>Innovating with Data and Google Cloud (Certificate ID: 6875834)</li>
340
- <li>Introduction to Large Language Models (Certificate ID: 6875555)</li>
341
- <li>Responsible AI: Applying AI Principles with Google Cloud (Certificate ID: 6878013)</li>
342
- <li>Transformer Models and BERT Model (Certificate ID: 6876942)</li>
343
- </ul>
344
- </div>
345
- <div>
346
- <h4 class="font-bold mt-4">Other Certifications</h4>
347
- <ul class="list-disc pl-5 mt-2 space-y-1 text-sm">
348
- <li>Certified SOSTAC Planning Expert – Smart Insights</li>
349
- <li>Digital Marketing Brain – Google Digital Garage</li>
350
- <li>SemRush Senior Expert – Semrush</li>
351
- </ul>
352
- </div>
353
- </div>
354
- </div>
355
- </div>
356
  </div>
357
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
358
  </section>
359
 
360
- <!-- Skills Section -->
361
- <section id="skills" class="py-20 bg-gray-50">
362
- <div class="container mx-auto px-6">
363
- <h2 class="text-3xl font-bold text-center mb-12 animate-on-scroll">Technical Knowledge & Skills</h2>
364
-
365
- <div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-8">
366
- <!-- SEO Skills -->
367
- <div class="animate-on-scroll">
368
- <h3 class="text-xl font-semibold mb-4 text-indigo-600">SEO & Content Optimization</h3>
369
- <div class="space-y-4">
370
- <div>
371
- <div class="flex justify-between mb-1">
372
- <span>Ahrefs, SEMrush, Moz</span>
373
- <span>95%</span>
374
- </div>
375
- <div class="skill-bar">
376
- <div class="skill-progress" style="width: 95%"></div>
377
- </div>
378
- </div>
379
- <div>
380
- <div class="flex justify-between mb-1">
381
- <span>Screaming Frog, Deepcrawl</span>
382
- <span>90%</span>
383
- </div>
384
- <div class="skill-bar">
385
- <div class="skill-progress" style="width: 90%"></div>
386
- </div>
387
- </div>
388
- <div>
389
- <div class="flex justify-between mb-1">
390
- <span>Majestic, SurferSEO</span>
391
- <span>85%</span>
392
- </div>
393
- <div class="skill-bar">
394
- <div class="skill-progress" style="width: 85%"></div>
395
- </div>
396
- </div>
397
- <div>
398
- <div class="flex justify-between mb-1">
399
- <span>Google Search Console</span>
400
- <span>95%</span>
401
- </div>
402
- <div class="skill-bar">
403
- <div class="skill-progress" style="width: 95%"></div>
404
- </div>
405
- </div>
406
- <div>
407
- <div class="flex justify-between mb-1">
408
- <span>Google Analytics (GA, GA4)</span>
409
- <span>90%</span>
410
- </div>
411
- <div class="skill-bar">
412
- <div class="skill-progress" style="width: 90%"></div>
413
- </div>
414
- </div>
415
- </div>
416
- </div>
417
-
418
- <!-- Technical Skills -->
419
- <div class="animate-on-scroll">
420
- <h3 class="text-xl font-semibold mb-4 text-indigo-600">Technical SEO & Development</h3>
421
- <div class="space-y-4">
422
- <div>
423
- <div class="flex justify-between mb-1">
424
- <span>Technical SEO Audits</span>
425
- <span>95%</span>
426
- </div>
427
- <div class="skill-bar">
428
- <div class="skill-progress" style="width: 95%"></div>
429
- </div>
430
- </div>
431
- <div>
432
- <div class="flex justify-between mb-1">
433
- <span>Mobile-First Optimization</span>
434
- <span>90%</span>
435
- </div>
436
- <div class="skill-bar">
437
- <div class="skill-progress" style="width: 90%"></div>
438
- </div>
439
- </div>
440
- <div>
441
- <div class="flex justify-between mb-1">
442
- <span>HTML, CSS, JavaScript</span>
443
- <span>80%</span>
444
- </div>
445
- <div class="skill-bar">
446
- <div class="skill-progress" style="width: 80%"></div>
447
- </div>
448
- </div>
449
- <div>
450
- <div class="flex justify-between mb-1">
451
- <span>WordPress & CMS Platforms</span>
452
- <span>85%</span>
453
- </div>
454
- <div class="skill-bar">
455
- <div class="skill-progress" style="width: 85%"></div>
456
- </div>
457
- </div>
458
- </div>
459
- </div>
460
-
461
- <!-- AI & Data Skills -->
462
- <div class="animate-on-scroll">
463
- <h3 class="text-xl font-semibold mb-4 text-indigo-600">AI & Data Analysis</h3>
464
- <div class="space-y-4">
465
- <div>
466
- <div class="flex justify-between mb-1">
467
- <span>ChatGPT, Google AI Studio</span>
468
- <span>90%</span>
469
- </div>
470
- <div class="skill-bar">
471
- <div class="skill-progress" style="width: 90%"></div>
472
- </div>
473
- </div>
474
- <div>
475
- <div class="flex justify-between mb-1">
476
- <span>Prompt Engineering</span>
477
- <span>95%</span>
478
- </div>
479
- <div class="skill-bar">
480
- <div class="skill-progress" style="width: 95%"></div>
481
- </div>
482
- </div>
483
- <div>
484
- <div class="flex justify-between mb-1">
485
- <span>Google Sheets, Excel</span>
486
- <span>90%</span>
487
- </div>
488
- <div class="skill-bar">
489
- <div class="skill-progress" style="width: 90%"></div>
490
- </div>
491
- </div>
492
- <div>
493
- <div class="flex justify-between mb-1">
494
- <span>SQL, BigQuery, Looker</span>
495
- <span>75%</span>
496
- </div>
497
- <div class="skill-bar">
498
- <div class="skill-progress" style="width: 75%"></div>
499
- </div>
500
- </div>
501
- </div>
502
- </div>
503
-
504
- <!-- Industry Expertise -->
505
- <div class="animate-on-scroll">
506
- <h3 class="text-xl font-semibold mb-4 text-indigo-600">Industry Expertise</h3>
507
- <div class="space-y-4">
508
- <div>
509
- <div class="flex justify-between mb-1">
510
- <span>iGaming/Gambling</span>
511
- <span>95%</span>
512
- </div>
513
- <div class="skill-bar">
514
- <div class="skill-progress" style="width: 95%"></div>
515
- </div>
516
- </div>
517
- <div>
518
- <div class="flex justify-between mb-1">
519
- <span>Finance</span>
520
- <span>85%</span>
521
- </div>
522
- <div class="skill-bar">
523
- <div class="skill-progress" style="width: 85%"></div>
524
- </div>
525
- </div>
526
- <div>
527
- <div class="flex justify-between mb-1">
528
- <span>Retail & E-commerce</span>
529
- <span>80%</span>
530
- </div>
531
- <div class="skill-bar">
532
- <div class="skill-progress" style="width: 80%"></div>
533
- </div>
534
- </div>
535
- <div>
536
- <div class="flex justify-between mb-1">
537
- <span>Cryptocurrency</span>
538
- <span>75%</span>
539
- </div>
540
- <div class="skill-bar">
541
- <div class="skill-progress" style="width: 75%"></div>
542
- </div>
543
- </div>
544
- </div>
545
- </div>
546
  </div>
 
 
 
 
 
 
 
 
 
 
 
547
  </div>
 
548
  </section>
549
 
550
- <!-- Contact Section -->
551
- <section id="contact" class="py-20 bg-white">
552
- <div class="container mx-auto px-6">
553
- <h2 class="text-3xl font-bold text-center mb-12 animate-on-scroll">Get In Touch</h2>
554
-
555
- <div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-8">
556
- <div class="animate-on-scroll">
557
- <h3 class="text-xl font-semibold mb-6 text-indigo-600">Contact Information</h3>
558
- <div class="space-y-6">
559
- <div class="flex items-start">
560
- <div class="bg-indigo-100 p-3 rounded-full mr-4">
561
- <i class="fas fa-phone text-indigo-600"></i>
562
- </div>
563
- <div>
564
- <h4 class="font-semibold">Phone</h4>
565
- <p>(+356) 99660356</p>
566
- </div>
567
- </div>
568
- <div class="flex items-start">
569
- <div class="bg-indigo-100 p-3 rounded-full mr-4">
570
- <i class="fas fa-envelope text-indigo-600"></i>
571
- </div>
572
- <div>
573
- <h4 class="font-semibold">Email</h4>
574
- <p>onpointmalta@gmail.com</p>
575
- </div>
576
- </div>
577
- <div class="flex items-start">
578
- <div class="bg-indigo-100 p-3 rounded-full mr-4">
579
- <i class="fab fa-linkedin-in text-indigo-600"></i>
580
- </div>
581
- <div>
582
- <h4 class="font-semibold">LinkedIn</h4>
583
- <a href="https://www.linkedin.com/in/hansmoritzhafen/" target="_blank" class="hover:text-indigo-600">linkedin.com/in/hansmoritzhafen/</a>
584
- </div>
585
- </div>
586
- <div class="flex items-start">
587
- <div class="bg-indigo-100 p-3 rounded-full mr-4">
588
- <i class="fas fa-map-marker-alt text-indigo-600"></i>
589
- </div>
590
- <div>
591
- <h4 class="font-semibold">Location</h4>
592
- <p>Malta (Able to travel)</p>
593
- </div>
594
- </div>
595
- </div>
596
- </div>
597
-
598
- <div class="animate-on-scroll">
599
- <h3 class="text-xl font-semibold mb-6 text-indigo-600">Send Me a Message</h3>
600
- <form id="contactForm" class="space-y-4">
601
- <div id="formMessage" class="form-message"></div>
602
- <div>
603
- <label for="name" class="block mb-1 font-medium">Name *</label>
604
- <input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
605
- </div>
606
- <div>
607
- <label for="email" class="block mb-1 font-medium">Email *</label>
608
- <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
609
- </div>
610
- <div>
611
- <label for="subject" class="block mb-1 font-medium">Subject *</label>
612
- <input type="text" id="subject" name="subject" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
613
- </div>
614
- <div>
615
- <label for="message" class="block mb-1 font-medium">Message *</label>
616
- <textarea id="message" name="message" rows="4" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
617
- </div>
618
- <button type="submit" class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition w-full">Send Message</button>
619
- </form>
620
- </div>
621
- </div>
622
  </div>
 
 
 
 
 
 
 
 
 
623
  </section>
624
 
625
- <!-- Footer -->
626
- <footer class="bg-gray-900 text-white py-12">
627
- <div class="container mx-auto px-6">
628
- <div class="flex flex-col md:flex-row justify-between items-center">
629
- <div class="mb-6 md:mb-0">
630
- <h3 class="text-2xl font-bold">Jean Maurice Port</h3>
631
- <p class="mt-2">SEO & AI Expert</p>
632
- </div>
633
- <div class="flex space-x-6">
634
- <a href="https://www.linkedin.com/in/hansmoritzhafen/" target="_blank" class="text-gray-400 hover:text-white transition">
635
- <i class="fab fa-linkedin-in text-xl"></i>
636
- </a>
637
- <a href="mailto:onpointmalta@gmail.com" class="text-gray-400 hover:text-white transition">
638
- <i class="fas fa-envelope text-xl"></i>
639
- </a>
640
- </div>
641
- </div>
642
- <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
643
- <p>&copy; 2024 Jean Maurice Port. All rights reserved.</p>
644
- </div>
645
  </div>
646
- </footer>
647
-
648
- <script>
649
- // Mobile menu toggle
650
- const mobileMenuButton = document.getElementById('mobile-menu-button');
651
- const mobileMenu = document.getElementById('mobile-menu');
652
-
653
- mobileMenuButton.addEventListener('click', () => {
654
- mobileMenu.classList.toggle('hidden');
655
- });
656
-
657
- // Smooth scrolling for anchor links
658
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
659
- anchor.addEventListener('click', function (e) {
660
- e.preventDefault();
661
-
662
- const targetId = this.getAttribute('href');
663
- const targetElement = document.querySelector(targetId);
664
-
665
- if (targetElement) {
666
- window.scrollTo({
667
- top: targetElement.offsetTop - 80,
668
- behavior: 'smooth'
669
- });
670
-
671
- // Close mobile menu if open
672
- mobileMenu.classList.add('hidden');
673
- }
674
- });
675
- });
676
-
677
- // Animation on scroll
678
- const animateElements = document.querySelectorAll('.animate-on-scroll');
679
-
680
- const observer = new IntersectionObserver((entries) => {
681
- entries.forEach(entry => {
682
- if (entry.isIntersecting) {
683
- entry.target.classList.add('visible');
684
- }
685
- });
686
- }, {
687
- threshold: 0.1
688
- });
689
-
690
- animateElements.forEach(element => {
691
- observer.observe(element);
692
- });
693
-
694
- // Animate skill bars on scroll
695
- const skillBars = document.querySelectorAll('.skill-progress');
696
-
697
- const skillObserver = new IntersectionObserver((entries) => {
698
- entries.forEach(entry => {
699
- if (entry.isIntersecting) {
700
- const width = entry.target.style.width;
701
- entry.target.style.width = '0';
702
- setTimeout(() => {
703
- entry.target.style.width = width;
704
- }, 100);
705
- }
706
- });
707
- }, {
708
- threshold: 0.5
709
- });
710
-
711
- skillBars.forEach(bar => {
712
- skillObserver.observe(bar);
713
- });
714
-
715
- // Contact form submission
716
- const contactForm = document.getElementById('contactForm');
717
- const formMessage = document.getElementById('formMessage');
718
-
719
- contactForm.addEventListener('submit', function(e) {
720
- e.preventDefault();
721
-
722
- // Get form values
723
- const name = document.getElementById('name').value;
724
- const email = document.getElementById('email').value;
725
- const subject = document.getElementById('subject').value;
726
- const message = document.getElementById('message').value;
727
-
728
- // Simple validation
729
- if (!name || !email || !subject || !message) {
730
- showMessage('Please fill in all required fields.', 'error');
731
- return;
732
- }
733
-
734
- // Here you would normally send the form data to a server
735
- // For this example, we'll simulate a successful submission
736
- setTimeout(() => {
737
- showMessage('Thank you for your message! I will get back to you soon.', 'success');
738
- contactForm.reset();
739
- }, 1000);
740
- });
741
-
742
- function showMessage(text, type) {
743
- formMessage.textContent = text;
744
- formMessage.className = 'form-message ' + type;
745
- formMessage.style.display = 'block';
746
-
747
- // Hide message after 5 seconds
748
- setTimeout(() => {
749
- formMessage.style.display = 'none';
750
- }, 5000);
751
- }
752
- </script>
753
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=hansmoritzhafen/https-huggingface-co-spaces-hansmoritzhafen-jean-maurice-port" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
754
- </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="de">
3
  <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>PromptGenie & PromptGott | AI Prompts, SEO Workflows & Automation</title>
7
+ <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." />
8
+ <meta name="robots" content="index, follow" />
9
+ <meta property="og:title" content="PromptGenie & PromptGott" />
10
+ <meta property="og:description" content="AI Prompts, SEO Workflows, Automatisierung und Research-Profile von Jean Maurice Port." />
11
+ <meta property="og:type" content="website" />
12
+ <meta name="theme-color" content="#111827" />
13
+
14
+ <script src="https://cdn.tailwindcss.com"></script>
15
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
16
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
17
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
18
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
19
+
20
+ <style>
21
+ :root {
22
+ --bg: #070816;
23
+ --card: rgba(255, 255, 255, 0.08);
24
+ --card-border: rgba(255, 255, 255, 0.16);
25
+ --text: #f8fafc;
26
+ --muted: #cbd5e1;
27
+ --accent: #a78bfa;
28
+ --accent-2: #22d3ee;
29
+ --accent-3: #f472b6;
30
+ }
31
+
32
+ * { box-sizing: border-box; }
33
+
34
+ html { scroll-behavior: smooth; }
35
+
36
+ body {
37
+ margin: 0;
38
+ font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
39
+ background:
40
+ radial-gradient(circle at 15% 10%, rgba(124, 58, 237, 0.35), transparent 32rem),
41
+ radial-gradient(circle at 80% 15%, rgba(34, 211, 238, 0.22), transparent 30rem),
42
+ radial-gradient(circle at 55% 90%, rgba(244, 114, 182, 0.18), transparent 34rem),
43
+ var(--bg);
44
+ color: var(--text);
45
+ overflow-x: hidden;
46
+ }
47
+
48
+ .noise::before {
49
+ content: '';
50
+ position: fixed;
51
+ inset: 0;
52
+ pointer-events: none;
53
+ opacity: 0.13;
54
+ z-index: 1;
55
+ 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");
56
+ }
57
+
58
+ .glass {
59
+ background: var(--card);
60
+ border: 1px solid var(--card-border);
61
+ box-shadow: 0 24px 80px rgba(0,0,0,0.28);
62
+ backdrop-filter: blur(18px);
63
+ }
64
+
65
+ .gradient-text {
66
+ background: linear-gradient(90deg, #fff, #c4b5fd, #67e8f9, #f9a8d4);
67
+ -webkit-background-clip: text;
68
+ background-clip: text;
69
+ color: transparent;
70
+ }
71
+
72
+ .orb {
73
+ position: absolute;
74
+ border-radius: 999px;
75
+ filter: blur(8px);
76
+ opacity: 0.8;
77
+ animation: float 9s ease-in-out infinite;
78
+ }
79
+
80
+ .orb:nth-child(2) { animation-delay: -3s; }
81
+ .orb:nth-child(3) { animation-delay: -6s; }
82
+
83
+ @keyframes float {
84
+ 0%, 100% { transform: translate3d(0,0,0) scale(1); }
85
+ 50% { transform: translate3d(18px,-22px,0) scale(1.06); }
86
+ }
87
+
88
+ .link-card {
89
+ position: relative;
90
+ overflow: hidden;
91
+ transition: transform .28s ease, border-color .28s ease, background .28s ease;
92
+ }
93
+
94
+ .link-card::before {
95
+ content: '';
96
+ position: absolute;
97
+ inset: -1px;
98
+ background: linear-gradient(120deg, transparent, rgba(255,255,255,.18), transparent);
99
+ transform: translateX(-120%);
100
+ transition: transform .7s ease;
101
+ }
102
+
103
+ .link-card:hover {
104
+ transform: translateY(-6px);
105
+ border-color: rgba(255,255,255,.32);
106
+ background: rgba(255,255,255,.12);
107
+ }
108
+
109
+ .link-card:hover::before { transform: translateX(120%); }
110
+
111
+ .pill {
112
+ border: 1px solid rgba(255,255,255,.14);
113
+ background: rgba(255,255,255,.08);
114
+ }
115
+
116
+ .grid-bg {
117
+ background-image:
118
+ linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
119
+ linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
120
+ background-size: 48px 48px;
121
+ mask-image: linear-gradient(to bottom, black, transparent 85%);
122
+ }
123
+ </style>
124
  </head>
125
+ <body class="noise">
126
+ <div class="fixed inset-0 grid-bg opacity-50 pointer-events-none"></div>
127
+
128
+ <header class="relative z-10">
129
+ <nav class="mx-auto flex max-w-7xl items-center justify-between px-6 py-6 lg:px-8">
130
+ <a href="#top" class="flex items-center gap-3 font-black tracking-tight">
131
+ <span class="flex h-10 w-10 items-center justify-center rounded-2xl bg-white text-gray-950 shadow-xl">PG</span>
132
+ <span>PromptGenie</span>
133
+ </a>
134
+ <div class="hidden items-center gap-6 text-sm text-slate-300 md:flex">
135
+ <a href="#links" class="hover:text-white">Links</a>
136
+ <a href="#system" class="hover:text-white">System</a>
137
+ <a href="#about" class="hover:text-white">Profil</a>
138
+ <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>
139
+ </div>
140
+ </nav>
141
+ </header>
142
+
143
+ <main id="top" class="relative z-10">
144
+ <section class="relative mx-auto max-w-7xl px-6 pb-20 pt-14 lg:px-8 lg:pb-28 lg:pt-20">
145
+ <div class="orb left-8 top-24 h-24 w-24 bg-cyan-400/30"></div>
146
+ <div class="orb right-16 top-20 h-32 w-32 bg-violet-500/30"></div>
147
+ <div class="orb bottom-24 left-1/2 h-20 w-20 bg-pink-400/30"></div>
148
+
149
+ <div class="mx-auto max-w-5xl text-center">
150
+ <div class="mx-auto mb-8 inline-flex items-center gap-2 rounded-full pill px-4 py-2 text-sm text-slate-200">
151
+ <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
152
+ AI Prompts · SEO Workflows · Automation · Research
153
  </div>
154
+
155
+ <h1 class="text-5xl font-black leading-[0.95] tracking-tight md:text-7xl lg:text-8xl">
156
+ Sichtbarkeit für <span class="gradient-text">PromptGenie</span> & PromptGott.
157
+ </h1>
158
+
159
+ <p class="mx-auto mt-8 max-w-3xl text-lg leading-8 text-slate-300 md:text-xl">
160
+ Ein kuratierter Link-Hub für AI-Prompts, SEO-Systeme, Prompt Engineering, Automatisierung,
161
+ Research-Profile und technische Experimente von Jean Maurice Port.
162
+ </p>
163
+
164
+ <div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
165
+ <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">
166
+ Alle Links entdecken
167
+ <i class="fa-solid fa-arrow-down text-sm transition group-hover:translate-y-1"></i>
168
+ </a>
169
+ <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">
170
+ PromptGott öffnen
171
+ <i class="fa-solid fa-arrow-up-right-from-square text-sm"></i>
172
+ </a>
173
  </div>
174
+ </div>
175
+ </section>
176
+
177
+ <section id="links" class="mx-auto max-w-7xl px-6 py-16 lg:px-8">
178
+ <div class="mb-10 flex flex-col justify-between gap-6 md:flex-row md:items-end">
179
+ <div>
180
+ <p class="mb-3 text-sm font-bold uppercase tracking-[0.25em] text-cyan-300">Link Promotion</p>
181
+ <h2 class="text-3xl font-black tracking-tight md:text-5xl">Zentrale Accounts</h2>
182
+ </div>
183
+ <p class="max-w-xl text-slate-300">
184
+ Jede Karte ist als klarer Conversion-Pfad gebaut: sofort verständlich, mobil nutzbar, visuell stark und direkt klickbar.
185
+ </p>
186
+ </div>
187
 
188
+ <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
189
+ <a href="https://promptgenie.substack.com" target="_blank" rel="noopener" class="link-card glass rounded-3xl p-7">
190
+ <div class="mb-8 flex items-center justify-between">
191
+ <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-orange-400/20 text-2xl text-orange-200">
192
+ <i class="fa-solid fa-newspaper"></i>
 
 
 
 
 
 
193
  </div>
194
+ <i class="fa-solid fa-arrow-up-right-from-square text-slate-400"></i>
195
+ </div>
196
+ <h3 class="mb-3 text-2xl font-black">PromptGenie Newsletter</h3>
197
+ <p class="text-slate-300">AI-Prompts, SEO-Workflows, Automatisierung und praktische KI-Anwendungen als Substack.</p>
198
+ </a>
199
+
200
+ <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">
201
+ <div class="mb-8 flex items-center justify-between">
202
+ <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-violet-400/20 text-2xl text-violet-200">
203
+ <i class="fa-solid fa-wand-magic-sparkles"></i>
204
  </div>
205
+ <i class="fa-solid fa-arrow-up-right-from-square text-slate-400"></i>
206
+ </div>
207
+ <h3 class="mb-3 text-3xl font-black">PromptGott Linkhub</h3>
208
+ <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>
209
+ </a>
210
 
211
+ <a href="https://promptgenie.substack.com/publish/home" target="_blank" rel="noopener" class="link-card glass rounded-3xl p-7">
212
+ <div class="mb-8 flex items-center justify-between">
213
+ <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-emerald-400/20 text-2xl text-emerald-200">
214
+ <i class="fa-solid fa-pen-nib"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
215
  </div>
216
+ <i class="fa-solid fa-arrow-up-right-from-square text-slate-400"></i>
217
+ </div>
218
+ <h3 class="mb-3 text-2xl font-black">Publishing Desk</h3>
219
+ <p class="text-slate-300">Direkter Zugang zum Substack-Publishing-Bereich für neue PromptGenie-Inhalte.</p>
220
+ </a>
221
 
222
+ <a href="https://orcid.org/0009-0009-5853-149X" target="_blank" rel="noopener" class="link-card glass rounded-3xl p-7">
223
+ <div class="mb-8 flex items-center justify-between">
224
+ <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-green-400/20 text-2xl text-green-200">
225
+ <i class="fa-brands fa-orcid"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
226
  </div>
227
+ <i class="fa-solid fa-arrow-up-right-from-square text-slate-400"></i>
228
+ </div>
229
+ <h3 class="mb-3 text-2xl font-black">ORCID Profile</h3>
230
+ <p class="text-slate-300">Research-ID für wissenschaftliche Zuordnung, Publikationen und akademische Sichtbarkeit.</p>
231
+ </a>
232
 
233
+ <a href="http://github.com/HanSEOHafen" target="_blank" rel="noopener" class="link-card glass rounded-3xl p-7">
234
+ <div class="mb-8 flex items-center justify-between">
235
+ <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-slate-400/20 text-2xl text-slate-100">
236
+ <i class="fa-brands fa-github"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
237
  </div>
238
+ <i class="fa-solid fa-arrow-up-right-from-square text-slate-400"></i>
239
+ </div>
240
+ <h3 class="mb-3 text-2xl font-black">GitHub</h3>
241
+ <p class="text-slate-300">Code, technische SEO-Experimente, Automatisierungsideen und AI-Prototypen.</p>
242
+ </a>
243
+
244
+ <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">
245
+ <div class="mb-8 flex items-center justify-between">
246
+ <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-cyan-400/20 text-2xl text-cyan-200">
247
+ <i class="fa-solid fa-diagram-project"></i>
248
+ </div>
249
+ <i class="fa-solid fa-arrow-up-right-from-square text-slate-400"></i>
250
+ </div>
251
+ <h3 class="mb-3 text-3xl font-black">MindPal AI Workflows</h3>
252
+ <p class="max-w-3xl text-slate-300">AI-Agenten, Workflow-Automatisierung und produktive Systeme für wiederholbare Prompt- und SEO-Prozesse.</p>
253
+ </a>
254
+ </div>
255
  </section>
256
 
257
+ <section id="system" class="mx-auto max-w-7xl px-6 py-16 lg:px-8">
258
+ <div class="glass rounded-[2rem] p-8 md:p-12">
259
+ <div class="grid gap-10 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
260
+ <div>
261
+ <p class="mb-3 text-sm font-bold uppercase tracking-[0.25em] text-pink-300">Positionierung</p>
262
+ <h2 class="text-3xl font-black tracking-tight md:text-5xl">Ein Ökosystem statt loser Links.</h2>
263
+ <p class="mt-6 text-lg leading-8 text-slate-300">
264
+ Die Seite bündelt Substack, Linkhub, GitHub, Research-ID und AI-Workflow-Tooling in einer klaren Markenarchitektur.
265
+ </p>
266
+ </div>
267
+
268
+ <div class="grid gap-4 sm:grid-cols-2">
269
+ <div class="rounded-3xl border border-white/10 bg-white/5 p-6">
270
+ <div class="mb-4 text-3xl">🧠</div>
271
+ <h3 class="mb-2 font-black">Prompt Engineering</h3>
272
+ <p class="text-sm leading-6 text-slate-300">Prompt-Systeme, Templates und AI-gestützte Arbeitsprozesse.</p>
273
+ </div>
274
+ <div class="rounded-3xl border border-white/10 bg-white/5 p-6">
275
+ <div class="mb-4 text-3xl">📈</div>
276
+ <h3 class="mb-2 font-black">SEO Workflows</h3>
277
+ <p class="text-sm leading-6 text-slate-300">Suchintention, Content-Optimierung, technische SEO und Automatisierung.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
278
  </div>
279
+ <div class="rounded-3xl border border-white/10 bg-white/5 p-6">
280
+ <div class="mb-4 text-3xl">⚙️</div>
281
+ <h3 class="mb-2 font-black">Automation</h3>
282
+ <p class="text-sm leading-6 text-slate-300">AI-Agenten, Toolchains und wiederverwendbare Produktionssysteme.</p>
283
+ </div>
284
+ <div class="rounded-3xl border border-white/10 bg-white/5 p-6">
285
+ <div class="mb-4 text-3xl">🔬</div>
286
+ <h3 class="mb-2 font-black">Research</h3>
287
+ <p class="text-sm leading-6 text-slate-300">ORCID, Experimente, GitHub und nachvollziehbare digitale Identität.</p>
288
+ </div>
289
+ </div>
290
  </div>
291
+ </div>
292
  </section>
293
 
294
+ <section id="about" class="mx-auto max-w-7xl px-6 py-16 lg:px-8">
295
+ <div class="grid gap-8 md:grid-cols-3">
296
+ <div class="glass rounded-3xl p-7">
297
+ <p class="text-4xl font-black gradient-text">SEO</p>
298
+ <p class="mt-3 text-slate-300">Strategie, technische Optimierung und organische Reichweite.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
299
  </div>
300
+ <div class="glass rounded-3xl p-7">
301
+ <p class="text-4xl font-black gradient-text">AI</p>
302
+ <p class="mt-3 text-slate-300">Prompt Engineering, LLM-Workflows und Content-Systeme.</p>
303
+ </div>
304
+ <div class="glass rounded-3xl p-7">
305
+ <p class="text-4xl font-black gradient-text">Links</p>
306
+ <p class="mt-3 text-slate-300">Zentrale Profile für bessere Auffindbarkeit und klare Nutzerführung.</p>
307
+ </div>
308
+ </div>
309
  </section>
310
 
311
+ <section class="mx-auto max-w-5xl px-6 py-20 text-center lg:px-8">
312
+ <div class="glass rounded-[2rem] p-8 md:p-12">
313
+ <h2 class="text-3xl font-black tracking-tight md:text-5xl">Starte beim wichtigsten Kanal.</h2>
314
+ <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>
315
+ <div class="mt-8 flex flex-col justify-center gap-4 sm:flex-row">
316
+ <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]">
317
+ PromptGenie lesen
318
+ <i class="fa-solid fa-arrow-up-right-from-square text-sm"></i>
319
+ </a>
320
+ <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">
321
+ GitHub ansehen
322
+ <i class="fa-brands fa-github"></i>
323
+ </a>
 
 
 
 
 
 
 
324
  </div>
325
+ </div>
326
+ </section>
327
+ </main>
328
+
329
+ <footer class="relative z-10 border-t border-white/10 px-6 py-10 lg:px-8">
330
+ <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">
331
+ <p>© 2026 Jean Maurice Port · PromptGenie · PromptGott</p>
332
+ <div class="flex flex-wrap gap-4">
333
+ <a href="https://promptgenie.substack.com" target="_blank" rel="noopener" class="hover:text-white">Substack</a>
334
+ <a href="https://own.page/promptgott" target="_blank" rel="noopener" class="hover:text-white">PromptGott</a>
335
+ <a href="https://orcid.org/0009-0009-5853-149X" target="_blank" rel="noopener" class="hover:text-white">ORCID</a>
336
+ <a href="http://github.com/HanSEOHafen" target="_blank" rel="noopener" class="hover:text-white">GitHub</a>
337
+ </div>
338
+ </div>
339
+ </footer>
340
+ </body>
341
+ </html>