Spaces:
Running
Running
File size: 4,109 Bytes
26f4db3 |
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 |
"use client";
import { projects } from "@/lib/data";
import Image from "next/image";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Github, BarChart, Presentation } from "lucide-react";
const getProjectIcon = (id: number) => {
switch (id) {
case 1:
return <Presentation className="h-6 w-6 text-accent" />;
case 2:
return <BarChart className="h-6 w-6 text-accent" />;
default:
return null;
}
};
const projectImages: { [key: number]: { src: string; alt: string, hint: string } } = {
1: {
src: "https://raw.githubusercontent.com/sameerbanchhor-git/assets/main/Customer%20Churn%20Prediction.png",
alt: "Customer Churn Prediction project visual",
hint: "churn prediction"
},
2: {
src: "https://raw.githubusercontent.com/sameerbanchhor-git/assets/main/Real-Time%20Sentiment%20Analysis.jpg",
alt: "Real-Time Sentiment Analysis project visual",
hint: "sentiment analysis"
},
};
export function Projects() {
return (
<section id="projects" className="w-full py-12 md:py-24 lg:py-32 bg-secondary">
<div className="container px-4 md:px-6">
<div className="flex flex-col items-center justify-center space-y-4 text-center mb-12">
<h2 className="text-3xl font-headline font-bold tracking-tighter sm:text-5xl text-primary">
My Projects
</h2>
<p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
Here are some of the projects I've worked on to apply and showcase
my skills in data science.
</p>
</div>
<div className="grid gap-8 md:grid-cols-1 lg:grid-cols-1">
{projects.map((project) => (
<Card
key={project.id}
className="flex flex-col overflow-hidden transition-all hover:shadow-lg"
>
<CardHeader className="flex flex-row items-start gap-4">
{getProjectIcon(project.id)}
<div>
<CardTitle className="font-headline text-2xl">
{project.title}
</CardTitle>
<CardDescription>{project.outcomes}</CardDescription>
</div>
</CardHeader>
<CardContent className="grid md:grid-cols-2 gap-6 flex-grow">
<div className="space-y-4">
<p className="text-foreground/80 break-words">{project.description}</p>
<div>
<h4 className="font-semibold mb-2">Methodologies:</h4>
<div className="flex flex-wrap gap-2">
{project.methodologies.map((method) => (
<Badge key={method} variant="secondary">
{method}
</Badge>
))}
</div>
</div>
</div>
<div className="flex items-center justify-center">
{projectImages[project.id] && (
<Image
src={projectImages[project.id].src}
alt={projectImages[project.id].alt}
data-ai-hint={projectImages[project.id].hint}
width={600}
height={400}
className="object-cover rounded-lg shadow-md border-2 border-accent"
/>
)}
</div>
</CardContent>
<CardFooter>
<a href={project.githubUrl} target="_blank" rel="noopener noreferrer">
<Button variant="outline">
<Github className="mr-2 h-4 w-4" />
View on GitHub
</Button>
</a>
</CardFooter>
</Card>
))}
</div>
</div>
</section>
);
}
|