72 lines
2.7 KiB
JavaScript
72 lines
2.7 KiB
JavaScript
import { motion } from 'framer-motion';
|
|
import { Briefcase, Calendar } from 'lucide-react';
|
|
import { useCVData } from '../admin/hooks/CVContext';
|
|
|
|
export default function Experience() {
|
|
const { data } = useCVData();
|
|
const { experience } = data;
|
|
|
|
return (
|
|
<section id="experience" className="py-20 px-6">
|
|
<div className="max-w-4xl mx-auto">
|
|
<motion.h2
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
className="text-3xl font-bold text-slate-900 mb-12 text-center"
|
|
>
|
|
Berufserfahrung
|
|
</motion.h2>
|
|
|
|
<div className="relative">
|
|
{experience.map((exp, index) => (
|
|
<motion.div
|
|
key={exp.id}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: index * 0.2 }}
|
|
className="relative pl-8 pb-12 last:pb-0"
|
|
>
|
|
<div className="absolute left-0 top-2 w-4 h-4 rounded-full bg-primary-500 border-4 border-primary-100" />
|
|
{index !== experience.length - 1 && (
|
|
<div className="absolute left-[7px] top-6 w-0.5 h-full bg-slate-200" />
|
|
)}
|
|
|
|
<div className="bg-white rounded-xl p-6 shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
|
|
<div className="flex flex-wrap items-start justify-between gap-2 mb-2">
|
|
<h3 className="text-xl font-semibold text-slate-900">{exp.role}</h3>
|
|
<span className="px-3 py-1 text-sm bg-primary-100 text-primary-700 rounded-full">
|
|
{exp.type}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 text-slate-500 mb-4">
|
|
<span className="flex items-center gap-1">
|
|
<Briefcase size={16} />
|
|
{exp.company}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Calendar size={16} />
|
|
{exp.period}
|
|
</span>
|
|
</div>
|
|
|
|
<p className="text-slate-600 mb-4">{exp.description}</p>
|
|
|
|
<ul className="space-y-2">
|
|
{exp.highlights.map((highlight, i) => (
|
|
<li key={i} className="flex items-start gap-2 text-slate-600">
|
|
<span className="text-primary-500 mt-1">•</span>
|
|
{highlight}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |