-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
453 lines (433 loc) · 20 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
<!DOCTYPE html>
<!--[if IE 8 ]><html class="no-js oldie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="no-js oldie ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<!-- Create dynamic viewport. Assign basic metadata. -->
<meta charset="utf-8">
<title>Portfolio | Thomas Berey</title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.png" sizes="16x16" type="img/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Styling -->
<style>
.hover-anchor {
color: white !important;
}
.hover-anchor:hover {
color: #8cb8e2 !important;
}
</style>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/vendor.css">
<!-- Scripting -->
<script src="js/modernizr.js"></script>
<script src="js/pace.min.js"></script>
</head>
<body id="top">
<!-- header -->
<header>
<div>
<!-- menu -->
<div class="top-bar">
<a class="menu-toggle" href="#" style="background:#07002c96; margin-top:5%;"><span>Menu</span></a>
<nav id="main-nav-wrap" class="set-height-js" style="background:#0d024475;overflow:auto;max-height: 500px;min-height: 0px;">
<ul class="main-navigation" style="display:none;">
In-page Navigation:
<li class="current"><a class="smoothscroll" href="#hello" title="">Thomas Berey</a></li>
<li><a class="smoothscroll" href="#intro" title="">Introduction</a></li>
<li><a class="smoothscroll" href="#testimonials" title="">Testimonials</a></li>
<li><a class="smoothscroll" href="#gallery" title="">Gallery</a></li>
<li><a class="smoothscroll" href="#project-spotlight" title="">Project Spotlight</a></li>
<li><a class="smoothscroll" href="#contact" title="">Contact</a></li><br>
Explore Pages:
<li><a class="hover-anchor" href="Person.html">Person</a></li>
<li><a class="hover-anchor" href="Academia.html">Academic</a></li>
<li><a class="hover-anchor" href="Professional.html">Professional</a></li>
<li><a class="hover-anchor" href="Volunteer.html">Volunteer</a></li>
<li><a class="hover-anchor" href="Skilled.html">Skilled</a></li>
<li><a class="hover-anchor" target="_blank" href="game/index.html">Play</a></li>
<li><a class="hover-anchor" target="_blank" href="organiser/index.html">Organize</a></li>
</ul>
</nav>
</div>
</div>
</header>
<script>
window.addEventListener('DOMContentLoaded', () => {
var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;
if (!height || isNaN(height)) var height = 570;
document.getElementsByClassName('set-height-js')[0].style.maxHeight = `${(height-65)}px`;
});
</script>
<!-- #hello section -->
<section id="hello">
<div class="hello-overlay"></div>
<div class="hello-content">
<div class="row">
<div class="col-twelve" style="margin-top:30%;">
<h5>Hello, World.</h5><br>
<h1>Thomas Berey</h1>
<h2 style="color:#7b7b7b;">Software Developer | Front & Back-End, Professional
Experience</h2>
<p><b style="background-color: rgba(4, 4, 43, 0.87);"> <a
target="_blank"
href="mailto:tomberey1@gmail.com"
target="_top"><u>tomberey1@gmail.com</u></a> | <a
target="_blank"
href="https://www.github.com/tberey"><u>GitHub/tberey</u></a> | Liverpool,
UK </b></p>
<p class="hello-position"><span>Welcome to my portfolio</span></p><br>
<a class="button stroke" target="_blank" href="files\CV.pdf"
title="Curriculum Vitae - Tom Berey" download="Curriculum Vitae - Tom Berey">Download My
CV</a><br>
<sub> (pdf, 107.2 kB)</sub>
</div>
</div>
</div>
</section>
<!-- #intro section -->
<section id="intro" style="margin-bottom: -5%;">
<div class="row section-hello" style="margin-top:-5%;">
<div class="col-twelve">
<img src="images/profile-pic.jpg" alt="MyPortrait" style="width:125px;height:145px;border-radius:24%;">
<div class="hello-info">
<center>
<p style="color:#222222;">
Hi, my name's Tom - Welcome to my ePortfolio site!<br>
I am a full-stack Software developer, who has a driving <b>passion</b> for anything technology or
development related, coupled with <b>limitless</b> amounts of both <b>enthusiasm</b> and
<b>positivity</b>. I am constantly on the lookout for new technologies, or build upon
existing,
all in an effort to continue my boundless journey in <b>learning</b> and <b>doing what I love</b>!
Any
shortcomings in a particular language or technology, I more than make up for in my
<b>pragmatism</b>, <b>determination</b> and <b>adaptability</b>, as well as the vast amounts
of
personal time I commit to <b>learning</b> on a daily basis. <b>Loyalty</b> and
<b>commitment</b>
is something I value highly, and that, along with a <b>motivated friendly personality</b>,
is
are aspects that I consider the most important part of my own, or any, character profile, before any technical skills
or
projects.<br>
<i><b>But don't just take my word, explore my site and see everything for
yourself!</b></i>
</p>
</center>
</div>
</div>
</div><br>
<div class="row intro-content">
<div class="col-six tab-full">
<h3>Contact Information:</h3>
<ul class="info-list">
<li>
<div class="icon"><strong>
<i class="icon-user"></i>
Full Name:</strong></div>
<span>Thomas Berey</span>
</li>
<li>
<div class="icon"><strong>
<i class="icon-chat"></i>
Pronouns:</strong></div>
<span>He/Him/His</span>
</li>
<li>
<div class="icon"><strong>
<i class="icon-id"></i>
Date of Birth:</strong></div>
<span>July, 1993</span>
</li>
<li>
<div class="icon"><strong>
<i class="icon-mail"></i>
Email:</strong></div>
<span><a href="mailto:tomberey1@gmail.com" target="_top"><u>tomberey1@gmail.com</u></a></span>
</li>
<li>
<div class="icon"><strong>
<i class="icon-pin"></i>
Location:</strong></div>
<span>L3, Liverpool, UK</span>
</li>
<li>
<div class="icon"><strong>
<i class="icon-link"></i>
Social:</strong></div>
<span><a href="https://uk.linkedin.com/in/thomas-berey"
target="_blank"><u>LinkedIn</u> | </a><a href="https://www.github.com/tberey"
target="_blank"><u>Github</u></a></span>
</li>
</ul>
</div>
<div class="col-six tab-full">
<h3>Quick-View Competencies:</h3>
<ul class="skill-bars">
<li>
<div class="progress percent95"></div>
<strong>TypeScript/JavaScript (Server)</strong>
</li>
<li>
<div class="progress percent95"></div>
<strong>CSS | HTML | JS/jQuery</strong>
</li>
<li>
<div class="progress percent90"></div>
<strong>Ruby</strong>
</li>
<li>
<div class="progress percent90"></div>
<strong>SQL | PSQL | MySQL</strong>
</li>
<li>
<div class="progress percent80"></div>
<strong>Java</strong>
</li>
<li>
<div class="progress percent25"></div>
<strong>Golang</strong>
</li>
</ul>
<sup>*non-exhaustive</sup>
</div>
</div>
</section>
<!-- #testimonials section -->
<section id="testimonials" class="grey-section">
<div class="row section-hello">
<div class="col-twelve">
<i class="fa fa-star"></i>
<h2>Testimonials</h2>
</div>
</div><br>
<div class="row intro-content">
<div class="col-six tab-full">
<div class="grid-2">
<center>
<h3>Staff Award Nomination</h3>
<img src="images/myStaffAward.jpg" alt="Staff Award"
style="width:100px;height:140px;">
<p style="padding-top:5px;">Our development team, responsible for spear heading the push into
providing web-based services, was nominated for the Staff Awards 2020. Our contribution has
vastly improved the quality of Stoke City Council's web presence, cutting call centre costs
across all service areas.</p>
</center>
</div>
</div>
<div class="col-six tab-full">
<div class="grid-2">
<center>
<h3>COVID-19 Rapid Development & Response</h3>
<p>"A huge thank you to you all for all of your efforts around the business grants. This is
really
high profile locally and nationally and is a lifeline to the businesses'"<i><b> - Service
Area
Assistant Director</b></i><br><br>"Can I just echo comments in thanking you all for
such
a quick response in getting the spec done and in the development of the form"<i><b> -
Business
Manager</b></i></p>
</center>
</div>
</div>
<div class="row section-hello">
<div class="col-twelve">
<img alt="Quote Marks" src="images/quotation.png" style="width:100px;height:100px;">
<center><i>
<h3><q>It takes us to another level in customer service and a leading player in customer
service commitment.</q></h3>
</i>
<p><b>Service Area Team Manager</b></p>
</center>
</div>
</div>
</div>
<br>
</section>
<!-- #gallery section -->
<section id="gallery" style="background-color: #d1e3f0;">
<div class="overlay"></div>
<div class="row section-hello">
<div class="col-twelve">
<i class="fa fa-film"></i>
<h2>Gallery</h2>
</div>
</div>
<div class="row services-content">
<center><div class="icon" style="font-size: xx-small;"><strong><i class="fa fa-arrow-left"></i> <i class="fa fa-hand-o-down"></i> <i class="fa fa-arrow-right"></i></strong></div><br></center>
<div id="owl-slider" class="owl-carousel services-list">
<div class="service">
<div class="service-content">
<div class="grid-2" style="font-size:14px;"><a href="images/front-end-standards.png" target="_blank"><img
src="images/front-end-standards.png" alt="Project 3"
style="width:900px;height:180px;border:2px solid darkblue;"
title="Click to see full sized image."></a><h6>Client Development Standards</h6>High design standards captured, that are applied to all front-end views or client services. Showcasing the attention to detail and a style that reflects the mood of a project or client, portraying a message beyond the words and content.</div>
</div>
</div>
<div class="service">
<div class="service-content">
<div class="grid-2" style="font-size:14px;"><a href="images/dev-standards.png" target="_blank"><img
src="images/dev-standards.png" alt="Project 4" style="width:900px;height:180px;border:2px solid darkblue;"
title="Click to see full sized image."></a><h6>Clean, Clear & Robust</h6>Well written and organized code, that lends itself to readability, and adheres to conventions or standard practices. This all creates minimal friction within development teams, between PRs and branches, allowing developers to easily jump in at any point.</div>
</div>
</div>
<div class="service">
<div class="service-content">
<div class="grid-2" style="font-size:14px;"><a href="images/logging-sample.png" target="_blank"><img
src="images/logging-sample.png" alt="Project 8" style="width:900px;height:180px;border:2px solid darkblue;"
title="Click to see full sized image."></a><h6 style="font-size: 12.2px;">Self-Developed Comprehensive Logging</h6>Detailed, reliable and consistent logging, that extensively penetrates any system, application or project. A self-developed NPM package & module, that can be seamlessly incorporated into any project, (used in all personal projects). Suitable for comprehensive debugging, in both development and production.</div>
</div>
</div>
<div class="service">
<div class="service-content">
<div class="grid-2" style="font-size:14px;"><a href="images/flappy-game.png" target="_blank"><img
src="images/flappy-game.png" alt="Project 2" style="width:900px;height:180px;border:2px solid darkblue;"
title="Click to see full sized image."></a><h6>Java</h6>A lightweight and simple Flappy Bird type game, that is a gui application, using the Java swing class. Simply click, or press space bar, to start the game, and perform an in-game jump. The aim is to get as high a score as possible, while avoiding the pillars. Tests reaction speed.</div>
</div>
</div>
<div class="service">
<div class="service-content">
<div class="grid-2" style="font-size:14px;"><a href="images/chatroomAPI.png" target="_blank"><img
src="images/chatroomAPI.png" alt="Project 1" style="width:900px;height:180px;border:2px solid darkblue;"
title="Click to see full sized image."></a><h6>TypeScript</h6> A REST API browser chat app, using web sockets
to allow users to concurrently connect to a server, for real-time group conversations.
Individual user accounts needed for login and verification, supported by a database.
Users can register, login and connect to a chat room, as well as access account options like
change username/password.</div>
</div>
</div>
<div class="service">
<div class="service-content">
<div class="grid-2" style="font-size:14px;"><a href="images/proj-spotlight.png" target="_blank"><img
src="images/proj-spotlight.png" alt="Project 5" style="width:900px;height:180px;border:2px solid darkblue;"
title="Click to see full sized image."></a><h6>TypeScript</h6>A graphing data and analysis tool. This application collects data from social media sources, to extrapolate and illustrate potential stock movements or trends. Presented in a graphical format, providing options to get the data you need and view it in the best way for you. Utilizes AWS S3, for CSV exports storage/retrieval.</div>
</div>
</div>
<div class="service">
<div class="service-content">
<div class="grid-2" style="font-size:14px;"><a href="images/my-node-api.png" target="_blank"><img
src="images/my-node-api.png" alt="Project 5" style="width:900px;height:180px;border:2px solid darkblue;"
title="Click to see full sized image."></a><h6>TypeScript</h6>A REST API that allows user to perform CRUD operations upon a database
through a locally hosted server, via http requests and tcp connections. Demonstrates a
full-stack development with a fully functioning client & server, and the support of a non-relational, NoSQL, database (MongoDB).</div>
</div>
</div>
<div class="service">
<div class="service-content">
<div class="grid-2" style="font-size:14px;"><a href="images/poker-game.png" target="_blank"><img
src="images/poker-game.png" alt="Project 6" style="width:900px;height:180px;border:2px solid darkblue;"
title="Click to see full sized image."></a><h6>Java</h6>A console based Blackjack card game, that pits you against decision making logic and conditionals, represented by the Dealer. Beat the Dealer in being closer to blackjack (21 card total), by hitting or sticking.</div>
</div>
</div>
<div class="service">
<div class="service-content">
<div class="grid-2" style="font-size:14px;"><a href="images/Golang-api.png" target="_blank"><img
src="images/Golang-api.png" alt="Project 7" style="width:900px;height:180px;border:2px solid darkblue;"
title="Click to see full sized image."></a><h6>Golang</h6>REST APIs developed in the Google developed language Go. Ranging from a simple input Reverse String HTTP Server, to a Contact Lookup Server. The Contact Lookup API uses an in-memory database (no-SQL & non-relational) system, to make use of Go's robust design to be ran indefinitely, hardware permitting.</div>
</div>
</div>
<div class="service">
<div class="service-content">
<div class="grid-2" style="font-size:14px;"><a href="https://github.com/tberey?tab=repositories" target="_blank"><img
src="images/github-repos.png" alt="Project 9" style="width:900px;height:180px;border:2px solid darkblue;"
title="Go To All Repositories..."><h6>And Even More...</h6>Projects found in my Github repository.<h6 style="color:#7b7b7b">Click to see all my repositories</h6></a></div>
</div>
</div>
</div><br>
</section>
<!-- #project-spotlight section -->
<section id="project-spotlight" class="grey-section">
<div class="row intro-content">
<div class="row section-hello">
<div class="col-twelve">
<i class="fa fa-camera"></i>
<h2>Project Spotlight</h2>
</div>
</div>
<div class="col-six tab-full">
<div class="grid-2">
<center>
<h6>TypeScript + NodeJS + Electron + Express + Chartjs + MySQL DB + AWS</h6>
<a href="images/proj-spotlight.png" target="_blank"><img style="height:350px;width:420px;border:2px solid darkblue;" alt="Project Spotlight" src="images/proj-spotlight.png" title="Click to see full sized image."></a>
</center>
</div>
</div>
<div class="col-six tab-full">
<div class="grid-2">
<center><h3>'Social Stocks'</h3></center>
<p>This project, Social Stocks, is a graphing data and analysis tool. This web, or desktop (Electron), application collects data from social media sources (such as the Twitter or Reddit APIs), as well as on google search trends, to extrapolate and illustrate potential stock movements or trends, into a user-friendly graphical format. There are many options in order to get the data you need and view it in the best way for you. Utilizes AWS S3, for CSV exports storage and retrieval.</p>
<center><b><u><a href="https://github.com/tberey/social-stocks#readme"
class="button stroke" target="_blank">View Project</a></u></b></center>
</div>
</div>
</div>
<br>
</section>
<!-- #contact section -->
<section id="contact">
<div class="row section-intro" style="margin-top: -5%;">
<div class="col-twelve">
<h1>Contact</h1>
</div>
<p>
If you would like to discuss any opportunities, or ask any questions at all, please don't hesitate in
connecting through the various channels:
</p>
</div>
<div class="row contact-info">
<div class="col-four tab-full">
<a target="_blank" href="https://uk.linkedin.com/in/thomas-berey">
<div class="icon">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</div>
<h5>LinkedIn</h5>
<p>Thomas Berey</p>
</a>
</div>
<div class="col-four tab-full">
<a target="_blank" href="https://github.com/tberey">
<div class="icon">
<i class="fa fa-github" aria-hidden="true"></i>
</div>
<h5>Github</h5>
<p>tberey</p>
</a>
</div>
<div class="col-four tab-full">
<a target="_blank" href="mailto:tomberey1@gmail.com">
<div class="icon">
<i class="icon-mail" aria-hidden="true"></i>
</div>
<h5>Email</h5>
<p>tomberey1@gmail.com</p>
</a>
</div>
</div>
</section>
<!-- #footer -->
<footer>
<hr>
<div class="row section-hello">
<div class="col-twelve">
©Thomas Berey (All Personal Data, Projects & Ideas)
</div><br><br><br><p></p>
</div>
<div id="go-top">
<a class="smoothscroll" title="Back to Top" href="#top"><i class="fa fa-long-arrow-up"></i></a>
</div>
</footer>
<div id="preloader">
<div id="loader"></div>
</div>
<!-- JavaScript -->
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>