-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
626 lines (576 loc) · 36.2 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
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
<!DOCTYPE html>
<html lang="en">
<head>
<title>Peter Bryant | Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Peter Bryant, Web Developer">
<meta name="author" content="Peter Bryant">
<!-- Bootstrap v4.3.1 CSS via CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Plugins required on all pages NOTE: Additional non-required plugins are loaded ondemand as of AppStrap 2.5 -->
<!-- Theme style -->
<link href="assets/css/theme-style.min.css" rel="stylesheet">
<!-- Purple colour scheme -->
<link href="assets/css/colour-purple.min.css" rel="stylesheet">
<!--Your custom colour override-->
<link href="assets/css/colour-blue-dark.min.css" id="colour-scheme" rel="stylesheet">
<!-- Your custom override -->
<link href="assets/css/custom-style.css" rel="stylesheet">
<!-- Optional: ICON SETS -->
<!-- Iconset: Font Awesome 5.0.13 via CDN -->
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
<!-- Iconset: flag icons - http://lipis.github.io/flag-icon-css/ -->
<link href="assets/plugins/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
<!-- Iconset: ionicons - http://ionicons.com/ -->
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Iconset: Linearicons - https://linearicons.com/free -->
<link href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css" rel="stylesheet">
<!-- Iconset: Lineawesome - https://icons8.com/articles/line-awesome -->
<link href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome.min.css" rel="stylesheet">
<!-- Le fav and touch icons - @todo: fill with your icons or remove, try https://realfavicongenerator.net -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicons/favicon-16x16.png">
<link rel="manifest" href="assets/favicons/manifest.json">
<link rel="shortcut icon" href="assets/favicons/favicon.ico">
<meta name="msapplication-config" content="assets/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- Google fonts -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Rambla:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Calligraffitti' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,400,700' rel='stylesheet' type='text/css'>
<!--Plugin: Retina.js (high def image replacement) - @see: http://retinajs.com/-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/retina.js/1.3.0/retina.min.js"></script>
</head>
<!-- ======== @Region: body ======== -->
<body class="page page-onepager header-ontop page-index-freelancer-portfolio navbar-layout-default">
<!-- @plugin: page loading indicator, delete to remove loader -->
<div class="page-loader" data-toggle="page-loader"></div>
<a id="#top" href="#content" class="sr-only">Skip to content</a>
<!-- ======== @Region: #header ======== -->
<div id="header" class="w-100 pos-fixed pos-t scroll-state-hidden" data-scroll="scroll-state" data-scroll-amount="500" data-scroll-setting='{"effectIn":"slideInDown", "effectOut":"slideOutUp", "effectDuration":"0.3", "breakpoint":"992"}'>
<!--Header & Branding region-->
<div class="header header-dark py-2 bg-dark bg-op-9 border-bottom-0">
<!-- all direct children of the .header-inner element will be vertically aligned with each other you can override all the behaviours using the flexbox utilities (flexbox.html) All elements with .header-brand & .header-block-flex wrappers will automatically be aligned inline & vertically using flexbox, this can be overridden using the flexbox utilities (flexbox.htm) Use .header-block to stack elements within on small screen & "float" on larger screens use .order-first or/and .order-last classes to make an element show first or last within .header-inner or .headr-block elements -->
<div class="header-inner container">
<!--branding/logo -->
<div class="header-brand">
<a class="header-brand-text" href="index.html" title="Home">
<h2 class="h3 font-weight-normal text-letter-spacing-sm text-font-base text-white">
Peter <span class="font-weight-bold">Bryant</span>
</h2>
</a>
<div class="header-divider d-none d-lg-block"></div>
<div class="header-slogan d-none d-lg-block">Web Developer</div>
</div>
<!-- other header content -->
<div class="header-block order-lg-12">
<!-- mobile collapse menu button - data-toggle="collapse" = default BS menu - data-toggle="off-canvas" = Off-cavnas Menu - data-toggle="overlay" = Overlay Menu -->
<a href="#top" class="btn btn-link btn-icon text-white d-lg-none" data-toggle="collapse" data-target=".navbar-main" data-settings='{"cloneTarget":true, "targetClassExtras": "navbar-offcanvas"}'> <i class="fa fa-bars"></i> </a>
</div>
<div class="navbar navbar-expand-md navbar-expand-collapse navbar-static-top">
<!--everything within this div is collapsed on mobile-->
<div class="navbar-main collapse ">
<!--main navigation-->
<ul class="nav navbar-nav navbar-dark navbar-nav-onepager">
<li class="nav-item"></li>
<li class="nav-item">
<a href="#top" data-toggle="scroll-link" data-scroll-link-nooffset=true class="nav-link link-effect-underline"> <i class="fa fa-home nav-link-icon"></i> <span class="d-none">Home</span> </a>
</li>
<li class="nav-item"> <a href="#services" data-toggle="scroll-link" data-scroll-link-nooffset=true class="nav-link link-effect-underline"> Services </a> </li>
<li class="nav-item"> <a href="#about" data-toggle="scroll-link" data-scroll-link-nooffset=true class="nav-link link-effect-underline"> About </a> </li>
<li class="nav-item"> <a href="#portfolio" data-toggle="scroll-link" data-scroll-link-nooffset=true class="nav-link link-effect-underline"> Portfolio </a> </li>
<li class="nav-item"> <a href="#experience" data-toggle="scroll-link" data-scroll-link-nooffset=true class="nav-link link-effect-underline"> Experience </a> </li>
<li class="nav-item"> <a href="#contact" data-toggle="scroll-link" data-scroll-link-nooffset=true class="nav-link link-effect-underline"> Contact </a> </li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</div>
</div>
</div>
<!-- ======== @Region: #highlighted ======== -->
<div id="highlighted" class="border-bottom-0 bg-dark">
<!-- Image Banner: Use the the data-bg-img functionality to create a simple image banner Use spacer classes to make the banner larger with padding, allows for easy responsive changes too see: elements-ctas.htm To make the banner full height/screen add the attributes: data-toggle="full-height" data-offset="#header" -->
<div class="bg-white overlay overlay-op-8 text-center text-lg-left pt-8 pb-7 flex-valign" data-bg-img="assets/img/peterbryant/me-background-min.jpg" data-css='{"background-position": "center top","background-attachment": "fixed"}' data-toggle="full-height" data-breakpoint="992"
data-scroll="scrollax" data-scrollax-y-ratio="off">
<div class="container">
<h4 class="text-white font-weight-normal text-uppercase mb-0" data-animate="fadeIn" data-animate-delay="0.2">
Peter Bryant
</h4>
<h2 class="display-3 text-white mb-0 text-letter-spacing-xs d-inline-block">
<span data-animate="fadeIn" data-animate-delay="0.4">Senior</span> <span class="font-weight-bold" data-typed='["Web Developer", "Software Engineer", "Code Monkey"]' data-typed-settings='{"delay":1000, "speed":200,"breakLines":false, "deleteDelay":1500}'></span>
</h2>
<a href="#services" data-toggle="scroll-link" class="btn btn-primary btn-icon btn-rounded ml-3 mt-4-neg d-none d-lg-inline-block" data-animate="fadeIn" data-animate-delay="0.8"><i class="fa fa-chevron-down"></i></a>
</div>
</div>
</div>
<!-- ======== @Region: #content ======== -->
<div id="content" class="p-0 clearfix">
<!-- Services -->
<div id="services" class="bg-white">
<div class="container py-6" data-animate="fadeIn">
<h2 class="text-dark display-4 font-weight-bold mb-3 text-letter-spacing-xs">
Tech Stacks
</h2>
<div class="row text-center">
<div class="col-lg-4 py-2">
<i class="fab fa-microsoft icon-3x icon-sq bg-primary text-white rounded-circle bg-shadow" data-animate="fadeIn" data-animate-delay="0.1" data-hover="bounceOut" data-hover-out="bounceIn"></i>
<h4 class="mt-2">
C# ASP.NET MVC
</h4>
<p class="mb-2">Dynamic database drive sites using the Microsoft ASP.NET MVC Framework, backed by SQL Server</p>
<!-- >a href="#" class="text-sm font-weight-bold">Read More <i class="ion-ios-arrow-forward pl-1"></i></a-->
</div>
<div class="col-lg-4 py-2">
<i class="ion-social-python icon-3x icon-sq bg-primary text-white rounded-circle bg-shadow" data-animate="fadeIn" data-animate-delay="0.2" data-hover="bounceOut" data-hover-out="bounceIn"></i>
<h4 class="mt-2">
Python Django
</h4>
<p class="mb-2">RESTful API's using the Django REST Framework, backed by Postgresql</p>
<!-- >a href="#" class="text-sm font-weight-bold">Read More <i class="ion-ios-arrow-forward pl-1"></i></a-->
</div>
<div class="col-lg-4 py-2">
<i class="ion-social-javascript icon-3x icon-sq bg-primary text-white rounded-circle bg-shadow" data-animate="fadeIn" data-animate-delay="0.3" data-hover="bounceOut" data-hover-out="bounceIn"></i>
<h4 class="mt-2">
Javascript
</h4>
<p class="mb-2">Responsive frontend client development using a mixture of vanilla javascript, jQuery and most recently the beautiful Vue.js framework</p>
<!-- >a href="#" class="text-sm font-weight-bold">Read More <i class="ion-ios-arrow-forward pl-1"></i></a-->
</div>
</div>
</div>
</div>
<!-- About -->
<div id="about" class="bg-primary text-white">
<div class="container py-6" data-animate="fadeIn">
<h2 class="text-white display-4 font-weight-bold mb-3 text-letter-spacing-xs">
About
</h2>
<div class="row">
<div class="col-lg-4 order-lg-2">
<img src="assets/img/homes/peter.jpg" alt="Me" class="img-fluid rounded-circle op-7 border-white border-w-5 w-30 w-lg-80 mt-lg-4-neg d-none d-lg-block" />
</div>
<div class="col-lg-8">
<p class="lead">An experienced full stack web developer with more than 10 years commercial experience across a variety of technology stacks and business sectors</p>
<p>Always looking to stay up to date and learn new technologies to improve the impact of projects.</p>
<p>Naturally disposed towards leadership; whether it be through technical mentoring or inspiring and encouraging best practice amongst the team. I like to get hands on with the code, ensuring my time is balanced between programming and leadership.</p>
</div>
</div>
<hr class="border-white op-3 mt-6 mb-0" />
<div id="skills" class="pt-6" data-animate="fadeIn">
<h2 class="text-white display-4 font-weight-bold mb-3 text-letter-spacing-xs">
Skills
</h2>
<div class="row">
<div class="col-lg-6">
<div class="mb-4">
<h5 class="d-flex mt-0 op-8">
<i class="fab fa-fw fa-windows mr-2"></i> C# (90%)
</h5>
<div class="progress">
<div class="progress-bar py-1 w-90 bg-primary-darkend" data-toggle="progress-bar-animated-progress" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-4">
<h5 class="d-flex mt-0 op-8">
<i class="fab fa-fw fa-python mr-2"></i> Python (80%)
</h5>
<div class="progress">
<div class="progress-bar py-1 w-80 bg-primary-darkend" data-toggle="progress-bar-animated-progress" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-4">
<h5 class="d-flex mt-0 op-8">
<i class="fab fa-fw fa-php mr-2"></i> PHP (50%)
</h5>
<div class="progress">
<div class="progress-bar py-1 w-50 bg-primary-darkend" data-toggle="progress-bar-animated-progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="mb-4">
<h5 class="d-flex mt-0 op-8">
<i class="fab fa-fw fa-vuejs mr-2"></i> Javascript (65%)
</h5>
<div class="progress">
<div class="progress-bar py-1 w-65 bg-primary-darkend" data-toggle="progress-bar-animated-progress" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-4">
<h5 class="d-flex mt-0 op-8">
<i class="fab fa-fw fa-html5 mr-2"></i> HTML5 (60%)
</h5>
<div class="progress">
<div class="progress-bar py-1 w-60 bg-primary-darkend" data-toggle="progress-bar-animated-progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-4">
<h5 class="d-flex mt-0 op-8">
<i class="fab fa-fw fa-css3 mr-2"></i> CSS3 (60%)
</h5>
<div class="progress">
<div class="progress-bar py-1 w-60 bg-primary-darkend" data-toggle="progress-bar-animated-progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="hr-primary-darkend my-0" />
<!-- work -->
<div id="portfolio" class="py-6 bg-light">
<div class="container">
<h2 class="text-dark display-4 font-weight-bold text-letter-spacing-xs" data-animate="fadeIn">
Portfolio
</h2>
<div id="portfolio-filters" class="cbp-l-filters-alignCenter text-left mb-3">
<div data-filter="*" class="cbp-filter-item-active cbp-filter-item text-uppercase">
All
<div class="cbp-filter-counter"></div>
</div>
/
<div data-filter=".csharp" class="cbp-filter-item text-uppercase">
C#
<div class="cbp-filter-counter"></div>
</div>
/
<div data-filter=".python" class="cbp-filter-item text-uppercase">
Python
<div class="cbp-filter-counter"></div>
</div>
/
<div data-filter=".php" class="cbp-filter-item text-uppercase">
PHP
<div class="cbp-filter-counter"></div>
</div>
</div>
</div>
<div class="container">
<div class="mt-4" data-toggle="cbp" data-settings='{ "layoutMode":"grid", "filters":"#portfolio-filters", "gapHorizontal": 30, "gapVertical": 30, "animationType":"3dflip", "displayType":"sequentially", "mediaQueries": [ {
"width": "800",
"cols": "3" }, {
"width": "480",
"cols": "2" }, {
"width": 0,
"cols": 1 } ] }'>
<!--Project item 1-->
<div class="col-lg-4 cbp-item python">
<div class="card bg-shadow mb-0">
<a href="assets/includes/freelancer-portfolio-project-compliancetracker.html" class="project overlay-hover cbp-caption cbp-singlePageInline">
<img src="assets/img/projects/coming-soon.jpg" alt="Compliance Tracker" class="img-fluid" />
<span class="overlay-hover-content overlay-primary overlay-op-9"> <i class="ion-android-add icon-4x text-white"></i> </span>
</a>
</div>
</div>
<!--Project item 2-->
<div class="col-lg-4 cbp-item csharp">
<div class="card bg-shadow mb-0">
<a href="assets/includes/freelancer-portfolio-project-tradedservices.html" class="project overlay-hover cbp-caption cbp-singlePageInline">
<img src="assets/img/projects/coming-soon.jpg" alt="Traded Services Online" class="img-fluid" />
<span class="overlay-hover-content overlay-primary overlay-op-9"> <i class="ion-android-add icon-4x text-white"></i> </span>
</a>
</div>
</div>
<!--Project item 3-->
<div class="col-lg-4 cbp-item php">
<div class="card bg-shadow mb-0">
<a href="assets/includes/freelancer-portfolio-project-bluezonefishing.html" class="project overlay-hover cbp-caption cbp-singlePageInline">
<img src="assets/img/projects/coming-soon.jpg" alt="Bluezone Fishing" class="img-fluid" />
<span class="overlay-hover-content overlay-primary overlay-op-9"> <i class="ion-android-add icon-4x text-white"></i> </span>
</a>
</div>
</div>
<!--Project item 4-->
<div class="col-lg-4 cbp-item python">
<div class="card bg-shadow mb-0">
<a href="assets/includes/freelancer-portfolio-project-mykey.html" class="project overlay-hover cbp-caption cbp-singlePageInline">
<img src="assets/img/projects/coming-soon.jpg" alt="My Key" class="img-fluid" />
<span class="overlay-hover-content overlay-primary overlay-op-9"> <i class="ion-android-add icon-4x text-white"></i> </span>
</a>
</div>
</div>
<!--Project item 5-->
<div class="col-lg-4 cbp-item csharp">
<div class="card bg-shadow mb-0">
<a href="assets/includes/freelancer-portfolio-project-elearning.html" class="project overlay-hover cbp-caption cbp-singlePageInline">
<img src="assets/img/projects/coming-soon.jpg" alt="Elearning" class="img-fluid" />
<span class="overlay-hover-content overlay-primary overlay-op-9"> <i class="ion-android-add icon-4x text-white"></i> </span>
</a>
</div>
</div>
<!--Project item 7-->
<div class="col-lg-4 cbp-item python">
<div class="card bg-shadow mb-0">
<a href="assets/includes/freelancer-portfolio-project-getuntangled.html" class="project overlay-hover cbp-caption cbp-singlePageInline">
<img src="assets/img/projects/coming-soon.jpg" alt="Get Untangled" class="img-fluid" />
<span class="overlay-hover-content overlay-primary overlay-op-9"> <i class="ion-android-add icon-4x text-white"></i> </span>
</a>
</div>
</div>
<!--Project item 8-->
<div class="col-lg-4 cbp-item csharp">
<div class="card bg-shadow mb-0">
<a href="assets/includes/freelancer-portfolio-project-efsa.html" class="project overlay-hover cbp-caption cbp-singlePageInline">
<img src="assets/img/projects/coming-soon.jpg" alt="EFSA" class="img-fluid" />
<span class="overlay-hover-content overlay-primary overlay-op-9"> <i class="ion-android-add icon-4x text-white"></i> </span>
</a>
</div>
</div>
</div>
</div>
</div>
<hr class="hr-muted my-0" />
<!-- experience -->
<div id="experience" class="py-6" data-animate="fadeIn">
<div class="container">
<h2 class="text-dark display-4 font-weight-bold mb-3 text-letter-spacing-xs">
Experience
</h2>
<div class="owl-thumbs carousel-timeline-nav" data-toggle="owl-carousel" data-owl-carousel-thumbs="#experience-timeline" data-owl-carousel-settings='{"items":4, "nav":false, "dots":false, "merge":true, "mergeFit":true}'> <a class="owl-thumb text-sm text-uppercase" data-merge="2">Nov 2017</a> <a class="owl-thumb text-sm text-uppercase" data-merge="2">Apr 2011</a> <a class="owl-thumb text-sm text-uppercase">Oct 2010</a> <a class="owl-thumb text-sm text-uppercase">Dec 2007</a> <a class="owl-thumb text-sm text-uppercase" data-merge="2">Apr 2005</a> </div>
<div class="owl-carousel owl-overflow owl-highlight-active owl-equalheight" id="experience-timeline" data-toggle="owl-carousel" data-owl-carousel-settings='{"items":1,"nav":true, "dots":false}'>
<div class="p-4 p-lg-5 bg-light border-primary border-w-3 border-top-0 border-left-0 border-right-0 mb-2 w-100">
<div class="row">
<div class="col-md-2 d-none d-md-block">
<img src="assets/img/peterbryant/thekeysupport-logo.png" alt="The Key Support Services" class="img-fluid" />
</div>
<div class="col-md-10">
<h5 class="text-uppercase my-0 text-primary">
Nov 2017 - Present
</h5>
<h2 class="text-dark text-letter-spacing-sm font-weight-bold my-0">
Python Django Developer
</span>
</h2>
<p class="text-muted mb-2 text-sm">
@ <a href="https://thekeysupport.com/" class="font-weight-bold text-muted">TheKeySupportServices</a>
<p>I am currently the technical lead for the scrum team focused on the management of the companies’ user authentication and entitlement system. This system is critical to all services provided by The Key; it implements a RESTful API along with consuming third party API’s to provide seamless integration with our Salesforce and Zuora back office systems. We handle in the region of 100k distinct active users per year. </p>
</div>
</div>
</div>
<div class="p-4 p-lg-5 bg-light border-primary border-w-3 border-top-0 border-left-0 border-right-0 mb-2 w-100">
<div class="row">
<div class="col-md-2 d-none d-md-block">
<img src="assets/img/peterbryant/webbased-logo.png" alt="WebBased Ltd" class="img-fluid" />
</div>
<div class="col-md-10">
<h5 class="text-uppercase my-0 text-primary">
Apr 2011 - Nov 2017
</h5>
<h2 class="text-dark text-letter-spacing-sm font-weight-bold my-0">
C# ASP.NET MVC Developer
</span>
</h2>
<p class="text-muted mb-2 text-sm">
@ <a href="https://www.webbased.co.uk/" class="font-weight-bold text-muted">WebBased Ltd</a>
<p>WebBased was my first position at a dedicated software house. I very quickly progressed to a senior position where I was able to have significant direction on the large undertaking of translating the companies primary product from a Classic ASP system into a C# MVC solution. This development required significant investment and led to the merging of WebBased with The Key, a content company that services the same sector.</p>
</div>
</div>
</div>
<div class="p-4 p-lg-5 bg-light border-primary border-w-3 border-top-0 border-left-0 border-right-0 mb-2 w-100">
<div class="row">
<div class="col-md-2 d-none d-md-block">
<img src="assets/img/peterbryant/peter-bryant-freelance-web-developer.png" alt="PinPixel" class="img-fluid" />
</div>
<div class="col-md-10">
<h5 class="text-uppercase my-0 text-primary">
Oct 2010 - Apr 2011
</h5>
<h2 class="text-dark text-letter-spacing-sm font-weight-bold my-0">
Freelance PHP Developer
</span>
</h2>
<p class="text-muted mb-2 text-sm">
<p>After securing developments for several local companies I decided to challenge myself by giving up the comfort of a salary and going freelance. This was a short period as whilst the initial contracts gave some income the lack of a licensed based model meant post launch income dropped significantly.</p>
</div>
</div>
</div>
<div class="p-4 p-lg-5 bg-light border-primary border-w-3 border-top-0 border-left-0 border-right-0 mb-2 w-100">
<div class="row">
<div class="col-md-2 d-none d-md-block">
<img src="assets/img/peterbryant/martinluck-logo.png" alt="Martin Luck Ltd" class="img-fluid" />
</div>
<div class="col-md-10">
<h5 class="text-uppercase my-0 text-primary">
Dec 2007 - Oct 2010
</h5>
<h2 class="text-dark text-letter-spacing-sm font-weight-bold my-0">
PHP Developer
</span>
</h2>
<p class="text-muted mb-2 text-sm">
@ <a href="http://www.martinluck.co.uk/" class="font-weight-bold text-muted">Martin Luck Ltd</a>
<p>My primary role was to maintain the companies’ online presence, ranging from updating an existing online ordering site, which was used by over 300 unique users every day, through to building a bespoke Intranet for employee and document management, and also to develop a new e-commerce solution for B2C sales. The e-commerce site utilised a SOAP client to connect to a remote suppliers database and lookup stock values in real time. I also developed an add-on for the site to automatically push all order directly into the internal ordering system via a single XML file.</p>
</div>
</div>
</div>
<div class="p-4 p-lg-5 bg-light border-primary border-w-3 border-top-0 border-left-0 border-right-0 mb-2 w-100">
<div class="row">
<div class="col-md-2 d-none d-md-block">
<img src="assets/img/peterbryant/tigltd-logo.png" alt="The Insurance Group Ltd" class="img-fluid" />
</div>
<div class="col-md-10">
<h5 class="text-uppercase my-0 text-primary">
Apr 2005 - Dec 2007
</h5>
<h2 class="text-dark text-letter-spacing-sm font-weight-bold my-0">
IT Administrator
</span>
</h2>
<p class="text-muted mb-2 text-sm">
@ <a href="http://www.tigltd.com/" class="font-weight-bold text-muted">The Insurance Group Ltd</a>
<p>My primary role was to provide desktop support to 30 users across three sites and maintain relationships with third party ICT providers. I was tasked to develop the company’s new website in-house; this was my first ever website and was a very big learning curve due to the different programming languages involved (XHTML, CSS, JavaScript, PHP & MySQL) along with the decision to not use a WSYIWYG editor. On completion I realised that this is where I saw my future.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Client Feedback -->
<div id="clients">
<div class="overlay overlay-primary py-6 text-center" data-bg-img="assets/img/backgrounds/faces.jpg" data-animate="fadeIn">
<div class="container">
<h2 class="display-4 font-weight-bold text-letter-spacing-xs text-white">
Anonymous 360 Feedback!
</h2>
</div>
</div>
<div class="container pt-5 pb-7">
<div class="row grid-inner-borders-dotted">
<!--Feedback 1-->
<div class="col-lg-4 d-lg-flex" data-animate="fadeIn" data-animate-delay="0.1">
<blockquote class="d-lg-flex blockquote blockquote-bubble mb-0">
<p class="blockquote-bubble-content">Pete is an outstanding developer, he has joined the DtS team and gotten to grips with Python Django to the point it feels like he has always worked with these technologies.</p>
<footer class="blockquote-footer">
Colleague at
<cite title="The Key Support Services">The Key Support Services</cite>
</footer>
</blockquote>
</div>
<!--Feedback 2-->
<div class="col-lg-4 d-lg-flex" data-animate="fadeIn" data-animate-delay="0.2">
<blockquote class="d-lg-flex blockquote blockquote-bubble mb-0">
<p class="blockquote-bubble-content">Pete's practical calming approach really helps other developers and testers come to an agreement when we are at a cross roads.</p>
<footer class="blockquote-footer">
Colleague at
<cite title="The Key Support Services">The Key Support Services</cite>
</footer>
</blockquote>
</div>
<!--Feedback 3-->
<div class="col-lg-4 d-lg-flex" data-animate="fadeIn" data-animate-delay="0.3">
<blockquote class="d-lg-flex blockquote blockquote-bubble mb-0">
<p class="blockquote-bubble-content">Pete's can do attitude is second to none. His methodical approach to troubleshooting and resolving issues means he truly turns everything into an opportunity.</p>
<footer class="blockquote-footer">
Colleague at
<cite title="The Key Support Services">The Key Support Services</cite>
</footer>
</blockquote>
</div>
<!--Feedback 4-->
<div class="col-lg-4 d-lg-flex" data-animate="fadeIn" data-animate-delay="0.4">
<blockquote class="d-lg-flex blockquote blockquote-bubble mb-0">
<p class="blockquote-bubble-content">Working with Pete is an absolute pleasure, he is incredibly thoughtful and patient, always willing to help and expand other peoples skills.</p>
<footer class="blockquote-footer">
Colleague at
<cite title="The Key Support Services">The Key Support Services</cite>
</footer>
</blockquote>
</div>
<!--Feedback 5-->
<div class="col-lg-4 d-lg-flex" data-animate="fadeIn" data-animate-delay="0.5">
<blockquote class="d-lg-flex blockquote blockquote-bubble mb-0">
<p class="blockquote-bubble-content">Pete has been instrumental in getting Zuora and Salesforce integrations working, his patience and no fuss approach to solving issues has meant that we have been able to move forward even when things were really challenging.</p>
<footer class="blockquote-footer">
Colleague at
<cite title="The Key Support Services">The Key Support Services</cite>
</footer>
</blockquote>
</div>
<!--Feedback 6-->
<div class="col-lg-4 d-lg-flex" data-animate="fadeIn" data-animate-delay="0.6">
<blockquote class="d-lg-flex blockquote blockquote-bubble mb-0">
<p class="blockquote-bubble-content">Pete has dealt admirably with some difficult situations within the team. He offered great support as a colleague and a friend and showed the upmost professionalism at all times.</p>
<footer class="blockquote-footer">
Colleague at
<cite title="The Key Support Services">The Key Support Services</cite>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
<a href="https://github.com/peteyb" class="btn btn-primary btn-block btn-lg py-4 font-weight-bold text-uppercase">Code With Me</a>
<hr class="hr-muted my-0" />
<!-- Contact-->
<div id="contact" class="overlay overlay-white overlay-op-8 py-6" data-animate="fadeIn" data-bg-img="assets/img/backgrounds/map.jpg" data-css='{"background-position": "center center","background-attachment": "fixed"}'>
<div class="container">
<h2 class="text-dark display-4 font-weight-bold text-letter-spacing-xs">
Say Hello
</h2>
<div class="row" data-animate="fadeIn" data-animate-delay="0.1">
<div class="col-md-12">
<h4 class="mb-1 font-weight-bold">
Peter Bryant, BSc (Honours) Computing at Open University
</h4>
<p class="mb-1">
<abbr title="Email"><i class="fa fa-envelope pr-2"></i></abbr> [email protected]
</p>
<h5 class="font-weight-bold mt-4">
Current Availability:
</h5>
<div class="progress w-60 mt-2" data-toggle="tooltip" data-placement="top" title="5 hours / week available">
<div class="progress-bar w-10 progress-bar-sm bg-primary py-1" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="10"></div>
</div>
<p class="mt-10">
Big thanks to <a href="https://wrapbootstrap.com/theme/appstrap-multipurpose-bootstrap-4-theme-WB0C6D0H4">AppStrap</a> for the bootstrap template used in this version of my portfolio site, has saved me hours of dev time so I can focus on developing a new frontend for Get-Untangled using Vue.js
</p>
</div>
</div>
</div>
</div>
</div>
<!-- #Content -->
<!-- ======== @Region: #footer ======== -->
<footer id="footer" class="py-3">
<div class="container">
<div class="row">
<!--@todo: replace with company copyright details-->
<div class="col-md-6">
<p class="mb-0 text-sm">Copyright 2019 © Peter Bryant</p>
<ul class="list-inline footer-links mb-0 text-sm">
<li class="list-inline-item"><a href="#">Terms</a></li>
<li class="list-inline-item"><a href="#">Privacy</a></li>
</ul>
</div>
<div class="col-md-6 flex-valign">
<div class="float-md-right ml-md-auto">
<!--@todo: replace with company social media details-->
<a href="https://github.com/peteyb" target="_blank" class="btn btn-sm btn-icon btn-dark btn-rounded"><i class="fab fa-github"></i></a>
<a href="https://stackoverflow.com/users/9796336/peteyb" target="_blank" class="btn btn-sm btn-icon btn-dark btn-rounded"><i class="fab fa-stack-overflow"></i></a>
<a href="https://www.linkedin.com/in/peter-bryant-5748a9182/" target="_blank" class="btn btn-sm btn-icon btn-dark btn-rounded"><i class="fab fa-linkedin-in"></i></a>
<a href="#top" class="btn btn-sm btn-icon btn-dark btn-rounded" title="Back to top"><i class="fa fa-chevron-up"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!--jQuery 3.3.1 via CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper 1.14.6 via CDN, needed for Bootstrap Tooltips & Popovers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Bootstrap v4.3.1 JS via CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- JS plugins required on all pages NOTE: Additional non-required plugins are loaded ondemand as of AppStrap 2.5 To disable this and load plugin assets manually simple add data-plugins-manual=true to the body tag -->
<!--Custom scripts & AppStrap API integration -->
<script src="assets/js/custom-script.js"></script>
<!--AppStrap scripts mainly used to trigger libraries/plugins -->
<script src="assets/js/script.min.js"></script>
</body>
</html>