feat: setup, landing page

src/components/Skills.tsx

@@ -0,0 +1,51 @@
+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;