-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
272 lines (247 loc) · 16 KB
/
index.html
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="Chloe Cheng">
<meta name="description" content="My Portfolio">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title>Chloe Cheng</title>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #fadcca; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 20px; padding-left: 2rem; padding-right: 2rem;">
<a class="navbar-brand" href="#">Chloe Cheng</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="#about">About <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#experience">Experience</a>
<a class="nav-item nav-link" href="#projects">Projects</a>
<a class="nav-item nav-link" href="Chloe_Cheng_Resume.pdf" target="_blank" rel="noopener noreferrer">Resume</a>
</div>
</div>
</nav>
<div class="main-header">
<h1 class="name">CHLOE CHENG</h1>
<br>
<h3 style="color: #6b5b5b">Undergraduate at University of California, Irvine</h3>
<h3 style="color: #6b5b5b">Bachelors of Science, Computer Science</h3>
<br>
<div class="row justify-content-center" style="padding-bottom: 70px;">
<div class="col-md-auto"><a href="https://www.linkedin.com/in/chloehcheng" target="_blank" rel="noopener noreferrer"><img src="images/linkedin-logo.png" alt="LinkedIn" class="logos" style="padding-top: 5px;"></a></div>
<div class="col-md-auto"><a href="https://github.com/chloecheng8" target="_blank" rel="noopener noreferrer"><img src="images/github-logo.png" alt="GitHub" class="logos"></a></div>
<div class="col-md-auto"><a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer"><img src="images/mail-icon.png" alt="Email" class="logos" style="padding-top: 9px;"></a></div>
</div>
</div>
<br>
<br>
<div id="about" class="about" style="padding-top: 50px;">
<h1 class="headers">About</h1>
<div class="row justify-content-center">
<div class="col-md-6 text-center" style="padding-top: 4%; padding-bottom: 4%;">
<img src="images/chloecheng-pic.JPG" alt="Chloe Cheng Profile Picture" class="rounded-circle" style="width: 300px; height: auto; border-style: double; border-color: gray">
</div>
<div class="col-md-6" style="padding-right: 8%; padding-left: 5%; padding-top: 2%; padding-bottom: 4%">
<h5 style="line-height: 30px">Hello! My name is Chloe, and I am currently an undergraduate student at UC Irvine majoring in Computer Science.</h5>
<br>
<h5 style="line-height: 30px">I was interested in computer science and technology ever since high school and decided to pursue this path after attending a two-week coding summer camp, Kode With Klossy, in 2017. Since then, I have attended Kode With Klossy for the next 2 summers and built a couple of personal projects on the side.</h5>
<br>
<h5 style="line-height: 30px">Some of the technologies I am familiar with include Python, Java, C++, React, HTML, and CSS. I aspire to be a software engineer and hope to build the technology of the future!</h5>
</div>
</div>
</div>
<br>
<br>
<div id="experience" class="experience" style="padding-top: 50px;">
<h1 class="headers">Experience</h1>
<div class="row justify-content-center">
<div class="col-md-auto experience-block">
<img src="images/drem-logo.png" alt="Drem Logo" class="rounded-circle experience-logo">
<h1>Drem</h1>
<h3>Software Engineer Intern</h3>
<p style="color:gray">July 2022 - Present</p>
<div class="experience-description">
<ul>
<li>Build the frontend of a decentralized application using Next.js and TailwindCSS where users can learn, post their strategies, and invest in crypto.</li>
<li>Collaborate with 3 other engineers to code various components to display a list of the user's current trades, modal components, and user profile components.</li>
<li>Research Web3 concepts such as Ethereum, Lens Protocol, and HardHat.</li>
</ul>
</div>
</div>
<div class="col-md-auto experience-block">
<img src="images/venushacks-logo.png" alt="VenusHacks Logo" class="rounded-circle experience-logo" style="padding-bottom: 0; width: 180px;">
<h1 style="margin: 0;">VenusHacks</h1>
<h3 style="margin: 0;">Corporate Co-Chair</h3>
<p style="color:gray">October 2022 - Present</p>
<div class="experience-description" style="line-height: 25px; padding-top: 0px">
<ul>
<li style="margin: 0;">Lead a group of corporate organizers and delegate tasks such as reaching out to sponsors, judges, and mentors to them.</li>
<li style="margin: 0;">Coordinate with Co-Presidents and other committee chairs to organize VenusHacks.</li>
</ul>
</div>
<h3 style="margin: 0;">Corporate Organizer</h3>
<p style="color:gray">January 2022 - May 2022</p>
<div class="experience-description" style="line-height: 25px; padding-top: 0px">
<ul>
<li style="margin: 0;">Initiated contact with technology companies like Google and Amazon to secure sponsorships for the hackathon.</li>
<li style="margin: 0;">Outreach to professors and sponsors to select judges by sending emails.</li>
<li style="margin: 0;">Attended bi-weekly meetings with board members to discuss outreach strategies and give progress updates.</li>
</ul>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-auto experience-block">
<img src="images/mirl-logo.png" alt="MIRL Logo" class="rounded-circle experience-logo" style="width: 200px; height: 240px;">
<h1>MIRL</h1>
<h3>Web Design and Social Media Assistant</h3>
<p style="color:gray;">January 2022 - June 2022</p>
<div class="experience-description">
<ul>
<li>Built a website for the MIRL Laboratory at the UCI School of Education to present their research in an organized way and establish their web presence.</li>
<li>Implemented various strategies to improve the user experience including placing call-to-action buttons effectively and creating simple navigation.</li>
</ul>
</div>
</div>
<div class="col-md-auto blank-block">
</div>
</div>
</div>
<br>
<br>
<div id="projects" class="projects" style="padding-top: 50px;">
<h1 class="headers">Projects</h1>
<div class="row justify-content-center">
<div class="col-md-auto project-block">
<h2 class="project-title">Zotciety</h2>
<div id="zotciety-carousel" class="carousel slide" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#zotciety-carousel" data-slide-to="0" class="active"></li>
<li data-target="#zotciety-carousel" data-slide-to="1"></li>
<li data-target="#zotciety-carousel" data-slide-to="2"></li>
<li data-target="#zotciety-carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="project-pics" alt="Zotciety Home Page" src="images/zotciety1-pic.png">
</div>
<div class="carousel-item">
<img class="project-pics" alt="Zotciety Prompts Page" src="images/zotciety2-pic.png">
</div>
<div class="carousel-item">
<img class="project-pics" alt="Zotciety Trials/Challenges Page" src="images/zotciety3-pic.png">
</div>
<div class="carousel-item">
<img class="project-pics" alt="Zotciety Leaderboard Page" src="images/zotciety4-pic.png">
</div>
</div>
<a class="carousel-control-prev" href="#zotciety-carousel" role="button" data-slide="prev">
<div class="carousel-icon"><span class="carousel-control-prev-icon" aria-hidden="true"></span></div>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#zotciety-carousel" role="button" data-slide="next">
<div class="carousel-icon"><span class="carousel-control-next-icon" aria-hidden="true"></span></div>
<span class="sr-only">Next</span>
</a>
</div>
<p class="project-description">In times of COVID-19, many people have been lacking communication and social skills. Zotciety aims to bring people back together with prompts and challenges as conversation starters. Created at HackUCI Hackathon using React, Firebase, HTML, and CSS. Won the Best Beginner Hack Award.</p>
<div class="row justify-content-center">
<div class="col-md-auto"><a href="http://zotciety.netlify.app" target="_blank" rel="noopener noreferrer"><img class="project-logos" src="images/website-icon.png" alt="Zotciety Website" style="padding-top: 1px;"></a></div>
<div class="col-md-auto"><a href="https://github.com/chloecheng8/zotciety" target="_blank" rel="noopener noreferrer"><img class="project-logos" src="images/github-logo.png" alt="Zotciety GitHub"></a></div>
</div>
</div>
<div class="col-md-auto project-block">
<h2 class="project-title">Inventboard</h2>
<div id="inventboard-carousel" class="carousel slide" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#inventboard-carousel" data-slide-to="0" class="active"></li>
<li data-target="#inventboard-carousel" data-slide-to="1"></li>
<li data-target="#inventboard-carousel" data-slide-to="2"></li>
<li data-target="#inventboard-carousel" data-slide-to="3"></li>
<li data-target="#inventboard-carousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="project-pics" src="images/inventboard1-pic.png" alt="Inventboard Home Page">
</div>
<div class="carousel-item">
<img class="project-pics" src="images/inventboard2-pic.png" alt="Inventboard Sign Up Page">
</div>
<div class="carousel-item">
<img class="project-pics" src="images/inventboard3-pic.png" alt="Inventboard Profile Page">
</div>
<div class="carousel-item">
<img class="project-pics" src="images/inventboard4-pic.png" alt="Inventboard Explore Page">
</div>
<div class="carousel-item">
<img class="project-pics" src="images/inventboard5-pic.png" alt="Inventboard Product/Service Details Page">
</div>
</div>
<a class="carousel-control-prev" href="#inventboard-carousel" role="button" data-slide="prev">
<div class="carousel-icon"><span class="carousel-control-prev-icon" aria-hidden="true"></span></div>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#inventboard-carousel" role="button" data-slide="next">
<div class="carousel-icon"><span class="carousel-control-next-icon" aria-hidden="true"></span></div>
<span class="sr-only">Next</span>
</a>
</div>
<p class="project-description">Inventboard is an online marketplace platform that allow users to sell their products and monetize their skills. This was a personal project built with Django, JavaScript, HTML, and CSS.</p>
<div class="row justify-content-center">
<div class="col-md-auto"><a href="http://inventboard.herokuapp.com" target="_blank" rel="noopener noreferrer"><img class="project-logos" src="images/website-icon.png" alt="Inventboard Website" style="padding-top: 1px;"></a></div>
<div class="col-md-auto"><a href="https://github.com/chloecheng8/inventboard" target="_blank" rel="noopener noreferrer"><img class="project-logos" src="images/github-logo.png" alt="Inventboard GitHub"></a></div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-auto project-block">
<h2 class="project-title">Cheer Up</h2>
<div id="cheerup-carousel" class="carousel slide" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#cheerup-carousel" data-slide-to="0" class="active"></li>
<li data-target="#cheerup-carousel" data-slide-to="1"></li>
<li data-target="#cheerup-carousel" data-slide-to="2"></li>
<li data-target="#cheerup-carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="project-pics" src="images/cheerup1-pic.png" alt="Cheer Up Home Page (Top)">
</div>
<div class="carousel-item">
<img class="project-pics" src="images/cheerup2-pic.png" alt="Cheer Up Home Page (Bottom)">
</div>
<div class="carousel-item">
<img class="project-pics" src="images/cheerup3-pic.png" alt="Cheer Up Quotes Page">
</div>
<div class="carousel-item">
<img class="project-pics" src="images/cheerup4-pic.png" alt="Cheer Up VR Page">
</div>
</div>
<a class="carousel-control-prev" href="#cheerup-carousel" role="button" data-slide="prev">
<div class="carousel-icon"><span class="carousel-control-prev-icon" aria-hidden="true"></span></div>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#cheerup-carousel" role="button" data-slide="next">
<div class="carousel-icon"><span class="carousel-control-next-icon" aria-hidden="true"></span></div>
<span class="sr-only">Next</span>
</a>
</div>
<p class="project-description">Cheer Up allows the user to randomize songs, quotes, and images in hopes of brightening their day! Created at a Kode With Klossy, a two-week coding camp, in 2018 with a partner using HTML, CSS, and JavaScript. This project also has a mini VR experience and utilizes the Google Maps API to find the nearest park.</p>
<div class="row justify-content-center">
<div class="col-md-auto"><a href="http://cheerupapp.herokuapp.com/homepage.html" target="_blank" rel="noopener noreferrer"><img class="project-logos" src="images/website-icon.png" alt="Cheer Up Website" style="padding-top: 1px;"></a></div>
<div class="col-md-auto"><a href="https://github.com/chloecheng8/cheerup" target="_blank" rel="noopener noreferrer"><img class="project-logos" src="images/github-logo.png" alt="Cheer Up GitHub"></a></div>
</div>
</div>
<div class="col-md-auto blank-block"></div>
</div>
</div>
<div class="footer">
<h5 style="margin: 0; padding-left: 20px">© Made by Chloe Cheng 2022</h5>
</div>
</body>
</html>