merge rework

2023-07-03 23:05:38 +05:30 · 2023-07-03 23:05:38 +05:30 · 44744399ad
parent 04a9a51bf6 701311acca
commit 44744399ad
108 changed files with 9345 additions and 8934 deletions
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,6 @@
+{
+	"tabWidth": 4,
+	"arrowParens": "always",
+	"semi": true,
+	"useTabs": true
+}
--- a/components/about.jsx
+++ b/components/about.jsx
@ -1,5 +1,6 @@
 import { LanguagesKnownCategory, description1, description2 } from "config";
 import { AboutStyle } from "./about.style";
+import Image from "next/image";

 function about() {
 	return (
@ -14,16 +15,20 @@ function about() {
 							<div
 								className="lang-map-element"
 								key={lang}
-                style={{ backgroundColor: lang[Object.keys(lang)[0]] }}
+								style={{
+									backgroundColor: lang[Object.keys(lang)[0]],
+								}}
 							>
 								#{Object.keys(lang)[0].toString()}
 							</div>
 						);
 					})}
 				</div>
-        <div className="content-2">
+				<div className="content">
                    <p>{description2}</p>
-          <img src="https://bravo68web.me/images/header_.png" />
+                </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"/>
 				</div>
 			</div>
 		</AboutStyle>
--- a/components/about.style.jsx
+++ b/components/about.style.jsx
@ -3,18 +3,14 @@ import styled from "styled-components";
 export const AboutStyle = styled.div`
 	background-color: var(--color1);
 	overflow-y: scroll !important;
-  margin: 0;
-  top: 50%;
-  left: 50%;
+	overflow-x: hidden !important;
+	padding: 2rem;
 	height: 100vh;
-  padding-top: 12em;
-  /* padding-bottom: 8em; */
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-  /* position: relative; */
+	background-image: url("/images/pxfuel-6.jpg");
+	background-size: cover;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-blend-mode: difference;
 	.default {
 		align-items: center;
 		display: flex;
@ -23,32 +19,31 @@ export const AboutStyle = styled.div`
 		text-align: center;
 		padding-top: 8em;
 		padding-bottom: 8em;
-
-    /* position: absolute; */
-    /* top: 0; */
-
-    /* overflow-y: auto; */
 	}
 	.content {
 		margin-top: 1em;
 		margin-bottom: 1em;
-    margin-left: 1.3em;
-    margin-right: 1.3em;
 		font-weight: bold;
 		font-size: 1.3em;
-    color: var(--color3);
+		color: var(--color14);
+		padding-bottom: 2rem;
+		background-color: var(--color15);
 	}
 	.content-2 {
-    margin-top: 1em;
-    margin-bottom: 1em;
-    margin-left: 1.3em;
-    margin-right: 1.3em;
+		padding-top: 2rem;
 		font-weight: bold;
 		font-size: 1.3em;
 		color: var(--color4);
-    img {
+	}
+	.banner-image {
 		width: 90%;
 		padding: 1em;
+		.banner-image-img {
+			align-items: center;
+			object-fit: contain;
+			object-position: center;
+			width: auto;
+			height: auto;
 		}
 	}
 	.lang-map {
@ -58,18 +53,12 @@ export const AboutStyle = styled.div`
 		margin-left: 1.7em;
 		margin-right: 1.7em;
 		align-items: center;
+		padding-bottom: 2rem;
 	}
 	.lang-map-element {
 		padding: 5px;
 		border-radius: 20px;
 		margin: 2px;
-    /* background-color: #${Math.random().toString(16).substring(2, 6)}; */
-    /* background: rgb(34, 193, 195);
-    background: linear-gradient(
-      0deg,
-      rgba(34, 193, 195, 1) 0%,
-      rgba(253, 187, 45, 1) 100%
-    ); */
 		font-weight: bold;
 		box-shadow: 10px 9px 0px -3px #fffefe;
 		font-size: 1.1em;
--- a/components/art.js
+++ b/components/art.js
@ -11,14 +11,14 @@ function Art() {
 				{projects.map((project, index) => {
 					return (
 						<>
-              <SkillCard key={index} {...project} />
+							<SkillCard key={project.name} {...project} />
 						</>
 					);
 				})}
 				{arts.map((project, index) => {
 					return (
 						<>
-              <SkillCard key={index} {...project} />
+							<SkillCard key={project.name} {...project} />
 						</>
 					);
 				})}
--- a/components/art.style.jsx
+++ b/components/art.style.jsx
@ -4,11 +4,12 @@ export const ArtStyle = styled.div`
 	padding: 100px 20px;
 	height: 100vh;
 	display: flex;
+	gap:10px;
 	align-items: center;
 	justify-content: center;
 	flex-wrap: wrap;
 	overflow-y: auto;
-  background-image: url("/images/background4.jpg");
+	background-image: url("/images/pxfuel-4.jpg");
 	background-size: cover;
 	background-position: center;
 	background-repeat: no-repeat;
--- a/components/artCard.style.jsx
+++ b/components/artCard.style.jsx
@ -1,13 +1,12 @@
 import styled from "styled-components";

 export default styled.div`
-  padding: 2%;
+	padding: 0.8rem;
 	width: 230px;
 	height: 320px;
 	box-sizing: border-box;
-  background-color: #5f046b;
-  border-radius: 5px;
-  box-shadow: 10px 9px 0px -3px #fffefe;
+	background-color: var(--color12);
+	border-radius: 1rem;
 	margin: 5px;
 	* {
 		margin-top: inherit;
@ -16,6 +15,10 @@ export default styled.div`
 		color: #92dcf3;
 		/* padding: 4px;   */
 	}
+	.date{
+		font-weight: bold;
+		font-size: 1.2rem;
+	}
 	.card-logo {
 		display: flex;
 		/* width: 100%; */
--- a/components/buymeacoffee.jsx
+++ b/components/buymeacoffee.jsx
@ -13,7 +13,10 @@ export default function Buymeacoffee() {
 		script.setAttribute("data-name", "BMC-Widget");
 		script.setAttribute("data-cfasync", "false");
 		script.setAttribute("data-id", "bravo68web");
-    script.setAttribute("data-description", "Support me on Buy me a coffee!");
+		script.setAttribute(
+			"data-description",
+			"Support me on Buy me a coffee!"
+		);
 		script.setAttribute(
 			"data-message",
 			"Buying a single coffee for me is 1000 times worth than a Thankyou "
--- a/components/contact.js
+++ b/components/contact.js
@ -32,15 +32,18 @@ function Contact() {
 								<u>Contact Me</u>
 							</h1>
 							<p>
-                If you have any questions, feel free to contact me. I am always
-                open to discussing new projects and opportunities.
+								If you have any questions, feel free to contact
+								me. I am always open to discussing new projects
+								and opportunities.
 							</p>
 							<br />
 							<p>
 								<h3>
 									<strong>Email:</strong>
 								</h3>
-                <a href="mailto:me@bravo68web.me">me@bravo68web.me</a>
+								<a href="mailto:me@bravo68web.me">
+									me@bravo68web.me
+								</a>
 							</p>
 							<br />
 							<p>
@ -63,7 +66,9 @@ function Contact() {
 								<h3>
 									<strong>Extra:</strong>
 								</h3>
-                <a href="https://calendly.com/bravo68web">Calendly</a>
+								<a href="https://calendly.com/bravo68web">
+									Calendly
+								</a>
 							</p>
 						</div>
 					</div>
--- a/components/contact.style.jsx
+++ b/components/contact.style.jsx
@ -6,15 +6,15 @@ export const ContactStyle = styled.div`
 	align-items: center;
 	display: flex;
 	justify-content: center;
-  background-image: url("images/background2.jpg");
+	background-image: url("images/pxfuel-3.jpg");
 	background-size: cover;
 	background-position: center;
 	background-attachment: fixed;
 	background-repeat: no-repeat;

 	body {
-    background: #2d3b36 url(http://www.luismruiz.com/img/blured.jpg) no-repeat
-      center center fixed;
+		background: #2d3b36 url(http://www.luismruiz.com/img/blured.jpg)
+			no-repeat center center fixed;
 		-webkit-background-size: cover;
 		-moz-background-size: cover;
 		-o-background-size: cover;
@ -130,9 +130,9 @@ export const ContactStyle = styled.div`
 		background: rgb(131, 58, 180);
 		background: linear-gradient(
 			90deg,
-      rgba(131, 58, 180, 1) 0%,
-      rgba(253, 29, 29, 1) 50%,
-      rgba(252, 176, 69, 1) 100%
+			#eeb415 0%,
+			#ff9f21 50%,
+			#eeb415 100%
 		);
 		padding: 10.5px 21px;
 		-webkit-border-radius: 6px;
--- a/components/discord-activity.jsx
+++ b/components/discord-activity.jsx
@ -2,9 +2,7 @@ import React, { useEffect, useState } from "react";
 import { DicordActivityStyle } from "./discord-activity.style";
 import { useLanyard } from "react-use-lanyard";
 import { discord_id } from "config";
-import DiscordParser from "../libs/discord-parser"
-
-/* <pre>{!loading && JSON.stringify(status, null, 4)}</pre>; */
+import DiscordParser from "../libs/discord-parser";

 const customStatus = [
 	"Searching for Cat Girls",
@ -21,65 +19,38 @@ export default function DiscordActivity() {
 		userId: discord_id,
 		socket: true,
 	});
-  const [time, setTime] = useState("00:00:00 elapsed");
 	const [pickedStatus] = useState(statusPicker());
-  const padTo2Digits = (num) => {
-    return num.toString().padStart(2, "0");
-  };

-  const convertMsToHM = (milliseconds) => {
-    let seconds = Math.floor(milliseconds / 1000);
-    let minutes = Math.floor(seconds / 60);
-    let hours = Math.floor(minutes / 60);
-    seconds = seconds % 60;
-    minutes = seconds >= 30 ? minutes + 1 : minutes;
-    minutes = minutes % 60;
-    hours = hours % 24;
-    return `${padTo2Digits(hours)}:${padTo2Digits(minutes)}:${padTo2Digits(
-      seconds
-    )} elapsed`;
-  };
-
-  const [currentTs, setCurrentTs] = useState(Date.now());
 	const [parsedStatus, setParsedStatus] = useState(null);

 	useEffect(() => {
 		if (!loading) {
 			setParsedStatus(DiscordParser(status));
 		}
-  }, [status, loading])
+	}, [status, loading]);

-  useEffect(() => {
-    let interval = setInterval(() => {
-      if (!loading) {
-        setCurrentTs(Date.now());
-        let timeElapsed = convertMsToHM(
-          currentTs - new Date(parsedStatus?.activity?.timestamps.start)
-        );
-        setTime(timeElapsed);
-      }
-    }, 1000);
-    return () => {
-      clearInterval(interval);
-    };
-  }, [currentTs, loading, convertMsToHM, parsedStatus]);
-
-  if (
-    !loading && parsedStatus && status.discord_status !== "offline"
-  ) {
+	if (!loading && parsedStatus && status.discord_status !== "offline") {
 		return (
 			<DicordActivityStyle>
 				<div className="discord-icons">
 					<div className="discord-large-icon">
-            <img src={parsedStatus.activity.assets.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="" />
+						<img
+							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 +
+								"#" +
+								parsedStatus.discord.discriminator}
+						</b>
 					</div>
 					<div className="discord-message-activity">
 						<b>{parsedStatus.activity.details}</b>
@ -88,12 +59,10 @@ export default function DiscordActivity() {
 					<div className="discord-message-files">
 						<b>{parsedStatus.activity.state}</b>
 					</div>
-          <div className="time-elapsed">{time}</div>
 				</div>
 			</DicordActivityStyle>
 		);
-  }
-   else {
+	} else {
 		let restData = {
 			username: "Bravo68-DF_Techs",
 			public_flags: 64,
@ -114,7 +83,9 @@ export default function DiscordActivity() {
 				</div>
 				<div className="discord-messageBox">
 					<div className="discord-message-application">
-            <b>{restData.username + "#" + restData.discriminator}</b>
+						<b>
+							{restData.username + "#" + restData.discriminator}
+						</b>
 					</div>
 					<div className="discord-message-activity">
 						<b>is Offline</b>
@ -123,7 +94,6 @@ export default function DiscordActivity() {
 					<div className="discord-message-files">
 						<b>{pickedStatus}</b>
 					</div>
-          {/* <div className="time-elapsed">00:00:00 elapsed</div> */}
 				</div>
 			</DicordActivityStyle>
 		);
--- a/components/errorBoundary.jsx
+++ b/components/errorBoundary.jsx
@ -1,19 +1,19 @@
-import { Component } from "react"
-import Page500 from "./500Page"
+import { Component } from "react";
+import Page500 from "./500Page";

 class ErrorBoundary extends Component {
 	constructor(props) {
-      super(props)
+		super(props);
 		// Define a state variable to track whether is an error or not
-      this.state = { hasError: false }
+		this.state = { hasError: false };
 	}
 	static getDerivedStateFromError(error) {
 		// Update state so the next render will show the fallback UI
-      return { hasError: true }
+		return { hasError: true };
 	}
 	componentDidCatch(error, errorInfo) {
 		// You can use your own error logging service here
-      console.log({ error, errorInfo })
+		console.log({ error, errorInfo });
 	}
 	render() {
 		// Check if the error is thrown
@ -30,12 +30,11 @@ class ErrorBoundary extends Component {
 						Try again?
 					</button>
 				</div>
-        )
+			);
 		}
 		// Return children components in case of no error
-      return this.props.children
+		return this.props.children;
 	}
 }

-  export default ErrorBoundary
-  
+export default ErrorBoundary;
--- a/components/experinces.jsx
+++ b/components/experinces.jsx
@ -0,0 +1,145 @@
+import { job_exp_1, job_exp_2, job_exp_3, job_exp_4 } from "config";
+import { ExpStyle } from "./experinces.style";
+
+function experinces() {
+	return (
+		<ExpStyle>
+			<div className="all">
+				<div className="company">
+					<div className="company-left">
+						<div className="company-img">
+							<img src={job_exp_1.logo} alt="company logo" />
+						</div>
+						<div className="company-info">
+							<div className="company-name">{job_exp_1.name}</div>
+							<div className="company-desp">{job_exp_1.info}</div>
+						</div>
+					</div>
+					<div className="company-right">
+						<div className="company-exp-short">
+							<div className="company-role-name">
+								{job_exp_1.role}
+							</div>
+							<div className="company-role-dur">
+								{job_exp_1.start_date} - {job_exp_1.end_date}
+							</div>
+						</div>
+						<div className="company-role-desp">
+							<p className="company-role-desp-para">
+								{job_exp_1.description}
+							</p>
+							<div className="tech-list">
+								{job_exp_1.techstack.map((tech) => (
+									<div key={tech} className="tech-name">
+										#{tech}
+									</div>
+								))}
+							</div>
+						</div>
+					</div>
+				</div>
+				<div className="company">
+					<div className="company-left">
+						<div className="company-img">
+							<img src={job_exp_2.logo} alt="company logo" />
+						</div>
+						<div className="company-info">
+							<div className="company-name">{job_exp_2.name}</div>
+							<div className="company-desp">{job_exp_2.info}</div>
+						</div>
+					</div>
+					<div className="company-right">
+						<div className="company-exp-short">
+							<div className="company-role-name">
+								{job_exp_2.role}
+							</div>
+							<div className="company-role-dur">
+								{job_exp_2.start_date} - {job_exp_2.end_date}
+							</div>
+						</div>
+						<div className="company-role-desp">
+							<p className="company-role-desp-para">
+								{job_exp_2.description}
+							</p>
+							<div className="tech-list">
+								{job_exp_2.techstack.map((tech) => (
+									<div key={tech} className="tech-name">
+										#{tech}
+									</div>
+								))}
+							</div>
+						</div>
+					</div>
+				</div>
+				<div className="company">
+					<div className="company-left">
+						<div className="company-img">
+							<img src={job_exp_3.logo} alt="company logo" />
+						</div>
+						<div className="company-info">
+							<div className="company-name">{job_exp_3.name}</div>
+							<div className="company-desp">{job_exp_3.info}</div>
+						</div>
+					</div>
+					<div className="company-right">
+						<div className="company-exp-short">
+							<div className="company-role-name">
+								{job_exp_3.role}
+							</div>
+							<div className="company-role-dur">
+								{job_exp_3.start_date} - {job_exp_3.end_date}
+							</div>
+						</div>
+						<div className="company-role-desp">
+							<p className="company-role-desp-para">
+								{job_exp_3.description}
+							</p>
+							<div className="tech-list">
+								{job_exp_3.techstack.map((tech) => (
+									<div key={tech} className="tech-name">
+										#{tech}
+									</div>
+								))}
+							</div>
+						</div>
+					</div>
+				</div>
+				<div className="company">
+					<div className="company-left">
+						<div className="company-img">
+							<img src={job_exp_4.logo} alt="company logo" />
+						</div>
+						<div className="company-info">
+							<div className="company-name">{job_exp_4.name}</div>
+							<div className="company-desp">{job_exp_4.info}</div>
+						</div>
+					</div>
+					<div className="company-right">
+						<div className="company-exp-short">
+							<div className="company-role-name">
+								{job_exp_4.role}
+							</div>
+							<div className="company-role-dur">
+								{job_exp_4.start_date} - {job_exp_4.end_date}
+							</div>
+						</div>
+						<div className="company-role-desp">
+							<p className="company-role-desp-para">
+								{job_exp_4.description}
+							</p>
+							<div className="tech-list">
+								{job_exp_4.techstack.map((tech) => (
+									<div key={tech} className="tech-name">
+										#{tech}
+									</div>
+								))}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</ExpStyle>
+	);
+}
+
+export default experinces;
--- a/components/experinces.style.jsx
+++ b/components/experinces.style.jsx
@ -0,0 +1,101 @@
+import styled from "styled-components";
+
+export const ExpStyle = styled.div`
+	background-color: var(--color1);
+	overflow-y: scroll !important;
+	padding: 2rem;
+	padding-top: 8rem;
+	height: 100vh;
+
+	.company {
+		display: flex;
+		padding: 1rem;
+		background-color: var(--color11);
+		border-radius: 1rem;
+	}
+	.company-exp-short {
+		display: flex;
+	}
+	.tech-list {
+		display: flex;
+		gap: 0.3rem;
+		.tech-name {
+			padding: 0.5rem;
+			border-radius: 0.2rem;
+			background-color: var(--color2);
+		}
+		.tech-name:hover {
+			background-color: var(--color3);
+		}
+	}
+	.company-left {
+		width: 25%;
+		display: flex;
+		flex-direction: column;
+		gap: 0.2px;
+		.company-img {
+			width: 100%;
+			height: auto;
+			margin-bottom: 0.5rem;
+			img {
+				width: 100%;
+				height: auto;
+				margin: auto;
+				max-height: 12rem;
+				object-fit: contain;
+				object-position: center;
+			}
+		}
+	}
+
+	.company-right {
+		width: 75%;
+		.company-exp-short {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-bottom: 1rem;
+			.company-role-name {
+				font-size: 1.55rem;
+				font-weight: 400;
+				color: var(--color3);
+				margin-bottom: 0.5rem;
+			}
+			.company-role-dur {
+				font-size: 1.55rem;
+				font-weight: 400;
+				color: var(--color4);
+				margin-bottom: 0.5rem;
+			}
+		}
+		.company-role-desp {
+			.company-role-desp-para {
+				font-size: 1.1rem;
+				font-weight: 400;
+				margin-bottom: 0.8rem;
+			}
+		}
+	}
+
+	.company-info {
+		align-items: center;
+		justify-content: center;
+
+		.company-name {
+			color: var(--color3);
+			font-size: 1.7rem;
+			font-weight: 600;
+			margin-bottom: 0.5rem;
+		}
+		.company-desp {
+			font-size: 1.1rem;
+			font-weight: 400;
+			margin-bottom: 0.5rem;
+		}
+	}
+	.all {
+		display: flex;
+		flex-direction: column;
+		gap: 3rem;
+	}
+`;
--- a/components/extras.js
+++ b/components/extras.js
@ -7,9 +7,9 @@ function extras() {
 			<div>
 				<h1 className="title">Pages</h1>
 				<div className="default">
-          {extraPages.map((content, index) => {
+					{extraPages.map((content) => {
 						return (
-              <div key={index}>
+							<div key={content.name}>
 								<div className="content">
 									<div className="content-description">
 										<img src={content.image} />
@ -36,7 +36,7 @@ function extras() {
 				<div className="default">
 					{extra.map((content, index) => {
 						return (
-              <div key={index}>
+							<div key={content.name}>
 								<div className="content">
 									<div className="content-description">
 										<img src={content.image} />
--- a/components/extras.style.jsx
+++ b/components/extras.style.jsx
@ -5,8 +5,8 @@ export const ExtraStyles = styled.div`
 	flex-wrap: wrap;
 	justify-content: center;
 	align-items: center;
-  padding-top: 15vh;
-  background-image: url("images/background6.webp");
+	padding: 15vh 10vw;
+	background-image: url("images/pxfuel-5.jpg");
 	background-size: cover;
 	background-position: center;
 	background-attachment: fixed;
@ -14,10 +14,13 @@ export const ExtraStyles = styled.div`
 	overflow-y: scroll !important;
 	height: 100vh;
 	.title {
+		width: 100%;
 		font-size: 2rem;
 		font-weight: bold;
 		background-color: var(--color4);
 		color: var(--color3);
+		padding: 0.5rem 1rem;
+		border-radius:0.1rem;
 	}
 	.default {
 		display: flex;
@ -27,6 +30,8 @@ export const ExtraStyles = styled.div`
 		/* height: 100vh; */
 		padding-bottom: 3em;
 		padding-top: 2em;
+		gap: 2.5em;
+		
 		.content {
 			display: flex;
 			flex-wrap: wrap;
@ -34,6 +39,8 @@ export const ExtraStyles = styled.div`
 			align-items: center;
 			padding-top: 2em;
 			padding-bottom: 2em;
+			background-color: var(--color12);
+
 			&:hover {
 				filter: contrast(200%);
 				-webkit-transform: translateX(-5px) translateY(-5px);
--- a/components/footer.jsx
+++ b/components/footer.jsx
@ -4,14 +4,14 @@ import { name } from "config";
 import Status from "./status";

 function footer() {
-  return <FooterStyle>
-    <div className="main-footer">
-      Build By {name}
-    </div>
-    <div className="api-status">
+	return (
+		<FooterStyle>
+			<div className="main-footer">Build By {name}</div>
+			{/* <div className="api-status">
      <Status />
-    </div>
-  </FooterStyle>;
+    </div> */}
+		</FooterStyle>
+	);
 }

 export default footer;
--- a/components/footer.style.jsx
+++ b/components/footer.style.jsx
@ -20,6 +20,5 @@ export default styled.div`
 			font-size: 1.2rem;
 			padding-bottom: 20px;
 		}
-
 	}
 `;
--- a/components/main.jsx
+++ b/components/main.jsx
@ -8,7 +8,6 @@ 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 MastodonSVG from "./assets/mastodon_icon_137420.svg";

 import {
 	name,
@ -25,32 +24,32 @@ import DiscordActivity from "./discord-activity";

 function Main() {
 	useEffect(() => {
-    const animePic = document.getElementById('anime-pic');
-    const profPic = document.getElementById('prof-pic');
+		const animePic = document.getElementById("anime-pic");
+		const profPic = document.getElementById("prof-pic");

-    animePic.addEventListener('mouseover', function() {
-      animePic.style.display = 'none';
-      profPic.style.display = 'block';
+		animePic.addEventListener("mouseover", function () {
+			animePic.style.display = "none";
+			profPic.style.display = "block";
 		});

-    profPic.addEventListener('mouseout', function() {
-      animePic.style.display = 'block';
-      profPic.style.display = 'none';
+		profPic.addEventListener("mouseout", function () {
+			animePic.style.display = "block";
+			profPic.style.display = "none";
 		});
-  },[])
+	}, []);

 	return (
 		<MainStyle>
 			<div className="content">
 				<div className="profile">
 					<img
-            src="/images/anime-profile-pic.png"
+						src="/images/profile-new-transp.png"
 						alt=""
 						className="profile-img"
 						id="anime-pic"
 					/>
 					<img
-            src="/images/profile-new-transp.png"
+						src="/images/anime-profile-pic.png"
 						alt=""
 						className="profile-img"
 						id="prof-pic"
--- a/components/main.style.jsx
+++ b/components/main.style.jsx
@ -7,7 +7,7 @@ export default styled.main`
 	width: 100%;
 	justify-content: center;
 	align-items: center;
-  background-image: url("/images/background.jpg");
+	background-image: url("/images/pxfuel.jpg");
 	background-size: cover;
 	background-position: center;
 	#prof-pic {
--- a/components/nav.jsx
+++ b/components/nav.jsx
@ -18,29 +18,17 @@ const LINKS = [
 		href: "/stats",
 	},
 	{
-    title: "Resume",
-    href: "/resume",
+		title: "Experience",
+		href: "/exps",
 	},
 	{
 		title: "Contact",
 		href: "/contact",
 	},
-  {
-    title: "Art/Projects",
-    href: "/projects",
-  },
-  {
-    title: "Blog",
-    href: "https://blog.bravo68web.me",
-  },
-  {
-    title: "Extras",
-    href: "/extras",
-  },
 ];

 function Nav() {
-  const { loading, status /*, websocket */ } = useLanyard({
+	const { loading, status } = useLanyard({
 		userId: discord_id,
 		socket: true,
 	});
@ -76,7 +64,7 @@ function Nav() {

 			<div className="links">
 				{LINKS.map(({ title, href }, index) => (
-          <div key={index} className="link">
+					<div key={title} className="link">
 						<Link href={href}>{title}</Link>
 					</div>
 				))}
@ -102,7 +90,7 @@ function Nav() {
 					}}
 				>
 					{LINKS.map(({ title, href }, index) => (
-            <MenuItem key={index} onClick={handleClose}>
+						<MenuItem key={title} onClick={handleClose}>
 							<Link href={href}>{title}</Link>
 						</MenuItem>
 					))}
--- a/components/nav.style.js
+++ b/components/nav.style.js
@ -1,12 +1,7 @@
 import styled from "styled-components";

 export default styled.nav`
-  background: rgb(52, 47, 50);
-  background: linear-gradient(
-    90deg,
-    rgba(52, 47, 50, 1) 0%,
-    rgba(96, 97, 103, 1) 60%
-  );
+	background: rgb(0, 0, 0, 0.3);
 	padding: 20px;
 	position: fixed;
 	top: 0;
@ -22,14 +17,14 @@ export default styled.nav`
 	}
 	.links {
 		display: flex;
+		gap: 0.8rem;
 		.link {
-      /* padding: 20px; */
+			padding: 5px 10px;
 			margin-left: 10px;
 			color: #fff;
 			border-radius: 5px;
 			&:hover {
-        color: #111111;
-        background-color: #6ffc03;
+				background-color: rgba(0,0,0, 0.5);
 			}
 		}
 		@media (max-width: 900px) {
--- a/components/qbadges.style.jsx
+++ b/components/qbadges.style.jsx
@ -6,7 +6,7 @@ export const QBStyles = styled.div`
 	justify-content: center;
 	align-items: center;
 	padding-top: 15vh;
-  background-image: url("images/background6.webp");
+	background-image: url("images/pxfuel-5.jpg");
 	background-size: cover;
 	background-position: center;
 	background-attachment: fixed;
--- a/components/resume.jsx
+++ b/components/resume.jsx
@ -10,19 +10,19 @@ function Resume() {
 				{
 					path: "webviewer/lib",
 					mobileRedirect: true,
-          initialDoc:
-            "/resume.pdf",
+					initialDoc: "/resume.pdf",
 				},
 				viewer.current
-      ).then((instance) => {
-        const { docViewer } = instance;
-        // you can now call WebViewer APIs here...
-      });
+			)
 		});
 	}, []);
 	return (
 		<ResumeStyle>
-      <div className="webviewer" ref={viewer} style={{ height: "100vh" }}></div>
+			<div
+				className="webviewer"
+				ref={viewer}
+				style={{ height: "100vh" }}
+			></div>
 		</ResumeStyle>
 	);
 }
--- a/components/skillCard.styled.js
+++ b/components/skillCard.styled.js
@ -5,7 +5,7 @@ export default styled.div`
 	display: inline-flex;
 	/* box-shadow: 10px 9px 0px -3px #fffefe; */
 	.card {
-    background-color: var(--color1);
+		background-color: var(--color13);
 		padding: 15px;
 		width: 100%;
 		/* min-width: 225px; */
--- a/components/skillComponents/github_events.jsx
+++ b/components/skillComponents/github_events.jsx
@ -6,19 +6,23 @@ function GitCommits({ title, image, evt1, evt2, evt3, url }) {

 	[evt1, evt2, evt3].map((evt) => {
 		if (evt?.type === "PushEvent") {
-      evt.entTypeLogo = "/images/github_events/github_push_event_logo.png";
+			evt.entTypeLogo =
+				"/images/github_events/github_push_event_logo.png";
 			evt.commitMsg = evt.payload.commits[0].message;
 		} else if (evt?.type === "WatchEvent") {
-      evt.entTypeLogo = "/images/github_events/github_watch_event_logo.png";
+			evt.entTypeLogo =
+				"/images/github_events/github_watch_event_logo.png";
 		} else if (evt?.type === "IssuesEvent") {
-      evt.entTypeLogo = "/images/github_events/github_issues_event_logo.png";
+			evt.entTypeLogo =
+				"/images/github_events/github_issues_event_logo.png";
 			if (evt?.payload.action === "opened") {
 				evt.commitMsg = "Opened " + evt.payload.issue.title;
 			} else if (evt?.payload.action === "closed") {
 				evt.commitMsg = "Closed " + evt.payload.issue.title;
 			}
 		} else if (evt?.type === "DeleteEvent") {
-      evt.entTypeLogo = "/images/github_events/github_delete_event_logo.png";
+			evt.entTypeLogo =
+				"/images/github_events/github_delete_event_logo.png";
 			evt.commitMsg =
 				evt.payload.ref_type + " " + evt.payload.ref + " deleted";
 		} else if (evt?.type === "IssueCommentEvent") {
@ -26,7 +30,8 @@ function GitCommits({ title, image, evt1, evt2, evt3, url }) {
 				"/images/github_events/github_issue_comment_event_logo.png";
 			evt.commitMsg = evt.payload.comment.body;
 		} else if (evt?.type === "CreateEvent") {
-      evt.entTypeLogo = "/images/github_events/github_create_event_logo.png";
+			evt.entTypeLogo =
+				"/images/github_events/github_create_event_logo.png";
 			evt.commitMsg = evt.payload.ref_type;
 		} else if (evt?.type === "PullRequestEvent") {
 			evt.entTypeLogo =
@ -37,10 +42,11 @@ function GitCommits({ title, image, evt1, evt2, evt3, url }) {
 				evt.commitMsg = "Closed " + evt.payload.pull_request.title;
 			}
 		} else if (evt?.type === "ForkEvent") {
-      evt.entTypeLogo = "/images/github_events/github_fork_event_logo.png";
+			evt.entTypeLogo =
+				"/images/github_events/github_fork_event_logo.png";
 			evt.commitMsg = "Forked " + evt.payload.forkee.full_name;
 		}
-  })
+	});

 	return (
 		<SkillCard title={title} image={image} url={url}>
@ -86,4 +92,4 @@ function GitCommits({ title, image, evt1, evt2, evt3, url }) {
 	);
 }

-export default GitCommits
+export default GitCommits;
--- a/components/skillComponents/lastfm_current.jsx
+++ b/components/skillComponents/lastfm_current.jsx
@ -26,7 +26,15 @@ function LastFMCurrentSkillCard({
 				{empty ? "No recent tracks" : `${song.artist} - ${song.name}`}
 			</div>
 			<div className="description">
-        {empty ? "" : <img src={song.art} alt={`${song.artist} - ${song.name}`} className="albumart"/>}
+				{empty ? (
+					""
+				) : (
+					<img
+						src={song.art}
+						alt={`${song.artist} - ${song.name}`}
+						className="albumart"
+					/>
+				)}
 			</div>
 		</SkillCard>
 	);
--- a/components/skillComponents/osu_bestScores.jsx
+++ b/components/skillComponents/osu_bestScores.jsx
@ -38,7 +38,8 @@ function OsuBestScoresSkillCard({
 							Star/Combos/PP
 							<div className="bestScores__score__info__score__value">
 								<div className="bestScores__score__info__name__artist">
-                  {bestScore1?.beatmap?.difficulty_rating + " "}
+									{bestScore1?.beatmap?.difficulty_rating +
+										" "}
 								</div>
 								/
 								<div className="bestScores__score__info__name__artist">
@ -76,7 +77,8 @@ function OsuBestScoresSkillCard({
 							Star/Combos/PP
 							<div className="bestScores__score__info__score__value">
 								<div className="bestScores__score__info__name__artist">
-                  {bestScore2?.beatmap?.difficulty_rating + " "}
+									{bestScore2?.beatmap?.difficulty_rating +
+										" "}
 								</div>
 								/
 								<div className="bestScores__score__info__name__artist">
@ -114,7 +116,8 @@ function OsuBestScoresSkillCard({
 							Star/Combos/PP
 							<div className="bestScores__score__info__score__value">
 								<div className="bestScores__score__info__name__artist">
-                  {bestScore3?.beatmap?.difficulty_rating + " "}
+									{bestScore3?.beatmap?.difficulty_rating +
+										" "}
 								</div>
 								/
 								<div className="bestScores__score__info__name__artist">
--- a/components/skillComponents/osu_user.jsx
+++ b/components/skillComponents/osu_user.jsx
@ -19,7 +19,9 @@ function OsuUserSkillCard({
 }) {
 	return (
 		<SkillCard title={title} image={image} url={url}>
-      <div className="description">Accuracy :- {Math.floor(accuracy)} %</div>
+			<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>
--- a/components/skillComponents/spotify_top_songs.jsx
+++ b/components/skillComponents/spotify_top_songs.jsx
@ -27,7 +27,9 @@ function SpotifyTopSkillCard({
 						</a>
 					</div>
 					<div className="topSongs__song__info">
-            <div className="topSongs__song__info__name">{topSongs1?.name}</div>
+						<div className="topSongs__song__info__name">
+							{topSongs1?.name}
+						</div>
 						<div className="topSongs__song__info__artist">
 							{topSongs1?.artists[0]?.name}
 						</div>
@ -44,7 +46,9 @@ function SpotifyTopSkillCard({
 						</a>
 					</div>
 					<div className="topSongs__song__info">
-            <div className="topSongs__song__info__name">{topSongs2?.name}</div>
+						<div className="topSongs__song__info__name">
+							{topSongs2?.name}
+						</div>
 						<div className="topSongs__song__info__artist">
 							{topSongs2?.artists[0]?.name}
 						</div>
@ -61,7 +65,9 @@ function SpotifyTopSkillCard({
 						</a>
 					</div>
 					<div className="topSongs__song__info">
-            <div className="topSongs__song__info__name">{topSongs3?.name}</div>
+						<div className="topSongs__song__info__name">
+							{topSongs3?.name}
+						</div>
 						<div className="topSongs__song__info__artist">
 							{topSongs3?.artists[0]?.name}
 						</div>
@ -78,7 +84,9 @@ function SpotifyTopSkillCard({
 						</a>
 					</div>
 					<div className="topSongs__song__info">
-            <div className="topSongs__song__info__name">{topSongs4?.name}</div>
+						<div className="topSongs__song__info__name">
+							{topSongs4?.name}
+						</div>
 						<div className="topSongs__song__info__artist">
 							{topSongs4?.artists[0]?.name}
 						</div>
@ -95,7 +103,9 @@ function SpotifyTopSkillCard({
 						</a>
 					</div>
 					<div className="topSongs__song__info">
-            <div className="topSongs__song__info__name">{topSongs5?.name}</div>
+						<div className="topSongs__song__info__name">
+							{topSongs5?.name}
+						</div>
 						<div className="topSongs__song__info__artist">
 							{topSongs5?.artists[0]?.name}
 						</div>
--- a/components/skillComponents/twitter_tweets.jsx
+++ b/components/skillComponents/twitter_tweets.jsx
@ -15,7 +15,12 @@ function TwitterTweetsSkillCard({
 			<div className="skill-card-content">
 				Latest Tweet
 				<div className="skill-card-content-inner">
-          <a href={"https://twitter.com/Bravo68web/status/" + tweets1?.id}>
+					<a
+						href={
+							"https://twitter.com/Bravo68web/status/" +
+							tweets1?.id
+						}
+					>
 						<div>{tweets1?.text}</div>
 					</a>
 				</div>
@ -24,7 +29,12 @@ function TwitterTweetsSkillCard({
 			<div className="skill-card-content">
 				Previous Tweets
 				<div className="skill-card-content-inner">
-          <a href={"https://twitter.com/Bravo68web/status/" + tweets2?.id}>
+					<a
+						href={
+							"https://twitter.com/Bravo68web/status/" +
+							tweets2?.id
+						}
+					>
 						{tweets2?.text}
 					</a>
 				</div>
@ -32,7 +42,12 @@ function TwitterTweetsSkillCard({
 			<br />
 			<div className="skill-card-content">
 				<div className="skill-card-content-inner">
-          <a href={"https://twitter.com/Bravo68web/status/" + tweets3?.id}>
+					<a
+						href={
+							"https://twitter.com/Bravo68web/status/" +
+							tweets3?.id
+						}
+					>
 						{tweets3?.text}
 					</a>
 				</div>
--- a/components/skills.jsx
+++ b/components/skills.jsx
@ -71,40 +71,63 @@ function Skills() {
 								title={"GitHub Stats"}
 								url={"https://github.com/Bravo68web"}
 								image={skills?.logo?.github}
-                public_repos={skills?.gh_user?.data?.public_repos}
+								public_repos={
+									skills?.gh_user?.data?.public_repos
+								}
 								followers={skills?.gh_user?.data?.followers}
 								following={skills?.gh_user?.data?.following}
-                public_gists={skills?.gh_user?.data?.public_gists}
+								public_gists={
+									skills?.gh_user?.data?.public_gists
+								}
 								created_at={skills?.gh_user?.data?.created_at}
 							/>
 							<OsuUserSkillCard
 								title={"Osu! Player Stats"}
 								url={"https://osu.ppy.sh/users/bravo68web"}
 								image={skills?.logo?.osu}
-                accuracy={skills?.osu_user?.data?.statistics?.hit_accuracy}
-                level={skills?.osu_user?.data?.statistics?.level?.current}
+								accuracy={
+									skills?.osu_user?.data?.statistics
+										?.hit_accuracy
+								}
+								level={
+									skills?.osu_user?.data?.statistics?.level
+										?.current
+								}
 								pp_raw={skills?.osu_user?.data?.statistics?.pp}
 								country={skills?.osu_user?.data?.country?.code}
-                pp_rank={skills?.osu_user?.data?.statistics?.global_rank}
-                countryRank={skills?.osu_user?.data?.statistics?.country_rank}
+								pp_rank={
+									skills?.osu_user?.data?.statistics
+										?.global_rank
+								}
+								countryRank={
+									skills?.osu_user?.data?.statistics
+										?.country_rank
+								}
 								maximum_combo={
-                  skills?.osu_user?.data?.statistics?.maximum_combo
+									skills?.osu_user?.data?.statistics
+										?.maximum_combo
 								}
 								join_date={"2019-09-21 19:33:44"}
-                total_score={skills?.osu_user?.data?.statistics?.total_score}
+								total_score={
+									skills?.osu_user?.data?.statistics
+										?.total_score
+								}
 							/>
 							<TwitterUserSkillCard
 								title={"Twitter Stats"}
 								url={"https://twitter.com/Bravo68web"}
 								image={skills?.logo?.twitter}
 								followers_count={
-                  skills?.twitter_user?.public_metrics?.followers_count
+									skills?.twitter_user?.public_metrics
+										?.followers_count
 								}
 								friends_count={
-                  skills?.twitter_user?.public_metrics?.following_count
+									skills?.twitter_user?.public_metrics
+										?.following_count
 								}
 								statuses_count={
-                  skills?.twitter_user?.public_metrics?.tweet_count
+									skills?.twitter_user?.public_metrics
+										?.tweet_count
 								}
 								created_at={skills?.twitter_user?.created_at}
 							/>
@ -114,17 +137,29 @@ function Skills() {
 									"https://open.spotify.com/user/31huoajpuynl4w4dzbhp4frktqw4?si=48195baf55a54d7d"
 								}
 								image={skills?.logo?.spotify}
-                topSongs1={skills?.spotify_top_songs?.data?.items[0]}
-                topSongs2={skills?.spotify_top_songs?.data?.items[1]}
-                topSongs3={skills?.spotify_top_songs?.data?.items[2]}
-                topSongs4={skills?.spotify_top_songs?.data?.items[3]}
-                topSongs5={skills?.spotify_top_songs?.data?.items[4]}
+								topSongs1={
+									skills?.spotify_top_songs?.data?.items[0]
+								}
+								topSongs2={
+									skills?.spotify_top_songs?.data?.items[1]
+								}
+								topSongs3={
+									skills?.spotify_top_songs?.data?.items[2]
+								}
+								topSongs4={
+									skills?.spotify_top_songs?.data?.items[3]
+								}
+								topSongs5={
+									skills?.spotify_top_songs?.data?.items[4]
+								}
 							/>
 							<WakatimeUserSkillCard
 								title={"Wakatime Stats"}
 								url={"https://wakatime.com/@bravo68web"}
 								image={skills?.logo?.wakatime}
-                total_time={skills?.wakatime_alltime?.data?.text}
+								total_time={
+									skills?.wakatime_alltime?.data?.text
+								}
 								average_weekly_time={
 									skills?.wakatime_stats?.data
 										?.human_readable_daily_average_including_other_language
@ -141,8 +176,12 @@ function Skills() {
 								image={skills?.logo?.hashnode}
 								joinOn={"2021-06-18"}
 								numPosts={skills?.hn_user?.data?.numPosts}
-                numFollowers={skills?.hn_user?.data?.numFollowers}
-                numReactions={skills?.hn_user?.data?.numReactions}
+								numFollowers={
+									skills?.hn_user?.data?.numFollowers
+								}
+								numReactions={
+									skills?.hn_user?.data?.numReactions
+								}
 							/>
 							<OsuBestScoresSkillCard
 								title={"Osu! Best Scores"}
@ -176,20 +215,20 @@ function Skills() {
 								image={skills?.logo?.lastfm}
 								empty={lastFMempty}
 								artist={
-                  skills?.lastfm_current?.recenttracks?.track?.[0]?.artist[
-                    "#text"
-                  ]
+									skills?.lastfm_current?.recenttracks
+										?.track?.[0]?.artist["#text"]
+								}
+								name={
+									skills?.lastfm_current?.recenttracks
+										?.track?.[0]?.name
 								}
-                name={skills?.lastfm_current?.recenttracks?.track?.[0]?.name}
 								album={
-                  skills?.lastfm_current?.recenttracks?.track?.[0]?.album[
-                    "#text"
-                  ]
+									skills?.lastfm_current?.recenttracks
+										?.track?.[0]?.album["#text"]
 								}
 								albumImg={
-                  skills?.lastfm_current?.recenttracks?.track?.[0].image[1][
-                    "#text"
-                  ]
+									skills?.lastfm_current?.recenttracks
+										?.track?.[0].image[1]["#text"]
 								}
 							/>
 							<GitHubUserEvtSkillCard
--- a/components/skills.style.js
+++ b/components/skills.style.js
@ -5,11 +5,10 @@ export default styled.div`
 	max-width: 100%;
 	height: 100vh;
 	padding: 100px 20px;
-  margin-top: 15px;
 	align-items: center;
 	flex-direction: column;
 	overflow-y: auto !important;
-  background-image: url("/images/background5.jpg");
+	background-image: url("/images/pxfuel-2.jpg");
 	background-size: cover;
 	background-position: center;
 	background-repeat: no-repeat;
--- a/components/status.jsx
+++ b/components/status.jsx
@ -26,10 +26,6 @@ export default function Status() {
 			</Box>
 		);
 	} else {
-        return (
-            <div> 
-                {(status.status)}
-            </div>    
-        );
+		return <div>{status.status}</div>;
 	}
 }
--- a/components/tootCard.js
+++ b/components/tootCard.js
@ -29,7 +29,9 @@ function SkillCard({ content, created_at, url, image }) {
 										<img src={image} height="30" />
 									</div>
 								)}
-                <div className="content">&quot;{texts.join("\n")}&quot;</div>
+								<div className="content">
+									&quot;{texts.join("\n")}&quot;
+								</div>
 								<div className="type">
 									# {format(created_at, "DD MMM YYYY")}
 								</div>
--- a/components/tootCard.style.jsx
+++ b/components/tootCard.style.jsx
@ -5,7 +5,7 @@ export default styled.div`
 	width: 230px;
 	height: 100%;
 	box-sizing: border-box;
-  background-color: #aa78f6;
+	background-color: #aa78f6ac;
 	border-radius: 5px;
 	box-shadow: 10px 9px 0px -3px #7b3ea7;
 	margin: 8px;
--- a/components/toots.jsx
+++ b/components/toots.jsx
@ -37,9 +37,7 @@ function Toots () {
 		return (
 			<>
 				<ArtTitleStyle>
-          <div className="title-bar">
-            Fosstodon Status
-          </div>
+					<div className="title-bar">Fosstodon Status</div>
 				</ArtTitleStyle>
 				<div className="mainboard__container">
 					{skills && (
--- a/components/toots.style.jsx
+++ b/components/toots.style.jsx
@ -8,7 +8,7 @@ export const ArtStyle = styled.div`
 	justify-content: center;
 	flex-wrap: wrap;
 	overflow-y: auto;
-  background-image: url("/images/background7.png");
+	background-image: url("/images/pxfuel-2.jpg");
 	background-size: cover;
 	background-position: center;
 	background-repeat: no-repeat;
@ -22,4 +22,4 @@ export const ArtTitleStyle = styled.div`
 	text-align: center;
 	margin-bottom: 18px;
 	padding-top: 90px;
-`
+`;
--- a/components/vsexts.jsx
+++ b/components/vsexts.jsx
@ -9,7 +9,7 @@ function vsExtsShow() {
 				<div className="default">
 					{vsExts.map((content, index) => {
 						return (
-              <div key={index}>
+							<div key={content.name}>
 								<div className="content">
 									<div className="content-description">
 										<a
@ -30,7 +30,9 @@ function vsExtsShow() {
 												{content.name}
 											</a>
 										</h1>
-                    <h2 className="tags">#{content.type}</h2>
+										<h2 className="tags">
+											#{content.type}
+										</h2>
 									</div>
 								</div>
 							</div>
--- a/components/vsexts.style.js
+++ b/components/vsexts.style.js
@ -6,13 +6,14 @@ export const ExtraStyles = styled.div`
 	justify-content: center;
 	align-items: center;
 	padding-top: 15vh;
-  background-image: url("images/background3.jpg");
+	background-image: url("images/pxfuel-4.jpg");
 	background-size: cover;
 	background-position: center;
 	background-attachment: fixed;
 	background-repeat: no-repeat;
 	overflow-y: scroll !important;
 	height: 100vh;
+	gap: 1rem;
 	.title {
 		font-size: 2rem;
 		font-weight: bold;
--- a/config.js
+++ b/config.js
--- a/hooks/useLastFM.js
+++ b/hooks/useLastFM.js
@ -1,68 +1,60 @@
-import {useEffect,useState} from "react"
-import axios from "../handlers/axios"
+import { useEffect, useState } from "react";
+import axios from "../handlers/axios";

-const parseSong = (
-    body,
-    imageSize,
-  ) => {
+const parseSong = (body, imageSize) => {
 	if (!body) {
 		return {
-        status: 'connecting',
+			status: "connecting",
 			song: null,
 		};
 	}

 	const lastSong = body.recenttracks.track?.[0];

-    if (!lastSong || !lastSong['@attr']?.nowplaying) {
+	if (!lastSong || !lastSong["@attr"]?.nowplaying) {
 		return {
-        status: 'idle',
+			status: "idle",
 			song: null,
 		};
 	}

-    const image = lastSong.image.find(i => {
+	const image = lastSong.image.find((i) => {
 		return i.size === imageSize;
 	});

 	return {
-      status: 'playing',
+		status: "playing",
 		song: {
 			name: lastSong.name,
-        artist: lastSong.artist['#text'],
-        art: image?.['#text'] ?? lastSong.image[0]['#text'],
+			artist: lastSong.artist["#text"],
+			art: image?.["#text"] ?? lastSong.image[0]["#text"],
 			url: lastSong.url,
-        album: lastSong.album['#text'],
+			album: lastSong.album["#text"],
 		},
 	};
-  }
-  
+};

 const useLastFM = () => {
-    const [status,setStatus] = useState("idle")
+	const [status, setStatus] = useState("idle");
 	const [song, setSong] = useState();

 	const getStatus = async () => {
-
 		axios.get("/me/lastfm/current").then((res) => {
-           const {status, song}=
-                parseSong(res.data, "extralarge")
-            setSong(song)
-            setStatus(status)
-        })
-    }
+			const { status, song } = parseSong(res.data, "extralarge");
+			setSong(song);
+			setStatus(status);
+		});
+	};

 	useEffect(() => {
-
 		const interval = setInterval(() => {
-            getStatus()
-        }, 3000)
+			getStatus();
+		}, 3000);

-        return () => clearInterval(interval)
+		return () => clearInterval(interval);
+	}, []);

-    },[])
+	return { status, song };
+};

-    return {status,song}
-}
-
-export default useLastFM
+export default useLastFM;
--- a/libs/discord-parser.js
+++ b/libs/discord-parser.js
@ -2,22 +2,39 @@ export default function parse(data) {
 	const output = {};
 	const act = [];

-    const PrirorityActivityType = ['Coding', 'Listening to Spotify', 'Playing', 'Custom Status', 'Streaming', 'Watching', 'Competing', 'Unknown'];
+	const PrirorityActivityType = [
+		"Coding",
+		"Listening to Spotify",
+		"Playing",
+		"Custom Status",
+		"Streaming",
+		"Watching",
+		"Competing",
+		"Unknown",
+	];

 	output.discord = {
 		id: data.discord_user.id,
 		username: data.discord_user.username,
 		discriminator: data.discord_user.discriminator,
-        avatar_url: "https://cdn.discordapp.com/avatars/" + data.discord_user.id + "/" + data.discord_user.avatar + ".png",
-        avatar_decoration_url: "https://cdn.discordapp.com/avatar-decoration-presets/" + data.discord_user.avatar_decoration + ".png"
-    }
+		avatar_url:
+			"https://cdn.discordapp.com/avatars/" +
+			data.discord_user.id +
+			"/" +
+			data.discord_user.avatar +
+			".png",
+		avatar_decoration_url:
+			"https://cdn.discordapp.com/avatar-decoration-presets/" +
+			data.discord_user.avatar_decoration +
+			".png",
+	};

 	output.kv = data.kv;

 	if (data.discord_status == "offline") {
 		return {
 			discord_status: "offline",
-        }
+		};
 	}

 	if (data.listening_to_spotify) {
@ -27,33 +44,31 @@ export default function parse(data) {
 			song: data.spotify.song,
 			album_art_url: data.spotify.album_art_url,
 			timestamps: data.spotify.timestamps,
-            track_id: data.spotify.track_id
-        }
+			track_id: data.spotify.track_id,
+		};
 	}
 	for (const activity of data.activities) {
 		if (activity.name.includes("Visual Studio Code")) {
 			act.push({
-                prirority_id: PrirorityActivityType.indexOf('Coding'),
-                ...activity
+				prirority_id: PrirorityActivityType.indexOf("Coding"),
+				...activity,
 			});
-        }
-        else if(activity.name.includes("Spotify")){
+		} else if (activity.name.includes("Spotify")) {
 			act.push({
-                prirority_id: PrirorityActivityType.indexOf('Listening to Spotify'),
-                ...activity
+				prirority_id: PrirorityActivityType.indexOf(
+					"Listening to Spotify"
+				),
+				...activity,
 			});
-        }
-        else if(activity.type === 0){
+		} else if (activity.type === 0) {
 			act.push({
-                prirority_id: PrirorityActivityType.indexOf('Playing'),
-                ...activity
+				prirority_id: PrirorityActivityType.indexOf("Playing"),
+				...activity,
 			});
-        }
-
-        else if(activity.name.includes("Custom Status")){
+		} else if (activity.name.includes("Custom Status")) {
 			act.push({
-                prirority_id: PrirorityActivityType.indexOf('Custom Status'),
-                ...activity
+				prirority_id: PrirorityActivityType.indexOf("Custom Status"),
+				...activity,
 			});
 			output.custom_status = {
 				state: activity.state,
@ -61,14 +76,16 @@ export default function parse(data) {
 					name: activity.emoji?.name,
 					id: activity.emoji?.id,
 					animated: activity.emoji?.animated,
-                    emoji_url: "https://cdn.discordapp.com/emojis/" + activity.emoji?.id + ".webp?size=44&quality=lossless"
-                }
+					emoji_url:
+						"https://cdn.discordapp.com/emojis/" +
+						activity.emoji?.id +
+						".webp?size=44&quality=lossless",
+				},
 			};
-        }
-        else {
+		} else {
 			act.push({
-                prirority_id: PrirorityActivityType.indexOf('Unknown'),
-                ...activity
+				prirority_id: PrirorityActivityType.indexOf("Unknown"),
+				...activity,
 			});
 			break;
 		}
@ -81,22 +98,28 @@ export default function parse(data) {
 	if (output.activity?.prirority_id == 1) {
 		output.activity.assets = {
 			large_image: output.spotify.album_art_url,
-            small_image : "/images/brandlogos/SpotifyLogo.png"
-        }
-    }
-
-    else if(output.activity?.prirority_id == 3){
+			small_image: "/images/brandlogos/SpotifyLogo.png",
+		};
+	} else if (output.activity?.prirority_id == 3) {
 		output.activity.assets = {
 			large_image: "/images/anime-profile-pic.png",
 			small_image: output.custom_status.emoji.emoji_url,
-        }
-    }
-
-    else {
+		};
+	} else {
 		output.activity.assets = {
-            large_image : "https://cdn.discordapp.com/app-assets/"+output.activity.application_id+"/"+output.activity.assets.large_image+".png",
-            small_image : "https://cdn.discordapp.com/app-assets/"+output.activity.application_id+"/"+output.activity.assets.small_image+".png",
-        }
+			large_image:
+				"https://cdn.discordapp.com/app-assets/" +
+				output.activity.application_id +
+				"/" +
+				output.activity.assets.large_image +
+				".png",
+			small_image:
+				"https://cdn.discordapp.com/app-assets/" +
+				output.activity.application_id +
+				"/" +
+				output.activity.assets.small_image +
+				".png",
+		};
 	}

 	return output;
--- a/next.config.js
+++ b/next.config.js
@ -3,5 +3,15 @@ const moduleExports = {
 	compiler: {
 		styledComponents: true,
 	},
+	images: {
+		remotePatterns: [
+		  {
+			protocol: 'https',
+			hostname: 'bravo68web.me',
+			port: '',
+			pathname: '/images/**/*.{jpg,jpeg,png,svg,gif,webp}',
+		  },
+		],
+	},
 };
 module.exports = moduleExports;
--- a/pages/_app.js
+++ b/pages/_app.js
@ -1,8 +1,6 @@
 import "../styles/globals.css";
 // import CustomCursor from "components/providers/cursor";
-import ErrorBoundary from '../components/errorBoundary'
-
-
+import ErrorBoundary from "../components/errorBoundary";

 function MyPortfolio({ Component, pageProps }) {
 	return (
--- a/pages/_document.js
+++ b/pages/_document.js
@ -46,7 +46,10 @@ export default class MyDocument extends Document {
 						content="Jyotirmoy Bandyopadhayaya | Bravo68web"
 					/>
 					<link rel="icon" href="/favicon.ico" />
-          <link rel="preconnect" href="https://fonts.googleapis.com" />
+					<link
+						rel="preconnect"
+						href="https://fonts.googleapis.com"
+					/>
 					<link rel="preconnect" href="https://fonts.gstatic.com" />
 					<link
 						href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
--- a/pages/about.js
+++ b/pages/about.js
@ -8,8 +8,8 @@ export default function Home() {
 		<div>
 			<Head>
 				<title>
-          About | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
-          DevOps Engineer
+					About | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer
+					and DevOps Engineer
 				</title>
 			</Head>
 			<Nav />
--- a/pages/contact.js
+++ b/pages/contact.js
@ -8,8 +8,8 @@ export default function Home() {
 		<div>
 			<Head>
 				<title>
-          Contact | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
-          DevOps Engineer
+					Contact | Jyotirmoy Bandyopadhayaya | Full Stack Web
+					Developer and DevOps Engineer
 				</title>
 			</Head>
 			<Nav />
--- a/pages/exps.js
+++ b/pages/exps.js
@ -0,0 +1,21 @@
+import Head from "next/head";
+import Nav from "components/nav";
+import About from "components/experinces";
+import Footer from "components/footer";
+
+export default function Home() {
+	return (
+		<div>
+			<Head>
+				<title>
+					About | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer
+					and DevOps Engineer
+				</title>
+			</Head>
+			<Nav />
+			<About />
+
+			{/* <Footer /> */}
+		</div>
+	);
+}
--- a/pages/extras.js
+++ b/pages/extras.js
@ -8,8 +8,8 @@ export default function Home() {
 		<div>
 			<Head>
 				<title>
-          Extras | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
-          DevOps Engineer
+					Extras | Jyotirmoy Bandyopadhayaya | Full Stack Web
+					Developer and DevOps Engineer
 				</title>
 			</Head>
 			<Nav />
--- a/pages/index.js
+++ b/pages/index.js
@ -1,21 +1,25 @@
 import Head from "next/head";
 import Nav from "components/nav";
-import Main from "components/main";
+// import Main from "components/main";
 import BMC from "components/buymeacoffee";
+import dynamic from 'next/dynamic';
+
+const Main = dynamic(() => import('components/main'), {
+	ssr: false, // Disable server-side rendering
+});

 export default function Home() {
 	return (
 		<div>
 			<Head>
 				<title>
-          Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and DevOps
-          Engineer
+					Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
+					DevOps Engineer
 				</title>
 			</Head>
 			<Nav />
 			<Main />
 			<BMC />
-      {/* <Footer /> */}
 		</div>
 	);
 }
--- a/pages/projects.js
+++ b/pages/projects.js
@ -7,8 +7,8 @@ export default function Home() {
 		<div>
 			<Head>
 				<title>
-          Projects | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
-          DevOps Engineer
+					Projects | Jyotirmoy Bandyopadhayaya | Full Stack Web
+					Developer and DevOps Engineer
 				</title>
 			</Head>
 			<Nav />
--- a/pages/qbadges.js
+++ b/pages/qbadges.js
@ -7,8 +7,8 @@ export default function Home() {
 		<div>
 			<Head>
 				<title>
-          Projects | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
-          DevOps Engineer
+					Projects | Jyotirmoy Bandyopadhayaya | Full Stack Web
+					Developer and DevOps Engineer
 				</title>
 			</Head>
 			<Nav />
--- a/pages/resume.js
+++ b/pages/resume.js
@ -9,8 +9,8 @@ export default function Home() {
 		<div>
 			<Head>
 				<title>
-          Resume | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
-          DevOps Engineer
+					Resume | Jyotirmoy Bandyopadhayaya | Full Stack Web
+					Developer and DevOps Engineer
 				</title>
 			</Head>
 			<Nav />
--- a/pages/stats.js
+++ b/pages/stats.js
@ -8,8 +8,8 @@ export default function Home() {
 		<div>
 			<Head>
 				<title>
-          Stats | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
-          DevOps Engineer
+					Stats | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer
+					and DevOps Engineer
 				</title>
 			</Head>
 			<Nav />
@ -27,4 +27,3 @@ export default function Home() {
 //     props:[]
 //   }
 // }
- 
--- a/pages/toots.js
+++ b/pages/toots.js
@ -8,8 +8,8 @@ export default function Home() {
 		<div>
 			<Head>
 				<title>
-          Toots | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
-          DevOps Engineer
+					Toots | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer
+					and DevOps Engineer
 				</title>
 			</Head>
 			<Nav />
--- a/pages/vscode.js
+++ b/pages/vscode.js
@ -8,8 +8,8 @@ export default function Home() {
 		<div>
 			<Head>
 				<title>
-          VS Code Extensions | Jyotirmoy Bandyopadhayaya | Full Stack Web
-          Developer and DevOps Engineer
+					VS Code Extensions | Jyotirmoy Bandyopadhayaya | Full Stack
+					Web Developer and DevOps Engineer
 				</title>
 			</Head>
 			<Nav />
--- a/public/images/background.jpg
+++ b/public/images/background.jpg
--- a/public/images/background2.jpg
+++ b/public/images/background2.jpg
--- a/public/images/background3.jpg
+++ b/public/images/background3.jpg
--- a/public/images/background4.jpg
+++ b/public/images/background4.jpg
--- a/public/images/background5.jpg
+++ b/public/images/background5.jpg
--- a/public/images/background6.webp
+++ b/public/images/background6.webp
--- a/public/images/background7.png
+++ b/public/images/background7.png
--- a/public/images/companies/DFTechsLogo.png
+++ b/public/images/companies/DFTechsLogo.png
--- a/public/images/desktop-1024x576.jpg
+++ b/public/images/desktop-1024x576.jpg
--- a/public/images/header-banner.png
+++ b/public/images/header-banner.png
--- a/public/images/pxfuel-2.jpg
+++ b/public/images/pxfuel-2.jpg
--- a/public/images/pxfuel-3.jpg
+++ b/public/images/pxfuel-3.jpg
--- a/public/images/pxfuel-4.jpg
+++ b/public/images/pxfuel-4.jpg
--- a/public/images/pxfuel-5.jpg
+++ b/public/images/pxfuel-5.jpg
--- a/public/images/pxfuel-6.jpg
+++ b/public/images/pxfuel-6.jpg
--- a/public/images/pxfuel.jpg
+++ b/public/images/pxfuel.jpg
--- a/styles/globals.css
+++ b/styles/globals.css
@ -12,6 +12,11 @@
 	--color8: #f58a0f;
 	--color9: #f5a80f;
 	--color10: #0ffaac;
+	--color11: rgba(255, 255, 255, 0.1);
+	--color12: rgba(67, 7, 55, 0.484);
+	--color13: rgba(53, 3, 9, 0.8);
+	--color14: rgb(255, 255, 255);
+	--color15: rgba(5, 59, 61, 0.333);
 	--font: "Source Code Pro", monospace;
 	--color-cursor: 220, 90, 90;
 	--cursor-outline-shade: 0.3;
@ -28,8 +33,9 @@ body {
 	background: var(--color2);
 	padding: 0;
 	margin: 0;
-  font-family: var(--font), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
-    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+	font-family: var(--font), -apple-system, BlinkMacSystemFont, Segoe UI,
+		Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
+		sans-serif;
 	height: 100vh;
 	width: 100vw;
 	/* color:var(--color3)   */