add github stats

assets/css/style.css

@@ -733,3 +733,28 @@ br {
 .twitter-contact > img {
 	color: var(--white);
 }
+
+#github-full {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+}
+
+.gitnamepfp {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+}
+
+#github-full a {
+	text-decoration: none;
+	font-weight: 400 !important;
+	color: var(--text) !important;
+}
+
+#github-full a:hover {
+	text-decoration: underline;
+	color: var(--white) !important;
+}

assets/js/github.js

@@ -0,0 +1,76 @@
+export async function fetchGithubStats(user) {
+	const response = await fetch(`https://api.github.com/users/${user}`);
+	if (!response.ok) throw new Error(`Error fetching Github Info: ${response.statusText}`);
+	return await response.json();
+}
+
+export async function getTotalStars(username) {
+    let page = 1;
+    let totalStars = 0;
+    let hasMore = true;
+
+    while (hasMore) {
+        const response = await fetch(`https://api.github.com/users/${username}/repos?per_page=100&page=${page}`);
+        const repos = await response.json();
+
+        if (repos.length === 0) break;
+        totalStars += repos.reduce((sum, repo) => sum + repo.stargazers_count, 0);
+        hasMore = repos.length === 100;
+        page++;
+    }
+    return totalStars;
+}
+
+export async function writeGithubStats(targetId) {
+	const data = await fetchGithubStats("zyqunix");
+	const stars = await getTotalStars("zyqunix");
+
+	const target = document.querySelector(targetId);
+	target.innerHTML = "";
+
+	const mainEl = document.createElement("div");
+	mainEl.classList.add("gitnamepfp");
+
+	const pfp = document.createElement("img"); 
+	pfp.src = data.avatar_url;
+	pfp.style.borderRadius = "50%";
+	pfp.style.width = "96px";
+
+	const name = document.createElement("a");
+	name.innerText = data.login;
+	name.href = data.html_url;
+	name.target = "_blank";
+	name.style.fontSize = "20px";
+	name.classList.add("tooltip");
+	name.setAttribute("data-tooltip", data.bio);
+
+	const pubRepos = document.createElement("a");
+	pubRepos.innerText = `${data.public_repos} Public Repositories`;
+	pubRepos.href = `https://github.com/${data.login}?tab=repos`;
+	pubRepos.id = "pubrepos";
+
+	const followers = document.createElement("div");
+	followers.innerHTML = `<a href="https://github.com/${data.login}?tab=followers" target="_blank">${data.followers} Followers</a> & <a href="https://github.com/${data.login}?tab=following" target="_blank">Following ${data.following}`;
+
+
+	const hireable = document.createElement("div");
+	if (data.hireable === "null") {
+		hireable.innerText = "Not Hireable";
+	} else {
+		hireable.innerText = "Hire Me!";
+	}
+
+	const tStars = document.createElement("div");
+	tStars.innerText = `${stars} Total Stars`;
+
+	const registered = data.created_at;
+	document.getElementById("gh_since").innerText = `Registed on ${registered.slice(0, 10).replace(/-/g, "/")}`;
+
+	mainEl.appendChild(pfp);
+	mainEl.appendChild(name);
+	target.appendChild(mainEl);
+	target.appendChild(pubRepos);
+	target.appendChild(followers);
+	target.appendChild(hireable);
+	target.appendChild(tStars);
+}

assets/js/index.js

@@ -1,4 +1,5 @@
 import * as wakatime from "./wakatime.js";
+import * as github from "./github.js";
 const timeElem = document.getElementById('time');
 const timezone = 'Europe/Berlin';
 
@@ -241,6 +242,7 @@ function fetchWeather(location) {
 }
 
 wakatime.fetchWakatime("#wakapi");
+github.writeGithubStats("#github-full");
 
 const messages = [
     "Coding",

assets/js/wakatime.js

@@ -253,7 +253,8 @@ export async function fetchWakatime(targetId) {
 		`;
     miscDetails.appendChild(el);
 
-	document.getElementById("stats_since").innerText = `Registered on ${data.data.start}`;
+	const registered = data.data.start;
+    document.getElementById("stats_since").innerText = `Registered on ${registered.slice(0, 10).replace(/-/g, "/")}`;
 
     const chartDetails = document.createElement("details");
     const chartSummary = document.createElement("summary");
@@ -335,5 +336,3 @@ export async function fetchWakatime(targetId) {
     chartDetails.appendChild(container);
 
 }
-
-console.log(await fetchWakaTimeStats("zyqunix", "all_time"));

index.html

@@ -43,6 +43,14 @@
             <div id="wakapi"></div>
 		</div>
 
+		<div class="github cards" id="GitHub">
+			<h2>GitHub Stats</h2>
+			<p id="gh_since">Since 30 Oct 2022</p>
+			<div id="github-full">
+				
+			</div>
+		</div>
+
 		<div class="contact cards" id="Contact">
 			<h2 class="card-header" id="contact">Contact</h2>
 			<a class="contact-item github-contact" href="https://github.com/zyqunix" target="_blank">