-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
800 lines (786 loc) · 41.4 KB
/
index.html
File metadata and controls
800 lines (786 loc) · 41.4 KB
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
<!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" />
<title>Tyler McKenna | Full Stack Web Developer</title>
<link rel="stylesheet" href="../CSS/style.css" />
<link rel="icon" href="./images/tab-icon.png" />
<meta
name="description"
content="Tyler McKenna is a full stack web developer with experience in creating responsive and user-friendly websites. Visit tyleriscoding.com to see his portfolio and contact him for your web development needs."
/>
<meta
name="keywords"
content="Tyler McKenna, Tyler is Coding, full stack web developer, web development, responsive websites, user-friendly websites, portfolio"
/>
<!-- Essential META Tags -->
<meta property="og:title" content="Tyler is Coding" />
<meta property="og:type" content="website" />
<meta
property="og:image"
content="https://www.tyleriscoding.com/images/site-preview-image.png"
/>
<meta property="og:url" content="https://www.tyleriscoding.com" />
<meta
name="twitter:card"
content="https://www.tyleriscoding.com/images/site-preview-image.png"
/>
<!-- Non-Essential, But Recommended -->
<meta
property="og:description"
content="Tyler McKenna's personal software engineering portfolio."
/>
<meta property="og:site_name" content="Tyler is Coding" />
<meta name="twitter:image:alt" content="TylerisCoding.com" />
</head>
<body>
<!-- Beginning of Header Section -->
<section id="navbar">
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text"
><span class="pink">T</span>yler
<span class="pink">I</span>s
<span class="pink">C</span>oding</span
>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="house-chimney"
class="svg-inline--fa fa-house-chimney"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
fill="currentColor"
d="M511.8 287.6L512.5 447.7C512.5 450.5 512.3 453.1 512 455.8V472C512 494.1 494.1 512 472 512H456C454.9 512 453.8 511.1 452.7 511.9C451.3 511.1 449.9 512 448.5 512H392C369.9 512 352 494.1 352 472V384C352 366.3 337.7 352 320 352H256C238.3 352 224 366.3 224 384V472C224 494.1 206.1 512 184 512H128.1C126.6 512 125.1 511.9 123.6 511.8C122.4 511.9 121.2 512 120 512H104C81.91 512 64 494.1 64 472V360C64 359.1 64.03 358.1 64.09 357.2V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L416 100.7V64C416 46.33 430.3 32 448 32H480C497.7 32 512 46.33 512 64V185L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6L511.8 287.6z"
class="fa-primary"
></path>
</svg>
<span class="link-text">Home</span>
</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="address-card"
class="svg-inline--fa fa-address-card"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
fill="currentColor"
d="M512 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h448c35.35 0 64-28.65 64-64V96C576 60.65 547.3 32 512 32zM176 128c35.35 0 64 28.65 64 64s-28.65 64-64 64s-64-28.65-64-64S140.7 128 176 128zM272 384h-192C71.16 384 64 376.8 64 368C64 323.8 99.82 288 144 288h64c44.18 0 80 35.82 80 80C288 376.8 280.8 384 272 384zM496 320h-128C359.2 320 352 312.8 352 304S359.2 288 368 288h128C504.8 288 512 295.2 512 304S504.8 320 496 320zM496 256h-128C359.2 256 352 248.8 352 240S359.2 224 368 224h128C504.8 224 512 231.2 512 240S504.8 256 496 256zM496 192h-128C359.2 192 352 184.8 352 176S359.2 160 368 160h128C504.8 160 512 167.2 512 176S504.8 192 496 192z"
class="fa-primary"
></path>
</svg>
<span class="link-text">About Me</span>
</a>
</li>
<li class="nav-item">
<a href="#projects" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="briefcase"
class="svg-inline--fa fa-briefcase"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M320 336c0 8.844-7.156 16-16 16h-96C199.2 352 192 344.8 192 336V288H0v144C0 457.6 22.41 480 48 480h416c25.59 0 48-22.41 48-48V288h-192V336zM464 96H384V48C384 22.41 361.6 0 336 0h-160C150.4 0 128 22.41 128 48V96H48C22.41 96 0 118.4 0 144V256h512V144C512 118.4 489.6 96 464 96zM336 96h-160V48h160V96z"
class="fa-primary"
></path>
</svg>
<span class="link-text">Projects</span>
</a>
</li>
<li class="nav-item">
<a href="#services" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="handshake-angle"
class="svg-inline--fa fa-handshake-angle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
>
<path
fill="currentColor"
d="M488 191.1h-152l.0001 51.86c.0001 37.66-27.08 72-64.55 75.77c-43.09 4.333-79.45-29.42-79.45-71.63V126.4l-24.51 14.73C123.2 167.8 96.04 215.7 96.04 267.5L16.04 313.8c-15.25 8.751-20.63 28.38-11.75 43.63l80 138.6c8.875 15.25 28.5 20.5 43.75 11.75l103.4-59.75h136.6c35.25 0 64-28.75 64-64c26.51 0 48-21.49 48-48V288h8c13.25 0 24-10.75 24-24l.0001-48C512 202.7 501.3 191.1 488 191.1zM635.7 154.5l-79.95-138.6c-8.875-15.25-28.5-20.5-43.75-11.75l-103.4 59.75h-62.57c-37.85 0-74.93 10.61-107.1 30.63C229.7 100.4 224 110.6 224 121.6l-.0004 126.4c0 22.13 17.88 40 40 40c22.13 0 40-17.88 40-40V159.1h184c30.93 0 56 25.07 56 56v28.5l80-46.25C639.3 189.4 644.5 169.8 635.7 154.5z"
class="fa-primary"
></path>
</svg>
<span class="link-text">Services</span>
</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="address-book"
class="svg-inline--fa fa-address-book"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M384 0H96C60.65 0 32 28.65 32 64v384c0 35.35 28.65 64 64 64h288c35.35 0 64-28.65 64-64V64C448 28.65 419.3 0 384 0zM240 128c35.35 0 64 28.65 64 64s-28.65 64-64 64c-35.34 0-64-28.65-64-64S204.7 128 240 128zM336 384h-192C135.2 384 128 376.8 128 368C128 323.8 163.8 288 208 288h64c44.18 0 80 35.82 80 80C352 376.8 344.8 384 336 384zM496 64H480v96h16C504.8 160 512 152.8 512 144v-64C512 71.16 504.8 64 496 64zM496 192H480v96h16C504.8 288 512 280.8 512 272v-64C512 199.2 504.8 192 496 192zM496 320H480v96h16c8.836 0 16-7.164 16-16v-64C512 327.2 504.8 320 496 320z"
class="fa-primary"
></path>
</svg>
<span class="link-text">Contact</span>
</a>
</li>
<li class="nav-item">
<a href="#footer" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="users"
class="svg-inline--fa fa-users"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
>
<path
fill="currentColor"
d="M319.9 320c57.41 0 103.1-46.56 103.1-104c0-57.44-46.54-104-103.1-104c-57.41 0-103.1 46.56-103.1 104C215.9 273.4 262.5 320 319.9 320zM369.9 352H270.1C191.6 352 128 411.7 128 485.3C128 500.1 140.7 512 156.4 512h327.2C499.3 512 512 500.1 512 485.3C512 411.7 448.4 352 369.9 352zM512 160c44.18 0 80-35.82 80-80S556.2 0 512 0c-44.18 0-80 35.82-80 80S467.8 160 512 160zM183.9 216c0-5.449 .9824-10.63 1.609-15.91C174.6 194.1 162.6 192 149.9 192H88.08C39.44 192 0 233.8 0 285.3C0 295.6 7.887 304 17.62 304h199.5C196.7 280.2 183.9 249.7 183.9 216zM128 160c44.18 0 80-35.82 80-80S172.2 0 128 0C83.82 0 48 35.82 48 80S83.82 160 128 160zM551.9 192h-61.84c-12.8 0-24.88 3.037-35.86 8.24C454.8 205.5 455.8 210.6 455.8 216c0 33.71-12.78 64.21-33.16 88h199.7C632.1 304 640 295.6 640 285.3C640 233.8 600.6 192 551.9 192z"
class="fa-primary"
></path>
</svg>
<span class="link-text">Social Media</span>
</a>
</li>
</ul>
</nav>
</section>
<!-- End of Header Section -->
<!-- MAIN -->
<main>
<!-- Beginning of Hero Section -->
<section id="hero">
<div class="hero container">
<div class="hero-left">
<div>
<h1 class="Hello" data-text="Hello,">Hello,</h1>
<h1 class="Im" data-text="I'm ">
I'm
<span class="titleName" data-text="Tyler"
>Tyler</span
>
</h1>
<div class="button" id="hero-btn">
<a href="#about" type="button" class="cta"
>I need a dev</a
>
</div>
</div>
</div>
<div class="hero-right">
<h2 class="titleText">
I am a designer and a full-stack web developer.
</h2>
</div>
</div>
</section>
<!-- End of Hero Section -->
<!-- Start of About Me Section -->
<section id="about" class="section-style-2">
<h1 class="section-title">
About <span class="pink">Me</span>
</h1>
<div class="about container">
<div class="col-left">
<header>
<h2>I'm here to help</h2>
</header>
<hr />
<p>
My name is Tyler McKenna. As a software engineer
based in Boston, Massachusetts, I am dedicated to
assisting clients and businesses in enhancing their
online presence through the creation of responsive
and visually appealing websites.
</p>
<div class="content">
<p>
I am a graduate of The New England Institute of
Art, where I obtained my degree in Digital Art
and Animation. Throughout my education, I
acquired proficiency in a variety of software
suites, including the Adobe Creative Suite, 3Ds
Max, Maya, and others. Additionally, a
significant portion of my coursework was focused
on web design, web development, and programming,
which served as the foundation for my passion
for web development.
</p>
<p>
In my leisure time, I enjoy creating playlists,
reading, gaming, playing guitar, making art and
browsing Instagram. Recently, I have taken an
interest in sneaker collecting, although it does
not bode well for my wallet.
</p>
</div>
<div class="button more">
<h3 class="cta more-text">More</h3>
</div>
</div>
<div class="col-right">
<div class="about-img">
<img
src="/images/Portrait-small.png"
alt="Image of Tyler"
/>
</div>
</div>
</div>
<div class="about-buttons">
<div class="button">
<a href="#contact" type="button" class="cta"
>Contact Me</a
>
</div>
</div>
</section>
<!-- End of About Me Section -->
<!-- Beginning of Projects Section -->
<section id="projects" class="section-style-1">
<h1 class="section-title">
Pro<span class="pink">j</span>ects
</h1>
<p>Here are a few of the projects I've made recently:</p>
<section class="projects container">
<div class="project-item">
<h1 class="project-item-header">
<span class="pinkh1">J</span>essi<span
class="pinkh1"
>N</span
>aff<span class="span pinkh1">.</span>com
</h1>
<img
id="jessinaff-img"
class="project-img"
src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExYTNrYjlkd3ZiZ2J5YzR3bHR1OHphend0MHdhbm1mYmdid2Y2dG1sdCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/4UTWuh1tr8ITHYrs5V/giphy.gif"
alt="JessiNaff.com"
/>
<p>
JessiNaff.com is a website made for my client who is
a psychotherapist and dance movement therapist. It
provides her current and prospective clients with
information about psychotherapy, movement therapy,
and licensure consultation.
</p>
<div class="button-section">
<div class="button">
<a
href="https://www.jessinaff.com"
target="_blank"
type="button"
class="cta"
>Visit</a
>
</div>
</div>
</div>
<!-- <div class="project-item">
<h1 class="project-item-header">
<span class="pinkh1">Q</span>uest
<span class="pinkh1">L</span>og
</h1>
<img
id="questlog-img"
class="project-img"
src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMzEybXlmZzB1YmJhcXIyZ3gzbno2MnUzczc2ZzZmendqYm9pYm1pOSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/nmsRt6Y1DvuYx5OIyI/giphy.gif"
alt="Quest Log"
/>
<p>
Quest Log is a full-stack web application that
leverages Google OAuth for user authentication and
enables users to create and manage session notes,
recaps, and a Dungeon Master's Companion app for our
ongoing DnD campaign.
</p>
<div class="button-section">
<div class="button">
<a
href="https://quest-log.cyclic.app"
target="_blank"
type="button"
class="cta"
>Visit</a
>
</div>
<div class="button">
<a
href="https://github.com/TylerIsCoding/QuestLog"
target="_blank"
type="button"
class="cta github"
><img
src="./Images/icon-github-small.png"
class="button-image-git"
/>GitHub</a
>
</div>
</div>
</div> -->
<div class="project-item">
<h1 class="project-item-header">
<span class="pinkh1">S</span>ilverpoint
<span class="pinkh1">S</span>neakers
</h1>
<img
id="silverpoint-img"
class="project-img"
src="https://media2.giphy.com/media/h1lhcl4QKyYUBZzsXS/giphy.gif"
alt="Silverpoint"
/>
<p>
Silverpoint Sneakers is a website dedicated to
providing the latest and greatest in sneaker
fashion. With a wide variety of styles and brands to
choose from, Silverpoint Sneakers is the ultimate
destination for sneaker enthusiasts.
</p>
<div class="button-section">
<div class="button">
<a
href="./shoe-store/index.html"
target="_blank"
type="button"
class="cta"
>Visit</a
>
</div>
<div class="button">
<a
href="https://github.com/TylerIsCoding/TylerIsCoding.com/tree/main/shoe-store"
target="_blank"
type="button"
class="cta github"
><img
src="./Images/icon-github-small.png"
class="button-image-git"
/>GitHub</a
>
</div>
</div>
</div>
</section>
<section class="projects container">
<div class="project-item">
<h1 class="project-item-header">
<span class="pinkh1">P</span>aterro<span
class="pinkh1"
>'</span
>s <span class="pinkh1">K</span>itchen
</h1>
<img
id="bartender-img"
class="project-img"
src="https://media1.giphy.com/media/3awpsdkMGW0k0ByFDC/giphy.gif"
alt="Paterro's Kitchen"
/>
<p>
Paterro's Kitchen is a visually appealing website
designed to showcase the restaurant's authentic
Italian food and charming atmosphere. The site
features a clean, modern layout, high-quality images
and a reservation page.
</p>
<div class="button-section">
<div class="button">
<a
href="./restaurant/index.html"
target="_blank"
type="button"
class="cta"
>Visit</a
>
</div>
<div class="button">
<a
href="https://github.com/TylerIsCoding/TylerIsCoding.com/tree/main/restaurant"
target="_blank"
type="button"
class="cta github"
><img
src="./Images/icon-github-small.png"
class="button-image-git"
/>GitHub</a
>
</div>
</div>
</div>
<div class="project-item">
<h1 class="project-item-header">
<span class="pinkh1">S</span>pectral
<span class="pinkh1">S</span>alon
</h1>
<img
id="salon-img"
class="project-img"
src="https://media2.giphy.com/media/i2xKS6kuzYH8EvM3GY/giphy.gif"
alt="Spectral Salon"
/>
<p>
Spectral Salon is a website that offers a wide range
of beauty and grooming services for men and women.
Services offered may include hair cutting, coloring,
styling, nail care, waxing, facials, and more.
</p>
<div class="button-section">
<div class="button">
<a
href="./salon/index.html"
target="_blank"
type="button"
class="cta"
>Visit</a
>
</div>
<div class="button">
<a
href="https://github.com/TylerIsCoding/TylerIsCoding.com/tree/main/salon"
target="_blank"
type="button"
class="cta github"
><img
src="./Images/icon-github-small.png"
class="button-image-git"
/>GitHub</a
>
</div>
</div>
</div>
</section>
</section>
<!-- End of Projects Section -->
<!-- Beginning of Statement Section -->
<section id="statement" class="section-style-2">
<div class="statement-header">
<h1 class="section-title">
<span class="pinkh1">My</span> Mission
</h1>
</div>
<div class="statement container">
<header>
<h2>Do you have a web presence?</h2>
</header>
<hr />
<p>
My mission is to empower businesses and individuals by
creating visually appealing, responsive, and accessible
websites that effectively showcase their brand and
offerings. We strive to exceed client expectations
through clear communication, timely delivery, and
ongoing support.
</p>
<p>
When presenting your business to potential clients, it
is crucial to have a website that effectively showcases
your offerings and draws them in. An important aspect to
consider is the responsiveness and accessibility of your
website.
</p>
<p>
Responsive design ensures that the content on your
website is easily viewable on a variety of screen
resolutions and sizes, including smartphones and
tablets. This eliminates the need for maintaining
separate versions of your website for mobile and
desktop, saving time, resources, and effort.
</p>
<p>
Accessibility is the practice of making electronic
information and interfaces available to all individuals,
including those with visual, auditory, physical, speech,
cognitive, and neurological disabilities. By
incorporating accessibility measures, your website can
be easily perceived, understood, navigated, and
interacted with by all users, allowing for equal
participation in the digital world.
</p>
</div>
</section>
<!-- End of Statement Section -->
<!-- Beginning of Services Section -->
<section id="services" class="section-style-1">
<div class="services-header">
<h1 class="section-title">
Ser<span class="pinkh1">v</span>ices
</h1>
</div>
<div class="services container">
<div class="services-left">
<ul class="icons">
<li>
<img
src="/images/icon-consulting.png"
alt="Consulting"
/>
</li>
<li>
<img
src="/images/icon-planning.png"
alt="Planning"
/>
</li>
<li>
<img
src="/images/icon-build.png"
alt="Building"
/>
</li>
<li>
<img
src="/images/icon-launch.png"
alt="Launch"
/>
</li>
</ul>
</div>
<div class="services-right">
<header>
<h2>My Services</h2>
</header>
<hr />
<p>
As a dedicated professional, my goal is to surpass
my clients' expectations for their passion projects.
To ensure a successful outcome, clear communication
and understanding of the process is essential. My
approach includes the following steps:
</p>
<h4>
<span
><img
class="small-icon"
src="./images/icon-consulting.png"
alt="Gear-icon" /></span
><strong>Consultation</strong>
</h4>
<p>
During this phase, we will discuss your project and
identify the best solution for your needs. I will
provide suggestions and recommendations, and focus
on writing the code that meets the project's
specifications.
</p>
<h4>
<span
><img
class="small-icon"
src="./images/icon-planning.png"
alt="Gear-icon" /></span
><strong>Planning</strong>
</h4>
<p>
Once we have a clear understanding of your desired
outcome, I will begin the planning phase. This will
include a proposal with a visual preview, a plan of
action, and a timeline for completion.
</p>
<h4>
<span
><img
class="small-icon"
src="./images/icon-build.png"
alt="Gear-icon" /></span
><strong>Creation</strong>
</h4>
<p>
Upon agreement of the proposal, I will proceed with
creating your project. I will provide regular
updates on progress and communicate any obstacles or
milestones that arise during the creation and
testing phase.
</p>
<h4>
<span
><img
class="small-icon"
src="./images/icon-launch.png"
alt="Gear-icon" /></span
><strong>Launch</strong>
</h4>
<p>
Upon completion of the project, we will conduct a
final review to ensure that it meets both of our
standards. If satisfactory, the project will be
launched and I will provide ongoing support as
outlined in our initial agreement.
</p>
</div>
</div>
</section>
<!-- End of Services Section -->
<!-- Start of Contact Section -->
<section id="contact" class="section-style-2">
<div class="contact container">
<div class="contact-header">
<h1 class="section-title">
Contact <span class="pink">Me</span>
</h1>
</div>
<form
name="contact"
method="POST"
data-netlify="true"
onSubmit="submit"
>
<div class="contact-item">
<h1 class="contact-text">My name is</h1>
<input
type="text"
name="name"
placeholder="Your name here"
required
/>
</div>
<div class="contact-item">
<h1 class="contact-text">
I would like to ask about
</h1>
<input
type="text"
name="inquiry"
placeholder="designing my business a website!"
required
/>
</div>
<div class="contact-item">
<h1 class="contact-text">My phone number is</h1>
<input
type="tel"
name="number"
placeholder="(XXX) XXX-XXXX"
required
/>
</div>
<div class="contact-item">
<h1 class="contact-text">Oh, and my email is</h1>
<input
type="email"
name="email"
placeholder="your-email@website.com"
required
/>
</div>
<div class="contact-item">
<button class="submitButton" type="submit">
Submit
</button>
</div>
</form>
</div>
</section>
<!-- End of Contact Section -->
<!-- Footer -->
<section id="footer">
<div class="footer container">
<div class="brand">
<h1>
<span class="pink">T</span>yler
<span class="pink">I</span>s
<span class="pink">C</span>oding
</h1>
<h2>Your Complete Web Solution</h2>
<div class="social-icon">
<div class="social-item">
<a
href="https://twitter.com/tylertmckenna"
target="_blank"
><img
src="/Images/icon-twitter.png"
alt="Twitter"
/></a>
</div>
<div class="social-item">
<a
href="https://www.instagram.com/tyler_is_coding/"
target="_blank"
><img
src="/Images/icon-instagram.png"
alt="Instagram"
/></a>
</div>
<div class="social-item">
<a
href="https://github.com/TylerIsCoding"
target="_blank"
><img
src="/Images/icon-github.png"
alt="GitHub"
/></a>
</div>
<div class="social-item">
<a
href="https://www.linkedin.com/in/tyleriscoding/"
target="_blank"
><img
src="/Images/icon-linkedin.png"
alt="LinkedIn"
/></a>
</div>
</div>
</div>
<p>Copyright © 2024 Tyler McKenna. All rights reserved.</p>
</div>
</section>
<!-- End of Footer -->
<!-- END OF MAIN -->
</main>
</body>
<!-- Scripts -->
<script src="./js/main.js"></script>
</html>