-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
177 lines (149 loc) · 6.21 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
<!DOCTYPE html>
<!-- Which life? -->
<html lang="en-US" class="hard_candy blood breeze yolo">
<!-- Empower. -->
<meta charset="utf-8">
<!-- Imagine. -->
<title>Résumé: I'm talkative.</title>
<!-- Flow. -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Love. -->
<meta name="theme-color" content="DeepSkyBlue">
<!-- Allure. -->
<link rel="canonical" href="https://ryanve.github.io/talkative/">
<meta name="description" content="UX writer, content strategist, web creative, blogger, editor">
<link rel="shortcut icon" href="https://user-images.githubusercontent.com/949985/54581426-f76ed200-49c9-11e9-83ab-581b10243515.png">
<meta property="og:image" content="https://user-images.githubusercontent.com/949985/54581426-f76ed200-49c9-11e9-83ab-581b10243515.png">
<meta property="og:image:alt" content="lofi waves">
<!-- Jam. -->
<style media="print">
.hard_candy { font-family: sans-serif }
.sedate { font-style: inherit }
.relate { text-decoration-style: wavy }
.cell { display: block }
.tone + br { display: none }
</style>
<!-- Live. -->
<style media="screen, speech">
.breeze { --vibe: Seashell; --ink: #222 }
.foam { --vibe: Turquoise; --ink: Black }
.tide { --vibe: DeepSkyBlue; --ink: Black }
.gush { --vibe: Violet; --ink: Black }
.glow { --vibe: Gold; --ink: Black }
.fume { --vibe: HotPink; --ink: Black }
.lava { --vibe: RosyBrown; --ink: Black }
.amber { --vibe: Coral; --ink: Black }
.storm { --vibe: Gainsboro; --ink: Black }
.blood { color: var(--ink) !important; background: var(--vibe) !important }
.bleed { color: var(--vibe) !important; background: var(--ink) !important }
.hard_candy {
font-family: sans-serif;
font-size: calc(1em + .5vw + .5vh);
line-height: 1.618;
}
.soft_skills {
box-sizing: border-box;
padding: 1rem;
margin: auto;
max-width: 40em;
overflow-wrap: break-word;
}
.calm { font-size: 1rem }
.loud { font-size: 1.5rem }
.louder { font-size: 2rem }
.diy {
box-sizing: border-box;
list-style: none;
padding: 0;
margin: 0;
}
.yolo * {
box-sizing: border-box;
color: inherit;
background: inherit;
}
.yolo :focus {
outline-color: #415;
outline-style: groove;
}
.bpm {
display: table;
padding: 0;
margin-bottom: 3rem;
width: 100%;
}
.cell { padding: 1rem }
.inhale { margin-top: 1rem }
.exhale { margin-bottom: 2rem }
.chill { font-weight: normal }
.bold { font-weight: bold }
.sedate { display: inherit; font-style: inherit; font-weight: normal; font-family: inherit }
.relate { display: inherit; font-weight: inherit; text-decoration: inherit }
.tone { display: inline-block; padding: .382rem .618rem }
.phrase { display: inline-block; margin: 0; padding: 0; border: 0 }
</style>
<body class="soft_skills">
<header class="diy bold">
<h1 class="phrase diy louder">
I'm <a href="https://github.com/ryanve">Ryan</a>.
<span class="calm"></span>
</h1>
<p class="chill loud">I'm talkative.
<br>Welcome to my résumé :)
</header>
<section class="diy exhale">
<h2 class="diy loud chill exhale inhale">Content strategy<b>.</b></h2>
<ul>
<li>I build web content brands like <a href="https://feels.ink" class="blood tide">feels.ink</a> and <a href="http://virtualmusic.tv" class="blood fume">virtualmusic.tv</a>
<li>I've done content strategy work for freelance and agency clients.
<li>I've streamlined design system content for developer experience.
</ul>
</section>
<section class="diy exhale">
<h2 class="diy loud sedate exhale inhale">UX writing<b>.</b></h2>
<p class="diy">During my <a href="https://ryanve.github.io/uxe/" class="blood storm">UX Engineer</a> work in San Francisco I was involved with UX writing for design system components like forms...buttons...navigation...alerts...using brand voice and tone along with UX research and web standards.
</section>
<section class="diy exhale">
<h2 class="diy loud sedate exhale inhale">Editing<b>.</b></h2>
<ul>
<li>I became blog editor after scoring highly in an agency for editing and proofreading.
<li>Web content I've edited includes
UI text,
<a href="http://virtualmusic.tv" class="blood foam">blogs</a>,
<a href="http://amplifiedny.com" class="blood storm">captions</a>,
<a href="http://basbasbas.com/thesis" class="blood tide">theses</a>,
<a href="https://github.com/ryanve" class="blood amber">documentation</a>.
<li>HTML and markdown are easy for me :)
</ul>
</section>
<section class="diy exhale">
<h2 class="diy loud sedate exhale inhale">Posters<b>.</b></h2>
<p>I create artistic statements via web posters like <a href="https://s9a.github.io/v11y/" class="blood gush">v11y</a> <a href="https://s9a.github.io/E/" class="blood glow">E=</a> <a href="https://s9a.github.io/tape/" class="blood foam">tape</a> <a href="https://s9a.github.io/cuerpo/" class="blood glow">cuerpo</a>
</section>
<section class="diy exhale">
<h2 class="diy loud sedate exhale inhale">Naming<b>.</b></h2>
I study naming from babies to brands and beyond.
I take pride in meaningful universal names.
Visit my naming project <a href="https://366stars.com" class="blood glow">366stars</a> about artist names.
Browse my <a href="https://feels.ink" class="blood fume">poster names</a> or <a href="https://ryanve.github.io" class="blood gush">code names</a>.
Dive into my color names in <a href="https://s9a.github.io/bae/" class="blood gush">bae</a> and <a href="https://s9a.github.io/sea/" class="blood tide">sea</a> =)
</section>
<section class="diy exhale">
<h2 class="diy loud sedate exhale inhale">Tweets<b>.</b></h2>
<p class="diy inhale">Twitter is my favorite social media! I'm <a href="https://twitter.com/ryanve" class="blood tide">@ryanve</a>
</section>
<h2 class="diy chill exhale">
<b>Call</b> me :)
</h2>
<address class="sedate exhale" aria-label="number">
<span class="tone blood foam">six</span><br>
<span class="tone blood foam">fo</span><br>
<span class="tone blood foam">six</span><br>
<span class="tone blood glow">ate</span><br>
<span class="tone blood glow">five</span><br>
<span class="tone blood glow">free</span><br>
<span class="tone blood gush">fo</span><br>
<span class="tone blood gush">nine</span><br>
<span class="tone blood fume">fo</span><br>
<span class="tone blood fume">won</span><br>
</address>