-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
223 lines (172 loc) · 12.1 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset = "utf-8">
<title>hi, i'm jenny - a portfolio</title>
<link rel="stylesheet" href="style.css">
<!--Poppins font family-->
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,100;1,200&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>hi,<br/>
i'm jenny!</h1>
<h2 id = "pronouns"><i>she/they</i></h2>
<!--navigation-->
</header>
<section class = "nav">
<h2>navigation
</h2>
<h3>
<ul>
<a href="#about"><li>about me</li></a>
<a href="#resume"><li>experience</li></a>
<a href="#featuredart"><li>featured art & design</li></a>
<a href="#moreart"><li>more art & design</li></a>
<a href="#featuredwriting"><li>featured writing</li></a>
<a href="#morewriting"><li>more words</li></a>
<a href="#contact"><li>let's get in touch!</li></a>
</ul>
</h3>
</section>
<!--end of navigation-->
<!--about-->
<div class="container">
<section class = "about" id = "about">
<article class="post">
<h2 class = "section-title">about me</h2>
<div id = "about-box">
<p> i'm currently a <strong>third-year uc berkeley public health student </strong> learning about data science, design, human rights, and journalism on the side. </p>
</div>
</article>
</section>
<!--end of about-->
<!--resume-->
<section class = "resume" id = "resume">
<article class="post">
<h2 class = "section-title"><span class = "highlight">experience</span></h2>
<!--position desc-->
<h4 class = "position-title">incoming health + tech fellow</h4>
<p class = "org-title"><i>fung fellowship @ uc berkeley</i></p>
<h4 class = "position-title">student coordinator</h4>
<p class = "org-title"><i>asian american pacific islander health research group (aapihrg)</i></p>
<h4 class = "position-title">executive board member</h4>
<p class = "org-title"><i>public health advocate</i></p>
<h4 class = "position-title">open source researcher</h4>
<p class = "org-title"><i>human rights center @ uc berkeley school of law</i></p>
<h4>head over to <a href ="https://linkedin.com/in/kwonjs">linkedin</a> to learn more → </h4>
</article>
</section>
<!--end of resume-->
<!--featured art-->
<section class = "featuredart" id = "featuredart">
<article class="post">
<h2 class = "section-title"><span class = "shadowtext">featured</span> art & design</h2>
<div class = "row">
<div class = "column">
<a href = "https://docs.google.com/presentation/d/e/2PACX-1vR3911i1Whf6fe8IyFJx1P0nzE4x_aL2FvjbvLZeBG5WX0jefEpHGzuf8yya2WnSF5usp__iPoFkROP/pub?start=false&loop=false&delayms=3000">
<img src = "revampbrand.png" alt = "a black and white graphic with the words revamping and rebranding my brand: a design study"></a>
<a href = "https://docs.google.com/presentation/d/e/2PACX-1vR3911i1Whf6fe8IyFJx1P0nzE4x_aL2FvjbvLZeBG5WX0jefEpHGzuf8yya2WnSF5usp__iPoFkROP/pub?start=false&loop=false&delayms=3000">
<p>click the graphic above or this link <br/> to see the rebranding & revamping <br/>of my brand "kwonseoyoung"</p></a>
</div>
<div class = "column">
<a href = "https://drive.google.com/file/d/1VVwAa6LPMIGjubckH8-1rXQdBxkX7dRR/view?usp=sharing">
<img src = "illustrativejourn.png" alt = "a blue graphic with the words how healthcare insurance companies benefit from the pandemic: a twitter thread, illustrated"></a>
<a href = "https://drive.google.com/file/d/1VVwAa6LPMIGjubckH8-1rXQdBxkX7dRR/view?usp=sharing">
<p>click the graphic above or this link <br/> to see how healthcare insurance <br/> companies benefit from the COVID-19 pandemic</p></a>
</div>
<div class = "column">
<a href = "https://drive.google.com/drive/folders/1nSsckYeDSvYFzXQJGCOcHsNzbcoZCroE?usp=sharing">
<img src = "socmediakit.png" alt = "a green graphic with the words social media and promotional graphics tool-kit: fall 2019 and spring 2020"></a>
<a href = "https://drive.google.com/drive/folders/1nSsckYeDSvYFzXQJGCOcHsNzbcoZCroE?usp=sharing">
<p>click the graphic above or this link <br/> to see a social media donation <br/>campaign toolkit i made</p></a>
</div>
</div>
</article>
</section>
<!--end of featured art-->
<!--more art-->
<section class = "moreart" id = "moreart">
<article class="post">
<h2 class = "section-title">more art & design</h2>
<div class = "row">
<div class = "column">
<a href = "https://drive.google.com/drive/folders/131Hx3DqJjbdKgR4f2p9QKVNKirEo0rMq?usp=sharing">
<img src = "spotifycovers.png" alt = "a black graphic with green and white text saying spotify playlist covers made on canva"></a>
<a href = "https://drive.google.com/drive/folders/131Hx3DqJjbdKgR4f2p9QKVNKirEo0rMq?usp=sharing">
<p>click the graphic above or this link <br/> to see different spotify playlist cover art</p></a>
</div>
<div class = "column">
<a href = "https://issuu.com/rightsstuff/docs/the_rights_stuff_-_spring_2020_issue">
<img src = "therightsstuff.png" alt = "a blue graphic with the words The Rights Stuff Spring 2020 Issue - an issue I helped design"></a>
<a href = "https://issuu.com/rightsstuff/docs/the_rights_stuff_-_spring_2020_issue">
<p>click the graphic above or this link <br/> to see uc berkeley's human rights publication <br/>i helped design</p></a>
</div>
<div class = "column">
<a href = "http://bit.ly/reminders2tellyourself">
<img src = "reminders.png" alt = "a purple graphic showing a hand writing the words reminders to tell yourself all the time"></a>
<a href = "https://drive.google.com/drive/folders/1nSsckYeDSvYFzXQJGCOcHsNzbcoZCroE?usp=sharing">
<p>click the graphic above or this link <br/> to see a scrollable graphic i made <br/> on reminders to tell yourself all the time</p></a>
</div>
</div>
</article>
</section>
<!--end of more art-->
<!--featured writing-->
<section class = "featuredwriting" id = "featuredwriting">
<article class="post">
<h2 class = "section-title"><span class = "shadowtext">featured</span> writing</h2>
<div class = "row">
<div class = "column">
<a href = "https://medium.com/asian-voices-matter/the-cultural-whiplash-of-a-second-generation-korean-american-18ba56311ffc?source=friends_link&sk=c22d5261754093a3116a7002290d2d1e">
<img src = "culturalwhiplash.png" alt = "a white graphic with an upside down head. inside the head there is a white brain with both the korean and american flags merging together. underneath there is black text saying the cultural whiplash of a second generation korean american."></a>
<a href = "https://medium.com/asian-voices-matter/the-cultural-whiplash-of-a-second-generation-korean-american-18ba56311ffc?source=friends_link&sk=c22d5261754093a3116a7002290d2d1e">
<p>click the graphic above or this link <br/> to read my op-ed on the evolution of <br/> the second generation korean american identity</p></a>
</div>
<div class = "column">
<a href = "https://docs.google.com/document/d/1P5Y9RlbrWPlfsZ4TrP9yykiajuK3vII9rc5gcFQEr3U/edit?usp=sharing">
<img src = "parasite.png" alt = "the background image is the iconic parasite movie poster - the family scattered throughout the rich park family's house with their eyes redacted. white text on top reads 'parasite': how a korean movie will force you to re-evaluate your country's views on poverty"></a>
<a href = "https://docs.google.com/document/d/1P5Y9RlbrWPlfsZ4TrP9yykiajuK3vII9rc5gcFQEr3U/edit?usp=sharing">
<p>click the graphic above or this link <br/> to read about parasite's underlying messages <br/>on the societal perception of people living in poverty</p></a>
</div>
</div>
</article>
</section>
<!--end of featured writing-->
<!--more writing-->
<section class = "morewriting" id = "morewriting">
<article class="post">
<h2 class = "section-title">more words</h2>
<div class = "row">
<div class = "column">
<a href = "https://www.dailycal.org/2020/06/25/uc-berkeley-administration-if-we-tell-you-were-lgbtqia-we-want-resources-in-return/">
<img src = "dailycalopedlgbtqia.png" alt = "a dark blue graphic with images of lgbtqia representation with the words cal administration, if we tell you we're lgbtqia+ we want resources in return"></a>
<a href = "https://www.dailycal.org/2020/06/25/uc-berkeley-administration-if-we-tell-you-were-lgbtqia-we-want-resources-in-return/">
<p>click the graphic above or this link <br/> to read my op-ed on lgbtqia+ identity disclosure <br/>and access to resources at uc berkeley</p></a>
</div>
<div class = "column">
<a href = "https://pha.berkeley.edu/2018/12/05/alternative-medicine-a-good-alternative-to-the-doctor/">
<img src = "altmedicine.png" alt = "a yellow graphic with the words alternative medicine: a good alternative to the doctor?"></a>
<a href = "https://pha.berkeley.edu/2018/12/05/alternative-medicine-a-good-alternative-to-the-doctor/">
<p>click the graphic above or this link <br/> to read about east asian alternative medicinal <br/>use and effectiveness</p></a>
</div>
</div>
</article>
</section>
<!--end of more writing-->
<!--contact-->
<section class = "contact" id = "contact">
<article class="post">
<h1 class = "section-title">let's get in touch!</h2>
<h3> i love connecting with people. shoot me a quick email <br/> and let's talk and/or collab!</h3>
</article>
<a href = "mailto:[email protected]"><img src = "mailicon.png"></a>
<a href = "https://linkedin.com/in/kwonjs"><img src = "linkedinicon.png"></a>
<a href = "https://medium.com/@kwonseoyoung"><img src = "mediumicon.png"></a>
<p>made with love by <a href = "https://github.com/kwonjs">kwonjs</a></p>
</section>
<!--end of contact-->
</div>
</body>
</html>