Spaces:
Build error
Build error
File size: 7,396 Bytes
216bb97 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 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>
);
} |