portfoilio: website rework

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)

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 />

components/discord-activity.jsx

@@ -29,7 +29,7 @@ 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">
@@ -47,9 +47,7 @@ export default function DiscordActivity() {
 				<div className="discord-messageBox">
 					<div className="discord-message-application">
 						<b>
-							{parsedStatus.discord.username +
-								"#" +
-								parsedStatus.discord.discriminator}
+							{parsedStatus.discord.username}
 						</b>
 					</div>
 					<div className="discord-message-activity">
@@ -62,13 +60,44 @@ export default function DiscordActivity() {
 				</div>
 			</DicordActivityStyle>
 		);
-	} else {
+	} 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 (
@@ -84,7 +113,7 @@ export default function DiscordActivity() {
 				<div className="discord-messageBox">
 					<div className="discord-message-application">
 						<b>
-							{restData.username + "#" + restData.discriminator}
+							{restData.username}
 						</b>
 					</div>
 					<div className="discord-message-activity">

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: 1.0rem;
+	}
 `;

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;

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">

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;
 	}

components/nav.jsx

@@ -21,6 +21,10 @@ const LINKS = [
 		title: "Experience",
 		href: "/exps",
 	},
+	{
+		title: "Projects",
+		href: "/projects",
+	},
 	{
 		title: "Contact",
 		href: "/contact",

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;

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> */}

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,31 @@ 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">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 :- {format(created_at, "DD MMM YYYY")}
+				Joined On :- 
+				<div className="value">
+					{format(created_at, "DD MMM YYYY")}
+				</div>
 			</div>
 		</SkillCard>
 	);

components/skillComponents/hashnode_inst.jsx

@@ -16,13 +16,13 @@ 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 : {numPosts}</div>
 			<div className="description"> Total Followers : {numFollowers}</div>
-			{/* <div className="description">
-        Publication Domain : {publicationDomain}
-      </div> */}
 			<div className="description"> Total Reactions : {numReactions}</div>
 		</SkillCard>
 	);

components/skillComponents/htb_activity.jsx

@@ -0,0 +1,30 @@
+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;

components/skillComponents/htb_user.jsx

@@ -0,0 +1,79 @@
+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;

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,54 @@ 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>
 	);

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,

components/skillComponents/wakatime_lang.jsx

@@ -16,19 +16,34 @@ 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>
 	);

components/skillComponents/wakatime_user.jsx

@@ -14,15 +14,29 @@ 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>
 	);

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,12 @@ 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 +117,19 @@ 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
-								}
-								friends_count={
-									skills?.twitter_user?.public_metrics
-										?.following_count
-								}
-								statuses_count={
-									skills?.twitter_user?.public_metrics
-										?.tweet_count
-								}
-								created_at={skills?.twitter_user?.created_at}
+							<HTBUserCard
+								title={"HTB User Stats"}
+								url={"https://app.hackthebox.com/profile/1367733"}
+								image={skills?.logo?.htb}
+								rank={skills?.htb_profile?.data?.rank}
+								points={skills?.htb_profile?.data?.points}
+								rank_ownership={skills?.htb_profile?.data?.rank_ownership}
+								ranking={skills?.htb_profile?.data?.ranking}
+								respects={skills?.htb_profile?.data?.respects}
+								system_owns={skills?.htb_profile?.data?.system_owns}
+								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"}
@@ -191,14 +191,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"}

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",

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);
 	},
 };

hooks/useLastFM.js

@@ -49,7 +49,7 @@ const useLastFM = () => {
 	useEffect(() => {
 		const interval = setInterval(() => {
 			getStatus();
-		}, 3000);
+		}, 15000);
 
 		return () => clearInterval(interval);
 	}, []);

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",
 		};
 	}

next.config.js

@@ -7,7 +7,7 @@ const moduleExports = {
 		remotePatterns: [
 		  {
 			protocol: 'https',
-			hostname: 'bravo68web.me',
+			hostname: 'itsmebravo.dev',
 			port: '',
 			pathname: '/images/**/*.{jpg,jpeg,png,svg,gif,webp}',
 		  },

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.5.4",
+		"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"
 	}
 }

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) {

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;

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 (
@@ -17,13 +22,4 @@ export default function Home() {
 			<Footer />
 		</div>
 	);
-}
-
-// export const getServerSideProps = async () => {
-
-//   throw new Error("Internal server error")
-
-//   return {
-//     props:[]
-//   }
-// }
+}