id

frontend/src/components/Skills.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { Briefcase, Code, Database, Palette, Smartphone, Zap } from 'lucide-react';
+
+const Skills: React.FC = () => {
+  const experience = [
+    {
+      title: 'Senior Full-Stack Developer',
+      company: 'Tech Innovations Inc.',
+      period: '2022 - Present',
+      description: 'Leading development of scalable web applications using React, Node.js, and cloud technologies.'
+    },
+    {
+      title: 'Frontend Developer',
+      company: 'Digital Solutions Ltd.',
+      period: '2020 - 2022',
+      description: 'Built responsive user interfaces and improved performance for e-commerce platforms.'
+    },
+    {
+      title: 'Junior Developer',
+      company: 'StartupXYZ',
+      period: '2019 - 2020',
+      description: 'Developed mobile applications and contributed to backend API development.'
+    }
+  ];
+
+  const specificSkills = [
+    { name: 'React', level: 95, icon: Code },
+    { name: 'TypeScript', level: 90, icon: Code },
+    { name: 'Node.js', level: 85, icon: Database },
+    { name: 'Python', level: 80, icon: Code },
+    { name: 'UI/UX Design', level: 75, icon: Palette },
+    { name: 'Mobile Development', level: 70, icon: Smartphone }
+  ];
+
+  return (
+    <section className="py-20 bg-background-light">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center">
+          <h2 className="text-3xl font-bold text-text sm:text-4xl">
+            Experience & Skills
+          </h2>
+          <p className="mt-4 text-lg text-lines max-w-2xl mx-auto">
+            A comprehensive overview of my professional journey and technical expertise
+          </p>
+        </div>
+
+        <div className="mt-16 grid grid-cols-1 lg:grid-cols-2 gap-12">
+          {/* Experience Section */}
+          <div>
+            <div className="flex items-center mb-8">
+              <div className="p-3 bg-other rounded-lg mr-4">
+                <Briefcase className="h-6 w-6 text-background" />
+              </div>
+              <h3 className="text-2xl font-bold text-text">Experience</h3>
+            </div>
+            <div className="space-y-6">
+              {experience.map((exp, index) => (
+                <div
+                  key={index}
+                  className="bg-background rounded-lg p-6 border border-lines"
+                >
+                  <h4 className="text-lg font-semibold text-text mb-1">
+                    {exp.title}
+                  </h4>
+                  <p className="text-other font-medium mb-2">
+                    {exp.company} • {exp.period}
+                  </p>
+                  <p className="text-lines text-sm">
+                    {exp.description}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Specific Skills Section */}
+          <div>
+            <div className="flex items-center mb-8">
+              <div className="p-3 bg-boxes rounded-lg mr-4">
+                <Zap className="h-6 w-6 text-text" />
+              </div>
+              <h3 className="text-2xl font-bold text-text">Specific Skills</h3>
+            </div>
+            <div className="space-y-6">
+              {specificSkills.map((skill, index) => {
+                const IconComponent = skill.icon;
+                return (
+                  <div key={skill.name} className="bg-background rounded-lg p-6 shadow-md border border-lines">
+                    <div className="flex items-center justify-between mb-3">
+                      <div className="flex items-center">
+                        <div className="p-2 bg-boxes rounded-lg mr-3">
+                          <IconComponent className="h-5 w-5 text-other" />
+                        </div>
+                        <span className="font-semibold text-text">{skill.name}</span>
+                      </div>
+                      <span className="text-sm font-medium text-lines">{skill.level}%</span>
+                    </div>
+                    <div className="w-full bg-background-light rounded-full h-2">
+                      <div
+                        className="bg-other h-2 rounded-full transition-all duration-1000 ease-out"
+                        style={{ width: `${skill.level}%` }}
+                      ></div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Skills;