-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
332 lines (321 loc) · 14 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
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
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cristina Silva - Design Engineer</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Syne:wght@600;800&display=swap"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css2?family=Kode+Mono:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kode+Mono:[email protected]&family=Roboto+Mono:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/css/reset.css" />
<link rel="stylesheet" type="text/css" href="assets/css/styles.css" />
<link rel="icon" href="favicon.ico" />
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />
<meta name="twitter:card" content="" />
<meta name="twitter:site" content="" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />
<script src="assets/js/tabs.js" async></script>
</head>
<body>
<div class="wrapper">
<header>
<pre aria-hidden="true">
,ad8888ba, 88888888ba 88 ad88888ba 888888888888 88 888b 88 db
d8"' `"8b 88 "8b 88 d8" "8b 88 88 8888b 88 d88b
d8' 88 ,8P 88 Y8, 88 88 88 `8b 88 d8'`8b
88 88aaaaaa8P' 88 `Y8aaaaa, 88 88 88 `8b 88 d8' `8b
88 88""""88' 88 `"""""8b, 88 88 88 `8b 88 d8YaaaaY8b
Y8, 88 `8b 88 `8b 88 88 88 `8b 88 d8""""""""8b
Y8a. .a8P 88 `8b 88 Y8a a8P 88 88 88 `8888 d8' `8b
`"Y8888Y"' 88 `8b 88 "Y88888P" 88 88 88 `888 d8' `8b
ad88888ba 88 88 8b d8 db
d8" "8b 88 88 `8b d8' d88b
Y8, 88 88 `8b d8' d8'`8b
`Y8aaaaa, 88 88 `8b d8' d8' `8b
`"""""8b, 88 88 `8b d8' d8YaaaaY8b
`8b 88 88 `8b d8' d8""""""""8b
Y8a a8P 88 88 `888' d8' `8b
"Y88888P" 88 88888888888 `8' d8' `8b
</pre>
<h1 class="visually-hidden">Cristina Silva</h1>
<h2>Design Engineer</h2>
<p class="header-body">
I only ever wanted to make MySpace layouts and cute Neopets pages but
now I've gotta be a <em>UX Engineer</em> and
<em>Designer Who Codes</em> to pay the bills. I've been known to work
across disciplines to bring digital designs and products to life usually
by way of <em>design systems</em> and filling in the gaps between design
and engineering. Sometimes I freelance, and sometimes I make
<i><a href="https://www.instagram.com/ohaiclaystina/">ceramics</a></i
>, but most often you can find me just going about my business in the
great state of Maine.
</p>
</header>
<main>
<h2>Experience</h2>
<div class="tabbed">
<div class="role-column">
<ul class="role-list" role="tablist">
<li role="presentation">
<a href="#notarize" id="notarize" aria-selected="true"
>Notarize</a
>
</li>
<li role="presentation">
<a href="#freelance" id="freelance">Freelance</a>
</li>
<li role="presentation">
<a href="#bevspot" id="bevspot">BevSpot</a>
</li>
<li role="presentation">
<a href="#northeastern" id="northeastern">Northeastern</a>
</li>
<li role="presentation">
<a href="#thoughtbot" id="thoughtbot">thoughtbot</a>
</li>
</ul>
</div>
<div class="role-content">
<section
role="tabpanel"
id="notarize-section"
aria-labelledby="notarize"
>
<div class="role-header">
<img
class="current-role-badge"
src="assets/img/current-role-badge.svg"
alt="Current role"
/>
<div class="role-heading">
<h3>Senior UX Engineer</h3>
<h4>june 2021 — present</h4>
</div>
</div>
<p>
As the lead developer for our design system, I make sure that our
components not only match up with what our design team has
created, but that they’re also accessible, and easy for our
engineering team to use.
</p>
<h4>responsibilities</h4>
<ul class="table-list">
<li>
Build new, reusable components for the design system in a React
+ Typescript codebase with a focus on finding the right balance
between structure and flexibility as well as developer
experience
</li>
<li>
Refactor existing components to be in line with design system
standards and meet accessibility requirements
</li>
<li>
Advocate for frontend standards and best practices by writing
documentation, running frontend retrospectives and knowledge
sharing via tech talks
</li>
<li>
Maintain Storybook for component usage and documentation as it
relates to developer experience and the design system guidelines
</li>
<li>
Collaborate closely with the UX team by attending design
critiques, ensuring alignment with the design system guidelines
in place, and assisting in the creating of components and their
states
</li>
<li>
Determined and implemented design tokens for color, typography,
spacing and more in both our Figma library and the web codebase
</li>
<li>
Consult with different product squads to help build out needed
components or assist with frontend projects
</li>
</ul>
</section>
<section
role="tabpanel"
id="freelance-section"
aria-labelledby="freelance"
>
<div class="role-header">
<div class="role-heading">
<h3>Freelance Frontend Developer & Product Designer</h3>
<h4>august 2019 — present-ish</h4>
</div>
</div>
<p>
I've been known to freelance from time to time and have worked
with a variety of clients on web design and development projects.
</p>
<h4>client project highlights</h4>
<ul class="table-list">
<li>
Designing and implementing marketing pages for
<a href="https://github.com">GitHub</a>
</li>
<li>Building a documentation site for an IoT startup</li>
<li>
Perfecting the pixels and interactions of a d2c Shopify site
</li>
<li>
Iteratively designing and building UI in code for a startup on a
mission to enable fulfilling careers
</li>
<li>
Updating a component library and implementing frontend UI for
<a href="https://vestaboard.com">Vestaboard</a>
</li>
</ul>
</section>
<section
role="tabpanel"
id="bevspot-section"
aria-labelledby="bevspot"
>
<div class="role-header">
<div class="role-heading">
<h3>Frontend Developer</h3>
<h4>january 2019 — august 2019</h4>
</div>
</div>
<p>
At BevSpot, I was involved in every step of the design process,
starting with user research and following through all the way to
frontend implementation details. Eventually, I officially made the
jump from "Product Designer Who Codes" to "Frontend Developer"
after realizing that several months had gone by and I had been
exclusively working on implementing frontend components and UI
details.
</p>
<h4>responsibilities</h4>
<ul class="table-list">
<li>
Implemented components and views for new features and refactored
existing ones using React & Typescript
</li>
<li>
Created best practices for collaboration between designers and
engineers and aligned team members by creating a shared design
system
</li>
<li>
Advised designers working on projects by leveraging technical
and product knowledge
</li>
</ul>
<div class="role-header">
<div class="role-heading">
<h3>Senior Product Designer</h3>
<h4>june 2017 — december 2018</h4>
</div>
</div>
<h4>responsibilities</h4>
<ul class="table-list">
<li>
Designed the ux and ui of new features by leverage conversations
with customers and usability testing
</li>
<li>
Consolidated duplicate components, colors, typography styles and
more to achieve a more cohesive UI for the web application and
the beginnings of a design system
</li>
<li>
Collaborated with other designers and developers on the team to
implement UI details in code
</li>
</ul>
</section>
<section
role="tabpanel"
id="northeastern-section"
aria-labelledby="northeastern"
>
<div class="role-header">
<div class="role-heading">
<h3>Adjunct Faculty</h3>
<h4>september 2017 — august 2018</h4>
</div>
</div>
<p>
I only taught for two semesters, but it was some of the most
rewarding work of my career and also forced me to become an expert
in HTML & CSS
</p>
<h4>responsibilities</h4>
<ul class="table-list">
<li>
Designed and created a curriculum for 5D Tools – an Introduction
to HTML & CSS
</li>
<li>
Demonstrated adding and styling content with HTML & CSS, hosting
a website using AWS, and how to debug common web development
problems by creating a series of small websites and demos with
students over the course of the semester
</li>
</ul>
</section>
<section
role="tabpanel"
id="thoughtbot-section"
aria-labelledby="thoughtbot"
>
<div class="role-header">
<div class="role-heading">
<h3>Designer</h3>
<h4>may 2014 — june 2017</h4>
</div>
</div>
<p>
thoughtbot taught me everything I know about product design and
development and I was lucky enough that it was my first job out of
college.
</p>
<h4>responsibilities</h4>
<ul class="table-list">
<li>
Collaborated with developers to help build and design
user-centered and successful products for a variety of clients
</li>
<li>
Executed on the entire design process from strategy and
prototyping to designing and implementing features
</li>
<li>
Led and participated in Product Design Sprints to determine the
best solutions for digital products
</li>
</ul>
</section>
</div>
</div>
</main>
<footer>
<h2>Wanna get in touch?</h2>
<p>
<a class="email-cta" href="mailto:[email protected]"
>hello (at) cristinasilva (dot) co</a
>
</p>
<p>
or send me a DM on
<a href="https://twitter.com/silvacristina_">twitter</a>
</p>
</footer>
</div>
</body>
</html>