feat(ui): add cv application frontend and configuration

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