emilyzwang.github.io/index.html at master · emilyzwang/emilyzwang.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="Emily Wang">

    <title>Emily Wang</title>
    <!-- <link rel="shortcut icon" type="image/png" href="img/"/> -->
    <link rel="stylesheet" type="text/css" href="style/style.css">
    <link rel="stylesheet" type="text/css" href="style/component.css">
    <link rel="icon" type="image/png" href="src/favicon.ico" />
  </head>

  <body>
    <!-- Modal windows -->
    <div class="md-modal md-effect-1" id="explore">
      <div class="md-content">
        <a href="https://emilyzwang.github.io/exploration-project/" target="_blank"><h3>explore berkeley!</h3></a>
        <h4>HTML • JavaScript • Adobe SketchBook</h4>
        <div>
          <p align="center">Click on various locations to explore noteworthy places on and around UC Berkeley's campus. Drawn & coded from scratch.</p>
        </div>
      </div>
    </div>
    <div class="md-modal md-effect-1" id="blockchain">
      <div class="md-content">
        <a href="https://emilyzwang.github.io/casino-dapp/" target="_blank"><h3>Betting on the Blockchain</h3></a>
        <h4>Solidity • Truffle Suite • MetaMask</h4>
        <div>
          <p align="center">A mock-casino betting game decentralized app dealing with Ethereum via MetaMask and a smart contract written in Solidity. Created in collaboration with Eric Peng.</p>
        </div>
      </div>
    </div>
    <div class="md-modal md-effect-1" id="world">
      <div class="md-content">
        <h3>Random World Generator</h3>
        <h4>Java • StdDraw Library</h4>
        <div>
          <img src="src/world.PNG" style="width: 100%; margin:0px">
          <p align="center">Engine that randomly generates 2D tile-based maps with hallways and rooms for a character (@) to explore. Created in collaboration with Carolyn Duan.</p>
        </div>
      </div>
    </div>
    <div class="md-modal md-effect-1" id="bearmaps">
      <div class="md-content">
        <h3>BearMaps</h3>
        <h4>Java • Data Structures</h4>
        <div>
          <img src="src/map.PNG" style="width: 100%; margin:0px">
          <p align="center">A web mapping application mimicking Google Maps; implemented using HeapPQ and KD-Tree data structures.</p>
        </div>
      </div>
    </div>
    <div class="md-modal md-effect-1" id="scheme">
      <div class="md-content">
        <h3>Scheme Interpreter</h3>
        <h4>Python • Scheme</h4>
        <div>
          <img src="src/scheme.PNG" style="width: 100%; margin:0px">
          <p align="center">A class project with the objective of exploring the read-evaluate-print loop process of interpreters.</p>
        </div>
      </div>
    </div>
    <div class="md-modal md-effect-1" id="ants">
      <div class="md-content">
        <h3>Ants & SomeBees</h3>
        <h4>Python</h4>
        <div>
          <p align="center">kinda simple but it was fun</p>
        </div>
      </div>
    </div>
    <div class="md-modal md-effect-1" id="bees">
      <div class="md-content">
        <h3>Little Creatures: Bees</h3>
        <h4>Processing (Java)</h4>
        <div>
          <img src="src/bees.gif" style="width:75%; display:block; margin-left:auto; margin-right:auto">
          <p align="center">A programmed sketch representing the movements of bees: attraction to flowers, flying in loops, etc. All figures coded from scratch.</p>
        </div>
      </div>
    </div>
    <div class="md-modal md-effect-1" id="clock">
      <div class="md-content">
        <h3>Digital Clock</h3>
        <h4>Processing (Java)</h4>
        <div>
          <img src="src/clock.gif" style="width:100%; margin:0px">
          <p align="center">Just a clock on the surface, but it looks cool & timed animations are difficult!</p>
        </div>
      </div>
    </div>
    <div class="md-modal md-effect-1" id="space">
      <div class="md-content">
        <h3>Space Walk</h3>
        <h4>Processing • Arduino (C/C++) • SolidWorks</h4>
        <div>
          <p align="center">Used an Arduino board & software to store tracks as structs, read input from switches, send output to a Processing sketch, and drive motors, all to create a space-themed obstacle course challenge. Created in collaboration with Rio Hayakawa.</p>
        </div>
      </div>
    </div>
    <div class="md-modal md-effect-1" id="flavorbox">
      <div class="md-content">
        <h3>FlavorBox</h3>
        <h4>Databases</h4>
        <div>
          <p align="center">A fully-functioning website for a mock meal prep & grocery delivery service created for the Future Business Leaders of America E-Business competitive event. Set up databases and dynamic pages via Wix, and managed website updates for the 7-month duration of the project. Created in collaboration with Bianca Lee.</p>
        </div>
      </div>
    </div>
    <div class="md-modal md-effect-1" id="wild">
      <div class="md-content">
        <h3>WILD</h3>
        <h4>Adobe Photoshop • Adobe Illustrator</h4>
        <div>
          <p align="center">A publication portfolio with movie posters, advertisements, character cutouts, and other promotional products for a mock children's movie. Created in collaboration with Bianca Lee.</p>
        </div>
      </div>
    </div>
    <div class="md-modal md-effect-1" id="playbill">
      <div class="md-content">
        <h3>Moby-Dick Playbill</h3>
        <h4>Adobe Photoshop</h4>
        <div>
          <p align="center">lol</p>
        </div>
      </div>
    </div>
    <div class="md-modal md-effect-1" id="anovaclubs">
      <div class="md-content">
        <a href='https://emilyzwang.github.io/ANovaClubs' target='blank'><h3>ANova Clubs Website</h3></a>
        <h4>React • Semantic UI</h4>
        <div>
          <p align="center">An introductory-stage website for ANova Clubs, an extension of <a href='https://www.berkeleyanova.org' target='blank'>Berkeley ANova</a>. Created as an ANova Spring 2020 Ideathon project.</p>
        </div>
      </div>
    </div>
    <div class="md-modal md-effect-1" id="matching">
      <div class="md-content">
        <h3>The Music Connection Matching</h3>
        <h4>Python • Pandas</h4>
        <div>
          <p align="center">Used the Pandas data science library to implement a greedy matching algorithm to pair tutors with students based on time availability, instrument, and priority level. Created for The Music Connection.</p>
        </div>
      </div>
    </div>
    <div class="md-modal md-effect-1" id="stock">
      <div class="md-content">
        <a href='https://emilyzwang.github.io/StockAssistant' target='blank'><h3>Stock Assistant</h3></a>
        <h4>React • Yahoo Finance API</h4>
        <div>
          <p align="center">Created the game featured on the website to gain more experience in using React states, props, and components, as well as making API calls.</p>
        </div>
      </div>
    </div>
    <div class="md-modal md-effect-1" id="scheduler">
      <div class="md-content">
        <a href='https://emilyzwang.github.io/scheduler' target='blank'><h3>Scheduler</h3></a>
        <h4>React • Semantic UI</h4>
        <div>
          <p align="center">An introductory project to learn the basics of React, JavaScript, and designing an user interface. In progress of improving web app to work with Google Calendar API.</p>
        </div>
      </div>
    </div>

    <div class="container">

    <div class="nav">
      <div class="menu">
        <a class="logo button" href="#home section">EMILY WANG</a>
        <a class="button" href="#contact section" id="contact">Contact</a>
        <a class="button" href="#project anchor" id="projects">Projects</a>
        <!-- <a class="button" href="#about section" id="about">About</a> -->
        <a class="button" href="src/resume.pdf" target="_blank" id="resume">Resume</a>
      </div>
    </div>

    <div class="text">
      <div id="home section" class='padded'>
        <br><br><br><br>
        <h1>Hi, I'm Emily!</h1>
        <p id="project anchor">I'm currently in my second year of studying Electrical Engineering and Computer Science at UC Berkeley. I'm passionate about programming, education, and creative design — check out my work below!</p>
        <br>
      </div>

      <!-- <div id="about section">
        <p>Hello</p>
      </div> -->

      <hr>

      <div id="project section" class='padded'>
        <br>
        <h1>PROJECTS</h1>
        <div class="main clearfix">
          <h2>CODE</h2>

          <button class="md-trigger" data-modal="anovaclubs">ANova Clubs</button>
          <button class="md-trigger" data-modal="stock">Stock Assistant</button>
          <button class="md-trigger" data-modal="scheduler">Scheduler</button>
          <button class="md-trigger" data-modal="matching">Matching Algorithm</button>
          <button class="md-trigger" data-modal="explore">explore berkeley!</button>
          <button class="md-trigger" data-modal="blockchain">Betting on the Blockchain</button>
          <button class="md-trigger" data-modal="world">Random World Generator</button>
          <button class="md-trigger" data-modal="bearmaps">BearMaps</button>
          <button class="md-trigger" data-modal="scheme">Scheme Interpreter</button>
          <!-- <button class="md-trigger" data-modal="ants">Ants vs. SomeBees</button> -->

          <br><br>
          <h2>CREATIVE PROGRAMMING</h2>
          <p>assignments from <a href="https://github.com/emilyzwang/desinv23" target="_blank"><mark>Design Innovation 23</mark></a> @ UC Berkeley</p>
          <button class="md-trigger" data-modal="bees">Bees & Sunflowers</button>
          <button class="md-trigger" data-modal="clock">Digital Clock</button>
          <button class="md-trigger" data-modal="space">Space Walk</button>

          <br><br>
          <!-- <h2>DESIGN</h2>
          <button class="md-trigger" data-modal="flavorbox">FlavorBox</button>
          <button class="md-trigger" data-modal="wild">WILD</button>
          <button class="md-trigger" data-modal="playbill">Playbill</button> -->

        </div>
      </div>

      <br><br><hr>

      <div id="contact section" class="contact">
        <br>
        <h1>Get in touch!</h1>
        <!-- <p>ezwang@berkeley.edu</p> -->
        <!-- <p>zwangemily@gmail.com</p> -->
        <a href="mailto:ezwang@berkeley.edu" target="_blank">
          <img src="src/email-bw.png" style="height: 55px;">
        </a>
        <a href="https://www.linkedin.com/in/emzwang" target="_blank">
          <img src="src/linkedin-bw.png" style="height: 55px;">
        </a>
        <a href="https://www.github.com/emilyzwang" target="_blank">
          <img src="src/github.png" style="height: 55px;">
        </a>
        <br><br><br>
      </div>
    </div>

    </div>

    <div class="md-overlay"></div>

    <script src="js/modalEffects.js"></script>
    <script src="js/classie.js"></script>
  </body>
</html>