1
import styles from '../styles/Home.module.css'
2

3
const projects = [
4
  {
5
    title: "New York",
6
    color: "#F06318"
7
  },
8
  {
9
    title: "San Francisco",
10
    color: "#DCF018"
11
  },
12
  {
13
    title: "San Antonio",
14
    color: "#18F0E8"
15
  },
16
  {
17
    title: "Nashville",
18
    color: "#8C0CF0"
19
  },
20
  {
21
    title: "Houston",
22
    color: "#F0183C"
23
  },
24
  {
25
    title: "New Orleans",
26
    color: "#F0BA18"
27
  },
28
  {
29
    title: "Oklahoma City",
30
    color: "#0C34F0"
31
  },
32
  {
33
    title: "Detroit",
34
    color: "#0CBCF0"
35
  },
36
  {
37
    title: "Indianapolis",
38
    color: "#91F018"
39
  }
40
]
41

42

43
export default function Home() {
44
  return (
45
    <div className={styles.container}>
46
       <div className={styles.projectContainer}>
47
            {
48
              projects.map( (project, index) => {
49
                return <div key={index}>
50
                  <p>{project.title}</p>
51
                </div>
52
              })
53
            }
54
        </div>
55
    </div>
56
  )
57
}
58

1
...
2

3
export default function Home() {
4

5
  const manageMouseEnter = (e, index) => {
6
    gsap.to(e.target, {top: "-2vw", backgroundColor: projects[index].color, duration: 0.3})
7
  }
8

9
  const manageMouseLeave = (e, index) => {
10
    gsap.to(e.target, {top: "0", backgroundColor: "white", duration: 0.3, delay: 0.1})
11
  }
12

13
  return (
14
    <div className={styles.container}>
15
        <div className={styles.projectContainer}>
16
            {
17
              projects.map( (project, index) => {
18
                return <div onMouseEnter={(e) => {manageMouseEnter(e, index)}} onMouseLeave={(e) => {manageMouseLeave(e, index)}} key={index}>
19
                  <p>{project.title}</p>
20
                </div>
21
              })
22
            }
23
        </div>
24
    </div>
25
  )
26
}
27