Upload components/Experience.jsx with huggingface_hub

components/Experience.jsx

@@ -0,0 +1,128 @@
+import { Briefcase, Calendar, MapPin } from 'lucide-react';
+
+export default function Experience() {
+  const experiences = [
+    {
+      title: 'Senior Full Stack Developer',
+      company: 'Tech Innovators Inc.',
+      location: 'San Francisco, CA',
+      period: '2022 - Present',
+      type: 'Full-time',
+      description: 'Leading a team of 5 developers in building scalable web applications. Architected microservices infrastructure reducing deployment time by 60%.',
+      achievements: [
+        'Reduced API response time by 40% through optimization',
+        'Mentored 3 junior developers to senior level',
+        'Implemented CI/CD pipeline saving 20+ hours weekly'
+      ]
+    },
+    {
+      title: 'Full Stack Developer',
+      company: 'Digital Solutions LLC',
+      location: 'New York, NY',
+      period: '2020 - 2022',
+      type: 'Full-time',
+      description: 'Developed and maintained multiple client projects using React and Node.js. Collaborated with design team to implement pixel-perfect UI components.',
+      achievements: [
+        'Built 15+ production applications from scratch',
+        'Increased test coverage from 30% to 85%',
+        'Received "Developer of the Year" award in 2021'
+      ]
+    },
+    {
+      title: 'Frontend Developer',
+      company: 'Creative Agency',
+      location: 'Austin, TX',
+      period: '2018 - 2020',
+      type: 'Full-time',
+      description: 'Specialized in creating responsive, accessible web interfaces. Worked with various clients from startups to Fortune 500 companies.',
+      achievements: [
+        'Delivered 30+ websites with 100% client satisfaction',
+        'Introduced component library reducing dev time by 30%',
+        'Led accessibility initiative achieving WCAG 2.1 AA compliance'
+      ]
+    },
+    {
+      title: 'Junior Web Developer',
+      company: 'StartUp Hub',
+      location: 'Remote',
+      period: '2017 - 2018',
+      type: 'Contract',
+      description: 'Started my professional journey building landing pages and email templates. Learned modern JavaScript frameworks and best practices.',
+      achievements: [
+        'Mastered React and Vue.js in 6 months',
+        'Contributed to open-source projects',
+        'Built personal portfolio with 10k+ visitors'
+      ]
+    }
+  ];
+
+  return (
+    <section id="experience" 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">Work Experience</h2>
+          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+            My professional journey and career highlights
+          </p>
+          <div className="w-20 h-1 bg-primary-500 mx-auto rounded-full mt-4"></div>
+        </div>
+
+        <div className="max-w-4xl mx-auto">
+          {experiences.map((exp, index) => (
+            <div key={index} className="relative pl-8 sm:pl-0">
+              {/* Timeline line */}
+              {index !== experiences.length - 1 && (
+                <div className="absolute left-4 sm:left-1/2 top-12 bottom-0 w-0.5 bg-gray-200 sm:-translate-x-1/2"></div>
+              )}
+              
+              <div className={`flex flex-col sm:flex-row gap-6 sm:gap-12 ${index % 2 === 0 ? 'sm:flex-row' : 'sm:flex-row-reverse'}`}>
+                {/* Timeline dot */}
+                <div className="absolute left-2 sm:left-1/2 w-4 h-4 bg-primary-500 rounded-full border-4 border-white shadow sm:-translate-x-1/2 mt-3"></div>
+                
+                {/* Content */}
+                <div className={`sm:w-1/2 ${index % 2 === 0 ? 'sm:text-right sm:pr-12' : 'sm:pl-12'}`}>
+                  <div className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
+                    <div className={`flex items-center gap-2 mb-2 ${index % 2 === 0 ? 'sm:justify-end' : ''}`}>
+                      <Briefcase className="w-4 h-4 text-primary-500" />
+                      <span className="text-sm font-medium text-primary-600">{exp.type}</span>
+                    </div>
+                    
+                    <h3 className="text-lg font-bold text-gray-900 mb-1">{exp.title}</h3>
+                    <p className="text-primary-600 font-medium mb-3">{exp.company}</p>
+                    
+                    <div className={`flex flex-wrap gap-4 text-sm text-gray-500 mb-4 ${index % 2 === 0 ? 'sm:justify-end' : ''}`}>
+                      <span className="flex items-center gap-1">
+                        <Calendar className="w-4 h-4" />
+                        {exp.period}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <MapPin className="w-4 h-4" />
+                        {exp.location}
+                      </span>
+                    </div>
+                    
+                    <p className="text-gray-600 mb-4 text-sm leading-relaxed">
+                      {exp.description}
+                    </p>
+                    
+                    <ul className={`space-y-2 ${index % 2 === 0 ? 'sm:text-right' : ''}`}>
+                      {exp.achievements.map((achievement, i) => (
+                        <li key={i} className="text-sm text-gray-600 flex items-start gap-2">
+                          <span className="w-1.5 h-1.5 bg-primary-400 rounded-full mt-2 flex-shrink-0"></span>
+                          <span>{achievement}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+                
+                {/* Empty space for alternating layout */}
+                <div className="hidden sm:block sm:w-1/2"></div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}