-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathabout.html
196 lines (175 loc) · 9.01 KB
/
about.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About - Dave Vo</title>
<link rel="icon" type="image/x-icon" href="https://media.dave-vo.com/file/dvfolio/general/davevo_favicon.png">
<!--CSS-->
<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/about-page.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="about-page">
<section class="functional"> <!--Functional-->
<section>
<h1 class="landing-text">design like there's no ceiling</h1>
<p>
My early start as an illustrator and a graphic designer outlined my passion for creating visual experiences. My favorite design work out there tells a compelling story and goes beyond what's expected. To rise beyond the <b>ceiling</b>, you need to establish the foundation of needs/perspectives and bring a touch of imagination.
</p><br>
<p>
And so, studying UX/HCI at UC San Diego was a logical next step to make well-rounded design work. That is why I’m particularly excited to make a difference in creative industries where I can shape product strategy, visual design, and brand storytelling.
</p>
<div class="white-space-block"></div>
<h4>
Here’s what I’m currently up to:
</h4><br>
<div class="current-role-container">
<figure>
<a href="https://designlab.ucsd.edu" target="_blank">
<img class="current-role" src="https://media.dave-vo.com/file/dvfolio/about/roles-design-lab.png">
</a>
<figcaption>HCI Research @ UCSD Design Lab</figcaption>
</figure>
<figure>
<a href="https://ucsdguardian.org" target="_blank">
<img class="current-role" src="https://media.dave-vo.com/file/dvfolio/about/roles-guardian.png">
</a>
<figcaption>Co-Design Editor @ UCSD Guardian</figcaption>
</figure>
<figure>
<a href="https://maximalistmagazine.wixsite.com/maximalist-magazine/portfolio" target="_blank">
<img class="current-role" src="https://media.dave-vo.com/file/dvfolio/about/roles-maxmag.png">
</a>
<figcaption>Editor-in-Chief @ Maximalist Magazine</figcaption>
</figure>
<figure>
<a href="mailto: dtvo@ucsd.edu">
<img class="current-role" src="https://media.dave-vo.com/file/dvfolio/about/roles-you.png">
</a>
<figcaption>This could be us! Let's chat!</figcaption>
</figure>
</div>
</section>
<section class="profile-pic-container"> <!--Profile Picture -->
<div class="profile-pic">
<img class="profile" src="https://media.dave-vo.com/file/dvfolio/about/profile-pic-full.png">
<img class="wildcard" src="https://media.dave-vo.com/file/dvfolio/about/snowflake-7.png">
</div>
<div style="display: flex; justify-content: space-between;">
<p class="subtitle">INTJ</p>
<p class="subtitle">SD Metro Area</p>
</div>
<aside class="my-stats"> <!--Dandy-->
<p>Dandy</p>
<span>
<div class="stats-bar" style="width: 60%;"></div>
</span>
</aside>
<aside class="my-stats"> <!--Real fun-->
<p>Real fun</p>
<span>
<div class="stats-bar" style="width: 75%;"></div>
</span>
</aside>
<aside class="my-stats"> <!--Chromatic-->
<p>Chromatic</p>
<span>
<div class="stats-bar" style="width: 85%;"></div>
</span>
</aside>
</section>
</section>
<section class="design-values"> <!--Paper cranes-->
<h1 class="landing-text">(de)sign of good living</h1>
<div class="senbazuru">
<p>
<i>senbazuru 千羽鶴 • (the act of folding 1,000 paper cranes)</i>
</p>
<img class="listening-pic" src="https://media.dave-vo.com/file/dvfolio/about/listening-pic.png">
</div><br>
<div class="playlist-text-container">
<div class="playlist">
<a href="https://open.spotify.com/playlist/0gmuRZRuqPMszO5Z6oOfsN?si=455a9de4c05d4880" target="_blank">
<img class="subliminal" src="https://media.dave-vo.com/file/dvfolio/about/subliminal-playlist.png">
</a>
</div>
<p>
Design is inherently profound, much like the concept behind senbazuru. Real change doesn’t come from simply folding paper. Curious enough, why put in the effort to begin with?
</p><br>
<p>
Dare I say that’s already a given. Rather, the act of folding reaffirms what instills us with passion, leading us to believe that we have the power to manifest anything into existence. Cranes, folded 1 by 1, symbolize the <b>sum of our dedication</b> to solving our problems and reaching our goals.
</p><br>
<p>
Deep down, this is what drew me to design: manifesting impact. Revisiting this idea of iteration and reflection made me fall in love with the craft again. Caring to design 1,000 paper cranes is a process, but designing the 1,001th, the 10,000th—the 1,000,000th marks a lifelong pursuit of fulfillment.
</p>
</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>