feat(ui): add cv application frontend and configuration

src/components/Experience.jsx

@@ -0,0 +1,72 @@
+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>
+  );
+}