-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
492 lines (479 loc) · 35.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ryan Garrett</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./Assets/Images/favicon.ico">
<link rel="stylesheet" type="text/css" href="./Assets/Styles/styles.css" />
<script src="./Assets/JS/header-link-scroll.js"></script>
<script src="./Assets/JS/stars.js"></script>
<script src="https://kit.fontawesome.com/e47ca0610a.js" crossorigin="anonymous"></script>
</head>
<body>
<a href="#main-content" class="visually-hidden">Skip to main content</a>
<!-- Intro card -->
<div id="intro-card" class="intro-card">
<div class="intro-card-image-container">
<div class="intro-card-padding">
<div class="image-container">
<img class="profile-image" src="./Assets/Images/me.jpg" alt="Ryan Garrett">
</div>
</div>
</div>
<div class="intro-card-content-container">
<div class="intro-card-padding">
<div class="content-container">
<p class="intro-card-text">
Hi, I’m Ryan Garrett and welcome to my Portfolio! I’m a frontend developer with 10 years of experience that also finds it fun to get involved with UX/UI design. Here you can
find more <a href="#about-me" class="text-link">about me</a>, information about my past work in <a href="#case-studies" class="text-link">case studies</a>, the different
<a href="#skills" class="text-link">skills</a> I have, and my <a href="#contact" class="text-link">contact information</a>.
</p>
<div class="intro-card-scroll-container">
<p class="intro-card-scroll-text">Scroll down to explore</p>
<span style="font-size: 2em; color: #fff;">
<i class="fa-solid fa-arrow-down fa-bounce" style=" --fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1; "></i>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Navigation -->
<header class="header" role="banner">
<div class="header-container">
<span id="menu-button" class="header-menu-icon"><i class="fa-solid fa-bars"></i></span>
<span class="header-link-group">
<a href="#about-me" class="header-link">About me</a>
<a href="#case-studies" class="header-link">Case studies</a>
</span>
<span class="header-link-group-icon">
<a href="#intro-card" class="header-logo-link">
<img src="./Assets/Images/Logo.png" class="header-logo" alt="Link to about me section">
</a>
</span>
<span class="header-link-group">
<a href="#skills" class="header-link">Skills</a>
<a id="last-nav" href="#contact" class="header-link">Contact</a>
</span>
</div>
<div id="drop-down" class="header-menu-dropdown">
<ul class="header-menu-dropdown-list">
<li class="header-menu-dropdown-item"><a href="#about-me" class="header-link">About me</a></li>
<li class="header-menu-dropdown-item"><a href="#case-studies" class="header-link">Case studies</a></li>
<li class="header-menu-dropdown-item"><a href="#skills" class="header-link">Skills</a></li>
<li class="header-menu-dropdown-item"><a id="last-nav" href="#contact" class="header-link">Contact</a></li>
</ul>
</div>
</header>
<!-- Main content -->
<div id="main-content" class="main-content">
<section class="section" id="about-me">
<h1 class="visually-hidden">About me</h1>
<h2 class="heading--medium">Background</h2>
<p class="text">
Born and raised in Newcastle! From a very young age at school I pick up a lot of interest in IT as a subject and instantly knew that's what I wanted to focus on learning on.
Many years later after learning the basics of IT at school, I joined the <span class="text-bold">Accenture Apprenticeship program</span> to pursue a life in IT and to expand
my skills. This was a great opportunity for me to learn on the Job while getting the chance to obtain more qualifications such as an <span class="text-bold">NVQ</span> & a
degree at Sunderland University, where I achieved a <span class="text-bold">1st Class in BSc Digital Technology Solution’s & Software Engineering</span>. Some other key
highlights of my working careers is getting the chance to become scrum master certified and winning <span class="text-bold">Accenture Newcastle Apprentice of the Year 2016</span>.
</p>
<h2 class="heading--medium">Experience</h2>
<dl class="summary-list">
<div class="summary-row">
<dt class="summary-heading">
Accenture (8 Years)
</dt>
<dd class="summary-description">
I joined Accenture through their Apprenticeship program where I gained a large amount of project methodology and client interaction experience, from working in both
local and distributed agile & waterfall teams. Working at Accenture I have gained a vast amount of problem-solving experience, which includes analysing and
deconstructing complex requirements to create and deliver solutions. Utilising relevant techniques and methodologies to support and execute the design, build, and
maintenance of applications and assets. I've mainly been a frontend developer over these years working with languages such as HTML, CSS, Javascript, SCSS and Vue.js.
However during my 8 years here I have experienced working different areas such as a functional tester, scrum master and an Atlassian admin.
</dd>
</div>
<div class="summary-row">
<dt class="summary-heading">
University (3 Years)
</dt>
<dd class="summary-description">
As part of the Accenture Apprenticeship program I went to Sunderland University during my time at Accenture to study Digital Technology Solution’s & Software Engineering.
This course allowed me to get experience and develop my software skills such as web development, cyber security, networking and software design. For example some of my
main assignments had me working with HTML, CSS, Javascript, PHP, Java & Adobe XD to build digital solutions for the given assignment briefs. My final dissertation was an
investigation into how web mobile impacts people with disabilities and how to build a fully accessible responsive website. My initial finds were when responsive websites
were done incorrectly, this had a negative experience when people with accessibility needs used it. This lead to me building a responsive online comic/book store where
people could trade their comics and books with other users. This was built in Vue.js/SCSS and met the Web Content Accessibility Guidelines (WCAG) 2.1 requirements.
To help show my findings, I user tested it with people with accessibility needs where it received positive feedback. Through hard work I finished university with a
first Class (1st).
</dd>
</div>
<div class="summary-row">
<dt class="summary-heading">
A-Levels (2 Years)
</dt>
<dd class="summary-description">
This was the start of my path to a career in IT. It was here where I took IT as a subject at A-Levels which showed me how to build wireframes off requirements,
develop websites in Dreamweaver, use the command line, build PC's and load software onto them. It also taught me the basics of how to use excel, write emails and
documents.
</dd>
</div>
</dl>
</section>
<section class="section" id="case-studies">
<h1 class="heading--large">Case Studies</h1>
<!-- Case study navigation -->
<ul class="numbered-list">
<li>
<a class="text-link" href="#case-studies">Upgraded multiple services & fixed their accessibility issues</a>
</li>
<li>
<a class="text-link" href="#case-study-2">Helped develop service prototypes</a>
</li>
<li>
<a class="text-link" href="#case-study-3">Lead frontend developer on a new HMRC catalog service</a>
</li>
<li>
<a class="text-link" href="#case-study-4">Frontend developer one of the main Eat Out to Help Out services</a>
</li>
</ul>
<!-- Case Study 1 -->
<h2 class="heading--medium" id="case-study-1">Upgraded multiple services & fixed their accessibility issues</h2>
<p class="text">
I was brought onto a HMRC team that had their complete service accessibility tested and failed to meet accessibility standards. This was a huge concern for the project
leads as it was a legal requirement for the services to meet the WCAG 2.1 requirement. The service was made up of around 8 repositories that all used the old frontend
libraries. The frontend code itself was written by backend developers with no experience in frontend development. They had used the old frontend library as their only
guidance which meant the frontend code wasn’t up to standard and it hadn’t been coded with accessibility in mind.
</p>
<p class="text">
I analysed the Accessibility Audit, identifying the issues that were part of the reason the service had failed accessibility testing. Making a case to the Design Lead
and Project Manager, I suggested the service needed to be upgraded to the latest Government Digital Service (GDS) Design System components in order to be more
accessible. I highlighted the following areas for improvement; the older frontend components either had bad contrasting colours, used incorrect HTML e.g using the
wrong heading tags, tables with no captions or inputs without labels. Including small things such as components using tables when they could be detailed lists or
summary lists.
</p>
<p class="text">
Before I got started, I made a case to the design lead and project manager that the services needed to be upgraded to the latest Government Digital Service (GDS)
Design System components in order to be more accessible. I suggested this as the older frontend components either had bad contrasting colours, used incorrect HTML
e.g using the wrong heading tags, tables with no captions or inputs without labels. And even small things such as components using tables when they could have been
detailed lists or summary lists. All these issues were part of the reason the service failed its accessibility test.
</p>
<p class="text">
Initially, I received push back from the design team since the upgrade meant visual changes. I emphasised how the newer components had been designed with accessibility
in mind and unlike the older components which made it harder for screen readers to communicate what was presented on the screen or could have made components harder to
view for people with sight issues. I arranged sessions to teach them how the assisted technology works, drawing attention to how switching to the new frontend library
would benefit any disabled users, in turn improving the user experience. Through this I gained their approval and going forward they would be more accessibility aware
when designing.
</p>
<p class="text">
I was tasked with upgrading all the repositories and a complete rebuild using the new frontend library components. While doing this I would need to assess any
accessibility failures in the code that would need addressing before the services went for a retest. One of the challenges I faced was multiple developers working in
these repositories which meant communication was key with the other developers about what was being worked on. To achieve good communications I shared my plans for
repository upgrades in sprint planning sessions and made everyone aware what screens I would be working on. When there was priority for other developers to be working
in the same repository where the upgrades took place, I kept in constant communication with them over Slack regarding when work was being pushed to the main branch. If
I failed to do this then it could lead to many conflicts due to the amount of changes I was making, which could have led to bugs that would need fixing costing more
development time.
</p>
<p class="text">
I started off by breaking the repositories into phases to make it easier for code reviews, more feasible to communicate what sections were being worked on and to make
it manageable for our tester to test the upgrades.
</p>
<p class="text">
In each phase, I upgraded the project to use the new frontend libraries, re-wrote the code to use the new components, cleaned the frontend code and ensured each page
met the WCAG 2.1 requirements. During this process I kept the communication flowing with the lead designer as there were slight differences in visuals between the old
frontend library and the new. The purpose of this was to allow me to quickly fix any visual differences they were unhappy with. Otherwise these visual issues would have
had to be fixed later down the line meaning they would have had to be retested, deployed and released. It was also important I worked with the Lead Designer as there
were cases where the old components were creating a bad user experience and worked alongside them to improve them, using the newer GDS Design System components. Once
each phase was complete, I arranged meetings with the lead designer, product manager and tester to demo the new upgraded screens with the purpose of gathering feedback.
Once the screens were signed off, the phases were sent to the tester where I made sure I was available for any questions they had.
</p>
<p class="text">
To ensure smooth delivery, I planned the next phases upgrading in advance. Ensuring I communicated this information using our dev channels and in sprint planning so we
could plan the work with the least amount of conflict.
</p>
<img src="./Assets/Images/developer-hub.png" class="developer-hub-image" alt="Developer Hub home screen">
<p class="text">
The services repositories are now being re-tested with the Accessibility Team. The smaller repositories were sent first and have successfully passed the accessibility
tests which means we are hitting the legal requirement due to the work I have done. Alongside this the service has been deployed where it’s being used by 14,000
registered users and the new-ish look is receiving positive feedback.
</p>
<fieldset class="user-feedback-box">
<legend class="user-feedback-legend">User Feedback - Backend developer</legend>
<p>
"Over the last five months Ryan has been fantastic. He has been the driving force of our frontend. Not only he has proved to collaborate well
within a pair programming environment but has also proven to countless times to deliver at pace on his own. Ryan shows drive and commitment daily by continuously
striving to add value to the project, he understands the vision and culture of HMRC integrating well with the environment and atmosphere. Personally, I am more
geared to backend work therefore my frontend skills tend to be more limited. Working with Ryan has increased my skills within the frontend domain, he has shown
me how to perform changes, upgrades and improvements as well as taking the time to explain why certain technical aspects required. Thus widening my knowledge and
making me a better developer. Without failure he takes initiative to drive tickets and tests the waters in the scala language. I can without a doubt say he is
a fantastic listener and very sharp. Daily we pair together and come across hordes of scala code. Every day I explain new concepts to him and the reasoning to
various in-depth scala code, I'm quite jealous he understands it faster than I did when I started off. Absolute pleasure to have on the team. To improve,
from where I am standing, is to keep the same high standard daily as its very difficult to stay at the top it’s been reached."
</p>
</fieldset>
<hr id="case-study-2" class="section-break--large" />
<!-- Case Study 2 -->
<h2 class="heading--medium">Helped develop service prototypes</h2>
<p class="text">
Since we were moving the services from the old frontend libraries to the newer frontend, I noticed all the UI prototypes were using the old frontend components and not
the new ones. I raised this issue as in the upgraded frontend there are slight visual differences with the components compared to the old ones. For example, there
was a page in the prototype which used an old component, a on/off toggle whereas that component didn’t exist in the new GDS component library. This could have caused
issues when user testing, it wouldn’t have provided accurate feedback for our newer upgraded service. It could also lead to confusion when demoing the prototype to
the developers on how the design team wanted pages to be presented. As the developers would be working with components that may not exist or look vastly different.
</p>
<p class="text">
After raising this issue, I was instructed to replicate the old prototypes in a new repository with the latest GDS Design System components. This all had to be
complete before the next round of user testing as the design team wanted to use the new screens to get more accurate feedback. I also had the additional task of
up-skilling a HMRC apprentice in frontend e.g HTML, CSS, Javascript (JS) and accessibility.
</p>
<div class="side-by-side">
<div class="side-by-side-image">
<img src="./Assets/Images/wave-screenshot.png" class="wave-image" alt="Results of a WAVE accessibility test, showing no errors">
</div>
<div class="side-by-side-text">
<p class="text">
With deadlines in mind, I delegated the work out between me and the apprentice. We started off pair programming so that I could teach them how to write correct
HTML, CSS & JS that met coding standards. Once they picked up suitable knowledge, we split off to work on our own screens so that we were working efficiently to
meet the deadline. On some of the screens that were assigned to me, there were a couple of complicated components to recreate such as search bars with filters or
tables with pagination. To build these I had to combine a mixture of the new GDS Design System components while keeping it fully accessible. When I wasn’t working
on my own screens I set up regular code reviews and demos to give constant feedback to the apprentice that helped them learn and grow in the frontend world. This
allowed them to pick up more difficult tasks that also helped the workload on me. Since the prototypes could be a source for the backend developers to copy frontend
code from, I wanted to make sure the prototype met accessibility WCAG 2.1 too. To do this I also set up meetings with the apprentice/Lead designer and taught them
how to use tools like WAVE to test their code in the browser.
</p>
</div>
</div>
<p class="text">
Through teamwork,we met the user testing deadlines and produced a high standard prototype that was demoed at the user testing sessions. This allowed the design team to
get more detailed, authentic feedback that would allow them to design and develop a service to meet the users needs.
</p>
<fieldset class="user-feedback-box">
<legend class="user-feedback-legend">User Feedback - Lead designer</legend>
<p>
"Ryan is proactive in helping the team in a number of ways. His work with our prototypes has ensured we’ve been able to user test with more fully
realised, functioning code. And this work has in turn assisted the developers working with the production code, helping reduce the time they need to spend to get
new functionality out to users. Ryan’s my go-to with questions about accessibility and always comes back with sound advice or a solid coded solution. His recent work
on one of our products was central to it successfully passing an accessibility audit. It makes a big difference to me and the team knowing we have Ryan to work with
us on more complex coding and functionality."
</p>
</fieldset>
<hr id="case-study-3" class="section-break--large" />
<!-- Case Study 3 -->
<h2 class="heading--medium">Lead frontend developer on a new HMRC catalog service</h2>
<p class="text">
HMRC wanted a new strategy to make finding information about API’s more accessible and easier to use for external and internal use. The current method was complicated
and difficult for developers to locate and explore the different API’s on offer. This led to an ask for a new service to be built that catalogued API’s to allow
developers to freely search through them with the help of filters and to provide detailed information on how to use them. The goal was to hopefully improve people's
user journeys and make it easier for them to find API’s. The service was to be designed and built from scratch.
</p>
<p class="text">
As the lead frontend developer on this project, My role involved working alongside the Lead Designer to develop the prototype,providing component guidance e.g.
suggesting to use a summary list instead of a table in places we needed to summarise information with pair values. I made changes based on user feedback so the API
Catalogue had features users valued ensuring the prototypes were meeting the accessibility requirements.
</p>
<p class="text">
I developed the frontend for the Catalogue providing support to the backend developers. My tasks involved copying patterns and code from the prototype and ensuring
they worked with the backend code. Making sure all the content and the design looked pixel perfect to what was presented in the prototype. I code reviewed all the
frontend work to guarantee we were hitting the accessibility legal requirement and that the code standards were being met to reduce the chances of bugs.
</p>
<p class="text">
I co-built the prototype with the Lead Designer. Dividing the screens between us, working off story boards that had been built from the business requirements. To
maintain the prototype's accessibility standards so that other developers could copy and use code from, I provided guidance to the lead designer in regular calls and
review sessions. I found these sessions helpful for my own development as they would go away to learn more about accessibility and then show me their findings through
their work. On top of this, I regularly tested mine and the Lead Designers screens using the WAVE tool to reduce the chances of accessibility issues.
</p>
<p class="text">
It was important we got the prototype complete in a timely fashion as we needed to get it out in front of users testing sessions. To help achieve this we set out to
make reusable components and CSS where we could. Meaning if there was a design change, we would only have to change it in 1 place, instead of multiple locations where
human error could cause slight differences. The benefit this brought to the prototype was there was consistency in the design. The custom components in the new service
were assigned to me so that they could be carefully built to ensure the accessibility needs were still being met. These were more difficult than copying code from the
GDS component library and getting it to work on our screens. For example one of the custom components was a filter which had to be made up of multiple GDS components
and Javascript had to be written for it to work. I had to make sure the JavaScript worked across multiple browsers and operating systems so that it didn’t just work
for a select number of people.
</p>
<p class="text">
Once the prototype was complete, I paired programmed with the backend developers to help develop some of the frontend section assigned to them, assisting hooking up
the frontend and backend code ensuring the prototype was being transitioned over into the actual service so that the designs matched the end product.
</p>
<p class="text">
The result of our efforts was we delivered and released the new service that held over 1000 API’s and it passed its scheduled accessibility review with flying colours!
The service is now 1 year into public beta which is constantly evolving through user feedback. This would not have been possible if I didn’t manage to get it to meet
the WCAG 2.1 legal requirements. The service has also received good feedback from internal and external teams, noting they found the service easier to find and locate
API information.
</p>
<fieldset class="user-feedback-box">
<legend class="user-feedback-legend">User Feedback - Product manager</legend>
<p>
“Ryan has been an integral part of the API Platform team for the last few months. He brings in extensive knowledge and valuable experience of
frontend development to support critical areas such as accessibility and new projects in development.Ryan is a dedicated frontend developer who works collaboratively
with Design and Development team to ensure the needs of our users are met. He has championed accessibility, working across teams by raising awareness and suggesting
improvements. He has excellent software skills and he works with his team to understand and solve problems. I can confidently say that Ryan has been a valuable asset
to our team and we hope we can continue working with him in the future.”
</p>
</fieldset>
<hr id="case-study-4" class="section-break--large" />
<!-- Case Study 4 -->
<h2 class="heading--medium">Frontend developer one of the main Eat Out to Help Out services</h2>
<p class="text">
At the start of the pandemic there was a scheme set up by the government to try and get people to eat out at restaurants in order to boost their revenue during the
tough financial time. This was called the Eat Out to Help Out (EOtHO) Scheme. I joined one of the main teams as a frontend developer responsible for developing the
search and results screens. At the point I joined, the designs had already been complete and development was about to begin.
</p>
<p class="text">
My role was to develop the screens that had been designed by the design team and to work alongside the backend developers, tasked to hook up the backend and frontend.
This was a fast paced project with weekly releases which meant we had to develop, test and deploy with tight deadlines while delivering high standard/accessible code.
</p>
<p class="text">
Due to the fast paced nature of the project, there were constantly new requirements. I prioritised new features based on what was most useful for users such as a
language switch for Welsh users. These decisions were made by looking at the popularity of the requests generated from user feedback and from there decisions on what
we would focus on were made in calls with the project manager or in sprint planning sessions.
</p>
<div class="side-by-side">
<div class="side-by-side-image">
<img src="./Assets/Images/eotho-webpage.png" class="eotho-image" alt="Eat Out to Help Out website on a tablet">
</div>
<div class="side-by-side-text">
<p class="text">
At the start of development I realised there weren't any mobile designs. I raised this as a high risk problem with the Project Manager and Lead Designer. EOtHO was
a public facing website where users were most likely going to be using a mobile phone to view the list of restaurants when searching for participating
establishments. The team were under pressure to meet timescales and didn’t have the capacity to produce a new set of mobile phone focused designs.. To deliver this
product,I communicated with the designers in regular calls while developing the frontend to make it fully responsive for all devices and browsers. Following their
guidance on how they wanted tables displayed on mobile and font sizes.
</p>
</div>
</div>
<p class="text">
Utilising Government Digital Service (GDS) Design System components, I developed the search and the results pages which were 2 of the main screens of the service. Once
the majority of the frontend screens had been built, I paired programmed with the backend developers to link up the frontend and backend to get the functionality
working. This proved an efficient way of working as I was able to provide form ID’s and if there were any design changes from user feedback, I could easily inform
them if form elements changed. This prevented the new changes breaking the existing functionality.
</p>
<p class="text">
I volunteered to code review other frontend sections of the service. When my tasks were complete, I took the opportunity to learn more about accessibility, advancing my
knowledge by working with the HMRC accessibility team. Listening to their guidance and methods of testing, I helped them to help spot and fix any issues we identified.
</p>
<p class="text">
The launch of Eat Out to Help Out scheme was a success and used by millions of members of the British public where it received fantastic feedback. Each day it was used by
over 100 thousand users and minimal bugs were identified which reflects how solid the frontend and backend code was developed.
</p>
</section>
<section class="section" id="skills">
<h1 class="heading--large">Skills</h1>
<div class="skills-container">
<span class="text--large skill-box">
<img src="./Assets/Images/Atlassian.png" class="skills-icon" alt="Atlassian logo">
Atlassian
</span>
<span class="text--large skill-box">
<img src="./Assets/Images/html.png" class="skills-icon" alt="HTML logo">
HTML
</span>
<span class="text--large skill-box">
<img src="./Assets/Images/css.png" class="skills-icon" alt="CSS logo">
CSS
</span>
<span class="text--large skill-box">
<img src="./Assets/Images/sass.svg" class="skills-icon" alt="SASS logo">
SASS
</span>
<span class="text--large skill-box">
<img src="./Assets/Images/js.png" class="skills-icon" alt="Javascript logo">
Javascript
</span>
<span class="text--large skill-box">
<img src="./Assets/Images/xd.svg" class="skills-icon" alt="Adobe XD logo">
Adobe XD
</span>
<span class="text--large skill-box">
<img src="./Assets/Images/vegas-pro.png" class="skills-icon" alt="Vegas Pro logo">
Vegas Pro
</span>
</div>
<br />
<dl class="summary-list">
<div class="summary-row">
<dt class="summary-heading">
Atlassian
</dt>
<dd class="summary-description">
A tool used by agile development teams to track bugs, stories, epics, and other tasks. I was once an Atlassian admin so have experience of how the set up works.
</dd>
</div>
<div class="summary-row">
<dt class="summary-heading">
HTML
</dt>
<dd class="summary-description">
Frontend language that is used to structure a web page and its content.
</dd>
</div>
<div class="summary-row">
<dt class="summary-heading">
CSS
</dt>
<dd class="summary-description">
Frontend language also known as Cascading Style Sheets (CSS) and is used to style webpages.
</dd>
</div>
<div class="summary-row">
<dt class="summary-heading">
SASS
</dt>
<dd class="summary-description">
Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. It enables you to use things like variables, nested rules,
inline imports and more
</dd>
</div>
<div class="summary-row">
<dt class="summary-heading">
Javascript
</dt>
<dd class="summary-description">
Frontend language used to make webpages dynamic and interactive. There are many Javascript frameworks, a popular one I like to use is Vue.js.
</dd>
</div>
<div class="summary-row">
<dt class="summary-heading">
Adobe XD
</dt>
<dd class="summary-description">
Adobe XD is a user experience design tool to build out web sites and mobile apps.
</dd>
</div>
<div class="summary-row">
<dt class="summary-heading">
Vegas Pro
</dt>
<dd class="summary-description">
Vegas Pro is a video editing software tool that is used to cut together, edit and render videos.
</dd>
</div>
</dl>
</section>
<section class="section" id="contact">
<h1 class="heading--large">Contact details</h1>
<p class="text--extra-large">
Have a question? Feel free to send me an email.
</p>
<div class="email-box">
<span class="icon--small">
<i class="fa-solid fa-envelope"></i>
</span>
<a href="mailto: [email protected]" class="text-link">[email protected]</a>
</div>
<p class="text--extra-large">
Or you can find me on these social media pages:
</p>
<div>
<span class="icon">
<a href="https://www.linkedin.com/in/ryan-garrett-a18a7996/" target="_blank"><i class="fa-brands fa-linkedin"></i><span>Ryans LinkedIn page (opens in new tab)</span></a>
</span>
<span class="icon">
<a href="https://www.instagram.com/rgarr96/" target="_blank"><i class="fa-brands fa-instagram"></i><span>Ryans instagram page (opens in new tab)</span></a>
</span>
</div>
</section>
</div>
<!-- Footer -->
<footer>
</footer>
</body>
</html>