-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
267 lines (238 loc) · 11 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
<html>
<head>
<link rel="icon" type="image/png" href="assets/img/bluecircle.png" />
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Kulim+Park&display=swap" rel="stylesheet">
<title>Haolin Zhu</title>
<meta name="description"
content="Personal website of Haolin Zhu, a fourth-year EECS student at UC Berkeley passionate about network security, software engineering, and web design.">
<meta name="keywords"
content="haolin zhu, haolin, haolin bay area, haolin zhu bay area, haolin berkeley, haolin zhu berkeley, haolin uc berkeley, haolin zhu uc berkeley" />
</head>
<body>
<div id="name" class="text">HAOLIN ZHU</div>
<div id="lights" class="card zoom info-card">
<img src="assets/img/welcome.png" alt="lights" id="lightspic">
</div>
<div id="portrait" class="card link zoom info-card">
<img src="assets/img/about.png" alt="portrait" id="portraitpic">
</div>
<div id="engineering" class="card link zoom info-card">
<img src="assets/img/education.png" alt="engineering" id="engineeringpic">
</div>
<div id="code" class="card link zoom info-card">
<img src="assets/img/projects.png" alt="code" id="codepic">
</div>
<div id="art" class="card link zoom info-card">
<img src="assets/img/scratchboard.png" alt="art" id="artpic">
</div>
<div id="capital" class="card zoom">
<img src="assets/img/capital.png" alt="capital" id="capitalpic">
</div>
<div id="library" class="card zoom">
<img src="assets/img/library.png" alt="library" id="librarypic">
</div>
<div id="portrait-text-container">
<div class="inner-text">
<div class="text hello">Hello!</div>
<div class="text portraittext">I'm Haolin Zhu, a fourth-year Electrical Engineering & Computer Sciences student at
UC Berkeley.</div>
<div class="text portraittext">I'm passionate about network security, software engineering, and web design.</div>
<div class="text portraittext">In my free time, I like to read about current events, spend time with friends, and
explore new places.</div>
<div class="text portraittext">Feel free to shoot me an email at <a href="mailto:[email protected]"
target="_top">[email protected]</a>!</div>
</div>
</div>
<div id="polaroid" class="zoom card">
<img src="assets/img/portrait.png">
</div>
<div id="back-to-top-1" class="text ttext link hover-underline">Back to top</div>
<div id="engineering-text-container">
<div class="engineering-text">
<div class="section-title text title">relevant courses</div>
<div class="inner-text-1">
<div class="text stext mpadding aleft">Artificial Intelligence</div>
<div class="text stext mpadding aleft">Computer Architecture (Machine Structures)</div>
<div class="text stext mpadding aleft">Computer Security</div>
<div class="text stext mpadding aleft">Data Structures</div>
<div class="text stext mpadding aleft">Designing Information Devices and Systems</div>
<div class="text stext mpadding aleft">Discrete Mathematics & Probability Theory</div>
<div class="text stext mpadding aleft">Efficient Algorithms & Intractable Problems</div>
<div class="text stext mpadding aleft">Foundations of Data Science</div>
<div class="text stext mpadding aleft">Operating Systems and System Programming</div>
<div class="text stext mpadding aleft">Software Engineering</div>
<div class="text stext aleft">Structure & Interpretation of Computer Programs</div>
</div>
</div>
</div>
<div id="engineering-text-container-left">
<div class="engineering-text">
<div class="section-title text title">education</div>
<div class="inner-text-1">
<div class="text stext aleft"><a href="https://www.berkeley.edu/" target="_blank"
class="hover-underline nostyle">University of California, Berkeley</a></div>
<div class="text stext aleft">B.S. in <a href="https://www.eecs.berkeley.edu/" target="_blank"
class="hover-underline nostyle">Electrical Engineering and Computer Sciences</a></div>
<div class="text italic stext aleft">Expected graduation May 2021</div>
</div>
<div class="section-title text title">organizations</div>
<div class="inner-text-1">
<div class="text stext mpadding aleft"><a href="https://hkn.eecs.berkeley.edu/" target="_blank"
class="hover-underline nostyle">Eta Kappa Nu, Mu Chapter</a></div>
<div class="text stext mpadding aleft"><a href="https://tbp.berkeley.edu/" target="_blank"
class="hover-underline nostyle">Tau Beta Pi, California Alpha Chapter</a></div>
<div class="text stext mpadding aleft"><a href="https://wavemakers.berkeley.edu/" target="_blank"
class="hover-underline nostyle">Wave Makers of Berkeley</a></div>
</div>
</div>
</div>
<img src="assets/img/group.png" alt="group" id="group" class="card zoom">
<img src="assets/img/camera.png" alt="camera" id="camera-small" class="card zoom">
<div id="back-to-top-2" class="text ttext link hover-underline">Back to top</div>
<div id="code-text-container">
<div class="code-inner-text">
<div class="text hello">projects</div>
<div class="text title"><a href="https://haolinzhu.github.io/syria/" target="_blank"
class="hover-underline nostyle">Syrian Conflict Belligerents Website</a></div>
<div class="text">A website with an interactive infographic explaining complicated relationships between
belligerents of the Syrian Civil War. </div>
<div class="text">Built using html, css, and javascript.</div>
<div class="text title">Sustainable Materials Based Electronics Project</div>
<div class="text">Designed an earthquake sensor prototype using sustainable and low-cost materials under Prof.
Muhammad Hussain.</div>
<div class="text">Built using TI MSP430 microcontroller, LEDs, and 3D printed designs.</div>
</div>
</div>
<div id="code-text-container-left">
<div class="code-inner-text">
<div class="text hello">experience</div>
<div class="text title">Software engineering intern at <a href="https://www.viasat.com/" target="_blank"
class="hover-underline nostyle">Viasat</a></div>
<div class="text">May - August, 2020</div>
<div class="text">Designed updates in Software Configuration Index to document improvements in software deployment
process.</div>
<div class="text">Implemented features to support independent container images as part of platform refactoring
initiative.</div>
<div class="text">Added component acceptance tests to verify software updates.</div>
</div>
</div>
<a href="assets/pdf/Resume.pdf" target="_blank" class="hover-underline nostyle"><img src="assets/img/resume.png"
alt="resume" id="resume" class="card zoom"></a>
<img src="assets/img/viasat.png" alt="viasat" id="viasat" class="card zoom">
<div id="back-to-top-3" class="text ttext link hover-underline">Back to top</div>
<div id="art-text-container">
<div id="scratchbord-title" class="text hello">scratchboard</div>
<div id="art-flex-container">
<div id="mali" class="sb">
<div class="sb-container">
<img src="assets/img/C4.jpg">
</div>
<div class="text sb-text">Timbuktu</div>
</div>
<div id="santorini" class="sb">
<div class="sb-container">
<img src="assets/img/C6.jpg">
</div>
<div class="text sb-text">Santorini</div>
</div>
<div id="egypt" class="sb">
<div class="sb-container">
<img src="assets/img/C11.jpg">
</div>
<div class="text sb-text">Abu Simbel</div>
</div>
<div id="johndaly" class="sb">
<div class="sb-container">
<img src="assets/img/C13.jpg">
</div>
<div class="text sb-text">John Daly</div>
</div>
<div id="tajmahal" class="sb">
<div class="sb-container">
<img src="assets/img/C8.jpg">
</div>
<div class="text sb-text">Taj Mahal</div>
</div>
<div id="newyork" class="sb">
<div class="sb-container">
<img src="assets/img/C9.jpg">
</div>
<div class="text sb-text">New York</div>
</div>
<div id="athens" class="sb">
<div class="sb-container">
<img src="assets/img/C10.jpg">
</div>
<div class="text sb-text">Athens</div>
</div>
<div id="sydney" class="sb">
<div class="sb-container">
<img src="assets/img/C12.jpg">
</div>
<div class="text sb-text">Sydney</div>
</div>
</div>
</div>
<div id="back-to-top-5" class="text ttext link hover-underline">Back to top</div>
<div id="credits-text-container">
<div class="inner-text">
<div class="text ttext">© 2021. Designed by Haolin Zhu.</div>
</div>
</div>
<div id="iconcontainer">
<div id="facebookicon" class="icon">
<a href="https://www.facebook.com/haolin.zhu.1" target="_blank">
<img src="assets/img/facebookicon.png" alt="facebook icon">
</a>
</div>
<div id="instagramicon" class="icon">
<a href="https://www.instagram.com/_.haohao_/" target="_blank">
<img src="assets/img/instagramicon.png" alt="instagram icon">
</a>
</div>
<div id="linkedinicon" class="icon">
<a href="https://www.linkedin.com/in/haolinzhu1/" target="_blank">
<img src="assets/img/linkedinicon.png" alt="linkedin icon">
</a>
</div>
<div id="githubicon" class="icon">
<a href="https://github.com/haolinzhu" target="_blank">
<img src="assets/img/githubicon.png" alt="github icon">
</a>
</div>
</div>
<div id="lightpainting" class="card zoom">
<img src="assets/img/lightpainting.png" alt="light painting" id="lightpaintingpic">
</div>
<div id="yosemite" class="card zoom">
<img src="assets/img/yosemite.png" alt="yosemite" id="yosemitepic">
</div>
<div id="bug" class="card zoom">
<img src="assets/img/bug.png" alt="bug" id="bugpic">
</div>
<div id="kaiping" class="card zoom">
<img src="assets/img/kaiping.png" alt="kaiping" id="kaipingpic">
</div>
<div id="instagram" class="card zoom">
<img src="assets/img/instagram.png" alt="instagram" id="instagrampic">
</div>
<div id="beach" class="card zoom">
<img src="assets/img/beach.png" alt="beach" id="beachpic">
</div>
<div id="kaust" class="card zoom">
<img src="assets/img/kaust.png" alt="kaust" id="kaustpic">
</div>
<div id="dubai" class="card zoom">
<img src="assets/img/dubai.png" alt="dubai" id="dubaipic">
</div>
<div id="merlion" class="card zoom">
<img src="assets/img/merlion.png" alt="merlion" id="merlionpic">
</div>
<div id="baby" class="card zoom">
<img src="assets/img/baby.png" alt="baby" id="babypic">
</div>
<img src="assets/img/camera.png" alt="camera" id="camera" class="card zoom">
<script type="text/javascript" src="assets/scripts/script.js"></script>
</body>
</html>