All files / components PortfolioGrid.tsx

0% Statements 0/31
0% Branches 0/1
0% Functions 0/1
0% Lines 0/31
Press n or j to go to the next uncovered block, b, p or k for the previous block.

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  "use client"
 
import { motion } from "framer-motion"
import styles from "./PortfolioGrid.module.css"
 
interface PortfolioGridProps {
  openWindow: (app: any) => void
}
 
export default function PortfolioGrid({ openWindow }: PortfolioGridProps) {
  const portfolioItems = [
    { id: "project1", name: "Project 1", icon: "🚀" },
    { id: "project2", name: "Project 2", icon: "💻" },
    { id: "project3", name: "Project 3", icon: "🎨" },
    { id: "project4", name: "Project 4", icon: "📱" },
  ]
 
  return (
    <div className={styles.portfolioGrid}>
      <motion.h2
        className={styles.title}
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.5 }}
      >
        Featured Projects
      </motion.h2>
      <div className={styles.grid}>
        {portfolioItems.map((item, index) => (
          <motion.div
            key={item.id}
            className={styles.portfolioItem}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.6 + index * 0.1 }}
            whileHover={{ scale: 1.05 }}
            onClick={() => openWindow(item)}
          >
            <span className={styles.itemIcon}>{item.icon}</span>
            <span className={styles.itemName}>{item.name}</span>
          </motion.div>
        ))}
      </div>
    </div>
  )
}