-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
870 lines (831 loc) · 34 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Ray Thompson" />
<meta
name="description"
content="Web developer from London who loves creating great looking effectual websites and web applications. Javascript|PHP|WordPress|React"
/>
<!--
<meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.webp">-->
<meta
property="og:description"
content="Ray Thompson Web Developer portfolio website."
/>
<meta
property="og:title"
content="raythompsonwebdev.co.uk - web development"
/>
<meta
name="twitter:title"
content="raythompsonwebdev.co.uk - web development"
/>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/src/fonts/cabin-2--webfont/style.css" />
<link
rel="stylesheet"
href="/src/fonts/open-sans-cufonfonts-webfont/style.css"
/>
<link
rel="stylesheet"
href="/src/fonts/Fork-Awesome-1.2.0/css/fork-awesome.css"
/>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-86655310-1"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-86655310-1");
</script>
<title>Ray Thompson - Web Developer</title>
</head>
<body>
<div id="app">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="modal-header">
<h2>Privacy Policy</h2>
</div>
<div class="modal-body">
<p>
This website is operated by Raymond Thompson and whose registered
address is www.raythompsonwebdev.co.uk (“We”) are committed to
protecting and preserving the privacy of our visitors when
visiting our site or communicating electronically with us. This
policy sets out how we process any personal data we collect from
you or that you provide to us through our website. We confirm that
we will keep your information secure and that we will comply fully
with all applicable UK Data Protection legislation and
regulations. Please read the following carefully to understand
what happens to personal data that you choose to provide to us, or
that we collect from you when you visit this site. By visiting
www.raythompsonwebdev.co.uk (our website) you are accepting and
consenting to the practices described in this policy.
</p>
<h3>Information Collection And Use</h3>
<p>
We may collect, store and use the following kinds of personal
information about individuals who visit and use our website:
</p>
<!--[list any other active forms on your website (ie. Request a Prospectus Form, Application Form, Report and Absence Form, etc.)-->
<p>
<strong>Information you supply to us.</strong> You may supply us
with information about you by filling in forms on our website.
This includes information you provide when you submit a
contact/enquiry form.
</p>
<p>
The information you give us may include your name and e-mail
address.
</p>
<p>
<strong
>Information our website automatically collects about
you.</strong
>
With regard to each of your visits to our website we may
automatically collect information including the following:
</p>
<ul>
<li>
<strong>technical information</strong>, including a truncated
and anonymised version of your Internet protocol (IP) address,
browser type and version, operating system and platform;
</li>
<li>
<strong>information about your visit,</strong> including what
pages you visit, how long you are on the site, how you got to
the site (including date and time); page response times, length
of visit, what you click on, documents downloaded and download
errors.
</li>
</ul>
<!-- [Describe any other types of information you may collect through third party services you may have enabled on your website not linked to Cleverbox (ie. other tracking, marketing or SEO services)] -->
<!-- <h2>Cookies</h2>
<p>Our website uses cookies to distinguish you from other users of our website. This helps us to provide you
with a good experience when you browse our website and also allows us to improve our site. For detailed
information on the cookies we use and the purposes for which we use them see our Cookie Policy.</p> -->
<!--[Make this link
to the cookie policy page on your website that will be automatically updated by Cleverbox].-->
<h3>How we may use the information we collect</h3>
<p>We use the information in the following ways:</p>
<p>
<strong>Information you supply to us.</strong> We will use this
information:
</p>
<ul>
<li>
to provide you with information and/or services that you request
from us;
</li>
</ul>
<!--[Describe any other uses of the information you collect (ie. other marketing communications to individuals
who have requested a prospectus)]-->
<p>
<strong>Information we automatically collect about you.</strong>
We will use this information:
</p>
<ul>
<li>
to administer our site including troubleshooting and statistical
purposes;
</li>
<li>
to improve our site to ensure that content is presented in the
most effective manner for you and for your computer;
</li>
<li>
security and debugging as part of our efforts to keep our site
safe and secure.
</li>
</ul>
<p>
This information is collected anonymously and is not linked to
information that identifies you as an individual. We use Google
Analytics to track this information. Find out how Google uses your
data at
<a href="https://support.google.com/analytics/answer/6004245"
>https://support.google.com/analytics/answer/6004245</a
>
</p>
<!--[Make this link to the GoogleAnalytics page]-->
<h3>Disclosure of your informations</h3>
<p>
Any information you provide to us will either be emailed directly
to us or may be stored on a secure server located near Dublin
within the Republic of Ireland. We use hosting provider (IONOS) to
facilitate the running and management of this website. IONOS meet
high data protection and security standards and are bound by
contract to keep any information they process on our behalf
confidential.
</p>
<p>
Any data that may be collected through this website that IONOS
process, is kept secure and only processed in the manner we
instruct them to. IONOS cannot access, provide, rectify or delete
any data that they store on our behalf without permission.
</p>
<!--[Check this statement is in accordance with your internal data processing activities and outline any other
storage of information inline with your internal data policy (ie. Do you have a database of personal data
stored on third party platforms such as MailChimp?)]-->
<p>
We do not rent, sell or share personal information about you with
other people or non-affiliated companies.
</p>
<p>
We will use all reasonable efforts to ensure that your personal
data is not disclosed to regional/national institutions and
authorities, unless required by law or other regulations.
</p>
<p>
Unfortunately, the transmission of information via the internet is
not completely secure. Although we will do our best to protect
your personal data, we cannot guarantee the security of your data
transmitted to our site; any transmission is at your own risk.
Once we have received your information, we will use strict
procedures and security features to try to prevent unauthorised
access.
</p>
<h3>Third party links</h3>
<p>
Our site may, from time to time, contain links to and from the
third party websites. If you follow a link to any of these
websites, please note that these websites have their own privacy
policies and that we do not accept any responsibility or liability
for these policies. Please check these policies before you submit
any personal data to these websites.
</p>
<h3>Your rights - access to your personal data</h3>
<p>
You have the right to ensure that your personal data is being
processed lawfully (“Subject Access Right”). Your subject access
right can be exercised in accordance with data protection laws and
regulations. Any subject access request must be made in writing to
</p>
<p>
We will provide your personal data to you within the statutory
time frames. To enable us to trace any of your personal data that
we may be holding, we may need to request further information from
you. If you have a complaint about how we have used your
information, you have the right to complain to the Information
Commissioner's Office (ICO).
</p>
<h3>Changes To This Privacy Policy</h3>
<p>
Any changes we may make to our privacy policy in the future will
be posted on this page and, where appropriate, notified to you by
e-mail. Please check back frequently to see any updates or changes
to our privacy policy.
</p>
<h3>Contact</h3>
<p>
Questions, comments and requests regarding this privacy policy are
welcomed and should be addressed to
</p>
</div>
<div class="modal-footer"></div>
</div>
</div>
<header class="site-header">
<!--Site Title-->
<div class="site-title">
<h1 class="site-title-name">Ray Thompson</h1>
<!-- <p class="site-title-text">Web Developer</p> -->
</div>
<!--Navigation-->
<nav id="site-navigation" class="site-navigation">
<ul class="site-inner-nav">
<li class="site-nav-item">
<a href="#banner" title="home page" class="site-inner-anchor"
>Home</a
>
</li>
<li class="site-nav-item">
<a
href="#project-page"
title="projects page"
class="site-inner-anchor"
>Projects</a
>
</li>
<li class="site-nav-item">
<a href="#about-page" title="about page" class="site-inner-anchor"
>About</a
>
</li>
<li class="site-nav-item">
<a href="#contact" title="contact page" class="site-inner-anchor"
>Contact</a
>
</li>
</ul>
</nav>
<!--Social Icons-->
<ul id="social">
<li class="social-item">
<a
href="https://github.com/raythompsonwebdev/"
title="Follow me on Github"
target="blank"
class="social-item-link"
>
<i class="fa fa-github" aria-hidden="true"></i>
<span class="visually-hidden">Github Icon</span>
</a>
</li>
<li class="social-item">
<a
href="https://www.facebook.com/raythompsonwebdeveloper"
title="Follow me on Facebook"
target="blank"
class="social-item-link"
>
<i class="fa fa-facebook" aria-hidden="true"></i>
<span class="visually-hidden">Facebook Icon</span>
</a>
</li>
<li class="social-item">
<a
href="https://www.linkedin.com/in/raymond-t-1b42b7b8"
title="Follow me on LinkedIn"
target="blank"
class="social-item-link"
>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<span class="visually-hidden">LinkedIn Icon</span>
</a>
</li>
</ul>
<!--mobile menu-->
<button
class="menu-toggle"
aria-label="menu"
aria-controls="site-navigation"
aria-expanded="false"
>
Menu
</button>
</header>
<main id="site-content">
<!--Banner-->
<div id="banner" class="tabcontent scrolled">
<article class="banner-text">
<h2 class="banner-title">Crafting Online Visions into Reality</h2>
<p class="banner-copy">
Welcome to my portfolio!. I'm Ray, a budding software engineer/web
developer with a passion for coding. While I'm new to the field,
I'm excited to share my journey and projects with you.
</p>
<p class="banner-copy">
Join me as I explore the endless possibilities of programming and
strive to turn ideas into reality, one line of code at a time.
</p>
<!--⬇ -arrow html ⇓⇩⇓-->
<a href="#project-page" id="project-page-link">See My Work</a>
</article>
</div>
<!--Projects-->
<section id="project-page" class="tabcontent">
<h2 id="project-page-title">Projects</h2>
<!-- <p id="project-page-text">
Check out my project gallery to see how I turn concepts into
reality.
</p> -->
<div id="project-page-container">
<ul id="project-tabs">
<li>
<button
type="button"
id="all"
class="project-tab"
aria-expanded="false"
aria-label="all projects button"
>
All
</button>
</li>
<li>
<button
type="button"
id="javascript"
class="project-tab"
aria-expanded="false"
aria-label="all javascript projects button"
>
Javascript
</button>
</li>
<li>
<button
type="button"
id="php"
class="project-tab"
aria-expanded="false"
aria-label="all php projects button"
>
PHP
</button>
</li>
<li>
<button
type="button"
id="react"
class="project-tab"
aria-expanded="false"
aria-label="all react projects button"
>
React
</button>
</li>
<li>
<button
type="button"
id="vuejs"
class="project-tab"
aria-expanded="false"
aria-label="all vue projects button"
>
VueJS
</button>
</li>
<!-- <li>
<button
type="button"
id="wordpress"
class="project-tab"
aria-expanded="false"
aria-label="all wordpress projects button"
>
WordPress
</button>
</li> -->
</ul>
<div class="projects">
<figure class="div1 project" data-id="react" data-all="all">
<img
src="/images/Projects/webp/shoestore.webp"
alt="Shoestore Website Home Page"
class="projectImg"
/>
<figcaption class="project-caption">
<h3 class="cover-title">Shoestore</h3>
<p>
E-commerce shoes store in progress - HTML, SASS, NextJs,
MongoDB, Redux Tool Kit, Next Auth, Vercel.
</p>
<span class="caption-links">
<a
class="caption-link"
href="https://shoestore-two.vercel.app/"
target="_blank"
title="Link to shoestore"
rel="noopener"
>Live Site</a
>
<a
class="caption-link"
href="https://github.com/raythompsonwebdev/shoestore"
target="_blank"
title="Link to shoestore github repo"
rel="noopener"
>GitHub</a
>
</span>
</figcaption>
</figure>
<figure class="div2 project" data-id="vuejs" data-all="all">
<img
src="./images/Projects/webp/travel-agency.webp"
loading="lazy"
alt="Travel Agency Home Page"
class="projectImg"
/>
<figcaption class="project-caption">
<h3 class="cover-title">Travel Agency</h3>
<p>
Package holiday reservation booking app in progress - HTML,
SASS, VueJS, Express, Node, MongoDB, Render.
</p>
<span class="caption-links">
<a
class="caption-link"
href="https://travel-agency-vue-backend.onrender.com/"
target="_blank"
title="Link to travel agency"
rel="noopener"
>Live Site</a
>
<a
class="caption-link"
href="https://github.com/raythompsonwebdev/travel-agency-vue"
title="Link to travel agency github repo"
target="_blank"
rel="noopener"
>GitHub</a
>
</span>
</figcaption>
</figure>
<figure class="div3 project" data-id="php" data-all="all">
<img
src="./images/Projects/webp/mannering-music.webp"
alt="mannering-musicmvc-home-page"
class="projectImg"
/>
<figcaption class="project-caption">
<h3 class="cover-title">Mannering Music</h3>
<p>
Music Album Review web application in progress - HTML, SASS,
Object Oriented PHP, MySQL, Javascript.
</p>
<span class="caption-links">
<a
class="caption-link"
rel="noopener"
href="https://mannering.raythompsonwebdev.co.uk/"
title="Link to mannering music web app"
target="_blank"
>Live Site</a
>
<a
class="caption-link"
rel="noopener"
href="https://github.com/raythompsonwebdev/manneringmusicmvc.com"
title="Link to mannering music github repo"
target="_blank"
>GitHub</a
>
</span>
</figcaption>
</figure>
<figure class="div4 project" data-id="javascript" data-all="all">
<img
src="./images/Projects/webp/todo-list.webp"
alt="Todo app"
class="projectImg"
/>
<figcaption class="project-caption">
<h3 class="cover-title">Todo App</h3>
<p>
Todo app in collab with Founders & Coders cohort Miah -
HTML, CSS, Javascript, Local Storage
</p>
<span class="caption-links">
<a
class="caption-link"
href="https://fac-23.github.io/preA-testing-raymiah/"
title="Link to Todo web application"
target="_blank"
rel="noopener"
>Live Site</a
>
<a
class="caption-link"
href="https://github.com/fac-23/preA-testing-raymiah"
title="Link to Todo web application github repo"
target="_blank"
rel="noopener"
>GitHub</a
>
</span>
</figcaption>
</figure>
<figure class="div5 project" data-id="react" data-all="all">
<img
src="./images/Projects/webp/x-tra-blog.webp"
alt="x-tra-blog"
class="projectImg"
/>
<figcaption class="project-caption">
<h3 class="cover-title">Xtra-Blog</h3>
<p>
Templatemo.com Blog website template - user registration
& login, Create, Read, Delete and Update blog posts
</p>
<p>React, MySQL2, SendGrid, JWT Tokens.</p>
<span class="caption-links">
<a
class="caption-link"
href="https://github.com/raythompsonwebdev/templatemo_553_xtra_blog-react-client"
title="Link to templatemo_553_xtra_blog client github repo"
target="_blank"
rel="noopener"
>GitHub</a
>
<a
class="caption-link"
href="https://github.com/raythompsonwebdev/templatemo_553_xtra_blog-react-server"
title="Link to templatemo_553_xtra_blog server github repo"
target="_blank"
rel="noopener"
>GitHub</a
>
</span>
</figcaption>
</figure>
<figure class="div6 project" data-id="javascript" data-all="all">
<img
src="./images/Projects/webp/crime-checker.webp"
alt="Crime Checker"
class="projectImg"
/>
<figcaption class="project-caption">
<h3 class="cover-title">Crime Checker</h3>
<p>
Crime Checker in collab with Founders & Coders cohort
Orian - HTML, CSS, Javascript, Police API, Mapbox
</p>
<span class="caption-links">
<a
class="caption-link"
href="https://fac-23.github.io/preA-week2-http-rayorian/"
title="Link to Crime Checker App"
target="_blank"
rel="noopener"
>Live Site</a
>
<a
class="caption-link"
href="https://github.com/fac-23/preA-week2-http-rayorian"
title="Link to Crime Checker App github repo"
target="_blank"
rel="noopener"
>GitHub</a
>
</span>
</figcaption>
</figure>
</div>
</div>
</section>
<!--About-->
<section id="about-page" class="tabcontent">
<h2 id="about-page-title">About Me</h2>
<div id="about-content">
<figure id="about-page-image">
<img
id="page-image"
src="./images/profile/webp/profile-image.webp"
loading="lazy"
srcset="
./images/profile/webp/profile-image-175.webp 175w,
./images/profile/webp/profile-image-150.webp 150w,
./images/profile/webp/profile-image-125.webp 125w,
./images/profile/webp/profile-image-100.webp 100w
"
sizes="(min-width: 1920px) 175px,
(min-width: 1440px) 175px,
(min-width: 1280px) 150px,
(min-width: 1024px) 150px,
(min-width: 736px) 120px,
(min-width: 601px) 100px,
(min-width: 300px) 100px, 25vw"
alt="Image of raythompsonwebdev"
/>
</figure>
<p class="about-content-text">
As someone who is just starting out in the world of software
engineering, I am driven by my fascination for the power of the
web to connect people and ideas and my eagerness to learn. While I
may not have any professional experience yet, I am committed to
honing my skills and pushing myself to new heights.
</p>
<p class="about-content-text">
I have refined my skills in HTML, CSS, PHP, MYSQL and JavaScript,
channeling my creativity into crafting custom solutions like
WordPress classic and block themes and plugins , full stack web
applications and user Interfaces that not only look great but can
also function seamlessly.
</p>
<p class="about-content-text">
I'm proud to have honed my skills in coding and web development,
enabling me to craft websites and web applications that are not
just functional but are also pleasing to the eye.
</p>
<p class="about-content-text">
When I'm not behind a screen, you'll often find me exploring new
technologies, enjoying some good music, or pursuing other creative
and social interests. I believe in the power of determination and
persistence, and I am excited about the journey ahead as I embark
on this fulfilling career path.
</p>
</div>
<div id="about-widgets">
<section id="barchart">
<h3>Programming Languages</h3>
<ul id="bars"></ul>
<span id="ledger">
<span class="ledger-spans"></span>
<span class="ledger-spans">Novice</span>
<span class="ledger-spans">Compentent</span>
<span class="ledger-spans">Proficient</span>
</span>
</section>
<section id="slider">
<h3>Programming Education</h3>
<div class="hero-slider">
<div class="mask">
<div
class="slider-body"
role="region"
aria-label="hero carousel"
></div>
</div>
</div>
<div id="slids">
<button href="#" id="next" aria-label="Next Slide">
<<
</button>
<button href="#" id="prev" aria-label="Previous Slide">
>>
</button>
</div>
</section>
</div>
</section>
<!--Contact-->
<section id="contact" class="tabcontent">
<h2 id="contact-title">Contact</h2>
<div id="contact-container">
<section id="contact-details">
<h3>Have any question ?</h3>
<p class="contact-details-text">
I'd love to connect with you! Feel free to reach out to me.
</p>
<p class="contact-details-text">
Whether you have a project in mind, want to collaborate, or
simply want to chat about web development, I'm always here to
listen and learn from your experiences.
</p>
<p class="contact-details-text">
You can reach out to me using the details below:
</p>
<address>
<ul>
<li>
<i class="fa fa-phone" aria-hidden="true"></i>
07930 844 450
</li>
<li>
<i class="fa fa-envelope"></i>
</li>
<li>
<i class="fa fa-envelope"></i>
</li>
</ul>
</address>
</section>
<form id="myform" name="theform" class="group" auto-complete="off">
<span id="form-error" class="hide-error"></span>
<ol id="myform-fields">
<li class="myform-field">
<label for="myname">Name *</label>
<input
type="text"
name="myname"
id="myname"
title="enter your first name here"
required
pattern="^[a-zA-Z\s]+$"
aria-describedby="form-error"
/>
</li>
<li class="myform-field">
<label for="myemail">Email *</label>
<input
type="email"
name="myemail"
id="myemail"
title="enter your email address here"
required
minlength="4"
maxlength="50"
aria-describedby="form-error"
/>
</li>
<li class="myform-field">
<label for="mycomments">Message</label>
<textarea
name="mycomments"
id="mycomments"
placeholder="Enter your comment here or leave blank"
rows="5"
minlength="10"
maxlength="250"
aria-describedby="form-error"
></textarea>
</li>
<li class="myform-field">
<label for="myprivacy"
>I have read Privacy Policy
<input type="checkbox" id="myprivacy" name="myprivacy" />
</label>
<button id="openmodal">Privacy Policy</button>
</li>
<li class="myform-field">
<input
type="submit"
value="Submit"
id="submit"
name="submitter"
class="g-recaptcha"
data-sitekey="6LcCTKUUAAAAAHHFl62NWje1Fe2Wt_zD4xoIlRJv"
data-callback="onSubmit"
data-action="submit"
/>
</li>
</ol>
</form>
</div>
</section>
</main>
<br />
<!--Footer-->
<footer id="site-footer">
<ul class="footer-links">
<li class="footer-link">
<a class="footer-href" href="#banner" title="Home page">Home</a>
</li>
<li class="footer-link">
<a class="footer-href" href="#about-page" title="About page"
>About</a
>
</li>
<li class="footer-link">
<a class="footer-href" href="#project-page" title="Projects page"
>Projects</a
>
</li>
<li class="footer-link">
<a class="footer-href" href="#contact" title="Contact page"
>Contact</a
>
</li>
</ul>
</footer>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
<script async src="https://www.google.com/recaptcha/api.js"></script>
<script>
function onSubmit(token) {
document.getElementById("myform").submit();
}
</script>
</html>