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,256 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
interface Job {
|
||||
id: string;
|
||||
title: string;
|
||||
company: string;
|
||||
location: string;
|
||||
period: string;
|
||||
description: string;
|
||||
responsibilities: string[];
|
||||
}
|
||||
|
||||
const jobs: Job[] = [
|
||||
{
|
||||
id: 'job1',
|
||||
title: 'Technischer Product Owner',
|
||||
company: 'IT im Bereich Finanzen und Banken',
|
||||
location: 'Regulatory & Risk, Nürnberg',
|
||||
period: 'Juni 2021 - heute',
|
||||
description: 'Technischer Product Owner in einem Nürnberger Unternehmen, welches die komplette Banken IT steuert.',
|
||||
responsibilities: [
|
||||
'Sicherstellung des Betriebs',
|
||||
'Planung und Priorisierung der Ressourcen & Aufgaben',
|
||||
'Technische Kommunikation und Architektur',
|
||||
'Migration der Infrastruktur K8s on prem & Cloud',
|
||||
'Aufbau neuer Services',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'job2',
|
||||
title: 'Product Owner',
|
||||
company: 'Mobile Applikationen Unternehmen',
|
||||
location: 'Nürnberg',
|
||||
period: 'Februar 2019 - März 2020',
|
||||
description: 'Product Owner in einem Nürnberger Unternehmen, welches mobile Applikationen zur Digitalisierung von Prozessen herstellt.',
|
||||
responsibilities: [
|
||||
'Abklärung der Anforderungen zwischen Stakeholdern und Entwicklern',
|
||||
'Planung und Priorisierung der Ressourcen & Aufgaben',
|
||||
'Technische Kommunikation und Architektur',
|
||||
'Migration der bestehenden Infrastruktur in die MagentaCloud (Kubernetes)',
|
||||
'Weiterentwicklung des Produktes',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'job3',
|
||||
title: 'Leiter IT',
|
||||
company: 'Unternehmen im Bereich Fahrzeugtechnik',
|
||||
location: 'Georgensgmünd',
|
||||
period: 'März 2014 - Januar 2019',
|
||||
description: 'Leiter einer IT-Abteilung in einem mittelfränkischen Unternehmen aus dem Bereich Fahrzeugtechnik.',
|
||||
responsibilities: [
|
||||
'Programmierung & Weiterentwicklung der Online Shops',
|
||||
'Anbindung der Warenwirtschaft',
|
||||
'Aufbau und Entwicklung eines Intranets',
|
||||
'Architektur der Datenbanken',
|
||||
'API Schnittstellenprogrammierung',
|
||||
'Migration/Neuaufbau und Entwicklung der Linux Server',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'job4',
|
||||
title: 'Marketing Manager',
|
||||
company: 'Trustec Energy GmbH',
|
||||
location: 'Solarbranche, Mittelfranken',
|
||||
period: 'Januar 2010 - März 2014',
|
||||
description: 'Marketing Manager in einem Unternehmen der Solarbranche mit Verantwortung für die komplette digitale Präsenz und Marketing-Kommunikation.',
|
||||
responsibilities: [
|
||||
'Aufbau, Programmierung und Pflege der Firmenwebseiten (trustec-energy.eu, mhm-marketing.com) mit Joomla CMS',
|
||||
'Entwicklung und Programmierung neuer CMS-Inhaltstypen und Module',
|
||||
'E-Mail Marketing: Erstellung, Versand und Erfolgsmessung von Newslettern und Messe-Respondern',
|
||||
'Print Design: Kataloge, Preislisten, Flyer, Rollups und Messestände (InDesign, Photoshop, Illustrator)',
|
||||
'Erstellung von 3D Produkt Mock-ups und Landing Pages',
|
||||
'Web Analytics mit Google Analytics und Piwik',
|
||||
'Koordination externer Dienstleister (Grafiker, Übersetzer, Messebauer)',
|
||||
'IT-Support: Betreuung Windows Server 2008, CRM-Software und Telefonanlage',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'job5',
|
||||
title: 'Freelancer Web Development & Design',
|
||||
company: 'Selbstständig',
|
||||
location: 'Verschiedene Branchen',
|
||||
period: 'Januar 2000 - Dezember 2010',
|
||||
description: 'Über 10 Jahre selbstständig für Unternehmenskunden aus unterschiedlichen Branchen tätig, mit Fokus auf webbasierte Lösungen.',
|
||||
responsibilities: [
|
||||
'Entwicklung von Präsentations- und Buchungssystemen',
|
||||
'Programmierung von CMS-Systemen und Content-Management-Lösungen',
|
||||
'Aufbau und Entwicklung von E-Commerce Shops',
|
||||
'Webdesign und Frontend-Entwicklung (HTML, CSS, JavaScript, Flash/Actionscript)',
|
||||
'Kundenberatung und Anforderungsanalyse',
|
||||
'Print Design und Corporate Design Entwicklung',
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function Experience() {
|
||||
const [activeJob, setActiveJob] = useState(0);
|
||||
|
||||
return (
|
||||
<section id="experience" className="py-20 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-text text-center mb-16 relative inline-block w-full after:content-[''] after:block after:w-12 after:h-1 after:bg-primary after:mt-6 after:mx-auto">
|
||||
Berufserfahrung
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Job Tabs - Jetzt mit besserer Mobile-Darstellung */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="flex flex-col gap-3">
|
||||
{jobs.map((job, index) => (
|
||||
<button
|
||||
key={job.id}
|
||||
onClick={() => setActiveJob(index)}
|
||||
className={`text-left p-4 sm:p-5 rounded-lg transition-all duration-300 ${
|
||||
activeJob === index
|
||||
? 'bg-primary text-white shadow-lg scale-105'
|
||||
: 'bg-gray-100 text-text hover:bg-gray-200 hover:shadow-md'
|
||||
}`}
|
||||
>
|
||||
<h3 className="font-bold text-sm sm:text-base lg:text-lg mb-1">
|
||||
{job.title}
|
||||
</h3>
|
||||
<p className={`text-xs sm:text-sm ${activeJob === index ? 'text-white/80' : 'text-text-light'}`}>
|
||||
{job.company}
|
||||
</p>
|
||||
<p className={`text-xs mt-1 font-semibold ${activeJob === index ? 'text-white/90' : 'text-primary'}`}>
|
||||
{job.period.split(' - ')[0]}
|
||||
</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Job Details */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="bg-bg-light rounded-lg p-6 sm:p-8 shadow-md hover:shadow-xl transition-shadow">
|
||||
{/* Header */}
|
||||
<div className="mb-6 pb-6 border-b border-gray-200">
|
||||
<h3 className="text-xl sm:text-2xl lg:text-3xl font-bold text-text mb-3">
|
||||
{jobs[activeJob].title}
|
||||
</h3>
|
||||
<div className="flex flex-col gap-2 mb-2">
|
||||
<p className="text-base sm:text-lg font-semibold text-text-light flex items-center">
|
||||
<svg className="w-5 h-5 mr-2 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
{jobs[activeJob].company}
|
||||
</p>
|
||||
<p className="text-sm sm:text-base text-text-light flex items-center">
|
||||
<svg className="w-5 h-5 mr-2 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
{jobs[activeJob].location}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-primary font-bold text-base sm:text-lg flex items-center">
|
||||
<svg className="w-5 h-5 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
{jobs[activeJob].period}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-text-light mb-6 text-sm sm:text-base leading-relaxed">
|
||||
{jobs[activeJob].description}
|
||||
</p>
|
||||
|
||||
{/* Responsibilities */}
|
||||
<h4 className="font-bold text-text mb-4 text-base sm:text-lg flex items-center">
|
||||
<svg className="w-5 h-5 mr-2 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
|
||||
</svg>
|
||||
Verantwortlichkeiten:
|
||||
</h4>
|
||||
<ul className="space-y-3">
|
||||
{jobs[activeJob].responsibilities.map((resp, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className="flex items-start group hover:translate-x-1 transition-transform"
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5 text-primary mt-0.5 mr-3 flex-shrink-0 group-hover:scale-110 transition-transform"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-text-light leading-relaxed text-sm sm:text-base">{resp}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Tags for quick tech overview */}
|
||||
<div className="mt-8 pt-6 border-t border-gray-200">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{activeJob === 0 && (
|
||||
<>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Kubernetes</span>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Cloud Migration</span>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Systemarchitektur</span>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Financial IT</span>
|
||||
</>
|
||||
)}
|
||||
{activeJob === 1 && (
|
||||
<>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Kubernetes</span>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Mobile Apps</span>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Stakeholder Management</span>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Digitalisierung</span>
|
||||
</>
|
||||
)}
|
||||
{activeJob === 2 && (
|
||||
<>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">E-Commerce</span>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Laravel</span>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Vue.js</span>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">API Development</span>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Team Leadership</span>
|
||||
</>
|
||||
)}
|
||||
{activeJob === 3 && (
|
||||
<>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Joomla</span>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">E-Mail Marketing</span>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Adobe Suite</span>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Google Analytics</span>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">3D Design</span>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Print Design</span>
|
||||
</>
|
||||
)}
|
||||
{activeJob === 4 && (
|
||||
<>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">HTML/CSS/JS</span>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">CMS Development</span>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">E-Commerce</span>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Flash/Actionscript</span>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Webdesign</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user