-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathplayground.html
192 lines (170 loc) · 9.87 KB
/
playground.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Playground - Dave Vo</title>
<link rel="icon" type="image/x-icon" href="https://media.dave-vo.com/file/dvfolio/general/davevo_favicon.png">
<link rel="stylesheet" href="styles/fonts.css">
<link rel="stylesheet" href="styles/general.css">
<link rel="stylesheet" href="styles/header.css">
<link rel="stylesheet" href="styles/footer.css">
<link rel="stylesheet" href="styles/playground.css">
<script src="javascript/case-study-links.js"></script>
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-D3KQT24T12"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-D3KQT24T12');
</script>
<body>
<header class="header">
<a href="index.html">
<div class="wordmark">
dave v
<img class="stylized-o" src="https://media.dave-vo.com/file/dvfolio/about/snowflake-2.png">
</div>
</a>
<a href="index.html">
<img class="small-shrink-logo" src="https://media.dave-vo.com/file/dvfolio/about/snowflake-2.png" alt="Logo Visual">
</a>
<button type="button" class="hamburger" onclick="myFunction(this)">
<div class="ham-bars" id="bar1"></div>
<div class="ham-bars" id="bar2"></div>
<div class="ham-bars" id="bar3"></div>
</button>
<div class="menu">
<ul class="hamburger-menu-options">
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="playground.html">
Playground
</a>
</li>
<li>
<a href="https://drive.google.com/file/d/1OCZUXgrLguEa5f5sjY4AUzZDR1TiWaqZ/view?usp=sharing" target="_blank">
Résumé
</a>
</li>
</ul>
</div>
</header>
<div class="header-container"></div>
<main class="playground-page">
<section class="guardian"> <!--UCSD Guardian-->
<h1 class="landing-text">designing for journalism</h1>
<div class="text-with-emote">
<img class="emote" src="https://media.dave-vo.com/file/dvfolio/about/thinking-pic.png">
<p>
At their core, these two disciplines are connected by the power of storytelling. Being a designer in both fields, my role is to understand, represent, and foster accessible conversations about ongoing developments, ranging from local discourse to high-impact stories.
</p>
</div>
<div class="white-space-block"></div>
<div class="encampment-feature">
<a href="https://ucsdguardian.org/2024/06/16/voices-from-inside-the-encampment/#photo" target="_blank">
<img src="https://media.dave-vo.com/file/dvfolio/playground/guardian-encampment.png">
</a>
<div>
<h3>Featured Work</h3>
<p>At the climax of The UCSD Guardian's extensive coverage of Palestine, this investigative multimedia project shares the perspectives of students and others directly impacted by the events that took place during the student encampment and its dismantlement.</p><br>
<p class="subtitle">Metrics</p>
<p>
Across all UCSD Guardian coverage during the academic year, we received <b>400,000+</b> page hits on the website, gained <b>250,000+</b> new viewers, and distributed <b>100,000+</b> physical issues across campus.
</p><br>
</div>
</div>
<div class="white-space-block"></div>
<p>Moreover, here are some highlights of the layout design I've done for physical issues:</p>
<div class="newspapers">
<img src="https://media.dave-vo.com/file/dvfolio/playground/guardian-palenstine.png">
<div style="display: flex; flex-direction: column;">
<img src="https://media.dave-vo.com/file/dvfolio/playground/guardian-front-cover.png">
<img src="https://media.dave-vo.com/file/dvfolio/playground/guardian-musical-txt.png">
</div>
<img src="https://media.dave-vo.com/file/dvfolio/playground/guardian-food-reviews.png">
</div>
</section>
<section class="maxmag"> <!--MaxMag-->
<h1 class="landing-text">living the (maxim) of a surre<span class="landing-text">(alist)</span></h1>
<p>
While minimalism is about universally understood delivery, maximalism champions subversion. The goal isn’t just to develop one’s artistic work, but to discover new approaches to ideas.
</p><br>
<div class="text-with-emote">
<img class="emote" src="https://media.dave-vo.com/file/dvfolio/about/excited-pic.png">
<p>
How we give a through-line an extra kick, <b>that’s maximalism</b>. Which conventions we subvert to create a fresh story, <b>also maximalism</b>.
</p>
</div><br>
<p>In the first two academic years of running, Maximalist Magazine has sold <b>100+</b> physical issues. As the upcoming editor-in-chief, I plan to carry on the creative space and help the organization grow.</p>
<div class="white-space-block"></div>
<h3>Featured Work</h3>
<div class="maxmag-work">
<img id="tripanel" src="https://media.dave-vo.com/file/dvfolio/playground/maxmag-tripanel.png">
<div class="physical-prints">
<img src="https://media.dave-vo.com/file/dvfolio/playground/maxmag-second-issue.png">
<img src="https://media.dave-vo.com/file/dvfolio/playground/maxmag-almost-lightswitch.png">
<img src="https://media.dave-vo.com/file/dvfolio/playground/maxmag-jenny.png">
<img src="https://media.dave-vo.com/file/dvfolio/playground/maxmag-untamed.png">
</div>
</div>
</section>
<section class="linear-algebra"> <!--Linear Algebra-->
<h1 class="landing-text">how linear algebra sticks with me</h1>
<div class="text-with-emote">
<img class="emote" src="https://media.dave-vo.com/file/dvfolio/playground/zelly.jpeg">
<p>
Meet Efim Zelmanov, Fields Medal recipient (basically a Nobel Prize for math), and most importantly, <b>my math professor</b> during my first quarter at UCSD.
</p>
<img class="listening-pic" src="https://media.dave-vo.com/file/dvfolio/about/listening-pic.png">
</div><br>
<div class="zelly-body">
<div class="playlist">
<a href="https://open.spotify.com/playlist/4YjSU6bzbJB2PQnUoiEaUs?si=OlHoKyH6RNyGRJqx_hmtfw&pi=u-HjWO9NFGQui3" target="_blank">
<img class="subliminal" src="https://media.dave-vo.com/file/dvfolio/playground/zelly-playlist.png">
</a>
</div>
<p>
As a non-math major, I struggled to grasp the concepts half of the time, but the language of passion is something I felt in all of his lectures.
</p><br>
<p>
Whether Zelmanov is “keeling ze variables” during row reduction, characterizing subspaces as “ze avatar”, or wondering why the class is so obsessed with parallelepipeds, he made the craft sound so enchanting. I found it inspiring how it goes beyond computation, but as a way of life.
</p><br>
<p>
Turns out that was the last quarter he taught at UCSD during his 20+ year tenure. It’s both an honor and a bittersweet farewell. Even though he continues to reach new heights, the tokens of his impact <b>stick</b> close to my heart.
</p>
</div>
<div class="stickers">
<img src="https://media.dave-vo.com/file/dvfolio/playground/zelly-sticker1.png">
<img src="https://media.dave-vo.com/file/dvfolio/playground/zelly-sticker2.png">
<img style="max-width: 100%" src="https://media.dave-vo.com/file/dvfolio/playground/zelly-skateboard.png">
<img src="https://media.dave-vo.com/file/dvfolio/playground/zelly-sticker2.png">
<img src="https://media.dave-vo.com/file/dvfolio/playground/zelly-sticker1.png">
</div>
</section>
</main>
<aside class="made-with" style="padding: 0 2.4rem">
<p>Made with HTML/CSS/JS and <span>d x r x c</span></p>
</aside>
<footer class="footer">
<div class="footer-container">
<span class="footer-text"><b>@<script>document.write(new Date().getFullYear())</script> • Reach out and let's make it happen!</b></span>
<div class="social-media-icons">
<a href="mailto: dtvo@ucsd.edu">
<img class="media-links" src="../images/general/email-icon.svg" style="padding-right: .25rem;">
</a>
<a href="https://www.linkedin.com/in/dave-vo" target="_blank">
<img class="media-links" src="../images/general/linkedin-logo.svg">
</a>
<a href="https://github.com/ddavevo" target="_blank">
<img class="media-links" id="rightmost-icon" src="../images/general/github-logo.svg">
</a>
</div>
</div>
</footer>
</body>
</html>