1
import styles from './page.module.scss'
2
import React from 'react';
3
import dynamic from 'next/dynamic';
4

5
const Earth = dynamic(() => import('@/components/earth'), {
6
  ssr: false,
7
  loading: () => <img src="/assets/placeholder.png"></img>
8
})
9

10
export default function Home() {
11
  return (
12
    <main className={styles.main}>
13
        <Earth />
14
    </main>
15
  )
16
}

1
'use client';
2
import { useEffect } from 'react'
3
import Lenis from '@studio-freight/lenis'
4

5
export default function smoothScroll({children}) {
6

7
    useEffect( () => {
8
        window.scrollTo(0,0);
9
        
10
        const lenis = new Lenis()
11
        
12
        function raf(time) {
13
          lenis.raf(time)
14
          requestAnimationFrame(raf)
15
        }
16
        
17
        requestAnimationFrame(raf)
18
    }, [])
19

20
    return children
21
}

1

2
'use client';
3
import { useState } from 'react';
4
import styles from './style.module.scss';
5
import Titles from './titles';
6
import Descriptions from './descriptions';
7

8
const data = [
9
    {
10
        title: "Ford",
11
        description: "Working on the Next-Generation HMI Experience without no driving experience.",
12
        speed: 0.5
13
    },
14
    {
15
        title: "UFC",
16
        description: "Developed the Future of UFC Sports Ecosystem despite not being a sports fan.",
17
        speed: 0.5
18
    },
19
    {
20
        title: "Lincoln",
21
        description: "Defined the visual concept and design language for the Lincoln Zephyr 2022 but never seen it in real life.",
22
        speed: 0.67
23
    },
24
    {
25
        title: "Royal Caribbean",
26
        description: "I was just one person on a massive team that created an entire Royal Caribbean eco-system.",
27
        speed: 0.8
28
    },
29
    {
30
        title: "Sleepiq",
31
        description: "Designed a 1M+ users product utilizing my best personal experience: sleeping.",
32
        speed: 0.8
33
    },
34
    {
35
        title: "NFL",
36
        description: "Explored the Future of Fantasy Football while being in a country where football means a total different sport.",
37
        speed: 0.8
38
    }
39
]
40

41
export default function Projects() {
42
    const [selectedProject, setSelectedProject] = useState(null)
43
    return (
44
        <div className={styles.container}>
45
            <Titles data={data} setSelectedProject={setSelectedProject}/>
46
            <Descriptions data={data} selectedProject={selectedProject}/>
47
        </div>
48
    )
49
}

1

2
import React, { useRef } from 'react'
3
import styles from './style.module.scss';
4
import { useScroll, motion, useTransform, useMotionTemplate } from 'framer-motion';
5

6
export default function index({data, setSelectedProject}) {
7
  return (
8
    <div className={styles.titles}>
9
        {
10
            data.map( (project, i) => {
11
                return <Title key={i} data={{...project, i}} setSelectedProject={setSelectedProject}/>
12
            })
13
        }
14
    </div>
15
  )
16
}
17

18
function Title({data, setSelectedProject}) {
19

20
    const { title, speed, i } = data;
21
    const container = useRef(null);
22

23
    const { scrollYProgress } = useScroll({
24
        target: container,
25
        offset: ['start end', `${25 / speed}vw end`]
26
    })
27

28
    const clipProgress = useTransform(scrollYProgress, [0,1], [100, 0]);
29
    const clip = useMotionTemplate`inset(0 ${clipProgress}% 0 0)`;
30
    
31
    return (
32
        <div ref={container} className={styles.title}>
33
            <div 
34
                className={styles.wrapper}
35
                onMouseOver={() => {setSelectedProject(i)}}
36
                onMouseLeave={() => {setSelectedProject(null)}}
37
            >
38
                <motion.p style={{clipPath: clip}}>
39
                    {title}
40
                </motion.p>
41
                <p>
42
                    {title}
43
                </p>
44
            </div>
45
        </div>
46
    )
47
}

1
import React from 'react'
2
import styles from './style.module.scss';
3

4
export default function index({data, selectedProject}) {
5

6
    const crop = (string, maxLength) => {
7
        return string.substring(0, maxLength);
8
    }
9
    
10
    return (
11
        <div className={styles.descriptions}>
12
            {
13
                data.map( (project, i) => {
14
                    const { title, description } = project;
15
                    return (
16
                    <div 
17
                        key={i} 
18
                        className={styles.description}
19
                        style={{clipPath: selectedProject == i ? "inset(0 0 0)" : "inset(50% 0 50%"}}
20
                    >
21
                        <p>{crop(title, 9)}</p>
22
                        <p>{description}</p>
23
                    </div>
24
                    )
25
                })
26
            }
27
        </div>
28
    )
29
}