-
Notifications
You must be signed in to change notification settings - Fork 0
/
website-software development-portfolio.html
844 lines (626 loc) · 67.1 KB
/
website-software development-portfolio.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Hi, I'm Angela and here you can find every project I joined in the website and software development field.">
<meta name="keywords" content="Angela Iredia, Website, Software, Software Development, Website Development, Development">
<meta name="author" content="Angela Iredia">
<meta property="og:image" content="https://raw.githubusercontent.com/airedia/angelairedia-portfolio/9e0c354db57c9af09c055652bdc7e0e294079c0b/images/angelairedia_portfolio_logo.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Angela Iredia (Portfolio) - Website/Software Development</title>
<link rel="stylesheet" type="text/css" href="styles/design.css" />
<!-- Ajax and Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- image for hambuger menu -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
html,body{
overflow-x: hidden;
}
</style>
<header>
<div class="topnav" id="myTopnav" >
<a href="index.html#portfolio" class="active">Portfolio</a>
<a href="index.html" >Home</a>
<a href="index.html#about" >About Me</a>
<a href="index.html#contact" >Contact</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars" ></i>
</a>
<img class="logo" src="images/angelairedia_portfolio_logo.png" alt="angelairediaportfolio_logo">
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</header>
<body>
<div class="parallax_website_software_dev">
<br><br><br><br><br><br><br>
<h2 style="color: #2D2D2D; text-shadow: 2px 3px white;">Website and Software <br> Development</h2>
</div>
<div class="row">
<div class="section-a" style="background-color: #FFFF;">
<div class="col-sm-6">
<div class="index" style="padding-left: 2%;">
<a href="index.html#portfolio"> ← Back</a>
<br><br>
<div style="background-color: #f4f4f4; border-style:solid; color: black; border-width: thin;">
<h6 style="font-weight: bold;"> <span class="arrow-index closed"></span> Index</h6>
<div class="list-items" style="font-size: 15px;">
<ol type="1">
<li> <span class="arrow closed"></span><a href="#MBTI"> (Prototype) Development of a Friendship Matching Tool Algorithm <br> based on the MBTI Personality Types with usage in a web-application</a>
<ol id="MBTI-sub-index" type="i" style="display: none;">
<li> <a href="#MBTI-description">Description</a></li>
<li><a href="#MBTI-mbti">The Myers-Briggs Type Indicator (MBTI)</a></li>
<li><a href="#MBTI-algorithm">The MBTI-based Algorithm</a></li>
<li><a href="#MBTI-web-application">The Web-based Application</a></li>
</ol>
</li>
<li> <span class="arrow-2 closed"></span> <a href="#Historal_Booking">(Prototype) Historal Booking - for booking a place in the queue in one <br> of the 7 Wonders of the World</a>
<ol id="Historal-sub-index" type="i" style="display: none;">
<li> <a href="#Historal-description">Description</a></li>
<li><a href="#Historal-sites">The 7 Wonders of the World</a></li>
<li><a href="#Historal-web-application">The Web-based Application</a></li>
</ol>
</li>
<li> <span class="arrow-3 closed"></span><a href="#Kent_Maps_Online">Kent Maps Online</a>
<ol id="Kent_Maps-sub-index" type="i" style="display: none;">
<li> <a href="#Kent_Maps-description">Description</a></li>
<li><a href="#Kent_Maps-web-application">The Web-based Application</a></li>
</ol>
</li>
</ol>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var arrow = document.querySelector(".arrow-index");
arrow.addEventListener("click", toggleListItems);
function toggleListItems() {
var listItems = document.querySelector(".list-items");
var arrow = listItems.querySelector(".arrow-index");
if (listItems.style.display === "none") {
listItems.style.display = "block";
arrow.classList.remove("closed");
} else {
listItems.style.display = "none";
arrow.classList.add("closed");
}
}
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var arrow = document.querySelector(".arrow");
arrow.addEventListener("click", toggleSubIndex);
function toggleSubIndex() {
var subIndex = document.getElementById("MBTI-sub-index");
var arrow = subIndex.previousElementSibling.querySelector(".arrow");
if (subIndex.style.display === "none") {
subIndex.style.display = "block";
arrow.classList.remove("closed");
} else {
subIndex.style.display = "none";
arrow.classList.add("closed");
}
}
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var arrow = document.querySelector(".arrow-2");
arrow.addEventListener("click", toggleSubIndex2);
function toggleSubIndex2() {
var subIndex = document.getElementById("Historal-sub-index");
var arrow = subIndex.previousElementSibling.querySelector(".arrow-2");
if (subIndex.style.display === "none") {
subIndex.style.display = "block";
arrow.classList.remove("closed");
} else {
subIndex.style.display = "none";
arrow.classList.add("closed");
}
}
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var arrow = document.querySelector(".arrow-3");
arrow.addEventListener("click", toggleSubIndex3);
function toggleSubIndex3() {
var subIndex = document.getElementById("Kent_Maps-sub-index");
var arrow = subIndex.previousElementSibling.querySelector(".arrow-3");
if (subIndex.style.display === "none") {
subIndex.style.display = "block";
arrow.classList.remove("closed");
} else {
subIndex.style.display = "none";
arrow.classList.add("closed");
}
}
});
</script>
</div>
</div>
</div>
<script>
// Check if the device is a mobile device
function isMobileDevice() {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
}
// Handle the parallax effect for mobile devices
function handleParallaxForMobile() {
var parallaxElement = document.querySelector('.parallax_website_software_dev');
var contentBelowElement = document.querySelector('.section-a');
var navigationBar = document.getElementById('myTopnav');
var navigationBarHeight = navigationBar.offsetHeight;
var lastScrollPosition = 0;
window.addEventListener('scroll', handleParallax);
function handleParallax() {
var scrollPosition = window.pageYOffset;
var parallaxOffset = (scrollPosition - parallaxElement.offsetTop) * 0.4;
if (scrollPosition >= parallaxElement.offsetTop) {
parallaxElement.style.transform = 'translateY(' + parallaxOffset + 'px)';
contentBelowElement.style.transform = 'translateY(' + -parallaxOffset + 'px)';
} else {
parallaxElement.style.transform = 'translateY(0)';
contentBelowElement.style.transform = 'translateY(0)';
}
// Handle navigation bar transformation
if (scrollPosition >= parallaxElement.offsetTop) {
navigationBar.style.transform = 'translateY(0)';
} else {
navigationBar.style.transform = 'translateY(-' + navigationBarHeight + 'px)';
}
// Reset navigation bar transformation on scroll direction change
if (scrollPosition < lastScrollPosition) {
navigationBar.style.transform = 'translateY(0)';
}
lastScrollPosition = scrollPosition;
}
// Apply the CSS for media queries
var mq280 = window.matchMedia("(max-width: 280px)");
var mq539 = window.matchMedia("(max-width: 539px)");
var mq768 = window.matchMedia("(max-width: 768px)");
var mq1024 = window.matchMedia("(max-width: 1024px)");
function applyCSSForMediaQueries() {
if (mq280.matches || mq539.matches || mq768.matches || mq1024.matches) {
navigationBar.style.transition = 'transform 0.3s ease';
navigationBar.style.transform = 'translateY(0)';
contentBelowElement.style.height = '1200px'; // Set height to 1200px
} else {
navigationBar.style.transition = '';
navigationBar.style.transform = '';
contentBelowElement.style.height = ''; // Reset to default height
}
}
// Apply the CSS initially and on window resize
applyCSSForMediaQueries();
window.addEventListener('resize', applyCSSForMediaQueries);
}
// Apply parallax effect for each media query on mobile devices
if (isMobileDevice()) {
if (window.matchMedia("(max-width: 280px)").matches) {
handleParallaxForMobile();
}
if (window.matchMedia("(max-width: 539px)").matches) {
handleParallaxForMobile();
}
if (window.matchMedia("(max-width: 768px)").matches) {
handleParallaxForMobile();
}
if (window.matchMedia("(max-width: 1024px)").matches) {
handleParallaxForMobile();
}
}
</script>
<div id="MBTI">
<div class="article-items">
<h3 class="article-header" style="font-weight: bold;">1. (Prototype) Development of a Friendship Matching Tool Algorithm based on the MBTI Personality Types with usage in a web-application</h3>
<div class="parallax_MBTI"></div>
<div class="section-b" style="background-color: #FFFF;">
<div class="article-text">
<div class="row">
<div class="col-sm-6">
<h5 class="article-sub-heading" id="MBTI-description">Description</h5>
<p>
As part of a university full-stack web-application development project for the final year, the development of a friendship matching tool algorithm and its integration into a web-based application takes into consideration the MBTI psychological theory. The Myers-Briggs Type Indicator (MBTI) is a self-report test designed to identify a person's personality type, strengths, and preferences based on cognitive functions. The questionnaire was developed by Isabel Myers and her mother Katherine Briggs, drawing from Carl Jung's theory of personality types. Today, the MBTI theory is widely used as one of the world's most popular psychological instruments.
<br><br>In this particular project, MBTI theory is used to find the most compatible friends for users within a university context, focusing on psychological functions. According to <a href="https://www.nhs.uk/every-mind-matters/lifes-challenges/loneliness/#what-is-loneliness" style="font-weight: bold; color: #1CAAD9; text-decoration: none;"> NHS England </a>(National Health Service), approximately 45% of UK residents suffer from loneliness, and this issue extends to university students as well. Many individuals face challenges in forming new friendships in adulthood due to various factors, including lifestyle and behavioural attitudes. Often, these individuals are unfairly stereotyped or judged, such as introverted individuals being labelled as socially withdrawn. While social networks have provided some relief by connecting people regardless of their physical location, the aim of this project is to address this problem more comprehensively.
</p>
</div>
<div class="col-sm-6" style="text-align: center;">
<img src="images/psychology.png" alt="psychology" style="height: 200px;"> <br> <br>
</div>
<div class="col-sm-6">
<h5 class="article-sub-heading" id="MBTI-mbti">The Myers-Briggs Type Indicator (MBTI)</h5>
<p>
MBTI stands for the Myers-Briggs Type Indicator. It is a widely used psychological tool that assesses and categorizes personality types. The MBTI was developed by Isabel Briggs Myers and her mother, Katherine Briggs, based on the theories of Swiss psychiatrist Carl Jung.
<br><br>The MBTI measures personality across four dichotomies:<br>
<div style="padding-left: 2%;">
1.<strong> Extraversion (E) vs. Introversion (I):</strong> This dichotomy focuses on how individuals direct and receive energy. Extraverts are typically outgoing, sociable, and energized by external stimuli, while introverts tend to be more reserved, introspective, and energized by solitude.
<br>2.<strong> Sensing (S) vs. Intuition (N):</strong> This dichotomy explores how individuals gather and process information. Sensing types rely on concrete data and details, focusing on what is tangible and practical, while intuitive types are more inclined to look at patterns, possibilities, and the bigger picture.
<br>3. <strong> Thinking (T) vs. Feeling (F):</strong> This dichotomy examines how individuals make decisions and evaluate information. Thinking types prioritize logical analysis, objectivity, and consistency, whereas feeling types prioritize personal values, emotions, and the impact on others.
<br>4.<strong> Judging (J) vs. Perceiving (P):</strong> This dichotomy relates to how individuals approach and structure their external environment. Judging types prefer order, planning, and decisiveness, while perceiving types are more adaptable, spontaneous, and open-ended.
</div>
<br>These dichotomies combine to form sixteen different personality types, such as ISTJ, ENFP, or ENTJ. Each type represents a unique combination of these preferences and provides insights into how individuals perceive the world, make decisions, and interact with others. The MBTI is commonly used in various settings, including personal development, career counseling, and team-building exercises.
<br><br>The 16 personalities types are: <br>
<div style="padding-left: 2%;">
<br> 1. <strong>ISTJ:</strong> Introverted, Sensing, Thinking, Judging
<br> 2. <strong>ISFJ:</strong> Introverted, Sensing, Feeling, Judging
<br> 3. <strong>INFJ:</strong> Introverted, Intuition, Feeling, Judging
<br> 4. <strong>INTJ:</strong> Introverted, Intuition, Thinking, Judging
<br> 5. <strong>ISTP:</strong> Introverted, Sensing, Thinking, Perceiving
<br> 6. <strong>ISFP:</strong> Introverted, Sensing, Feeling, Perceiving
<br> 7. <strong>INFP:</strong> Introverted, Intuition, Feeling, Perceiving
<br> 8. <strong>INTP:</strong> Introverted, Intuition, Thinking, Perceiving
<br> 9. <strong>ESTP:</strong> Extraverted, Sensing, Thinking, Perceiving
<br>10. <strong>ESFP:</strong> Extraverted, Sensing, Feeling, Perceiving
<br>11. <strong>ENFP:</strong> Extraverted, Intuition, Feeling, Perceiving
<br>12. <strong>ENTP:</strong> Extraverted, Intuition, Thinking, Perceiving
<br>13. <strong>ESTJ:</strong> Extraverted, Sensing, Thinking, Judging
<br>14. <strong>ESFJ:</strong> Extraverted, Sensing, Feeling, Judging
<br>15. <strong>ENFJ:</strong> Extraverted, Intuition, Feeling, Judging
<br>16. <strong>ENTJ:</strong> Extraverted, Intuition, Thinking, Judging
</div>
</p>
</div>
<div class="col-sm-6" style="text-align: center;">
<br><br>
<img src="images/Cognitive_Functions.svg.png" alt="cognitive functions"> <br> <br>
<!-- add another image here-->
</div>
<div class="col-sm-6">
<h5 class="article-sub-heading" id="MBTI-algorithm">The MBTI-based Algorithm</h5>
<p>
The algorithm incorporates the MBTI personality types by calculating the compatibility between a user's MBTI type and other MBTI types. Upon calculating the match, it provides the web-based application with the match rate and the corresponding MBTI personality types. This allows the application to retrieve compatible users from the database who possess these matching values.
<br><br> This <a href="https://www.python.org/" style="font-weight: bold; color: #1CAAD9; text-decoration: none;"> Python</a> algorithm follows a linear search pattern to incorporate a user's MBTI type. It utilises a linear search to check for identical dichotomies in other MBTI personality types and their frequencies. Each dichotomy is assigned a value of 25%, and all 16 MBTI personality types are encapsulated in a dictionary containing lists of lists. Once the algorithm finds these matches and calculates their frequencies in each personality type, it only returns pairs of MBTI personality types with a match rate above 50%. These results are then transmitted to the web-based application using the <a href="https://www.fullstackpython.com/flask.html" style="font-weight: bold; color: #1CAAD9; text-decoration: none;"> Flask App</a>, which is a Python web framework. This web framework is used also to retrieve the user's MBTI personality types from the web-based application.
<!--add link github-->
<br><br> To view the algorithm on Github, click <a href="https://github.com/airedia/MBTI-algorithm" style="font-weight: bold; color: #1CAAD9; text-decoration: none;"> here</a>.
</p>
</div>
<div class="col-sm-6" style="text-align: center; padding-bottom: 0;">
<img src="https://i0.wp.com/statisticsbyjim.com/wp-content/uploads/2020/09/association-152746_640.png?fit=640%2C640&ssl=1" alt="matching people" style="height: 220px;">
</div>
<div class="col-sm-6" style="padding-bottom: 0;">
<h5 class="article-sub-heading" id="MBTI-web-application">The Web-based Application</h5>
<p>
The web-based application consists of 10 webpages, which have been developed using <a href="https://www.w3schools.com/html/" style="font-weight: bold; color: #1CAAD9; text-decoration: none;"> HTML</a>, <a href="https://www.w3schools.com/css/default.asp" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">CSS</a>, <a href="https://www.w3schools.com/bootstrap/bootstrap_ver.asp" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">Bootstrap</a>, <a href="https://www.w3schools.com/js/default.asp" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">JavaScript</a>, <a href="https://www.w3schools.com/php/default.asp" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">PHP</a>, and <a href="https://www.w3schools.com/sql/default.asp" style="font-weight: bold; color: #1CAAD9; text-decoration: none;"> MySQL</a>. These technologies were used to create a user-friendly interface and functionality. The application enables users to create accounts inserting their personal MBTI personality types, reset passwords, and access the platform to find the most compatible friend based on their MBTI personality types.
<br><br>The retrieval of compatible users occurs by accessing the database after receiving the output from the algorithm, which includes the match rate and compatible MBTI personality types. This retrieval process takes place on the server-side of the application using the Flask App and PHP scripting code. Once the compatible users are obtained from the database, they are categorized based on their MBTI personality types and displayed on the client-side of the web-based application, providing a sorted and organized presentation for the compatible users. The <a href="#video-demo-MBTI" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">video</a> below shows and explains the functionalities of the web-based application.
<!--add link demo web-application-->
<br><br> To view the demo of the web-based application, click <a href="https://ustudents-prototype.scienceontheweb.net/" style="font-weight: bold; color: #1CAAD9; text-decoration: none;" target="_blank"> here</a>.
<br><br> If you have a problem viewing the demo or have any feedback, feel free to complete this <a href="demo-queries.html" style="font-weight: bold; color: #1CAAD9; text-decoration: none;"> form. </a>
</p>
</div>
<div class="col-sm-6" style="text-align: center; padding-bottom: 0;">
<img src="images/angelairedia_portfolio-web-development-service.png" alt="MBTI Website/Software Development" style="height: 220px;">
</div>
<div class="col-sm-12" style="text-align: center;">
<div class="video-demo" id="video-demo-MBTI">
<iframe class="software-dev-vid" src="https://drive.google.com/file/d/1i7t00WfIUr1Q99WdYFoKCMRq7zJxviNU/preview" width="640" height="480" allow="autoplay"></iframe>
</div>
</div>
</div>
</div>
<script>
// Check if the device is a mobile device
function isMobileDevice() {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
}
// Check if the device is a mobile device
function isMobileDevice() {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
}
// Handle the parallax effect for mobile devices
function handleParallaxForMobile() {
var parallaxElement = document.querySelector('.parallax_MBTI');
var contentBelowElement = document.querySelector('.section-b');
var navigationBar = document.getElementById('myTopnav');
var navigationBarHeight = navigationBar.offsetHeight;
var lastScrollPosition = 0;
window.addEventListener('scroll', handleParallax);
function handleParallax() {
var scrollPosition = window.pageYOffset;
var parallaxOffset = (scrollPosition - parallaxElement.offsetTop) * 0.4;
if (scrollPosition >= parallaxElement.offsetTop) {
parallaxElement.style.transform = 'translateY(' + parallaxOffset + 'px)';
contentBelowElement.style.transform = 'translateY(' + -parallaxOffset + 'px)';
} else {
parallaxElement.style.transform = 'translateY(0)';
contentBelowElement.style.transform = 'translateY(0)';
}
// Handle navigation bar transformation
if (scrollPosition >= parallaxElement.offsetTop) {
navigationBar.style.transform = 'translateY(0)';
} else {
navigationBar.style.transform = 'translateY(-' + navigationBarHeight + 'px)';
}
// Reset navigation bar transformation on scroll direction change
if (scrollPosition < lastScrollPosition) {
navigationBar.style.transform = 'translateY(0)';
}
lastScrollPosition = scrollPosition;
}
}
// Apply parallax effect for each media query on mobile devices
if (isMobileDevice()) {
if (window.matchMedia("(max-width: 280px)").matches) {
handleParallaxForMobile();
}
if (window.matchMedia("(max-width: 539px)").matches) {
handleParallaxForMobile();
}
if (window.matchMedia("(max-width: 768px)").matches) {
handleParallaxForMobile();
}
if (window.matchMedia("(max-width: 1024px)").matches) {
handleParallaxForMobile();
}
}
</script>
</div>
<br><br><br><br><br><br>
</div>
<div id="Historal_Booking">
<div class="article-items">
<h3 class="article-header" style="font-weight: bold;">2. (Prototype) Historal Booking - for booking a place in the queue in one of the<br> 7 Wonders of the World</h3>
<div class="parallax_Historal"></div>
<div class="section-c" style="background-color: #FFFF;">
<div class="article-text">
<div class="row">
<div class="col-sm-6">
<h5 class="article-sub-heading" id="Historal-description">Description</h5>
<p>
As part of a final-year university project in full-stack web application development, this web application prototype aims to revolution the way individuals experience the 7 Wonders of the World. The innovative virtual queue system introduces a novel approach to bid farewell to the time-consuming physical queues that still plague these renowned attractions. By leveraging this system, users can effortlessly navigate the booking process and secure their place in the queue for their preferred date and time, all from the convenience of their personal devices. This remarkable advancement allows visitors to immerse themselves fully in the captivating beauty of these iconic landmarks, eliminating the stress and frustration associated with waiting in line. With its user-friendly interface and efficient queue management, this prototype ensures a seamless and hassle-free experience, empowering users to explore these wonders at their own desired pace.
<br><br>Embrace the unparalleled convenience offered by this cutting-edge technology and embark on an extraordinary journey to discover the magnificence of the 7 Wonders of the World.
</p>
</div>
<div class="col-sm-6" style="text-align: center;">
<br>
<img src="https://i.natgeofe.com/k/e924c4a8-cf47-4621-9ef8-20884ad2444f/Pyramids-at-Giza_square.png" alt="Giza Pyramids-at-Giza_square" style="height: 200px;"> <br> <br>
</div>
<div class="col-sm-6">
<h5 class="article-sub-heading" id="Historal-sites">The 7 Wonders of the World</h5>
<p>
The <a href="https://en.wikipedia.org/wiki/Seven_Wonders_of_the_Ancient_World" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">Seven Wonders of the World</a> encompass a breathtaking array of architectural masterpieces that have captivated the imagination of people across generations. These wonders, scattered across different continents, showcase the indomitable spirit of human creativity, engineering prowess, and cultural significance.
<br><br> In Italy, the <a href="https://en.wikipedia.org/wiki/Colosseum" style="font-weight: bold; color: #1CAAD9; text-decoration: none;"> Colosseum</a> stands as a testament to the grandeur of ancient Roman civilization. This colossal amphitheater, with its awe-inspiring architecture and remarkable history, witnessed thrilling gladiatorial contests and grand spectacles that enthralled thousands of spectators.
<br><br> Nestled in the heart of Jordan, the ancient city of <a href="https://en.wikipedia.org/wiki/Petra" style="font-weight: bold; color: #1CAAD9; text-decoration: none;"> Petra </a> adventurers with its astonishing rock-cut architecture. Carved into rose-red cliffs, Petra's intricate facades, including the iconic Treasury (Al-Khazneh), evoke a sense of wonder and reveal the ingenuity of its Nabatean creators.
<br><br> Spanning thousands of miles across the Chinese landscape, the <a href="https://en.wikipedia.org/wiki/Great_Wall_of_China" style="font-weight: bold; color: #1CAAD9; text-decoration: none;"> Great Wall </a> China stands as an enduring symbol of human tenacity and fortification. Built over centuries, this monumental structure protected ancient China from invaders and showcases remarkable engineering expertise.
<br><br> High amidst the mist-shrouded peaks of the Andes Mountains in Peru lies the enigmatic <a href="https://en.wikipedia.org/wiki/Machu_Picchu" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">Machu Picchu</a>. This ancient Incan citadel, carefully nestled in its natural surroundings, boasts breath-taking terraces, stone temples, and intricate stonework that harmoniously blend with the surrounding landscape, offering a glimpse into the advanced architectural and astronomical knowledge of its creators.
<br><br>The <a href="https://en.wikipedia.org/wiki/Taj_Mahal" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">Taj Mahal</a> in India stands as a monument to love and beauty. This magnificent marble mausoleum, commissioned by Emperor Shah Jahan, immortalizes his beloved wife Mumtaz Mahal. Its graceful domes, intricate carvings, and symmetrical gardens create an ethereal ambiance that continues to inspire awe and admiration.
<br><br>Mexico's <a href="https://en.wikipedia.org/wiki/Chichen_Itza" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">Chichen Itza</a> showcases the grandeur of Mayan civilization. The iconic El Castillo pyramid, with its remarkable astronomical alignments and intricate carvings, stands as a testament to the Maya's advanced mathematical and architectural expertise.
<br><br>Lastly, in the vast deserts of Egypt, the <a href="https://en.wikipedia.org/wiki/Great_Pyramid_of_Giza" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">Great Pyramid of Giza </a>looms majestically. This ancient wonder, built as a burial monument for pharaohs, is an enduring enigma, evoking wonder and fascination with its massive stone blocks and the mysteries surrounding its construction.
<br><br>Each of these <a href="https://en.wikipedia.org/wiki/Seven_Wonders_of_the_Ancient_World" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">Seven Wonders of the World</a> holds a unique place in human history, culture, and architectural achievement. They remind of the boundless creativity and ingenuity of ancestry and continue to inspire travellers to embark on incredible journeys of discovery and appreciation.
</p>
</div>
<div class="col-sm-6" style="text-align: center;">
<br><br>
<img src="https://i.natgeofe.com/k/65a9415d-707d-4fcf-838c-93cc537717dd/Hanging-Gardens-of-Babylon_4x3.png" alt="The Seven_Wonders_of_the_Ancient_World" height="200px;"> <br> <br>
<br> <br><img src="https://i.natgeofe.com/k/67d02b68-70f3-4e56-bedc-d50fe53531df/Mausoleum-at-Halicarnassus.png" alt="The Seven_Wonders_of_the_Ancient_World-1" height="150px;"> <br> <br>
<br><br><img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/SevenWondersOfTheWorld.png" alt="The Seven_Wonders_of_the_Ancient_World-2" height="350px;"> <br> <br>
</div>
<div class="col-sm-6" style="padding-bottom: 0;">
<h5 class="article-sub-heading" id="Historal-web-application">The Web-based Application</h5>
<p>
The web-based application consists of main 3 webpages, which have been developed using <a href="https://www.w3schools.com/html/" style="font-weight: bold; color: #1CAAD9; text-decoration: none;"> HTML</a>, <a href="https://www.w3schools.com/css/default.asp" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">CSS</a>, <a href="https://www.w3schools.com/bootstrap/bootstrap_ver.asp" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">Bootstrap</a>, <a href="https://www.w3schools.com/js/default.asp" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">JavaScript</a>, <a href="https://www.w3schools.com/php/default.asp" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">PHP</a>, and <a href="https://www.w3schools.com/sql/default.asp" style="font-weight: bold; color: #1CAAD9; text-decoration: none;"> MySQL</a>. These technologies were used to create a user-friendly interface and functionality.
The web application provides users with the ability to secure their place in the virtual queue by selecting their desired historical site, preferred date, and specific time slot. To ensure a comfortable and enjoyable experience for all visitors, the application implements a daily maximum capacity of 250 slots for each site, effectively preventing overcrowding. In the event that a chosen time slot is already allocated, the web-based platform promptly notifies users, allowing them to select an alternative available slot. Additionally, users have the flexibility to modify or cancel their bookings, ensuring convenience and adaptability to changing plans. With these features in place, the web application streamlines the reservation process, ensuring a seamless and well-managed visit to these extraordinary historical sites.
<br><br>Behind the scenes, the web-based application efficiently manages the storage and retrieval of each booking through a robust database system. When a user makes a reservation, the application securely stores the relevant details, including the chosen historical site, date, and time slot, in the database. This ensures that every booking is accurately recorded and easily accessible for future reference.
<br><br>When users need to retrieve their booking information or make updates, the web application seamlessly interacts with the database. By querying the database based on user credentials or unique booking identifiers, the application retrieves the relevant information and presents it to the user in a user-friendly interface. This allows users to view their confirmed bookings, make modifications, or cancel reservations as needed, all while maintaining the integrity and consistency of the stored data.
<br><br>The database serves as the central repository of all bookings, enabling the web application to efficiently handle large volumes of data and provide real-time updates on slot availability. By leveraging the power of databases, the web application ensures a reliable and streamlined user experience, facilitating smooth interactions and minimizing the risk of data inconsistencies or conflicts.
<br><br>In addition to storing and retrieving individual bookings, the database also plays a crucial role in generating reports and analytics. It can aggregate data to provide valuable insights into booking patterns, popular time slots, and visitor demographics. These insights can help optimize the overall management and operations of the historical sites, allowing for better resource allocation and visitor distribution.
<br><br>Overall, the seamless integration between the web-based application and the database system ensures a robust and efficient booking process, empowering users to access and manage their reservations while facilitating data-driven decision-making for the smooth functioning of the historical sites. The <a href="#video-demo-Historal" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">video</a> below shows and explains the functionalities of the web-based application.
<br><br> To view the demo of the web-based application, click <a href="https://seven-wonders-of-the-world-prototype.scienceontheweb.net//" style="font-weight: bold; color: #1CAAD9; text-decoration: none;"> here</a>.
<br><br> If you have a problem viewing the demo or have any feedback, feel free to complete this <a href="demo-queries.html" style="font-weight: bold; color: #1CAAD9; text-decoration: none;"> form. </a>
</p>
</div>
<div class="col-sm-6" style="text-align: center; padding-bottom: 0;">
<img src="https://uploads-ssl.webflow.com/615af81f65d1ab72d2969269/62efdf9840dca733692cdd48_web%20dev%20basics.jpg" alt="Historal Website/Software Development" style="height: 170px;">
<br><br><img src="data:image/jpeg;base64,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" alt="Historal Website/Software Development-1" style="height: 145px;">
</div>
<div class="col-sm-12" style="text-align: center;">
<br>
<div class="video-demo" id="video-demo-Historal">
<iframe class="software-dev-vid" src="https://drive.google.com/file/d/1ICoHUSHIzILw479f9t7gJRv81uMmKh8I/preview" width="640" height="480" allow="autoplay"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Check if the device is a mobile device
function isMobileDevice() {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
}
// Check if the device is a mobile device
function isMobileDevice() {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
}
// Handle the parallax effect for mobile devices
function handleParallaxForMobile() {
var parallaxElement = document.querySelector('.parallax_Historal');
var contentBelowElement = document.querySelector('.section-c');
var navigationBar = document.getElementById('myTopnav');
var navigationBarHeight = navigationBar.offsetHeight;
var lastScrollPosition = 0;
window.addEventListener('scroll', handleParallax);
function handleParallax() {
var scrollPosition = window.pageYOffset;
var parallaxOffset = (scrollPosition - parallaxElement.offsetTop) * 0.4;
if (scrollPosition >= parallaxElement.offsetTop) {
parallaxElement.style.transform = 'translateY(' + parallaxOffset + 'px)';
contentBelowElement.style.transform = 'translateY(' + -parallaxOffset + 'px)';
} else {
parallaxElement.style.transform = 'translateY(0)';
contentBelowElement.style.transform = 'translateY(0)';
}
// Handle navigation bar transformation
if (scrollPosition >= parallaxElement.offsetTop) {
navigationBar.style.transform = 'translateY(0)';
} else {
navigationBar.style.transform = 'translateY(-' + navigationBarHeight + 'px)';
}
// Reset navigation bar transformation on scroll direction change
if (scrollPosition < lastScrollPosition) {
navigationBar.style.transform = 'translateY(0)';
}
lastScrollPosition = scrollPosition;
}
}
// Apply parallax effect for each media query on mobile devices
if (isMobileDevice()) {
if (window.matchMedia("(max-width: 280px)").matches) {
handleParallaxForMobile();
}
if (window.matchMedia("(max-width: 539px)").matches) {
handleParallaxForMobile();
}
if (window.matchMedia("(max-width: 768px)").matches) {
handleParallaxForMobile();
}
if (window.matchMedia("(max-width: 1024px)").matches) {
handleParallaxForMobile();
}
}
</script>
</div>
<br> <br> <br> <br>
</div>
<div id="Kent_Maps_Online">
<div class="article-items">
<h3 class="article-header" style="font-weight: bold;">3. Kent Maps Online</h3>
<div class="parallax_Kent_Maps"></div>
<div class="section-d" style="background-color: #FFFF;">
<div class="article-text">
<div class="row">
<div class="col-sm-6">
<h5 class="article-sub-heading" id="Kent_Maps-description">Description</h5>
<p>
Canterbury Christ Church University proudly presents the remarkable project known as <a href="https://www.kent-maps.online/" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">Kent Maps Online</a> . Nestled within their website, this immersive platform takes visitors on a captivating journey through the storied county of Kent, located in the breathtaking region of South East England. Boasting a tapestry of themed essays, this resource invites exploration into Kent's rich history, cultural significance, and its profound influence on renowned writers and artists.
<br><br><a href="https://www.kent-maps.online/" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">Kent Maps Online</a> serves as a digital compendium, offering an extensive collection of meticulously crafted essays that illuminate the county's fascinating narratives and hidden gems. These compelling narratives bring to life the remarkable historical landmarks, stunning natural landscapes, and captivating cultural heritage that define Kent. Through vivid storytelling and extensive research, visitors are transported across time and space, unraveling the captivating tapestry of Kent's past and present.
<br><br>What truly sets Kent Maps Online apart is its integration of interactive maps and images, further enhancing the user experience. These dynamic maps provide a visual guide, allowing users to explore the county's diverse locales, trace historical routes, and discover hidden treasures. From the iconic white cliffs of Dover to the charming medieval streets of Canterbury, the interactive maps offer a unique opportunity to navigate Kent's landscapes with ease.
<br><br>Kent's profound impact on literature and art is a prominent theme within the project. From the rolling countryside that inspired the works of Chaucer and Dickens to the idyllic coastal vistas that captured the imagination of J.M.W. Turner, the essays within Kent Maps Online delve into the artistic and literary heritage that emanates from the county's picturesque settings. The profound connection between Kent and creative expression becomes apparent as the project unravels the inspirations behind acclaimed works, highlighting the profound influence of the county on the creative landscape.
<br><br>Kent Maps Online serves as a testament to Canterbury Christ Church University's commitment to preserving and promoting the cultural heritage of Kent. Through this innovative digital initiative, individuals from around the world can embark on a virtual journey, immersing themselves in the captivating landscapes, remarkable landmarks, and vibrant history of this extraordinary county. By bridging the gap between academia and public engagement, Kent Maps Online ensures that the allure and significance of Kent's past and present are accessible to all who seek to explore its treasures.
</p>
</div>
<div class="col-sm-6" style="text-align: center;">
<br>
<img src="https://www.thetouristtrail.org/wp-content/uploads/2018/03/Kent2.jpg" alt="Kent" style="height: 140px;"> <br> <br>
<br><br> <img src="https://img.atlasobscura.com/ZmYyOQXA6pH8t8nq89dTzrm1UpsbtIE-G6ivqAe3kbQ/rt:fit/w:600/q:81/sm:1/scp:1/ar:1/aHR0cHM6Ly9hdGxh/cy1kZXYuczMuYW1h/em9uYXdzLmNvbS91/cGxvYWRzL3BsYWNl/X2ltYWdlcy81ZjY0/NGQ4ZC00YjkwLTQz/OGItYmNiZS0zYTVk/MGI4OWE1YWI4Mzg1/MTg2NjJjOTM1OGIx/NGRfNTEyMjYxNV9h/MzQ2ODdmMS5qcGc.jpg" alt="Castle-Kent" style="height: 180px;"> <br><br>
<br><br> <img src="https://martinrandall.ontigerbay.co.uk/admin/CMS/resize/resize.ashx?f=Mediaeval-Kent-main-image-44-40.jpg&w=0&h=0" alt="Castle-Kent" style="height: 180px;"> <br><br>
</div>
<div class="col-sm-6" style="padding-bottom: 0;">
<h5 class="article-sub-heading" id="Kent_Maps-web-application">The Web-based Application</h5>
<p>
The web-based application consists of different webpages, which have been developed using different technologies such as <a href="https://www.w3schools.com/html/" style="font-weight: bold; color: #1CAAD9; text-decoration: none;"> HTML</a>, <a href="https://www.w3schools.com/css/default.asp" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">CSS</a>, <a href="https://www.w3schools.com/bootstrap/bootstrap_ver.asp" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">Bootstrap</a>, <a href="https://www.w3schools.com/js/default.asp" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">JavaScript</a>, <a href="https://www.w3schools.com/php/default.asp" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">PHP</a>, <a href="https://www.w3schools.com/sql/default.asp" style="font-weight: bold; color: #1CAAD9; text-decoration: none;"> MySQL</a>, <a href="https://www.w3schools.com/html/" style="font-weight: bold; color: #1CAAD9; text-decoration: none;"> HTML</a>, and <a href="https://www.juncture-digital.org/" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">Juncture</a>. These technologies were used to create a user-friendly interface and functionality.
<br><br> <a href="https://www.kent-maps.online/" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">Kent Maps Online</a>, an ambitious project initiated by Canterbury Christ Church University, stands as a digital treasure trove within their website, inviting visitors to embark on an immersive exploration of the captivating county of Kent in South East England. This extraordinary platform goes beyond traditional narratives by providing a comprehensive set of themed essays that delve into Kent's rich history, remarkable landmarks, and vibrant cultural heritage. Each essay is meticulously curated to offer in-depth insights and captivating storytelling, offering visitors a profound understanding of Kent's diverse themes and their historical significance.
<br><br> At the heart of <a href="https://www.kent-maps.online/" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">Kent Maps Online</a> are its interactive maps, which serve as a dynamic gateway to the county's wonders. These meticulously crafted maps not only showcase the present landscape but also allow users to journey back in time by including old maps from past centuries. With this innovative feature, visitors can compare the historical maps with the present-day geography, gaining a deeper appreciation for the transformations that have shaped Kent over time.
<br><br> These vintage maps offer a glimpse into the county's rich historical context, highlighting the evolution of towns, the development of transportation routes, and the changing territorial boundaries. By overlaying old maps onto the interactive platform, users can explore Kent's history in a visually engaging manner, tracing the footsteps of those who came before and unraveling the stories hidden within the land.
<br><br> The inclusion of captivating images further enriches the user experience, providing vivid visual representations of Kent's stunning landscapes, architectural marvels, and artistic inspirations. These images, carefully curated to align with the essays' themes, bring the stories to life, immersing users in the essence of Kent's natural beauty and cultural heritage.
<br><br> <a href="https://www.kent-maps.online/" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">Kent Maps Online</a> offers a range of functionalities to ensure a seamless and engaging user experience. Users can navigate between essays, accessing a vast array of topics that cover everything from Kent's historical events and iconic figures to its natural wonders and literary connections. The intuitive interface allows for easy browsing and quick access to desired information, encouraging users to delve deeper into Kent's multifaceted narrative.
<br><br> Furthermore, the project fosters user interaction and exploration. Users can leave comments, share their own experiences, or contribute additional information to enhance the collective understanding of Kent's history and cultural significance. This collaborative aspect fosters a sense of community and enables knowledge sharing among users, scholars, and enthusiasts alike.
<br><br> <a href="https://www.kent-maps.online/" style="font-weight: bold; color: #1CAAD9; text-decoration: none;">Kent Maps Online </a>serves as a digital portal that celebrates the rich tapestry of Kent's history, heritage, and artistic inspiration. Through its engaging essays, interactive maps, and captivating imagery, including old maps from past centuries, the project invites users on a captivating journey of exploration and discovery. It stands as a testament to Canterbury Christ Church University's commitment to preserving and sharing the profound legacy of Kent, fostering a deep appreciation for its unique contributions to England's cultural landscape.
<br><br> To view the website click <a href="https://www.kent-maps.online/" style="font-weight: bold; color: #1CAAD9; text-decoration: none;"> here</a>.
</p>
</div>
<div class="col-sm-6" style="text-align: center; padding-bottom: 0;">
<img src="https://www.digitalsilk.com/wp-content/uploads/2022/09/website-development-process-1.jpg" alt="Software/Website Development" style="height: 170px;"> <br><br>
<br><br><img src="https://images.antiquemapsandprints.com/scanso/P-7-026414a.jpg" alt="Old Kent Map" style="height: 170px;"> <br><br>
<br><br><img src="https://planetofhotels.com/guide/sites/default/files/styles/paragraph__live_banner__lb_image__1880bp/public/live_banner/Canterbury.jpg" alt="Canterbury" style="height: 145px;"><br><br>
<br><br><img src="https://whc.unesco.org/uploads/thumbs/site_0496_0001-750-750-20090923140329.jpg" alt="Canterbury Cathedral" style="height: 240px;"><br><br>
<br><br><br><br><img src="https://img.itinari.com/pages/images/original/cfa37db7-2307-4f8c-adbf-02c7f006bc6a-istock-517078136.jpg?ch=DPR&dpr=2.625&w=1200&h=800&s=737f85c6c30f03994b738a78d626b75e" alt="Canterbury-1" style="height: 160px;"><br><br>
</div>
</div>
</div>
</div>
<script>
// Check if the device is a mobile device
function isMobileDevice() {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
}
// Check if the device is a mobile device
function isMobileDevice() {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
}
// Handle the parallax effect for mobile devices
function handleParallaxForMobile() {
var parallaxElement = document.querySelector('.parallax_Kent_Maps');
var contentBelowElement = document.querySelector('.section-d');
var navigationBar = document.getElementById('myTopnav');
var navigationBarHeight = navigationBar.offsetHeight;
var lastScrollPosition = 0;
window.addEventListener('scroll', handleParallax);
function handleParallax() {
var scrollPosition = window.pageYOffset;
var parallaxOffset = (scrollPosition - parallaxElement.offsetTop) * 0.4;
if (scrollPosition >= parallaxElement.offsetTop) {
parallaxElement.style.transform = 'translateY(' + parallaxOffset + 'px)';
contentBelowElement.style.transform = 'translateY(' + -parallaxOffset + 'px)';
} else {
parallaxElement.style.transform = 'translateY(0)';
contentBelowElement.style.transform = 'translateY(0)';
}
// Handle navigation bar transformation
if (scrollPosition >= parallaxElement.offsetTop) {
navigationBar.style.transform = 'translateY(0)';
} else {
navigationBar.style.transform = 'translateY(-' + navigationBarHeight + 'px)';
}
// Reset navigation bar transformation on scroll direction change
if (scrollPosition < lastScrollPosition) {
navigationBar.style.transform = 'translateY(0)';
}
lastScrollPosition = scrollPosition;
}
}
// Apply parallax effect for each media query on mobile devices
if (isMobileDevice()) {
if (window.matchMedia("(max-width: 280px)").matches) {
handleParallaxForMobile();
}
if (window.matchMedia("(max-width: 539px)").matches) {
handleParallaxForMobile();
}
if (window.matchMedia("(max-width: 768px)").matches) {
handleParallaxForMobile();
}
if (window.matchMedia("(max-width: 1024px)").matches) {
handleParallaxForMobile();
}
}
</script>
</div>
</div>
</div>
<div class="scroll_up_arrow">
<div class="col-sm-11">
<!-- add arrow to go up -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
var scrolltotop={setting:{startline:100,scrollto:0,scrollduration:1e3,fadeduration:[500,100]},controlHTML:'<img src="images/angelairedia_portfolio_arrowup.png" />',controlattrs:{offsetx:5,offsety:5},anchorkeyword:"#top",state:{isvisible:!1,shouldvisible:!1},scrollup:function(){this.cssfixedsupport||this.$control.css({opacity:0});var t=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto);t="string"==typeof t&&1==jQuery("#"+t).length?jQuery("#"+t).offset().top:0,this.$body.animate({scrollTop:t},this.setting.scrollduration)},keepfixed:function(){var t=jQuery(window),o=t.scrollLeft()+t.width()-this.$control.width()-this.controlattrs.offsetx,s=t.scrollTop()+t.height()-this.$control.height()-this.controlattrs.offsety;this.$control.css({left:o+"px",top:s+"px"})},togglecontrol:function(){var t=jQuery(window).scrollTop();this.cssfixedsupport||this.keepfixed(),this.state.shouldvisible=t>=this.setting.startline?!0:!1,this.state.shouldvisible&&!this.state.isvisible?(this.$control.stop().animate({opacity:1},this.setting.fadeduration[0]),this.state.isvisible=!0):0==this.state.shouldvisible&&this.state.isvisible&&(this.$control.stop().animate({opacity:0},this.setting.fadeduration[1]),this.state.isvisible=!1)},init:function(){jQuery(document).ready(function(t){var o=scrolltotop,s=document.all;o.cssfixedsupport=!s||s&&"CSS1Compat"==document.compatMode&&window.XMLHttpRequest,o.$body=t(window.opera?"CSS1Compat"==document.compatMode?"html":"body":"html,body"),o.$control=t('<div id="topcontrol">'+o.controlHTML+"</div>").css({position:o.cssfixedsupport?"fixed":"absolute",bottom:o.controlattrs.offsety,right:o.controlattrs.offsetx,opacity:0,cursor:"pointer"}).attr({title:"Scroll to Top"}).click(function(){return o.scrollup(),!1}).appendTo("body"),document.all&&!window.XMLHttpRequest&&""!=o.$control.text()&&o.$control.css({width:o.$control.width()}),o.togglecontrol(),t('a[href="'+o.anchorkeyword+'"]').click(function(){return o.scrollup(),!1}),t(window).bind("scroll resize",function(t){o.togglecontrol()})})}};scrolltotop.init();</script>
</div>
</div>
</body>
<footer>
<div class="links">
<div class="row">
<div class="col-sm-12">
<a href="index.html#portfolio"> My Portfolio </a>
<a href="index.html#about"> About Me </a>
<a href="https://maps.app.goo.gl/xxoULcwdAio38UHo9">Location</a>
<a href="index.html#contact">Contact Me</a>
<br>
<a href="index.html"> <img class="footer_img" src="images/angelairedia_portfolio_logo - white.png" alt="Angela Iredia portfolio: Logo"></a>
</div>
</div>
</div>
</footer>
</html>