Upload components/Skills.jsx with huggingface_hub

components/Skills.jsx

@@ -0,0 +1,90 @@
+import { useState } from 'react';
+
+export default function Skills() {
+  const [activeCategory, setActiveCategory] = useState('all');
+
+  const categories = [
+    { id: 'all', name: 'All Skills' },
+    { id: 'frontend', name: 'Frontend' },
+    { id: 'backend', name: 'Backend' },
+    { id: 'tools', name: 'Tools & Others' },
+  ];
+
+  const skills = [
+    // Frontend
+    { name: 'React', level: 95, category: 'frontend' },
+    { name: 'Next.js', level: 90, category: 'frontend' },
+    { name: 'TypeScript', level: 88, category: 'frontend' },
+    { name: 'Tailwind CSS', level: 92, category: 'frontend' },
+    { name: 'Vue.js', level: 75, category: 'frontend' },
+    { name: 'HTML/CSS', level: 95, category: 'frontend' },
+    
+    // Backend
+    { name: 'Node.js', level: 85, category: 'backend' },
+    { name: 'Python', level: 80, category: 'backend' },
+    { name: 'PostgreSQL', level: 78, category: 'backend' },
+    { name: 'MongoDB', level: 82, category: 'backend' },
+    { name: 'GraphQL', level: 75, category: 'backend' },
+    { name: 'REST APIs', level: 90, category: 'backend' },
+    
+    // Tools
+    { name: 'Git', level: 90, category: 'tools' },
+    { name: 'Docker', level: 70, category: 'tools' },
+    { name: 'AWS', level: 65, category: 'tools' },
+    { name: 'Figma', level: 85, category: 'tools' },
+    { name: 'CI/CD', level: 75, category: 'tools' },
+    { name: 'Jest', level: 80, category: 'tools' },
+  ];
+
+  const filteredSkills = activeCategory === 'all' 
+    ? skills 
+    : skills.filter(skill => skill.category === activeCategory);
+
+  return (
+    <section id="skills" className="bg-gray-50">
+      <div className="section-container">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">Skills & Technologies</h2>
+          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+            Technologies I've been working with recently
+          </p>
+          <div className="w-20 h-1 bg-primary-500 mx-auto rounded-full mt-4"></div>
+        </div>
+
+        {/* Category Filter */}
+        <div className="flex flex-wrap justify-center gap-2 mb-12">
+          {categories.map((category) => (
+            <button
+              key={category.id}
+              onClick={() => setActiveCategory(category.id)}
+              className={`px-5 py-2 rounded-full text-sm font-medium transition-all ${activeCategory === category.id ? 'bg-primary-600 text-white shadow-lg shadow-primary-500/25' : 'bg-white text-gray-600 hover:bg-gray-100'}`}
+            >
+              {category.name}
+            </button>
+          ))}
+        </div>
+
+        {/* Skills Grid */}
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          {filteredSkills.map((skill) => (
+            <div
+              key={skill.name}
+              className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow"
+            >
+              <div className="flex items-center justify-between mb-3">
+                <span className="font-semibold text-gray-900">{skill.name}</span>
+                <span className="text-sm text-primary-600 font-medium">{skill.level}%</span>
+              </div>
+              <div className="w-full bg-gray-200 rounded-full h-2.5">
+                <div
+                  className="bg-gradient-to-r from-primary-500 to-primary-600 h-2.5 rounded-full transition-all duration-500"
+                  style={{ width: `${skill.level}%` }}
+                ></div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}