cbazzaandClaude Opus 4.6
70caf7567b
Ersetzt die PDF-Dateien und aktualisiert alle Referenzen in page.tsx, E-Mail-Template, README und Cleanup-Guide auf die 2026-Versionen. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
313 lines
20 KiB
HTML
313 lines
20 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<title>Bewerbung von Sebastian Fröhlich - Technical Product Owner</title>
|
||
<style type="text/css">
|
||
/* RESET */
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 100% !important;
|
||
-webkit-text-size-adjust: 100%;
|
||
-ms-text-size-adjust: 100%;
|
||
font-family: Arial, Helvetica, sans-serif;
|
||
}
|
||
|
||
img {
|
||
outline: none;
|
||
text-decoration: none;
|
||
border: none;
|
||
-ms-interpolation-mode: bicubic;
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
table {
|
||
border-collapse: collapse;
|
||
mso-table-lspace: 0pt;
|
||
mso-table-rspace: 0pt;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media only screen and (max-width: 600px) {
|
||
.container {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.mobile-padding {
|
||
padding: 10px !important;
|
||
}
|
||
|
||
.stack {
|
||
display: block !important;
|
||
width: 100% !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body style="margin: 0; padding: 0; background-color: #f8f9fa;">
|
||
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color: #f8f9fa;">
|
||
<tr>
|
||
<td align="center" style="padding: 20px 0;">
|
||
|
||
<!-- Main Container -->
|
||
<table class="container" width="600" border="0" cellspacing="0" cellpadding="0" style="background-color: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
|
||
|
||
<!-- Header -->
|
||
<tr>
|
||
<td style="background: linear-gradient(135deg, #1d3557 0%, #457b9d 100%); padding: 40px 30px; text-align: center;">
|
||
<h1 style="color: #ffffff; margin: 0 0 10px 0; font-size: 28px; font-weight: bold;">
|
||
Bewerbung als
|
||
</h1>
|
||
<p style="color: rgba(255, 255, 255, 0.9); margin: 0; font-size: 18px;">
|
||
[Position einfügen]
|
||
</p>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Greeting -->
|
||
<tr>
|
||
<td style="padding: 30px 30px 20px 30px;">
|
||
<p style="color: #1d3557; font-size: 16px; line-height: 1.6; margin: 0 0 20px 0;">
|
||
Sehr geehrte Damen und Herren,
|
||
</p>
|
||
<p style="color: #6c757d; font-size: 16px; line-height: 1.6; margin: 0;">
|
||
mein Name ist <strong style="color: #1d3557;">Sebastian Fröhlich</strong>, ich bin <strong>46 Jahre</strong> alt und arbeite seit 2021 als <strong style="color: #e63946;">Technical Product Owner</strong> im Bereich Financial Technology. Mit über <strong>20 Jahren IT-Erfahrung</strong> bringe ich umfassende Expertise in modernen Technologien und Projektmanagement mit.
|
||
</p>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Highlight Box -->
|
||
<tr>
|
||
<td style="padding: 0 30px 30px 30px;">
|
||
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background: linear-gradient(135deg, rgba(230, 57, 70, 0.1) 0%, rgba(230, 57, 70, 0.05) 100%); border-left: 4px solid #e63946; border-radius: 8px;">
|
||
<tr>
|
||
<td style="padding: 25px;">
|
||
<h2 style="color: #1d3557; font-size: 20px; margin: 0 0 15px 0;">
|
||
🎯 Warum ich die richtige Wahl bin
|
||
</h2>
|
||
<ul style="color: #6c757d; font-size: 15px; line-height: 1.8; margin: 0; padding-left: 20px;">
|
||
<li style="margin-bottom: 8px;"><strong style="color: #1d3557;">20+ Jahre IT-Erfahrung</strong> – von der Diskette zur Cloud</li>
|
||
<li style="margin-bottom: 8px;"><strong style="color: #1d3557;">Technical Product Owner</strong> für 3 Fintech-Produkte im Bankenmeldewesen</li>
|
||
<li style="margin-bottom: 8px;"><strong style="color: #1d3557;">Kubernetes & Cloud Expertise</strong> – erfolgreiche Migration ohne Ausfallzeiten</li>
|
||
<li style="margin-bottom: 8px;"><strong style="color: #1d3557;">Team Leadership</strong> – Steuerung internationaler Teams (inkl. Nearshore)</li>
|
||
<li style="margin-bottom: 8px;"><strong style="color: #1d3557;">Full-Stack Know-how</strong> – PHP/Laravel, Vue.js, DevOps, Systemarchitektur</li>
|
||
</ul>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Divider -->
|
||
<tr>
|
||
<td style="padding: 0 30px;">
|
||
<hr style="border: none; border-top: 2px solid #e9ecef; margin: 0;">
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Key Facts Section -->
|
||
<tr>
|
||
<td style="padding: 30px;">
|
||
<h2 style="color: #1d3557; font-size: 20px; margin: 0 0 20px 0; text-align: center;">
|
||
💼 Meine aktuelle Position
|
||
</h2>
|
||
|
||
<!-- Facts Grid -->
|
||
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
||
<tr>
|
||
<td class="stack" width="50%" style="padding: 10px; vertical-align: top;">
|
||
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color: #f8f9fa; border-radius: 8px;">
|
||
<tr>
|
||
<td style="padding: 20px; text-align: center;">
|
||
<div style="font-size: 32px; margin-bottom: 10px;">🏢</div>
|
||
<p style="color: #1d3557; font-weight: bold; margin: 0 0 5px 0; font-size: 14px;">Unternehmen</p>
|
||
<p style="color: #6c757d; margin: 0; font-size: 13px;">Sopra Financial Technology GmbH</p>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
<td class="stack" width="50%" style="padding: 10px; vertical-align: top;">
|
||
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color: #f8f9fa; border-radius: 8px;">
|
||
<tr>
|
||
<td style="padding: 20px; text-align: center;">
|
||
<div style="font-size: 32px; margin-bottom: 10px;">⚙️</div>
|
||
<p style="color: #1d3557; font-weight: bold; margin: 0 0 5px 0; font-size: 14px;">Position</p>
|
||
<p style="color: #6c757d; margin: 0; font-size: 13px;">Technical Product Owner</p>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="stack" width="50%" style="padding: 10px; vertical-align: top;">
|
||
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color: #f8f9fa; border-radius: 8px;">
|
||
<tr>
|
||
<td style="padding: 20px; text-align: center;">
|
||
<div style="font-size: 32px; margin-bottom: 10px;">📊</div>
|
||
<p style="color: #1d3557; font-weight: bold; margin: 0 0 5px 0; font-size: 14px;">Verantwortung</p>
|
||
<p style="color: #6c757d; margin: 0; font-size: 13px;">3 Produkte im Bankenmeldewesen</p>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
<td class="stack" width="50%" style="padding: 10px; vertical-align: top;">
|
||
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color: #f8f9fa; border-radius: 8px;">
|
||
<tr>
|
||
<td style="padding: 20px; text-align: center;">
|
||
<div style="font-size: 32px; margin-bottom: 10px;">🚀</div>
|
||
<p style="color: #1d3557; font-weight: bold; margin: 0 0 5px 0; font-size: 14px;">Highlights</p>
|
||
<p style="color: #6c757d; margin: 0; font-size: 13px;">K8s-Migration, Code Reviews</p>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Divider -->
|
||
<tr>
|
||
<td style="padding: 0 30px;">
|
||
<hr style="border: none; border-top: 2px solid #e9ecef; margin: 0;">
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Downloads Section -->
|
||
<tr>
|
||
<td style="padding: 30px;">
|
||
<h2 style="color: #1d3557; font-size: 20px; margin: 0 0 20px 0; text-align: center;">
|
||
📥 Meine Bewerbungsunterlagen
|
||
</h2>
|
||
|
||
<!-- Download Buttons -->
|
||
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
||
<tr>
|
||
<td style="padding: 10px; text-align: center;">
|
||
<a href="https://apply4jobs.de/bewerbung/downloads/Lebenslauf_2026.pdf" style="background-color: #e63946; color: #ffffff; padding: 14px 28px; text-decoration: none; border-radius: 8px; display: inline-block; font-weight: bold; font-size: 15px;">
|
||
📄 Lebenslauf 2026
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding: 10px; text-align: center;">
|
||
<a href="https://apply4jobs.de/bewerbung/downloads/Zeugnisse_2026.pdf" style="background-color: #457b9d; color: #ffffff; padding: 14px 28px; text-decoration: none; border-radius: 8px; display: inline-block; font-weight: bold; font-size: 15px;">
|
||
📜 Arbeitszeugnisse 2026
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding: 10px; text-align: center;">
|
||
<a href="https://apply4jobs.de/bewerbung/downloads/Referenzen.pdf" style="background-color: #457b9d; color: #ffffff; padding: 14px 28px; text-decoration: none; border-radius: 8px; display: inline-block; font-weight: bold; font-size: 15px;">
|
||
⭐ Referenzen
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding: 20px 10px 10px 10px; text-align: center;">
|
||
<a href="https://apply4jobs.de/bewerbung/" style="background: linear-gradient(135deg, #e63946 0%, #d62839 100%); color: #ffffff; padding: 16px 32px; text-decoration: none; border-radius: 8px; display: inline-block; font-weight: bold; font-size: 16px; box-shadow: 0 4px 6px rgba(230, 57, 70, 0.3);">
|
||
🌐 Vollständige Online-Bewerbung ansehen
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Divider -->
|
||
<tr>
|
||
<td style="padding: 0 30px;">
|
||
<hr style="border: none; border-top: 2px solid #e9ecef; margin: 0;">
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Contact Section -->
|
||
<tr>
|
||
<td style="padding: 30px;">
|
||
<h2 style="color: #1d3557; font-size: 20px; margin: 0 0 20px 0; text-align: center;">
|
||
📞 Kontakt
|
||
</h2>
|
||
|
||
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
||
<tr>
|
||
<td class="stack" width="33.33%" style="padding: 10px; vertical-align: top;">
|
||
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
||
<tr>
|
||
<td style="text-align: center;">
|
||
<div style="font-size: 32px; margin-bottom: 10px;">📍</div>
|
||
<p style="color: #1d3557; font-weight: bold; margin: 0 0 5px 0; font-size: 13px;">Adresse</p>
|
||
<p style="color: #6c757d; margin: 0; font-size: 12px; line-height: 1.5;">
|
||
Rosenstraße 4<br>
|
||
91564 Neuendettelsau
|
||
</p>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
<td class="stack" width="33.33%" style="padding: 10px; vertical-align: top;">
|
||
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
||
<tr>
|
||
<td style="text-align: center;">
|
||
<div style="font-size: 32px; margin-bottom: 10px;">📱</div>
|
||
<p style="color: #1d3557; font-weight: bold; margin: 0 0 5px 0; font-size: 13px;">Telefon</p>
|
||
<p style="color: #6c757d; margin: 0; font-size: 12px;">
|
||
<a href="tel:+4915732469960" style="color: #e63946; text-decoration: none;">0157 324 699 60</a>
|
||
</p>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
<td class="stack" width="33.33%" style="padding: 10px; vertical-align: top;">
|
||
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
||
<tr>
|
||
<td style="text-align: center;">
|
||
<div style="font-size: 32px; margin-bottom: 10px;">✉️</div>
|
||
<p style="color: #1d3557; font-weight: bold; margin: 0 0 5px 0; font-size: 13px;">E-Mail</p>
|
||
<p style="color: #6c757d; margin: 0; font-size: 12px;">
|
||
<a href="mailto:froehlich.sebastian@gmail.com" style="color: #e63946; text-decoration: none;">froehlich.sebastian@gmail.com</a>
|
||
</p>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Closing -->
|
||
<tr>
|
||
<td style="padding: 0 30px 30px 30px;">
|
||
<p style="color: #6c757d; font-size: 15px; line-height: 1.6; margin: 0;">
|
||
Ich freue mich darauf, Sie in einem persönlichen Gespräch von meinen Fähigkeiten zu überzeugen und mehr über die Position zu erfahren.
|
||
</p>
|
||
<p style="color: #6c757d; font-size: 15px; line-height: 1.6; margin: 15px 0 0 0;">
|
||
Mit freundlichen Grüßen<br>
|
||
<strong style="color: #1d3557;">Sebastian Fröhlich</strong>
|
||
</p>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Footer -->
|
||
<tr>
|
||
<td style="background-color: #f8f9fa; padding: 20px 30px; text-align: center; border-top: 1px solid #e9ecef;">
|
||
<p style="color: #6c757d; font-size: 11px; line-height: 1.5; margin: 0;">
|
||
Diese E-Mail wurde als responsive HTML-Mail erstellt.<br>
|
||
Falls die Darstellung nicht korrekt ist, können Sie die
|
||
<a href="https://apply4jobs.de/bewerbung/" style="color: #e63946; text-decoration: underline;">Online-Version</a> aufrufen.
|
||
</p>
|
||
</td>
|
||
</tr>
|
||
|
||
</table>
|
||
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</body>
|
||
</html>
|