-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
525 lines (520 loc) · 20.6 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
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sabrina Ferguson - Portfolio</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link
href="http://fonts.googleapis.com/css?family=Lato:400,700|Bitter:400,700"
rel="stylesheet"
type="text/css"
/>
<link href="css/style.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row header">
<div class="col-md-12">
<h1 class="name">Sabrina Ferguson</h1>
<h2 class="role">UI / UX Developer</h2>
</div>
</div>
<!-- header -->
<div class="row navigation">
<div class="col-md-4 col-xs-12">
<a href="index.html" class="serif">Resume</a>
</div>
<div class="col-md-4 col-xs-12">
<a href="portfolio.html" class="serif">Portfolio</a>
</div>
<div class="col-md-4 col-xs-12">
<a href="contact.html" class="serif">Contact</a>
</div>
</div>
<hr />
<div class="row body">
<div class="col-md-12">
<p class="lead text-center">
<strong
>I am a front-end developer with a focus on UI/UX design</strong
>
</p>
<p>
I started off as a designer with knowledge of HTML, CSS and
Javascript. I've expanded my skills and also learned development to
better communicate and work with a development team. Having been in
a variety of work environments, I have skills from designing and
mocking up wireframes in Balsamiq, to designing the graphics and
templates for application views with HTML/CSS and Javascript, and to
programming the features in the application with Ruby on Rails.
</p>
<p class="bg-info school">
I graduated from <strong>Georgia Institute of Technology</strong> in
2010 with a Bachelor of Sciences in
<a
href="http://cm.lmc.gatech.edu/"
target="_blank"
title="Learn more about Computational Media"
>Computational Media</a
>. I focused on web development and user experience, taking classes
in web design, programming, and HCI (Human Computer Interaction)
</p>
<br />
<ul class="resume-tabs">
<li>
<h2 class="experience-tab active">Experience</h2>
</li>
<li>
<h2 class="skills-tab">Skills</h2>
</li>
</ul>
<div class="row experience-body">
<div class="job col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-8 col-xs-12">
<h4 class="position pull-left">
Senior Software Engineer -
<span class="company">CallRail</span>
</h4>
</div>
<div class="col-md-4 col-xs-12">
<h6 class="date pull-right">Febuary 2018 - Current</h6>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Develop front-end interfaces in a Ruby on Rails/Angular
stack. Helped architect and redesign the front-end for a
major part of our application. Introduced the use of ngRx.
</p>
<ul class="list-inline bg-info">
<li>VS Code</li>
<li>SCSS</li>
<li>Angular</li>
<li>Angular Material</li>
<li>Angular CDK</li>
<li>Webpack</li>
</ul>
</div>
</div>
</div>
<!-- job -->
<div class="job col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-8 col-xs-12">
<h4 class="position pull-left">
Senior UI Engineer - <span class="company">Cardlytics</span>
</h4>
</div>
<div class="col-md-4 col-xs-12">
<h6 class="date pull-right">November 2014 - January 2018</h6>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Design and develop wireframes based on user interviews and
testing to develop products for the end user. Develop
interactive interfaces that are responsive and ADA Level AA
compliant for banks’ end users. Develop in-house
applications with AngularJS and HTML/CSS in ASP.NET
projects. Some experience working with React, NodeJS,
Express, Webpack and SQL. Research and development using
Angular 2+ for future projects.
</p>
<p>
Redesigned and rebuilt the core bank application and
drastically cut down the original development time and
decreased areas of errors using jQuery, BackboneJS,
Underscore and Browserify.
</p>
<ul class="list-inline bg-info">
<li>Visual Studio</li>
<li>VS Code</li>
<li>Balsamiq</li>
<li>LESS</li>
<li>AngularJS/Angular</li>
<li>BackboneJS</li>
<li>Bootstrap 3</li>
<li>Photoshop</li>
<li>Gulp</li>
<li>NodeJS/Express</li>
<li>Webpack</li>
<li>Browserify</li>
<li>ASP.NET</li>
<li>Angular Material</li>
<li>React</li>
</ul>
</div>
</div>
</div>
<!-- job -->
<div class="job col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-8 col-xs-12">
<h4 class="position pull-left">
UI/UX Engineer - <span class="company">m2M Strategies</span>
</h4>
</div>
<div class="col-md-4 col-xs-12">
<h6 class="date pull-right">April 2014 - November 2014</h6>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Responsible for designing interfaces for franchise marketing
administration. Focus on user experience and improving the
usability of existing systems. Planned out use cases, mocked
up wireframes with Balsamiq and developing the pages with
HTML/CSS and Javascript. Responsible for designing a new
adminstrative dashboard system to integrate the two systems
between GetOne Rewards and m2M Strategies. Worked in Java
and .NET environments.
</p>
<ul class="list-inline bg-info">
<li>Visual Studio 2013</li>
<li>Eclipse IDE</li>
<li>LESS</li>
<li>Java</li>
<li>ASP.NET MVC 4</li>
<li>Bootstrap 3</li>
<li>Balsamiq</li>
<li>Photoshop</li>
<li>BitBucket</li>
</ul>
</div>
</div>
</div>
<!-- job -->
<div class="job col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-8 col-xs-12">
<h4 class="position pull-left">
UX Engineer - <span class="company">GetOne Rewards</span>
</h4>
</div>
<div class="col-md-4 col-xs-12">
<h6 class="date pull-right">February 2014 - April 2014</h6>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Maintained and improved their online administrative
reporting interface for the online digital loyalty program.
Worked in a development environment and personally designed
and developed views for the site. Mocked up and designed
prototypes for the online service as well as the mobile
application. Redesigned the iPad Kiosk app with intent to
improve the user experience and ease the process of
checkout. <br />Designed wireframes in Balsamiq and designed
graphics in Photoshop and broke them down into graphic
assets for the iPad app. Maintained and wrote up documents
of interaction and requirements for the development team.
</p>
<ul class="list-inline bg-info">
<li>Eclipse IDE</li>
<li>LESS</li>
<li>Java</li>
<li>Bootstrap 3</li>
<li>Photoshop</li>
<li>Balsamiq</li>
<li>Jira</li>
<li>BitBucket</li>
</ul>
</div>
</div>
</div>
<!-- job -->
<div class="job col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-8 col-xs-12">
<h4 class="position pull-left">
Web Developer - <span class="company">PlayOn! Sports</span>
</h4>
</div>
<div class="col-md-4 col-xs-12">
<h6 class="date pull-right">August 2011 - February 2014</h6>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Designed and maintained the HTML/CSS and Javascript of the
main site and services. Mocked up designs in Photoshop and
developed the views in a Ruby on Rails environment. Ensured
that quality of front end design was maintained with W3C
HTML compliancy and clean CSS design. Have gone through
several redesigns and restructure of the online services.<br />Also
expanded skills in development and programmed features for
the NFHS Network website in Ruby on Rails. Experienced with
working with Amazon AWS.
</p>
<ul class="list-inline bg-info">
<li>Ruby on Rails</li>
<li>RubyMine</li>
<li>Photoshop</li>
<li>SVG</li>
<li>SASS</li>
<li>Stripe</li>
<li>Github</li>
<li>Amazon AWS</li>
</ul>
</div>
</div>
</div>
<!-- job -->
<div class="job col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-8 col-xs-12">
<h4 class="position pull-left pull-left">
Web Development - <span class="company">Freelance</span>
</h4>
</div>
<div class="col-md-4 col-xs-12">
<h6 class="date pull-right">January 2009 - Current</h6>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Freelance work for clients needing small business websites
to expand and greater expose their business online.
Consulted with clients over their needs and coordinated with
them on the development process of their website. Designed
templates in Photoshop and converted into themes for
Wordpress. Set up Wordpress on hosting services and
installed various plugins to fit the client's needs. Ensured
W3C validation in the development and helped out with SEO
for their website.
</p>
<ul class="list-inline bg-info">
<li>Wordpress</li>
<li>SEO</li>
<li>Photoshop</li>
<li>HTML/CSS & JQuery</li>
<li>PHP</li>
<li>Github</li>
</ul>
</div>
</div>
</div>
<!-- job -->
<div class="job col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-8 col-xs-12">
<h4 class="position pull-left">
Web Developer Volunteer -
<span class="company">Hiring for Hope</span>
</h4>
</div>
<div class="col-md-4 col-xs-12">
<h6 class="date pull-right">September 2009 - Current</h6>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Maintained front-end HTML/CSS code and designed graphics for
email templates, banners, and buttons. Volunteered web
development and graphic design for the organization.
Developed Flash assets for the website to provide dynamic
content. Connected forms to a database as well as sending
out formatted emails.
</p>
<ul class="list-inline bg-info">
<li>Wordpress</li>
<li>Photoshop</li>
<li>HTML/CSS & JQuery</li>
<li>Flash</li>
<li>Microsft Access</li>
</ul>
</div>
</div>
</div>
<!-- job -->
<div class="job col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-8 col-xs-12">
<h4 class="position pull-left">
Web Designer - <span class="company">Allconnect</span>
</h4>
</div>
<div class="col-md-4 col-xs-12">
<h6 class="date pull-right">March 2011 - August 2011</h6>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Designed landing pages with HTML/CSS and Javascript. Used
Photoshop to mockup sample designs for improving user
interface of the service's checkout process. Presented
concept designs for new services to implement.
</p>
<ul class="list-inline bg-info">
<li>Photoshop</li>
<li>HTML/CSS & JQuery</li>
<li>Mockups</li>
<li>SVN</li>
<li>PHP</li>
</ul>
</div>
</div>
</div>
<!-- job -->
<div class="job col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-8 col-xs-12">
<h4 class="position pull-left">
SEO Intern - <span class="company">AMS Vans</span>
</h4>
</div>
<div class="col-md-4 col-xs-12">
<h6 class="date pull-right">January 2010 - May 2010</h6>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Intern at AMS Vans learning Search Engine Optimization.
Consists of improving existing websites, article writing,
and seo development.
</p>
<ul class="list-inline bg-info">
<li>SEO</li>
<li>HTML/CSS & JQuery</li>
<li>Photoshop</li>
</ul>
</div>
</div>
</div>
<!-- job -->
</div>
<div class="row skills-body">
<div class="col-md-10 col-md-offset-1">
<br />
<div class="row">
<div class="col-md-6 col-xs-12">
<h4><strong>Technologies</strong></h4>
<ul>
<li>AngularJS/Angular 2+</li>
<li>React</li>
<li>VueJS</li>
<li>BackboneJS</li>
<li>Ruby On Rails</li>
<li>NodeJS</li>
<li>Express</li>
<li>MongoDB</li>
<li>HTML</li>
<li>CSS</li>
<li>SASS/LESS</li>
<li>Javascript</li>
<li>Wordpress</li>
<li>Java</li>
<li>PHP</li>
<li>MySQL</li>
<li>ASP.NET</li>
</ul>
</div>
<div class="col-md-6 col-xs-12">
<h4><strong>Tools</strong></h4>
<ul>
<li>VS Code</li>
<li>Balsamiq</li>
<li>Github</li>
<li>Sublime Text Editor</li>
<li>Eclipse IDE</li>
<li>Visual Studio</li>
<li>Axure</li>
<li>RubyMine/Webstorm</li>
<li>Adobe Photoshop</li>
<li>Adobe Illustrator</li>
<li>Adobe InDesign</li>
<li>Adobe DreamWeaver</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- body -->
<div class="row footer">
<div class="col-md-10 col-md-offset-1">
<blockquote>
<p>
Rule of thumb: if you think something is clever and sophisticated
beware-it is probably self-indulgence.
</p>
<footer>
Donald A. Norman,
<cite title="The Design of Everyday Things"
>The Design of Everyday Things</cite
>
</footer>
</blockquote>
</div>
</div>
<!-- footer -->
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
$('.skills-tab').click(function () {
if ($(this).hasClass('active')) {
return false;
} else {
$(this).addClass('active');
$('.experience-tab').removeClass('active');
$('.experience-body').hide();
$('.skills-body').show();
return false;
}
});
$('.experience-tab').click(function () {
if ($(this).hasClass('active')) {
return false;
} else {
$(this).addClass('active');
$('.skills-tab').removeClass('active');
$('.skills-body').hide();
$('.experience-body').show();
return false;
}
});
</script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
(i[r] =
i[r] ||
function () {
(i[r].q = i[r].q || []).push(arguments);
}),
(i[r].l = 1 * new Date());
(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m);
})(
window,
document,
'script',
'//www.google-analytics.com/analytics.js',
'ga'
);
ga('create', 'UA-56760491-1', 'auto');
ga('require', 'displayfeatures');
ga('require', 'linkid', 'linkid.js');
ga('send', 'pageview');
</script>
</body>
</html>