-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
567 lines (547 loc) · 29.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles/main.css">
<script src="scripts/app.js"></script>
<title>Charlotte-Thomas</title>
<link rel="stylesheet"
href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
</head>
<body>
<div class='allContent'>
<div class='headerContent' id='home'>
<div class="contactLinks">
<div class="contactContainer">
<a class="contactLink" href="https://github.com/Charlotte-Thomas" target="_blank"><img class="contactImg"
id="contactImg1" src="images/icons8-github-200.png"></a>
<a class="contactLink" href="https://www.linkedin.com/in/charlotte-e-thomas/" target="_blank"><img
class="contactImg" id="contactImg2" src="images/icons8-linkedin-150 copy.png" /></a>
<a class="contactLink" href="mailto:charlotte.thomas64@gmail.com"><img class="contactImg" id="contactImg3"
src="images/icons8-gmail-150.png" /></a>
</div>
</div>
<header class='clockwise'>
<img class='topText' src='images/gt15.png' />
<img class='movingText bottomText' src='images/gt17.png' />
<img class='rightText' src='images/gt12.png' />
<img class='leftText' src='images/tea.png' />
<div class='anticlockwise'>
<h1 class='loaderOpp'>Charlotte Thomas</h1>
</div>
</header>
<!-- <h3>Scroll for more</h3> -->
<section id='section06' class='demo'>
<a href='#section07'><span></span></a>
</section>
</div>
<!-- </hero> -->
<main>
<section class='mainSection' id='about'>
<h1 class="sectionHeader">About Me</h1>
<div class="aboutSections">
<div class="intro show-on-scroll leftScroll">
<h2 class="aboutHeader">An Introduction</h2>
<p class="aboutInfo">After graduating from university, I had to think about which field I wanted to enter
into.
Although I really
enjoyed the logical side of my degree, I wanted to have a career in something which also incorporated
creative
and dynamic elements. As a logical thinker with a keen interest in innovation and technology, I realised
that
software engineering is a field that matches all of these criteria. The more I looked into this sector,
the
more excited I became about pursuing a job in it; I therefore decided to complete the Software Engineering
Immersive course at General Assembly in order to make this a reality.
<br /> <br />
During the course I learned the necessary skills and technologies needed to develop full-stack web
applications. This included MERN Stack development with RESTful API’s and back-end development using
Django
and Python. The course was 12 weeks long and involved lab-challenges, homework, paired programming and
four
group or solo projects.
<br /> <br />
With experience gained from my degree in Human Biology to working as a cheesemaker to studying full-stack
software development at General assembly, I am no stranger to new situations and challenges. I am always
looking forward to new chances to expand my knowledge base and skillsets. I now look forward to being able
do
this within the industry as a Junior Developer.
</p>
</div>
<div class="interests show-on-scroll rightScrollSlow">
<h2 class="aboutHeader">My Interests</h2>
<h2 class="musicHeader">Music</h2>
<p class="aboutInfo">My music taste knows no bounds, however I hold a particular interest for melodic
electronic, indie, futurebass and alternative electronic music.
I am constantly adding new music to my spotify playlists. I now create a yearly playlist which contains my favourite songs from that year - sectioning the
songs into sub-groups and attempting to make each flow into the next.
<!-- I managed to reach 81k listening-minutes on Spotify last year. -->
</p>
<h2>Gaming</h2>
<p class="aboutInfo">Gaming has been a favourite past-time of mine since I was little.
<br />
I particularly like those which require creative strategy and challenging ones such as the Dark Souls. I
also enjoy games with a co-operative element to them such as Rocket League and Stardew Valley.
</p>
<h2>Movies / Series </h2>
<p class="aboutInfo"> Another favourite past-time of mine is to watch a good movie or series.
<!-- <br /> -->
My favourites so far have been, Game of thrones, Vikings, The Witcher, Silver linings playbook, Harry
Potter and Coraline.
</p>
<p>Other interests of mine include travelling, surfing, snorkelling, reading, digital art and sudoku</p>
</div>
</div>
</section>
<section class='mainSection' id='skills'>
<h1 class="sectionHeader">Technology Stack</h1>
<div class="skills show-on-scroll fadeIn">
<div class="skillIcon show-on-scroll" id="HTML5"><img class="icon" src="images/icons8-html-5-64.png" />
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="CSS3"><img class="icon" src="images/icons8-css3-64.png" />
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="JavaScript"><img class="icon"
src="images/icons8-javascript-96.png" />
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="React"><img class="icon" src="images/icons8-react-100.png" />
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="Python"><img class="icon" src="images/icons8-python-128.png" />
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="Node.js"><img class="icon" src="images/icons8-nodejs-96.png" />
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="Express"><i class="devicon-express-original"></i>
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="Babel"><img class="icon" src="images/icons8-babel-128.png" />
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="MongoDB"><img class="icon" src="images/icons8-mongodb-96.png" />
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="Git"><img class="icon" src="images/icons8-git-96.png" />
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="GitHub"><img class="icon" src="images/icons8-github-200.png" />
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="Heroku"><img class="icon" src="images/icons8-heroku-144.png" />
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="Sass"><img class="icon" src="images/icons8-sass-avatar-144.png" />
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="PostgreSQL"><img class="icon"
src="images/icons8-postgresql-144.png" />
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="Trello"><img class="icon" src="images/icons8-trello-240.png" />
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="Visual Studio"><img class="icon"
src="images/icons8-visual-studio-2019-144.png" />
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="Webpack"><img class="icon" src="images/icons8-webpack-128.png" />
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="Material-UI"><img class="icon"
src="images/icons8-material-ui-144.png" />
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="npm"><img class="icon" src="images/icons8-npm-144.png" />
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="Mocha"><i class="devicon-mocha-plain"></i>
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="Django"><i class="devicon-django-plain"></i>
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="pytest"><img class="icon" src="images/pytest.png" />
<p class="iconText"></p>
</div>
<div class="skillIcon show-on-scroll" id="yarn"><img class="icon" src="images/yarn.png" />
<p class="iconText"></p>
</div>
</div>
</section>
<section class='mainSection' id='projects'>
<h1 class="sectionHeader">Projects</h1>
<div class="slideshow-container">
<div class="mySlides fade">
<div class='slideContent'>
<div class="projectHeader" id="projectHeader6">
<img class="headerImg6" src="images/notes.png" />
<h2 class="projectName" id="name6">Notes</h2>
<img class="headerImg6" src="images/notes.png" />
</div>
<div class="overview overview6">
<p class="projectType"> Side-project | | Solo Project</p>
<div class="stacks stack6">
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-html-5-64.png" />
<p class="iconText">HTML5</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-css3-64.png" />
<p class="iconText">CSS3</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-javascript-96.png" />
<p class="iconText">JavaScript</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-react-100.png" />
<p class="iconText">React.js</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-nodejs-96.png" />
<p class="iconText">Node.js</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-python-128.png" />
<p class="iconText">Python</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-django-192.png" />
<p class="iconText">Django</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-postgresql-144.png" />
<p class="iconText">PostgreSQL</p>
</div>
</div>
</div>
<div class="info info6">
<p class="description3">Notes is a Full Stack Django REST application with a React front-end, Python
back-end and a PostgreSQL database.
<br /><br />
Notes is a creative platform that allows users to create and share their own music using an in-built
music player with a selection of sound samples. Using the order of sound samples that the user has
defined in the music creator, the back-end will concatenate and overlay the sounds into a single audio
file (.wav) for the user to listen to once the song is saved.</p>
<div class="links">
<a href="https://github.com/Charlotte-Thomas/Notes" target="_blank"><img class="imgLink" id="img7"
src="images/icons8-github-200.png" />
<p class='linkText linkText6'>GitHub</p>
</a>
<a href="https://notes-music.herokuapp.com/" target="_blank"><img class="imgLink" id="img8"
src="images/icons8-external-link-200.png" />
<p class='linkText linkText6'>Deployed Project</p>
</a>
</div>
</div>
</div>
</div>
<div class="mySlides fade">
<div class='slideContent'>
<div class="projectHeader" id="projectHeader5">
<img class="headerImg5" src="images/pretzel.png" />
<h2 class="projectName" id="name5">WASTENOTWANTNOT <br /> <span>( winners )</span></h2>
<img class="headerImg5" src="images/pretzel.png" />
</div>
<div class="overview overview5">
<p class="projectType"> Month-long | | Team Hackathon</p>
<div class="stacks stack5">
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-html-5-64.png" />
<p class="iconText">HTML5</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-sass-avatar-144.png" />
<p class="iconText">SCSS</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-javascript-96.png" />
<p class="iconText">JavaScript</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-react-100.png" />
<p class="iconText">React.js</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-nodejs-96.png" />
<p class="iconText">Node.js</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-python-128.png" />
<p class="iconText">Python</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-django-192.png" />
<p class="iconText">Django</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-postgresql-144.png" />
<p class="iconText">PostgreSQL</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-api-100.png" />
<p class="iconText">Spoonacular</p>
</div>
</div>
</div>
<div class="info info5">
<p class="description3">WASTENOTWANTNOT is a full-stack application built using HTML5, SCSS, React with
React Hooks, Django, Python, PostgreSQL, a RESTful API and the Spoonacular API.
<br /><br />
Completed as part of the Code First Girls Hack from Home hackathon in April 2020. Our aim was to help
users avoid the
supermarkets, allow local communities to help each other in times of need and reduce food waste in the
process. The site includes a recipe finder by ingredients and a food community where users can share
ingredients with their neighbours.</p>
<div class="links">
<a href="https://github.com/ajames14/cfg-hackathon" target="_blank"><img class="imgLink" id="img7"
src="images/icons8-github-200.png" />
<p class='linkText linkText5'>GitHub</p>
</a>
<a href="https://waste-not-want-not.herokuapp.com/#/" target="_blank"><img class="imgLink" id="img8"
src="images/icons8-external-link-200.png" />
<p class='linkText linkText5'>Deployed Project</p>
</a>
</div>
</div>
</div>
</div>
<div class="mySlides fade">
<div class='slideContent'>
<div class="projectHeader" id="projectHeader4">
<img class="headerImg4" src="images/icons8-easel-100.png" />
<h2 class="projectName" id="name4">Scribble</h2>
<img class="headerImg4" src="images/icons8-easel-100.png" />
</div>
<div class="overview overview4">
<p class="projectType"> Week-long | | Paired project</p>
<div class="stacks stack4">
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-html-5-64.png" />
<p class="iconText">HTML5</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-css3-64.png" />
<p class="iconText">CSS3</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-javascript-96.png" />
<p class="iconText">JavaScript</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-react-100.png" />
<p class="iconText">React.js</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-nodejs-96.png" />
<p class="iconText">Node.js</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-python-128.png" />
<p class="iconText">Python</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-django-192.png" />
<p class="iconText">Django</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-postgresql-144.png" />
<p class="iconText">PostgreSQL</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-material-ui-144.png" />
<p class="iconText">Material-UI</p>
</div>
</div>
</div>
<div class="info">
<p class="description3">Scribble is a full-stack application built using HTML5, CSS3, Material-UI, React
with React Hooks, JSON, Django, Python, PostgreSQL and a RESTful API.
<br /><br />
Scribble is an online version of the popular game Pictionary. As Django, PostgreSQL and Python were
relatively new technologies to us, my partner and I decided to pair-programme the back-end. On the
front-end, however, we decided to split components between us.</p>
<div class="links">
<a href="https://github.com/Charlotte-Thomas/DJReactDoodle" target="_blank"><img class="imgLink"
id="img7" src="images/icons8-github-200.png" />
<p class='linkText linkText1'>GitHub</p>
</a>
<a href="https://djscribble.herokuapp.com/" target="_blank"><img class="imgLink" id="img8"
src="images/icons8-external-link-200.png" />
<p class='linkText linkText2'>Deployed Project</p>
</a>
</div>
</div>
</div>
</div>
<div class="mySlides fade">
<div class='slideContent'>
<div class="projectHeader" id="projectHeader3">
<img class="headerImg3" src="images/icons8-surfing-90.png" />
<h2 class="projectName" id="name3">Swell</h2>
<img class="headerImg3" src="images/icons8-surfing-90.png" />
</div>
<div class="overview overview3">
<p class="projectType"> Week-long | | Group project ( 4 )</p>
<div class="stacks">
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-html-5-64.png" />
<p class="iconText">HTML5</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-sass-avatar-144.png" />
<p class="iconText">SCSS</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-javascript-96.png" />
<p class="iconText">JavaScript</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-react-100.png" />
<p class="iconText">React.js</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-nodejs-96.png" />
<p class="iconText">Node.js</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-mongodb-96.png" />
<p class="iconText">MongoDB</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-api-100.png" />
<p class="iconText">Mapbox</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-api-100.png" />
<p class="iconText">Stormglass</p>
</div>
</div>
</div>
<div class="info info3">
<p class="description3">Swell is full-stack MERN application built using HTML5, SCSS, React with React
Hooks, JSON, Express, MongoDB and creation of a RESTful API.
<br /><br />
Swell is a website which provides information and advice on the best places to surf globally,
essentially
a "TripAdvisor" for surfing with a social networking element.
My main roles in the group involved building the profile page, rating functionality, admin
authorisation,
edit and delete requests and card design.</p>
<div class="links">
<a href="https://github.com/Charlotte-Thomas/Mon-Gods" target="_blank"><img class="imgLink" id="img5"
src="images/icons8-github-200.png" />
<p class='linkText linkText1'>GitHub</p>
</a>
<a href="https://swell-project3.herokuapp.com/" target="_blank"><img class="imgLink" id="img6"
src="images/icons8-external-link-200.png" />
<p class='linkText linkText2'>Deployed Project</p>
</a>
</div>
</div>
</div>
</div>
<div class="mySlides fade">
<div class='slideContent'>
<div class="projectHeader" id="projectHeader2">
<img class="headerImg2" src="images/icons8-dog-paw-100.png" />
<h2 class="projectName" id="name2">Fetch</h2>
<img class="headerImg2" src="images/icons8-dog-paw-100.png" />
</div>
<div class="overview">
<p class="projectType"> Two-day | | Paired-programming</p>
<div class="stacks">
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-html-5-64.png" />
<p class="iconText">HTML5</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-css3-64.png" />
<p class="iconText">CSS3</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-javascript-96.png" />
<p class="iconText">JavaScript</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-react-100.png" />
<p class="iconText">React.js</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-api-100.png" />
<p class="iconText">TheDogApi</p>
</div>
</div>
</div>
<!-- <img class="projectImg" src="images/dogPic.png" /> -->
<div class="info">
<p class="description">This Hackathon project required us to develop a simple front-end application
which
incorporated a public API in which to make GET requests from.
<br /><br />
We chose to use an API which gave us information about different dog breeds. My partner and I took
turns
to either write the code or direct the person programming.</p>
<div class="links">
<a href="https://github.com/Charlotte-Thomas/project-fetch" target="_blank"><img class="imgLink"
id="img1" src="images/icons8-github-200.png" />
<p class='linkText linkText1'>GitHub</p>
</a>
<a href="https://charlotte-thomas.github.io/project-fetch/" target="_blank"><img class="imgLink"
id="img2" src="images/icons8-external-link-200.png" />
<p class='linkText linkText2'>Deployed Project</p>
</a>
</div>
</div>
</div>
</div>
<div class="mySlides fade">
<div class='slideContent'>
<div class="projectHeader" id="projectHeader1">
<img class="headerImg" src="images/colourednew.png" />
<h2 class="projectName" id="name1">Space Invaders</h2>
<img class="headerImg" src="images/colourednew.png" />
</div>
<div class="overview overview1">
<p class="projectType"> Week-long | | Solo project</p>
<div class="stacks">
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-html-5-64.png" />
<p class="iconText">HTML5</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-css3-64.png" />
<p class="iconText">CSS3</p>
</div>
<div class="smallSkillIcon"><img class="smallIcon" src="images/icons8-javascript-96.png" />
<p class="iconText">JavaScript</p>
</div>
</div>
</div>
<div class="info info1">
<p class="description">Space Invaders is a web-based grid-game built using HTML5, CSS3 and Vanilla
JavaScript.
<br /><br />
The first project tasked to us by General Assembly was to render a grid-based retro arcade game in the
browser using JavaScript for DOM manipulation.</p>
<div class="links">
<a href="https://github.com/Charlotte-Thomas/project-1" target="_blank"><img class="imgLink" id="img3"
src="images/icons8-github-200.png" />
<p class='linkText linkText1'>GitHub</p>
</a>
<a href="https://charlotte-thomas.github.io/project-1/" target="_blank"><img class="imgLink" id="img4"
src="images/icons8-external-link-200.png" />
<p class='linkText linkText2'>Deployed Project</p>
</a>
</div>
</div>
</div>
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
<div class="dots">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
</section>
<section class='mainSection contactSection' id='contact'>
<div class='show-on-scroll fadeIn'>
<h1 class="sectionHeader">Contact</h1>
<a class="contactLinkLower" href="mailto:charlotte.thomas64@gmail.com">
<img class="lowerContactImg" src="images/icons8-gmail-150.png" />
<p>charlotte.thomas64@gmail.com</p>
</a>
<a class="contactLinkLower" href="https://github.com/Charlotte-Thomas" target="_blank">
<img class="lowerContactImg" src="images/icons8-github-200.png" />
<p>github.com/Charlotte-Thomas</p>
</a>
<a class="contactLinkLower" href="https://www.linkedin.com/in/charlotte-e-thomas/" target="_blank">
<img class="lowerContactImg" src="images/icons8-linkedin-150 copy.png" />
<p>www.linkedin.com/in/charlotte-e-thomas/</p>
</a>
</div>
</section>
</main>
</div>
<nav>
<button class='navButton navButton1'><img class="navImg" src="images/icons8-home-128.png" />Home</button>
<button class='navButton navButton2'><img class="navImg" src="images/icons8-information-100.png" />About Me</button>
<button class='navButton navButton3'><img class="navImg" src="images/icons8-gear-96.png" />Skills</button>
<button class='navButton navButton4'><img class="navImg" src="images/icons8-light-on-100.png" />Projects</button>
<button class='navButton navButton5'><img class="navImg" src="images/icons8-contact-100.png" />Contact</button>
</nav>
<footer>
<p>Icons used from: <a class="iconsLink" href="https://icons8.com">Icons8.com</a></p>
</footer>
</body>
</html>
<!-- 1. perhaps add loading screen -->