Add complete bewerbung Next.js application
- Add all Next.js application files - Include components, app structure, and public assets - Remove empty bewerbung placeholder folder - Update .gitignore for Next.js project 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 4.5
@@ -0,0 +1,258 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
export default function Intro() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const currentRef = ref.current;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setIsVisible(true);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
if (currentRef) {
|
||||
observer.observe(currentRef);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (currentRef) {
|
||||
observer.unobserve(currentRef);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const highlights = [
|
||||
{ value: '20+', label: 'Jahre Erfahrung' },
|
||||
{ value: '10+', label: 'Jahre Freelancing' },
|
||||
{ value: '9+', label: 'Mitarbeiter geführt' },
|
||||
{ value: '3', label: 'Produkte verantwortet' },
|
||||
];
|
||||
|
||||
const skills = [
|
||||
'Product Owner',
|
||||
'Technical Project Manager',
|
||||
'Laravel',
|
||||
'Vue.js',
|
||||
'PHP',
|
||||
'JavaScript',
|
||||
'MySQL',
|
||||
'MSSQL',
|
||||
'Systemarchitektur',
|
||||
'User Experience',
|
||||
'Team Leadership',
|
||||
'Compliance',
|
||||
];
|
||||
|
||||
const timeline = [
|
||||
{ year: '2021 - heute', company: 'Sopra Financial Technology GmbH', role: 'Technical Product Owner' },
|
||||
{ year: '2019 - 2020', company: 'APPsolute Mobility', role: 'Product Owner & Technical Project Manager' },
|
||||
{ year: '2014 - 2019', company: 'SCC Fahrzeugtechnik GmbH', role: 'Leiter IT Abteilung' },
|
||||
{ year: '2010 - 2014', company: 'Trustec Energy GmbH', role: 'Marketing Manager' },
|
||||
{ year: '2000 - 2010', company: 'Freelancer', role: 'Web Development & Design' },
|
||||
];
|
||||
|
||||
return (
|
||||
<section
|
||||
id="intro"
|
||||
ref={ref}
|
||||
className={`py-20 px-4 sm:px-6 lg:px-8 bg-white transition-opacity duration-1000 ${
|
||||
isVisible ? 'opacity-100' : 'opacity-0'
|
||||
}`}
|
||||
>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-text mb-12 text-center relative inline-block w-full after:content-[''] after:block after:w-12 after:h-1 after:bg-primary after:mt-6 after:mx-auto">
|
||||
Über mich
|
||||
</h2>
|
||||
|
||||
{/* Highlights Box */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
|
||||
{highlights.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`bg-gradient-to-br from-primary/10 to-primary/5 rounded-lg p-6 text-center border border-primary/20 hover:border-primary/40 transition-all hover:shadow-lg ${
|
||||
isVisible ? 'animate-fade-in' : 'opacity-0'
|
||||
}`}
|
||||
style={{ animationDelay: `${index * 100}ms` }}
|
||||
>
|
||||
<div className="text-3xl sm:text-4xl font-bold text-primary mb-2">
|
||||
{item.value}
|
||||
</div>
|
||||
<div className="text-sm text-text-light font-semibold">
|
||||
{item.label}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Main Text */}
|
||||
<div className="max-w-4xl mx-auto space-y-6 text-text-light leading-relaxed text-base sm:text-lg mb-12">
|
||||
<p>
|
||||
Mein Name ist Sebastian Fröhlich, ich bin 47 Jahre alt und lebe zusammen mit meiner
|
||||
Familie in Neuendettelsau im Landkreis Ansbach.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Von der Diskette zur Cloud durfte ich diesen spannenden und rasanten technischen
|
||||
Wandel miterleben. Besonders die Themen{' '}
|
||||
<strong className="text-text font-semibold">
|
||||
redundante Datenerfassung, Systemarchitektur und User Experience
|
||||
</strong>{' '}
|
||||
haben mich schon immer besonders fasziniert.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Bereits während meiner Berufsausbildung wurde mir die Verantwortung für den
|
||||
Firmenserver (Netware) übertragen.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Für die A-Socks GmbH, einem Unternehmen aus der Textilbranche entwickelte ich einen{' '}
|
||||
<strong className="text-text font-semibold">
|
||||
Shop (HTML/ Javascript/ Actionscript - Flash)
|
||||
</strong>, gestaltete die Verkaufsverpackungen und programmierte ein automatisiertes
|
||||
EAN Vergabe System.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Als Freelancer war ich über 10 Jahre für Unternehmenskunden aus unterschiedlichen
|
||||
Branchen tätig. Mein Fokus lag dabei auf webbasierten Lösungen wie z.B.{' '}
|
||||
<strong className="text-text font-semibold">
|
||||
Präsentations- und Buchungssystemen, CMS-Systemen und Internetshops
|
||||
</strong>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Im Jahr 2010 erhielt ich die Gelegenheit meine Kompetenzen als Marketing Manager für
|
||||
die Trustec Energy GmbH in der Solarbranche einzusetzen. Nach 4 Jahren erhielt ich eine
|
||||
betriebsbedingte Kündigung und wechselte 2014 zur SCC Fahrzeugtechnik GmbH.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Als{' '}
|
||||
<strong className="text-text font-semibold">Leiter der IT Abteilung</strong> war ich
|
||||
hier fachlich und disziplinarisch für 6 Mitarbeiter und 3 Auszubildende verantwortlich.
|
||||
Darüber hinaus entwickelte und programmierte ich ein eigenes Firmen-Intranet{' '}
|
||||
<strong className="text-text font-semibold">
|
||||
(PHP Framework: Laravel, Javascript/ Vue.js, MySql/ MSSQL)
|
||||
</strong>, wartete und migrierte die Server und sorgte für ein funktionierendes Backup-
|
||||
und Sicherheitssystem{' '}
|
||||
<strong className="text-text font-semibold">(Master-Master Replication, BashScript)</strong>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Die nächste Karrierestufe erreichte ich mit meinem Wechsel zu einem Startupunternehmen,
|
||||
wo ich als{' '}
|
||||
<strong className="text-text font-semibold">
|
||||
Product Owner & Technical Project Manager
|
||||
</strong>{' '}
|
||||
für die Firma "APPsolute Mobility" tätig war. Leider konnte das Startup die gesetzten
|
||||
Ziele nicht erreichen, weswegen ich 1 Jahr später zu meinem jetzigen Arbeitgeber wechselte.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Bei der{' '}
|
||||
<strong className="text-text font-semibold">Sopra Financial Technology GmbH</strong> bin
|
||||
ich seit 2021 als{' '}
|
||||
<strong className="text-text font-semibold">Technical Product Owner</strong> im
|
||||
Bereich Regulatory & Risk tätig. Ich verantworte{' '}
|
||||
<strong className="text-text font-semibold">3 Fintech-Produkte</strong> im{' '}
|
||||
<strong className="text-text font-semibold">Bankenmeldewesen</strong> und stelle
|
||||
deren reibungslosen Betrieb unter strikten{' '}
|
||||
<strong className="text-text font-semibold">regulatorischen Vorgaben</strong> sicher.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Zu meinen Kernaufgaben gehören die{' '}
|
||||
<strong className="text-text font-semibold">
|
||||
technische Projektleitung komplexer Migrationen
|
||||
</strong>{' '}
|
||||
(z.B. Kubernetes-Migration ohne Ausfallzeiten), die Steuerung{' '}
|
||||
<strong className="text-text font-semibold">
|
||||
internationaler Teams (inkl. Nearshore)
|
||||
</strong>, Code Reviews sowie die aktive Teilnahme an{' '}
|
||||
<strong className="text-text font-semibold">Cost-Savings-Programmen</strong>.
|
||||
Darüber hinaus arbeite ich in den Bereichen{' '}
|
||||
<strong className="text-text font-semibold">
|
||||
Managed Application & Cloud Service
|
||||
</strong>, wo ich neue Produkte architektonisch begleite und bei
|
||||
Bieterverfahren meine Expertise einbringe.
|
||||
</p>
|
||||
|
||||
<p className="pt-4 border-t border-gray-200">
|
||||
Mit dieser Präsentation möchte ich die Gelegenheit nutzen, mich als motivierten und
|
||||
kompetenten Bewerber bei Ihrem Unternehmen vorzustellen.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Nachfolgend können Sie sich einen Eindruck über mich und meine abgeschlossenen Projekte{' '}
|
||||
<a
|
||||
href="#portfolio"
|
||||
className="text-primary hover:text-primary-dark font-semibold underline underline-offset-4 transition-colors"
|
||||
>
|
||||
hier
|
||||
</a>{' '}
|
||||
verschaffen. Gerne überzeuge ich Sie auch in einem persönlichen Gespräch von mir.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<div className="mb-12">
|
||||
<h3 className="text-2xl font-bold text-text mb-8 text-center">
|
||||
Karriere-Timeline
|
||||
</h3>
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{timeline.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`relative pl-8 pb-8 border-l-2 border-primary/30 last:border-transparent ${
|
||||
isVisible ? 'animate-fade-in' : 'opacity-0'
|
||||
}`}
|
||||
style={{ animationDelay: `${(index + 4) * 100}ms` }}
|
||||
>
|
||||
{/* Timeline dot */}
|
||||
<div className="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-primary border-4 border-white shadow-md" />
|
||||
|
||||
<div className="bg-bg-light rounded-lg p-6 hover:shadow-lg transition-shadow">
|
||||
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-start mb-2">
|
||||
<h4 className="text-lg font-bold text-text">{item.role}</h4>
|
||||
<span className="text-sm font-semibold text-primary whitespace-nowrap">
|
||||
{item.year}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-text-light">{item.company}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Skills Tags */}
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h3 className="text-2xl font-bold text-text mb-6 text-center">
|
||||
Kernkompetenzen
|
||||
</h3>
|
||||
<div className="flex flex-wrap justify-center gap-3">
|
||||
{skills.map((skill, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className={`px-4 py-2 bg-primary/10 text-primary font-semibold rounded-full text-sm border border-primary/20 hover:bg-primary hover:text-white transition-all cursor-default hover:scale-105 ${
|
||||
isVisible ? 'animate-fade-in' : 'opacity-0'
|
||||
}`}
|
||||
style={{ animationDelay: `${(index + timeline.length + 4) * 50}ms` }}
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user