Myth0712.github.io/script.js at main · MYth0712/Myth0712.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
let data;

fetch("data.json")
.then(r=>r.json())
.then(j=>{
  data=j;
  init();
});

function init(){
  name.textContent=data.name;
  avatar.src=data.avatar;
  nameTop.textContent=data.name;
  avatarTop.src=data.avatar;

  loadPortfolio();
  loadTools();
}

function loadPortfolio(){
  portfolio.innerHTML="";

  data.portfolio.forEach(i=>{

    // SPECIAL CASE: Contact Me button
    if(i.name === "Contact Me"){
      portfolio.innerHTML += `
        <a href="mailto:contactme@adham1.localplayer.dev?subject=Contact&body=Hello"
           class="link-btn">
          <img src="${i.image}">
          <span>${i.name}</span>
        </a>`;
      return;
    }

    portfolio.innerHTML += `
      <a href="${i.link}" class="link-btn">
        <img src="${i.image}">
        <span>${i.name}</span>
      </a>`;
  });
}

function loadTools(){
  toolsList.innerHTML="";
  data.tools.forEach(i=>{
    toolsList.innerHTML+=`
      <a href="${i.link}" class="card">
        <img src="${i.image}">
        <div class="card-content">
          <h3>${i.name}</h3>
          <p>${i.desc}</p>
        </div>
      </a>`;
  });
}

function searchTools(){
  const v=search.value.toLowerCase();
  toolsList.innerHTML="";
  data.tools.filter(t=>t.name.toLowerCase().includes(v)).forEach(i=>{
    toolsList.innerHTML+=`
      <a href="${i.link}" class="card">
        <img src="${i.image}">
        <div class="card-content">
          <h3>${i.name}</h3>
          <p>${i.desc}</p>
        </div>
      </a>`;
  });
}

/* TAB SYSTEM */
function showTab(id,btn){
  document.querySelectorAll(".tab-content").forEach(e=>e.classList.remove("active"));
  document.getElementById(id).classList.add("active");

  document.querySelectorAll(".tab").forEach(t=>t.classList.remove("active"));
  btn.classList.add("active");

  const index=[...document.querySelectorAll(".tab")].indexOf(btn);
  indicator.style.transform=`translateX(${index*100}%)`;

  if(id==="portfolio"){
    profile.classList.remove("hide");
    header.classList.remove("show");
  }else{
    profile.classList.add("hide");
    header.classList.add("show");
  }
}