Portfolio/script.js at main · Arijit10-git/Portfolio · GitHub

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
/*==================== toggle icon navbar ====================*/
let menuIcon = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');

menuIcon.onclick = () => {
    menuIcon.classList.toggle('bx-x');
    navbar.classList.toggle('active');
};
/*==================== scroll sections ovtive Link ====================*/
let sections = document.querySelectorAll('section');
let navLinks = document.querySelectorAll('header nav a');

window.onscroll = () => {
    sections.forEach(sec => {
        let top = window.scrollY;
        let offset = sec.offsetTop - 150;
        let height = sec.offsetHeight;
        let id = sec.getAttribute('id');

        if (top >= offset && top < offset + height) {
            navLinks.forEach(links => {
                links.classList.remove('active');
                document.querySelector('header nav a[href*=' + id + ']').classList.add('active');
            });
        };
    });
    /*==================== sticky navbar ====================*/
    let header = document.querySelector('header');

    header.classList.toggle('sticky', window.scrollY > 100);
    /*==================== remove toggle icon and navbar hen click navbar link () ====================*/
    menuIcon.classList.remove('bx-x');
    navbar.classList.remove('active');
};

/*==================== scroll reveal ====================*/
ScrollReveal({
    // reset: true,
    distance: '80px',
    duration: 2000,
    delay: 200
});

ScrollReveal().reveal('.home-content, .heading', { origin: 'top' });
ScrollReveal().reveal('.home-img, .services-container, .portfolio-box, .contact form', { origin: 'bottom' });
ScrollReveal().reveal('.home-content h1, .about-img', { origin: 'left' });
ScrollReveal().reveal('.home-content p, .about-content', { origin: 'right' });

/*==================== typed js ====================*/
const typed = new Typed('.multiple-text', {
    strings: ['Frontend Developer', 'Backend Developer', 'Web Developer'],
    typeSpeed: 100,
    backSpeed: 100,
    backDelay: 1000,
    loop: true
});

/*================Email js===============*/
/*=============== EMAIL JS ===============*/
const contactForm = document.getElementById("contact-form"),
    contactName = document.getElementById("contact-name"),
    contactEmail = document.getElementById("contact-email"),
    contactQuery = document.getElementById("contact-query"),
    contactMobile = document.getElementById("contact-mobile");
contactMessage = document.getElementById("contact-message");
const sendEmail = (e) => {
    e.preventDefault();

    // SERVICE-ID -> TEMPLATE-ID -> #FORM - PUBLIC-KEY
    emailjs
        .sendForm(
            "service_wydxcbw",
            "template_73e7z8q",
            contactForm,
            "pseGOOclOpr1bQP7N"
        )
        .then(
            () => {
                contactMessage.textContent = "Message send ✅";
                setTimeout(() => {
                    contactMessage.textContent = "";
                }, 3000);
            },
            (error) => {
                alert("OOPS! SOMETHING HAS FAILED...", error);
            }
        );

    contactName.value = " ";
    contactEmail.value = " ";
    contactQuery.value = " ";
}


contactForm.addEventListener("submit", sendEmail);


/*=================portfolio video===============*/

const button =document.getElementById("modalShow");
const videoContainer =document.querySelector(".video-container");
const close =document.querySelector(".close");


button.addEventListener('click', ()=>{
    videoContainer.classList.add("show");
    console.log("CLicked");
});

close.addEventListener('click', ()=>{
    videoContainer.classList.remove("show");
});