72 lines
2.3 KiB
JavaScript
72 lines
2.3 KiB
JavaScript
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>
|
|
);
|
|
} |