fix: hashnode stats widget

portfoilio: website rework
fix: package.json & yarn.lock to reduce vulnerabilities
2023-11-27 20:46:30 +05:30 · 2023-11-27 20:06:33 +05:30 · 2023-10-04 04:08:20 +05:30 · 2023-07-03 23:05:38 +05:30 · 2023-07-03 23:00:03 +05:30 · 2023-06-12 10:42:28 +05:30
42 changed files with 2144 additions and 4565 deletions
--- a/README.md
+++ b/README.md
@ -1,4 +1,4 @@
-<h1 align="center">Welcome to my portfolio 👋</h1>
+<h1 align="center">Welcome to my portfolio repo 👋</h1>

 <a href="LICENSE" target="_blank">
  <img alt="License: CC-BY-ND-4.0" src="https://forthebadge.com/images/badges/cc-by-nd.svg" />
@ -12,7 +12,7 @@

 <br><br>

-<img src="./screenshots/1.png" />
+<img src="./screenshots/2.png" />

 <br>

@ -22,13 +22,11 @@

 #### About this Repo :-

-This Repo cotains source code for my developer portfolio at https://itsmebravo.dev. I reworked my existed portfolio to nextjs for make it faster and integrate my existing API at https://api.bravo68web.me
+This Repo cotains source code for my developer portfolio at https://itsmebravo.dev. I reworked my existed portfolio to nextjs for make it faster and integrate my existing API at https://api.b68.dev

 #### Features :-

 -   Discord Integration
-   Online Status Checker
-   Resume Embed
 -   Custom User Stats representations
 -   Art and Project Showcase
 -   Custom Error page (including 404 and 500 response error)
--- a/components/about.jsx
+++ b/components/about.jsx
@ -25,10 +25,17 @@ function about() {
 					})}
 				</div>
 				<div className="content">
-                    <p>{description2}</p>
-                </div>
+					<p>{description2}</p>
+				</div>
 				<div className="content-2">
-					<Image src="/images/header-banner.png" alt="cool lang and framework banner" width="1200" height="270" quality="100" className="banner-image-img"/>
+					<Image
+						src="/images/header-banner.png"
+						alt="cool lang and framework banner"
+						width="1200"
+						height="270"
+						quality="100"
+						className="banner-image-img"
+					/>
 				</div>
 			</div>
 		</AboutStyle>
--- a/components/art.style.jsx
+++ b/components/art.style.jsx
@ -4,7 +4,7 @@ export const ArtStyle = styled.div`
 	padding: 100px 20px;
 	height: 100vh;
 	display: flex;
-	gap:10px;
+	gap: 10px;
 	align-items: center;
 	justify-content: center;
 	flex-wrap: wrap;
--- a/components/artCard.style.jsx
+++ b/components/artCard.style.jsx
@ -15,7 +15,7 @@ export default styled.div`
 		color: #92dcf3;
 		/* padding: 4px;   */
 	}
-	.date{
+	.date {
 		font-weight: bold;
 		font-size: 1.2rem;
 	}
--- a/components/contact.js
+++ b/components/contact.js
@ -41,8 +41,8 @@ function Contact() {
 								<h3>
 									<strong>Email:</strong>
 								</h3>
-								<a href="mailto:me@bravo68web.me">
-									me@bravo68web.me
+								<a href="mailto:portfolio@b68.dev">
+									hi@b68.dev
 								</a>
 							</p>
 							<br />
@ -58,7 +58,7 @@ function Contact() {
 									<strong>Discord:</strong>
 								</h3>
 								<a href="https://discord.com/users/457039372009865226">
-									Bravo68-DF_Techs#6429
+									bravo68web
 								</a>
 							</p>
 							<br />
--- a/components/discord-activity.jsx
+++ b/components/discord-activity.jsx
@ -29,28 +29,31 @@ export default function DiscordActivity() {
 		}
 	}, [status, loading]);

-	if (!loading && parsedStatus && status.discord_status !== "offline") {
+	if (
+		!loading &&
+		parsedStatus &&
+		status.discord_status !== "offline" &&
+		parsedStatus.activity
+	) {
 		return (
 			<DicordActivityStyle>
 				<div className="discord-icons">
 					<div className="discord-large-icon">
-						<img 
-							src={parsedStatus.activity.assets.large_image} alt="discord large image"
+						<img
+							src={parsedStatus.activity.assets.large_image}
+							alt="discord large image"
 						/>
 					</div>
 					<div className="discord-small-icon">
 						<img
-							src={parsedStatus.activity.assets.small_image} alt="discord small image"
+							src={parsedStatus.activity.assets.small_image}
+							alt="discord small image"
 						/>
 					</div>
 				</div>
 				<div className="discord-messageBox">
 					<div className="discord-message-application">
-						<b>
-							{parsedStatus.discord.username +
-								"#" +
-								parsedStatus.discord.discriminator}
-						</b>
+						<b>{parsedStatus.discord.username}</b>
 					</div>
 					<div className="discord-message-activity">
 						<b>{parsedStatus.activity.details}</b>
@ -62,13 +65,51 @@ export default function DiscordActivity() {
 				</div>
 			</DicordActivityStyle>
 		);
+	} else if (
+		!loading &&
+		parsedStatus &&
+		status.discord_status !== "offline"
+	) {
+		return (
+			<DicordActivityStyle>
+				<div className="discord-icons">
+					<div className="discord-large-icon">
+						<img
+							src={parsedStatus.discord.avatar_url}
+							alt="discord large image"
+						/>
+					</div>
+					<div className="discord-small-icon">
+						<img
+							src={
+								"/images/" +
+								parsedStatus.discord.discord_status +
+								".png"
+							}
+							alt="discord small image"
+						/>
+					</div>
+				</div>
+				<div className="discord-messageBox">
+					<div className="discord-message-application">
+						<b>{parsedStatus.discord.username}</b>
+					</div>
+					<div className="discord-message-activity">
+						<b>{parsedStatus.discord.discord_status}</b>
+					</div>
+					<br />
+					<div className="discord-message-files">
+						<b>is Available</b>
+					</div>
+				</div>
+			</DicordActivityStyle>
+		);
 	} else {
 		let restData = {
-			username: "Bravo68-DF_Techs",
+			username: "bravo68web",
 			public_flags: 64,
 			id: "457039372009865226",
-			discriminator: "6429",
-			avatar: "08a8937664b3b165805965244d6f095f",
+			avatar: "b9e91dcc8e658eb1ebf24299b7bec733",
 		};

 		return (
@ -83,9 +124,7 @@ export default function DiscordActivity() {
 				</div>
 				<div className="discord-messageBox">
 					<div className="discord-message-application">
-						<b>
-							{restData.username + "#" + restData.discriminator}
-						</b>
+						<b>{restData.username}</b>
 					</div>
 					<div className="discord-message-activity">
 						<b>is Offline</b>
--- a/components/discord-activity.style.jsx
+++ b/components/discord-activity.style.jsx
@ -1,11 +1,15 @@
 import styled from "styled-components";

 export const DicordActivityStyle = styled.div`
+	border-color: #ffffff;
+	border-style: solid;
+	border-width: 2px;
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	justify-content: start;
-	width: 400px;
+	width: 450px;
+	height: 120px;
 	min-height: 75px;
 	background: rgb(131, 58, 180);
 	background: linear-gradient(
@ -59,9 +63,12 @@ export const DicordActivityStyle = styled.div`
 		font-size: 0.9em;
 	}
 	.discord-message-application {
-		font-size: 1.3em;
+		font-size: 1.4em;
 	}
 	.discord-message-activity {
 		font-size: 1.1em;
 	}
+	.discord-message-files {
+		font-size: 1rem;
+	}
 `;
--- a/components/extras.style.jsx
+++ b/components/extras.style.jsx
@ -20,7 +20,7 @@ export const ExtraStyles = styled.div`
 		background-color: var(--color4);
 		color: var(--color3);
 		padding: 0.5rem 1rem;
-		border-radius:0.1rem;
+		border-radius: 0.1rem;
 	}
 	.default {
 		display: flex;
@ -31,7 +31,7 @@ export const ExtraStyles = styled.div`
 		padding-bottom: 3em;
 		padding-top: 2em;
 		gap: 2.5em;
-		
+
 		.content {
 			display: flex;
 			flex-wrap: wrap;
--- a/components/footer.style.jsx
+++ b/components/footer.style.jsx
@ -9,6 +9,7 @@ export default styled.div`
 	background: var(--color1);
 	display: flex;
 	justify-content: center;
+	/* filter: blur("5px"); */
 	.main-footer {
 		display: flex;
 		justify-content: center;
--- a/components/main.jsx
+++ b/components/main.jsx
@ -6,14 +6,14 @@ import GitHubIcon from "@mui/icons-material/GitHub";
 import TwitterIcon from "@mui/icons-material/Twitter";
 import LinkedInIcon from "@mui/icons-material/LinkedIn";
 import InstagramIcon from "@mui/icons-material/Instagram";
-import FacebookIcon from "@mui/icons-material/Facebook";
 import SvgIcon from "@mui/material/SvgIcon";

 import {
 	name,
 	github_url,
 	linkedin_url,
-	facebook_url,
+	// facebook_url,
+	hackthebox_url,
 	twitter_url,
 	// email,
 	// resume_url,
@ -82,9 +82,11 @@ function Main() {
 							<InstagramIcon fontSize="large" />
 						</IconButton>
 					</a>
-					<a href={facebook_url}>
+					<a href={hackthebox_url}>
 						<IconButton>
-							<FacebookIcon fontSize="large" />
+							<SvgIcon fontSize="large">
+								<path d="m22.5106 6.4566.0008-.0123a.888.888 0 0 0-.2717-.6384c-.0084-.0084-.018-.0155-.0267-.0235-.0186-.0166-.0371-.0333-.0572-.0484-.0193-.0147-.04-.0276-.0607-.0406-.0096-.006-.0182-.0131-.0281-.0188L12.4576.1266a.891.891 0 0 0-.9223.0043L1.933 5.6744c-.0107.0062-.0203.014-.0307.0205-.0073.0047-.015.008-.0223.0128-.007.0047-.013.0106-.02.0155a.8769.8769 0 0 0-.147.1333l-.0026.003a.8872.8872 0 0 0-.2218.5847l.0009.014c-.0002.0088-.0015.0176-.0015.0264v11.0708c0 .3277.1802.6288.469.7836l9.5986 5.5417c.0076.0044.0158.0075.0236.0117a.8754.8754 0 0 0 .166.0687c.0134.004.0266.0083.0401.0117a.8793.8793 0 0 0 .072.0142c.0117.0019.0232.0045.0349.006a.835.835 0 0 0 .2157 0c.0117-.0015.0232-.0041.0348-.006a.9.9 0 0 0 .072-.0142c.0135-.0034.0267-.0077.04-.0117a.895.895 0 0 0 .0646-.0217.9134.9134 0 0 0 .1015-.047c.0078-.0042.016-.0072.0236-.0117l9.5986-5.5417a.8888.8888 0 0 0 .469-.7836V6.4779c0-.0071-.0012-.0142-.0014-.0213zM5.2543 6.0822l6.5367-3.774a.4182.4182 0 0 1 .4182 0l6.5366 3.774a.4182.4182 0 0 1 0 .7243l-6.5367 3.774a.4182.4182 0 0 1-.4182 0l-6.5366-3.774a.4182.4182 0 0 1 0-.7243zm5.6134 14.3449a.4172.4172 0 0 1-.626.3613L3.718 17.0218a.4173.4173 0 0 1-.2086-.3613V9.1279a.4172.4172 0 0 1 .6258-.3613l6.524 3.7666a.4172.4172 0 0 1 .2086.3614v7.5325zm9.623-3.7666a.4173.4173 0 0 1-.2086.3613l-6.5239 3.7666a.4172.4172 0 0 1-.6259-.3613v-7.5325c0-.149.0796-.2868.2087-.3614l6.5239-3.7666a.4172.4172 0 0 1 .6258.3613v7.5326z" />
+							</SvgIcon>
 						</IconButton>
 					</a>
 					<a href={mastodon_url} rel="me">
--- a/components/main.style.jsx
+++ b/components/main.style.jsx
@ -73,9 +73,13 @@ export default styled.main`
 			max-width: 100%;
 		}
 		margin-bottom: 20px;
+		border-color: #ffffff;
+		border-style: solid;
+		border-width: 5px;
+		border-radius: 100%;
 	}
 	.name {
-		font-size: 1.5rem;
+		font-size: 1.6rem;
 		font-weight: 600;
 		margin-bottom: 1rem;
 	}
--- a/components/nav.jsx
+++ b/components/nav.jsx
@ -18,25 +18,17 @@ const LINKS = [
 		href: "/stats",
 	},
 	{
-		title: "Resume",
-		href: "/resume",
+		title: "Experience",
+		href: "/exps",
+	},
+	{
+		title: "Projects",
+		href: "/projects",
 	},
 	{
 		title: "Contact",
 		href: "/contact",
 	},
-	{
-		title: "Art/Projects",
-		href: "/projects",
-	},
-	{
-		title: "Blog",
-		href: "https://blog.bravo68web.me",
-	},
-	{
-		title: "Extras",
-		href: "/extras",
-	},
 ];

 function Nav() {
--- a/components/nav.style.js
+++ b/components/nav.style.js
@ -24,7 +24,7 @@ export default styled.nav`
 			color: #fff;
 			border-radius: 5px;
 			&:hover {
-				background-color: rgba(0,0,0, 0.5);
+				background-color: rgba(0, 0, 0, 0.5);
 			}
 		}
 		@media (max-width: 900px) {
--- a/components/resume.jsx
+++ b/components/resume.jsx
@ -13,7 +13,7 @@ function Resume() {
 					initialDoc: "/resume.pdf",
 				},
 				viewer.current
-			)
+			);
 		});
 	}, []);
 	return (
--- a/components/skillCard.styled.js
+++ b/components/skillCard.styled.js
@ -38,8 +38,15 @@ export default styled.div`
 	.description {
 		font-size: 1rem;
 		color: var(--color4);
+		display: flex;
+		align-items: start;
+		justify-content: space-between;
+		/* gap: 6px; */
 		/* width: 225px; */
 	}
+	.value {
+		color: #ffff;
+	}
 	.topSongs {
 		display: flex;
 		flex-direction: column;
--- a/components/skillComponents/discord_activity.jsx
+++ b/components/skillComponents/discord_activity.jsx
--- a/components/skillComponents/github_events.jsx
+++ b/components/skillComponents/github_events.jsx
@ -57,7 +57,7 @@ function GitCommits({ title, image, evt1, evt2, evt3, url }) {
 					<br />
 					{evt1?.repo?.name}
 				</div>
-				<div className="description commit-msg">
+				<div className="value commit-msg">
 					{evt1?.commitMsg?.slice(0, 50)}
 				</div>
 				{/* <div className="description">{evt1?.created_at}</div> */}
@ -70,7 +70,7 @@ function GitCommits({ title, image, evt1, evt2, evt3, url }) {
 					<br />
 					{evt2?.repo?.name}
 				</div>
-				<div className="description commit-msg">
+				<div className="value commit-msg">
 					{evt2?.commitMsg?.slice(0, 50)}
 				</div>
 				{/* <div className="description">{evt2?.created_at}</div> */}
@ -83,7 +83,7 @@ function GitCommits({ title, image, evt1, evt2, evt3, url }) {
 					<br />
 					{evt3?.repo?.name}
 				</div>
-				<div className="description commit-msg">
+				<div className="value commit-msg">
 					{evt3?.commitMsg?.slice(0, 50)}
 				</div>
 				{/* <div className="description">{evt3?.created_at}</div> */}
--- a/components/skillComponents/github_user.jsx
+++ b/components/skillComponents/github_user.jsx
@ -1,6 +1,5 @@
 import React from "react";
 import SkillCard from "../skillCard";
-import SkillCardStyle from "../skillCard.styled";
 import { format } from "date-format-parse";

 function GitHubSkillCard({
@ -15,12 +14,25 @@ function GitHubSkillCard({
 }) {
 	return (
 		<SkillCard title={title} image={image} url={url}>
-			<div className="description">Repos :- {public_repos}</div>
-			<div className="description">Followers :- {followers}</div>
-			<div className="description">Following :- {following}</div>
-			<div className="description">Gists :- {public_gists}</div>
 			<div className="description">
-				Joined On :- {format(created_at, "DD MMM YYYY")}
+				Repos :-
+				<div className="value">{public_repos}</div>
+			</div>
+			<div className="description">
+				Followers :-
+				<div className="value">{followers}</div>
+			</div>
+			<div className="description">
+				Following :-
+				<div className="value">{following}</div>
+			</div>
+			<div className="description">
+				Gists :-
+				<div className="value">{public_gists}</div>
+			</div>
+			<div className="description">
+				Joined On :-
+				<div className="value">{format(created_at, "DD MMM YYYY")}</div>
 			</div>
 		</SkillCard>
 	);
--- a/components/skillComponents/hashnode_inst.jsx
+++ b/components/skillComponents/hashnode_inst.jsx
@ -16,14 +16,17 @@ function HashNodeSkillCard({
 	return (
 		<SkillCard title={title} image={image} url={url}>
 			<div className="description">
-				Joined on: {format(joinOn, "DD MMM YYYY")}
+				Joined on:
+				<div className="value">{format(joinOn, "DD MMM YYYY")}</div>
+			</div>
+			<div className="description">
+				{" "}
+				Total Posts :<div className="value">{numPosts}</div>
+			</div>
+			<div className="description">
+				{" "}
+				Total Followers :<div className="value">{numFollowers}</div>
 			</div>
-			<div className="description"> Total Posts : {numPosts}</div>
-			<div className="description"> Total Followers : {numFollowers}</div>
-			{/* <div className="description">
-        Publication Domain : {publicationDomain}
-      </div> */}
-			<div className="description"> Total Reactions : {numReactions}</div>
 		</SkillCard>
 	);
 }
--- a/components/skillComponents/htb_activity.jsx
+++ b/components/skillComponents/htb_activity.jsx
@ -0,0 +1,23 @@
+import React from "react";
+import SkillCard from "../skillCard";
+import SkillCardStyle from "../skillCard.styled";
+import { format, parse } from "date-format-parse";
+
+function HTBActivityCard({ title, image, url, data }) {
+	return (
+		<SkillCard title={title} image={image} url={url}>
+			{data.slice(0, 6).map((item) => {
+				return (
+					<>
+						<div className="description">
+							{item?.name} | {item?.object_type}
+							<div className="value">{item?.date_diff}</div>
+						</div>
+					</>
+				);
+			})}
+		</SkillCard>
+	);
+}
+
+export default HTBActivityCard;
--- a/components/skillComponents/htb_user.jsx
+++ b/components/skillComponents/htb_user.jsx
@ -0,0 +1,63 @@
+import React from "react";
+import SkillCard from "../skillCard";
+import { format, parse } from "date-format-parse";
+
+function HTBUserCard({
+	title,
+	image,
+	url,
+	system_owns,
+	user_owns,
+	rank,
+	points,
+	rank_ownership,
+	ranking,
+	respects,
+	team,
+	joinedOn,
+}) {
+	return (
+		<SkillCard title={title} image={image} url={url}>
+			<div className="description">
+				Points :-
+				<div className="value">{points}</div>
+			</div>
+			<div className="description">
+				Rank :-
+				<div className="value">{rank}</div>
+			</div>
+			<div className="description">
+				System Owns :-
+				<div className="value">{system_owns}</div>
+			</div>
+			<div className="description">
+				User Owns :-
+				<div className="value">{user_owns}</div>
+			</div>
+			<div className="description">
+				Global Ranking :-
+				<div className="value">{ranking}</div>
+			</div>
+			<div className="description">
+				Respect :-
+				<div className="value">{respects}</div>
+			</div>
+			<div className="description">
+				Ownership :-
+				<div className="value">{rank_ownership}%</div>
+			</div>
+			<div className="description">
+				Team :-
+				<div className="value">
+					{team?.name} | #{team?.ranking}
+				</div>
+			</div>
+			<div className="description">
+				Joined On :-
+				<div className="value">{format(joinedOn, "DD MMM YYYY")}</div>
+			</div>
+		</SkillCard>
+	);
+}
+
+export default HTBUserCard;
--- a/components/skillComponents/osu_user.jsx
+++ b/components/skillComponents/osu_user.jsx
@ -1,6 +1,5 @@
 import React from "react";
 import SkillCard from "../skillCard";
-import SkillCardStyle from "../skillCard.styled";
 import { format, parse } from "date-format-parse";

 function OsuUserSkillCard({
@ -11,7 +10,6 @@ function OsuUserSkillCard({
 	pp_raw,
 	country,
 	pp_rank,
-	// countryRank,
 	join_date,
 	maximum_combo,
 	total_score,
@ -20,19 +18,38 @@ function OsuUserSkillCard({
 	return (
 		<SkillCard title={title} image={image} url={url}>
 			<div className="description">
-				Accuracy :- {Math.floor(accuracy)} %
-			</div>
-			<div className="description">Level :- {Math.floor(level)}</div>
-			<div className="description">PP :- {Math.floor(pp_raw)}</div>
-			<div className="description">Country :- {country}</div>
-			{/* <div className="description">Country Rank :- #{countryRank}</div> */}
-			<div className="description">Global Rank :- #{pp_rank}</div>
-			<div className="description">Max Combo :- {maximum_combo}</div>
-			<div className="description">
-				Total Score :- {total_score?.toLocaleString()}
+				Accuracy :-
+				<div className="value">{Math.floor(accuracy)} %</div>
 			</div>
 			<div className="description">
-				Joined on : {format(join_date, "DD MMM YYYY")}
+				Level :-
+				<div className="value">{Math.floor(level)}</div>
+			</div>
+			<div className="description">
+				PP :-
+				<div className="value">{Math.floor(pp_raw)}</div>
+			</div>
+			<div className="description">
+				Country :-
+				<div className="value">{country}</div>
+			</div>
+			<div className="description">
+				Global Rank :-
+				<div className="value">#{pp_rank}</div>
+			</div>
+			<div className="description">
+				Max Combo :-
+				<div className="value">{maximum_combo}</div>
+			</div>
+
+			<div className="description">
+				Total Score :-
+				<div className="value">{total_score?.toLocaleString()}</div>
+			</div>
+
+			<div className="description">
+				Joined on :
+				<div className="value">{format(join_date, "DD MMM YYYY")}</div>
 			</div>
 		</SkillCard>
 	);
--- a/components/skillComponents/spotify_top_songs.jsx
+++ b/components/skillComponents/spotify_top_songs.jsx
@ -1,7 +1,5 @@
 import React from "react";
 import SkillCard from "../skillCard";
-import SkillCardStyle from "../skillCard.styled";
-// import { format, parse } from "date-format-parse";

 function SpotifyTopSkillCard({
 	title,
--- a/components/skillComponents/wakatime_lang.jsx
+++ b/components/skillComponents/wakatime_lang.jsx
@ -16,19 +16,24 @@ function WakatimeTopLangSkillCard({
 	return (
 		<SkillCard title={title} image={image} url={url}>
 			<div className="description">
-				{topLang1?.name} :- {topLang1?.percent}%
+				{topLang1?.name} :-
+				<div className="value">{topLang1?.percent}%</div>
 			</div>
 			<div className="description">
-				{topLang2?.name} :- {topLang2?.percent}%
+				{topLang2?.name} :-
+				<div className="value">{topLang2?.percent}%</div>
 			</div>
 			<div className="description">
-				{topLang3?.name} :- {topLang3?.percent}%
+				{topLang3?.name} :-
+				<div className="value">{topLang3?.percent}%</div>
 			</div>
 			<div className="description">
-				{topLang4?.name} :- {topLang4?.percent}%
+				{topLang4?.name} :-
+				<div className="value">{topLang4?.percent}%</div>
 			</div>
 			<div className="description">
-				{topLang5?.name} :- {topLang5?.percent}%
+				{topLang5?.name} :-
+				<div className="value">{topLang5?.percent}%</div>
 			</div>
 		</SkillCard>
 	);
--- a/components/skillComponents/wakatime_user.jsx
+++ b/components/skillComponents/wakatime_user.jsx
@ -14,15 +14,21 @@ function WakatimeUserSkillCard({
 }) {
 	return (
 		<SkillCard title={title} image={image} url={url}>
-			<div className="description">Total Code time :- {total_time}</div>
 			<div className="description">
-				Average Daily Code time :- {average_weekly_time}
+				Total Code time :-
+				<div className="value">{total_time}</div>
 			</div>
 			<div className="description">
-				Total Weekly Code time :- {total_weekly_time}
+				Average Daily Code time :-
+				<div className="value">{average_weekly_time}</div>
 			</div>
 			<div className="description">
-				Joined on :- {format(joinedOn, "DD MMM YYYY")}
+				Total Weekly Code time :-
+				<div className="value">{total_weekly_time}</div>
+			</div>
+			<div className="description">
+				Joined on :-
+				<div className="value">{format(joinedOn, "DD MMM YYYY")}</div>
 			</div>
 		</SkillCard>
 	);
--- a/components/skills.jsx
+++ b/components/skills.jsx
@ -1,24 +1,21 @@
 import React, { useEffect, useState } from "react";
 import SkillsStyle from "./skills.style";
-// import axios from "handlers/axios";
 import { APISDK } from "handlers/sdk";
 import Box from "@mui/material/Box";
 import LinearProgress from "@mui/material/LinearProgress";
-// import "mainboard.css";
-// import Cursor, { mouseOverEvent, mouseOutEvent } from "./providers/cursor";

 // Skill Card templates
 import GitHubSkillCard from "./skillComponents/github_user";
 import OsuUserSkillCard from "./skillComponents/osu_user";
-import TwitterUserSkillCard from "./skillComponents/twitter_user";
 import SpotifyTopSkillCard from "./skillComponents/spotify_top_songs";
 import WakatimeUserSkillCard from "./skillComponents/wakatime_user";
 import HashNodeSkillCard from "./skillComponents/hashnode_inst";
 import OsuBestScoresSkillCard from "./skillComponents/osu_bestScores";
-import TwitterTweetsSkillCard from "./skillComponents/twitter_tweets";
 import WakatimeTopLangSkillCard from "./skillComponents/wakatime_lang";
 import LastFMCurrentSkillCard from "./skillComponents/lastfm_current";
 import GitHubUserEvtSkillCard from "./skillComponents/github_events";
+import HTBUserCard from "./skillComponents/htb_user";
+import HTBActivityCard from "./skillComponents/htb_activity";

 function Skills() {
 	const [skills, setSkills] = useState({});
@ -36,6 +33,7 @@ function Skills() {
 			lastfm: "/images/brandlogos/Lastfm-icon-vector-03.svg",
 			twitter:
 				"https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png",
+			htb: "https://app.hackthebox.com/images/HTB-favicon/apple-touch-icon.png",
 		};
 		setSkills(APISDK.data);
 		setLoading(false);
@ -68,7 +66,7 @@ function Skills() {
 					<SkillsStyle>
 						<div className="mainboard__container">
 							<GitHubSkillCard
-								title={"GitHub Stats"}
+								title={"GitHub User Stats"}
 								url={"https://github.com/Bravo68web"}
 								image={skills?.logo?.github}
 								public_repos={
@ -81,6 +79,14 @@ function Skills() {
 								}
 								created_at={skills?.gh_user?.data?.created_at}
 							/>
+							<HTBActivityCard
+								title={"HTB Activity"}
+								url={
+									"https://app.hackthebox.com/profile/1367733"
+								}
+								image={skills?.logo?.htb}
+								data={skills?.htb_activity?.data}
+							/>
 							<OsuUserSkillCard
 								title={"Osu! Player Stats"}
 								url={"https://osu.ppy.sh/users/bravo68web"}
@ -113,23 +119,25 @@ function Skills() {
 										?.total_score
 								}
 							/>
-							<TwitterUserSkillCard
-								title={"Twitter Stats"}
-								url={"https://twitter.com/Bravo68web"}
-								image={skills?.logo?.twitter}
-								followers_count={
-									skills?.twitter_user?.public_metrics
-										?.followers_count
+							<HTBUserCard
+								title={"HTB User Stats"}
+								url={
+									"https://app.hackthebox.com/profile/1367733"
 								}
-								friends_count={
-									skills?.twitter_user?.public_metrics
-										?.following_count
+								image={skills?.logo?.htb}
+								rank={skills?.htb_profile?.data?.rank}
+								points={skills?.htb_profile?.data?.points}
+								rank_ownership={
+									skills?.htb_profile?.data?.rank_ownership
 								}
-								statuses_count={
-									skills?.twitter_user?.public_metrics
-										?.tweet_count
+								ranking={skills?.htb_profile?.data?.ranking}
+								respects={skills?.htb_profile?.data?.respects}
+								system_owns={
+									skills?.htb_profile?.data?.system_owns
 								}
-								created_at={skills?.twitter_user?.created_at}
+								team={skills?.htb_profile?.data?.team}
+								user_owns={skills?.htb_profile?.data?.user_owns}
+								joinedOn={"2023-10-12T08:49:15.000000Z"}
 							/>
 							<SpotifyTopSkillCard
 								title={"Spotify Top Songs"}
@ -175,12 +183,12 @@ function Skills() {
 								url={"https://blog.bravo68web.me/"}
 								image={skills?.logo?.hashnode}
 								joinOn={"2021-06-18"}
-								numPosts={skills?.hn_user?.data?.numPosts}
-								numFollowers={
-									skills?.hn_user?.data?.numFollowers
+								numPosts={
+									skills?.hn_user?.data?.publications
+										?.edges[0]?.node.posts.totalDocuments
 								}
-								numReactions={
-									skills?.hn_user?.data?.numReactions
+								numFollowers={
+									skills?.hn_user?.data?.followersCount
 								}
 							/>
 							<OsuBestScoresSkillCard
@ -191,14 +199,14 @@ function Skills() {
 								bestScore2={skills?.osu_bestScores?.data?.[1]}
 								bestScore3={skills?.osu_bestScores?.data?.[2]}
 							/>
-							<TwitterTweetsSkillCard
+							{/* <TwitterTweetsSkillCard
 								title={"Twitter Tweets"}
 								url={"https://twitter.com/Bravo68web"}
 								image={skills?.logo?.twitter}
 								tweets1={skills?.twitter_tweets?.[0]}
 								tweets2={skills?.twitter_tweets?.[1]}
 								tweets3={skills?.twitter_tweets?.[2]}
-							/>
+							/> */}
 							<WakatimeTopLangSkillCard
 								title={"Wakatime Top Languages"}
 								url={"https://wakatime.com/@bravo68web"}
--- a/config.js
+++ b/config.js
@ -5,13 +5,14 @@ export const linkedin_url = "https://linkedin.com/in/bravo68web";
 export const mastodon_url = "https://fosstodon.org/@bravo68web/";
 export const email = "mailto:hi@b68.dev";
 export const instagram_url = "https://instagram.com/bravo68web";
+export const hackthebox_url = "https://app.hackthebox.com/profile/1367733";
 export const phone = "";
 export const address = "";
 export const website = "https://b68.dev";
-export const resume_url = "";
+export const resume_url = "https://s.b68.dev/resume";
 export const facebook_url = "https://www.facebook.com/Bravo68Web/";
 export const discord_id = "457039372009865226";
-export const avatar_id = "08a8937664b3b165805965244d6f095f";
+export const avatar_id = "b9e91dcc8e658eb1ebf24299b7bec733";
 export const discord_profile = "";
 export const job_exp_1 = {
 	name: "DF Tech Community",
@ -216,14 +217,16 @@ export const projects = [
 	{
 		name: "vs-presence-server",
 		type: "project",
-		description: "This is a server that allows you to project your vscode presence to a custom rich presence server.",
+		description:
+			"This is a server that allows you to project your vscode presence to a custom rich presence server.",
 		image: "/images/GitHub-Logo.png",
 		url: "https://github.com/BRAVO68WEB/vsc-presence-server",
 	},
 	{
 		name: "Stockpile",
 		type: "project",
-		description: "Redis from Scratch using Nodejs [No External Dependencies] ",
+		description:
+			"Redis from Scratch using Nodejs [No External Dependencies] ",
 		image: "/images/GitHub-Logo.png",
 		url: "https://github.com/BRAVO68WEB/stockpile",
 	},
@ -246,7 +249,7 @@ export const projects = [
 		type: "project",
 		description: "NodeJS SDK for Stockpile",
 		image: "/images/GitHub-Logo.png",
-		url: "https://github.com/BRAVO68WEB/stockpile-node-sdk"
+		url: "https://github.com/BRAVO68WEB/stockpile-node-sdk",
 	},
 	{
 		name: "emailengine-foss",
@ -258,23 +261,25 @@ export const projects = [
 	{
 		name: "typescript-express-hasura-pgsql-template",
 		type: "project",
-		description: "A Template for a Typescript Express Server with Hasura and Postgres",
+		description:
+			"A Template for a Typescript Express Server with Hasura and Postgres",
 		image: "/images/GitHub-Logo.png",
-		url: "https://github.com/BRAVO68WEB/typescript-express-hasura-pgsql-template"
+		url: "https://github.com/BRAVO68WEB/typescript-express-hasura-pgsql-template",
 	},
 	{
 		name: "cat-as-a-service",
 		type: "project",
 		description: "Cat as a Service API",
 		image: "/images/GitHub-Logo.png",
-		url: "https://github.com/gdsclpu/cat-as-a-service"
+		url: "https://github.com/gdsclpu/cat-as-a-service",
 	},
 	{
 		name: "SHX",
 		type: "project",
-		description: "Shx is a platform ment to store and share files, images, text and URLs with ease.",
+		description:
+			"Shx is a platform ment to store and share files, images, text and URLs with ease.",
 		image: "/images/GitHub-Logo.png",
-		url: "https://github.com/BRAVO68WEB/shx"
+		url: "https://github.com/BRAVO68WEB/shx",
 	},
 	{
 		name: "Enterprise Workspace Images [arm64]",
--- a/handlers/sdk.js
+++ b/handlers/sdk.js
@ -38,17 +38,17 @@ export const APISDK = {
 					name: "wakatime_lang",
 				},
 				{
-					endpoint: "/me/hashnode/",
+					endpoint: "/me/hashnode",
 					name: "hn_user",
 				},
-				{
-					endpoint: "/me/twitter/profile",
-					name: "twitter_user",
-				},
-				{
-					endpoint: "/me/twitter/tweets",
-					name: "twitter_tweets",
-				},
+				// {
+				// 	endpoint: "/me/twitter/profile",
+				// 	name: "twitter_user",
+				// },
+				// {
+				// 	endpoint: "/me/twitter/tweets",
+				// 	name: "twitter_tweets",
+				// },
 				{
 					endpoint: "/me/lastfm/current",
 					name: "lastfm_current",
@ -58,16 +58,23 @@ export const APISDK = {
 					name: "gh_events",
 				},
 				{
-					endpoint: "/me/vscode/",
+					endpoint: "/me/vscode",
 					name: "vscode",
 				},
 				{
 					endpoint: "/me/mastodon/statuses",
 					name: "masto_status",
 				},
+				{
+					endpoint: "/me/hackthebox/profile",
+					name: "htb_profile",
+				},
+				{
+					endpoint: "/me/hackthebox/activity",
+					name: "htb_activity",
+				},
 			],
 			this.data
 		);
-		// return tempEndpoint("https://api.github.com/users/bravo68web", this.data);
 	},
 };
--- a/hooks/useLastFM.js
+++ b/hooks/useLastFM.js
@ -49,7 +49,7 @@ const useLastFM = () => {
 	useEffect(() => {
 		const interval = setInterval(() => {
 			getStatus();
-		}, 3000);
+		}, 15000);

 		return () => clearInterval(interval);
 	}, []);
--- a/libs/discord-parser.js
+++ b/libs/discord-parser.js
@ -1,5 +1,7 @@
 export default function parse(data) {
-	const output = {};
+	const output = {
+		doing_nothing: false,
+	};
 	const act = [];

 	const PrirorityActivityType = [
@ -27,6 +29,7 @@ export default function parse(data) {
 			"https://cdn.discordapp.com/avatar-decoration-presets/" +
 			data.discord_user.avatar_decoration +
 			".png",
+		discord_status: data.discord_status,
 	};

 	output.kv = data.kv;
@ -93,6 +96,13 @@ export default function parse(data) {

 	act.sort((a, b) => a.prirority_id - b.prirority_id);

+	if (act.length == 0) {
+		return {
+			...output,
+			doing_nothing: true,
+		};
+	}
+
 	output.activity = act[0];

 	if (output.activity?.prirority_id == 1) {
@ -109,15 +119,15 @@ export default function parse(data) {
 		output.activity.assets = {
 			large_image:
 				"https://cdn.discordapp.com/app-assets/" +
-				output.activity.application_id +
+				output.activity?.application_id +
 				"/" +
-				output.activity.assets.large_image +
+				output.activity?.assets.large_image +
 				".png",
 			small_image:
 				"https://cdn.discordapp.com/app-assets/" +
-				output.activity.application_id +
+				output.activity?.application_id +
 				"/" +
-				output.activity.assets.small_image +
+				output.activity?.assets?.small_image +
 				".png",
 		};
 	}
--- a/next.config.js
+++ b/next.config.js
@ -5,12 +5,12 @@ const moduleExports = {
 	},
 	images: {
 		remotePatterns: [
-		  {
-			protocol: 'https',
-			hostname: 'bravo68web.me',
-			port: '',
-			pathname: '/images/**/*.{jpg,jpeg,png,svg,gif,webp}',
-		  },
+			{
+				protocol: "https",
+				hostname: "itsmebravo.dev",
+				port: "",
+				pathname: "/images/**/*.{jpg,jpeg,png,svg,gif,webp}",
+			},
 		],
 	},
 };
--- a/package.json
+++ b/package.json
@ -33,7 +33,7 @@
 		"date-format-parse": "^0.2.7",
 		"fs-extra": "^10.0.1",
 		"html-to-text": "^9.0.4",
-		"next": "^13.1.1",
+		"next": "^14.0.3",
 		"next-connect": "^0.12.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
@ -43,7 +43,7 @@
 	},
 	"devDependencies": {
 		"eslint": "^7.32.0",
-		"eslint-config-next": "^13.1.1",
+		"eslint-config-next": "^14.0.3",
 		"prettier": "^2.6.2"
 	}
 }
--- a/pages/_document.js
+++ b/pages/_document.js
@ -1,6 +1,5 @@
 import Document, { Html, Head, Main, NextScript } from "next/document";
 import { ServerStyleSheet } from "styled-components";
-import Nav from "../components/nav";

 export default class MyDocument extends Document {
 	static async getInitialProps(ctx) {
--- a/pages/about.js
+++ b/pages/about.js
@ -1,7 +1,6 @@
 import Head from "next/head";
 import Nav from "components/nav";
 import About from "components/about";
-import Footer from "components/footer";

 export default function Home() {
 	return (
--- a/pages/api/index.js
+++ b/pages/api/index.js
@ -1,7 +0,0 @@
-import axios from "axios";
-
-const handler = async (req, res) => {
-	res.status(200).json({ name: "John Doe" });
-};
-
-export default handler;
--- a/pages/contact.js
+++ b/pages/contact.js
@ -1,7 +1,6 @@
 import Head from "next/head";
 import Nav from "components/nav";
 import Contact from "components/contact";
-import Footer from "components/footer";

 export default function Home() {
 	return (
--- a/pages/index.js
+++ b/pages/index.js
@ -2,9 +2,9 @@ import Head from "next/head";
 import Nav from "components/nav";
 // import Main from "components/main";
 import BMC from "components/buymeacoffee";
-import dynamic from 'next/dynamic';
+import dynamic from "next/dynamic";

-const Main = dynamic(() => import('components/main'), {
+const Main = dynamic(() => import("components/main"), {
 	ssr: false, // Disable server-side rendering
 });

--- a/pages/stats.js
+++ b/pages/stats.js
@ -1,7 +1,12 @@
 import Head from "next/head";
 import Nav from "components/nav";
-import Skills from "components/skills";
+// import Skills from "components/skills";
 import Footer from "components/footer";
+import dynamic from "next/dynamic";
+
+const Skills = dynamic(() => import("components/skills"), {
+	ssr: false, // Disable server-side rendering
+});

 export default function Home() {
 	return (
@ -18,12 +23,3 @@ export default function Home() {
 		</div>
 	);
 }
-
-// export const getServerSideProps = async () => {
-
-//   throw new Error("Internal server error")
-
-//   return {
-//     props:[]
-//   }
-// }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/images/anime-profile-pic.png
+++ b/public/images/anime-profile-pic.png
--- a/screenshots/2.png
+++ b/screenshots/2.png
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Jyotirmoy Bandyopadhayaya	fc59fdec9c	fix: hashnode stats widget	2023-11-27 20:46:30 +05:30
Jyotirmoy Bandyopadhayaya	c5ead93b19	portfoilio: website rework	2023-11-27 20:06:33 +05:30
snyk-bot	df1939a58c	fix: package.json & yarn.lock to reduce vulnerabilities The following vulnerabilities are fixed with an upgrade: - https://snyk.io/vuln/SNYK-JS-POSTCSS-5926692	2023-10-04 04:08:20 +05:30
Jyotirmoy Bandyopadhayaya	44744399ad	merge rework	2023-07-03 23:05:38 +05:30
Jyotirmoy Bandyopadhayaya	701311acca	update navbar	2023-07-03 23:00:03 +05:30
ImgBotApp	04a9a51bf6	[ImgBot] Optimize images *Total -- 1,347.77kb -> 1,002.58kb (25.61%) /public/images/background7.png -- 344.69kb -> 207.28kb (39.87%) /public/images/anime-profile-pic.png -- 1,003.08kb -> 795.30kb (20.71%) Signed-off-by: ImgBotApp <ImgBotHelp@gmail.com>	2023-06-12 10:42:28 +05:30