portfoilio: website rework
This commit is contained in:
parent
df1939a58c
commit
c6702b058e
|
@ -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">
|
<a href="LICENSE" target="_blank">
|
||||||
<img alt="License: CC-BY-ND-4.0" src="https://forthebadge.com/images/badges/cc-by-nd.svg" />
|
<img alt="License: CC-BY-ND-4.0" src="https://forthebadge.com/images/badges/cc-by-nd.svg" />
|
||||||
|
@ -12,7 +12,7 @@
|
||||||
|
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
<img src="./screenshots/1.png" />
|
<img src="./screenshots/2.png" />
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
|
@ -22,13 +22,11 @@
|
||||||
|
|
||||||
#### About this Repo :-
|
#### 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 :-
|
#### Features :-
|
||||||
|
|
||||||
- Discord Integration
|
- Discord Integration
|
||||||
- Online Status Checker
|
|
||||||
- Resume Embed
|
|
||||||
- Custom User Stats representations
|
- Custom User Stats representations
|
||||||
- Art and Project Showcase
|
- Art and Project Showcase
|
||||||
- Custom Error page (including 404 and 500 response error)
|
- Custom Error page (including 404 and 500 response error)
|
||||||
|
|
|
@ -41,8 +41,8 @@ function Contact() {
|
||||||
<h3>
|
<h3>
|
||||||
<strong>Email:</strong>
|
<strong>Email:</strong>
|
||||||
</h3>
|
</h3>
|
||||||
<a href="mailto:me@bravo68web.me">
|
<a href="mailto:portfolio@b68.dev">
|
||||||
me@bravo68web.me
|
hi@b68.dev
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<br />
|
<br />
|
||||||
|
@ -58,7 +58,7 @@ function Contact() {
|
||||||
<strong>Discord:</strong>
|
<strong>Discord:</strong>
|
||||||
</h3>
|
</h3>
|
||||||
<a href="https://discord.com/users/457039372009865226">
|
<a href="https://discord.com/users/457039372009865226">
|
||||||
Bravo68-DF_Techs#6429
|
bravo68web
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<br />
|
<br />
|
||||||
|
|
|
@ -29,7 +29,7 @@ export default function DiscordActivity() {
|
||||||
}
|
}
|
||||||
}, [status, loading]);
|
}, [status, loading]);
|
||||||
|
|
||||||
if (!loading && parsedStatus && status.discord_status !== "offline") {
|
if (!loading && parsedStatus && status.discord_status !== "offline" && parsedStatus.activity) {
|
||||||
return (
|
return (
|
||||||
<DicordActivityStyle>
|
<DicordActivityStyle>
|
||||||
<div className="discord-icons">
|
<div className="discord-icons">
|
||||||
|
@ -47,9 +47,7 @@ export default function DiscordActivity() {
|
||||||
<div className="discord-messageBox">
|
<div className="discord-messageBox">
|
||||||
<div className="discord-message-application">
|
<div className="discord-message-application">
|
||||||
<b>
|
<b>
|
||||||
{parsedStatus.discord.username +
|
{parsedStatus.discord.username}
|
||||||
"#" +
|
|
||||||
parsedStatus.discord.discriminator}
|
|
||||||
</b>
|
</b>
|
||||||
</div>
|
</div>
|
||||||
<div className="discord-message-activity">
|
<div className="discord-message-activity">
|
||||||
|
@ -62,13 +60,44 @@ export default function DiscordActivity() {
|
||||||
</div>
|
</div>
|
||||||
</DicordActivityStyle>
|
</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 = {
|
let restData = {
|
||||||
username: "Bravo68-DF_Techs",
|
username: "bravo68web",
|
||||||
public_flags: 64,
|
public_flags: 64,
|
||||||
id: "457039372009865226",
|
id: "457039372009865226",
|
||||||
discriminator: "6429",
|
avatar: "b9e91dcc8e658eb1ebf24299b7bec733",
|
||||||
avatar: "08a8937664b3b165805965244d6f095f",
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -84,7 +113,7 @@ export default function DiscordActivity() {
|
||||||
<div className="discord-messageBox">
|
<div className="discord-messageBox">
|
||||||
<div className="discord-message-application">
|
<div className="discord-message-application">
|
||||||
<b>
|
<b>
|
||||||
{restData.username + "#" + restData.discriminator}
|
{restData.username}
|
||||||
</b>
|
</b>
|
||||||
</div>
|
</div>
|
||||||
<div className="discord-message-activity">
|
<div className="discord-message-activity">
|
||||||
|
|
|
@ -1,11 +1,15 @@
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
|
||||||
export const DicordActivityStyle = styled.div`
|
export const DicordActivityStyle = styled.div`
|
||||||
|
border-color: #ffffff;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 2px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: start;
|
justify-content: start;
|
||||||
width: 400px;
|
width: 450px;
|
||||||
|
height: 120px;
|
||||||
min-height: 75px;
|
min-height: 75px;
|
||||||
background: rgb(131, 58, 180);
|
background: rgb(131, 58, 180);
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
|
@ -59,9 +63,12 @@ export const DicordActivityStyle = styled.div`
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
.discord-message-application {
|
.discord-message-application {
|
||||||
font-size: 1.3em;
|
font-size: 1.4em;
|
||||||
}
|
}
|
||||||
.discord-message-activity {
|
.discord-message-activity {
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
|
.discord-message-files {
|
||||||
|
font-size: 1.0rem;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -9,6 +9,7 @@ export default styled.div`
|
||||||
background: var(--color1);
|
background: var(--color1);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
/* filter: blur("5px"); */
|
||||||
.main-footer {
|
.main-footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
|
@ -6,14 +6,14 @@ import GitHubIcon from "@mui/icons-material/GitHub";
|
||||||
import TwitterIcon from "@mui/icons-material/Twitter";
|
import TwitterIcon from "@mui/icons-material/Twitter";
|
||||||
import LinkedInIcon from "@mui/icons-material/LinkedIn";
|
import LinkedInIcon from "@mui/icons-material/LinkedIn";
|
||||||
import InstagramIcon from "@mui/icons-material/Instagram";
|
import InstagramIcon from "@mui/icons-material/Instagram";
|
||||||
import FacebookIcon from "@mui/icons-material/Facebook";
|
|
||||||
import SvgIcon from "@mui/material/SvgIcon";
|
import SvgIcon from "@mui/material/SvgIcon";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
name,
|
name,
|
||||||
github_url,
|
github_url,
|
||||||
linkedin_url,
|
linkedin_url,
|
||||||
facebook_url,
|
// facebook_url,
|
||||||
|
hackthebox_url,
|
||||||
twitter_url,
|
twitter_url,
|
||||||
// email,
|
// email,
|
||||||
// resume_url,
|
// resume_url,
|
||||||
|
@ -82,9 +82,11 @@ function Main() {
|
||||||
<InstagramIcon fontSize="large" />
|
<InstagramIcon fontSize="large" />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</a>
|
</a>
|
||||||
<a href={facebook_url}>
|
<a href={hackthebox_url}>
|
||||||
<IconButton>
|
<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>
|
</IconButton>
|
||||||
</a>
|
</a>
|
||||||
<a href={mastodon_url} rel="me">
|
<a href={mastodon_url} rel="me">
|
||||||
|
|
|
@ -73,9 +73,13 @@ export default styled.main`
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
border-color: #ffffff;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 5px;
|
||||||
|
border-radius: 100%;
|
||||||
}
|
}
|
||||||
.name {
|
.name {
|
||||||
font-size: 1.5rem;
|
font-size: 1.6rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,6 +21,10 @@ const LINKS = [
|
||||||
title: "Experience",
|
title: "Experience",
|
||||||
href: "/exps",
|
href: "/exps",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "Projects",
|
||||||
|
href: "/projects",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: "Contact",
|
title: "Contact",
|
||||||
href: "/contact",
|
href: "/contact",
|
||||||
|
|
|
@ -38,8 +38,15 @@ export default styled.div`
|
||||||
.description {
|
.description {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
color: var(--color4);
|
color: var(--color4);
|
||||||
|
display: flex;
|
||||||
|
align-items: start;
|
||||||
|
justify-content: space-between;
|
||||||
|
/* gap: 6px; */
|
||||||
/* width: 225px; */
|
/* width: 225px; */
|
||||||
}
|
}
|
||||||
|
.value {
|
||||||
|
color: #ffff;
|
||||||
|
}
|
||||||
.topSongs {
|
.topSongs {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
@ -57,7 +57,7 @@ function GitCommits({ title, image, evt1, evt2, evt3, url }) {
|
||||||
<br />
|
<br />
|
||||||
{evt1?.repo?.name}
|
{evt1?.repo?.name}
|
||||||
</div>
|
</div>
|
||||||
<div className="description commit-msg">
|
<div className="value commit-msg">
|
||||||
{evt1?.commitMsg?.slice(0, 50)}
|
{evt1?.commitMsg?.slice(0, 50)}
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="description">{evt1?.created_at}</div> */}
|
{/* <div className="description">{evt1?.created_at}</div> */}
|
||||||
|
@ -70,7 +70,7 @@ function GitCommits({ title, image, evt1, evt2, evt3, url }) {
|
||||||
<br />
|
<br />
|
||||||
{evt2?.repo?.name}
|
{evt2?.repo?.name}
|
||||||
</div>
|
</div>
|
||||||
<div className="description commit-msg">
|
<div className="value commit-msg">
|
||||||
{evt2?.commitMsg?.slice(0, 50)}
|
{evt2?.commitMsg?.slice(0, 50)}
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="description">{evt2?.created_at}</div> */}
|
{/* <div className="description">{evt2?.created_at}</div> */}
|
||||||
|
@ -83,7 +83,7 @@ function GitCommits({ title, image, evt1, evt2, evt3, url }) {
|
||||||
<br />
|
<br />
|
||||||
{evt3?.repo?.name}
|
{evt3?.repo?.name}
|
||||||
</div>
|
</div>
|
||||||
<div className="description commit-msg">
|
<div className="value commit-msg">
|
||||||
{evt3?.commitMsg?.slice(0, 50)}
|
{evt3?.commitMsg?.slice(0, 50)}
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="description">{evt3?.created_at}</div> */}
|
{/* <div className="description">{evt3?.created_at}</div> */}
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import SkillCard from "../skillCard";
|
import SkillCard from "../skillCard";
|
||||||
import SkillCardStyle from "../skillCard.styled";
|
|
||||||
import { format } from "date-format-parse";
|
import { format } from "date-format-parse";
|
||||||
|
|
||||||
function GitHubSkillCard({
|
function GitHubSkillCard({
|
||||||
|
@ -15,12 +14,31 @@ function GitHubSkillCard({
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<SkillCard title={title} image={image} url={url}>
|
<SkillCard title={title} image={image} url={url}>
|
||||||
<div className="description">Repos :- {public_repos}</div>
|
<div className="description">Repos :-
|
||||||
<div className="description">Followers :- {followers}</div>
|
<div className="value">
|
||||||
<div className="description">Following :- {following}</div>
|
{public_repos}
|
||||||
<div className="description">Gists :- {public_gists}</div>
|
</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">
|
<div className="description">
|
||||||
Joined On :- {format(created_at, "DD MMM YYYY")}
|
Joined On :-
|
||||||
|
<div className="value">
|
||||||
|
{format(created_at, "DD MMM YYYY")}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SkillCard>
|
</SkillCard>
|
||||||
);
|
);
|
||||||
|
|
|
@ -16,13 +16,13 @@ function HashNodeSkillCard({
|
||||||
return (
|
return (
|
||||||
<SkillCard title={title} image={image} url={url}>
|
<SkillCard title={title} image={image} url={url}>
|
||||||
<div className="description">
|
<div className="description">
|
||||||
Joined on: {format(joinOn, "DD MMM YYYY")}
|
Joined on:
|
||||||
|
<div className="value">
|
||||||
|
{format(joinOn, "DD MMM YYYY")}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="description"> Total Posts : {numPosts}</div>
|
<div className="description"> Total Posts : {numPosts}</div>
|
||||||
<div className="description"> Total Followers : {numFollowers}</div>
|
<div className="description"> Total Followers : {numFollowers}</div>
|
||||||
{/* <div className="description">
|
|
||||||
Publication Domain : {publicationDomain}
|
|
||||||
</div> */}
|
|
||||||
<div className="description"> Total Reactions : {numReactions}</div>
|
<div className="description"> Total Reactions : {numReactions}</div>
|
||||||
</SkillCard>
|
</SkillCard>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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;
|
|
@ -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;
|
|
@ -1,6 +1,5 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import SkillCard from "../skillCard";
|
import SkillCard from "../skillCard";
|
||||||
import SkillCardStyle from "../skillCard.styled";
|
|
||||||
import { format, parse } from "date-format-parse";
|
import { format, parse } from "date-format-parse";
|
||||||
|
|
||||||
function OsuUserSkillCard({
|
function OsuUserSkillCard({
|
||||||
|
@ -11,7 +10,6 @@ function OsuUserSkillCard({
|
||||||
pp_raw,
|
pp_raw,
|
||||||
country,
|
country,
|
||||||
pp_rank,
|
pp_rank,
|
||||||
// countryRank,
|
|
||||||
join_date,
|
join_date,
|
||||||
maximum_combo,
|
maximum_combo,
|
||||||
total_score,
|
total_score,
|
||||||
|
@ -20,19 +18,54 @@ function OsuUserSkillCard({
|
||||||
return (
|
return (
|
||||||
<SkillCard title={title} image={image} url={url}>
|
<SkillCard title={title} image={image} url={url}>
|
||||||
<div className="description">
|
<div className="description">
|
||||||
Accuracy :- {Math.floor(accuracy)} %
|
Accuracy :-
|
||||||
</div>
|
<div className="value">
|
||||||
<div className="description">Level :- {Math.floor(level)}</div>
|
{Math.floor(accuracy)} %
|
||||||
<div className="description">PP :- {Math.floor(pp_raw)}</div>
|
</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()}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="description">
|
<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>
|
</div>
|
||||||
</SkillCard>
|
</SkillCard>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import SkillCard from "../skillCard";
|
import SkillCard from "../skillCard";
|
||||||
import SkillCardStyle from "../skillCard.styled";
|
|
||||||
// import { format, parse } from "date-format-parse";
|
|
||||||
|
|
||||||
function SpotifyTopSkillCard({
|
function SpotifyTopSkillCard({
|
||||||
title,
|
title,
|
||||||
|
|
|
@ -16,19 +16,34 @@ function WakatimeTopLangSkillCard({
|
||||||
return (
|
return (
|
||||||
<SkillCard title={title} image={image} url={url}>
|
<SkillCard title={title} image={image} url={url}>
|
||||||
<div className="description">
|
<div className="description">
|
||||||
{topLang1?.name} :- {topLang1?.percent}%
|
{topLang1?.name} :-
|
||||||
|
<div className="value">
|
||||||
|
{topLang1?.percent}%
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="description">
|
<div className="description">
|
||||||
{topLang2?.name} :- {topLang2?.percent}%
|
{topLang2?.name} :-
|
||||||
|
<div className="value">
|
||||||
|
{topLang2?.percent}%
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="description">
|
<div className="description">
|
||||||
{topLang3?.name} :- {topLang3?.percent}%
|
{topLang3?.name} :-
|
||||||
|
<div className="value">
|
||||||
|
{topLang3?.percent}%
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="description">
|
<div className="description">
|
||||||
{topLang4?.name} :- {topLang4?.percent}%
|
{topLang4?.name} :-
|
||||||
|
<div className="value">
|
||||||
|
{topLang4?.percent}%
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="description">
|
<div className="description">
|
||||||
{topLang5?.name} :- {topLang5?.percent}%
|
{topLang5?.name} :-
|
||||||
|
<div className="value">
|
||||||
|
{topLang5?.percent}%
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SkillCard>
|
</SkillCard>
|
||||||
);
|
);
|
||||||
|
|
|
@ -14,15 +14,29 @@ function WakatimeUserSkillCard({
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<SkillCard title={title} image={image} url={url}>
|
<SkillCard title={title} image={image} url={url}>
|
||||||
<div className="description">Total Code time :- {total_time}</div>
|
|
||||||
<div className="description">
|
<div className="description">
|
||||||
Average Daily Code time :- {average_weekly_time}
|
Total Code time :-
|
||||||
|
<div className="value">
|
||||||
|
{total_time}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="description">
|
<div className="description">
|
||||||
Total Weekly Code time :- {total_weekly_time}
|
Average Daily Code time :-
|
||||||
|
<div className="value">
|
||||||
|
{average_weekly_time}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="description">
|
<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>
|
</div>
|
||||||
</SkillCard>
|
</SkillCard>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,24 +1,21 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import SkillsStyle from "./skills.style";
|
import SkillsStyle from "./skills.style";
|
||||||
// import axios from "handlers/axios";
|
|
||||||
import { APISDK } from "handlers/sdk";
|
import { APISDK } from "handlers/sdk";
|
||||||
import Box from "@mui/material/Box";
|
import Box from "@mui/material/Box";
|
||||||
import LinearProgress from "@mui/material/LinearProgress";
|
import LinearProgress from "@mui/material/LinearProgress";
|
||||||
// import "mainboard.css";
|
|
||||||
// import Cursor, { mouseOverEvent, mouseOutEvent } from "./providers/cursor";
|
|
||||||
|
|
||||||
// Skill Card templates
|
// Skill Card templates
|
||||||
import GitHubSkillCard from "./skillComponents/github_user";
|
import GitHubSkillCard from "./skillComponents/github_user";
|
||||||
import OsuUserSkillCard from "./skillComponents/osu_user";
|
import OsuUserSkillCard from "./skillComponents/osu_user";
|
||||||
import TwitterUserSkillCard from "./skillComponents/twitter_user";
|
|
||||||
import SpotifyTopSkillCard from "./skillComponents/spotify_top_songs";
|
import SpotifyTopSkillCard from "./skillComponents/spotify_top_songs";
|
||||||
import WakatimeUserSkillCard from "./skillComponents/wakatime_user";
|
import WakatimeUserSkillCard from "./skillComponents/wakatime_user";
|
||||||
import HashNodeSkillCard from "./skillComponents/hashnode_inst";
|
import HashNodeSkillCard from "./skillComponents/hashnode_inst";
|
||||||
import OsuBestScoresSkillCard from "./skillComponents/osu_bestScores";
|
import OsuBestScoresSkillCard from "./skillComponents/osu_bestScores";
|
||||||
import TwitterTweetsSkillCard from "./skillComponents/twitter_tweets";
|
|
||||||
import WakatimeTopLangSkillCard from "./skillComponents/wakatime_lang";
|
import WakatimeTopLangSkillCard from "./skillComponents/wakatime_lang";
|
||||||
import LastFMCurrentSkillCard from "./skillComponents/lastfm_current";
|
import LastFMCurrentSkillCard from "./skillComponents/lastfm_current";
|
||||||
import GitHubUserEvtSkillCard from "./skillComponents/github_events";
|
import GitHubUserEvtSkillCard from "./skillComponents/github_events";
|
||||||
|
import HTBUserCard from "./skillComponents/htb_user";
|
||||||
|
import HTBActivityCard from "./skillComponents/htb_activity";
|
||||||
|
|
||||||
function Skills() {
|
function Skills() {
|
||||||
const [skills, setSkills] = useState({});
|
const [skills, setSkills] = useState({});
|
||||||
|
@ -36,6 +33,7 @@ function Skills() {
|
||||||
lastfm: "/images/brandlogos/Lastfm-icon-vector-03.svg",
|
lastfm: "/images/brandlogos/Lastfm-icon-vector-03.svg",
|
||||||
twitter:
|
twitter:
|
||||||
"https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png",
|
"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);
|
setSkills(APISDK.data);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
|
@ -68,7 +66,7 @@ function Skills() {
|
||||||
<SkillsStyle>
|
<SkillsStyle>
|
||||||
<div className="mainboard__container">
|
<div className="mainboard__container">
|
||||||
<GitHubSkillCard
|
<GitHubSkillCard
|
||||||
title={"GitHub Stats"}
|
title={"GitHub User Stats"}
|
||||||
url={"https://github.com/Bravo68web"}
|
url={"https://github.com/Bravo68web"}
|
||||||
image={skills?.logo?.github}
|
image={skills?.logo?.github}
|
||||||
public_repos={
|
public_repos={
|
||||||
|
@ -81,6 +79,12 @@ function Skills() {
|
||||||
}
|
}
|
||||||
created_at={skills?.gh_user?.data?.created_at}
|
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
|
<OsuUserSkillCard
|
||||||
title={"Osu! Player Stats"}
|
title={"Osu! Player Stats"}
|
||||||
url={"https://osu.ppy.sh/users/bravo68web"}
|
url={"https://osu.ppy.sh/users/bravo68web"}
|
||||||
|
@ -113,23 +117,19 @@ function Skills() {
|
||||||
?.total_score
|
?.total_score
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<TwitterUserSkillCard
|
<HTBUserCard
|
||||||
title={"Twitter Stats"}
|
title={"HTB User Stats"}
|
||||||
url={"https://twitter.com/Bravo68web"}
|
url={"https://app.hackthebox.com/profile/1367733"}
|
||||||
image={skills?.logo?.twitter}
|
image={skills?.logo?.htb}
|
||||||
followers_count={
|
rank={skills?.htb_profile?.data?.rank}
|
||||||
skills?.twitter_user?.public_metrics
|
points={skills?.htb_profile?.data?.points}
|
||||||
?.followers_count
|
rank_ownership={skills?.htb_profile?.data?.rank_ownership}
|
||||||
}
|
ranking={skills?.htb_profile?.data?.ranking}
|
||||||
friends_count={
|
respects={skills?.htb_profile?.data?.respects}
|
||||||
skills?.twitter_user?.public_metrics
|
system_owns={skills?.htb_profile?.data?.system_owns}
|
||||||
?.following_count
|
team={skills?.htb_profile?.data?.team}
|
||||||
}
|
user_owns={skills?.htb_profile?.data?.user_owns}
|
||||||
statuses_count={
|
joinedOn={"2023-10-12T08:49:15.000000Z"}
|
||||||
skills?.twitter_user?.public_metrics
|
|
||||||
?.tweet_count
|
|
||||||
}
|
|
||||||
created_at={skills?.twitter_user?.created_at}
|
|
||||||
/>
|
/>
|
||||||
<SpotifyTopSkillCard
|
<SpotifyTopSkillCard
|
||||||
title={"Spotify Top Songs"}
|
title={"Spotify Top Songs"}
|
||||||
|
@ -191,14 +191,14 @@ function Skills() {
|
||||||
bestScore2={skills?.osu_bestScores?.data?.[1]}
|
bestScore2={skills?.osu_bestScores?.data?.[1]}
|
||||||
bestScore3={skills?.osu_bestScores?.data?.[2]}
|
bestScore3={skills?.osu_bestScores?.data?.[2]}
|
||||||
/>
|
/>
|
||||||
<TwitterTweetsSkillCard
|
{/* <TwitterTweetsSkillCard
|
||||||
title={"Twitter Tweets"}
|
title={"Twitter Tweets"}
|
||||||
url={"https://twitter.com/Bravo68web"}
|
url={"https://twitter.com/Bravo68web"}
|
||||||
image={skills?.logo?.twitter}
|
image={skills?.logo?.twitter}
|
||||||
tweets1={skills?.twitter_tweets?.[0]}
|
tweets1={skills?.twitter_tweets?.[0]}
|
||||||
tweets2={skills?.twitter_tweets?.[1]}
|
tweets2={skills?.twitter_tweets?.[1]}
|
||||||
tweets3={skills?.twitter_tweets?.[2]}
|
tweets3={skills?.twitter_tweets?.[2]}
|
||||||
/>
|
/> */}
|
||||||
<WakatimeTopLangSkillCard
|
<WakatimeTopLangSkillCard
|
||||||
title={"Wakatime Top Languages"}
|
title={"Wakatime Top Languages"}
|
||||||
url={"https://wakatime.com/@bravo68web"}
|
url={"https://wakatime.com/@bravo68web"}
|
||||||
|
|
|
@ -5,13 +5,14 @@ export const linkedin_url = "https://linkedin.com/in/bravo68web";
|
||||||
export const mastodon_url = "https://fosstodon.org/@bravo68web/";
|
export const mastodon_url = "https://fosstodon.org/@bravo68web/";
|
||||||
export const email = "mailto:hi@b68.dev";
|
export const email = "mailto:hi@b68.dev";
|
||||||
export const instagram_url = "https://instagram.com/bravo68web";
|
export const instagram_url = "https://instagram.com/bravo68web";
|
||||||
|
export const hackthebox_url = "https://app.hackthebox.com/profile/1367733";
|
||||||
export const phone = "";
|
export const phone = "";
|
||||||
export const address = "";
|
export const address = "";
|
||||||
export const website = "https://b68.dev";
|
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 facebook_url = "https://www.facebook.com/Bravo68Web/";
|
||||||
export const discord_id = "457039372009865226";
|
export const discord_id = "457039372009865226";
|
||||||
export const avatar_id = "08a8937664b3b165805965244d6f095f";
|
export const avatar_id = "b9e91dcc8e658eb1ebf24299b7bec733";
|
||||||
export const discord_profile = "";
|
export const discord_profile = "";
|
||||||
export const job_exp_1 = {
|
export const job_exp_1 = {
|
||||||
name: "DF Tech Community",
|
name: "DF Tech Community",
|
||||||
|
|
|
@ -38,17 +38,17 @@ export const APISDK = {
|
||||||
name: "wakatime_lang",
|
name: "wakatime_lang",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
endpoint: "/me/hashnode/",
|
endpoint: "/me/hashnode",
|
||||||
name: "hn_user",
|
name: "hn_user",
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
endpoint: "/me/twitter/profile",
|
// endpoint: "/me/twitter/profile",
|
||||||
name: "twitter_user",
|
// name: "twitter_user",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
endpoint: "/me/twitter/tweets",
|
// endpoint: "/me/twitter/tweets",
|
||||||
name: "twitter_tweets",
|
// name: "twitter_tweets",
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
endpoint: "/me/lastfm/current",
|
endpoint: "/me/lastfm/current",
|
||||||
name: "lastfm_current",
|
name: "lastfm_current",
|
||||||
|
@ -58,16 +58,23 @@ export const APISDK = {
|
||||||
name: "gh_events",
|
name: "gh_events",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
endpoint: "/me/vscode/",
|
endpoint: "/me/vscode",
|
||||||
name: "vscode",
|
name: "vscode",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
endpoint: "/me/mastodon/statuses",
|
endpoint: "/me/mastodon/statuses",
|
||||||
name: "masto_status",
|
name: "masto_status",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
endpoint: "/me/hackthebox/profile",
|
||||||
|
name: "htb_profile",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
endpoint: "/me/hackthebox/activity",
|
||||||
|
name: "htb_activity",
|
||||||
|
}
|
||||||
],
|
],
|
||||||
this.data
|
this.data
|
||||||
);
|
);
|
||||||
// return tempEndpoint("https://api.github.com/users/bravo68web", this.data);
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -49,7 +49,7 @@ const useLastFM = () => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const interval = setInterval(() => {
|
const interval = setInterval(() => {
|
||||||
getStatus();
|
getStatus();
|
||||||
}, 3000);
|
}, 15000);
|
||||||
|
|
||||||
return () => clearInterval(interval);
|
return () => clearInterval(interval);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
export default function parse(data) {
|
export default function parse(data) {
|
||||||
const output = {};
|
const output = {
|
||||||
|
doing_nothing: false,
|
||||||
|
};
|
||||||
const act = [];
|
const act = [];
|
||||||
|
|
||||||
const PrirorityActivityType = [
|
const PrirorityActivityType = [
|
||||||
|
@ -27,6 +29,7 @@ export default function parse(data) {
|
||||||
"https://cdn.discordapp.com/avatar-decoration-presets/" +
|
"https://cdn.discordapp.com/avatar-decoration-presets/" +
|
||||||
data.discord_user.avatar_decoration +
|
data.discord_user.avatar_decoration +
|
||||||
".png",
|
".png",
|
||||||
|
discord_status: data.discord_status,
|
||||||
};
|
};
|
||||||
|
|
||||||
output.kv = data.kv;
|
output.kv = data.kv;
|
||||||
|
@ -93,6 +96,13 @@ export default function parse(data) {
|
||||||
|
|
||||||
act.sort((a, b) => a.prirority_id - b.prirority_id);
|
act.sort((a, b) => a.prirority_id - b.prirority_id);
|
||||||
|
|
||||||
|
if(act.length == 0) {
|
||||||
|
return {
|
||||||
|
...output,
|
||||||
|
doing_nothing: true,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
output.activity = act[0];
|
output.activity = act[0];
|
||||||
|
|
||||||
if (output.activity?.prirority_id == 1) {
|
if (output.activity?.prirority_id == 1) {
|
||||||
|
@ -109,15 +119,15 @@ export default function parse(data) {
|
||||||
output.activity.assets = {
|
output.activity.assets = {
|
||||||
large_image:
|
large_image:
|
||||||
"https://cdn.discordapp.com/app-assets/" +
|
"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",
|
".png",
|
||||||
small_image:
|
small_image:
|
||||||
"https://cdn.discordapp.com/app-assets/" +
|
"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",
|
".png",
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,7 +7,7 @@ const moduleExports = {
|
||||||
remotePatterns: [
|
remotePatterns: [
|
||||||
{
|
{
|
||||||
protocol: 'https',
|
protocol: 'https',
|
||||||
hostname: 'bravo68web.me',
|
hostname: 'itsmebravo.dev',
|
||||||
port: '',
|
port: '',
|
||||||
pathname: '/images/**/*.{jpg,jpeg,png,svg,gif,webp}',
|
pathname: '/images/**/*.{jpg,jpeg,png,svg,gif,webp}',
|
||||||
},
|
},
|
||||||
|
|
|
@ -33,7 +33,7 @@
|
||||||
"date-format-parse": "^0.2.7",
|
"date-format-parse": "^0.2.7",
|
||||||
"fs-extra": "^10.0.1",
|
"fs-extra": "^10.0.1",
|
||||||
"html-to-text": "^9.0.4",
|
"html-to-text": "^9.0.4",
|
||||||
"next": "^13.5.4",
|
"next": "^14.0.3",
|
||||||
"next-connect": "^0.12.2",
|
"next-connect": "^0.12.2",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
|
@ -43,7 +43,7 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"eslint": "^7.32.0",
|
"eslint": "^7.32.0",
|
||||||
"eslint-config-next": "^13.1.1",
|
"eslint-config-next": "^14.0.3",
|
||||||
"prettier": "^2.6.2"
|
"prettier": "^2.6.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import Document, { Html, Head, Main, NextScript } from "next/document";
|
import Document, { Html, Head, Main, NextScript } from "next/document";
|
||||||
import { ServerStyleSheet } from "styled-components";
|
import { ServerStyleSheet } from "styled-components";
|
||||||
import Nav from "../components/nav";
|
|
||||||
|
|
||||||
export default class MyDocument extends Document {
|
export default class MyDocument extends Document {
|
||||||
static async getInitialProps(ctx) {
|
static async getInitialProps(ctx) {
|
||||||
|
|
|
@ -1,7 +0,0 @@
|
||||||
import axios from "axios";
|
|
||||||
|
|
||||||
const handler = async (req, res) => {
|
|
||||||
res.status(200).json({ name: "John Doe" });
|
|
||||||
};
|
|
||||||
|
|
||||||
export default handler;
|
|
|
@ -1,7 +1,12 @@
|
||||||
import Head from "next/head";
|
import Head from "next/head";
|
||||||
import Nav from "components/nav";
|
import Nav from "components/nav";
|
||||||
import Skills from "components/skills";
|
// import Skills from "components/skills";
|
||||||
import Footer from "components/footer";
|
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() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
|
@ -17,13 +22,4 @@ export default function Home() {
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// export const getServerSideProps = async () => {
|
|
||||||
|
|
||||||
// throw new Error("Internal server error")
|
|
||||||
|
|
||||||
// return {
|
|
||||||
// props:[]
|
|
||||||
// }
|
|
||||||
// }
|
|
7621
pnpm-lock.yaml
7621
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Binary file not shown.
After Width: | Height: | Size: 782 KiB |
Loading…
Reference in New Issue