https://portfolio-website-rajiv.netlify.app/js/script.js

1/* MENU BUTTON */
2const $openMenu = document.querySelector(".open-menu-button")
3const $mainNav = document.querySelector(".main-nav")
4const $closeMenu = document.querySelector(".close-menu-button")
5const $linksNav = document.querySelectorAll(".main-nav a")
6
7$openMenu.addEventListener("click", () => {
8   $mainNav.classList.add("-active")
9})
10
11$closeMenu.addEventListener("click", () => {
12   $mainNav.classList.remove("-active")
13})
14
15$linksNav.forEach((linkNav) => {
16   linkNav.addEventListener("click", function() {
17      $mainNav.classList.remove("-active")
18   })
19})
20
21/* SKILLS BUTTONS */
22const $skillButtons = document.querySelectorAll(".skill-button")
23
24function selectSkill() {
25   let $skillActive = this
26   if ($skillActive.classList.contains("-active")) {
27      $skillActive.classList.remove("-active")
28   } else {
29      $skillActive.classList.add("-active")
30   }
31}
32
33$skillButtons.forEach((skillItem) => {
34   skillItem.addEventListener("click", selectSkill)
35})
36
37/* QUALIFICATION TABS */
38const $tabQualification = document.querySelectorAll(".qualification-button")
39let $tabActive = document.querySelector(".qualification-button.-active")
40
41function selectQualification(item) {
42   item.preventDefault();
43   let $tabClicked = this;
44   $tabActive.classList.remove("-active");
45   $tabClicked.classList.add("-active");
46   $tabActive = $tabClicked;
47
48   let $contentActive = document.querySelector(".qualification-content.-active");
49   $contentActive.classList.remove("-active");
50   let idContent = $tabClicked.getAttribute("href");
51   let $targetContent = document.querySelector(idContent);
52   $targetContent.classList.add("-active");
53}
54
55$tabQualification.forEach((tabItem) => {
56   tabItem.addEventListener("click", selectQualification)
57})
58
59/* SERVICES MODAL */
60const $cardButtons = document.querySelectorAll(".card-button")
61const $serviceModals = document.querySelectorAll(".service-modal")
62const $closeModals = document.querySelectorAll(".modal-close")
63
64let modalService = (modalClick) => {
65   $serviceModals[modalClick].classList.add("-active")
66}
67
68$cardButtons.forEach((cardButton, i) => {
69   cardButton.addEventListener("click", () => {
70      modalService(i)
71   })
72})
73
74$closeModals.forEach((closeModal) => {
75   closeModal.addEventListener("click", () => {
76      $serviceModals.forEach((serviceModal) => {
77         serviceModal.classList.remove("-active")
78      })
79   })
80})
81
82/* PORTFOLIO CAROUSEL */
83const $portfolioCarousel = document.querySelector(".glide.portfolio-carousel")
84
85new Glide($portfolioCarousel, {
86   type: "carousel",
87   gap: 0,
88   startAt: 1,
89   perView: 1,
90   autoplay: 3000,
91   hoverpause: true,
92   animationDuration: 1000
93}).mount()
94
95/* TESTIMONIAL CAROUSEL */
96const $testimonialCarousel = document.querySelector(".glide.testimonial-carousel")
97
98new Glide($testimonialCarousel, {
99   type: "carousel",
100   gap: 60,
101   startAt: 1,
102   perView: 2,
103   autoplay: 3000,
104   hoverpause: true,
105   animationDuration: 1000,
106   breakpoints: {
107      992: {
108         gap: 60,
109         perView: 1,
110         peek: {
111            before: 200,
112            after: 200
113         },
114      },
115      610: {
116         gap: 20,
117         perView: 1,
118      }
119   }
120}).mount()
121
122/* SCROOL EVENT */
123const scrollEvent = () => {
124   const $header = document.querySelector(".header")
125   const $btnToTop = document.querySelector(".btn-totop")
126
127   if (this.scrollY >= 50) {
128      $header.classList.add("-scroll")
129   } else {
130      $header.classList.remove("-scroll")
131   }
132
133   if (this.scrollY >= 550) {
134      $btnToTop.classList.add("-visible")
135   } else {
136      $btnToTop.classList.remove("-visible")
137   }
138}
139
140window.addEventListener("scroll", scrollEvent)
141
142/* SMOOTH SCROLL SECTION ACTIVE */
143const $sections = document.querySelectorAll(".section[id]")
144
145let sectionActive = () => {
146   const $scroll_Y = window.pageYOffset
147
148   $sections.forEach(current => {
149      const $sectionHeight = current.offsetHeight
150      const $sectionTop = current.offsetTop - 50
151      $sectionId = current.getAttribute("id")
152
153      if ($scroll_Y >

153 $sectionTop && $scroll_Y <= $sectionTop + $sectionHeight) {
154         document.querySelector(".main-nav a[href*=" + $sectionId + "]").classList.add("-active")
155      } else {
156         document.querySelector(".main-nav a[href*=" + $sectionId + "]").classList.remove("-active")
157      }
158   })
159}
160
161window.addEventListener("scroll", sectionActive)
162
163/* DARK/LIGHT THEME */
164const $themeButton = document.querySelector(".theme-button")
165const $body = document.body
166const $themeActive = window.localStorage.getItem("theme")
167
168if ($themeActive === "dark") {
169   $themeButton.classList.add("-dark-mode")
170   $body.classList.add("dark-theme")
171} else {
172   $themeButton.classList.remove("-dark-mode")
173   $body.classList.remove("dark-theme")
174}
175
176const toggleTheme = () => {
177   let $darkMode = document.querySelector(".-dark-mode")
178
179   if (!$darkMode) {
180      $themeButton.classList.add("-dark-mode")
181      $body.classList.add("dark-theme")
182      localStorage.setItem("theme", "dark")
183   } else {
184      $themeButton.classList.remove("-dark-mode")
185      $body.classList.remove("dark-theme")
186      localStorage.setItem("theme", "light")
187   }
188}
189
190$themeButton.addEventListener("click", toggleTheme)