1
'use client'
2
import styles from './page.module.css'
3
import Project from '../components/project';
4

5
export default function Home() {
6

7
  const projects = [
8
    {
9
      title1: "Jomor",
10
      title2: "Design",
11
      src: "jomor_design.jpeg"
12
    },
13
    {
14
      title1: "La",
15
      title2: "Grange",
16
      src: "la_grange.jpeg"
17
    },
18
    {
19
      title1: "Deux Huit",
20
      title2: "Huit",
21
      src: "deux_huit_huit.jpeg"
22
    },
23
    {
24
      title1: "Nothing",
25
      title2: "Design Studio",
26
      src: "nothing_design_studio.png"
27
    },
28
    {
29
      title1: "Mambo",
30
      title2: "Mambo",
31
      src: "mambo_mambo.jpeg"
32
    }
33
  ]
34

35
  return (
36
    <main className={styles.main}>
37
      <div className={styles.gallery}>
38
        <p>Featured Work</p>
39
          {
40
            projects.map( project => {
41
              return <Project project={project}/>
42
            })
43
          }
44
      </div>
45
    </main>
46
  )
47
}
48

1
import styles from './Style.module.css';
2

3
export default function index({project}) {
4
    const { title1, title2, src } = project;
5
    return (
6
        <div className={styles.project}>
7
            <p>{title1}</p>
8
            <div className={styles.imgContainer}>
9
                <img src={`/medias/${src}`}></img>
10
            </div>
11
            <p>{title2}</p>
12
        </div>
13
    )
14
}

1
'use client'
2
import styles from './style.module.css';
3
import { motion } from 'framer-motion';
4
import { useState } from 'react';
5

6
const anim = {
7
    initial: {width: 0},
8
    open: {width: "auto", transition: {duration: 0.4, ease: [0.23, 1, 0.32, 1]}},
9
    closed: {width: 0}
10
}
11

12
export default function index({project}) {
13

14
    const [isActive, setIsActive] = useState(false);
15

16
    const { title1, title2, src } = project;
17
    return (
18
        <div onMouseEnter={() => {setIsActive(true)}} onMouseLeave={() => {setIsActive(false)}} className={styles.project}>
19
            <p>{title1}</p>
20
            <motion.div variants={anim} animate={isActive ? "open" : "closed"} className={styles.imgContainer}>
21
                <img src={`/medias/${src}`}></img>
22
            </motion.div>
23
            <p>{title2}</p>
24
        </div>
25
    )
26
}