Upload components/About.jsx with huggingface_hub

components/About.jsx

@@ -0,0 +1,82 @@
+import { Code2, Palette, Lightbulb, Users } from 'lucide-react';
+
+export default function About() {
+  const highlights = [
+    {
+      icon: Code2,
+      title: 'Clean Code',
+      description: 'Writing maintainable, scalable, and well-documented code following best practices.'
+    },
+    {
+      icon: Palette,
+      title: 'Modern Design',
+      description: 'Creating visually stunning interfaces with attention to detail and user experience.'
+    },
+    {
+      icon: Lightbulb,
+      title: 'Problem Solver',
+      description: 'Turning complex challenges into elegant, efficient solutions.'
+    },
+    {
+      icon: Users,
+      title: 'Team Player',
+      description: 'Collaborating effectively with cross-functional teams to deliver results.'
+    }
+  ];
+
+  return (
+    <section id="about" className="bg-white">
+      <div className="section-container">
+        <div className="text-center mb-16">
+          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">About Me</h2>
+          <div className="w-20 h-1 bg-primary-500 mx-auto rounded-full"></div>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-12 items-center">
+          {/* Left Column - Bio */}
+          <div className="space-y-6">
+            <p className="text-lg text-gray-600 leading-relaxed">
+              Hello! I'm a passionate developer with over 5 years of experience in building 
+              digital products. My journey in tech started with a curiosity about how things 
+              work on the web, which evolved into a career I truly love.
+            </p>
+            <p className="text-lg text-gray-600 leading-relaxed">
+              I specialize in the JavaScript ecosystem, working with React, Next.js, Node.js, 
+              and various modern tools. I'm also experienced in UI/UX design, which helps me 
+              bridge the gap between design and development.
+            </p>
+            <p className="text-lg text-gray-600 leading-relaxed">
+              When I'm not coding, you'll find me exploring new technologies, contributing to 
+              open-source projects, or sharing knowledge through technical writing and mentoring.
+            </p>
+            
+            <div className="flex flex-wrap gap-3 pt-4">
+              <span className="px-4 py-2 bg-primary-50 text-primary-700 rounded-full text-sm font-medium">
+                Available for freelance
+              </span>
+              <span className="px-4 py-2 bg-green-50 text-green-700 rounded-full text-sm font-medium">
+                Open to opportunities
+              </span>
+            </div>
+          </div>
+
+          {/* Right Column - Highlights */}
+          <div className="grid sm:grid-cols-2 gap-6">
+            {highlights.map((item, index) => (
+              <div
+                key={item.title}
+                className="p-6 rounded-xl bg-gray-50 hover:bg-primary-50 transition-colors group"
+              >
+                <div className="w-12 h-12 rounded-lg bg-primary-100 flex items-center justify-center mb-4 group-hover:bg-primary-200 transition-colors">
+                  <item.icon className="w-6 h-6 text-primary-600" />
+                </div>
+                <h3 className="text-lg font-semibold text-gray-900 mb-2">{item.title}</h3>
+                <p className="text-sm text-gray-600">{item.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}