Portfolio/script.js at main · m-talbi/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
113
114
const navBar = document.getElementById('navbar');
const navIcon = document.getElementById('nav-icon');
const navMenuLinks = document.getElementById('nav-menu-links');
const body = document.querySelector('body');
const links = document.querySelectorAll('.nav_menu__container a');
const underline = document.getElementById('underline');
const portfolio = document.getElementById('portfolio');
const about = document.getElementById('about');
const contact = document.getElementById('contact');
const languagesAccordion = document.getElementById('languages');
const frameworksAccordion = document.getElementById('frameworks');
const skillsAccordion = document.getElementById('skills');

window.addEventListener('scroll', () => {
  if (window.scrollY > 1) navBar.style.boxShadow = '2px 2px 2px 1px rgba(0, 0, 0, 0.2)';
  else navBar.style.boxShadow = 'none';
});

function handleDesktopViewClick(ev) {
  ev.preventDefault();
  const sectionTopPos = document.getElementById(ev.target.textContent.toLowerCase()).offsetTop;
  window.scroll({ left: 0, top: sectionTopPos, behavior: 'smooth' });
}

function handleUnderline() {
  const scrollTop = window.scrollY;
  const offsetTop = [portfolio.offsetTop, about.offsetTop - 100, contact.offsetTop - 100];
  let sectionIndex = -1;

  if (scrollTop > offsetTop[0] && scrollTop < offsetTop[1]) {
    // Projects section
    sectionIndex = 0;
  } else if (scrollTop > offsetTop[1] && scrollTop < offsetTop[2]) {
    // About Section
    sectionIndex = 1;
  } else if (scrollTop > offsetTop[2]) {
    // Contact Section
    sectionIndex = 2;
  }

  underline.style.display = 'block';
  underline.style.width = `${links[sectionIndex].offsetWidth + 14}px`;
  underline.style.left = `${links[sectionIndex].offsetLeft - 6}px`;
}

function handleMobileViewClick() {
  if (navIcon.firstElementChild.id === 'hamburger-icon') {
    body.style.overflowY = 'hidden';
    navIcon.firstElementChild.src = './img/close-icon.svg';
    navIcon.firstElementChild.id = 'close-icon';
  } else {
    body.style.overflowY = 'scroll';
    navIcon.firstElementChild.src = './img/hamburger-icon.svg';
    navIcon.firstElementChild.id = 'hamburger-icon';
  }

  navMenuLinks.classList.toggle('links_active');
  navBar.classList.toggle('nav_active');
  body.classList.toggle('backdrop_filter');
}

function handleClick(ev) {
  return window.innerWidth < 820 ? handleMobileViewClick() : handleDesktopViewClick(ev);
}

function resetNavBar() {
  navMenuLinks.classList.remove('links_active');
  navBar.classList.remove('nav_active');
  body.classList.remove('backdrop_filter');
  navIcon.firstElementChild.src = './img/hamburger-icon.svg';
  navIcon.firstElementChild.id = 'hamburger-icon';
  body.style.overflowY = 'scroll';
}

links.forEach((link) => {
  link.addEventListener('click', handleClick);
});

navIcon.addEventListener('click', handleMobileViewClick);

window.addEventListener('resize', () => {
  resetNavBar();
  underline.style.display = 'none';
  underline.style.left = `${links[0].offsetLeft - 6}px`;

  links.forEach((link) => {
    link.removeEventListener('click', handleClick);
  });

  links.forEach((link) => {
    link.addEventListener('click', handleClick);
  });
});

window.addEventListener('scroll', () => {
  if (window.innerWidth < 820) return;
  handleUnderline();
});

const expandAccordion = (accordion) => {
  const isAccordionClosed = accordion.classList.contains('accordion_closed');
  accordion.classList.toggle('accordion_closed');
  const arrow = accordion.querySelector('.arrow');
  arrow.classList.toggle('rotate');
  if (isAccordionClosed) {
    const stack = accordion.nextElementSibling;
    const { height } = stack.getBoundingClientRect();
    window.scroll({ left: 0, top: stack.offsetTop - (height / 2), behavior: 'smooth' });
  }
};

languagesAccordion.addEventListener('click', () => expandAccordion(languagesAccordion));
frameworksAccordion.addEventListener('click', () => expandAccordion(frameworksAccordion));
skillsAccordion.addEventListener('click', () => expandAccordion(skillsAccordion));