52 lines
2.0 KiB
TypeScript
52 lines
2.0 KiB
TypeScript
import { useTranslation } from 'react-i18next';
|
|
|
|
const Skills = () => {
|
|
const { t } = useTranslation();
|
|
|
|
const skillCategories = [
|
|
{
|
|
title: 'skills.languages.title',
|
|
skills: ['Python', 'JavaScript/TypeScript', 'Java', 'C', 'SQL', 'HTML/CSS', 'Bash']
|
|
},
|
|
{
|
|
title: 'skills.frameworks.title',
|
|
skills: ['React', 'Node.js', 'Django', 'FastAPI', 'TailwindCSS', 'Bootstrap']
|
|
},
|
|
{
|
|
title: 'skills.tools.title',
|
|
skills: ['Git', 'Docker', 'Linux', 'PostgreSQL', 'MongoDB', 'REST API']
|
|
},
|
|
{
|
|
title: 'skills.other.title',
|
|
skills: ['Agile/Scrum', 'CI/CD', 'Test unitaires', 'Architecture logicielle']
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section id="skills" className="py-20 px-8">
|
|
<div className="max-w-4xl mx-auto">
|
|
<h2 className="text-4xl font-bold mb-12 text-accent">{t('skills.title')}</h2>
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|
{skillCategories.map((category, index) => (
|
|
<div key={index} className="bg-secondary/5 p-6 rounded-lg border border-secondary/10">
|
|
<h3 className="text-xl font-semibold mb-4 text-secondary">{t(category.title)}</h3>
|
|
<div className="flex flex-wrap gap-2">
|
|
{category.skills.map((skill, skillIndex) => (
|
|
<span
|
|
key={skillIndex}
|
|
className="px-4 py-2 bg-accent/10 text-accent border border-accent/20 rounded-full text-sm font-medium hover:bg-accent/20 transition-all"
|
|
>
|
|
{skill}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Skills;
|