summaryrefslogtreecommitdiff
path: root/src/js
diff options
context:
space:
mode:
Diffstat (limited to 'src/js')
-rw-r--r--src/js/getrepo.js310
-rw-r--r--src/js/hacktype.js66
-rw-r--r--src/js/header.js18
-rw-r--r--src/js/rbg.js52
4 files changed, 223 insertions, 223 deletions
diff --git a/src/js/getrepo.js b/src/js/getrepo.js
index 2912427c..d34104a2 100644
--- a/src/js/getrepo.js
+++ b/src/js/getrepo.js
@@ -8,190 +8,190 @@ const filterInput = document.querySelector('.filter-repos');
// get information from github profile
const getProfile = async () => {
- const res = await fetch(
- `https://api.github.com/users/${username}`,
- {
- headers: {
- Accept: 'application/vnd.github+json',
- Authorization: //'token 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'
- `Basic ${btoa(`${clientId}:${clientSecret}`)}`
- }
- }
- );
- const profile = await res.json();
- displayProfile(profile);
+ const res = await fetch(
+ `https://api.github.com/users/${username}`,
+ {
+ headers: {
+ Accept: 'application/vnd.github+json',
+ Authorization: //'token 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'
+ `Basic ${btoa(`${clientId}:${clientSecret}`)}`
+ }
+ }
+ );
+ const profile = await res.json();
+ displayProfile(profile);
};
getProfile();
// display infomation from github profile
const displayProfile = (profile) => {
- const userInfo = document.querySelector('.user-info');
- userInfo.innerHTML = `
- <figure>
- <a href=${profile.html_url}><img alt="user avatar" src=${profile.avatar_url}></a>
- </figure>
- <div>
- <!-- <h2><a href=${profile.blog}><strong>${profile.name}</strong></a></h2> -->
- <h2><a href=/><strong class="usertitle">${profile.name}</strong></a></h2>
- <!-- <h2><a href=${profile.html_url}><strong>${profile.name}</strong></a></h2> -->
- <p>${profile.bio}</p>
- <p>
- <strong>Mail:</strong> ${profile.email}
- </p>
- <p>
- <strong>Location:</strong> ${profile.location}
- </p>
- <p>
- <strong>@${profile.login} </strong>
- Repos: ${profile.public_repos}
- Gists: ${profile.public_gists}
- </p>
- </div>
- `;
+ const userInfo = document.querySelector('.user-info');
+ userInfo.innerHTML = `
+ <figure>
+ <a href=${profile.html_url}><img alt="user avatar" src=${profile.avatar_url}></a>
+ </figure>
+ <div>
+ <!-- <h2><a href=${profile.blog}><strong>${profile.name}</strong></a></h2> -->
+ <h2><a href=/><strong class="usertitle">${profile.name}</strong></a></h2>
+ <!-- <h2><a href=${profile.html_url}><strong>${profile.name}</strong></a></h2> -->
+ <p>${profile.bio}</p>
+ <p>
+ <strong>Mail:</strong> ${profile.email}
+ </p>
+ <p>
+ <strong>Location:</strong> ${profile.location}
+ </p>
+ <p>
+ <strong>@${profile.login} </strong>
+ Repos: ${profile.public_repos}
+ Gists: ${profile.public_gists}
+ </p>
+ </div>
+ `;
};
// get list of user's public repos
const getRepos = async () => {
- let repos = [];
- let res;
- res = await fetch(
- `https://api.github.com/users/${username}/repos?&sort=pushed`,
- {
- headers: {
- Accept: 'application/vnd.github+json',
- Authorization:
- `Basic ${btoa(`${clientId}:${clientSecret}`)}`
- // 'token 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'
- }
- }
- );
- let data = await res.json();
- repos = repos.concat(data);
- repos.sort((a, b) => b.forks_count - a.forks_count);
- repos.sort((a, b) => b.stargazers_count - a.stargazers_count);
- displayRepos(repos);
+ let repos = [];
+ let res;
+ res = await fetch(
+ `https://api.github.com/users/${username}/repos?&sort=pushed`,
+ {
+ headers: {
+ Accept: 'application/vnd.github+json',
+ Authorization:
+ `Basic ${btoa(`${clientId}:${clientSecret}`)}`
+ // 'token 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'
+ }
+ }
+ );
+ let data = await res.json();
+ repos = repos.concat(data);
+ repos.sort((a, b) => b.forks_count - a.forks_count);
+ repos.sort((a, b) => b.stargazers_count - a.stargazers_count);
+ displayRepos(repos);
};
getRepos();
// display list of all user's public repos
const displayRepos = (repos) => {
- const userHome = `https://github.com/${username}`
- filterInput.classList.remove('hide');
- for (const repo of repos) {
- if (repo.fork && hideForks) {
- continue;
- }
+ const userHome = `https://github.com/${username}`
+ filterInput.classList.remove('hide');
+ for (const repo of repos) {
+ if (repo.fork && hideForks) {
+ continue;
+ }
- const langUrl = `${userHome}?tab=repositories&q=&language=${repo.language}`
- const starsUrl = `${userHome}/${repo.name}/stargazers`
- const forksUrl = `${userHome}/${repo.name}/network/members`
+ const langUrl = `${userHome}?tab=repositories&q=&language=${repo.language}`
+ const starsUrl = `${userHome}/${repo.name}/stargazers`
+ const forksUrl = `${userHome}/${repo.name}/network/members`
- let listItem = document.createElement('li');
- listItem.classList.add('repo');
- listItem.innerHTML = `
- <h2 class="repo-title">${repo.name}</h2>
- <span class="rdescription">${repo.description ? `<span class="rdescriptiontext">${repo.description}</span>` : ''}<br/><br/>`
+ let listItem = document.createElement('li');
+ listItem.classList.add('repo');
+ listItem.innerHTML = `
+ <h2 class="repo-title">${repo.name}</h2>
+ <span class="rdescription">${repo.description ? `<span class="rdescriptiontext">${repo.description}</span>` : ''}<br/><br/>`
- if (repo.stargazers_count > 0) {
- listItem.innerHTML += `<a href="${starsUrl}">
- <span>⭐ ${repo.stargazers_count}</span></a>`
- }
+ if (repo.stargazers_count > 0) {
+ listItem.innerHTML += `<a href="${starsUrl}">
+ <span>⭐ ${repo.stargazers_count}</span></a>`
+ }
- if (repo.language) {
- listItem.innerHTML += `<a href="${langUrl}">
- <span>${devicons[repo.language]}</span></a>`
- }
+ if (repo.language) {
+ listItem.innerHTML += `<a href="${langUrl}">
+ <span>${devicons[repo.language]}</span></a>`
+ }
- if (repo.forks_count > 0) {
- listItem.innerHTML += `<a href="${starsUrl}">
- <span>${devicons["Git"]} ${repo.forks_count}</span></a>`
- }
+ if (repo.forks_count > 0) {
+ listItem.innerHTML += `<a href="${starsUrl}">
+ <span>${devicons["Git"]} ${repo.forks_count}</span></a>`
+ }
- if (repo.homepage && repo.homepage !== "") {
- listItem.innerHTML += `<br /> <br />
- <a class="link-btn" href=${repo.html_url}>Code ${devicons["Github"]}</a>
- <a class="link-btn" href=${repo.homepage}>Live ${devicons["Chrome"]}</a> <br />`;
- } else {
- listItem.innerHTML += `<br /> <br />
- <a class="link-btn" href=${repo.html_url}>View Project ${devicons["Github"]}</a><br />`;
- }
+ if (repo.homepage && repo.homepage !== "") {
+ listItem.innerHTML += `<br /> <br />
+ <a class="link-btn" href=${repo.html_url}>Code ${devicons["Github"]}</a>
+ <a class="link-btn" href=${repo.homepage}>Live ${devicons["Chrome"]}</a> <br />`;
+ } else {
+ listItem.innerHTML += `<br /> <br />
+ <a class="link-btn" href=${repo.html_url}>View Project ${devicons["Github"]}</a><br />`;
+ }
- repoList.append(listItem);
- }
+ repoList.append(listItem);
+ }
};
// dynamic search
filterInput.addEventListener('input', (e) => {
- const search = e.target.value;
- const repos = document.querySelectorAll('.repo');
- const searchLowerText = search.toLowerCase();
+ const search = e.target.value;
+ const repos = document.querySelectorAll('.repo');
+ const searchLowerText = search.toLowerCase();
- for (const repo of repos) {
- const lowerText = repo.innerText.toLowerCase();
- if (lowerText.includes(searchLowerText)) {
- repo.classList.remove('hide');
- } else {
- repo.classList.add('hide');
- }
- }
+ for (const repo of repos) {
+ const lowerText = repo.innerText.toLowerCase();
+ if (lowerText.includes(searchLowerText)) {
+ repo.classList.remove('hide');
+ } else {
+ repo.classList.add('hide');
+ }
+ }
});
// for programming language icons
const devicons = {
- Git: '<i class="devicon-git-plain" style="color: #555"></i>',
- Github: '<i class="devicon-github-plain" style="color: #1688f0"></i>',
- Chrome: '<i class="devicon-chrome-plain" style="color: #1688f0"></i>',
- Assembly: '<i class="devicon-labview-plain colored"></i> Assembly',
- 'C#': '<i class="devicon-csharp-plain colored"></i> C#',
- 'C++': '<i class="devicon-cplusplus-plain colored"></i> C++',
- C: '<i class="devicon-c-plain colored"></i> C',
- Clojure: '<i class="devicon-clojure-plain colored"></i> C',
- CoffeeScript:
- '<i class="devicon-coffeescript-plain colored"></i> CoffeeScript',
- Crystal: '<i class="devicon-crystal-plain colored"></i> Crystal',
- CSS: '<i class="devicon-css3-plain colored"></i> CSS',
- Dart: '<i class="devicon-dart-plain colored"></i> Dart',
- Dockerfile: '<i class="devicon-docker-plain colored"></i> Docker',
- Elixir: '<i class="devicon-elixir-plain colored"></i> Elixir',
- Elm: '<i class="devicon-elm-plain colored"></i> Elm',
- Erlang: '<i class="devicon-erlang-plain colored"></i> Erlang',
- 'F#': '<i class="devicon-fsharp-plain colored"></i> F#',
- Go: '<i class="devicon-go-plain colored"></i> Go',
- Groovy: '<i class="devicon-groovy-plain colored"></i> Groovy',
- HTML: '<i class="devicon-html5-plain colored"></i> HTML',
- Haskell: '<i class="devicon-haskell-plain colored"></i> Haskell',
- Java: '<i class="devicon-java-plain colored" style="color: #ffca2c"></i> Java',
- JavaScript: '<i class="devicon-javascript-plain colored"></i> JavaScript',
- Julia: '<i class="devicon-julia-plain colored"></i> Julia',
- 'Jupyter Notebook': '<i class="devicon-jupyter-plain colored"></i> Jupyter',
- Kotlin: '<i class="devicon-kotlin-plain colored" style="color: #796bdc"></i> Kotlin',
- Latex: '<i class="devicon-latex-plain colored"></i> Latex',
- Lua: '<i class="devicon-lua-plain-wordmark colored" style="color: #0000d0"></i> Lua',
- Matlab: '<i class="devicon-matlab-plain colored"></i> Matlab',
- Nim: '<i class="devicon-nixos-plain colored" style="color: #FFC200"></i> Nim',
- Nix: '<i class="devicon-nixos-plain colored"></i> Nix',
- ObjectiveC: '<i class="devicon-objectivec-plain colored"></i> ObjectiveC',
- OCaml: '<i class="devicon-ocaml-plain colored"></i> OCaml',
- Perl: '<i class="devicon-perl-plain colored"></i> Perl',
- PHP: '<i class="devicon-php-plain colored"></i> PHP',
- PLSQL: '<i class="devicon-sqlite-plain colored"></i> PLSQL',
- Processing:
- '<i class="devicon-processing-plain colored" style="color: #0096D8"></i> Processing',
- Python: '<i class="devicon-python-plain colored" style="color: #3472a6"></i> Python',
- R: '<i class="devicon-r-plain colored"></i> R',
- Ruby: '<i class="devicon-ruby-plain colored"></i> Ruby',
- Rust: '<i class="devicon-rust-plain colored" style="color: #DEA584"></i> Rust',
- Sass: '<i class="devicon-sass-original colored"></i> Sass',
- Scala: '<i class="devicon-scala-plain colored"></i> Scala',
- Shell: '<i class="devicon-bash-plain colored" style="color: #89E051"></i> Shell',
- Solidity: '<i class="devicon-solidity-plain colored"></i> Solidity',
- Stylus: '<i class="devicon-stylus-plain colored"></i> Stylus',
- Svelte: '<i class="devicon-svelte-plain colored"></i> Svelte',
- Swift: '<i class="devicon-swift-plain colored"></i> Swift',
- Terraform: '<i class="devicon-terraform-plain colored"></i> Terraform',
- TypeScript: '<i class="devicon-typescript-plain colored"></i> TypeScript',
- 'Vim Script': '<i class="devicon-vim-plain colored"></i> Vim Script',
- Vue: '<i class="devicon-vuejs-plain colored"></i> Vue',
- Mail: '<i class="nf nf-cod-mail"></i>',
+ Git: '<i class="devicon-git-plain" style="color: #555"></i>',
+ Github: '<i class="devicon-github-plain" style="color: #1688f0"></i>',
+ Chrome: '<i class="devicon-chrome-plain" style="color: #1688f0"></i>',
+ Assembly: '<i class="devicon-labview-plain colored"></i> Assembly',
+ 'C#': '<i class="devicon-csharp-plain colored"></i> C#',
+ 'C++': '<i class="devicon-cplusplus-plain colored"></i> C++',
+ C: '<i class="devicon-c-plain colored"></i> C',
+ Clojure: '<i class="devicon-clojure-plain colored"></i> C',
+ CoffeeScript:
+ '<i class="devicon-coffeescript-plain colored"></i> CoffeeScript',
+ Crystal: '<i class="devicon-crystal-plain colored"></i> Crystal',
+ CSS: '<i class="devicon-css3-plain colored"></i> CSS',
+ Dart: '<i class="devicon-dart-plain colored"></i> Dart',
+ Dockerfile: '<i class="devicon-docker-plain colored"></i> Docker',
+ Elixir: '<i class="devicon-elixir-plain colored"></i> Elixir',
+ Elm: '<i class="devicon-elm-plain colored"></i> Elm',
+ Erlang: '<i class="devicon-erlang-plain colored"></i> Erlang',
+ 'F#': '<i class="devicon-fsharp-plain colored"></i> F#',
+ Go: '<i class="devicon-go-plain colored"></i> Go',
+ Groovy: '<i class="devicon-groovy-plain colored"></i> Groovy',
+ HTML: '<i class="devicon-html5-plain colored"></i> HTML',
+ Haskell: '<i class="devicon-haskell-plain colored"></i> Haskell',
+ Java: '<i class="devicon-java-plain colored" style="color: #ffca2c"></i> Java',
+ JavaScript: '<i class="devicon-javascript-plain colored"></i> JavaScript',
+ Julia: '<i class="devicon-julia-plain colored"></i> Julia',
+ 'Jupyter Notebook': '<i class="devicon-jupyter-plain colored"></i> Jupyter',
+ Kotlin: '<i class="devicon-kotlin-plain colored" style="color: #796bdc"></i> Kotlin',
+ Latex: '<i class="devicon-latex-plain colored"></i> Latex',
+ Lua: '<i class="devicon-lua-plain-wordmark colored" style="color: #0000d0"></i> Lua',
+ Matlab: '<i class="devicon-matlab-plain colored"></i> Matlab',
+ Nim: '<i class="devicon-nixos-plain colored" style="color: #FFC200"></i> Nim',
+ Nix: '<i class="devicon-nixos-plain colored"></i> Nix',
+ ObjectiveC: '<i class="devicon-objectivec-plain colored"></i> ObjectiveC',
+ OCaml: '<i class="devicon-ocaml-plain colored"></i> OCaml',
+ Perl: '<i class="devicon-perl-plain colored"></i> Perl',
+ PHP: '<i class="devicon-php-plain colored"></i> PHP',
+ PLSQL: '<i class="devicon-sqlite-plain colored"></i> PLSQL',
+ Processing:
+ '<i class="devicon-processing-plain colored" style="color: #0096D8"></i> Processing',
+ Python: '<i class="devicon-python-plain colored" style="color: #3472a6"></i> Python',
+ R: '<i class="devicon-r-plain colored"></i> R',
+ Ruby: '<i class="devicon-ruby-plain colored"></i> Ruby',
+ Rust: '<i class="devicon-rust-plain colored" style="color: #DEA584"></i> Rust',
+ Sass: '<i class="devicon-sass-original colored"></i> Sass',
+ Scala: '<i class="devicon-scala-plain colored"></i> Scala',
+ Shell: '<i class="devicon-bash-plain colored" style="color: #89E051"></i> Shell',
+ Solidity: '<i class="devicon-solidity-plain colored"></i> Solidity',
+ Stylus: '<i class="devicon-stylus-plain colored"></i> Stylus',
+ Svelte: '<i class="devicon-svelte-plain colored"></i> Svelte',
+ Swift: '<i class="devicon-swift-plain colored"></i> Swift',
+ Terraform: '<i class="devicon-terraform-plain colored"></i> Terraform',
+ TypeScript: '<i class="devicon-typescript-plain colored"></i> TypeScript',
+ 'Vim Script': '<i class="devicon-vim-plain colored"></i> Vim Script',
+ Vue: '<i class="devicon-vuejs-plain colored"></i> Vue',
+ Mail: '<i class="nf nf-cod-mail"></i>',
};
diff --git a/src/js/hacktype.js b/src/js/hacktype.js
index b5542377..eb5595c0 100644
--- a/src/js/hacktype.js
+++ b/src/js/hacktype.js
@@ -5,46 +5,46 @@ const special = "!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~";
let interval = null;
function hackType() {
- const elements = document.querySelectorAll(".hacktype");
- let intervals = [];
-
- elements.forEach((element) => {
- let iteration = 0;
-
- intervals.push(
- setInterval(() => {
- element.innerText = element.innerText
- .split("")
- .map((letter, index) => {
- if (index < iteration) {
- return element.dataset.value[index];
- }
-
- return letters[Math.floor(Math.random() * 26)];
- })
- .join("");
-
- if (iteration >= element.dataset.value.length) {
- clearInterval(intervals.shift());
- }
-
- iteration += 1 / 5;
- }, 20)
- );
- });
+const elements = document.querySelectorAll(".hacktype");
+let intervals = [];
+
+elements.forEach((element) => {
+ let iteration = 0;
+
+ intervals.push(
+ setInterval(() => {
+ element.innerText = element.innerText
+ .split("")
+ .map((letter, index) => {
+ if (index < iteration) {
+ return element.dataset.value[index];
+ }
+
+ return letters[Math.floor(Math.random() * 26)];
+ })
+ .join("");
+
+ if (iteration >= element.dataset.value.length) {
+ clearInterval(intervals.shift());
+ }
+
+ iteration += 1 / 5;
+ }, 20)
+ );
+});
}
hackType(); // Call hackType initially
setInterval(() => {
- const intervals = document.querySelectorAll(".hacktype-interval");
- intervals.forEach((interval) => clearInterval(interval)); // Clear existing intervals
- hackType(); // Call hackType again
+const intervals = document.querySelectorAll(".hacktype-interval");
+intervals.forEach((interval) => clearInterval(interval)); // Clear existing intervals
+hackType(); // Call hackType again
}, 10000); // Repeat every 5 seconds
// Check if the document becomes visible again
document.addEventListener("visibilitychange", () => {
- if (!document.hidden) {
- hackType(); // Call hackType when the user comes back from being away
- }
+if (!document.hidden) {
+ hackType(); // Call hackType when the user comes back from being away
+}
});
diff --git a/src/js/header.js b/src/js/header.js
index f8e53d5a..6189bc1c 100644
--- a/src/js/header.js
+++ b/src/js/header.js
@@ -6,15 +6,15 @@ let page = header.getAttribute('page');
newElement.innerHTML = `
<!-- header -->
<header id="navBarHeader">
- <nav class="navBar">
- <div class="hleft">
- <a id="btnHome" style="text-decoration: unset" href="/">Home<span></span></span></a>
- </div>
- <div class="hright">
- <a href="/pages/repo/github/repos.html" id="btnGhRepo" style="text-decoration: unset">Github Repos</a>
- <a href="/pages/info/about.html" id="btnAbout" style="text-decoration: unset">About</a>
- </div>
- </nav>
+ <nav class="navBar">
+ <div class="hleft">
+ <a id="btnHome" style="text-decoration: unset" href="/">Home<span></span></span></a>
+ </div>
+ <div class="hright">
+ <a href="/pages/repo/github/repos.html" id="btnGhRepo" style="text-decoration: unset">Github Repos</a>
+ <a href="/pages/info/about.html" id="btnAbout" style="text-decoration: unset">About</a>
+ </div>
+ </nav>
</header>
`;
diff --git a/src/js/rbg.js b/src/js/rbg.js
index 40f0dadd..fa6b11a6 100644
--- a/src/js/rbg.js
+++ b/src/js/rbg.js
@@ -1,38 +1,38 @@
document.body.style.transition = "background 1s ease-in-out";
function getRandomColor() {
- const letters = "0123456789ABCDEF";
- let color = "#";
- for (let i = 0; i < 6; i++) {
- color += letters[Math.floor(Math.random() * 16)];
- }
- return color;
+const letters = "0123456789ABCDEF";
+let color = "#";
+for (let i = 0; i < 6; i++) {
+ color += letters[Math.floor(Math.random() * 16)];
+}
+return color;
}
function setRandomGradient() {
- const rand3 = Math.floor(Math.random() * 3) + 1;
- if (rand3 === 1) {
- document.body.style.background = `linear-gradient(${Math.floor(
- Math.random() * 180
- )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
- } else if (rand3 === 2) {
- document.body.style.background = `linear-gradient(${Math.floor(
- Math.random() * 180
- )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}),
+const rand3 = Math.floor(Math.random() * 3) + 1;
+if (rand3 === 1) {
+ document.body.style.background = `linear-gradient(${Math.floor(
+ Math.random() * 180
+ )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
+} else if (rand3 === 2) {
+ document.body.style.background = `linear-gradient(${Math.floor(
+ Math.random() * 180
+ )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}),
linear-gradient(${Math.floor(
- Math.random() * 180
- )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
- } else {
- document.body.style.background = `linear-gradient(${Math.floor(
- Math.random() * 180
- )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}),
+ Math.random() * 180
+ )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
+} else {
+ document.body.style.background = `linear-gradient(${Math.floor(
+ Math.random() * 180
+ )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}),
linear-gradient(${Math.floor(
- Math.random() * 180
- )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}),
+ Math.random() * 180
+ )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}),
linear-gradient(${Math.floor(
- Math.random() * 180
- )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
- }
+ Math.random() * 180
+ )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
+}
}
setRandomGradient();