myportfolio/main.js at main · Ihebdhouibi/myportfolio · 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
113
114
115
116
117
118
119
120
121
// toggle btn

const toggleBtn = document.querySelector('.toggle-btn');
const linkContainer = document.querySelector('.links-container');

toggleBtn.addEventListener('click', () => {
    toggleBtn.classList.toggle('active');
    linkContainer.classList.toggle('show');
});


(function ($){
    "use strict"

    // typed initiate
    if ($('.typed-text-output').length == 1){
        var typed_strings = $('.typed-text').text();
        var typed = new Typed('.typed-text-output', {
            strings:typed_strings.split(', '),
            typeSpeed:100,
            backSpeed:20,
            smartBackspace:false,
            loop: true
        });


    }
})(jQuery);

(function ($){
    "use strict"

    // typed initiate
    if ($('.typed-text-output2').length == 1){
        var typed_strings = $('.typed-text2').text();
        var typed = new Typed('.typed-text-output2', {
            strings:typed_strings.split(', '),
            typeSpeed:100,
            backSpeed:20,
            smartBackspace:false,
            loop: true
        });


    }
})(jQuery);


// isotope and filter


var projectIsotope = $('.projects-container').isotope({itemSelector: '.project', layoutMode: 'fitRows'})
$('#projects-filter li').on('click', function(){
    $("#projects-filter li").removeClass('active');
    $(this).addClass('active');

    projectIsotope.isotope({filter: $(this).data('filter')})
})


// links

const links = document.querySelectorAll('.link');
const sections = document.querySelectorAll("section");

links.forEach(link => {
    link.addEventListener('click', () => {
        links.forEach(ele => ele.classList.remove('active'));
        link.classList.add('active')
    });
});

/*
window.onscroll = () => {
    var current = "";

    sections.forEach((section) => {
        const sectionTop = section.offsetTop;
        if (pageYOffset >= sectionTop - 60){
            current = section.getAttribute("id");
        }
    });

    links.forEach((link) => {
        link.classList.remove("active");
        if (link.classList.contains(current)){
            link.classList.add("active");
        }
    });
};
*/


// cards viewmore

var popupViews = document.querySelectorAll('.popup-view')
var popupBtns = document.querySelectorAll('.popup-btn')
var popupCloses = document.querySelectorAll('.close-btn')

var popup = function(popupClick) {
    popupViews[popupClick].classList.add('active');
}

popupBtns.forEach((popupBtn, i) => {
    popupBtn.addEventListener("click", () => {
        popup(i);
    });
});

popupCloses.forEach((closeBtn) => {
    closeBtn.addEventListener("click", () => {
        popupViews.forEach((popupView) => {
            popupView.classList.remove('active');
        });
    });
});