bravo68web
/
bravo68web-portfolio-nextjs
mirror of https://github.com/BRAVO68WEB/bravo68web-portfolio-nextjs.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

Added LastFM support, Wakatime Tracker, Hashnode Tracker, Osu support enhanced and more fixes

This commit is contained in:
Jyotirmoy Bandyopadhayaya 2022-04-09 13:28:53 +05:30
parent af88945f59
commit 45fa8ce158
22 changed files with 568 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
components/discord-activity.jsx
View File

@ -64,7 +64,7 @@ export default function DiscordActivity() {
status.activities.length
) {
if (status.activities[0].id === "custom" && status.activities.length == 1) {
console.log(status.activities.length);
console.log("Hmmm Recv 1");
return (
<DicordActivityStyle>
<div className="discord-icons">
@ -102,8 +102,9 @@ export default function DiscordActivity() {
</DicordActivityStyle>
);
} else {
// console.log("Hmmm Recv");
console.log("Hmmm Recv 2");
if (status.activities[1]?.name === "Spotify") {
console.log("Hmmm Recv 3");
return (
<DicordActivityStyle>
{!loading && (
@ -143,7 +144,64 @@ export default function DiscordActivity() {
)}
</DicordActivityStyle>
);
} else {
}
// else if (status.activities[0]) {
// return (
// <DicordActivityStyle>
// {!loading && (
// <>
// <div className="discord-icons">
// <div className="discord-large-icon">
// {status.activities[0] && (
// <img
// src={
// baseURL +
// status.activities[0].application_id +
// "/" +
// status.activities[0].assets.large_image +
// ".png"
// }
// />
// )}
// </div>
// <div className="discord-small-icon">
// {status.activities[0] && (
// <img
// src={
// baseURL +
// status.activities[0].application_id +
// "/" +
// status.activities[0].assets.small_image +
// ".png"
// }
// />
// )}
// </div>
// </div>
// <div className="discord-messageBox">
// <div className="discord-message-application">
// <b>{status.activities[0].name}</b>
// </div>
// <div className="discord-message-activity">
// {status.activities[0].details}
// </div>
// <div className="discord-message-files">
// {status.activities[0].state
// ? status.activities[0].state
// : null}
// </div>
// <br />
// <div className="time-elapsed">
// {status?.activities[0]?.timestamps?.start && time}
// </div>
// </div>
// </>
// )}
// </DicordActivityStyle>
// );
// }
else {
console.log("Hmmm Recv 4");
return (
<DicordActivityStyle>
{!loading && (
@ -206,6 +264,7 @@ export default function DiscordActivity() {
status.discord_status === "idle" ||
status.discord_status === "dnd")
) {
console.log("Hmmm Recv 5");
return (
<DicordActivityStyle>
<div className="discord-icons">
@ -244,7 +303,8 @@ export default function DiscordActivity() {
</DicordActivityStyle>
);
} else {
// console.log(restData);
console.log("Hmmm Recv 6");
// console.log(status);
var restData = {
username: "Bravo68-DF_Techs",
public_flags: 64,

4
components/nav.jsx
View File

@ -10,8 +10,8 @@ import { discord_id } from "config";
const LINKS = [
{
title: "Skills",
href: "/skills",
title: "Stats",
href: "/stats",
},
{
title: "Resume",

12
components/skillCard.jsx
View File

@ -1,15 +1,17 @@
import React from "react";
import SkillCardStyle from "./skillCard.styled";
function SkillCard({ title, children, image, bannerImage }) {
console.log(image);
function SkillCard({ title, children, image, bannerImage, url }) {
// console.log(image);
return (
<SkillCardStyle>
<div className="card">
{image && (
<div className="card-logo">
<img src={image} height="30" />
</div>
<a href={url}>
<div className="card-logo">
<img src={image} height="30" />
</div>
</a>
)}
<div className="title">{title}</div>

18
components/skillCard.styled.js
View File

@ -61,4 +61,22 @@ export default styled.div`
color: var(--color3);
}
}
.bestScores__score__info__score__value {
display: flex;
flex-grow: 1;
}
.bestScores__score__info__name__artist {
font-size: 1rem;
color: var(--color4);
}
.bestScores__score__info__name__title {
font-size: 0.9rem;
color: var(--color3);
}
.skill-card-content {
/* background-color: var(--color7); */
}
.skill-card-content-inner {
color: var(--color4);
}
`;

4
components/skillComponents/github_trophy.jsx
View File

@ -2,9 +2,9 @@ import React from "react";
import SkillCard from "../skillCard";
import SkillCardStyle from "../skillCard.styled";
function GitHubThySkillCard({ title, image, bannerImage }) {
function GitHubThySkillCard({ title, image, bannerImage, url }) {
return (
<SkillCard title={title} image={image}>
<SkillCard title={title} image={image} url={url}>
<br />
<div className="description">
<img src={bannerImage} alt="" />

3
components/skillComponents/github_user.jsx
View File

@ -11,9 +11,10 @@ function GitHubSkillCard({
following,
public_repos,
created_at,
url,
}) {
return (
<SkillCard title={title} image={image}>
<SkillCard title={title} image={image} url={url}>
<div className="description">Repos :- {public_repos}</div>
<div className="description">Followers :- {followers}</div>
<div className="description">Following :- {following}</div>

31
components/skillComponents/hashnode_inst.jsx Normal file
View File

@ -0,0 +1,31 @@
import React from "react";
import SkillCard from "../skillCard";
import SkillCardStyle from "../skillCard.styled";
import { format, parse } from "date-format-parse";
function HashNodeSkillCard({
title,
image,
joinOn,
numPosts,
numFollowers,
publicationDomain,
numReactions,
url,
}) {
return (
<SkillCard title={title} image={image} url={url}>
<div className="description">
Joined on: {format(joinOn, "DD MMM YYYY")}
</div>
<div className="description"> Total Posts : {numPosts}</div>
<div className="description"> Total Followers : {numFollowers}</div>
{/* <div className="description">
Publication Domain : {publicationDomain}
</div> */}
<div className="description"> Total Reactions : {numReactions}</div>
</SkillCard>
);
}
export default HashNodeSkillCard;

28
components/skillComponents/lastfm_current.jsx Normal file
View File

@ -0,0 +1,28 @@
import React from "react";
import SkillCard from "../skillCard";
import SkillCardStyle from "../skillCard.styled";
import { format, parse } from "date-format-parse";
function LastFMCurrentSkillCard({
title,
image,
empty,
artist,
albumImg,
name,
url,
}) {
console.log(empty);
return (
<SkillCard title={title} image={image} url={url}>
<div className="description">
{empty ? "No recent tracks" : `${artist} - ${name}`}
</div>
<div className="description">
{empty ? "" : <img src={albumImg} alt={`${artist} - ${name}`} />}
</div>
</SkillCard>
);
}
export default LastFMCurrentSkillCard;

136
components/skillComponents/osu_bestScores.jsx
View File

@ -0,0 +1,136 @@
import React from "react";
import SkillCard from "../skillCard";
import SkillCardStyle from "../skillCard.styled";
function OsuBestScoresSkillCard({
title,
image,
bestScore1,
bestScore2,
bestScore3,
bestScore4,
bestScore5,
url,
}) {
return (
<SkillCard title={title} image={image} url={url}>
<div className="bestScores">
<div className="bestScores__score">
<div className="bestScores__score__image">
<a href={bestScore1?.beatmap.url}>
<img
src={bestScore1?.beatmapset?.covers.cover}
alt={bestScore1?.beatmapset?.title}
width="120px"
/>
</a>
</div>
<div className="bestScores__score__info">
<div className="bestScores__score__info__name">
<div className="bestScores__score__info__name__title">
{bestScore1?.beatmapset?.title}
</div>
<div className="bestScores__score__info__name__artist">
{bestScore1?.beatmapset?.artist}
</div>
</div>
<div className="bestScores__score__info__score">
Star/Combos/PP
<div className="bestScores__score__info__score__value">
<div className="bestScores__score__info__name__artist">
{bestScore1?.beatmap?.difficulty_rating + " "}
</div>
/
<div className="bestScores__score__info__name__artist">
{bestScore1?.max_combo}
</div>
/
<div className="bestScores__score__info__name__artist">
{Math.round(bestScore1?.pp)}
</div>
</div>
</div>
</div>
</div>
<br />
<div className="bestScores__score">
<div className="bestScores__score__image">
<a href={bestScore2?.beatmap.url}>
<img
src={bestScore2?.beatmapset?.covers.cover}
alt={bestScore2?.beatmapset?.title}
width="120px"
/>
</a>
</div>
<div className="bestScores__score__info">
<div className="bestScores__score__info__name">
<div className="bestScores__score__info__name__title">
{bestScore2?.beatmapset?.title}
</div>
<div className="bestScores__score__info__name__artist">
{bestScore2?.beatmapset?.artist}
</div>
</div>
<div className="bestScores__score__info__score">
Star/Combos/PP
<div className="bestScores__score__info__score__value">
<div className="bestScores__score__info__name__artist">
{bestScore2?.beatmap?.difficulty_rating + " "}
</div>
/
<div className="bestScores__score__info__name__artist">
{bestScore2?.max_combo}
</div>
/
<div className="bestScores__score__info__name__artist">
{Math.round(bestScore2?.pp)}
</div>
</div>
</div>
</div>
</div>
<br />
<div className="bestScores__score">
<div className="bestScores__score__image">
<a href={bestScore3?.beatmap.url}>
<img
src={bestScore3?.beatmapset?.covers.cover}
alt={bestScore3?.beatmapset?.title}
width="120px"
/>
</a>
</div>
<div className="bestScores__score__info">
<div className="bestScores__score__info__name">
<div className="bestScores__score__info__name__title">
{bestScore3?.beatmapset?.title}
</div>
<div className="bestScores__score__info__name__artist">
{bestScore3?.beatmapset?.artist}
</div>
</div>
<div className="bestScores__score__info__score">
Star/Combos/PP
<div className="bestScores__score__info__score__value">
<div className="bestScores__score__info__name__artist">
{bestScore3?.beatmap?.difficulty_rating + " "}
</div>
/
<div className="bestScores__score__info__name__artist">
{bestScore3?.max_combo}
</div>
/
<div className="bestScores__score__info__name__artist">
{Math.round(bestScore3?.pp)}
</div>
</div>
</div>
</div>
</div>
</div>
</SkillCard>
);
}
export default OsuBestScoresSkillCard;

15
components/skillComponents/osu_user.jsx
View File

@ -11,17 +11,24 @@ function OsuUserSkillCard({
pp_raw,
country,
pp_rank,
countryRank,
// countryRank,
join_date,
maximum_combo,
total_score,
url,
}) {
return (
<SkillCard title={title} image={image}>
<div className="description">Accuracy :- {Math.floor(accuracy)}</div>
<SkillCard title={title} image={image} url={url}>
<div className="description">Accuracy :- {Math.floor(accuracy)} %</div>
<div className="description">Level :- {Math.floor(level)}</div>
<div className="description">PP :- {Math.floor(pp_raw)}</div>
<div className="description">Country :- {country}</div>
<div className="description">Country Rank :- #{countryRank}</div>
{/* <div className="description">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 className="description">
Joined on : {format(join_date, "DD MMM YYYY")}
</div>

3
components/skillComponents/spotify_top_songs.jsx
View File

@ -11,9 +11,10 @@ function SpotifyTopSkillCard({
topSongs3,
topSongs4,
topSongs5,
url,
}) {
return (
<SkillCard title={title} image={image}>
<SkillCard title={title} image={image} url={url}>
<div className="topSongs">
<div className="topSongs__song">
<div className="topSongs__song__image">

43
components/skillComponents/twitter_tweets.jsx
View File

@ -0,0 +1,43 @@
import React from "react";
import SkillCard from "../skillCard";
import SkillCardStyle from "../skillCard.styled";
import { format } from "date-format-parse";
function TwitterTweetsSkillCard({
title,
image,
tweets1,
tweets2,
tweets3,
url,
}) {
return (
<SkillCard title={title} image={image} url={url}>
<div className="skill-card-content">
<div className="skill-card-content-inner">
<a href={"https://twitter.com/Bravo68web/status/" + tweets1.id}>
{tweets1.text}
</a>
</div>
</div>
<br />
<div className="skill-card-content">
<div className="skill-card-content-inner">
<a href={"https://twitter.com/Bravo68web/status/" + tweets2.id}>
{tweets2.text}
</a>
</div>
</div>
<br />
<div className="skill-card-content">
<div className="skill-card-content-inner">
<a href={"https://twitter.com/Bravo68web/status/" + tweets3.id}>
{tweets3.text}
</a>
</div>
</div>
</SkillCard>
);
}
export default TwitterTweetsSkillCard;

3
components/skillComponents/twitter_user.jsx
View File

@ -11,9 +11,10 @@ function TwitterUserSkillCard({
statuses_count,
favourites_count,
created_at,
url,
}) {
return (
<SkillCard title={title} image={image}>
<SkillCard title={title} image={image} url={url}>
<div className="description">Followers :- {followers_count}</div>
<div className="description">Following :- {friends_count}</div>
<div className="description">

37
components/skillComponents/wakatime_lang.jsx Normal file
View File

@ -0,0 +1,37 @@
import React from "react";
import SkillCard from "../skillCard";
import SkillCardStyle from "../skillCard.styled";
import { format, parse } from "date-format-parse";
function WakatimeTopLangSkillCard({
title,
image,
topLang1,
topLang2,
topLang3,
topLang4,
topLang5,
url,
}) {
return (
<SkillCard title={title} image={image} url={url}>
<div className="description">
{topLang1.name} :- {topLang1.percent}
</div>
<div className="description">
{topLang2.name} :- {topLang2.percent}
</div>
<div className="description">
{topLang3.name} :- {topLang3.percent}
</div>
<div className="description">
{topLang4.name} :- {topLang4.percent}
</div>
<div className="description">
{topLang5.name} :- {topLang5.percent}
</div>
</SkillCard>
);
}
export default WakatimeTopLangSkillCard;

31
components/skillComponents/wakatime_user.jsx
View File

@ -0,0 +1,31 @@
import React from "react";
import SkillCard from "../skillCard";
import SkillCardStyle from "../skillCard.styled";
import { format, parse } from "date-format-parse";
function WakatimeUserSkillCard({
title,
image,
total_time,
average_weekly_time,
total_weekly_time,
joinedOn,
url,
}) {
return (
<SkillCard title={title} image={image} url={url}>
<div className="description">Total Code time :- {total_time}</div>
<div className="description">
Average Weekly Code time :- {average_weekly_time}
</div>
<div className="description">
Total Weekly Code time :- {total_weekly_time}
</div>
<div className="description">
Joined on :- {format(joinedOn, "DD MMM YYYY")}
</div>
</SkillCard>
);
}
export default WakatimeUserSkillCard;

115
components/skills.jsx
View File

@ -13,6 +13,12 @@ import OsuUserSkillCard from "./skillComponents/osu_user";
import TwitterUserSkillCard from "./skillComponents/twitter_user";
import GitHubThySkillCard from "./skillComponents/github_trophy";
import SpotifyTopSkillCard from "./skillComponents/spotify_top_songs";
import WakatimeUserSkillCard from "./skillComponents/wakatime_user";
import HashNodeSkillCard from "./skillComponents/hashnode_inst";
import OsuBestScoresSkillCard from "./skillComponents/osu_bestScores";
import TwitterTweetsSkillCard from "./skillComponents/twitter_tweets";
import WakatimeTopLangSkillCard from "./skillComponents/wakatime_lang";
import LastFMCurrentSkillCard from "./skillComponents/lastfm_current";
function Skills() {
const [skills, setSkills] = useState({});
@ -28,6 +34,7 @@ function Skills() {
hashnode: `https://cdn.hashnode.com/res/hashnode/image/upload/v1611902473383/CDyAuTy75.png?auto=compress`,
discord: `https://www.freepnglogos.com/uploads/discord-logo-png/anthrocon-twitter-quot-discord-user-wanna-21.png`,
wakatime: `https://brandeps.com/logo-download/W/WakaTime-logo-vector-01.svg`,
lastfm: "https://brandeps.com/icon-download/L/Lastfm-icon-vector-03.svg",
twitter:
"https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png",
};
@ -48,6 +55,11 @@ function Skills() {
</SkillsStyle>
);
} else {
var lastFMempty = true;
if (skills?.lastfm_current.data.recenttracks.track.length > 0) {
lastFMempty = false;
}
return (
<div>
{!loading && (
@ -55,6 +67,7 @@ function Skills() {
<div className="mainboard__container">
<GitHubSkillCard
title={"GitHub Stats"}
url={"https://github.com/Bravo68web"}
image={skills?.logo?.github}
public_repos={skills?.gh_user?.data?.public_repos}
followers={skills?.gh_user?.data?.followers}
@ -64,17 +77,31 @@ function Skills() {
/>
<OsuUserSkillCard
title={"Osu! Player Stats"}
url={"https://osu.ppy.sh/users/bravo68web"}
image={skills?.logo?.osu}
accuracy={skills?.osu_user?.data[0]?.accuracy}
level={skills?.osu_user?.data[0]?.level}
pp_raw={skills?.osu_user?.data[0]?.pp_raw}
country={skills?.osu_user?.data[0]?.country}
pp_rank={skills?.osu_user?.data[0]?.pp_rank}
countryRank={skills?.osu_user?.data[0]?.pp_country_rank}
join_date={skills?.osu_user?.data[0]?.join_date}
accuracy={
skills?.osu_user?.data.statistics_rulesets.osu.hit_accuracy
}
level={
skills?.osu_user?.data.statistics_rulesets.osu.level.current
}
pp_raw={skills?.osu_user?.data.statistics_rulesets.osu.pp}
country={skills?.osu_user?.data.country.code}
pp_rank={
skills?.osu_user?.data.statistics_rulesets.osu.global_rank
}
// countryRank={skills?.osu_user?.data.statistics_rulesets.osu}
maximum_combo={
skills?.osu_user?.data.statistics_rulesets.osu.maximum_combo
}
join_date={"2019-09-21 19:33:44"}
total_score={
skills?.osu_user?.data.statistics_rulesets.osu.total_score
}
/>
<TwitterUserSkillCard
title={"Twitter Stats"}
url={"https://twitter.com/Bravo68web"}
image={skills?.logo?.twitter}
followers_count={skills?.twitter_user?.data?.followers_count}
friends_count={skills?.twitter_user?.data?.friends_count}
@ -90,6 +117,9 @@ function Skills() {
/> */}
<SpotifyTopSkillCard
title={"Spotify Top Songs"}
url={
"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]}
@ -97,6 +127,77 @@ function Skills() {
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_user?.data?.data}
average_weekly_time={skills?.wakatime_stats?.data?.avg}
total_weekly_time={skills?.wakatime_stats?.data?.main}
joinedOn={"2020-09-14"}
/>
<HashNodeSkillCard
title={"HashNode Stats"}
url={"https://blog.bravo68web.me/"}
image={skills?.logo?.hashnode}
joinOn={"2021-06-18"}
numPosts={skills?.hn_user?.data?.numPosts}
numFollowers={skills?.hn_user?.data?.numFollowers}
// publicationDomain={skills?.hn_user?.data?.publicationDomain}
numReactions={skills?.hn_user?.data?.numReactions}
/>
<OsuBestScoresSkillCard
title={"Osu! Best Scores"}
image={skills?.logo?.osu}
url={"https://osu.ppy.sh/users/bravo68web"}
bestScore1={skills?.osu_bestScores?.data[0]}
bestScore2={skills?.osu_bestScores?.data[1]}
bestScore3={skills?.osu_bestScores?.data[2]}
bestScore4={skills?.osu_bestScores?.data[3]}
bestScore5={skills?.osu_bestScores?.data[4]}
/>
<TwitterTweetsSkillCard
title={"Twitter Tweets"}
url={"https://twitter.com/Bravo68web"}
image={skills?.logo?.twitter}
tweets1={skills?.twitter_tweets?.data.data[0]}
tweets2={skills?.twitter_tweets?.data.data[1]}
tweets3={skills?.twitter_tweets?.data.data[2]}
/>
<WakatimeTopLangSkillCard
title={"Wakatime Top Languages"}
url={"https://wakatime.com/@bravo68web"}
image={skills?.logo?.wakatime}
topLang1={skills?.wakatime_lang?.data[0]}
topLang2={skills?.wakatime_lang?.data[1]}
topLang3={skills?.wakatime_lang?.data[2]}
topLang4={skills?.wakatime_lang?.data[3]}
topLang5={skills?.wakatime_lang?.data[4]}
/>
<LastFMCurrentSkillCard
title={"LastFM Current Tracks"}
url={"https://last.fm/user/bravo68web"}
image={skills?.logo?.lastfm}
empty={lastFMempty}
artist={
skills?.lastfm_current?.data?.recenttracks.track[0]?.artist[
"#text"
]
}
name={skills?.lastfm_current?.data?.recenttracks.track[0].name}
album={
skills?.lastfm_current?.data?.recenttracks.track[0]?.album[
"#text"
]
}
albumImg={
skills?.lastfm_current?.data?.recenttracks.track[0].image[1][
"#text"
]
}
// currentTrack1={skills?.lastfm_current
/>
</div>
</SkillsStyle>
)}

1
handlers/axios.js
View File

@ -2,4 +2,5 @@ import axios from "axios";
export default axios.create({
baseURL: "https://api.b68dev.xyz",
// baseURL: "http://localhost:9000",
});

2
handlers/requester.js
View File

@ -21,7 +21,7 @@ export const requester = async (configs, data) => {
let requests = [];
for (let i = 0; i < configs.length; i++) {
const { endpoint, name } = configs[i];
console.log(endpoint, name);
// console.log(endpoint, name);
data[name] = {};
let request = axios
.get(endpoint)

38
handlers/sdk.js
View File

@ -25,33 +25,37 @@ export const APISDK = {
name: "discord_activity",
},
{
endpoint: "/me/osu/recent",
endpoint: "/me/osu/v1/recent",
name: "osu_recent",
},
{
endpoint: "/me/osu/user",
endpoint: "/me/osu/v2/user",
name: "osu_user",
},
{
endpoint: "/me/osu/bestScores",
endpoint: "/me/osu/v2/bestScores",
name: "osu_bestScores",
},
{
endpoint: "/me/spotify/myTopSongs",
name: "spotify_top_songs",
},
// {
// endpoint: "/me/wakatime/me",
// name: "wakatime_user",
// },
// {
// endpoint: "/me/wakatime/stats",
// name: "wakatime_stats",
// },
// {
// endpoint: "/me/hashnode/me",
// name: "hn_user",
// },
{
endpoint: "/me/wakatime/codeTimeAllTime",
name: "wakatime_user",
},
{
endpoint: "/me/wakatime/codeStatsLast7Days",
name: "wakatime_stats",
},
{
endpoint: "/me/wakatime/LanguageUsageInLast7Days",
name: "wakatime_lang",
},
{
endpoint: "/me/hashnode/me/all",
name: "hn_user",
},
{
endpoint: "/me/twitter/me",
name: "twitter_user",
@ -60,6 +64,10 @@ export const APISDK = {
endpoint: "/me/twitter/recentTweets",
name: "twitter_tweets",
},
{
endpoint: "/me/lastfm/current",
name: "lastfm_current",
},
],
this.data
);

12
pages/api/index.js
View File

@ -0,0 +1,12 @@
import axios from "axios";
export default function handler(req, res) {
const config = {
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
url: "https://api.github.com/users/joshuacarr",
};
res.status(200).json({ name: "John Doe" });
}

0
pages/skills.js → pages/stats.js
View File

8
styles/globals.css
View File

@ -6,6 +6,12 @@
--color2: #3d087b;
--color3: #f43b86;
--color4: #ffe459;
--color5: #16b2fa;
--color6: #0ff558;
--color7: #f4f4f4;
--color8: #f58a0f;
--color9: #f5a80f;
--color10: #0ffaac;
--font: "Source Code Pro", monospace;
}
* {
@ -23,7 +29,7 @@ body {
height: 100vh;
width: 100vw;
/* color:var(--color3) */
color: #fff;
color: var(--color7);
}
a {
color: inherit;