projects.tsx
1'use client'
2
3import { Link } from 'nextjs13-progress'
4import { Badge } from '@/components/ui/badge'
5import { GitFork, Star } from 'lucide-react'
6import Layout from './Layout'
7import { motion } from 'framer-motion'
8
9const fadeInUp = {
10 initial: { opacity: 0, y: 20 },
11 animate: { opacity: 1, y: 0 },
12 transition: { duration: 0.6 },
13}
14
15// eslint-disable-next-line @typescript-eslint/no-explicit-any
16export function ProjectsPage({ projects }: { projects: any[] }) {
17 return (
18 <Layout>
19 <section id="projects" className="min-h-screen py-20">
20 <div className="container mx-auto">
21 <h1 className="mb-8 text-center text-3xl font-bold">
22 My GitHub Projects
23 </h1>
24 <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
25 {projects.map((project) => (
26 <motion.div
27 key={project.id}
28 className="perspective-1000 group rounded-xl border border-gray-700 bg-gray-900/50 p-6 backdrop-blur-sm transition-all duration-300 ease-out hover:border-blue-500/50"
29 variants={fadeInUp}
30 whileHover={{
31 rotateX: -2,
32 rotateY: 5,
33 scale: 1.02,
34 transition: {
35 duration: 0.2,
36 ease: 'easeOut',
37 },
38 }}
39 whileTap={{ scale: 0.98 }}
40 style={{
41 transformStyle: 'preserve-3d',
42 boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
43 }}
44 >
45 <motion.div
46 className="relative z-10"
47 style={{ transform: 'translateZ(50px)' }}
48 >
49 <div className="mb-4">
50 <h3 className="text-2xl font-semibold transition-colors duration-300 group-hover:text-blue-400">
51 {project.name}
52 </h3>
53 </div>
54 <div className="space-y-4">
55 <p className="text-sm text-gray-300">
56 {project.description || 'No description'}
57 </p>
58 <div className="flex items-center justify-between">
59 <div className="flex space-x-2">
60 <Badge
61 variant="secondary"
62 className="flex items-center space-x-1 bg-gray-700/50"
63 >
64 <Star className="h-4 w-4 text-yellow-500" />
65 <span className="text-xs text-gray-300">
66 {project.stargazers_count || 0}
67 </span>
68 </Badge>
69 <Badge
70 variant="secondary"
71 className="flex items-center space-x-1 bg-gray-700/50"
72 >
73 <GitFork className="h-4 w-4 text-gray-300" />
74 <span className="text-xs text-gray-300">
75 {project.forks_count || 0}
76 </span>
77 </Badge>
78 </div>
79 <Link
80 href={`/projects/${project.name}`}
81 className="text-blue-400 transition-colors duration-300 hover:text-blue-300 hover:underline"
82 >
83 View Details
84 </Link>
85 </div>
86 </div>
87 </motion.div>
88 </motion.div>
89 ))}
90 </div>
91 </div>
92 </section>
93 </Layout>
94 )
95}
96