afiqzudinhadi/afiqzudinhadi.github.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: template from chef

Browse source
This commit is contained in:
afiqzudinhadi 2025-06-05 22:29:55 +08:00
parent 7335ea2581
commit 64feeaa877
15 changed files with 1001 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

160
app/components/projects-section.tsx Normal file
View file

@ -0,0 +1,160 @@
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Github, ExternalLink, Star } from "lucide-react";
interface Project {
_id: string;
title: string;
description: string;
technologies: string[];
githubUrl?: string;
liveUrl?: string;
featured: boolean;
}
interface ProjectsSectionProps {
projects: Project[];
}
export function ProjectsSection({ projects }: ProjectsSectionProps) {
const featuredProjects = projects.filter((p) => p.featured);
const otherProjects = projects.filter((p) => !p.featured);
return (
<section id="projects" className="py-20 bg-muted/30">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 className="text-4xl font-bold text-center mb-16">Projects</h2>
{featuredProjects.length > 0 && (
<div className="mb-16">
<h3 className="text-2xl font-semibold mb-8 flex items-center">
<Star className="mr-2 h-6 w-6 text-yellow-500" />
Featured Projects
</h3>
<div className="grid md:grid-cols-2 gap-8">
{featuredProjects.map((project) => (
<Card
key={project._id}
className="hover:shadow-lg transition-shadow"
>
<CardHeader>
<CardTitle className="flex items-center justify-between">
{project.title}
<Badge variant="secondary">Featured</Badge>
</CardTitle>
<CardDescription className="leading-relaxed">
{project.description}
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-2 mb-4">
{project.technologies.map((tech) => (
<Badge key={tech} variant="outline">
{tech}
</Badge>
))}
</div>
<div className="flex gap-2">
{project.githubUrl && (
<Button size="sm" variant="outline" asChild>
<a
href={project.githubUrl}
target="_blank"
rel="noopener noreferrer"
>
<Github className="mr-2 h-4 w-4" />
Code
</a>
</Button>
)}
{project.liveUrl && (
<Button size="sm" asChild>
<a
href={project.liveUrl}
target="_blank"
rel="noopener noreferrer"
>
<ExternalLink className="mr-2 h-4 w-4" />
Live Demo
</a>
</Button>
)}
</div>
</CardContent>
</Card>
))}
</div>
</div>
)}
{otherProjects.length > 0 && (
<div>
<h3 className="text-2xl font-semibold mb-8">Other Projects</h3>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{otherProjects.map((project) => (
<Card
key={project._id}
className="hover:shadow-lg transition-shadow"
>
<CardHeader>
<CardTitle className="text-lg">{project.title}</CardTitle>
<CardDescription className="text-sm leading-relaxed">
{project.description}
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-1 mb-4">
{project.technologies.slice(0, 3).map((tech) => (
<Badge key={tech} variant="outline" className="text-xs">
{tech}
</Badge>
))}
{project.technologies.length > 3 && (
<Badge variant="outline" className="text-xs">
+{project.technologies.length - 3}
</Badge>
)}
</div>
<div className="flex gap-2">
{project.githubUrl && (
<Button size="sm" variant="outline" asChild>
<a
href={project.githubUrl}
target="_blank"
rel="noopener noreferrer"
>
<Github className="mr-1 h-3 w-3" />
Code
</a>
</Button>
)}
{project.liveUrl && (
<Button size="sm" asChild>
<a
href={project.liveUrl}
target="_blank"
rel="noopener noreferrer"
>
<ExternalLink className="mr-1 h-3 w-3" />
Demo
</a>
</Button>
)}
</div>
</CardContent>
</Card>
))}
</div>
</div>
)}
</div>
</section>
);
}