Upload components/Projects.jsx with huggingface_hub

components/Projects.jsx

@@ -0,0 +1,177 @@
+import { ExternalLink, Github, Star } from 'lucide-react';
+
+export default function Projects() {
+  const projects = [
+    {
+      title: 'E-Commerce Platform',
+      description: 'A full-featured online shopping platform with real-time inventory, payment processing, and admin dashboard.',
+      image: 'bg-gradient-to-br from-orange-400 to-pink-500',
+      tags: ['Next.js', 'TypeScript', 'Stripe', 'PostgreSQL'],
+      github: 'https://github.com',
+      demo: 'https://demo.com',
+      featured: true
+    },
+    {
+      title: 'Task Management App',
+      description: 'Collaborative project management tool with real-time updates, team workspaces, and analytics dashboard.',
+      image: 'bg-gradient-to-br from-blue-400 to-indigo-500',
+      tags: ['React', 'Node.js', 'Socket.io', 'MongoDB'],
+      github: 'https://github.com',
+      demo: 'https://demo.com',
+      featured: true
+    },
+    {
+      title: 'AI Content Generator',
+      description: 'AI-powered writing assistant that helps create blog posts, social media content, and marketing copy.',
+      image: 'bg-gradient-to-br from-purple-400 to-violet-500',
+      tags: ['Next.js', 'OpenAI', 'Prisma', 'Tailwind'],
+      github: 'https://github.com',
+      demo: 'https://demo.com',
+      featured: false
+    },
+    {
+      title: 'Fitness Tracking App',
+      description: 'Mobile-first application for tracking workouts, nutrition, and health metrics with progress visualization.',
+      image: 'bg-gradient-to-br from-green-400 to-emerald-500',
+      tags: ['React Native', 'Firebase', 'Chart.js', 'Redux'],
+      github: 'https://github.com',
+      demo: 'https://demo.com',
+      featured: false
+    },
+    {
+      title: 'Real Estate Marketplace',
+      description: 'Property listing platform with advanced search, virtual tours, and mortgage calculator features.',
+      image: 'bg-gradient-to-br from-cyan-400 to-blue-500',
+      tags: ['Vue.js', 'Django', 'PostgreSQL', 'AWS'],
+      github: 'https://github.com',
+      demo: 'https://demo.com',
+      featured: false
+    },
+    {
+      title: 'Social Media Dashboard',
+      description: 'Analytics dashboard for managing multiple social media accounts with scheduling and reporting.',
+      image: 'bg-gradient-to-br from-rose-400 to-red-500',
+      tags: ['React', 'GraphQL', 'Apollo', 'Material-UI'],
+      github: 'https://github.com',
+      demo: 'https://demo.com',
+      featured: false
+    }
+  ];
+
+  return (
+    <section id="projects" className="bg-white">
+      <div className="section-container">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">Featured Projects</h2>
+          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+            Some of my recent work that I'm proud of
+          </p>
+          <div className="w-20 h-1 bg-primary-500 mx-auto rounded-full mt-4"></div>
+        </div>
+
+        {/* Featured Projects */}
+        <div className="grid md:grid-cols-2 gap-8 mb-12">
+          {projects.filter(p => p.featured).map((project) => (
+            <div
+              key={project.title}
+              className="group relative bg-gray-50 rounded-2xl overflow-hidden hover:shadow-xl transition-all duration-300"
+            >
+              <div className={`h-48 ${project.image}`}></div>
+              <div className="p-6">
+                <div className="flex items-center gap-2 mb-3">
+                  <Star className="w-4 h-4 text-yellow-500 fill-current" />
+                  <span className="text-xs font-medium text-yellow-600 uppercase tracking-wide">Featured</span>
+                </div>
+                <h3 className="text-xl font-bold text-gray-900 mb-2">{project.title}</h3>
+                <p className="text-gray-600 mb-4">{project.description}</p>
+                <div className="flex flex-wrap gap-2 mb-4">
+                  {project.tags.map((tag) => (
+                    <span key={tag} className="px-3 py-1 bg-white text-xs font-medium text-gray-600 rounded-full border border-gray-200">
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+                <div className="flex gap-4">
+                  <a
+                    href={project.github}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-2 text-sm font-medium text-gray-600 hover:text-primary-600 transition-colors"
+                  >
+                    <Github className="w-4 h-4" />
+                    Code
+                  </a>
+                  <a
+                    href={project.demo}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-2 text-sm font-medium text-gray-600 hover:text-primary-600 transition-colors"
+                  >
+                    <ExternalLink className="w-4 h-4" />
+                    Live Demo
+                  </a>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Other Projects */}
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          {projects.filter(p => !p.featured).map((project) => (
+            <div
+              key={project.title}
+              className="group bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300"
+            >
+              <div className={`h-32 ${project.image}`}></div>
+              <div className="p-5">
+                <h3 className="text-lg font-bold text-gray-900 mb-2">{project.title}</h3>
+                <p className="text-sm text-gray-600 mb-3 line-clamp-2">{project.description}</p>
+                <div className="flex flex-wrap gap-1.5 mb-4">
+                  {project.tags.slice(0, 3).map((tag) => (
+                    <span key={tag} className="px-2 py-0.5 bg-white text-xs text-gray-600 rounded border border-gray-200">
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+                <div className="flex gap-3">
+                  <a
+                    href={project.github}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-gray-400 hover:text-primary-600 transition-colors"
+                    aria-label="View code"
+                  >
+                    <Github className="w-5 h-5" />
+                  </a>
+                  <a
+                    href={project.demo}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-gray-400 hover:text-primary-600 transition-colors"
+                    aria-label="View demo"
+                  >
+                    <ExternalLink className="w-5 h-5" />
+                  </a>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* View All Link */}
+        <div className="text-center mt-12">
+          <a
+            href="https://github.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 text-primary-600 font-medium hover:text-primary-700 transition-colors"
+          >
+            <Github className="w-5 h-5" />
+            View more on GitHub
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}