feat(ui): add cv application frontend and configuration

src/components/Contact.jsx

@@ -0,0 +1,61 @@
+import { motion } from 'framer-motion';
+import { Mail, Github, Linkedin, Heart } from 'lucide-react';
+import { useCVData } from '../admin/hooks/CVContext';
+
+export default function Contact() {
+  const { data } = useCVData();
+  const { personal } = data;
+  
+  return (
+    <footer className="py-12 px-6 bg-slate-900 text-white">
+      <div className="max-w-4xl mx-auto">
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="text-center"
+        >
+          <h2 className="text-2xl font-bold mb-4">Kontakt</h2>
+          <p className="text-slate-400 mb-6">
+            Interessiert an einer Zusammenarbeit? Kontaktiere mich gerne!
+          </p>
+          
+          <div className="flex justify-center gap-4 mb-8">
+            <a
+              href={`mailto:${personal.email}`}
+              className="p-3 rounded-lg bg-slate-800 hover:bg-primary-600 transition-colors"
+              aria-label="Email"
+            >
+              <Mail size={24} />
+            </a>
+            <a
+              href={personal.github}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-3 rounded-lg bg-slate-800 hover:bg-primary-600 transition-colors"
+              aria-label="GitHub"
+            >
+              <Github size={24} />
+            </a>
+            <a
+              href={personal.linkedin}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-3 rounded-lg bg-slate-800 hover:bg-primary-600 transition-colors"
+              aria-label="LinkedIn"
+            >
+              <Linkedin size={24} />
+            </a>
+          </div>
+          
+          <div className="pt-8 border-t border-slate-800 text-sm text-slate-500">
+            <p className="flex items-center justify-center gap-1">
+              Built with <Heart size={14} className="text-red-500" /> using React & Tailwind CSS
+            </p>
+            <p className="mt-2">© {new Date().getFullYear()} {personal.name}</p>
+          </div>
+        </motion.div>
+      </div>
+    </footer>
+  );
+}

src/components/Education.jsx

@@ -0,0 +1,53 @@
+import { motion } from 'framer-motion';
+import { GraduationCap, Calendar } from 'lucide-react';
+import { useCVData } from '../admin/hooks/CVContext';
+
+export default function Education() {
+  const { data } = useCVData();
+  const { education } = data;
+  
+  return (
+    <section id="education" 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"
+        >
+          Ausbildung
+        </motion.h2>
+        
+        <div className="grid md:grid-cols-2 gap-6">
+          {education.map((edu, index) => (
+            <motion.div
+              key={edu.id}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: index * 0.2 }}
+              className="bg-white rounded-xl p-6 shadow-sm border border-slate-100"
+            >
+              <div className="flex items-start gap-4">
+                <div className="w-12 h-12 rounded-lg bg-primary-100 flex items-center justify-center text-primary-600">
+                  <GraduationCap size={24} />
+                </div>
+                <div className="flex-1">
+                  <h3 className="text-lg font-semibold text-slate-900">{edu.degree}</h3>
+                  <p className="text-slate-600">{edu.institution}</p>
+                  <div className="flex items-center gap-2 mt-2 text-slate-500 text-sm">
+                    <Calendar size={14} />
+                    <span>{edu.period}</span>
+                  </div>
+                  <span className="inline-block mt-2 px-2 py-1 text-xs bg-amber-100 text-amber-700 rounded">
+                    {edu.status}
+                  </span>
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

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>
+  );
+}

src/components/Hero.jsx

@@ -0,0 +1,73 @@
+import { motion } from 'framer-motion';
+import { Github, Linkedin, Mail, MapPin } from 'lucide-react';
+import { useCVData } from '../admin/hooks/CVContext';
+
+export default function Hero() {
+  const { data } = useCVData();
+  const { personal } = data;
+  
+  return (
+    <section className="min-h-screen flex items-center justify-center px-6 py-20">
+      <motion.div 
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6 }}
+        className="max-w-3xl text-center"
+      >
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
+          className="w-32 h-32 mx-auto mb-8 rounded-full bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center text-white text-4xl font-bold"
+        >
+          {personal.name.split(' ').map(n => n[0]).join('')}
+        </motion.div>
+        
+        <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-2">
+          {personal.name}
+        </h1>
+        
+        <h2 className="text-xl md:text-2xl text-primary-600 font-medium mb-4">
+          {personal.title}
+        </h2>
+        
+        <div className="flex items-center justify-center gap-2 text-slate-500 mb-6">
+          <MapPin size={18} />
+          <span>{personal.location}</span>
+        </div>
+        
+        <p className="text-lg text-slate-600 mb-8 max-w-2xl mx-auto">
+          {personal.intro}
+        </p>
+        
+        <div className="flex justify-center gap-4">
+          <a
+            href={`mailto:${personal.email}`}
+            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 transition-colors text-slate-700"
+          >
+            <Mail size={20} />
+            <span>Email</span>
+          </a>
+          <a
+            href={personal.github}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 transition-colors text-slate-700"
+          >
+            <Github size={20} />
+            <span>GitHub</span>
+          </a>
+          <a
+            href={personal.linkedin}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 transition-colors text-slate-700"
+          >
+            <Linkedin size={20} />
+            <span>LinkedIn</span>
+          </a>
+        </div>
+      </motion.div>
+    </section>
+  );
+}

src/components/Projects.jsx

@@ -0,0 +1,57 @@
+import { motion } from 'framer-motion';
+import { ExternalLink } from 'lucide-react';
+import { useCVData } from '../admin/hooks/CVContext';
+
+export default function Projects() {
+  const { data } = useCVData();
+  const { projects } = data;
+  
+  return (
+    <section id="projects" className="py-20 px-6 bg-white">
+      <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"
+        >
+          Projekte
+        </motion.h2>
+        
+        <div className="grid md:grid-cols-2 gap-6">
+          {projects.map((project, index) => (
+            <motion.a
+              key={project.id}
+              href={project.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: index * 0.2 }}
+              whileHover={{ y: -4 }}
+              className="group bg-slate-50 rounded-xl p-6 border border-slate-100 hover:border-primary-200 hover:shadow-md transition-all"
+            >
+              <div className="flex items-start justify-between mb-3">
+                <h3 className="text-lg font-semibold text-slate-900 group-hover:text-primary-600 transition-colors">
+                  {project.name}
+                </h3>
+                <ExternalLink size={18} className="text-slate-400 group-hover:text-primary-500" />
+              </div>
+              
+              <p className="text-slate-600 mb-4 text-sm">{project.description}</p>
+              
+              <div className="flex flex-wrap gap-2">
+                {project.tech.map((t, i) => (
+                  <span key={i} className="px-2 py-1 text-xs bg-primary-50 text-primary-600 rounded">
+                    {t}
+                  </span>
+                ))}
+              </div>
+            </motion.a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/Skills.jsx

@@ -0,0 +1,72 @@
+import { motion } from 'framer-motion';
+import { useCVData } from '../admin/hooks/CVContext';
+
+const skillIcons = {
+  "Docker": "🐳",
+  "Kubernetes": "☸️",
+  "Helm": "⛵",
+  "Jenkins": "🔧",
+  "Bitbucket": "📘",
+  "ArgoCD": "🔄",
+  "Git": "📝",
+  "Azure": "☁️",
+  "Azure Resource Manager": "🏗️",
+  "Release Engineering": "🚀",
+  "Linux Administration": "🐧",
+  "Python": "🐍",
+  "Bash": "💻",
+  "Rust": "🦀"
+};
+
+export default function Skills() {
+  const { data } = useCVData();
+  const { skills } = data;
+  
+  return (
+    <section id="skills" className="py-20 px-6 bg-white">
+      <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"
+        >
+          Skills
+        </motion.h2>
+        
+        <div className="grid md:grid-cols-2 gap-8">
+          {Object.entries(skills).map(([category, items], catIndex) => (
+            <motion.div
+              key={category}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: catIndex * 0.1 }}
+              className="bg-slate-50 rounded-xl p-6"
+            >
+              <h3 className="text-lg font-semibold text-primary-600 mb-4">
+                {category}
+              </h3>
+              <div className="flex flex-wrap gap-2">
+                {items.map((skill, i) => (
+                  <motion.span
+                    key={skill}
+                    initial={{ opacity: 0, scale: 0.8 }}
+                    whileInView={{ opacity: 1, scale: 1 }}
+                    viewport={{ once: true }}
+                    transition={{ delay: i * 0.05 }}
+                    whileHover={{ scale: 1.05 }}
+                    className="px-3 py-1.5 bg-white rounded-lg text-sm text-slate-700 shadow-sm border border-slate-100 flex items-center gap-1.5 cursor-default"
+                  >
+                    {skillIcons[skill] && <span>{skillIcons[skill]}</span>}
+                    {skill}
+                  </motion.span>
+                ))}
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}