-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
273 lines (245 loc) · 11.4 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
273
<!DOCTYPE HTML>
<!--
Astral by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Vivian Lee</title>
<LINK REL="SHORTCUT ICON"
HREF="images/bird.png">
<meta charset="utf-8" />
<meta name="referrer" content="origin" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper-->
<div id="wrapper">
<!-- Nav -->
<nav id="nav">
<a href="#" class="icon solid fa-home"><span>Home</span></a>
<a href="#aboutme" class="icon solid fa-user-circle"><span>About Me</span></a>
<a href="#work" class="icon solid fa-briefcase"><span>Work</span></a>
<a href="#projects" class="icon solid fa-rocket"><span>Projects</span></a>
<a href="#resume" class="icon solid fa-file-pdf"><span>Resume</span></a>
<a href="#contact" class="icon solid fa-envelope"><span>Contact</span></a>
<a href="https://github.com/Viviaann" class="icon brands fa-github"><span>Github</span></a>
</nav>
<!-- Main -->
<div id="main">
<!-- Home -->
<article id="home" class="panel intro">
<header>
<h1>Vivian Lee</h1>
<p>Bay Area</p>
<p>Computer Engineering @ University of Califonia, San Diego</p>
</header>
<a href="#aboutme" class="jumplink pic">
<span class="arrow icon solid fa-chevron-right"><span>See my work</span></span>
<img src="images/personal1.jpg" alt="" class="rotate90"/>
</a>
</article>
<!-- About Me -->
<article id="aboutme" class="panel">
<header>
<h2>About Me</h2>
</header>
<p>
Hello! I am Vivian Lee, a recent Bachelors graduate from University of California. In fall 2021, I will be a Masters student studying computer engineering. I am based in San Francisco but am currently residing in La Jolla, California. Currently, I am looking for a full time position in software engineering/data science.
<br><br>
Starting at a young age, I have always been curious and experimental with what I can find online. I love discovering new skills to which the internet conveniently provided tons of learning materials. In middle school, I would find myself working on small side projects where I replicated basic computer games. Besides developing technial skills, I also have learned to bake, crochet, sew, edit photos on my own. More recently, I have been developing my technial skills through internships and technical side projects. Furthermore, my growth in crafts have lead me to start a small business that sells handmade jewelry.
</p>
<section>
<div class="row">
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="images/tree.jpg" alt=""></a>
</div>
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="images/girl.jpg" alt=""></a>
</div>
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="images/bird1.jpg" alt=""></a>
</div>
</div>
</section>
<section>
<div class="row">
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="images/uwh.JPG" alt=""></a>
</div>
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="images/team.JPG" alt=""></a>
</div>
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="images/hockey.JPG" alt=""></a>
</div>
</div>
</section>
<p>
Here are some of my favorite pictures that I have been apart of or have taken on my own.
</p>
<!--<a href="#work" class="jumplink pic">
<span class="arrow icon solid fa-chevron-right"><span>See my work</span></span>
<img src="images/personal1.jpg" alt="" class="rotate90"/>
</a>-->
</article>
<!-- Work -->
<article id="work" class="panel">
<header>
<h2>Work and Volunteer Experience</h2>
</header>
<section>
<!--First work experience-->
<p class="left-half">
<h3>AR/VR + Data Science Intern</h3>
Company: Genentech
<a href="https://www.gene.com/"class="image fit">
<img src="images/gene.jpg" alt="" style="width: 300px;">
</a>
During my time at Genentech, I researched and provided a solution involving single sign on for the enterprise augmented reality space. In addition, I worked with the R Shiny framework to enhance and deploy a personalized data analytics recommendation tool for internal employees.
</p>
<!--Second work experience-->
<p>
<h3>Software Engineering Intern</h3>
Company: American Express
<a href="https://www.americanexpress.com/" class="image fit">
<img src="https://i.insider.com/60799d924206150018175e1e?width=1136&format=jpeg" alt="" style="width: 300px;">
</a>
At American Express, I worked on two projects.
<br><br>
More recently, I completed a proof of concept that incorporated Apache Flink into the existing pipeline. I used Apache Kafka, Apache Flink, HDFS, Prometheus, and Grafana in order to complete the comparison of the new pipeline with Flink versus the exiting pipeline. By introducing Apache Flink, the system can potentially cut down on space, time, and cost.
<br><br>
For the second project, I developed a monitoring system to track transactions across the network subsystems. This monitoring system included an API to collect metrics as well as a dashboard built on ElasticSearch and Kibana to display metrics.
</p>
<!--Third work experience-->
<p>
<h3>Instructor Assistant</h3>
University of California, San Diego
<a href="https://cse.ucsd.edu/" class="image fit"><img src="https://images.shiksha.com/mediadata/images/1401262299phpP6qDur.jpeg" alt="" style="width: 300px;">
</a>
While taking classes, I worked as an instructor assistant where I lead discussions, hosted office hours, and managed logistical tasks for a course with 100+ students. I taught a variety of subjects, from basic front end tools to server side development. I worked with HTML, CSS, JavaScript, Python, Figma, NodeJS, and Digital Ocean Droplets.
</p>
</section>
</article>
<!-- Projects -->
<article id="projects" class="panel">
<header>
<h2>Projects</h2>
</header>
<!--First Project-->
<p>
<h3>Team Website</h3>
Organization: Engineers for a Sustainable World
</p>
<section>
<div class = "row">
<div class="col-4 col-6-medium col-12-small">
<a href="https://tritonsolarcar.github.io/SolarCarWebsite/" class="image fit"><img src="images/solar.JPG" alt=""></a>
</div>
</div>
<p>
Built for the UCSD Solar Car team, this website will help organize logistics within the club as well as broaden our exposure with other people online.
</p>
<!--Second Project-->
<p>
<h3>UCSD Dining Hall Messenger Bot</h3>
</p>
<div class="row">
<div class="col-4 col-6-medium col-12-small">
<a href="https://www.facebook.com/HDH-Dining-Hall-Bot-560136204397216/?modal=admin_todo_tour" class="image fit"><img src="images/messenger.JPG" alt=""></a>
</div>
</div>
<p>
Still currently under construction, this messenger bot will help users conveniently navigate through different dining hall hours and menus.
</p>
<!--Third Project-->
<p>
<h3>UCSD Solar Car Team</h3>
</p>
<div class="row">
<div class="col-4 col-6-medium col-12-small">
<a href="https://tritonsolarcar.github.io/SolarCarWebsite/" class="image fit"><img src="images/solarcar.png" alt=""></a>
</div>
</div>
<p>
Since college freshman year, I was part of the Engineers for a Sustainable World organization. Specifically, I am part of the Solar Car Team. I currently take part of the Electrical/Programming team, working with sensors and radios for the car.
</p>
</section>
</article>
<!-- Resume -->
<article id="resume" class="panel">
<header>
<h2>Resume</h2>
</header>
<p>
Hello! This is my current resume. If you would like to know more about me,
please check out the About Me tab. Thank you!
<h3>Find me on: </h3>
<a href="https://www.linkedin.com/in/vivian-lee-0a3473173/" class="image fit icon solid brands fa-linkedin"> LinkedIn</a>
<a href="https://www.instagram.com/vylphotos/?hl=en" class="image fit icon solid brands fa-instagram"> Instagram</a>
</p>
<embed src="images/Resume_Vivian_Lee_G.pdf#page=1" class="image fit" width="575" height="500">
</article>
<!-- Contact -->
<article id="contact" class="panel">
<!--
<button onclick="myFunction()">Try it</button>
-->
<header>
<h2>Contact Me</h2>
</header>
<form action="https://formspree.io/[email protected]" method="post">
<div>
<div class="row">
<form action="https://formspree.io/[email protected]" method="POST">
<div class="col-6 col-12-medium">
<input type="text" name="name" placeholder="Name" />
</div>
<div class="col-6 col-12-medium">
<input type="text" name="email" placeholder="Email" />
</div>
<div class="col-12">
<input type="text" name="subject" placeholder="Subject" />
</div>
<div class="col-12">
<textarea name="message" placeholder="Message" rows="6"></textarea>
</div>
<div class="col-12">
<input type="submit" onclick="myFunction()" value="Send Message" />
<p id="demo"></p>
<script>
function myFunction() {
var txt;
var r = confirm("You are sending a message!");
if (r == true) {
txt = "Message Sent!";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</div>
<input type="hidden" name="_next" value="https://viviaann.github.io/#contact"/>
</form>
</div>
</div>
</form>
</article>
</div>
<!-- Footer -->
<div id="footer">
<ul class="copyright">
<li>© Vivian 2021</li><li>Designed with: HTML5 <a href="http://html5up.net"></a></li>
</ul>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>