-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhome.html
More file actions
482 lines (475 loc) · 31.8 KB
/
home.html
File metadata and controls
482 lines (475 loc) · 31.8 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Janeth Betancourt | Front-End Developer and UX/UI Designer</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Englebert&family=Open+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script>
</head>
<body>
<header>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://janbe30.github.io/home.html">
<img src="images/jb-icon-2021.png" alt="Janeth Betancourt | Front-End Developer and UX/UI Designer - JB Main logo" class="main-logo"/>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarMenu" class="navbar-menu">
<!-- <div class="navbar-start">
<a href="#skills" class="navbar-item">
Skills
</a>
<a href="#portfolio" class="navbar-item">
My Work
</a>
<a href="#experience" class="navbar-item">
Experience
</a>
<a href="#about" class="navbar-item">
About
</a>
</div> -->
<div class="navbar-end">
<a href="#skills" class="navbar-item">
Skills
</a>
<a href="#portfolio" class="navbar-item">
My Work
</a>
<a href="#experience" class="navbar-item">
Experience
</a>
<a href="#about" class="navbar-item">
About
</a>
</div>
</div>
</nav>
<!-- menu -->
</header>
<main>
<section id="landing" class="section">
<div class="container">
<h1 class="title is-1">Janeth Betancourt</h1>
<h3 class="subtitle is-3">Front-end Developer and UX/UI Designer</h3>
<div class="social">
<span class="icon">
<a href="https://www.linkedin.com/in/janbe30" target="_blank">
<i aria-hidden="true" class="fab fa-linkedin" title="LinkedIn logo"></i>
</a>
</span>
<span class="icon">
<a href="https://github.com/janbe30" target="_blank">
<i aria-hidden="true" class="fab fa-github-square" title="Github logo"></i>
</a>
</span>
<span class="icon">
<a href="mailto:janbe30@gmail.com" target="_blank">
<i aria-hidden="true" class="fas fa-envelope-square" title="Email icon"></i>
</a>
</span>
</div>
<p class="jump-link"><a href="#intro">Hey there!<br/>
<i class="fas fa-chevron-down"></i></a></p>
</div>
<div class="wave-container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#FFF" fill-opacity="1" d="M0,64L40,58.7C80,53,160,43,240,64C320,85,400,139,480,160C560,181,640,171,720,154.7C800,139,880,117,960,90.7C1040,64,1120,32,1200,32C1280,32,1360,64,1400,80L1440,96L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path></svg>
</div>
</section>
<section id="intro" class="section">
<!-- <div class="wave-container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#3C1874" fill-opacity="1" d="M0,64L40,58.7C80,53,160,43,240,64C320,85,400,139,480,160C560,181,640,171,720,154.7C800,139,880,117,960,90.7C1040,64,1120,32,1200,32C1280,32,1360,64,1400,80L1440,96L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path></svg>
</div> -->
<div class="container">
<img src="images/profile-pic.jpg" alt="Janeth posing with tree in Maine" class="rounded-img">
<div class="block">
<p><strong>Hi! I'm Janeth.</strong></p>
</div>
<p>I’m a front-end web developer and UX/UI designer in Austin, Tx. <br> I enjoy crafting functional and delightful web experiences for all. </p>
</div>
</section>
<section id="skills" class="section">
<div class="container">
<h2 class="title is-2">Skills</h2>
<ul>
<li>
<div class="icon-wrapper">
<span class="iconify icon-sq" data-icon="ant-design:code-filled"></span>
</div>
<div class="skill-content">
<h4 class="title is-4">Development</h4>
<p>HTML, CSS, Javascript, jQuery, TypeScript, React, MySQL, Java, C and C++</p>
</div>
</li>
<li>
<div class="icon-wrapper">
<span class="iconify icon-sq" data-icon="ph:note-pencil-fill"></span>
</div>
<div class="skill-content">
<h4 class="title is-4">Design</h4>
<p>UI/UX Design, Wireframes & mock ups, Prototyping</p>
</div>
</li>
<li>
<div class="icon-wrapper">
<span class="iconify icon-sq" data-icon="ant-design:area-chart-outlined"></span>
</div>
<div class="skill-content">
<h4 class="title is-4">Research</h4>
<p>User Interviews, Surveys, Usability testing, A/B Testing, Analytics</p>
</div>
</li>
<li>
<div class="icon-wrapper">
<span class="iconify icon-sq" data-icon="fluent:window-dev-tools-20-filled"></span>
</div>
<div class="skill-content">
<h4 class="title is-4">Toolbox</h4>
<p>Adobe Photoshop, Illustrator, Axure, Figma, Bootstrap, SharePoint Framework, NodeJS, Gulp and Git/Github</p>
</div>
</li>
</ul>
</div>
<div class="wave-container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#FFF" fill-opacity="1" d="M0,64L40,58.7C80,53,160,43,240,64C320,85,400,139,480,160C560,181,640,171,720,154.7C800,139,880,117,960,90.7C1040,64,1120,32,1200,32C1280,32,1360,64,1400,80L1440,96L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path></svg>
</div>
</section>
<section id="portfolio" class="section">
<div class="container">
<h2 class="title is-2">My Work</h2>
<article class="columns">
<div class="column is-one-half">
<div class="card">
<header class="card-header">
<p class="card-header-title">Intake system for Onboarding</p>
</header>
<div class="card-image">
<figure class="image is-4by3">
<img src="images/thumbnails/onboarding-intake.png" alt="Equipment and Access request form screenshot" />
<figcaption>Intake system for Onboarding</figcaption>
</figure>
</div>
<div class="card-content">
<div class="content">
Intake system to manage equipment and access requests for new hires in SharePoint Online.
<br>
<button class="button is-text modal-button" data-target="onboarding-intake-modal" aria-haspopup="true">See more</button>
</div>
</div>
</div>
</div>
<div class="column is-one-half">
<div class="card">
<header class="card-header">
<p class="card-header-title">Content Editor and Review tools</p>
</header>
<div class="card-image">
<figure class="image is-4by3">
<img src="images/thumbnails/editor-review-tools.png" alt="Content Editor and Review tools" />
<figcaption>Content Editor and Review tools</figcaption>
</figure>
</div>
<div class="card-content">
<div class="content">
Interactive tools to review and build content for news articles.
<br>
<button class="button is-text modal-button" data-target="content-tools-modal" aria-haspopup="true">See more</button>
</div>
</div>
</div>
</div>
</article>
<article class="columns">
<div class="column is-one-half">
<div class="card">
<header class="card-header">
<p class="card-header-title">Interactive Onboarding Checklist</p>
</header>
<div class="card-image">
<figure class="image is-4by3">
<img src="images/thumbnails/onboarding-checklist.png" alt="Interactive Onboarding Checklist" />
<figcaption>Interactive Onboarding Checklist</figcaption>
</figure>
</div>
<div class="card-content">
<div class="content">
Interactive checklist to help new hires keep track of main tasks to complete during their first month.
<br>
<button class="button is-text modal-button" data-target="onboarding-checklist-modal" aria-haspopup="true">See more</button>
</div>
</div>
</div>
</div>
<div class="column is-one-half">
<div class="card">
<header class="card-header">
<p class="card-header-title">2018-19 Corporate Well-being Report</p>
</header>
<div class="card-image">
<figure class="image is-4by3">
<img src="images/thumbnails/2018-19-wbr-2.png" alt="2018-19 Corporate Annual Well-being Report" />
<figcaption>2018-19 Corporate Annual Well-being Report</figcaption>
</figure>
</div>
<div class="card-content">
<div class="content">
Dynamic, mobile-first web-based report showcasing the company's well-being philosophy.
<br>
<button class="button is-text modal-button" data-target="web-report-modal" aria-haspopup="true">See more</button>
</div>
</div>
</div>
</div>
</article>
</div>
<!-- <div class="wave-container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#3C1874" fill-opacity="1" d="M0,64L40,58.7C80,53,160,43,240,64C320,85,400,139,480,160C560,181,640,171,720,154.7C800,139,880,117,960,90.7C1040,64,1120,32,1200,32C1280,32,1360,64,1400,80L1440,96L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path></svg>
</div> -->
<div id="onboarding-intake-modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Intake system for Onboarding requests</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<div class="content">
<h4>Problem statement</h4>
<p>The Onboarding team needed a new way to manage equipment and access requests for new hires, as one of the company's main platforms - SharePoint - was being upgraded and the current method would no longer be compatible.</p>
<h4>Solution</h4>
<p>Intake system to manage these requests leveraging different features of the new platform. I had the opportunity to learn a couple of new technologies along the way, such as the SharePoint Framework and TypeScript, and used them to create the current system which is used by hundreds of hiring managers.</p>
<h4>Skills used</h4>
<ul>
<li>HTML5</li>
<li>Sass</li>
<li>TypeScript</li>
<li>SharePoint Framework</li>
<li>Gulp</li>
</ul>
<img src="images/internal-ea-form-screen-1.png" alt="Screenshot of the Equipment and Access form for internal associates" class="snapshot">
<img src="images/internal-ea-form-2.png" alt="Screenshot of the Equipment and Access form for internal associates" class="snapshot">
</div>
</section>
</div>
</div>
<div id="content-tools-modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Content Editor and Review tools</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<div class="content">
<h4>Problem statement</h4>
<p>The teams responsible for the daily publishing of the intranet news site needed some additional tools to review the content and create the markup for the articles quickly. </p>
<h4>Solution</h4>
<p>Two simple interactive tools to simplify the process for the teams involved. The content review tool ensures the content meets established guidelines and the content editor tool facilitates the creation of articles for both tech-savvy and non-tech savvy users alike.</p>
<h4>Skills used</h4>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
<img src="images/hi-editor-screen-1.png" alt="Screenshot of the content editor tool" class="snapshot">
<img src="images/hi-content-review-screen-1.png" alt="Screenshot of the content editor tool" class="snapshot">
</div>
</section>
</div>
</div>
<div id="onboarding-checklist-modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Interactive Onboarding Checklist</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<div class="content">
<h4>Problem statement</h4>
<p>There was a need for provide new hires additional guidance and the ability to keep track of main tasks to complete during their first month with the company.</p>
<h4>Solution</h4>
<p>Interactive checklist allows users to check tasks off as they complete them. It's responsive and very simple to use. The interactive checklist can be accessed from any internal device; if the user logs in from an external device then a static version of the checklist is displayed. </p>
<h4>Skills used</h4>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>LAMP</li>
<li>UX Research: Usability study and user interviews. Prototype testing.</li>
</ul>
<img src="images/onboarding-checklist.png" alt="Screenshot of the interactive onboarding checklist" class="snapshot">
</div>
</section>
</div>
</div>
<div id="web-report-modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">2018-19 Corporate Annual Well-being Report</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<div class="content">
<h4>Problem statement</h4>
<p>The client was seeking to reimagine the annual well-being report - a web-based, interactive report showcasing the company's well-being philoshophy through rich data and personal video stories from several employees.</p>
<h4>Solution</h4>
<p>A fresh, dynamic and mobile-first experience perfectly captured the strides made by the company delighting users along the way. The report was released publicly for the first time in seven years. </p>
<h4>Skills used</h4>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>UX Research: Usability study.</li>
</ul>
<img src="images/2018-19-wbr-screen-1.png" alt="Screenshot of the 2018-19 Well-being Report" class="snapshot">
<p><a class="button is-text" href="https://wellbeing.humana.com/2018/index.html" target="_blank">See the external version of the report</a></p>
</div>
</section>
</div>
</div>
<ul class="work-container" style="display:none;">
<li>
<h4>Intake system for Onboarding requests</h4>
<div>
<p><strong>Problem statement:</strong> The Onboarding team needed a new way to manage equipment and access requests for new hires, as one of the company's main platforms - SharePoint - was being upgraded and the current method would no longer be compatible.</p>
<p><strong>Solution:</strong> Intake system to manage these requests leveraging different features of the new platform. I had the opportunity to learn a couple of new technologies along the way, such as the SharePoint Framework and TypeScript, and used them to create the current system which is used by hundreds of hiring managers.</p>
<p><strong>Skills used:</strong></p>
<ul>
<li>HTML5</li>
<li>Sass</li>
<li>TypeScript</li>
<li>SharePoint Framework</li>
<li>Gulp</li>
</ul>
<!-- Link or image of the final product-->
</div>
</li>
<li>
<h4>Content Editor and Review tools</h4>
<div>
<p><strong>Problem statement:</strong> The teams responsible for the daily publishing of the intranet news site needed some additional tools to review the content and create the markup for the articles quickly. </p>
<p><strong>Solution:</strong> Two simple interactive tools to simplify the process for the teams involved. The content review tool ensures the content meets established guidelines and the content editor tool facilitates the creation of articles for both tech-savvy and non-tech savvy users alike.</p>
<p><strong>Skills used:</strong></p>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
<!-- Link or image of the final product-->
</div>
</li>
<li>
<h4>Interactive Onboarding Checklist</h4>
<div>
<p><strong>Problem statement:</strong> There was a need to provide new hires additional guidance and the ability to keep track of main tasks to complete during their first month with the company.</p>
<p><strong>Solution:</strong> Interactive checklist allows users to check tasks off as they complete them. It's responsive and very simple to use. The interactive checklist can be accessed from any internal device; if the user logs in from an external device then a static version of the checklist is displayed. </p>
<p><strong>Skills used:</strong></p>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>LAMP</li>
<li>UX Research: Usability study and user interviews. Prototype testing.</li>
</ul>
<!-- Link or image of the final product-->
</div>
</li>
<li>
<h4>2018-19 Corporate Annual Well-being Report</h4>
<div>
<p><strong>Problem statement:</strong> The client was seeking to reimagine the annual well-being report - a web-based, interactive report showcasing the company's well-being philoshophy through rich data and personal video stories from several employees.</p>
<p><strong>Solution:</strong> A fresh, dynamic and mobile-first experience perfectly captured the strides made by the company delighting users along the way. The report was released publicly for the first time in seven years. </p>
<p><strong>Skills used:</strong></p>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>UX Research: Usability study.</li>
</ul>
<p><a href="https://wellbeing.humana.com/2018/index.html">See the external version of the report</a></p>
<!-- Link or image of the final product-->
</div>
</li>
<li>
<h4>Custom internal sites (Internal only)</h4>
<div>
<p><strong>Problem statement: Welcome Center and Working Better Together</strong></p>
<p><strong>Solution:</strong></p>
<!-- Link or image of the final product-->
</div>
</li>
</ul>
</section>
<section id="experience" class="section">
<div class="container">
<h2 class="title is-2">Experience</h2>
<div class="block">
<p>I'm a Senior Software Engineer at <a href="https://humana.com">Humana</a>. I'm part of a small digital team within HR - we design, build and maintain associate-facing websites and applications with the ultimate goal of improving the associate experience. </p>
</div>
<div class="block">
<p>For more details about this position or previous work experience, please visit my <a href="https://linkedin.com/in/janbe30" target="_blank">LinkedIn</a>.</p>
</div>
</div>
<div class="wave-container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#FFF" fill-opacity="1" d="M0,64L40,58.7C80,53,160,43,240,64C320,85,400,139,480,160C560,181,640,171,720,154.7C800,139,880,117,960,90.7C1040,64,1120,32,1200,32C1280,32,1360,64,1400,80L1440,96L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path></svg>
</div>
</section>
<section id="about" class="section">
<div class="container">
<h2 class="title is-2">About</h2>
<div class="block">
<p>I have been in tech in one way or another for about 13 years. From desktop support to software engineer. However, my affinity for computers and technology can be traced back to my childhood years. You could say it all began in 1998 when I got my first computer - an Acer desktop with Windows 98 and a dial-up connection. Yep, I’ve always been a computer nerd 8-)</p>
</div>
<div class="block">
<p>I’m originally from Mexico. Juarez, Chihuahua to be exact. I went to college in Las Cruces, New Mexico and moved to Louisville, KY after graduating where I landed my first “real” job. After living there for two years, my girlfriend (now wife) and I decided to move to a warmer climate and landed in Austin, Tx., where we live with our two pups, Tobey and Tilley.</p>
</div>
<div class="block">
<p>In my free time, I enjoy exploring nature, watching movies, reading and playing video games. Traveling and experiencing new cultures is also one of my favorite things - can't wait to be able to do that again freely!</p>
</div>
</div>
</section>
</main>
<footer>
<!-- icons with links
Made by me
??
-->
<div class="social">
<span class="icon">
<a href="https://www.linkedin.com/in/janbe30" target="_blank">
<i aria-hidden="true" class="fab fa-linkedin" title="LinkedIn logo"></i>
</a>
</span>
<span class="icon">
<a href="https://github.com/janbe30" target="_blank">
<i aria-hidden="true" class="fab fa-github-square" title="Github logo"></i>
</a>
</span>
<span class="icon">
<a href="mailto:janbe30@gmail.com" target="_blank">
<i aria-hidden="true" class="fas fa-envelope-square" title="Email icon"></i>
</a>
</span>
</div>
<div class="block">
<p>Made by me with <a href="https://bulma.io/" target="_blank"><img src="images/made-with-bulma--white.png" alt="Bulma logo"></a></p>
<p>© <span id="current-year"></span>
</div>
</footer>
<script src="scripts.js"></script>
</body>
</html>