From 721e1151c7383985ab4630e574fc7c45b20f4db9 Mon Sep 17 00:00:00 2001
From: Abhishek Keshri <25423853+2KAbhishek@users.noreply.github.com>
Date: Thu, 16 Jul 2026 08:24:48 +0530
Subject: [PATCH 01/18] feat: show total stars at top
---
script.js | 17 ++++++++++++++++-
1 file changed, 16 insertions(+), 1 deletion(-)
diff --git a/script.js b/script.js
index 7218763..59683f4 100644
--- a/script.js
+++ b/script.js
@@ -21,6 +21,8 @@ const getProfile = async () => {
};
getProfile();
+let totalStars = 0;
+
// display information from github profile
const displayProfile = (profile) => {
const userInfo = document.querySelector('.user-info');
@@ -32,6 +34,7 @@ const displayProfile = (profile) => {
${profile.bio}
+ Stars: ${totalStars}
Followers: ${profile.followers}
Repos: ${profile.public_repos}
Gists: ${profile.public_gists}
@@ -60,10 +63,22 @@ const getRepos = async () => {
// }
);
let data = await res.json();
- repos = repos.concat(data);
+ if (Array.isArray(data)) {
+ repos = repos.concat(data);
+ }
}
repos.sort((a, b) => b.forks_count - a.forks_count);
repos.sort((a, b) => b.stargazers_count - a.stargazers_count);
+
+ totalStars = repos
+ .filter((repo) => repo && !repo.fork)
+ .reduce((sum, repo) => sum + (repo.stargazers_count || 0), 0);
+
+ const totalStarsElement = document.querySelector('.total-stars');
+ if (totalStarsElement) {
+ totalStarsElement.textContent = totalStars;
+ }
+
displayRepos(repos);
};
getRepos();
From c4c25acbf36352c5b9b32f90cf1b78fce44a27ca Mon Sep 17 00:00:00 2001
From: Abhishek Keshri <25423853+2KAbhishek@users.noreply.github.com>
Date: Thu, 16 Jul 2026 08:33:59 +0530
Subject: [PATCH 02/18] feat: improve link button styles and hover icon colors
---
script.js | 4 ++--
style.css | 19 +++++++++++++++----
2 files changed, 17 insertions(+), 6 deletions(-)
diff --git a/script.js b/script.js
index 59683f4..295a98f 100644
--- a/script.js
+++ b/script.js
@@ -152,8 +152,8 @@ filterInput.addEventListener('input', (e) => {
// for programming language icons
const devicons = {
Git: '',
- Github: '',
- Chrome: '',
+ Github: '',
+ Chrome: '',
Assembly: ' Assembly',
'C#': ' C#',
'C++': ' C++',
diff --git a/style.css b/style.css
index 4ed31ce..d0c2969 100644
--- a/style.css
+++ b/style.css
@@ -196,15 +196,26 @@ h3 {
margin: 1em 0.5em;
padding: 10px 20px;
background: var(--bg-main);
- border-radius: 30px;
- border: 2px solid var(--accent);
+ border-radius: 10px;
+ border: 3px solid var(--accent);
color: var(--text);
+ transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.link-btn:hover {
background: var(--accent);
- border: 2px solid var(--text);
- transform: scale(1.1);
+ border: 3px solid var(--text);
+ color: var(--bg-main);
+ transform: scale(1.05);
+}
+
+.link-btn i {
+ color: var(--accent);
+ transition: color 0.2s ease;
+}
+
+.link-btn:hover i {
+ color: var(--bg-main);
}
.repo-list p {
From 072318da7e90e6a8b6e17ee870d475d563bb1681 Mon Sep 17 00:00:00 2001
From: Abhishek Keshri <25423853+2KAbhishek@users.noreply.github.com>
Date: Thu, 16 Jul 2026 08:34:34 +0530
Subject: [PATCH 03/18] style: integrate Google Fonts (Outfit and Plus Jakarta
Sans) for modern typography
---
index.html | 6 ++++++
style.css | 6 +++++-
2 files changed, 11 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 74401a4..e5ca5d6 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,12 @@
2KAbhishek's Projects
+
+
+
Date: Thu, 16 Jul 2026 08:36:17 +0530
Subject: [PATCH 04/18] style: add text gradient and font weight to main
heading
---
style.css | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/style.css b/style.css
index 2e6534f..a0f9e57 100644
--- a/style.css
+++ b/style.css
@@ -53,8 +53,13 @@ h1, h2, h3, .repo-name {
}
h1 {
- color: var(--accent);
+ background: linear-gradient(135deg, var(--accent), #796bdc);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
margin-bottom: 4px;
+ font-weight: 800;
+ font-size: 2.8em;
+ text-align: center;
}
small {
From 6de5c2c12a6193afa8a628c42a86835d3148fb46 Mon Sep 17 00:00:00 2001
From: Abhishek Keshri <25423853+2KAbhishek@users.noreply.github.com>
Date: Thu, 16 Jul 2026 08:36:42 +0530
Subject: [PATCH 05/18] style: style repository stats (stars, languages, forks)
as pill badges
---
script.js | 6 +++---
style.css | 23 +++++++++++++++++++++++
2 files changed, 26 insertions(+), 3 deletions(-)
diff --git a/script.js b/script.js
index 295a98f..29781df 100644
--- a/script.js
+++ b/script.js
@@ -105,17 +105,17 @@ const displayRepos = (repos) => {
if (repo.stargazers_count > 0) {
listItem.innerHTML += `
- ⭐ ${repo.stargazers_count}`;
+ ⭐ ${repo.stargazers_count}`;
}
if (repo.language) {
listItem.innerHTML += `
- ${devicons[repo.language]}`;
+ ${devicons[repo.language]}`;
}
if (repo.forks_count > 0) {
listItem.innerHTML += `
- ${devicons['Git']} ${repo.forks_count}`;
+ ${devicons['Git']} ${repo.forks_count}`;
}
if (repo.homepage && repo.homepage !== '') {
diff --git a/style.css b/style.css
index a0f9e57..eb6580e 100644
--- a/style.css
+++ b/style.css
@@ -270,3 +270,26 @@ h3 {
span {
margin: 0 0.5em;
}
+
+.repo-badge {
+ display: inline-flex;
+ align-items: center;
+ padding: 6px 12px;
+ border-radius: 20px;
+ background-color: var(--bg-repo);
+ font-size: 0.9em;
+ border: 1px solid var(--accent);
+ color: var(--text);
+ margin: 0.25em !important;
+ transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.repo-badge:hover {
+ background-color: var(--accent);
+ color: var(--bg-main);
+ border-color: var(--text);
+}
+
+.repo-badge i {
+ margin-right: 4px;
+}
From dc403db53a233792d49070723f342f07453d9a22 Mon Sep 17 00:00:00 2001
From: Abhishek Keshri <25423853+2KAbhishek@users.noreply.github.com>
Date: Thu, 16 Jul 2026 08:44:26 +0530
Subject: [PATCH 06/18] style: restructure cards using flexbox, add 2px
borders, align items stretch, and set fixed description height for uniform
card sizes
---
script.js | 53 +++++++++++++++++++++++++------------------------
style.css | 59 ++++++++++++++++++++++++++++++++++++++++++++++---------
2 files changed, 77 insertions(+), 35 deletions(-)
diff --git a/script.js b/script.js
index 29781df..34f1d6d 100644
--- a/script.js
+++ b/script.js
@@ -87,6 +87,7 @@ getRepos();
const displayRepos = (repos) => {
const userHome = `https://github.com/${username}`;
filterInput.classList.remove('hide');
+ repoList.innerHTML = '';
for (const repo of repos) {
if (repo.fork && hideForks) {
continue;
@@ -98,36 +99,36 @@ const displayRepos = (repos) => {
let listItem = document.createElement('li');
listItem.classList.add('repo');
- listItem.innerHTML = `
- ${repo.name}
- ${repo.description}
-
`;
- if (repo.stargazers_count > 0) {
- listItem.innerHTML += `
- ⭐ ${repo.stargazers_count}`;
- }
+ const starsHtml = repo.stargazers_count > 0
+ ? `⭐ ${repo.stargazers_count}`
+ : '';
+ const langHtml = repo.language
+ ? `${devicons[repo.language]}`
+ : '';
+ const forksHtml = repo.forks_count > 0
+ ? `${devicons['Git']} ${repo.forks_count}`
+ : '';
- if (repo.language) {
- listItem.innerHTML += `
- ${devicons[repo.language]}`;
- }
+ const statsHtml = (starsHtml || langHtml || forksHtml)
+ ? `${starsHtml}${langHtml}${forksHtml}
`
+ : '';
- if (repo.forks_count > 0) {
- listItem.innerHTML += `
- ${devicons['Git']} ${repo.forks_count}`;
- }
+ const homepageHtml = repo.homepage && repo.homepage !== ''
+ ? `${devicons['Chrome']} Live`
+ : '';
- if (repo.homepage && repo.homepage !== '') {
- listItem.innerHTML += `
- ${devicons['Github']} Code
- ${devicons['Chrome']} Live
-
`;
- } else {
- listItem.innerHTML += `
- ${devicons['Github']} Code
-
`;
- }
+ listItem.innerHTML = `
+
+ ${statsHtml}
+
+ `;
repoList.append(listItem);
}
diff --git a/style.css b/style.css
index eb6580e..dade4a5 100644
--- a/style.css
+++ b/style.css
@@ -179,7 +179,7 @@ h3 {
display: flex;
flex-wrap: wrap;
justify-content: center;
- align-items: flex-start;
+ align-items: stretch;
}
.repo-list li {
@@ -187,23 +187,30 @@ h3 {
min-height: 200px;
border-radius: 10px;
margin: 1em 0;
- border: 1px solid var(--accent);
- padding: 1em;
+ border: 2px solid var(--accent);
+ padding: 1.25em;
text-align: center;
background-color: var(--bg-user);
+ transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 0.75em;
}
.repo-list li:hover {
background-color: var(--bg-main);
box-shadow:
- 0 3px 6px var(--accent),
- 0 3px 6px var(--accent);
+ 0 8px 16px var(--accent),
+ 0 8px 16px var(--accent);
+ transform: translateY(-4px);
}
.link-btn {
display: inline-block;
- margin: 1em 0.5em;
- padding: 10px 20px;
+ margin: 0 0.25em;
+ padding: 8px 16px;
background: var(--bg-main);
border-radius: 10px;
border: 3px solid var(--accent);
@@ -263,8 +270,42 @@ h3 {
font-size: 1.75em;
}
-.repo-descriptopn {
- font-size: 1em;
+.repo-description {
+ font-size: 0.95em;
+ opacity: 0.8;
+ line-height: 1.5;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-bottom: 0.5em;
+ height: 3em;
+}
+
+.repo-header {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.5em;
+}
+
+.repo-stats {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 0.25em;
+ margin: 0.5em 0;
+}
+
+.repo-actions {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ gap: 0.5em;
+ margin-top: auto;
}
span {
From 06cbe3ee9b87ad1a56df8281f6746c3e3cba026a Mon Sep 17 00:00:00 2001
From: Abhishek Keshri <25423853+2KAbhishek@users.noreply.github.com>
Date: Thu, 16 Jul 2026 10:01:30 +0530
Subject: [PATCH 07/18] style: standardize typography to Inter font family
---
index.html | 2 +-
style.css | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index e5ca5d6..f2c9926 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
diff --git a/style.css b/style.css
index dade4a5..28a3ec7 100644
--- a/style.css
+++ b/style.css
@@ -27,14 +27,14 @@ body {
align-items: center;
justify-content: center;
margin: 0;
- font-family: 'Plus Jakarta Sans', sans-serif;
+ font-family: 'Inter', sans-serif;
background-color: var(--bg-main);
color: var(--text);
font-size: 14px;
}
h1, h2, h3, .repo-name {
- font-family: 'Outfit', sans-serif;
+ font-family: 'Inter', sans-serif;
}
.container {
From 63fdb52a4ff0663d7063e26e64eb17e4abd7ceba Mon Sep 17 00:00:00 2001
From: Abhishek Keshri <25423853+2KAbhishek@users.noreply.github.com>
Date: Thu, 16 Jul 2026 10:13:22 +0530
Subject: [PATCH 08/18] style: rename color variables to global bg-section and
bg-card standard
---
style.css | 24 ++++++++++++------------
1 file changed, 12 insertions(+), 12 deletions(-)
diff --git a/style.css b/style.css
index 28a3ec7..623d24d 100644
--- a/style.css
+++ b/style.css
@@ -2,19 +2,19 @@
:root {
--text: #151515;
--accent: #1688f0;
- --bg-main: #fff;
- --bg-repo: #f0f0f0;
- --bg-user: #f5f5f5;
+ --bg-main: #ffffff;
+ --bg-section: #f0f0f0;
+ --bg-card: #f5f5f5;
}
}
@media (prefers-color-scheme: dark) {
:root {
- --text: #e5e5e5;
+ --text: #dedede;
--accent: #1688f0;
- --bg-main: #000;
- --bg-repo: #0f0f1a;
- --bg-user: #0a0a0f;
+ --bg-main: #000000;
+ --bg-section: #0a0a0a;
+ --bg-card: #0d0d0d;
}
}
@@ -107,7 +107,7 @@ ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
- background-color: var(--bg-user);
+ background-color: var(--bg-card);
color: var(--text);
font-size: 16px;
padding: 1em;
@@ -143,7 +143,7 @@ ul {
.filter-repos,
input {
- background: var(--bg-user);
+ background: var(--bg-card);
width: 50%;
border-radius: 20px;
min-width: 300px;
@@ -159,7 +159,7 @@ input {
display: flex;
flex-wrap: wrap;
justify-content: center;
- background-color: var(--bg-repo);
+ background-color: var(--bg-section);
margin-top: 0;
padding: 2em;
border-bottom-left-radius: 20px;
@@ -190,7 +190,7 @@ h3 {
border: 2px solid var(--accent);
padding: 1.25em;
text-align: center;
- background-color: var(--bg-user);
+ background-color: var(--bg-card);
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
display: flex;
flex-direction: column;
@@ -317,7 +317,7 @@ span {
align-items: center;
padding: 6px 12px;
border-radius: 20px;
- background-color: var(--bg-repo);
+ background-color: var(--bg-section);
font-size: 0.9em;
border: 1px solid var(--accent);
color: var(--text);
From 22fff72905417f2f4c0bb6f75aaf14afb606cc27 Mon Sep 17 00:00:00 2001
From: Abhishek Keshri <25423853+2KAbhishek@users.noreply.github.com>
Date: Thu, 16 Jul 2026 12:15:00 +0530
Subject: [PATCH 09/18] fix: prevent footer wrapping on empty search and add
empty state message
---
script.js | 21 +++++++++++++++++++++
style.css | 11 +++++++++++
2 files changed, 32 insertions(+)
diff --git a/script.js b/script.js
index 34f1d6d..15fdd91 100644
--- a/script.js
+++ b/script.js
@@ -139,15 +139,36 @@ filterInput.addEventListener('input', (e) => {
const search = e.target.value;
const repos = document.querySelectorAll('.repo');
const searchLowerText = search.toLowerCase();
+ let visibleCount = 0;
for (const repo of repos) {
const lowerText = repo.innerText.toLowerCase();
if (lowerText.includes(searchLowerText)) {
repo.classList.remove('hide');
+ visibleCount++;
} else {
repo.classList.add('hide');
}
}
+
+ let noResultsMsg = document.querySelector('.no-results');
+ if (visibleCount === 0) {
+ if (!noResultsMsg) {
+ noResultsMsg = document.createElement('p');
+ noResultsMsg.classList.add('no-results');
+ noResultsMsg.style.width = '100%';
+ noResultsMsg.style.textAlign = 'center';
+ noResultsMsg.style.fontSize = '1.2em';
+ noResultsMsg.style.marginTop = '2em';
+ noResultsMsg.style.color = 'var(--text)';
+ repoList.appendChild(noResultsMsg);
+ }
+ noResultsMsg.textContent = `No projects found matching "${search}"`;
+ } else {
+ if (noResultsMsg) {
+ noResultsMsg.remove();
+ }
+ }
});
// for programming language icons
diff --git a/style.css b/style.css
index 623d24d..99240c0 100644
--- a/style.css
+++ b/style.css
@@ -47,6 +47,15 @@ h1, h2, h3, .repo-name {
max-width: 1280px;
}
+.intro {
+ width: 100%;
+}
+
+h4 {
+ width: 100%;
+ text-align: center;
+}
+
.hide {
/* '!important' is to make sure that when we add the class using JS, it takes precendence */
display: none !important;
@@ -60,6 +69,7 @@ h1 {
font-weight: 800;
font-size: 2.8em;
text-align: center;
+ width: 100%;
}
small {
@@ -165,6 +175,7 @@ input {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-bottom: 4em;
+ width: 100%;
}
h3 {
From 160a124c8915c8cee3d4195a9c5ed2d572a5fe74 Mon Sep 17 00:00:00 2001
From: Abhishek Keshri <25423853+2KAbhishek@users.noreply.github.com>
Date: Thu, 16 Jul 2026 12:18:55 +0530
Subject: [PATCH 10/18] style: refactor repo list to CSS Grid layout
---
script.js | 5 -----
style.css | 33 +++++++++++++--------------------
2 files changed, 13 insertions(+), 25 deletions(-)
diff --git a/script.js b/script.js
index 15fdd91..d7d60f8 100644
--- a/script.js
+++ b/script.js
@@ -156,11 +156,6 @@ filterInput.addEventListener('input', (e) => {
if (!noResultsMsg) {
noResultsMsg = document.createElement('p');
noResultsMsg.classList.add('no-results');
- noResultsMsg.style.width = '100%';
- noResultsMsg.style.textAlign = 'center';
- noResultsMsg.style.fontSize = '1.2em';
- noResultsMsg.style.marginTop = '2em';
- noResultsMsg.style.color = 'var(--text)';
repoList.appendChild(noResultsMsg);
}
noResultsMsg.textContent = `No projects found matching "${search}"`;
diff --git a/style.css b/style.css
index 99240c0..f165326 100644
--- a/style.css
+++ b/style.css
@@ -187,17 +187,15 @@ h3 {
.repo-list {
width: 100%;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- align-items: stretch;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 1.5em;
+ margin-top: 1em;
}
.repo-list li {
- width: 100%;
min-height: 200px;
border-radius: 10px;
- margin: 1em 0;
border: 2px solid var(--accent);
padding: 1.25em;
text-align: center;
@@ -210,6 +208,15 @@ h3 {
gap: 0.75em;
}
+.no-results {
+ grid-column: 1 / -1;
+ width: 100%;
+ text-align: center;
+ font-size: 1.2em;
+ margin-top: 2em;
+ color: var(--text);
+}
+
.repo-list li:hover {
background-color: var(--bg-main);
box-shadow:
@@ -255,14 +262,6 @@ h3 {
width: 45%;
text-align: left;
}
-
- .repo-list {
- justify-content: space-between;
- }
-
- .repo-list li {
- width: 48%;
- }
}
@media (max-width: 700px) {
@@ -271,12 +270,6 @@ h3 {
}
}
-@media (min-width: 1200px) {
- .repo-list li {
- width: 32%;
- }
-}
-
.repo-name {
font-size: 1.75em;
}
From ce93ecd2e2db741c61506c9cdf142589893be013 Mon Sep 17 00:00:00 2001
From: Abhishek Keshri <25423853+2KAbhishek@users.noreply.github.com>
Date: Thu, 16 Jul 2026 12:27:45 +0530
Subject: [PATCH 11/18] style: make dark theme background pure black
---
style.css | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/style.css b/style.css
index f165326..bf9ab6d 100644
--- a/style.css
+++ b/style.css
@@ -13,8 +13,8 @@
--text: #dedede;
--accent: #1688f0;
--bg-main: #000000;
- --bg-section: #0a0a0a;
- --bg-card: #0d0d0d;
+ --bg-section: #000000;
+ --bg-card: #000000;
}
}
From d77bfd783378e8c28142ff8176a49289fdacfeee Mon Sep 17 00:00:00 2001
From: Abhishek Keshri <25423853+2KAbhishek@users.noreply.github.com>
Date: Thu, 16 Jul 2026 12:52:02 +0530
Subject: [PATCH 12/18] feat: add keyboard shortcuts for search input
---
script.js | 13 +++++++++++++
1 file changed, 13 insertions(+)
diff --git a/script.js b/script.js
index d7d60f8..fb61c9f 100644
--- a/script.js
+++ b/script.js
@@ -223,3 +223,16 @@ const devicons = {
'Vim Script': ' Vim Script',
Vue: ' Vue'
};
+
+// Keyboard shortcuts
+document.addEventListener('keydown', (e) => {
+ if (e.key === '/' && document.activeElement !== filterInput) {
+ e.preventDefault();
+ filterInput.focus();
+ }
+ if (e.key === 'Escape') {
+ filterInput.value = '';
+ filterInput.dispatchEvent(new Event('input'));
+ filterInput.blur();
+ }
+});
From 190629b9aa9ce32d18d6b7569669e24e90e74dea Mon Sep 17 00:00:00 2001
From: Abhishek Keshri <25423853+2KAbhishek@users.noreply.github.com>
Date: Thu, 16 Jul 2026 14:08:51 +0530
Subject: [PATCH 13/18] feat: upgrade Devicon to v2.17.0 with SRI to align with
portfolio
---
index.html | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index f2c9926..5985d0e 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,10 @@
From 5ac25ff77d23e8ff72906ec2070aaf5c22a1cdba Mon Sep 17 00:00:00 2001
From: Ankush
Date: Wed, 22 Jul 2026 18:27:14 +0530
Subject: [PATCH 14/18] fix: language mapping and add try/catch (#19)
---
script.js | 110 +++++++++++++++++++++++++++++++++++++-----------------
1 file changed, 75 insertions(+), 35 deletions(-)
diff --git a/script.js b/script.js
index fb61c9f..2a2948c 100644
--- a/script.js
+++ b/script.js
@@ -5,23 +5,33 @@ const repoList = document.querySelector('.repo-list');
const reposSection = document.querySelector('.repos');
const filterInput = document.querySelector('.filter-repos');
+let totalStars = 0;
+
// 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 your-personal-access-token-here'
- // }
- // }
- );
- const profile = await res.json();
- displayProfile(profile);
+ try {
+ const res = await fetch(
+ `https://api.github.com/users/${username}`
+ // {
+ // headers: {
+ // Accept: 'application/vnd.github+json',
+ // Authorization: 'token your-personal-access-token-here'
+ // }
+ // }
+ );
+ if (!res.ok) {
+ throw new Error(`GitHub API error: ${res.status} ${res.statusText}`);
+ }
+ const profile = await res.json();
+ displayProfile(profile);
+ } catch (err) {
+ console.error('Failed to load profile:', err);
+ const userInfo = document.querySelector('.user-info');
+ if (userInfo) {
+ userInfo.innerHTML = `Failed to load profile. ${err.message}
`;
+ }
+ }
};
-getProfile();
-
-let totalStars = 0;
// display information from github profile
const displayProfile = (profile) => {
@@ -50,23 +60,38 @@ const displayProfile = (profile) => {
// get list of user's public repos
const getRepos = async () => {
let repos = [];
- let res;
- for (let i = 1; i <= maxPages; i++) {
- res = await fetch(
- `https://api.github.com/users/${username}/repos?&sort=pushed&per_page=100&page=${i}`
- // {
- // headers: {
- // Accept: 'application/vnd.github+json',
- // Authorization:
- // 'token your-personal-access-token-here'
- // }
- // }
- );
- let data = await res.json();
- if (Array.isArray(data)) {
- repos = repos.concat(data);
+ try {
+ for (let i = 1; i <= maxPages; i++) {
+ const res = await fetch(
+ `https://api.github.com/users/${username}/repos?&sort=pushed&per_page=100&page=${i}`
+ // {
+ // headers: {
+ // Accept: 'application/vnd.github+json',
+ // Authorization:
+ // 'token your-personal-access-token-here'
+ // }
+ // }
+ );
+ if (!res.ok) {
+ throw new Error(`GitHub API error: ${res.status} ${res.statusText}`);
+ }
+ const data = await res.json();
+ if (Array.isArray(data)) {
+ repos = repos.concat(data);
+ // stop early if this page wasn't full - no more pages to fetch
+ if (data.length < 100) {
+ break;
+ }
+ } else {
+ break;
+ }
}
+ } catch (err) {
+ console.error('Failed to load repos:', err);
+ repoList.innerHTML = `Failed to load repositories. ${err.message}
`;
+ return;
}
+
repos.sort((a, b) => b.forks_count - a.forks_count);
repos.sort((a, b) => b.stargazers_count - a.stargazers_count);
@@ -81,7 +106,13 @@ const getRepos = async () => {
displayRepos(repos);
};
-getRepos();
+
+// Fetch repos first so star totals are ready before/alongside the profile render,
+// then fetch the profile. Both still run, but this avoids the profile card
+// briefly showing a stale "0" for stars in the common case.
+(async () => {
+ await Promise.all([getRepos(), getProfile()]);
+})();
// display list of all user's public repos
const displayRepos = (repos) => {
@@ -103,9 +134,17 @@ const displayRepos = (repos) => {
const starsHtml = repo.stargazers_count > 0
? `⭐ ${repo.stargazers_count}`
: '';
- const langHtml = repo.language
- ? `${devicons[repo.language]}`
- : '';
+
+ // Guard against languages missing from the devicons map so we never
+ // render the literal string "undefined" as a badge.
+ let langHtml = '';
+ if (repo.language) {
+ const icon = devicons[repo.language];
+ langHtml = icon
+ ? `${icon}`
+ : `${repo.language}`;
+ }
+
const forksHtml = repo.forks_count > 0
? `${devicons['Git']} ${repo.forks_count}`
: '';
@@ -200,7 +239,7 @@ const devicons = {
Matlab: ' Matlab',
Nim: ' Nim',
Nix: ' Nix',
- ObjectiveC: ' ObjectiveC',
+ 'Objective-C': ' Objective-C',
OCaml: ' OCaml',
Perl: ' Perl',
PHP: ' PHP',
@@ -212,6 +251,7 @@ const devicons = {
Ruby: ' Ruby',
Rust: ' Rust',
Sass: ' Sass',
+ SCSS: ' SCSS',
Scala: ' Scala',
Shell: ' Shell',
Solidity: ' Solidity',
@@ -220,7 +260,7 @@ const devicons = {
Swift: ' Swift',
Terraform: ' Terraform',
TypeScript: ' TypeScript',
- 'Vim Script': ' Vim Script',
+ 'Vim script': ' Vim Script',
Vue: ' Vue'
};
From 24666191d6382b39295d50c59ad26beabc7b2891 Mon Sep 17 00:00:00 2001
From: Abhishek Keshri <25423853+2KAbhishek@users.noreply.github.com>
Date: Wed, 22 Jul 2026 18:36:40 +0530
Subject: [PATCH 15/18] fix: resolve profile star-count race condition, null
values, and clean up comments
---
script.js | 186 +++++++++++++++++++++++++-----------------------------
1 file changed, 87 insertions(+), 99 deletions(-)
diff --git a/script.js b/script.js
index 2a2948c..f5549ee 100644
--- a/script.js
+++ b/script.js
@@ -2,119 +2,76 @@ const username = '2KAbhishek';
const maxPages = 3;
const hideForks = true;
const repoList = document.querySelector('.repo-list');
-const reposSection = document.querySelector('.repos');
const filterInput = document.querySelector('.filter-repos');
-let totalStars = 0;
-
-// get information from github profile
-const getProfile = async () => {
- try {
- const res = await fetch(
- `https://api.github.com/users/${username}`
- // {
- // headers: {
- // Accept: 'application/vnd.github+json',
- // Authorization: 'token your-personal-access-token-here'
- // }
- // }
- );
- if (!res.ok) {
- throw new Error(`GitHub API error: ${res.status} ${res.statusText}`);
- }
- const profile = await res.json();
- displayProfile(profile);
- } catch (err) {
- console.error('Failed to load profile:', err);
- const userInfo = document.querySelector('.user-info');
- if (userInfo) {
- userInfo.innerHTML = `Failed to load profile. ${err.message}
`;
+const fetchProfile = async () => {
+ const res = await fetch(`https://api.github.com/users/${username}`);
+ if (!res.ok) {
+ if (res.status === 403) {
+ throw new Error('GitHub API rate limit exceeded. Please try again later.');
}
+ throw new Error(`GitHub API error: ${res.status} ${res.statusText}`);
}
+ return res.json();
};
-// display information from github profile
-const displayProfile = (profile) => {
+const displayProfile = (profile, totalStars) => {
const userInfo = document.querySelector('.user-info');
+ if (!userInfo) return;
+
+ const blogUrl = profile.blog
+ ? (profile.blog.startsWith('http') ? profile.blog : `https://${profile.blog}`)
+ : `https://github.com/${profile.login}`;
+
+ const companyHtml = profile.company ? `Work: ${profile.company}` : '';
+ const locationHtml = profile.location ? `Location: ${profile.location}` : '';
+ const extraInfoHtml = (companyHtml || locationHtml)
+ ? `${companyHtml}${companyHtml && locationHtml ? ' | ' : ''}${locationHtml}
`
+ : '';
+
userInfo.innerHTML = `
- 
+
-
-
${profile.bio}
+
+ ${profile.bio ? `
${profile.bio}
` : ''}
- Stars: ${totalStars}
- Followers: ${profile.followers}
- Repos: ${profile.public_repos}
- Gists: ${profile.public_gists}
-
-
- Work: ${profile.company}
- Location: ${profile.location}
+ Stars: ${totalStars !== null ? totalStars : '--'}
+ Followers: ${profile.followers ?? 0}
+ Repos: ${profile.public_repos ?? 0}
+ Gists: ${profile.public_gists ?? 0}
+ ${extraInfoHtml}
Failed to load repositories. ${err.message}
`;
- return;
- }
-
- repos.sort((a, b) => b.forks_count - a.forks_count);
- repos.sort((a, b) => b.stargazers_count - a.stargazers_count);
-
- totalStars = repos
- .filter((repo) => repo && !repo.fork)
- .reduce((sum, repo) => sum + (repo.stargazers_count || 0), 0);
-
- const totalStarsElement = document.querySelector('.total-stars');
- if (totalStarsElement) {
- totalStarsElement.textContent = totalStars;
}
-
- displayRepos(repos);
+ return repos;
};
-// Fetch repos first so star totals are ready before/alongside the profile render,
-// then fetch the profile. Both still run, but this avoids the profile card
-// briefly showing a stale "0" for stars in the common case.
-(async () => {
- await Promise.all([getRepos(), getProfile()]);
-})();
-
-// display list of all user's public repos
const displayRepos = (repos) => {
const userHome = `https://github.com/${username}`;
filterInput.classList.remove('hide');
@@ -124,7 +81,7 @@ const displayRepos = (repos) => {
continue;
}
- const langUrl = `${userHome}?tab=repositories&q=&language=${repo.language}`;
+ const langUrl = `${userHome}?tab=repositories&q=&language=${encodeURIComponent(repo.language || '')}`;
const starsUrl = `${userHome}/${repo.name}/stargazers`;
const forksUrl = `${userHome}/${repo.name}/network/members`;
@@ -135,8 +92,6 @@ const displayRepos = (repos) => {
? `⭐ ${repo.stargazers_count}`
: '';
- // Guard against languages missing from the devicons map so we never
- // render the literal string "undefined" as a badge.
let langHtml = '';
if (repo.language) {
const icon = devicons[repo.language];
@@ -153,18 +108,18 @@ const displayRepos = (repos) => {
? `${starsHtml}${langHtml}${forksHtml}
`
: '';
- const homepageHtml = repo.homepage && repo.homepage !== ''
- ? `${devicons['Chrome']} Live`
+ const homepageHtml = repo.homepage
+ ? `${devicons['Chrome']} Live`
: '';
listItem.innerHTML = `
${statsHtml}
`;
@@ -173,7 +128,42 @@ const displayRepos = (repos) => {
}
};
-// dynamic search
+(async () => {
+ const profilePromise = fetchProfile().catch((err) => {
+ console.error('Failed to load profile:', err);
+ const userInfo = document.querySelector('.user-info');
+ if (userInfo) {
+ userInfo.innerHTML = `Failed to load profile: ${err.message}
`;
+ }
+ return null;
+ });
+
+ const reposPromise = fetchRepos().catch((err) => {
+ console.error('Failed to load repos:', err);
+ repoList.innerHTML = `Failed to load repositories: ${err.message}
`;
+ return null;
+ });
+
+ const [profileData, reposData] = await Promise.all([profilePromise, reposPromise]);
+
+ let totalStars = null;
+
+ if (reposData) {
+ reposData.sort((a, b) => b.forks_count - a.forks_count);
+ reposData.sort((a, b) => b.stargazers_count - a.stargazers_count);
+
+ totalStars = reposData
+ .filter((repo) => repo && !repo.fork)
+ .reduce((sum, repo) => sum + (repo.stargazers_count || 0), 0);
+
+ displayRepos(reposData);
+ }
+
+ if (profileData) {
+ displayProfile(profileData, totalStars);
+ }
+})();
+
filterInput.addEventListener('input', (e) => {
const search = e.target.value;
const repos = document.querySelectorAll('.repo');
@@ -205,7 +195,6 @@ filterInput.addEventListener('input', (e) => {
}
});
-// for programming language icons
const devicons = {
Git: '',
Github: '',
@@ -264,7 +253,6 @@ const devicons = {
Vue: ' Vue'
};
-// Keyboard shortcuts
document.addEventListener('keydown', (e) => {
if (e.key === '/' && document.activeElement !== filterInput) {
e.preventDefault();
From ac9fef3b73a126d73ce52ba395a8758a82de6b44 Mon Sep 17 00:00:00 2001
From: Abhishek Keshri <25423853+2KAbhishek@users.noreply.github.com>
Date: Wed, 22 Jul 2026 18:46:54 +0530
Subject: [PATCH 16/18] fix: increase header section width
---
style.css | 429 ++++++++++++++++++++++++++++--------------------------
1 file changed, 221 insertions(+), 208 deletions(-)
diff --git a/style.css b/style.css
index bf9ab6d..bce82e4 100644
--- a/style.css
+++ b/style.css
@@ -1,340 +1,353 @@
@media (prefers-color-scheme: light) {
- :root {
- --text: #151515;
- --accent: #1688f0;
- --bg-main: #ffffff;
- --bg-section: #f0f0f0;
- --bg-card: #f5f5f5;
- }
+ :root {
+ --text: #151515;
+ --accent: #1688f0;
+ --bg-main: #ffffff;
+ --bg-section: #f0f0f0;
+ --bg-card: #f5f5f5;
+ }
}
@media (prefers-color-scheme: dark) {
- :root {
- --text: #dedede;
- --accent: #1688f0;
- --bg-main: #000000;
- --bg-section: #000000;
- --bg-card: #000000;
- }
+ :root {
+ --text: #dedede;
+ --accent: #1688f0;
+ --bg-main: #000000;
+ --bg-section: #000000;
+ --bg-card: #000000;
+ }
}
* {
- box-sizing: border-box;
+ box-sizing: border-box;
}
body {
- display: flex;
- align-items: center;
- justify-content: center;
- margin: 0;
- font-family: 'Inter', sans-serif;
- background-color: var(--bg-main);
- color: var(--text);
- font-size: 14px;
-}
-
-h1, h2, h3, .repo-name {
- font-family: 'Inter', sans-serif;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0;
+ font-family: "Inter", sans-serif;
+ background-color: var(--bg-main);
+ color: var(--text);
+ font-size: 14px;
+}
+
+h1,
+h2,
+h3,
+.repo-name {
+ font-family: "Inter", sans-serif;
}
.container {
- display: flex;
- justify-content: center;
- flex-direction: row;
- flex-wrap: wrap;
- align-items: center;
- width: 90%;
- max-width: 1280px;
+ display: flex;
+ justify-content: center;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: center;
+ width: 90%;
+ max-width: 1280px;
}
.intro {
- width: 100%;
+ width: 100%;
}
h4 {
- width: 100%;
- text-align: center;
+ width: 100%;
+ text-align: center;
}
.hide {
- /* '!important' is to make sure that when we add the class using JS, it takes precendence */
- display: none !important;
+ /* '!important' is to make sure that when we add the class using JS, it takes precendence */
+ display: none !important;
}
h1 {
- background: linear-gradient(135deg, var(--accent), #796bdc);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- margin-bottom: 4px;
- font-weight: 800;
- font-size: 2.8em;
- text-align: center;
- width: 100%;
+ background: linear-gradient(135deg, var(--accent), #796bdc);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ margin-bottom: 4px;
+ font-weight: 800;
+ font-size: 2.8em;
+ text-align: center;
+ width: 100%;
}
small {
- width: 100%;
- text-align: center;
- display: block;
- margin-bottom: 20px;
+ width: 100%;
+ text-align: center;
+ display: block;
+ margin-bottom: 20px;
}
h2 {
- width: 100%;
- color: var(--text);
- margin: 0;
+ width: 100%;
+ color: var(--text);
+ margin: 0;
}
img {
- border: 2px solid var(--accent);
- box-shadow:
- 0 0px 6px var(--accent),
- 0 0px 6px var(--accent);
- max-width: 100%;
- height: auto;
+ border: 2px solid var(--accent);
+ box-shadow:
+ 0 0px 6px var(--accent),
+ 0 0px 6px var(--accent);
+ max-width: 100%;
+ height: auto;
}
a {
- color: var(--accent);
- text-decoration: none;
+ color: var(--accent);
+ text-decoration: none;
}
a:hover {
- color: var(--text);
+ color: var(--text);
}
.github-img {
- width: 45px;
- margin-right: 8px;
+ width: 45px;
+ margin-right: 8px;
}
ul {
- list-style: none;
- padding: 0;
+ list-style: none;
+ padding: 0;
}
.user-info {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- background-color: var(--bg-card);
- color: var(--text);
- font-size: 16px;
- padding: 1em;
- border-top-left-radius: 20px;
- border-top-right-radius: 20px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ background-color: var(--bg-card);
+ color: var(--text);
+ font-size: 16px;
+ padding: 1em;
+ border-top-left-radius: 20px;
+ border-top-right-radius: 20px;
}
.user-info figure {
- width: 90%;
- max-width: 200px;
+ width: 90%;
+ max-width: 200px;
}
.user-info img {
- border-radius: 100%;
+ border-radius: 100%;
}
.user-info div {
- display: flex;
- text-align: center;
- flex-wrap: wrap;
- align-items: center;
- width: 100%;
- padding-left: 5%;
+ display: flex;
+ text-align: center;
+ flex-wrap: wrap;
+ align-items: center;
+ width: 100%;
+ padding-left: 5%;
}
.user-info div p {
- width: 100%;
- margin: 0;
- padding: 0;
- border-bottom: 1px solid var(--text);
- padding-bottom: 18px;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ border-bottom: 1px solid var(--text);
+ padding-bottom: 18px;
}
.filter-repos,
input {
- background: var(--bg-card);
- width: 50%;
- border-radius: 20px;
- min-width: 300px;
- margin-top: 1em;
- padding: 1em;
- margin-bottom: 1em;
- border: 2px solid var(--accent);
- color: var(--text);
- text-align: center;
+ background: var(--bg-card);
+ width: 50%;
+ border-radius: 20px;
+ min-width: 300px;
+ margin-top: 1em;
+ padding: 1em;
+ margin-bottom: 1em;
+ border: 2px solid var(--accent);
+ color: var(--text);
+ text-align: center;
}
.repos {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- background-color: var(--bg-section);
- margin-top: 0;
- padding: 2em;
- border-bottom-left-radius: 20px;
- border-bottom-right-radius: 20px;
- margin-bottom: 4em;
- width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ background-color: var(--bg-section);
+ margin-top: 0;
+ padding: 2em;
+ border-bottom-left-radius: 20px;
+ border-bottom-right-radius: 20px;
+ margin-bottom: 4em;
+ width: 100%;
}
h3 {
- margin: 4px;
- width: 100%;
- text-align: center;
- color: var(--accent);
+ margin: 4px;
+ width: 100%;
+ text-align: center;
+ color: var(--accent);
}
.repo-list {
- width: 100%;
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
- gap: 1.5em;
- margin-top: 1em;
+ width: 100%;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 1.5em;
+ margin-top: 1em;
}
.repo-list li {
- min-height: 200px;
- border-radius: 10px;
- border: 2px solid var(--accent);
- padding: 1.25em;
- text-align: center;
- background-color: var(--bg-card);
- transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: center;
- gap: 0.75em;
+ min-height: 200px;
+ border-radius: 10px;
+ border: 2px solid var(--accent);
+ padding: 1.25em;
+ text-align: center;
+ background-color: var(--bg-card);
+ transition:
+ transform 0.2s ease,
+ box-shadow 0.2s ease,
+ background-color 0.2s ease;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 0.75em;
}
.no-results {
- grid-column: 1 / -1;
- width: 100%;
- text-align: center;
- font-size: 1.2em;
- margin-top: 2em;
- color: var(--text);
+ grid-column: 1 / -1;
+ width: 100%;
+ text-align: center;
+ font-size: 1.2em;
+ margin-top: 2em;
+ color: var(--text);
}
.repo-list li:hover {
- background-color: var(--bg-main);
- box-shadow:
- 0 8px 16px var(--accent),
- 0 8px 16px var(--accent);
- transform: translateY(-4px);
+ background-color: var(--bg-main);
+ box-shadow:
+ 0 8px 16px var(--accent),
+ 0 8px 16px var(--accent);
+ transform: translateY(-4px);
}
.link-btn {
- display: inline-block;
- margin: 0 0.25em;
- padding: 8px 16px;
- background: var(--bg-main);
- border-radius: 10px;
- border: 3px solid var(--accent);
- color: var(--text);
- transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+ display: inline-block;
+ margin: 0 0.25em;
+ padding: 8px 16px;
+ background: var(--bg-main);
+ border-radius: 10px;
+ border: 3px solid var(--accent);
+ color: var(--text);
+ transition:
+ transform 0.2s ease,
+ background-color 0.2s ease,
+ border-color 0.2s ease,
+ color 0.2s ease;
}
.link-btn:hover {
- background: var(--accent);
- border: 3px solid var(--text);
- color: var(--bg-main);
- transform: scale(1.05);
+ background: var(--accent);
+ border: 3px solid var(--text);
+ color: var(--bg-main);
+ transform: scale(1.05);
}
.link-btn i {
- color: var(--accent);
- transition: color 0.2s ease;
+ color: var(--accent);
+ transition: color 0.2s ease;
}
.link-btn:hover i {
- color: var(--bg-main);
+ color: var(--bg-main);
}
.repo-list p {
- padding: 0.5em;
- margin: 0.5em 0;
+ padding: 0.5em;
+ margin: 0.5em 0;
}
@media (min-width: 700px) {
- .user-info div {
- width: 45%;
- text-align: left;
- }
+ .user-info div {
+ flex: 0.7;
+ text-align: left;
+ }
}
@media (max-width: 700px) {
- .user-info div p {
- margin: 10px;
- }
+ .user-info div p {
+ margin: 10px;
+ }
}
.repo-name {
- font-size: 1.75em;
+ font-size: 1.75em;
}
.repo-description {
- font-size: 0.95em;
- opacity: 0.8;
- line-height: 1.5;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
- text-overflow: ellipsis;
- margin-bottom: 0.5em;
- height: 3em;
+ font-size: 0.95em;
+ opacity: 0.8;
+ line-height: 1.5;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-bottom: 0.5em;
+ height: 3em;
}
.repo-header {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 0.5em;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.5em;
}
.repo-stats {
- width: 100%;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- gap: 0.25em;
- margin: 0.5em 0;
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 0.25em;
+ margin: 0.5em 0;
}
.repo-actions {
- width: 100%;
- display: flex;
- justify-content: center;
- gap: 0.5em;
- margin-top: auto;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ gap: 0.5em;
+ margin-top: auto;
}
span {
- margin: 0 0.5em;
+ margin: 0 0.5em;
}
.repo-badge {
- display: inline-flex;
- align-items: center;
- padding: 6px 12px;
- border-radius: 20px;
- background-color: var(--bg-section);
- font-size: 0.9em;
- border: 1px solid var(--accent);
- color: var(--text);
- margin: 0.25em !important;
- transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+ display: inline-flex;
+ align-items: center;
+ padding: 6px 12px;
+ border-radius: 20px;
+ background-color: var(--bg-section);
+ font-size: 0.9em;
+ border: 1px solid var(--accent);
+ color: var(--text);
+ margin: 0.25em !important;
+ transition:
+ background-color 0.2s ease,
+ border-color 0.2s ease,
+ color 0.2s ease;
}
.repo-badge:hover {
- background-color: var(--accent);
- color: var(--bg-main);
- border-color: var(--text);
+ background-color: var(--accent);
+ color: var(--bg-main);
+ border-color: var(--text);
}
.repo-badge i {
- margin-right: 4px;
+ margin-right: 4px;
}
From badf577a1c862c195faf31ccad259e381ca0a923 Mon Sep 17 00:00:00 2001
From: Abhishek Keshri <25423853+2KAbhishek@users.noreply.github.com>
Date: Wed, 22 Jul 2026 18:53:59 +0530
Subject: [PATCH 17/18] fix: add total forks, link profile stats, remove
subtitle, and adjust spacing
---
index.html | 1 -
script.js | 27 ++++++++++++++++++++-------
style.css | 7 -------
3 files changed, 20 insertions(+), 15 deletions(-)
diff --git a/index.html b/index.html
index 5985d0e..b00a7d9 100644
--- a/index.html
+++ b/index.html
@@ -26,7 +26,6 @@
All Of My Projects
- Some useful, some stupid, all fun!
diff --git a/script.js b/script.js
index f5549ee..db3cd5d 100644
--- a/script.js
+++ b/script.js
@@ -15,13 +15,14 @@ const fetchProfile = async () => {
return res.json();
};
-const displayProfile = (profile, totalStars) => {
+const displayProfile = (profile, totalStars, totalForks) => {
const userInfo = document.querySelector('.user-info');
if (!userInfo) return;
+ const userHome = `https://github.com/${profile.login}`;
const blogUrl = profile.blog
? (profile.blog.startsWith('http') ? profile.blog : `https://${profile.blog}`)
- : `https://github.com/${profile.login}`;
+ : userHome;
const companyHtml = profile.company ? `Work: ${profile.company}` : '';
const locationHtml = profile.location ? `Location: ${profile.location}` : '';
@@ -29,6 +30,12 @@ const displayProfile = (profile, totalStars) => {
? `${companyHtml}${companyHtml && locationHtml ? ' | ' : ''}${locationHtml}
`
: '';
+ const starsText = `${totalStars !== null ? totalStars : '--'}`;
+ const forksText = `${totalForks !== null ? totalForks : '--'}`;
+ const followersLink = `${profile.followers ?? 0}`;
+ const reposLink = `${profile.public_repos ?? 0}`;
+ const gistsLink = `${profile.public_gists ?? 0}`;
+
userInfo.innerHTML = `
@@ -37,10 +44,11 @@ const displayProfile = (profile, totalStars) => {
${profile.bio ? `${profile.bio}
` : ''}
- Stars: ${totalStars !== null ? totalStars : '--'}
- Followers: ${profile.followers ?? 0}
- Repos: ${profile.public_repos ?? 0}
- Gists: ${profile.public_gists ?? 0}
+ Stars: ${starsText} |
+ Forks: ${forksText} |
+ Followers: ${followersLink} |
+ Repos: ${reposLink} |
+ Gists: ${gistsLink}
${extraInfoHtml}
@@ -147,6 +155,7 @@ const displayRepos = (repos) => {
const [profileData, reposData] = await Promise.all([profilePromise, reposPromise]);
let totalStars = null;
+ let totalForks = null;
if (reposData) {
reposData.sort((a, b) => b.forks_count - a.forks_count);
@@ -156,11 +165,15 @@ const displayRepos = (repos) => {
.filter((repo) => repo && !repo.fork)
.reduce((sum, repo) => sum + (repo.stargazers_count || 0), 0);
+ totalForks = reposData
+ .filter((repo) => repo && !repo.fork)
+ .reduce((sum, repo) => sum + (repo.forks_count || 0), 0);
+
displayRepos(reposData);
}
if (profileData) {
- displayProfile(profileData, totalStars);
+ displayProfile(profileData, totalStars, totalForks);
}
})();
diff --git a/style.css b/style.css
index bce82e4..eacd2ab 100644
--- a/style.css
+++ b/style.css
@@ -75,13 +75,6 @@ h1 {
width: 100%;
}
-small {
- width: 100%;
- text-align: center;
- display: block;
- margin-bottom: 20px;
-}
-
h2 {
width: 100%;
color: var(--text);
From 0186db75a31c215e8fc98d0e0bf9270ae1b32774 Mon Sep 17 00:00:00 2001
From: Abhishek Keshri <25423853+2KAbhishek@users.noreply.github.com>
Date: Wed, 22 Jul 2026 18:56:12 +0530
Subject: [PATCH 18/18] fix: unify profile stat colors and show username in
parentheses
---
script.js | 4 +++-
style.css | 8 ++++++++
2 files changed, 11 insertions(+), 1 deletion(-)
diff --git a/script.js b/script.js
index db3cd5d..f23401a 100644
--- a/script.js
+++ b/script.js
@@ -36,12 +36,14 @@ const displayProfile = (profile, totalStars, totalForks) => {
const reposLink = `${profile.public_repos ?? 0}`;
const gistsLink = `${profile.public_gists ?? 0}`;
+ const displayName = profile.name ? `${profile.name} (${profile.login})` : profile.login;
+
userInfo.innerHTML = `
-
+
${profile.bio ? `
${profile.bio}
` : ''}
Stars: ${starsText} |
diff --git a/style.css b/style.css
index eacd2ab..7d9f010 100644
--- a/style.css
+++ b/style.css
@@ -147,6 +147,14 @@ ul {
padding-bottom: 18px;
}
+.user-info div p a {
+ color: inherit;
+}
+
+.user-info div p a:hover {
+ color: var(--accent);
+}
+
.filter-repos,
input {
background: var(--bg-card);