-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
380 lines (346 loc) · 25.3 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
<!doctype html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Kate Piette</title>
<link rel="icon" type="image/png" href="images/logo.png">
<!-- ICONS -->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- CSS Stylesheet -->
<link rel="stylesheet" type="text/css" href="vendor/simple-text-rotator/simpletextrotator.css" media="screen">
<link rel="stylesheet" type="text/css" href="vendor/materialize/css/materialize.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
</head>
<body>
<div class="wrapper">
<div class="navbar-fixed">
<nav class="white" role="navigation">
<div class="nav-wrapper container">
<ul class="right hide-on-med-and-down">
<li><a class="pg-link red-text text-lighten-2" href="#about_me">About Me</a></li>
<li><a class="pg-link red-text text-lighten-2" href="#experience">Experience</a></li>
<li><a class="pg-link red-text text-lighten-2" href="#projects">Projects</a></li>
</ul>
<div id="nav-icon" class="left">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="nav-mobile" class="z-depth-1">
<ul>
<li><a class="pg-link red-text" href="#about_me">About Me</a></li>
<li><a class="pg-link red-text" href="#experience">Experience</a></li>
<li><a class="pg-link red-text" href="#projects">Projects</a></li>
</ul>
</div>
</nav>
</div>
<section id="welcome">
<div class="parallax-1">
<div id="index-banner" class="parallax-container">
<div class="section no-pad-bot">
<div class="container">
<br><br>
<h1 class="header center">
<span id="header_hey"></span>
<span id="cursor" class="light">|</span>
</h1>
<h3 id="header_welcome" class="center text-lighten-1 light">Welcome!</h3>
</div>
</div>
<div class="low-center">
<a class="pg-link" href="#about_me"><i class="material-icons md-48 red-text">keyboard_arrow_down</i></a>
</div>
</div>
</div>
</section>
</div>
<!-- ABOUT ME -->
<div class="wrapper">
<section id="about_me">
<div id="about_me" class="container">
<div class="section">
<div class="row">
<div class="col s12 center">
<h2 class="red-text light"> A little bit about me.</h2>
<h3 class="header red-text col s12 light"> I'm a { <b><span class="rotate">developer, programmer, thinker, builder, designer, pioneer</span></b> }</h3>
</div>
</div>
<div class="row no-pad-bot">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center red-text"><i class="material-icons">camera</i></h2>
<h5 class="center">Photography & Travel</h5>
<p class="light"> I love adventures and I have a passion for photography and exploration. I enjoy change and the challenge of venturing beyond my comfort zone. I find it exhilarating to experience new things, learn new cultures, and have the opportunity to document it through photography.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center red-text"><i class="material-icons">whatshot</i></h2>
<h5 class="center">Skillset</h5>
<p class="light">I am a <b>fullstack developer</b>. My background is in web and mobile app development. Recently became a ruby fan so my stack of choice generally goes React/Redux & Ruby but I have dabbled with NodeJS a couple times.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center red-text"><i class="material-icons">palette</i></h2>
<h5 class="center">Design</h5>
<p class="light">I have a minor obsession with how things look. Some people call it perfectionism, I prefer the terms, acute attention to detail-ism. I have a love for material design and feel that UX/UI design is extremely interesting and, like the rest of the tech industry, constantly changing.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- EXPERIENCE -->
<section id="experience">
<div class="parallax-2">
<div class="parallax-container valign-wrapper">
<div class="section">
<div class="container center">
<div class="row">
<h2 class="header white-text light center">What I've been up to.</h2>
</div>
</div>
</div>
</div>
<div class="container">
<section id="cd-timeline" class="cd-container">
<div class="cd-timeline-block" "cd-block-left">
<div class="cd-timeline-img cd-picture">
<img src="images/timeline-work.png" alt="Work">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<img src="images/fullstack-labs.png" alt="Fullstack Labs">
<p><b>Junior Fullstack Developer</b></p>
<p class="light"><img class="timeline-icon" src="images/timeline-map.png" alt="Place">Arlington, VA</p>
<p class="light"><img class="timeline-icon" src="images/timeline-date.png" alt="Calendar">October 2017 - Present</p>
<p class="light"><b>Knowledge Acquired:</b> E2E testing with NightwatchJS, Spec testing with Jest & Enzyme and FeathersJS, a JS library built on NodeJS</p>
<p class="light">In October 2017, Fullstack extended an offer to stay with them and take on a full time position as a Jr. Fullstack Dev. Since working for them, I have mainly focused on building a continuing education web app . </p>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block" "cd-block-left">
<div class="cd-timeline-img cd-picture">
<img src="images/timeline-work.png" alt="Work">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<img src="images/fullstack-labs.png" alt="Fullstack Labs">
<p><b>Software Developer Intern</b></p>
<p class="light"><img class="timeline-icon" src="images/timeline-map.png" alt="Place">Arlington, VA</p>
<p class="light"><img class="timeline-icon" src="images/timeline-date.png" alt="Calendar">July 2017 - October 2017</p>
<p class="light"><b>Knowledge Acquired:</b> React/Redux flow, Ruby</p>
<p class="light">My internship with Fullstack Labs was an amazing experience. Fullstack Labs is a software consulting company that specializes in web and mobile app development. The amount of knowledge I gained within those three months of my internship was like drinking water from a fire hydrant. I was able to work on multiple projects with international team members for clients that were from all over the globe. Halfway through I was given the opportunity to fill the role of lead developer for a react/ruby web app for the City of Sacramento. Through this project, I got a taste of project management, how to properly interact with client, and I was able to witness a project from its humble beginnings to being handed off to the client.</p>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block" "cd-block-left">
<div class="cd-timeline-img cd-picture">
<img src="images/timeline-school.png" alt="School">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<img src="images/messiah.png" alt="Messiah College">
<p><b>B.S. in Computer & Information Science</b></p>
<p class="light"><img class="timeline-icon" src="images/timeline-map.png" alt="Place">Mechanicsburg, PA</p>
<p class="light"><img class="timeline-icon" src="images/timeline-date.png" alt="Calendar"> Graduated: May 2017</p>
<p class="light"> My past four years of frisbee-throwing, Jesus-loving, endless coding as a computer science student at Messiah College have been wonderful and full of personal growth. Through the dedication of my phenonminal professors I was pushed, changed, and challenged mentally, emotionally, intellectually, and spiritually. Messiah has given me what I love, fueled my desire for learning and innovative technology, and surrounded me with brilliant, incredible people who have invested in my growth and success.</p>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-movie">
<img src="images/timeline-nest.png" alt="Nest">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<img src="images/nest.png" alt="Nest Labs">
<p><b>Software Engineer Intern</b></p>
<p class="light"><img class="timeline-icon" src="images/timeline-map.png" alt="Place">Palo Alto, CA</p>
<p class="light"><img class="timeline-icon" src="images/timeline-date.png" alt="Calendar">May 2016 - August 2106</p>
<p class="light"><b>Knowledge Acquired:</b> Go, REST API Development, Android Development, test-driven development</p>
<p class="light">Working with Nest was my first exposure to joys of the Valley. Working on the <a href="https://workswith.nest.com/products" target="_blank">Works with Nest store site</a> and the <a href="https://developers.nest.com/" target="_blank">Nest Developers site</a> gave me incredible experience with website and API development. During these months I worked on improving different integration sample code for the Nest API, I took part in designing the product collections feature, I had the previledge of being a mentor and representative of Nest for the 2016 Spring MLH Hackathon Finale. I gained valuable insight and real world experience about what it is like to work in the industry.</p>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-picture">
<img src="images/timeline-work.png" alt="Work">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<img src="images/mizuho.png" alt="Mizuho">
<p><b>Information Technition Intern</b></p>
<p class="light"><img class="timeline-icon" src="images/timeline-map.png" alt="Place">London, UK</p>
<p class="light"><img class="timeline-icon" src="images/timeline-date.png" alt="Calendar">January 2016 - April 2016</p>
<p class="light"><b>Knowledge Acquired:</b> Active Directory, Powershell, .NET, System Center Configuration Manager, Excel Macro Development</p>
<p class="light">In the Spring of 2016, I studied abroad in London. Along with my classes during this semester, I had an internship with Mizuho, a Japanese Fiancial Corporation, in their Information Technology Department. While learning about the proper way to make tea and immersing myself in another culture, I spent my time there developing macros for Microsoft Excel and writing .NET scripts to interact with Microsoft's Active Directory. Beyond gaining exposure to the development side of Microsoft products, I just had the joy of living in a different country and experiencing the utmost importance of a biscuit tin and what it does for team morale.</p>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
</section> <!-- cd-timeline -->
</div>
</div>
</section>
<!-- PROJECTS -->
<div class="wrapper">
<section id="projects">
<div class="container">
<div class="section">
<div class="row">
<h2 class="red-text light header center">Some of my projects.</h2>
</div>
</div>
<!-- Modal Trigger -->
<div class="projects">
<div class="section">
<div class="row">
<div id="modal1-img" class="item col s12 m6 l4">
<div class="figure">
<a class="waves-effect waves-light" href="#modal1"><img class="img-responsive" src="images/img_symprm/thumbnail.png" alt=""></a>
</div>
</div>
<div id="modal2-img" class="item col s12 m6 l4">
<div class="figure">
<a class="waves-effect waves-light" href="#modal2"><img class="img-responsive" src="images/img_northstar/thumbnail.png" alt=""></a>
</div>
</div>
<div id="modal3-img" class="item col s12 m6 l4">
<div class="figure">
<a class="waves-effect waves-light" href="#modal3"><img class="img-responsive" src="images/img_absent/thumbnail.png" alt=""></a>
</div>
</div>
<div id="modal4-img" class="item col s12 m6 l4">
<div class="figure">
<a class="waves-effect waves-light" href="#modal4"><img class="img-responsive" src="images/img_faithconnect/home.png"alt="Faithconnect"></a>
</div>
</div>
<div id="modal5-img" class="item col s12 m6 l4">
<div class="figure">
<a class="waves-effect waves-light" href="#modal5"><img class="img-responsive" src="images/img_connect-four/thumbnail.png"alt="myForte"></a>
</div>
</div>
<div id="modal6-img" class="item col s12 m6 l4">
<div class="figure">
<a class="waves-effect waves-light" href="#modal6"><img class="img-responsive" src="images/img_myforte/thumbnail.png" alt="Connect Four"></a>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Content -->
<div id= "modal1" class="modal">
<div class="modal-content">
<img src="images/img_symprm/logo.png">
<p><b>TL; DR</b> SymPRM is the internal software Messiah College uses to manage the projects and presentations of their annual school symposiums.</p>
<p>I worked on a SCRUM-driven team to build an admin portal for this project. I added necessary functionality for project management and event scheduling. I mostly worked with JavaScript and PHP but also wrote MySQL database commands to access information needed. Presented this project at the Messiah College 2017 School of Science, Engineering, & Health Symposium. (We were presenting a project about the symposium at the symposium, so it was a little like Symposium Inception)</p>
<img class="materialboxed modal-img" data-caption="The project overview page." src="images/img_symprm/project-example.png">
<img class="materialboxed modal-img" data-caption="The projects needed to be unlocked to be edited." src="images/img_symprm/editing.png">
<img class="materialboxed modal-img" data-caption="The homepage for the admin portal" src="images/img_symprm/portal.png">
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat">Close</a>
</div>
</div>
<div id="modal2" class="modal">
<div class="modal-content">
<img src="images/img_northstar/logo.png">
<p><b>TL; DR</b> Northstar: A Mobile App for Refugee Service Discovery. This app is a browser based mobile app with the purpose of providing refugees with easier access to services available to them in their community.</p>
<p>The need for this product came from the Lancaster County Refugee Coalition. I designed and built the front-end UX this app. Our team used firebase and wrote the frontend with React. Presented this project at the Messiah College 2017 School of Science, Engineering, & Health Symposium.</p>
<img class="materialboxed modal-img" data-caption="The form focused on the date of birth input." src="images/img_northstar/cal.png">
<img class="materialboxed modal-img" data-caption="The specific services returned to the user." src="images/img_northstar/services.png">
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat">Close</a>
</div>
</div>
<div id="modal3" class="modal">
<div class="modal-content">
<img src="images/img_absent/absentA's.png" alt="Absent A's">
<p><b>TL; DR</b> Absent A's is a web application that assists students in studying for tests and quizzes using IBM's Watson.</p>
<p>I helped develop an app that uploads an audio file and utilizes IBM Watson’s APIs (speech to text and alchemy) to translate the speech in the file to text and then analyze the text and generate quiz questions based on the content of the file. The app was intended for students who might be absent from class but still needed to know the material covered. We submitted Absent A's for HackPSU 2016 and were a winner for the IBM challenge.</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat">Close</a>
</div>
</div>
<div id="modal4" class="modal">
<div class="modal-content">
<img src="images/img_faithconnect/faithconnect.png" alt="faithconnect">
<p><b>TL; DR</b> FaithConnect is a suite of web apps that is a solution to the communication gap between faithbased oragnizations and non-profits.</p>
<p>I co-led student volunteer team of 10 to develop this software. It's functionality includes providing event, volunteer, group, and partner management, and allows for report generation and donations. I helped oversee the successful launch of FaithConnect in April 2016 for Messiah College's Impact Venture Challenge Competition. My partner and I pitched our product to a panel of esteemed businessmen and women. Currently we are rebranding to the name Henosis and developing a mobile app and an API.</p>
<p>Check out the site here: <a href="http://faithconnect.info" target="_blank">faithconnect.info</a></p>
<img class="materialboxed modal-img" width="128" data-caption="The current faithconnect homepage." src="images/img_faithconnect/home.png">
<img class="materialboxed modal-img" width="128" data-caption="A mockup of an events page." src="images/img_faithconnect/mockup.png">
<img class="materialboxed modal-img" width="128" data-caption="The Impact Venture Challenge Logo." src="images/img_faithconnect/ivc.png">
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat">Close</a>
</div>
</div>
<div id="modal5" class="modal">
<div class="modal-content">
<img src="images/img_connect-four/connect-four.png" alt="Connect Four">
<p><b>TL; DR</b> Two player Connect Four Game with custom GUI and awesome end-game logic.</p>
<p>Designed and developed a graphical 2-player version of the Connect Four Game using Java. Colored circular glyphs and graphical interfaces made up the game board. Engineered an algorithm to determine the winner.</p>
<p>Check out the Github repo <a href="https://github.com/superkat64/ConnectFour" target="_blank">here</a>.</p>
<img class="materialboxed modal-img" width="128" data-caption="The opening load screen." src="images/img_connect-four/load.png">
<img class="materialboxed modal-img" width="128" data-caption="The win frame when one of the players wins." src="images/img_connect-four/winframe.png">
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat">Close</a>
</div>
</div>
<div id="modal6" class="modal">
<div class="modal-content">
<img src="images/img_myforte/myForte.png" alt="myForte">
<p><b>TL; DR</b> myForte is a social media website based around music preferences. It's backend is written in PHP with a MySQL database.</p>
<p>I led a SCRUM-driven team of 3 to develop this final project a server-side web development class. The database stores all user information, including personal playlists, and our personal storage of song information. Users can create an account, access their profile, change their settings and create different playlists. There was a bit of a learning curve learning PHP and dynamic programming but we made it work. For the front-end, we ultilized a template engine called Smarty to display our pages. Unfortunately, the live database has been erased for other classes so the site is inaccessible.</p>
<p>Check out the site here: <a href="http://camelot.cs.messiah.edu/~myforte/home.php" target="_blank">myforte.com</a></p>
<img class="materialboxed modal-img" width="128" data-caption="An original mockup of the user profile page." src="images/img_myforte/mockup.png">
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat">Close</a>
</div>
</div>
</div>
</section>
</div>
<!-- CONNECT -->
<!-- <section id="connect">
<div id="connect" class="block red lighten-1">
<div class="container connect-container center">
<div class="row">
<h3 class="white-text">Let's build something together!</h3>
<h5 class="white-text">I'd love to hear from you.</h5>
</div>
<div class="row connect-table">
<table class="centered">
<tbody>
<tr>
<td><a href="https://github.com/superkat64" target="_blank"><img src="images/connect/github.png" alt="Github"></a></td>
<td><a href="mailto:[email protected]" target="_blank"><img src="images/connect/gmail.png" alt="Email"></a></td>
<td><a href="https://www.linkedin.com/in/katherinempiette" target="_blank"><img src="images/connect/linkedin.png" alt="LinkedIn"></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
</div> -->
<footer class="page-footer">
<div class="footer-copyright">
<div class="container">
© 2016 All rights reserved.
</div>
</div>
</footer>
</div>
<!-- Javascript imports -->
<script type="text/javascript" src="js/scrollto-custom.js"></script>
<script type="text/javascript" src="vendor/simple-text-rotator/jquery.simple-text-rotator.js"></script>
<script type="text/javascript" src="vendor/vertical-timeline/js/modernizr.js"></script>
<script type="text/javascript" src="vendor/jquery-scrollto/js/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="vendor/materialize/js/materialize.js"></script>
<script type="text/javascript" src="js/type.js"></script>
<script type="text/javascript" src="js/scrollto-custom.js"></script>
<script type="text/javascript" src="js/timeline-main.js"></script>
<script type="text/javascript" src="js/init.js"></script>
</body>
</html>