-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
116 lines (93 loc) · 3.93 KB
/
main.js
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
/*=============== SHOW MENU ===============*/
const navMenu = document.getElementById('nav-menu'),
navToggle = document.getElementById('nav-toggle'),
navClose = document.getElementById('nav-close');
/*===== MENU SHOW =====*/
/* Validate if constant exists */
if (navToggle) {
navToggle.addEventListener('click', () => {
navMenu.classList.add('show-menu')
});
}
/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if (navClose) {
navClose.addEventListener('click', () => {
navMenu.classList.remove('show-menu')
});
}
/*=============== REMOVE MENU MOBILE ===============*/
const navLink = document.querySelectorAll('.nav__link');
const linkAction = () => {
const navMenu = document.getElementById('nav-menu');
// When we click on each nav__link, we remove the show-menu class
navMenu.classList.remove('show-menu');
}
navLink.forEach(n => n.addEventListener('click', linkAction));
/*=============== ADD BLUR TO HEADER ===============*/
const blurHeader = () => {
const header = document.getElementById('header');
// When the scroll is greater than 50 viewport height, add the blur-header class to the header tag
this.scrollY >= 50 ? header.classList.add('blur-header')
: header.classList.remove('blur-header');
}
window.addEventListener('scroll', blurHeader);
/*=============== EMAIL JS ===============*/
const contactForm = document.getElementById('contact-form'),
contactMessage = document.getElementById('contact-message');
const sendEmail = (e) => {
e.preventDefault();
// serviceID - templateID - #form - publicKey
emailjs.sendForm('service_gfql77k', 'template_kz2edkq', '#contact-form', 'EGICnxEODmfUP6ggK')
.then(() => {
contactMessage.textContent = 'Message sent successfully ✅';
// Remove message after four seconds
setTimeout(() => {
contactMessage.textContent = '';
}, 4000);
// Clear input fields
contactForm.reset();
}, () => {
contactMessage.textContent = 'Message not sent (service error) ❌';
})
}
contactForm.addEventListener('submit', sendEmail);
/*=============== SHOW SCROLL UP ===============*/
const scrollUp = () => {
const scrollUp = document.getElementById('scroll-up');
// When the scroll is higher than 350 viewport height, add the show-scroll class to the a tag with the scrollup class
this.scrollY >= 350 ? scrollUp.classList.add('show-scroll')
: scrollUp.classList.remove('show-scroll');
}
window.addEventListener('scroll', scrollUp);
/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
// Controls the scroll position of the sections, and adds the active-link class to the corresponding section.
const sections = document.querySelectorAll('section[id]');
const scrollActive = () => {
const scrollY = window.pageYOffset;
sections.forEach(current => {
const sectionHeight = current.offsetHeight,
sectionTop = current.offsetTop - 58,
sectionId = current.getAttribute('id'),
sectionsClass = document.querySelector('.nav__menu a[href*=' + sectionId + ']');
if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
sectionsClass.classList.add('active-link');
} else {
sectionsClass.classList.remove('active-link');
}
})
}
window.addEventListener('scroll', scrollActive);
/*=============== SCROLL REVEAL ANIMATION ===============*/
const sr = ScrollReveal({
origin: 'top',
distance: '60px',
duration: 2500,
delay: 300,
// reset: true // Animations repeat
});
sr.reveal(`.home__data, .home__social, .contact__container, .footer__container`);
sr.reveal(`.home__image`, { origin: 'bottom' });
sr.reveal(`.about__data, .skills__data`, { origin: 'left' });
sr.reveal(`.about__image, .skills__content`, { origin: 'right' });
sr.reveal(`.services__card, .projects__card`, { interval: 100 });