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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
import { motion } from "framer-motion";
const fadeInUp = {
initial: { opacity: 0, y: 20 },
animate: { opacity: 1, y: 0 },
transition: { duration: 0.6 },
};
const staggerContainer = {
animate: {
transition: {
staggerChildren: 0.1,
},
},
};
export const Projects = () => {
return (
<motion.section
id="projects"
className="projects"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
>
<motion.h2
variants={fadeInUp}
initial="initial"
whileInView="animate"
viewport={{ once: true }}
>
My Projects
</motion.h2>
<motion.div
className="project-grid"
variants={staggerContainer}
initial="initial"
whileInView="animate"
viewport={{ once: true }}
>
<motion.div
className="project-card"
variants={fadeInUp}
whileHover={{ y: -10, transition: { duration: 0.2 }, cursor: "alias" }}
onClick={() => window.open("https://app.powerbi.com/view?r=eyJrIjoiZWVlNmI0MzUtMmVlOC00OTY4LWExODAtYzljYThjNjU5M2JkIiwidCI6ImE5ZjM5NjdkLTQwOWItNDNmNy05MjQ2LTY2YjljNTQzYTRkNSJ9", "_blank")}
>
<motion.div
className="project-image"
style={{ backgroundImage: "url('/projects/robert-de-niro-project.jpg')" }}
whileHover={{ scale: 1.05, transition: { duration: 0.2 }}}
/>
<h3>Robert De Niro: A Data-Driven Filmography</h3>
<p>
An interactive deep dive into Robert De Niro's film career through a crunching the data from Movie Database APIs.
</p>
<div className="project-tech">
<span>SQL</span>
<span>Python</span>
<span>PowerBI</span>
</div>
</motion.div>
<motion.div
className="project-card"
variants={fadeInUp}
whileHover={{ y: -10, transition: { duration: 0.2 }, cursor: "alias" }}
onClick={() => window.open("https://app.powerbi.com/view?r=eyJrIjoiMTdmMzVlNGMtYzhkMS00OTFkLWIwYzEtZmY2ODIyYjJkOGY1IiwidCI6ImE5ZjM5NjdkLTQwOWItNDNmNy05MjQ2LTY2YjljNTQzYTRkNSJ9&pageName=b178d00c0c03a7a3409e", "_blank")}
>
<motion.div
className="project-image"
style={{
backgroundImage: "url('/projects/little-dictionary-of-fashion.jpg')",
}}
whileHover={{ scale: 1.05 }}
transition={{ duration: 0.2 }}
/>
<h3>Little Dictionary of Fashion by Christian Dior</h3>
<p>
An interactive Power BI applet allowing for exploration of Christian Dior's fashion from the 50s.
</p>
<div className="project-tech">
<span>Python</span>
<span>PowerBI</span>
</div>
</motion.div>
<motion.div
className="project-card"
variants={fadeInUp}
whileHover={{ y: -10, transition: { duration: 0.2 }, cursor: "alias" }}
onClick={() => window.open("https://github.com/millyz2023/Brown-Housing-Notification/", "_blank")}
>
<motion.div
className="project-image"
style={{
backgroundImage: "url('/projects/brown-housing-notifications.jpg')",
}}
whileHover={{ scale: 1.05 }}
transition={{ duration: 0.2 }}
/>
<h3>Brown Housing Notifications</h3>
<p>
A python script that scrapes Brown University's off-campus housing website and sends notifications via email when new housing options become available.
</p>
<div className="project-tech">
<span>Python</span>
<span>RESTful APIs</span>
<span>SMTP</span>
</div>
</motion.div>
<motion.div
className="project-card"
variants={fadeInUp}
whileHover={{ y: -10, transition: { duration: 0.2 }, cursor: "alias" }}
onClick={() => window.open("https://github.com/millyz2023/Find-your-flight", "_blank")}
>
<motion.div
className="project-image"
style={{ backgroundImage: "url('/projects/find-your-flight.jpg')" }}
whileHover={{ scale: 1.05, transition: { duration: 0.2 }}}
/>
<h3>Find Your Flight</h3>
<p>
Uses the Flight Search APIs to ease the process of making a perfect travel plan.
</p>
<div className="project-tech">
<span>Python</span>
<span>RESTful APIs</span>
</div>
</motion.div>
</motion.div>
</motion.section>
);
};
|
