chaoticnebula5.github.io/main.js at main · ChaoticNebula5/chaoticnebula5.github.io · 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
// typed js
const typed = new Typed(".typing", {
    strings: ["Self Taught Developer", "Software Developer", "Python Lover", "Verified Discord Bot Developer"],
    loop: true,
    typeSpeed: 80,
    backSpeed: 40,
  });

  // Theme changer
  const themes = [
    "#9affe1",
    "#abff9a",
    "#ff9a9a",
    "#f3fab1",
    "#9aadff",
    "#f5d69f",
    "#baf788",
    "#77dde0",
    "#55F7DD",
    "#85e880",
    "#9b4ff7",
    "#E2F780",
  ];
  const root = document.querySelector(":root");
  const themeToggle = document.querySelector("#main-name");
  let currentTheme = 0;
  themeToggle.addEventListener("click", () => {
    currentTheme++;
    if (currentTheme == themes.length) {
      currentTheme = 0;
    }
    root.style.setProperty("--main-accent", themes[currentTheme]);
  });

  const hamburger = document.querySelector("#mobile-menu");
  const tabs = document.querySelector(".navbar__menu");
  //display hamburger menue
  const mobileMenu = () => {
    hamburger.classList.toggle("is-active");
    tabs.classList.toggle("active");
  };

  hamburger.addEventListener("click", mobileMenu);

  // experience projects toggle
  const exp = document.querySelector("#exp__btn");
  const prj = document.querySelector("#prj__btn");

  prj.addEventListener("click", function () {
    prj.classList.add("active__btn");
    exp.classList.remove("active__btn");
    document.querySelector("#projects").classList.remove("noshow");
    document.querySelector("#experience").classList.add("noshow");
  });

  exp.addEventListener("click", function () {
    exp.classList.add("active__btn");
    prj.classList.remove("active__btn");
    document.querySelector("#experience").classList.remove("noshow");
    document.querySelector("#projects").classList.add("noshow");
  });

  //highlight active menu
  const navLogo = document.querySelector("#navbar__logo");
  const highlightMenu = () => {
    const activeElement = document.querySelector(".highlight");
    const homeMenu = document.querySelector("#home-page");
    const aboutMenu = document.querySelector("#about-page");
    const resumeMenu = document.querySelector("#resume-page");
    const stackMenu = document.querySelector("#stack-page");

    let scrollPos = window.scrollY;
    if (window.innerWidth > 960 && scrollPos < 500) {
      homeMenu.classList.add("highlight");
      aboutMenu.classList.remove("highlight");
      return;
    } else if (window.innerWidth > 960 && scrollPos < 900) {
      aboutMenu.classList.add("highlight");
      homeMenu.classList.remove("highlight");
      resumeMenu.classList.remove("highlight");
      return;
    } else if (window.innerWidth > 960 && scrollPos < 1500) {
      resumeMenu.classList.add("highlight");
      aboutMenu.classList.remove("highlight");
      stackMenu.classList.remove("highlight");
      return;
    } else if (window.innerWidth > 960 && scrollPos < 3000) {
      stackMenu.classList.add("highlight");
      resumeMenu.classList.remove("highlight");

      return;
    }

    if (
      (activeElement && window.innerWidth < 960 && scrollPos < 600) ||
      activeElement
    ) {
      activeElement.classList.remove("highlight");
    }
  };

  window.addEventListener("scroll", highlightMenu);
  window.addEventListener("click", highlightMenu);

  //close mobile menu on item click
  const hideMobileMenu = () => {
    const menuBars = document.querySelector(".is-active");
    if (window.innerWidth <= 768 && menuBars) {
      hamburger.classList.toggle("is-active");
      tabs.classList.remove("active");
    }
  };

  tabs.addEventListener("click", hideMobileMenu);
  navLogo.addEventListener("click", hideMobileMenu);