-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.php
362 lines (331 loc) · 17.8 KB
/
index.php
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Avril Henry | Portfolio</title>
<link rel="stylesheet" href="node_modules/bulma/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bulma-extensions.min.css">
<link rel="stylesheet" href="assets/css/fontawesome-free-5.9.0-web/css/all.css">
<link rel="stylesheet" href="assets/css/portfolio-style.css">
<link rel="shortcut icon" type="image/png" href="/projects/logo/hds.png">
<script rel="stylesheet" src="assets/css/fontawesome-free-5.9.0-web/js/all.js"></script>
</head>
<body>
<section class="section section-top">
<div class="columns" style="height: 100%;">
<div class="column flex-central-container">
<div class="header-text">
<h1 class="title white">Avril Henry</h1>
<p class="subtitle white">Portfolio</p>
</div>
</div>
<div class="column flex-central-container header-img">
<div class="header-img text-center">
<img src="assets/imgs/m6.png" width="100%;" alt="Photo of me">
</div>
</div>
</div>
<div class="flex-central-container">
<button class="button more-btn uppercase" id="learnMore"> Learn More <span style="padding-left: 15px;"><i class="fas fa-chevron-down"></i></span></button>
</div>
</section>
<section class="section section-details">
<!-- ABOUT ME -->
<div class="aboutme ">
<h2 class="center-text" id="aboutMe">About Me</h2>
<p>Hello, my name is Avril and I would like to welcome and thank you for taking the time to read my portfolio.
I am currently based in Perth and work at Cyberhawk as a Junipr Developer.
For the past few years I have been learning everything there is to do with being Developer.
I love to learn and enjoy a challenge. </p>
<p>In my personal life, I love to get stuck into some new crafting challenge! Whether that be macrame, cross stitch, print design, string art..
(this is a never-ending list by the way, so I will stop there!). My poor family and friends get my interesting creations as gifts! Not too many complaints so far though :)
Check out my Pinterest board <a href="#pinterestDiv" class="a-link-light-weight ">below</a> to see items I have made.</p>
<p>
I also currently manage my friends Tour company website which I built from scratch -
<a href="https://www.rustic-tours.co.uk/" target="_blank" class="a-link">Rustic Tours</a>
</p>
</div>
<div class="columns">
<!-- SKILLS -->
<div class="column skills">
<h3 class="center-text">Skills (estimates)</h3>
<h4 class="uppercase">HTML5</h4>
<progress class="progress is-orange" value="100" min="0" max="100">100%</progress>
<h4 class="uppercase">CSS</h4>
<progress class="progress is-orange" value="85" max="100">85%</progress>
<h4 class="uppercase">Javascript</h4>
<progress class="progress is-orange" value="45" max="100">45%</progress>
<h4 class="uppercase">JQuery</h4>
<progress class="progress is-orange" value="50" max="100">50%</progress>
<h4 class="uppercase">ReactJS</h4>
<progress class="progress is-orange" value="20" max="100">20%</progress>
<h4 class="uppercase">php</h4>
<progress class="progress is-orange" value="70" max="100">70%</progress>
<h4 class="uppercase">laravel</h4>
<progress class="progress is-orange" value="75" max="100">75%</progress>
<h4 class="uppercase">SQL</h4>
<progress class="progress is-orange" value="30" max="100">30%</progress>
</div>
<!-- TOOLS -->
<div class="column tools">
<h3 class="center-text">Tools</h3>
<div class="tools-grid">
<div class="top-icons">
<div class="icon-row">
<div class="icon-items"><i class="fab fa-trello fa-2x"></i></div>
<div class="icon-items"><i class="fab fa-jira fa-2x"></i></div>
<div class="icon-items"><i class="fab fa-slack fa-2x"></i></div>
<div class="icon-items"><i class="fab fa-github fa-2x"></i></div>
</div>
</div>
<div class="tools-list" style="margin-top: 30px;">
<ul class="noListStyle">
<li>Trello, Jira, Slack, Teams, GitHub</li>
<li>SQL Server, PHP Xampp, Postman, Cypress Testing</li>
<li>Brackets, eclipse, Visual Studio Code, PhpStorm</li>
<li>Cmd Line, Bitnami, PuTTY, npm, Font Awesome</li>
<li>AWS EC2 & Lightsail, Lamp stacks</li>
</ul>
</div>
<div class="bottom-icons">
<div class="icon-row">
<div class="icon-items"><i class="fas fa-terminal fa-2x"></i></div>
<div class="icon-items"><i class="fas fa-code fa-2x"></i></div>
<div class="icon-items"><i class="fab fa-npm fa-2x"></i></div>
<div class="icon-items"><i class="fab fa-font-awesome-flag fa-2x"></i></div>
</div>
</div>
</div>
</div>
</div>
<div>
<p class="center-text orange">Also learning:</p>
<p class="center-text orange">VueJS, ReactJS, NodeJS, Sass and Less</p>
</div>
</section>
<!-- GITHUB -->
<section class="section section-github">
<h3> <span><i class="fab fa-github"></i></span> My Personal GitHub Contributions</h3>
<div class="flex-central-container">
<img src="https://ghchart.rshah.org/EC9B06/avihenri" class="box" alt="Avihenri's Github chart" />
</div>
<h3><a href="https://github.com/avihenri" class="white-link">Check out my Personal GitHub here</a></h3>
<h3 style="margin-top: 50px;"><span><i class="fab fa-github"></i></span>My Work GitHub Contributions</h3>
<div class="flex-central-container">
<img src="http://ghchart.rshah.org/EC9B06/avihawk" class="box" alt="Avihawk's Github chart" />
</div>
<h3><a href="https://github.com/avihawk" class="white-link">Check out my Work GitHub here</a></h3>
</section>
<!-- TIMELINE -->
<section class="section section-timeline">
<div class="timeline is-centered">
<div class="timeline-item is-warning">
<div class="timeline-marker is-warning"></div>
<div class="timeline-content">
<p class="heading">June 2021 - Present</p>
<p>Software Developer at <a href="https://thecyberhawk.com/" target="_blank" class="a-link">Cyberhawk</a></p>
<p><small>Started as a Junior & promoted in May 2022.</small></p>
</div>
</div>
<div class="timeline-item is-warning">
<div class="timeline-marker is-warning"></div>
<div class="timeline-content">
<p class="heading">April 2019 - Present</p>
<p>Developer at <a href="https://www.rustic-tours.co.uk/" target="_blank" class="a-link">Rustic Tours</a> (volunteer position)</p>
</div>
</div>
<div class="timeline-item is-warning">
<div class="timeline-marker is-warning is-image is-32x32">
<img src="http://bulma.io/images/placeholders/32x32.png">
</div>
<div class="timeline-content">
<p class="heading">August 2019 - June 2021</p>
<p>Junior Developer at <a href="https://www.rabbies.com" target="_blank" class="a-link">Rabbie's</a> </p>
</div>
</div>
<div class="timeline-item is-warning">
<div class="timeline-marker is-warning is-image is-32x32">
<img src="https://bulma.io/images/placeholders/32x32.png">
</div>
<div class="timeline-content">
<p class="heading">August 2017 - November 2019</p>
<p> IT Support Technician at Rabbie's Tours</p>
</div>
</div>
<div class="timeline-item is-warning">
<div class="timeline-marker is-warning is-image is-32x32">
<img src="https://bulma.io/images/placeholders/32x32.png">
</div>
<div class="timeline-content">
<p class="heading">June 2017 - Present</p>
<p> HTML, CSS, Sass, JavaScript, JQuery, PHP, Laravel, Vue, React, Express, Node & SQL</p>
</div>
</div>
<div class="timeline-item is-warning">
<div class="timeline-marker is-warning is-image is-32x32">
<img src="https://bulma.io/images/placeholders/32x32.png">
</div>
<div class="timeline-content">
<p class="heading">October 2015</p>
<p>Open University: <br> BSc Computing and IT with Design <br><small>(part complete)</small></p>
</div>
</div>
</div>
<div class="linkedIn-container center-text margin-top-30">
<a href="https://www.linkedin.com/in/avril-m-henry" class="a-link" target="_blank">Check out my full employment history on my <span><i class="fab fa-linkedin"></i></span> LinkedIn</a>
</div>
</section>
<!-- Projects -->
<section class="section section-github">
<h3> <span><i class="fas fa-code"></i></span> Mini Projects <span><i class="fas fa-code"></i></span></h3>
</section>
<section class="section" style="padding-top:30px;">
<div class="columns">
<div class="column">
<a href="../projects/FilmClub" target="_blank">
<div class="card card-container-md">
<div class="card-image">
<figure class="image is-3by2">
<img src="assets/imgs/filmclub.PNG" alt="Cinema Curtains">
</figure>
</div>
<div class="card-content">
<div class="content">
<p class="project-content">
I created a static Film Club website as I am part of a Film Club group and we always had to write down our movies with our non–writing hand so we
couldn't guess each other's movies. This website allows you to enter how many people in your group and then each movie separately. Once all movies have been entered, they
are put in a random order to be watched in.
</p>
<p class="orange center-text languages">HTML | CSS | Bootstrap 4 | JQuery</p>
<p class="orange center-text languages">2020</p>
</div>
</div>
</div>
</a>
</div>
<div class="column">
<a href="../projects/Games" target="_blank">
<div class="card card-container-md">
<div class="card-image">
<figure class="image is-3by2">
<img src="assets/imgs/games2.PNG" alt="Games">
</figure>
</div>
<div class="card-content">
<div class="content">
<p class="project-content">
Due to Covid-19 and the abundance of time, I thought I would start a simple games website.
I managed some games before going back to work - Noughts & Crosses, Pairs (memory), Classic Snake.
I would also like to make the Noughts & Crosses game a one player so you can play against the application.
</p>
<p class="orange center-text languages">HTML | CSS | Bootstrap 4 | JavaScript | JQuery </p>
<p class="orange center-text languages">2020</p>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="card" style="min-height: 500px; margin-bottom: 20px;">
<div class="card-content card-container-lg">
<h2 class="orange center-text heading-bg">Tour Company Website/CMS</h2>
<p class="justify-text">
During Covid, I was able to work on a website for my friend's tour company business.
It was originally just going to be a static website however, I had some experience with PHP and Laravel
which inspired me to make it into a content management system. I also created a demo which has a brief description of what I did. You can find the demo below.
<br>
The website: <a href="https://www.rustic-tours.co.uk/" target="_blank" class="a-link">Rustic Tours</a>
</p>
<h2 class="center-text margin-top-30 orange">Main Features</h2>
<ul class="noliststyle center-text">
<li>Fully Responsive | Clear Navigation</li>
<li>Content Management | Social Media Integration</li>
<li>SEO ready with CMS | Simple, User-friendly Web Design </li>
</ul>
<p class="center-text margin-top-20"><small>(Demo has audio)</small></p>
<div class="iFrame-container margin-top-30 center-text" id="demo">
<iframe width="560" height="500" src="https://www.youtube.com/embed/wegAmsgERos" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<p class="orange center-text languages margin-top-30">HTML | CSS | Bootstrap 4 | JavaScript | JQuery | PHP | Laravel</p>
<p class="orange center-text languages">2019 – Current</p>
</div>
</div>
<div class="card" style="min-height: 500px;">
<div class="card-content card-container-lg">
<h2 class="orange center-text heading-bg">CodePen</h2>
<p>
I really like pixel pictures and thought I would try and make my own. My first was a pixel tree but then I moved onto
making pixels from themed annual days coming up. You can check out all my pens <a href="https://codepen.io/avihenri" target="_blank" class="a-link">here</a>.
</p>
<div class="codePen-wrapper">
<div class="codePen-item">
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="BamYYXN" data-user="avihenri" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/avihenri/pen/BamYYXN">
Beginner CSS Pixel Art | Tree</a> by avihenri (<a href="https://codepen.io/avihenri">@avihenri</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</div>
<div class="codePen-item">
<p class="codepen" data-height="400" data-default-tab="result" data-slug-hash="JjMmMPm" data-user="avihenri" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/avihenri/pen/JjMmMPm">
CSS Easter Pixel Art</a> by avihenri (<a href="https://codepen.io/avihenri">@avihenri</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</div>
<div class="codePen-item">
<p class="codepen" data-height="400" data-default-tab="result" data-slug-hash="NWXzNKZ" data-user="avihenri" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/avihenri/pen/NWXzNKZ">
CSS Earth Day Pixel</a> by avihenri (<a href="https://codepen.io/avihenri">@avihenri</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
</div>
</div>
</section>
<!-- Github -->
<section class="section section-github">
<h3> <span><i class="fas fa-cut"></i></span> Craft Board <span><i class="fas fa-cut"></i></span></h3>
</section>
<section class="section">
<div id="pinterestDiv">
<a data-pin-do="embedBoard" data-pin-board-width="" data-pin-scale-height="400" data-pin-scale-width="80" href="https://www.pinterest.co.uk/Avihenri/henri-creations-henri-design-studio/"></a>
</div>
</section>
<!-- FOOTER -->
<section class="section section-footer">
<div class="columns">
<div class="column flex-central-container">
<div class="footer-text">
<h1 class="title white">Contact</h1>
<a href="mailto:[email protected]" class="white"> [email protected]</a> <br>
<a href="https://www.linkedin.com/in/avril-m-henry" class="white" target="_blank" style="padding-left: 30px;"><span><i class="fab fa-linkedin"></i></span> LinkedIn</a>
</div>
</div>
<div class="column flex-central-container">
<div class="footer-text">
<a href="https://bulma.io" target="_blank">
<img src="https://bulma.io/images/made-with-bulma--white.png" alt="Made with Bulma" width="300" height="auto">
</a>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bulma-extensions.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
<script>
$(document).ready(function() {
$("#learnMore").click(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $("#aboutMe").offset().top
}, 1000);
});
});
</script>
</body>
</html>