-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1603 lines (1553 loc) · 83.8 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
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Animate on scroll CDN link -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<!-- Animate.css CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/debc4afe80.js" crossorigin="anonymous"></script>
<!-- My CSS -->
<link rel="stylesheet" href="css/style.css">
<title>Stephens Portfolio</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top animate__animated animate__fadeIn">
<div class="container">
<a class="navbar-brand" href="#">Stephens Portfolio</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<!-- About -->
<li class="nav-item ms-auto">
<a class="nav-link" href="#about">About Me</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown ms-auto">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
My Projects
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#ms1">Milestone Project 1</a></li>
<li><a class="dropdown-item" href="#ms2">Milestone Project 2</a></li>
<li><a class="dropdown-item" href="#ms3">Milestone Project 3</a></li>
<li><a class="dropdown-item" href="#ms4">Milestone Project 4</a></li>
<li><a class="dropdown-item" href="#alien_911_project">Alien 911 Project</a></li>
<li><a class="dropdown-item" href="#magnet_fishing_project">Magnet Fishing Project</a></li>
<li><a class="dropdown-item" href="#mini_projects">Mini Projects</a></li>
</ul>
</li>
<!-- My LinkedIn Link -->
<li class="nav-item ms-auto">
<a class="nav-link" href="https://www.linkedin.com/in/stephenmcgovern01/" target="_blank">My LinkedIn
<i class="fab fa-linkedin "></i></a>
</li>
<!-- My Github Link -->
<li class="nav-item ms-auto">
<a class="nav-link" href="https://github.com/smcgdub" target="_blank">My Github
<i class="fab fa-github"></i></a>
</li>
<!-- My Certifications -->
<li class="nav-item ms-auto">
<a class="nav-link" href="#myCertifications">My Certifications</a>
</li>
<!-- Contact Me -->
<li class="nav-item ms-auto">
<a class="nav-link" href="#contactMe">Contact Me</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Scroll to top of page button -->
<button type="button" class="btn btn-floating btn-lg" id="btn-back-to-top">
<i class="fas fa-arrow-up mx-auto my-auto"></i>
</button>
<!-- Hero Image -->
<section id="hero" class="bg-cover hero-section">
<!-- <div class="overlay" data-aos="zoom-in" data-aos-duration="3000"></div> -->
<div class="container" data-aos="zoom-in" data-aos-duration="3000">
<div class="row">
<div class="col-12">
</div>
</div>
</div>
</section>
<!-- Horizontal Line -->
<div class="container ms22">
<p class="scrollAnchor pb-3"><a href="" id="about" class="anchor">.</a></p>
<!-- The code below name="about" was removed from the line of code above and replaced with an id="about" as name is an obsolete attribute now -->
<!-- name="about" -->
<hr class="ms-auto">
</div>
<!-- About me -->
<section>
<div class="container" data-aos="flip-right" data-aos-duration="3000">
<div class="row">
<div class="col-12">
<h2 class="text-center text-capitalize">About me</h2>
<p class="text-center">
Im an ex real estate entrepreneur with more than 12 years of leadership experience who has made the leap
from property investment to fullstack software development. I am ambitious, meticulous, intuitive, adaptive,
driven and capable of working as part of a team, or unsupervised by myself. My real estate career has
allowed me to gain international experience having worked in in Ireland, the UK, Europe, The Middle East and
Africa.
</p>
<p class="text-center">
I recently completed my year long Diploma in software development with <a
href="https://codeinstitute.net/ie/about-us/" target="_blank">Code Institute</a> who are Europe's only
university accredited Bootcamp. I also hold a professional diploma in project management and also have a
prince 2 project management qualification. I believe you should never stop expanding your knowledge and I
work to improve my coding knowledge and ability every day. <em>"The mind is not a vessel
that needs filling, but wood that needs igniting.”</em> - Plutarch
</p>
<p class="text-center">
Below you can look over the 4 milestone projects i had to complete with Code Institute to attain my diploma.
If you would like to find out more about me you can click on my LinkedIn profile at the top of the page, I'm
always happy to connect with like minded people.
</p>
<p class="text-center">
If you want to drop me a message you can use the contact me form at the bottom of the page. Don't want to
wait? You can also drop me an instant message on Skype (<em>Skype info at the bottom of the page</em>).
</p>
</div>
</div>
</div>
</section>
<!-- Horizontal Line -->
<div class="container">
<p class=""></p>
<hr class="ms-auto">
</div>
<!-- Tech I Have Experience With -->
<section>
<div class="container" data-aos="flip-down" data-aos-duration="3000">
<div class="row">
<div class="col-12 text-center">
<h2 class="text-center text-capitalize">Tech i have experience with</h2>
<p class="mb-3">
Below you will see a quick visual summary of the technology i have experience and that i have used in some
of my
projects:
</p>
<!-- HTML5 -->
<img
src="https://img.icons8.com/external-tal-revivo-shadow-tal-revivo/24/000000/external-html-5-is-a-software-solution-stack-that-defines-the-properties-and-behaviors-of-web-page-logo-shadow-tal-revivo.png"
alt="HTML 5 Logo" />
<span>HTML5 |</span>
<!-- CSS -->
<img src="https://img.icons8.com/color/30/000000/css3.png" alt="CSS Logo" />
<span>CSS |</span>
<!-- JavaScript -->
<img src="https://img.icons8.com/color/30/000000/javascript--v1.png" alt="JavaScript Logo" />
<span>JavaScript |</span>
<!-- JQuery -->
<img
src="https://img.icons8.com/external-tal-revivo-shadow-tal-revivo/24/000000/external-jquery-is-a-javascript-library-designed-to-simplify-html-logo-shadow-tal-revivo.png"
alt="JQuery Logo" />
<span>JQuery |</span>
<!-- Python -->
<img src="https://img.icons8.com/color/28/000000/python--v1.png" alt="Python Logo" />
<span>Python |</span>
<!-- Django -->
<img class="django_icon" src="https://img.icons8.com/material/26/000000/django.png" alt="Django Logo" />
<span>Django |</span>
<!-- JSON -->
<img src="https://img.icons8.com/material-two-tone/24/000000/json.png" alt="JSON Logo" />
<span>JSON |</span>
<!-- Bootstrap -->
<img src="https://img.icons8.com/color/26/000000/bootstrap.png" alt="Bootstrap Logo" />
<span>Bootstrap |</span>
<!-- Materialize -->
<img src="images/materialize.png" class="materialize_png" alt="Materialize Logo" />
<span>Materialize |</span>
<!-- MongoDB -->
<img src="https://img.icons8.com/color/24/000000/mongodb.png" alt="MongoDB Logo" />
<span>MongoDB |</span>
<!-- mySQL -->
<img class="me-1" src="https://img.icons8.com/fluency/36/000000/mysql-logo.png" alt="mySQL Logo" />
<span>mySQL |</span>
<!-- Git -->
<img src="https://img.icons8.com/color/24/000000/git.png" alt="Git Logo" />
<span>Git |</span>
<!-- Github -->
<img src="https://img.icons8.com/ios-glyphs/24/000000/github.png" alt="GitHub Logo" />
<span>Github |</span>
<!-- Heroku -->
<img src="https://img.icons8.com/color/24/000000/heroku.png" alt="Heroku Logo" />
<span>Heroku |</span>
<!-- AWS -->
<img src="https://img.icons8.com/color/30/000000/amazon-web-services.png" alt="AWS Logo" />
<span>AWS |</span>
<!-- Flask -->
<img src="https://img.icons8.com/ios/48/000000/flask.png" alt="Flask Logo" />
<span>Flask |</span>
</div>
</div>
</div>
</section>
<!-- Horizontal Line -->
<div class="container">
<p class=""></p>
<hr class="ms-auto">
</div>
<!-- Qualifications -->
<section>
<div class="container" data-aos="flip-down" data-aos-duration="3000">
<div class="row">
<div class="col text-center">
<h2 class="text-center text-capitalize">Qualifications</h2>
<p class="mb-2">Below is a list of qualifications i currently hold</p>
<!-- Code Institute Diploma -->
<span>Diploma - Fullstack Software Development</span>
<img class="px-1"
src="https://img.icons8.com/external-vitaliy-gorbachev-lineal-color-vitaly-gorbachev/28/000000/external-certificate-award-vitaliy-gorbachev-lineal-color-vitaly-gorbachev.png"
alt="Certificate Icon" />
<span>|</span>
<!-- Project Management Diploma -->
<span>Professional Diploma in Project Management</span>
<img class="px-1"
src="https://img.icons8.com/external-vitaliy-gorbachev-lineal-color-vitaly-gorbachev/28/000000/external-certificate-award-vitaliy-gorbachev-lineal-color-vitaly-gorbachev.png"
alt="Certificate Icon" />
<span>|</span>
<!-- Prince2 -->
<span>Prince2 - Project Management</span>
<img class="px-1"
src="https://img.icons8.com/external-vitaliy-gorbachev-lineal-color-vitaly-gorbachev/28/000000/external-certificate-award-vitaliy-gorbachev-lineal-color-vitaly-gorbachev.png"
alt="Certificate Icon" />
<span>|</span>
<!-- 5 DAy Coding Challenge -->
<span>5 Day Coding Challenge - Code Institute</span>
<img class="px-1"
src="https://img.icons8.com/external-vitaliy-gorbachev-lineal-color-vitaly-gorbachev/28/000000/external-certificate-award-vitaliy-gorbachev-lineal-color-vitaly-gorbachev.png"
alt="Certificate Icon" />
<span>|</span>
</div>
</div>
</div>
</section>
<!-- Horizontal Line -->
<div class="container ms22">
<p class="scrollAnchor"><a href="" id="ms1" class="anchor">.</a></p>
<!-- The code below name="ms1" was removed from the line of code above and replaced with an id="ms1" as name is an obsolete attribute now -->
<!-- name="ms1" -->
<hr class="ms-auto">
</div>
<!-- MS1 Section -->
<section>
<div class="container" data-aos="fade-right" data-aos-duration="3000">
<div class="row">
<!-- Project & Site Title -->
<div class="col-12 text-center">
<h2 class="text-center text-capitalize">Milestone Project 1 - User Centric Front-End Development</h2>
<h4 class="text-center text-capitalize">- Dirt Be Gone -</h4>
<img src="/images/dirt-be-gone.png" alt="" class="img-fluid dbg-img">
</div>
</div>
<!-- Accordion -->
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<!-- Expand Accordion Button -->
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
<span class="mb-0 ms-auto text-capitalize h5">
Read About The Project
</span>
</button>
</h2>
<!-- Project Content -->
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<div class="row">
<div class="col-12">
<!-- About The project -->
<h5 class="text-capitalize">About the project</h5>
<p class="mx-0 my-2">
Dirt Be Gone was the first project that I built and submitted for my Milestone 1 project
with Code Institute. This is also the very first website i ever built.
</p>
<!-- Requirements -->
<h5 class="text-capitalize"><i class="fas fa-cogs"></i> Project Requirements</h5>
<p class="mx-0 my-2">
In this project, you will build a static front-end site to present useful information to
users using all the technologies that you have learned about so far. Data is presented in a way
that helps users achieve their goals, e.g. learning about a product/service that they are interested
in. The presentation of this data advances the site owner's goals, e.g. helps them market a
product/service.
</p>
<h5 class="text-capitalize"><i class="fas fa-file-code"></i> Milestone project 1 technologies learned
</h5>
<p>
As with most students who start learning to code, our first module taught us all about HTML5 & CSS.
For this project we had to demonstrate an understanding of these 2 technologies and apply the
learning we had acquired.
</p>
<!-- Technologies Required -->
<h5 class="text-capitalize"><i class="fas fa-laptop-code"></i> Technologies Required</h5>
<ul>
<li>HTML5</li>
<li>CSS</li>
</ul>
<h5 class="text-capitalize"><i class="fas fa-laptop-code"></i> Optional Technologies</h5>
<ul>
<li>Bootstrap</li>
<li>Other CSS libraries / frameworks</li>
</ul>
<!-- The Concept -->
<h5 class="text-capitalize"><i class="fas fa-lightbulb"></i> The Concept</h5>
<p class="mx-0 my-2">
The concept of the website was that of a fictional residential cleaning and property maintenance
company that operated in the Dublin (Ireland) area. On the site users could easily browse and find
out about the history of the company, the services they provide along with pricing (Where
applicable), have access to a F.A.Q page, and also be able to contact the company via the contact us
page.
</p>
<!-- Mobile development -->
<h5 class="text-capitalize"><i class="fas fa-mobile-alt"></i> Mobile Development</h5>
<p>
From day one at Code Institute we were made aware of the importance of the mobile first development
approach. The Dirt Be Gone site was built with this in mind from the very beginning.
</p>
<!-- Github & Live Site Links -->
<h5 class="text-capitalize mb-3">Live site & Github links</h5>
<p class="mx-0 mb-1"><strong>Live site <i class="fas fa-tv"></i> : </strong><a
href="https://smcgdub.github.io/Dirt-Be-Gone-MS1-Project-/index.html" target="_blank">Click
here</a></p>
<p class="mx-0 mt-1"><strong>Github Repo <i class="fab fa-github"></i> : </strong><a
href="https://github.com/smcgdub/Dirt-Be-Gone-MS1-Project-" target="_blank">Click here</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Horizontal Line -->
<div class="container ms22">
<p class="scrollAnchor"><a href="" id="ms2" class="anchor">.</a></p>
<!-- The code below name="ms2" was removed from the line of code above and replaced with an id="ms2" as name is an obsolete attribute now -->
<!-- name="ms2" -->
<hr class="ms-auto">
</div>
<!-- MS2 Section -->
<section>
<div class="container" data-aos="fade-left" data-aos-duration="3000">
<div class="row">
<!-- Project & Site Title -->
<div class="col-12 text-center">
<h2 class="text-center">Milestone Project 2 - Interactive Front-End Development</h2>
<h4 class="text-center">- Discover Ireland -</h4>
<img src="/images/discover_ireland.png" alt="" class="img-fluid dbg-img">
</div>
</div>
<!-- Accordion -->
<div class="accordion accordion-flush" id="accordionFlushExampleTwo">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<!-- Expand Accordion Button -->
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
<span class="mb-0 ms-auto text-capitalize h5">
Read About The Project
</span>
</button>
</h2>
<!-- Project Content -->
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExampleTwo">
<div class="accordion-body">
<div class="row">
<div class="col-12">
<!-- About The project -->
<h5 class="text-capitalize">About the project</h5>
<p class="mx-0 my-2">
Discover Ireland was the 2nd project that I built and submitted as my Milestone 2 project
with Code Institute.
</p>
<!-- Requirements -->
<h5 class="text-capitalize"><i class="fas fa-cogs"></i> Project Requirements</h5>
<p class="mx-0 my-2">
In this project, you will build an interactive front-end site. The site should respond to
the users' actions, allowing users to actively engage with data, alter the way the site displays the
information to achieve their preferred goals.
</p>
<h5 class="text-capitalize"><i class="fas fa-file-code"></i> Milestone project 2 technologies learned
</h5>
<p>
After learning about HTML5 & CSS in module 1, in module 2 we progressed to learning about
JavaScript. For this project we had to demonstrate an understanding of JavaScript, as well as HTML5
& CSS.
</p>
<!-- Technologies Required -->
<h5 class="text-capitalize"><i class="fas fa-laptop-code"></i> Technologies required</h5>
<ul>
<li>HTML5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h5 class="text-capitalize"><i class="fas fa-laptop-code"></i> Optional Technologies</h5>
<ul>
<li>JQuery</li>
<li>JavaScript libraries</li>
<li>External API's</li>
</ul>
<!-- The Concept -->
<h5 class="text-capitalize"><i class="fas fa-lightbulb"></i> The concept</h5>
<p class="mx-0 my-2">
The concept of this website was to act as a small guide to provide users who may be considering
visiting the cities of Dublin, Cork or Galway with some information on what each city has to offer.
</p>
<p>
On the top of each page each i incorporated a weather widget that gives a live 7 day forecast for
each city (This is Ireland so don't expect a lot of sunshine lol). Below this is also a brief
paragraph of the history of each city so visitors can understand a bit more about its history. I
kept this section short and limited to 1 paragraph as to much text on a mobile screen wouldn't
create a positive user experience.
</p>
<p>
I also incorporated a fully functioning Skyscanner widget into the site. This widget allows
users to check flight prices, availability and to book flights if they wish to do so (Flights are
booked on the Skyscanner website that opens in another tab) To make the widget user friendly i have
pre-populated it with the
closest airport to each city.
</p>
<p>
In the things to do section i used a short video for each city that was provided by the local
tourist board, I kept the video length as close to 1 minute as possible. Below that there is an
interactive google map where users can search for local Hotels, Bars, Restaurants and Tourist
Attractions. I also incorporated an our top recommendations section for each city.
</p>
<p>
Finally the contact us page is powered by email JS.
</p>
<!-- Mobile Development -->
<h5 class="text-capitalize"><i class="fas fa-mobile-alt"></i> Mobile Development</h5>
<p>Again the site was built using the mobile first approach from the very beginning</p>
<!-- Github & Live Site Links -->
<h5 class="text-capitalize mb-3">Live site & Github links</h5>
<p class="mx-0 mb-1"><strong>Live site <i class="fas fa-tv"></i> : </strong><a
href="https://smcgdub.github.io/Discover-Ireland-MS2-Project/" target="_blank">Click
here</a></p>
<p class="mx-0 mt-1"><strong>Github Repo <i class="fab fa-github"></i> : </strong><a
href="https://github.com/smcgdub/Discover-Ireland-MS2-Project" target="_blank">Click here</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Horizontal Line -->
<div class="container ms22">
<p class="scrollAnchor"><a href="" id="ms3" class="anchor">.</a></p>
<!-- The code below name="ms3" was removed from the line of code above and replaced with an id="ms3" as name is an obsolete attribute now -->
<!-- name="ms3" -->
<hr class="ms-auto">
</div>
<!-- MS3 Section -->
<section>
<div class="container" data-aos="fade-down-right" data-aos-duration="3000">
<div class="row">
<!-- Project & Site Title -->
<div class="col-12 text-center">
<h2 class="text-center">Milestone Project 3 - Python and Data Centric Development</h2>
<h4 class="text-center">- Tipsy Mac Staggers -</h4>
<img src="/images/tipsy_mac_staggers.png" alt="" class="img-fluid dbg-img">
</div>
</div>
<!-- Accordion -->
<div class="accordion accordion-flush" id="accordionFlushExampleThree">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<!-- Expand Accordion Button -->
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
<span class="mb-0 ms-auto text-capitalize h5">
Read About The Project
</span>
</button>
</h2>
<!-- Project Content -->
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
data-bs-parent="#accordionFlushExampleThree">
<div class="accordion-body">
<div class="row">
<div class="col-12">
<!-- About The project -->
<h5 class="text-capitalize">About the project</h5>
<p class="mx-0 my-2">
Tipsy Mac Staggers was the 3rd project that I built and submitted for my Milestone 3 project with
Code Institute.
</p>
<!-- Requirements -->
<h5 class="text-capitalize"><i class="fas fa-cogs"></i> Project Requirements</h5>
<p class="mx-0 my-2">
In this project, you will build a full-stack site that allows your users to manage a common dataset
about a particular domain. Users make use of the site to share their own data with the community,
and benefit from having convenient access to the data provided by all other members.
</p>
<!-- Technologies Learned -->
<h5 class="text-capitalize"><i class="fas fa-file-code"></i> Milestone project 3 technologies learned
</h5>
<p>
In module 3 i progressed onto learning about Python & Databases. For this project We had to
demonstrate that we understood about data, creating it, storing it, manipulating it and deleting it.
The project required us to implement all CRUD (Create, Read, Update, Delete) functionality for site
users.
</p>
<p>
For this project we were also introduced to Heroku as using Gitghub for the hosting of this type of
project would not be an feasible.
</p>
<!-- Technologies Required -->
<h5 class="text-capitalize"><i class="fas fa-laptop-code"></i> Technologies required</h5>
<ul>
<li>HTML5</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Python & Flask</li>
<li>MongoDB</li>
<li>Heroku</li>
</ul>
<!-- The Concept -->
<h5 class="text-capitalize"><i class="fas fa-lightbulb"></i> The concept</h5>
<p class="mx-0 my-2">
I built this website to act as a simple drinks database where users can either search for, or add a
new drink/cocktail they wish to try. Users uploading drinks will be asked to provide all of the
ingredients, quantities and instructions on to make each drink. Any user, whether registered or
unregistered can use the site, however, only registered users will have the ability to upload their
own cocktail/drinks recipes. Registered users will also have the ability to edit and delete the
content that they have created.
</p>
<p>
As the site is primarily one for alcoholic drinks i tried to implement a level of defensive
programming and responsibility on my part. Any user who is coming to the site for the first time
will see an age verifier asking if they are of the legal drinking age for there country. I didn't
want to set a specific age for this, over 21's only for example as the legal drinking age in each
country can vary.
</p>
<p>
I understand that age verifiers are easy to get around and even if you requested a date of birth
from a user they could easily just workout the dates they need to enter to gain access to the site.
This feature was added just to try and add a level of social responsibility to the site.
</p>
<!-- Mobile Development -->
<h5 class="text-capitalize"><i class="fas fa-mobile-alt"></i> Mobile Development</h5>
<p>Again the site was built using the mobile first approach from the very beginning</p>
<!-- Github & Live Site Links -->
<h5 class="text-capitalize mb-3">Live site & Github links</h5>
<p class="mx-0 mb-1"><strong>Live site <i class="fas fa-tv"></i> : </strong><a
href="https://ms3-project-tipsy-mac-staggers.herokuapp.com/" target="_blank">Click
here</a></p>
<p class="mx-0 mt-1"><strong>Github Repo <i class="fab fa-github"></i> : </strong><a
href="https://github.com/smcgdub/MS3_Project_Tipsy_Mac_Staggers" target="_blank">Click here</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Horizontal Line -->
<div class="container ms22">
<p class="scrollAnchor"><a href="" id="ms4" class="anchor">.</a></p>
<!-- The code below name="ms4" was removed from the line of code above and replaced with an id="ms4" as name is an obsolete attribute now -->
<!-- name="ms4" -->
<hr class="ms-auto">
</div>
<!-- MS4 Section -->
<section>
<div class="container" data-aos="fade-down-left" data-aos-duration="3000">
<div class="row">
<!-- Project & Site Title -->
<div class="col-12 text-center">
<h2 class="text-center">Milestone Project 4 - Full Stack Frameworks with Django</h2>
<h4 class="text-center">- In Safe Hands -</h4>
<img src="/images/in_safe_hands.png" alt="" class="img-fluid dbg-img">
</div>
</div>
<!-- Accordion -->
<div class="accordion accordion-flush" id="accordionFlushExampleFour">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingFour">
<!-- Expand Accordion Button -->
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
<span class="mb-0 ms-auto text-capitalize h5">
Read About The Project
</span>
</button>
</h2>
<!-- Project Content -->
<div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour"
data-bs-parent="#accordionFlushExampleFour">
<div class="accordion-body">
<div class="row">
<div class="col-12">
<!-- About The project -->
<h5 class="text-capitalize">About the project</h5>
<p class="mx-0 my-2">In Safe Hands was created as my 4th and final milestone project with Code
Institute.
</p>
<!-- Requirements -->
<h5 class="text-capitalize"><i class="fas fa-cogs"></i> Project Requirements</h5>
<p class="mx-0 my-2">In this project, you will build a full-stack site based around business logic
used to control a centrally-owned dataset. You will set up an authentication mechanism and provide
paid access to the site's data and/or other activities based on the dataset, such as the purchase of
a product/service.</p>
<!-- Technologies Learned -->
<h5 class="text-capitalize"><i class="fas fa-file-code"></i> Technologies Learned</h5>
<p>
For the 4th and final module we learned fullstack frameworks with Django and everything that was
necessary to build a fully functioning e-commerce site.
</p>
<!-- Required Technologies -->
<h5 class="text-capitalize"><i class="fas fa-laptop-code"></i> Technologies Required</h5>
<ul>
<li>HTML5</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Python</li>
<li>Django</li>
<li>Relational database (recommending MySQL or Postgres)</li>
<li>Stripe payments</li>
<li>Heroku</li>
</ul>
<!-- The Concept -->
<h5 class="text-capitalize"><i class="fas fa-lightbulb"></i> The concept</h5>
<p class="mx-0 my-2">The website is a Django e-commerce website for a company that provides
different types of PPE products and equipment to the general public as well as several COVID-19
specific items.Users of the site are able to purchase products whether they are registered users or
if they wish to checkout as a guest. Registered users however benefit from more access to certain
features on the site than none registered users.
</p>
<!-- Mobile Development -->
<h5 class="text-capitalize"><i class="fas fa-mobile-alt"></i> Mobile Development</h5>
<p>Again the site was built using the mobile first approach from the very beginning</p>
<!-- Github & Live Site Links -->
<h5 class="text-capitalize mb-3">Live site & Github links</h5>
<p class="mx-0 mb-1"><strong>Live site <i class="fas fa-tv"></i> : </strong><a
href="https://ms4-in-safe-hands.herokuapp.com/" target="_blank">Click
here</a></p>
<p class="mx-0 mt-1"><strong>Github Repo <i class="fab fa-github"></i> : </strong><a
href="https://github.com/smcgdub/MS4_In_Safe_Hands" target="_blank">Click here</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Horizontal Line -->
<div class="container ms22">
<p class="scrollAnchor"><a href="" id="alien_911_project" class="anchor">.</a></p>
<!-- The code below name="ms4" was removed from the line of code above and replaced with an id="ms4" as name is an obsolete attribute now -->
<!-- name="ms4" -->
<hr class="ms-auto">
</div>
<!-- Alien 911 Project Section -->
<section>
<div class="container" data-aos="fade-right" data-aos-duration="3000">
<div class="row">
<!-- Project & Site Title -->
<div class="col-12 text-center">
<h2 class="text-center">Freelance Project - Ministry of Defence Data</h2>
<h4 class="text-center">- Alien 911 (Ongoing development) -</h4>
<img src="/images/alien_911/aliens911_am_i_responsive_home.png" alt="" class="img-fluid dbg-img">
</div>
</div>
<!-- Accordion -->
<div class="accordion accordion-flush" id="accordionFlushExampleSeven">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingSeven">
<!-- Expand Accordion Button -->
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven">
<span class="mb-0 ms-auto text-capitalize h5">
Read About The Project
</span>
</button>
</h2>
<!-- Project Content -->
<div id="flush-collapseSeven" class="accordion-collapse collapse" aria-labelledby="flush-headingSeven"
data-bs-parent="#accordionFlushExampleSeven">
<div class="accordion-body">
<div class="row">
<div class="col-12">
<!-- About The project -->
<h5 class="text-capitalize">About the project</h5>
<p class="mx-0 my-2">
Alien 911 is a project i am doing in collaboration with ARCHIE UK. The site is a database of all of
the recorded British UFO sightings using data compiled from Britain's Ministry of Defence (MoD). All
of the records presented are records that have been declassified for public record. The data
presented will include:
<ul>
<li>Event type</li>
<li>Event date</li>
<li>Event description</li>
<li>GPS & location data of event</li>
<li>Modern map of event area</li>
<li>LiDAR terrain imagery of event</li>
</ul>
</p>
<p class="">
In addition where the data is available, we will also provide images and video footage from each
sighting. The data is currently limited to Britain but will be expanded to other countries as the
project continues.
</p>
<!-- Technologies Used-->
<h5 class="text-capitalize"><i class="fas fa-laptop-code"></i> Technologies Used</h5>
<ul>
<li>HTML5</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Google Maps</li>
<li>Lidar Digital Terrain Mapping (DTM)</li>
<li>Non Relational Database</li>
<li>XML</li>
<!-- <li>Python</li>
<li>Django</li> -->
<!-- <li>Relational database (recommending MySQL or Postgres)</li> -->
</ul>
<!-- The Concept -->
<h5 class="text-capitalize"><i class="fas fa-lightbulb"></i> The concept</h5>
<p class="mx-0 my-2">The site is to serve as a database where the general public can access
declassified Ministry of Defence data. Users can read and access all of the data and information
held on UFO sightings in Britain. Where possible users can also access images and video footage of
UFO events that have taken place.
</p>
<!-- Mobile Development -->
<h5 class="text-capitalize"><i class="fas fa-mobile-alt"></i> Mobile Development</h5>
<p>The site was built using the mobile first approach from the very beginning</p>
<!-- Development Images -->
<h5><i class="fas fa-tools"></i> Development Screenshots</h5>
<!-- Slide Controls -->
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1">
</button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
aria-label="Slide 2">
</button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
aria-label="Slide 3">
</button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3"
aria-label="Slide 4">
</button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4"
aria-label="Slide 5">
</button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="5"
aria-label="Slide 6">
</button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="6"
aria-label="Slide 7">
</button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="7"
aria-label="Slide 8">
</button>
</div>
<div class="carousel-inner">
<!-- First Image -->
<div class="carousel-item active">
<img src="/images/alien_911/aliens911_homepage.png" class="d-block w-100"
alt="Alien 911 Homepage Image">
<div class="carousel-caption d-none d-md-block">
<h5>Homepage</h5>
</div>
</div>
<!-- Second Image -->
<div class="carousel-item">
<img src="/images/alien_911/aliens911_about.png" class="d-block w-100"
alt="Alien 911 About Us Page Image">
<div class="carousel-caption d-none d-md-block">
<h5>About Us</h5>
</div>
</div>
<!-- Third Image -->
<div class="carousel-item">
<img src="/images/alien_911/aliens911_search.png" class="d-block w-100"
alt="Alien 911 UFO Search Page Image">
<div class="carousel-caption d-none d-md-block">
<h5>UFO Search Page</h5>
</div>
</div>
<!-- Fourth Image -->
<div class="carousel-item">
<img src="/images/alien_911/aliens911_search_results.png" class="d-block w-100"
alt="Alien 911 UFO Search Page Image">
<div class="carousel-caption d-none d-md-block">
<h5>UFO Search Results</h5>
</div>
</div>
<!-- Fifth Image -->
<div class="carousel-item">
<img src="/images/alien_911/aliens911_ufo_footage.png" class="d-block w-100"
alt="Alien 911 Contact Us Page Image">
<div class="carousel-caption d-none d-md-block">
<h5>UFO Footage</h5>
</div>
</div>
<!-- Sixth Image -->
<div class="carousel-item">
<img src="/images/alien_911/aliens911_ufo_images.png" class="d-block w-100"
alt="Alien 911 Contact Us Page Image">
<div class="carousel-caption d-none d-md-block">
<h5>UFO Images</h5>
</div>
</div>
<!-- Seventh Image -->
<div class="carousel-item">
<img src="/images/alien_911/aliens911_ufo_reports.png" class="d-block w-100"
alt="Alien 911 Contact Us Page Image">
<div class="carousel-caption d-none d-md-block">
<h5>UFO Reports</h5>
</div>
</div>
<!-- Eighth Image -->
<div class="carousel-item">
<img src="/images/alien_911/aliens911_contact_us.png" class="d-block w-100"
alt="Alien 911 Contact Us Page Image">
<div class="carousel-caption d-none d-md-block">
<h5>Contact Us</h5>
</div>
</div>
</div>
<!-- Carousel Controls Previous -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<!-- Carousel Controls Next -->
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<br>
<!-- Github & Live Site Links -->
<h5 class="text-capitalize">Live site & Github links</h5>
<p class="mx-0 mb-1"><strong>Live site <i class="fas fa-tv"></i> : </strong><a
href="https://www.aliens911.com/index.html" target="_blank">Click
here</a></p>
<p class="mx-0 mt-1"><strong>Github Repo <i class="fab fa-github"></i> : </strong><a
href="https://github.com/smcgdub/alliens911" target="_blank">Click here</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Horizontal Line -->
<div class="container ms22">
<p class="scrollAnchor"><a href="" id="magnet_fishing_project" class="anchor">.</a></p>
<hr class="ms-auto">
</div>
<!-- Magnet Fishing Section -->
<section>
<div class="container" data-aos="fade-down-left" data-aos-duration="3000">
<div class="row">
<!-- Project & Site Title -->
<div class="col-12 text-center">
<h2 class="text-center">Freelance Project - UK Geographical Data</h2>
<h4 class="text-center">- Magnet Fishing -</h4>
<img src="/images/magnet_fishing.png" alt="" class="img-fluid dbg-img">
</div>
</div>
<!-- Accordion -->
<div class="accordion accordion-flush" id="accordionFlushExampleEight">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingEight">
<!-- Expand Accordion Button -->
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseEight" aria-expanded="false" aria-controls="flush-collapseEight">
<span class="mb-0 ms-auto text-capitalize h5">
Read About The Project
</span>
</button>
</h2>
<!-- Project Content -->
<div id="flush-collapseEight" class="accordion-collapse collapse" aria-labelledby="flush-headingEight"
data-bs-parent="#accordionFlushExampleEight">
<div class="accordion-body">
<div class="row">
<div class="col-12">
<!-- About The project -->
<h5 class="text-capitalize">About the project</h5>
<p class="mx-0 my-2">Magnet Fishing UK is a database of more than 200,000 British Archaeological Sites
covering the whole of England, Scotland and Wales. Members will be able to access a wide range of
maps, historical data, view geographical locations where magnet fishing sites exist and view
detailed reports on potential and reported magnet fishing sites.
The data available to users is:
</p>
<ul>
<li>LiDAR Digital Terrain Maps (DTM)</li>
<li>Potential Magnet Fishing Sites List</li>
<li>Potential Magnet Fishing Sites Maps</li>
<li>OS first series (1805 - 1869)</li>
<li>Early old historical map (1888 - 1913)</li>
<li>2nd edition old historical map (1903 - 1930)</li>
<li>Later 1 historical map (1955 - 1961)</li>
<li>Pre victorian historical maps</li>
</ul>
<!-- Technologies Used-->
<h5 class="text-capitalize"><i class="fas fa-laptop-code"></i> Technologies Used</h5>
<ul>
<li>HTML5</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Google Maps</li>
<li>Lidar Digital Terrain Mapping (DTM)</li>
<li>Non Relational Database</li>
<li>XML</li>
<li>Pearl</li>
</ul>
<!-- The Concept -->
<h5 class="text-capitalize"><i class="fas fa-lightbulb"></i> The concept</h5>
<p class="mx-0 my-2">The site serves as an up to date online database where magnet fishers can search
and find potential locations where they may carry out magnet fishing. Paid members will have access
to a wide range of geographical and historical maps as well as get access to reports of confirmed
locations where they may carry out magnet fishing.
</p>
<!-- Mobile Development -->
<h5 class="text-capitalize"><i class="fas fa-mobile-alt"></i> Mobile Development</h5>
<p>The site was built using the mobile first approach from the very beginning</p>
<!-- Github & Live Site Links -->
<h5 class="text-capitalize mb-3">Live site & Github links</h5>
<p class="mx-0 mb-1"><strong>Live site <i class="fas fa-tv"></i> : </strong><a
href="https://magnet-fishing-uk.com/" target="_blank">Click
here</a></p>
<p class="mx-0 mt-1"><strong>Github Repo <i class="fab fa-github"></i> : </strong><a
href="https://github.com/smcgdub/Magnet-Fishing" target="_blank">Click here</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Horizontal Line -->
<div class="container ms22">
<p class="scrollAnchor"><a href="" id="mini_projects" class="anchor">.</a></p>
<hr class="ms-auto">
</div>
<!-- Mini Projects Section -->
<section>
<div class="container" data-aos="fade-down-left" data-aos-duration="3000">
<div class="row">
<!-- Project & Site Title -->