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

patch: Minor additions + fixes

This commit is contained in:
Jyotirmoy Bandyopadhayaya 2023-06-12 13:33:13 +05:30
parent 3cfd002c42
commit 451094dbda
Signed by: bravo68web
GPG Key ID: F5671FD7BCB9917A
92 changed files with 9202 additions and 8921 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.json
View File

@ -1,3 +1,3 @@
{
"extends": ["next/core-web-vitals"]
"extends": ["next/core-web-vitals"]
}

92
.github/workflows/codeql-analysis.yml vendored
View File

@ -12,59 +12,59 @@
name: "CodeQL"
on:
push:
branches: [main]
pull_request:
# The branches below must be a subset of the branches above
branches: [main]
schedule:
- cron: "15 19 * * 5"
push:
branches: [main]
pull_request:
# The branches below must be a subset of the branches above
branches: [main]
schedule:
- cron: "15 19 * * 5"
jobs:
analyze:
name: Analyze
runs-on: ubuntu-latest
permissions:
actions: read
contents: read
security-events: write
analyze:
name: Analyze
runs-on: ubuntu-latest
permissions:
actions: read
contents: read
security-events: write
strategy:
fail-fast: false
matrix:
language: ["javascript"]
# CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
# Learn more about CodeQL language support at https://git.io/codeql-language-support
strategy:
fail-fast: false
matrix:
language: ["javascript"]
# CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
# Learn more about CodeQL language support at https://git.io/codeql-language-support
steps:
- name: Checkout repository
uses: actions/checkout@v3
steps:
- name: Checkout repository
uses: actions/checkout@v3
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@v2
with:
languages: ${{ matrix.language }}
# If you wish to specify custom queries, you can do so here or in a config file.
# By default, queries listed here will override any specified in a config file.
# Prefix the list here with "+" to use these queries and those in the config file.
# queries: ./path/to/local/query, your-org/your-repo/queries@main
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@v2
with:
languages: ${{ matrix.language }}
# If you wish to specify custom queries, you can do so here or in a config file.
# By default, queries listed here will override any specified in a config file.
# Prefix the list here with "+" to use these queries and those in the config file.
# queries: ./path/to/local/query, your-org/your-repo/queries@main
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
# If this step fails, then you should remove it and run the build manually (see below)
- name: Autobuild
uses: github/codeql-action/autobuild@v2
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
# If this step fails, then you should remove it and run the build manually (see below)
- name: Autobuild
uses: github/codeql-action/autobuild@v2
# ℹ️ Command-line programs to run using the OS shell.
# 📚 https://git.io/JvXDl
# ℹ️ Command-line programs to run using the OS shell.
# 📚 https://git.io/JvXDl
# ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
# and modify them (or add more) to build your code if your project
# uses a compiled language
# ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
# and modify them (or add more) to build your code if your project
# uses a compiled language
#- run: |
# make bootstrap
# make release
#- run: |
# make bootstrap
# make release
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v2
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v2

156
.github/workflows/gh-pages.yml vendored
View File

@ -5,91 +5,91 @@
name: Deploy Next.js site to Pages
on:
# Runs on pushes targeting the default branch
push:
branches: ["main"]
# Runs on pushes targeting the default branch
push:
branches: ["main"]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
contents: read
pages: write
id-token: write
# Allow one concurrent deployment
concurrency:
group: "pages"
cancel-in-progress: true
group: "pages"
cancel-in-progress: true
jobs:
# Build job
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Detect package manager
id: detect-package-manager
run: |
if [ -f "${{ github.workspace }}/yarn.lock" ]; then
echo "::set-output name=manager::yarn"
echo "::set-output name=command::install"
echo "::set-output name=runner::yarn"
exit 0
elif [ -f "${{ github.workspace }}/package.json" ]; then
echo "::set-output name=manager::npm"
echo "::set-output name=command::ci"
echo "::set-output name=runner::npx --no-install"
exit 0
else
echo "Unable to determine packager manager"
exit 1
fi
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: "16"
cache: ${{ steps.detect-package-manager.outputs.manager }}
- name: Setup Pages
id: pages
uses: actions/configure-pages@v1
with:
# Automatically inject basePath in your Next.js configuration file and disable
# server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
#
# You may remove this line if you want to manage the configuration yourself.
static_site_generator: next
- name: Restore cache
uses: actions/cache@v3
with:
path: |
.next/cache
# Generate a new cache whenever packages or source files change.
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
# If source files changed but packages didn't, rebuild from a prior cache.
restore-keys: |
${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
- name: Install dependencies
run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
- name: Build with Next.js
run: ${{ steps.detect-package-manager.outputs.runner }} next build
- name: Static HTML export with Next.js
run: ${{ steps.detect-package-manager.outputs.runner }} next export
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
path: ./out
# Build job
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Detect package manager
id: detect-package-manager
run: |
if [ -f "${{ github.workspace }}/yarn.lock" ]; then
echo "::set-output name=manager::yarn"
echo "::set-output name=command::install"
echo "::set-output name=runner::yarn"
exit 0
elif [ -f "${{ github.workspace }}/package.json" ]; then
echo "::set-output name=manager::npm"
echo "::set-output name=command::ci"
echo "::set-output name=runner::npx --no-install"
exit 0
else
echo "Unable to determine packager manager"
exit 1
fi
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: "16"
cache: ${{ steps.detect-package-manager.outputs.manager }}
- name: Setup Pages
id: pages
uses: actions/configure-pages@v1
with:
# Automatically inject basePath in your Next.js configuration file and disable
# server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
#
# You may remove this line if you want to manage the configuration yourself.
static_site_generator: next
- name: Restore cache
uses: actions/cache@v3
with:
path: |
.next/cache
# Generate a new cache whenever packages or source files change.
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
# If source files changed but packages didn't, rebuild from a prior cache.
restore-keys: |
${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
- name: Install dependencies
run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
- name: Build with Next.js
run: ${{ steps.detect-package-manager.outputs.runner }} next build
- name: Static HTML export with Next.js
run: ${{ steps.detect-package-manager.outputs.runner }} next export
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
path: ./out
# Deployment job
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1
# Deployment job
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1

6
.prettierrc Normal file
View File

@ -0,0 +1,6 @@
{
"tabWidth": 4,
"arrowParens": "always",
"semi": true,
"useTabs": true
}

4
.vscode/settings.json vendored
View File

@ -1,3 +1,3 @@
{
"discord.enabled": true
}
"discord.enabled": true
}

22
README.md
View File

@ -26,13 +26,13 @@ This Repo cotains source code for my developer portfolio at https://itsmebravo.d
#### Features :-
- Discord Integration
- Online Status Checker
- Resume Embed
- Custom User Stats representations
- Art and Project Showcase
- Custom Error page (including 404 and 500 response error)
- More to be added soon ...
- Discord Integration
- Online Status Checker
- Resume Embed
- Custom User Stats representations
- Art and Project Showcase
- Custom Error page (including 404 and 500 response error)
- More to be added soon ...
#### Technologies Used:-
@ -44,10 +44,10 @@ This Repo cotains source code for my developer portfolio at https://itsmebravo.d
**BRAVO68WEB**
- Website: https://itsmebravo.dev
- Twitter: [@BRAVO68WEB](https://twitter.com/BRAVO68WEB)
- GitHub: [@BRAVO68WEB](https://github.com/BRAVO68WEB)
- LinkedIn: [@BRAVO68WEB](https://linkedin.com/in/BRAVO68WEB)
- Website: https://itsmebravo.dev
- Twitter: [@BRAVO68WEB](https://twitter.com/BRAVO68WEB)
- GitHub: [@BRAVO68WEB](https://github.com/BRAVO68WEB)
- LinkedIn: [@BRAVO68WEB](https://linkedin.com/in/BRAVO68WEB)
<br>

20
components/404Page.jsx
View File

@ -2,16 +2,16 @@ import { Page404Style } from "./404Page.style";
import Link from "next/link";
function Page404() {
return (
<Page404Style>
<div>
404 !!
<div className="backtohome">
<Link href="/">Back to Home</Link>
</div>
</div>
</Page404Style>
);
return (
<Page404Style>
<div>
404 !!
<div className="backtohome">
<Link href="/">Back to Home</Link>
</div>
</div>
</Page404Style>
);
}
export default Page404;

172
components/404Page.style.jsx
View File

@ -1,98 +1,98 @@
import styled from "styled-components";
export const Page404Style = styled.div`
@import url("https://fonts.googleapis.com/css?family=Fira+Mono:400");
@import url("https://fonts.googleapis.com/css?family=Fira+Mono:400");
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
margin: 0;
background: #131313;
color: #fff;
font-size: 96px;
font-family: "Fira Mono", monospace;
letter-spacing: -7px;
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
margin: 0;
background: #131313;
color: #fff;
font-size: 96px;
font-family: "Fira Mono", monospace;
letter-spacing: -7px;
div {
animation: glitch 1s linear infinite;
}
div {
animation: glitch 1s linear infinite;
}
@keyframes glitch {
2%,
64% {
transform: translate(2px, 0) skew(0deg);
}
4%,
60% {
transform: translate(-2px, 0) skew(0deg);
}
62% {
transform: translate(0, 0) skew(5deg);
}
}
@keyframes glitch {
2%,
64% {
transform: translate(2px, 0) skew(0deg);
}
4%,
60% {
transform: translate(-2px, 0) skew(0deg);
}
62% {
transform: translate(0, 0) skew(5deg);
}
}
div:before,
div:after {
content: attr(title);
position: absolute;
left: 0;
}
div:before,
div:after {
content: attr(title);
position: absolute;
left: 0;
}
div:before {
animation: glitchTop 1s linear infinite;
clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}
div:before {
animation: glitchTop 1s linear infinite;
clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}
@keyframes glitchTop {
2%,
64% {
transform: translate(2px, -2px);
}
4%,
60% {
transform: translate(-2px, 2px);
}
62% {
transform: translate(13px, -1px) skew(-13deg);
}
}
@keyframes glitchTop {
2%,
64% {
transform: translate(2px, -2px);
}
4%,
60% {
transform: translate(-2px, 2px);
}
62% {
transform: translate(13px, -1px) skew(-13deg);
}
}
div:after {
animation: glitchBotom 1.5s linear infinite;
clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}
div:after {
animation: glitchBotom 1.5s linear infinite;
clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}
@keyframes glitchBotom {
2%,
64% {
transform: translate(-2px, 0);
}
4%,
60% {
transform: translate(-2px, 0);
}
62% {
transform: translate(-22px, 5px) skew(21deg);
}
}
.backtohome {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size: 0.6em;
font-weight: bold;
color: #fff;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
color: #111111;
background: #fff;
}
}
@keyframes glitchBotom {
2%,
64% {
transform: translate(-2px, 0);
}
4%,
60% {
transform: translate(-2px, 0);
}
62% {
transform: translate(-22px, 5px) skew(21deg);
}
}
.backtohome {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size: 0.6em;
font-weight: bold;
color: #fff;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
color: #111111;
background: #fff;
}
}
`;

30
components/500Page.jsx
View File

@ -1,22 +1,22 @@
import { Page500Style } from "./500Page.style";
function Page500(error = null) {
return (
<Page500Style>
<div className="container">
<img src="/images/500-cone.png" />
return (
<Page500Style>
<div className="container">
<img src="/images/500-cone.png" />
<h1>
<span>500</span> <br />
Internal server error
</h1>
<p className="info">{JSON.stringify(error)}</p>
<br/>
<p>I might be currently trying to fix the problem.</p>
<p className="info">Maybe try again in a few minutes ...</p>
</div>
</Page500Style>
);
<h1>
<span>500</span> <br />
Internal server error
</h1>
<p className="info">{JSON.stringify(error)}</p>
<br />
<p>I might be currently trying to fix the problem.</p>
<p className="info">Maybe try again in a few minutes ...</p>
</div>
</Page500Style>
);
}
export default Page500;

80
components/500Page.style.jsx
View File

@ -1,48 +1,48 @@
import styled from "styled-components";
export const Page500Style = styled.div`
@import url("https://fonts.googleapis.com/css?family=Fira+Code&display=swap");
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #111;
* {
margin: 0;
padding: 0;
font-family: "Fira Code", monospace;
}
.container {
text-align: center;
margin: auto;
padding: 4em;
img {
width: 256px;
height: 225px;
}
@import url("https://fonts.googleapis.com/css?family=Fira+Code&display=swap");
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #111;
* {
margin: 0;
padding: 0;
font-family: "Fira Code", monospace;
}
.container {
text-align: center;
margin: auto;
padding: 4em;
img {
width: 256px;
height: 225px;
}
h1 {
margin-top: 1rem;
font-size: 35px;
text-align: center;
h1 {
margin-top: 1rem;
font-size: 35px;
text-align: center;
span {
font-size: 60px;
}
}
p {
margin-top: 1rem;
}
span {
font-size: 60px;
}
}
p {
margin-top: 1rem;
}
p.info {
margin-top: 4em;
font-size: 12px;
p.info {
margin-top: 4em;
font-size: 12px;
a {
text-decoration: none;
color: rgb(84, 84, 206);
}
}
}
a {
text-decoration: none;
color: rgb(84, 84, 206);
}
}
}
`;

54
components/about.jsx
View File

@ -2,32 +2,34 @@ import { LanguagesKnownCategory, description1, description2 } from "config";
import { AboutStyle } from "./about.style";
function about() {
return (
<AboutStyle>
<div className="default">
<div className="content">
<p>{description1}</p>
</div>
<div className="lang-map">
{LanguagesKnownCategory.map((lang) => {
return (
<div
className="lang-map-element"
key={lang}
style={{ backgroundColor: lang[Object.keys(lang)[0]] }}
>
#{Object.keys(lang)[0].toString()}
</div>
);
})}
</div>
<div className="content-2">
<p>{description2}</p>
<img src="https://bravo68web.me/images/header_.png" />
</div>
</div>
</AboutStyle>
);
return (
<AboutStyle>
<div className="default">
<div className="content">
<p>{description1}</p>
</div>
<div className="lang-map">
{LanguagesKnownCategory.map((lang) => {
return (
<div
className="lang-map-element"
key={lang}
style={{
backgroundColor: lang[Object.keys(lang)[0]],
}}
>
#{Object.keys(lang)[0].toString()}
</div>
);
})}
</div>
<div className="content-2">
<p>{description2}</p>
<img src="https://bravo68web.me/images/header_.png" />
</div>
</div>
</AboutStyle>
);
}
export default about;

138
components/about.style.jsx
View File

@ -1,80 +1,80 @@
import styled from "styled-components";
export const AboutStyle = styled.div`
background-color: var(--color1);
overflow-y: scroll !important;
margin: 0;
top: 50%;
left: 50%;
height: 100vh;
padding-top: 12em;
/* padding-bottom: 8em; */
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
/* position: relative; */
.default {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
padding-top: 8em;
padding-bottom: 8em;
background-color: var(--color1);
overflow-y: scroll !important;
margin: 0;
top: 50%;
left: 50%;
height: 100vh;
padding-top: 12em;
/* padding-bottom: 8em; */
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
/* position: relative; */
.default {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
padding-top: 8em;
padding-bottom: 8em;
/* position: absolute; */
/* top: 0; */
/* 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);
}
.content-2 {
margin-top: 1em;
margin-bottom: 1em;
margin-left: 1.3em;
margin-right: 1.3em;
font-weight: bold;
font-size: 1.3em;
color: var(--color4);
img {
width: 90%;
padding: 1em;
}
}
.lang-map {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-left: 1.7em;
margin-right: 1.7em;
align-items: center;
}
.lang-map-element {
padding: 5px;
border-radius: 20px;
margin: 2px;
/* background-color: #${Math.random().toString(16).substring(2, 6)}; */
/* background: rgb(34, 193, 195);
/* 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);
}
.content-2 {
margin-top: 1em;
margin-bottom: 1em;
margin-left: 1.3em;
margin-right: 1.3em;
font-weight: bold;
font-size: 1.3em;
color: var(--color4);
img {
width: 90%;
padding: 1em;
}
}
.lang-map {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-left: 1.7em;
margin-right: 1.7em;
align-items: center;
}
.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;
color: #f5f5f5;
flex: 0 1 20%;
max-width: 127px;
}
font-weight: bold;
box-shadow: 10px 9px 0px -3px #fffefe;
font-size: 1.1em;
color: #f5f5f5;
flex: 0 1 20%;
max-width: 127px;
}
`;

40
components/art.js
View File

@ -5,26 +5,26 @@ import SkillCard from "./artCard";
import ArtModel from "./artModal";
function Art() {
return (
<>
<ArtStyle>
{projects.map((project, index) => {
return (
<>
<SkillCard key={index} {...project} />
</>
);
})}
{arts.map((project, index) => {
return (
<>
<SkillCard key={index} {...project} />
</>
);
})}
</ArtStyle>
</>
);
return (
<>
<ArtStyle>
{projects.map((project, index) => {
return (
<>
<SkillCard key={index} {...project} />
</>
);
})}
{arts.map((project, index) => {
return (
<>
<SkillCard key={index} {...project} />
</>
);
})}
</ArtStyle>
</>
);
}
export default Art;

24
components/art.style.jsx
View File

@ -1,16 +1,16 @@
import styled from "styled-components";
export const ArtStyle = styled.div`
padding: 100px 20px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
overflow-y: auto;
background-image: url("/images/background4.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 100px 20px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
overflow-y: auto;
background-image: url("/images/background4.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
`;

64
components/artCard.js
View File

@ -3,39 +3,39 @@ import ArtCardStyle from "./artCard.style";
import ArtModel from "./artModal";
function SkillCard({ name, description, image, type, url, onClick }) {
const [open, setOpen] = useState(false);
const handleClose = () => {
setOpen(false);
};
const handleClickOpen = () => {
setOpen(true);
};
return (
<div>
{image && (
<div>
<ArtCardStyle>
<div className="card" onClick={handleClickOpen}>
<div className="card-logo">
<img src={image} height="140px" />
</div>
const [open, setOpen] = useState(false);
const handleClose = () => {
setOpen(false);
};
const handleClickOpen = () => {
setOpen(true);
};
return (
<div>
{image && (
<div>
<ArtCardStyle>
<div className="card" onClick={handleClickOpen}>
<div className="card-logo">
<img src={image} height="140px" />
</div>
<div className="date">
<b>
<a href={url}>{name}</a>
</b>
</div>
<div className="content">{description}</div>
<div className="type">#{type}</div>
</div>
</ArtCardStyle>
<ArtModel open={open} onClose={handleClose}>
<img src={image} alt="preview" />
</ArtModel>
</div>
)}
</div>
);
<div className="date">
<b>
<a href={url}>{name}</a>
</b>
</div>
<div className="content">{description}</div>
<div className="type">#{type}</div>
</div>
</ArtCardStyle>
<ArtModel open={open} onClose={handleClose}>
<img src={image} alt="preview" />
</ArtModel>
</div>
)}
</div>
);
}
export default SkillCard;

58
components/artCard.style.jsx
View File

@ -1,34 +1,34 @@
import styled from "styled-components";
export default styled.div`
padding: 2%;
width: 230px;
height: 320px;
box-sizing: border-box;
background-color: #5f046b;
border-radius: 5px;
box-shadow: 10px 9px 0px -3px #fffefe;
margin: 5px;
* {
margin-top: inherit;
}
.type {
color: #92dcf3;
/* padding: 4px; */
}
.card-logo {
display: flex;
/* width: 100%; */
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 10px;
padding: 2%;
width: 230px;
height: 320px;
box-sizing: border-box;
background-color: #5f046b;
border-radius: 5px;
box-shadow: 10px 9px 0px -3px #fffefe;
margin: 5px;
* {
margin-top: inherit;
}
.type {
color: #92dcf3;
/* padding: 4px; */
}
.card-logo {
display: flex;
/* width: 100%; */
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 10px;
img {
width: 100%;
object-fit: cover;
/* object-position: 0px -10px; */
}
/* margin: 5px 5px 0px 0px; */
}
img {
width: 100%;
object-fit: cover;
/* object-position: 0px -10px; */
}
/* margin: 5px 5px 0px 0px; */
}
`;

24
components/artModal.js
View File

@ -3,19 +3,19 @@ import Dialog from "@mui/material/Dialog";
import { useTheme } from "@mui/material/styles";
function ArtModel({ children, open, onClose }) {
const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
return (
<Dialog
open={open}
onClose={onClose}
fullScreen={fullScreen}
aria-labelledby="responsive-dialog-title"
>
{children}
</Dialog>
);
return (
<Dialog
open={open}
onClose={onClose}
fullScreen={fullScreen}
aria-labelledby="responsive-dialog-title"
>
{children}
</Dialog>
);
}
export default ArtModel;

67
components/buymeacoffee.jsx
View File

@ -2,39 +2,42 @@ import React, { useEffect } from "react";
import { BMCStyle } from "./buymeacoffee.style";
export default function Buymeacoffee() {
// const
useEffect(() => {
const script = document.createElement("script");
const div = document.getElementById("supportByBMC");
script.setAttribute(
"src",
"https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
);
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-message",
"Buying a single coffee for me is 1000 times worth than a Thankyou "
);
script.setAttribute("data-color", "#7422f8");
script.setAttribute("data-position", "Right");
script.setAttribute("data-x_margin", "18");
script.setAttribute("data-y_margin", "18");
// const
useEffect(() => {
const script = document.createElement("script");
const div = document.getElementById("supportByBMC");
script.setAttribute(
"src",
"https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
);
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-message",
"Buying a single coffee for me is 1000 times worth than a Thankyou "
);
script.setAttribute("data-color", "#7422f8");
script.setAttribute("data-position", "Right");
script.setAttribute("data-x_margin", "18");
script.setAttribute("data-y_margin", "18");
script.onload = function () {
let evt = document.createEvent("Event");
evt.initEvent("DOMContentLoaded", false, false);
window.dispatchEvent(evt);
};
script.onload = function () {
let evt = document.createEvent("Event");
evt.initEvent("DOMContentLoaded", false, false);
window.dispatchEvent(evt);
};
div.appendChild(script);
}, []);
div.appendChild(script);
}, []);
return (
<BMCStyle>
<div id="supportByBMC"></div>
</BMCStyle>
);
return (
<BMCStyle>
<div id="supportByBMC"></div>
</BMCStyle>
);
}

6
components/buymeacoffee.style.jsx
View File

@ -1,7 +1,7 @@
import styled from "styled-components";
export const BMCStyle = styled.div`
.supportFromHome {
bottom: 15px;
}
.supportFromHome {
bottom: 15px;
}
`;

269
components/contact.js
View File

@ -3,138 +3,143 @@ import { ContactStyle } from "./contact.style";
import axios from "handlers/axios";
function Contact() {
const [input, setInput] = useState({
senderName: "",
email: "",
message: "",
topic: "",
});
const [isSubmitted, setIsSubmitted] = useState(false);
function changeInput(evt) {
const { name, value } = evt.target;
setInput({
...input,
[name]: value,
});
}
function submitForm(evt) {
evt.preventDefault();
axios.post("/contactme/postQuery", input);
setIsSubmitted(true);
}
return (
<ContactStyle>
<div className="form-group-main row">
<div className="column">
<div className="prewritten-info">
<div className="prewritten-info-content">
<h1>
<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.
</p>
<br />
<p>
<h3>
<strong>Email:</strong>
</h3>
<a href="mailto:me@bravo68web.me">me@bravo68web.me</a>
</p>
<br />
<p>
<h3>
<strong>Phone:</strong>
</h3>
<a href="tel:+916291559872">+91 6291559872</a>
</p>
<br />
<p>
<h3>
<strong>Discord:</strong>
</h3>
<a href="https://discord.com/users/457039372009865226">
Bravo68-DF_Techs#6429
</a>
</p>
<br />
<p>
<h3>
<strong>Extra:</strong>
</h3>
<a href="https://calendly.com/bravo68web">Calendly</a>
</p>
</div>
</div>
</div>
<div className="column">
<form onSubmit={submitForm} className="contact-us">
<div className="form-group">
<label htmlFor="email">Email Address </label>
<br />
<input
name="email"
required
value={input.email}
onChange={changeInput}
type="email"
className="form-control"
id="email"
placeholder="Your email"
/>
</div>
<div className="form-group">
<label htmlFor="senderName">Your Name </label>
<br />
<input
name="senderName"
value={input.senderName}
onChange={changeInput}
type="text"
className="form-control"
id="senderName"
placeholder="Your Name"
/>
</div>
<div className="form-group">
<label htmlFor="topic">Subject </label>
<br />
<input
name="topic"
value={input.topic}
onChange={changeInput}
type="text"
className="form-control"
id="topic"
placeholder="I want to talk about..."
/>
</div>
<div className="form-group">
<label htmlFor="senderName">Message </label>
<br />
<textarea
name="message"
value={input.message}
onChange={changeInput}
type="text"
className="form-control"
id="message"
placeholder="Your message"
/>
</div>
<button
type="submit"
className="btn btn-primary"
disabled={isSubmitted}
>
Submit
</button>
</form>
</div>
</div>
</ContactStyle>
);
const [input, setInput] = useState({
senderName: "",
email: "",
message: "",
topic: "",
});
const [isSubmitted, setIsSubmitted] = useState(false);
function changeInput(evt) {
const { name, value } = evt.target;
setInput({
...input,
[name]: value,
});
}
function submitForm(evt) {
evt.preventDefault();
axios.post("/contactme/postQuery", input);
setIsSubmitted(true);
}
return (
<ContactStyle>
<div className="form-group-main row">
<div className="column">
<div className="prewritten-info">
<div className="prewritten-info-content">
<h1>
<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.
</p>
<br />
<p>
<h3>
<strong>Email:</strong>
</h3>
<a href="mailto:me@bravo68web.me">
me@bravo68web.me
</a>
</p>
<br />
<p>
<h3>
<strong>Phone:</strong>
</h3>
<a href="tel:+916291559872">+91 6291559872</a>
</p>
<br />
<p>
<h3>
<strong>Discord:</strong>
</h3>
<a href="https://discord.com/users/457039372009865226">
Bravo68-DF_Techs#6429
</a>
</p>
<br />
<p>
<h3>
<strong>Extra:</strong>
</h3>
<a href="https://calendly.com/bravo68web">
Calendly
</a>
</p>
</div>
</div>
</div>
<div className="column">
<form onSubmit={submitForm} className="contact-us">
<div className="form-group">
<label htmlFor="email">Email Address </label>
<br />
<input
name="email"
required
value={input.email}
onChange={changeInput}
type="email"
className="form-control"
id="email"
placeholder="Your email"
/>
</div>
<div className="form-group">
<label htmlFor="senderName">Your Name </label>
<br />
<input
name="senderName"
value={input.senderName}
onChange={changeInput}
type="text"
className="form-control"
id="senderName"
placeholder="Your Name"
/>
</div>
<div className="form-group">
<label htmlFor="topic">Subject </label>
<br />
<input
name="topic"
value={input.topic}
onChange={changeInput}
type="text"
className="form-control"
id="topic"
placeholder="I want to talk about..."
/>
</div>
<div className="form-group">
<label htmlFor="senderName">Message </label>
<br />
<textarea
name="message"
value={input.message}
onChange={changeInput}
type="text"
className="form-control"
id="message"
placeholder="Your message"
/>
</div>
<button
type="submit"
className="btn btn-primary"
disabled={isSubmitted}
>
Submit
</button>
</form>
</div>
</div>
</ContactStyle>
);
}
export default Contact;

472
components/contact.style.jsx
View File

@ -2,264 +2,264 @@ import styled from "styled-components";
// import SendIcon from "@mui/icons-material/Send";
export const ContactStyle = styled.div`
padding: 10%;
align-items: center;
display: flex;
justify-content: center;
background-image: url("images/background2.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
padding: 10%;
align-items: center;
display: flex;
justify-content: center;
background-image: url("images/background2.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;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 100px;
}
body {
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;
background-size: cover;
padding-top: 100px;
}
textarea {
/* background: rgba(255, 255, 255, 0.4)
textarea {
/* background: rgba(255, 255, 255, 0.4)
url(http://luismruiz.com/img/gemicon_message.png) no-repeat scroll 16px
16px; */
width: 276px;
resize: none;
height: 110px;
border: 1px solid rgba(255, 255, 255, 0.6);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display: block;
font-family: "Source Sans Pro", sans-serif;
font-size: 18px;
color: #030303;
padding-left: 20px;
padding-right: 20px;
padding-top: 12px;
margin-bottom: 20px;
overflow: hidden;
}
width: 276px;
resize: none;
height: 110px;
border: 1px solid rgba(255, 255, 255, 0.6);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display: block;
font-family: "Source Sans Pro", sans-serif;
font-size: 18px;
color: #030303;
padding-left: 20px;
padding-right: 20px;
padding-top: 12px;
margin-bottom: 20px;
overflow: hidden;
}
input {
width: 276px;
height: 48px;
border: 1px solid rgba(255, 255, 255, 0.4);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display: block;
font-family: "Source Sans Pro", sans-serif;
font-size: 18px;
color: #000000;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 20px;
}
input {
width: 276px;
height: 48px;
border: 1px solid rgba(255, 255, 255, 0.4);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display: block;
font-family: "Source Sans Pro", sans-serif;
font-size: 18px;
color: #000000;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 20px;
}
.message-input {
height: 90px;
}
.message-input {
height: 90px;
}
input[type="submit"] {
cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.svg),
auto;
}
input[type="submit"] {
cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.svg),
auto;
}
input.name {
padding-left: 45px;
}
input.name {
padding-left: 45px;
}
input.email {
padding-left: 45px;
}
input.email {
padding-left: 45px;
}
input.message {
padding-left: 45px;
}
input.topic {
padding-left: 45px;
}
::-webkit-input-placeholder {
color: #fff;
}
input.message {
padding-left: 45px;
}
input.topic {
padding-left: 45px;
}
::-webkit-input-placeholder {
color: #fff;
}
:-moz-placeholder {
color: #fff;
}
:-moz-placeholder {
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
input:focus,
textarea:focus {
background-color: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.5);
-webkit-box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.5);
box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.5);
overflow: hidden;
color: #fff;
}
input:focus,
textarea:focus {
background-color: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.5);
-webkit-box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.5);
box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.5);
overflow: hidden;
color: #fff;
}
.btn {
cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.svg),
auto;
width: 138px;
height: 44px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
float: right;
/* border: 1px solid rgba(0, 0, 0, 0.2); */
border: 1px solid #253737;
.btn {
cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.svg),
auto;
width: 138px;
height: 44px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
float: right;
/* border: 1px solid rgba(0, 0, 0, 0.2); */
border: 1px solid #253737;
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%
);
padding: 10.5px 21px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0,
inset rgba(255, 255, 255, 0.7) 0 1px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0,
inset rgba(255, 255, 255, 0.7) 0 1px 0;
box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0,
inset rgba(255, 255, 255, 0.7) 0 1px 0;
text-shadow: #333333 0 1px 0;
color: #e1e1e1;
}
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%
);
padding: 10.5px 21px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0,
inset rgba(255, 255, 255, 0.7) 0 1px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0,
inset rgba(255, 255, 255, 0.7) 0 1px 0;
box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0,
inset rgba(255, 255, 255, 0.7) 0 1px 0;
text-shadow: #333333 0 1px 0;
color: #e1e1e1;
}
.btn:hover {
border: 1px solid #253737;
.btn:hover {
border: 1px solid #253737;
text-shadow: #333333 0 1px 0;
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%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fc466b",endColorstr="#3f5efb",GradientType=1);
color: #fff;
}
text-shadow: #333333 0 1px 0;
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%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fc466b",endColorstr="#3f5efb",GradientType=1);
color: #fff;
}
.btn:active {
margin-top: 1px;
text-shadow: #333333 0 -1px 0;
border: 1px solid #253737;
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%
);
}
form {
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
width: 343px;
height: 510px;
padding: 30px;
border: 1px solid rgba(0, 0, 0, 0.2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.btn:active {
margin-top: 1px;
text-shadow: #333333 0 -1px 0;
border: 1px solid #253737;
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%
);
}
form {
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
width: 343px;
height: 510px;
padding: 30px;
border: 1px solid rgba(0, 0, 0, 0.2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.prewritten-info {
margin-left: auto;
margin-right: auto;
margin-top: auto;
width: 343px;
height: 510px;
padding: 30px;
border: 1px solid rgba(0, 0, 0, 0.2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: rgba(255, 143, 15, 0.61);
-moz-box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.prewritten-info {
margin-left: auto;
margin-right: auto;
margin-top: auto;
width: 343px;
height: 510px;
padding: 30px;
border: 1px solid rgba(0, 0, 0, 0.2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: rgba(255, 143, 15, 0.61);
-moz-box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.prewritten-info-content {
margin-left: auto;
margin-right: auto;
}
@media (min-width: 800px) {
/* overflow-y: scroll !important; */
.prewritten-info-content {
margin-left: auto;
margin-right: auto;
}
@media (min-width: 800px) {
/* overflow-y: scroll !important; */
.row {
display: flex;
/* flex-grow: true; */
flex-direction: row;
}
.column {
/* flex: 50%; */
}
.prewritten-info {
margin-top: 140%;
}
form {
margin-bottom: 17%;
}
}
.row {
display: flex;
/* flex-grow: true; */
flex-direction: row;
}
.column {
/* flex: 50%; */
}
.prewritten-info {
margin-top: 140%;
}
form {
margin-bottom: 17%;
}
}
@media (min-width: 1000px) {
overflow-y: hidden !important;
@media (min-width: 1000px) {
overflow-y: hidden !important;
.prewritten-info {
margin-top: auto !important;
}
form {
margin-bottom: auto !important;
}
.row {
display: flex;
/* flex-grow: true; */
}
.column {
/* flex: 50%; */
flex-direction: column;
}
}
@media (max-width: 768px) {
padding-top: 25%;
padding-bottom: 20%;
}
.prewritten-info {
margin-top: auto !important;
}
form {
margin-bottom: auto !important;
}
.row {
display: flex;
/* flex-grow: true; */
}
.column {
/* flex: 50%; */
flex-direction: column;
}
}
@media (max-width: 768px) {
padding-top: 25%;
padding-bottom: 20%;
}
`;

233
components/discord-activity.jsx
View File

@ -2,130 +2,137 @@ 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"
import DiscordParser from "../libs/discord-parser";
/* <pre>{!loading && JSON.stringify(status, null, 4)}</pre>; */
const customStatus = [
"Searching for Cat Girls",
"Watching Anime",
"Sleeping",
"Studying",
"Searching for Cat Girls",
"Watching Anime",
"Sleeping",
"Studying",
];
export default function DiscordActivity() {
const statusPicker = () => {
return customStatus[Math.floor(Math.random() * customStatus.length)];
};
const { loading, status } = useLanyard({
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 statusPicker = () => {
return customStatus[Math.floor(Math.random() * customStatus.length)];
};
const { loading, status } = useLanyard({
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 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);
const [currentTs, setCurrentTs] = useState(Date.now());
const [parsedStatus, setParsedStatus] = useState(null);
useEffect(() => {
if(!loading){
setParsedStatus(DiscordParser(status));
}
}, [status, loading])
useEffect(() => {
if (!loading) {
setParsedStatus(DiscordParser(status));
}
}, [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]);
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"
) {
return (
<DicordActivityStyle>
<div className="discord-icons">
<div className="discord-large-icon">
<img src={parsedStatus.activity.assets.large_image} />
</div>
<div className="discord-small-icon">
<img src={parsedStatus.activity.assets.small_image} alt="" />
</div>
</div>
<div className="discord-messageBox">
<div className="discord-message-application">
<b>{parsedStatus.discord.username + "#" + parsedStatus.discord.discriminator}</b>
</div>
<div className="discord-message-activity">
<b>{parsedStatus.activity.details}</b>
</div>
<br />
<div className="discord-message-files">
<b>{parsedStatus.activity.state}</b>
</div>
<div className="time-elapsed">{time}</div>
</div>
</DicordActivityStyle>
);
}
else {
let restData = {
username: "Bravo68-DF_Techs",
public_flags: 64,
id: "457039372009865226",
discriminator: "6429",
avatar: "08a8937664b3b165805965244d6f095f",
};
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} />
</div>
<div className="discord-small-icon">
<img
src={parsedStatus.activity.assets.small_image}
alt=""
/>
</div>
</div>
<div className="discord-messageBox">
<div className="discord-message-application">
<b>
{parsedStatus.discord.username +
"#" +
parsedStatus.discord.discriminator}
</b>
</div>
<div className="discord-message-activity">
<b>{parsedStatus.activity.details}</b>
</div>
<br />
<div className="discord-message-files">
<b>{parsedStatus.activity.state}</b>
</div>
<div className="time-elapsed">{time}</div>
</div>
</DicordActivityStyle>
);
} else {
let restData = {
username: "Bravo68-DF_Techs",
public_flags: 64,
id: "457039372009865226",
discriminator: "6429",
avatar: "08a8937664b3b165805965244d6f095f",
};
return (
<DicordActivityStyle>
<div className="discord-icons">
<div className="discord-large-icon">
<img src={"/images/default_game.jpg"} />
</div>
<div className="discord-small-icon">
<img src={"/images/" + "offline" + ".png"} alt="" />
</div>
</div>
<div className="discord-messageBox">
<div className="discord-message-application">
<b>{restData.username + "#" + restData.discriminator}</b>
</div>
<div className="discord-message-activity">
<b>is Offline</b>
</div>
<br />
<div className="discord-message-files">
<b>{pickedStatus}</b>
</div>
{/* <div className="time-elapsed">00:00:00 elapsed</div> */}
</div>
</DicordActivityStyle>
);
}
return (
<DicordActivityStyle>
<div className="discord-icons">
<div className="discord-large-icon">
<img src={"/images/default_game.jpg"} />
</div>
<div className="discord-small-icon">
<img src={"/images/" + "offline" + ".png"} alt="" />
</div>
</div>
<div className="discord-messageBox">
<div className="discord-message-application">
<b>
{restData.username + "#" + restData.discriminator}
</b>
</div>
<div className="discord-message-activity">
<b>is Offline</b>
</div>
<br />
<div className="discord-message-files">
<b>{pickedStatus}</b>
</div>
{/* <div className="time-elapsed">00:00:00 elapsed</div> */}
</div>
</DicordActivityStyle>
);
}
}

122
components/discord-activity.style.jsx
View File

@ -1,67 +1,67 @@
import styled from "styled-components";
export const DicordActivityStyle = styled.div`
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
width: 400px;
min-height: 75px;
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%
);
border-radius: 6px;
padding: 0.3em 0.8em;
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
width: 400px;
min-height: 75px;
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%
);
border-radius: 6px;
padding: 0.3em 0.8em;
.discord-icons {
display: flex;
/* margin-right: 2em; */
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
/* position: absolute; */
position: relative;
.discord-large-icon {
width: 80px;
height: 80px;
.discord-icons {
display: flex;
/* margin-right: 2em; */
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
/* position: absolute; */
position: relative;
.discord-large-icon {
width: 80px;
height: 80px;
/* background-color: #61c626; */
img {
max-width: 100%;
object-fit: contain;
border-radius: 6px;
}
}
.discord-small-icon {
width: 25px;
height: 25px;
box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.3);
border-radius: 50px;
position: absolute;
bottom: 6px;
right: 1px;
img {
max-width: 100%;
object-fit: contain;
border-radius: 50px;
}
}
}
.discord-messageBox {
display: flex;
flex-direction: column;
margin-left: 1em;
font-size: 0.9em;
}
.discord-message-application {
font-size: 1.3em;
}
.discord-message-activity {
font-size: 1.1em;
}
/* background-color: #61c626; */
img {
max-width: 100%;
object-fit: contain;
border-radius: 6px;
}
}
.discord-small-icon {
width: 25px;
height: 25px;
box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.3);
border-radius: 50px;
position: absolute;
bottom: 6px;
right: 1px;
img {
max-width: 100%;
object-fit: contain;
border-radius: 50px;
}
}
}
.discord-messageBox {
display: flex;
flex-direction: column;
margin-left: 1em;
font-size: 0.9em;
}
.discord-message-application {
font-size: 1.3em;
}
.discord-message-activity {
font-size: 1.1em;
}
`;

77
components/errorBoundary.jsx
View File

@ -1,41 +1,40 @@
import { Component } from "react"
import Page500 from "./500Page"
import { Component } from "react";
import Page500 from "./500Page";
class ErrorBoundary extends Component {
constructor(props) {
super(props)
// Define a state variable to track whether is an error or not
this.state = { hasError: false }
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI
return { hasError: true }
}
componentDidCatch(error, errorInfo) {
// You can use your own error logging service here
console.log({ error, errorInfo })
}
render() {
// Check if the error is thrown
if (this.state.hasError) {
// You can render any custom fallback UI
return (
<div>
<Page500 />
<h2>Oops, there is an error!</h2>
<button
type="button"
onClick={() => this.setState({ hasError: false })}
>
Try again?
</button>
</div>
)
}
// Return children components in case of no error
return this.props.children
}
}
export default ErrorBoundary
constructor(props) {
super(props);
// Define a state variable to track whether is an error or not
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// You can use your own error logging service here
console.log({ error, errorInfo });
}
render() {
// Check if the error is thrown
if (this.state.hasError) {
// You can render any custom fallback UI
return (
<div>
<Page500 />
<h2>Oops, there is an error!</h2>
<button
type="button"
onClick={() => this.setState({ hasError: false })}
>
Try again?
</button>
</div>
);
}
// Return children components in case of no error
return this.props.children;
}
}
export default ErrorBoundary;

104
components/experinces.jsx Normal file
View File

@ -0,0 +1,104 @@
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="default">
<div className="content">
<div className="comp-img">
<img src={job_exp_1.logo} alt="logo" />
</div>
<p id="name">{job_exp_1.name}</p>
<p id="info">{job_exp_1.info}</p>
<p id="role">{job_exp_1.role}</p>
<p id="dates">
{job_exp_1.start_date} - {job_exp_1.end_date}
</p>
<p id="desp">{job_exp_1.description}</p>
<p id="techbits">
{job_exp_1.techstack
.map((a) => {
return "#" + a;
})
.join(" ")}
</p>
</div>
<div className="content">
<div className="comp-img">
<img
src={job_exp_2.logo}
alt="logo"
height="20%"
width="20%"
/>
</div>
<p id="name">{job_exp_2.name}</p>
<p id="info">{job_exp_2.info}</p>
<p id="role">{job_exp_2.role}</p>
<p id="dates">
{job_exp_2.start_date} - {job_exp_2.end_date}
</p>
<p id="desp">{job_exp_2.description}</p>
<p id="techbits">
{job_exp_2.techstack
.map((a) => {
return "#" + a;
})
.join(" ")}
</p>
</div>
<div className="content">
<div className="comp-img">
<img
src={job_exp_3.logo}
alt="logo"
height="30%"
width="18%"
/>
</div>
<p id="name">{job_exp_3.name}</p>
<p id="info">{job_exp_3.info}</p>
<p id="role">{job_exp_3.role}</p>
<p id="dates">
{job_exp_3.start_date} - {job_exp_3.end_date}
</p>
<p id="desp">{job_exp_3.description}</p>
<p id="techbits">
{job_exp_3.techstack
.map((a) => {
return "#" + a;
})
.join(" ")}
</p>
</div>
<div className="content">
<div className="comp-img">
<img
src={job_exp_4.logo}
alt="logo"
height="35%"
width="13%"
/>
</div>
<p id="name">{job_exp_4.name}</p>
<p id="info">{job_exp_4.info}</p>
<p id="role">{job_exp_4.role}</p>
<p id="dates">
{job_exp_4.start_date} - {job_exp_4.end_date}
</p>
<p id="desp">{job_exp_4.description}</p>
<p id="techbits">
{job_exp_4.techstack
.map((a) => {
return "#" + a;
})
.join(" ")}
</p>
</div>
</div>
</ExpStyle>
);
}
export default experinces;

39
components/experinces.style.jsx Normal file
View File

@ -0,0 +1,39 @@
import styled from "styled-components";
export const ExpStyle = styled.div`
background-color: var(--color1);
overflow-y: scroll !important;
margin: 0;
top: 50%;
left: 50%;
height: 100vh;
padding-top: 12em;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
.default {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
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);
}
`;

116
components/extras.js
View File

@ -2,64 +2,64 @@ import { ExtraStyles } from "./extras.style";
import { extra, extraPages } from "config";
function extras() {
return (
<ExtraStyles>
<div>
<h1 className="title">Pages</h1>
<div className="default">
{extraPages.map((content, index) => {
return (
<div key={index}>
<div className="content">
<div className="content-description">
<img src={content.image} />
</div>
<div className="content-title">
<h1>
<a
href={content.url}
target="_blank"
rel="noopener noreferrer"
>
{content.name}
</a>
</h1>
</div>
</div>
</div>
);
})}
</div>
</div>
<div>
<h1 className="title">Components</h1>
<div className="default">
{extra.map((content, index) => {
return (
<div key={index}>
<div className="content">
<div className="content-description">
<img src={content.image} />
</div>
<div className="content-title">
<h1>
<a
href={content.url}
target="_blank"
rel="noopener noreferrer"
>
{content.name}
</a>
</h1>
</div>
</div>
</div>
);
})}
</div>
</div>
</ExtraStyles>
);
return (
<ExtraStyles>
<div>
<h1 className="title">Pages</h1>
<div className="default">
{extraPages.map((content, index) => {
return (
<div key={index}>
<div className="content">
<div className="content-description">
<img src={content.image} />
</div>
<div className="content-title">
<h1>
<a
href={content.url}
target="_blank"
rel="noopener noreferrer"
>
{content.name}
</a>
</h1>
</div>
</div>
</div>
);
})}
</div>
</div>
<div>
<h1 className="title">Components</h1>
<div className="default">
{extra.map((content, index) => {
return (
<div key={index}>
<div className="content">
<div className="content-description">
<img src={content.image} />
</div>
<div className="content-title">
<h1>
<a
href={content.url}
target="_blank"
rel="noopener noreferrer"
>
{content.name}
</a>
</h1>
</div>
</div>
</div>
);
})}
</div>
</div>
</ExtraStyles>
);
}
export default extras;

150
components/extras.style.jsx
View File

@ -1,79 +1,79 @@
import styled from "styled-components";
export const ExtraStyles = styled.div`
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding-top: 15vh;
background-image: url("images/background6.webp");
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-y: scroll !important;
height: 100vh;
.title {
font-size: 2rem;
font-weight: bold;
background-color: var(--color4);
color: var(--color3);
}
.default {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
/* height: 100vh; */
padding-bottom: 3em;
padding-top: 2em;
.content {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding-top: 2em;
padding-bottom: 2em;
&:hover {
filter: contrast(200%);
-webkit-transform: translateX(-5px) translateY(-5px);
transform: translateX(-5px) translateY(-5px);
transition: 1s ease;
}
.content-description {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.content-description img {
width: 100px;
}
.content-title {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
h1 {
font-size: 1.5em;
font-weight: bold;
color: var(--color7);
text-align: center;
margin: 0;
padding: 0;
a {
color: var(--color7);
text-decoration: none;
&:hover {
color: var(--color3);
}
}
}
}
}
}
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding-top: 15vh;
background-image: url("images/background6.webp");
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-y: scroll !important;
height: 100vh;
.title {
font-size: 2rem;
font-weight: bold;
background-color: var(--color4);
color: var(--color3);
}
.default {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
/* height: 100vh; */
padding-bottom: 3em;
padding-top: 2em;
.content {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding-top: 2em;
padding-bottom: 2em;
&:hover {
filter: contrast(200%);
-webkit-transform: translateX(-5px) translateY(-5px);
transform: translateX(-5px) translateY(-5px);
transition: 1s ease;
}
.content-description {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.content-description img {
width: 100px;
}
.content-title {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
h1 {
font-size: 1.5em;
font-weight: bold;
color: var(--color7);
text-align: center;
margin: 0;
padding: 0;
a {
color: var(--color7);
text-decoration: none;
&:hover {
color: var(--color3);
}
}
}
}
}
}
`;

14
components/footer.jsx
View File

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

41
components/footer.style.jsx
View File

@ -1,25 +1,24 @@
import styled from "styled-components";
export default styled.div`
height: 50px;
width: 100vw;
position: fixed;
left: 0;
bottom: 0;
background: var(--color1);
display: flex;
justify-content: center;
.main-footer {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
.api-status {
justify-content: right;
align-items: right;
font-size: 1.2rem;
padding-bottom: 20px;
}
}
height: 50px;
width: 100vw;
position: fixed;
left: 0;
bottom: 0;
background: var(--color1);
display: flex;
justify-content: center;
.main-footer {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
.api-status {
justify-content: right;
align-items: right;
font-size: 1.2rem;
padding-bottom: 20px;
}
}
`;

166
components/main.jsx
View File

@ -11,92 +11,92 @@ import SvgIcon from "@mui/material/SvgIcon";
import MastodonSVG from "./assets/mastodon_icon_137420.svg";
import {
name,
github_url,
linkedin_url,
facebook_url,
twitter_url,
// email,
// resume_url,
instagram_url,
mastodon_url,
name,
github_url,
linkedin_url,
facebook_url,
twitter_url,
// email,
// resume_url,
instagram_url,
mastodon_url,
} from "config";
import DiscordActivity from "./discord-activity";
function Main() {
useEffect(() => {
const animePic = document.getElementById('anime-pic');
const profPic = document.getElementById('prof-pic');
useEffect(() => {
const animePic = document.getElementById("anime-pic");
const profPic = document.getElementById("prof-pic");
animePic.addEventListener('mouseover', function() {
animePic.style.display = 'none';
profPic.style.display = 'block';
});
profPic.addEventListener('mouseout', function() {
animePic.style.display = 'block';
profPic.style.display = 'none';
});
},[])
animePic.addEventListener("mouseover", function () {
animePic.style.display = "none";
profPic.style.display = "block";
});
return (
<MainStyle>
<div className="content">
<div className="profile">
<img
src="/images/anime-profile-pic.png"
alt=""
className="profile-img"
id="anime-pic"
/>
<img
src="/images/profile-new-transp.png"
alt=""
className="profile-img"
id="prof-pic"
/>
</div>
<div className="name">{name}</div>
<br />
<div>
<DiscordActivity />
</div>
<br />
<div className="social-buttons">
<a href={github_url}>
<IconButton>
<GitHubIcon fontSize="large" />
</IconButton>
</a>
<a href={twitter_url}>
<IconButton>
<TwitterIcon fontSize="large" />
</IconButton>
</a>
<a href={linkedin_url}>
<IconButton>
<LinkedInIcon fontSize="large" />
</IconButton>
</a>
<a href={instagram_url}>
<IconButton>
<InstagramIcon fontSize="large" />
</IconButton>
</a>
<a href={facebook_url}>
<IconButton>
<FacebookIcon fontSize="large" />
</IconButton>
</a>
<a href={mastodon_url} rel="me">
<IconButton>
<SvgIcon fontSize="large">
<path d="M20.94,14C20.66,15.41 18.5,16.96 15.97,17.26C14.66,17.41 13.37,17.56 12,17.5C9.75,17.39 8,16.96 8,16.96V17.58C8.32,19.8 10.22,19.93 12.03,20C13.85,20.05 15.47,19.54 15.47,19.54L15.55,21.19C15.55,21.19 14.27,21.87 12,22C10.75,22.07 9.19,21.97 7.38,21.5C3.46,20.45 2.78,16.26 2.68,12L2.67,8.57C2.67,4.23 5.5,2.96 5.5,2.96C6.95,2.3 9.41,2 11.97,2H12.03C14.59,2 17.05,2.3 18.5,2.96C18.5,2.96 21.33,4.23 21.33,8.57C21.33,8.57 21.37,11.78 20.94,14M18,8.91C18,7.83 17.7,7 17.15,6.35C16.59,5.72 15.85,5.39 14.92,5.39C13.86,5.39 13.05,5.8 12.5,6.62L12,7.5L11.5,6.62C10.94,5.8 10.14,5.39 9.07,5.39C8.15,5.39 7.41,5.72 6.84,6.35C6.29,7 6,7.83 6,8.91V14.17H8.1V9.06C8.1,8 8.55,7.44 9.46,7.44C10.46,7.44 10.96,8.09 10.96,9.37V12.16H13.03V9.37C13.03,8.09 13.53,7.44 14.54,7.44C15.44,7.44 15.89,8 15.89,9.06V14.17H18V8.91Z" />
</SvgIcon>
</IconButton>
</a>
</div>
{/* <div className="buttons">
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"
alt=""
className="profile-img"
id="anime-pic"
/>
<img
src="/images/profile-new-transp.png"
alt=""
className="profile-img"
id="prof-pic"
/>
</div>
<div className="name">{name}</div>
<br />
<div>
<DiscordActivity />
</div>
<br />
<div className="social-buttons">
<a href={github_url}>
<IconButton>
<GitHubIcon fontSize="large" />
</IconButton>
</a>
<a href={twitter_url}>
<IconButton>
<TwitterIcon fontSize="large" />
</IconButton>
</a>
<a href={linkedin_url}>
<IconButton>
<LinkedInIcon fontSize="large" />
</IconButton>
</a>
<a href={instagram_url}>
<IconButton>
<InstagramIcon fontSize="large" />
</IconButton>
</a>
<a href={facebook_url}>
<IconButton>
<FacebookIcon fontSize="large" />
</IconButton>
</a>
<a href={mastodon_url} rel="me">
<IconButton>
<SvgIcon fontSize="large">
<path d="M20.94,14C20.66,15.41 18.5,16.96 15.97,17.26C14.66,17.41 13.37,17.56 12,17.5C9.75,17.39 8,16.96 8,16.96V17.58C8.32,19.8 10.22,19.93 12.03,20C13.85,20.05 15.47,19.54 15.47,19.54L15.55,21.19C15.55,21.19 14.27,21.87 12,22C10.75,22.07 9.19,21.97 7.38,21.5C3.46,20.45 2.78,16.26 2.68,12L2.67,8.57C2.67,4.23 5.5,2.96 5.5,2.96C6.95,2.3 9.41,2 11.97,2H12.03C14.59,2 17.05,2.3 18.5,2.96C18.5,2.96 21.33,4.23 21.33,8.57C21.33,8.57 21.37,11.78 20.94,14M18,8.91C18,7.83 17.7,7 17.15,6.35C16.59,5.72 15.85,5.39 14.92,5.39C13.86,5.39 13.05,5.8 12.5,6.62L12,7.5L11.5,6.62C10.94,5.8 10.14,5.39 9.07,5.39C8.15,5.39 7.41,5.72 6.84,6.35C6.29,7 6,7.83 6,8.91V14.17H8.1V9.06C8.1,8 8.55,7.44 9.46,7.44C10.46,7.44 10.96,8.09 10.96,9.37V12.16H13.03V9.37C13.03,8.09 13.53,7.44 14.54,7.44C15.44,7.44 15.89,8 15.89,9.06V14.17H18V8.91Z" />
</SvgIcon>
</IconButton>
</a>
</div>
{/* <div className="buttons">
<a href={resume_url}>
<Button variant="contained " size="large">
Resume
@ -108,9 +108,9 @@ function Main() {
</Button>
</a>
</div> */}
</div>
</MainStyle>
);
</div>
</MainStyle>
);
}
export default Main;

170
components/main.style.jsx
View File

@ -1,92 +1,92 @@
import styled from "styled-components";
export default styled.main`
padding-top: 15px;
display: flex;
height: 100vh;
width: 100%;
justify-content: center;
align-items: center;
background-image: url("/images/background.jpg");
background-size: cover;
background-position: center;
#prof-pic {
display: none;
}
padding-top: 15px;
display: flex;
height: 100vh;
width: 100%;
justify-content: center;
align-items: center;
background-image: url("/images/background.jpg");
background-size: cover;
background-position: center;
#prof-pic {
display: none;
}
#anime-pic:hover + #prof-pic {
display: block;
}
#anime-pic:hover + #prof-pic {
display: block;
}
.profile-img {
border-radius: 50%;
background: rgb(251, 167, 63);
background: -moz-radial-gradient(
circle,
rgba(251, 167, 63, 1) 0%,
rgba(252, 70, 107, 1) 100%
);
background: -webkit-radial-gradient(
circle,
rgba(251, 167, 63, 1) 0%,
rgba(252, 70, 107, 1) 100%
);
background: radial-gradient(
circle,
rgba(251, 167, 63, 1) 0%,
rgba(252, 70, 107, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fba73f",endColorstr="#fc466b",GradientType=1);
}
.profile-img {
border-radius: 50%;
background: rgb(251, 167, 63);
background: -moz-radial-gradient(
circle,
rgba(251, 167, 63, 1) 0%,
rgba(252, 70, 107, 1) 100%
);
background: -webkit-radial-gradient(
circle,
rgba(251, 167, 63, 1) 0%,
rgba(252, 70, 107, 1) 100%
);
background: radial-gradient(
circle,
rgba(251, 167, 63, 1) 0%,
rgba(252, 70, 107, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fba73f",endColorstr="#fc466b",GradientType=1);
}
.backimage {
filter: blur(8px);
-webkit-filter: blur(8px);
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.social-buttons {
button {
margin: 5px;
}
.MuiSvgIcon-root {
color: white;
}
}
.buttons {
button {
background: var(--color1);
border-radius: 20px;
padding: 10px 15px;
margin: 10px;
}
}
}
.profile {
height: 250px;
width: 250px;
img {
max-height: 100%;
max-width: 100%;
}
margin-bottom: 20px;
}
.name {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
}
.social-buttons {
margin-top: 1rem;
background: rgb(64, 63, 79);
background: linear-gradient(
90deg,
rgba(64, 63, 79, 1) 0%,
rgba(92, 84, 90, 1) 43%
);
border-radius: 12px;
}
.backimage {
filter: blur(8px);
-webkit-filter: blur(8px);
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.social-buttons {
button {
margin: 5px;
}
.MuiSvgIcon-root {
color: white;
}
}
.buttons {
button {
background: var(--color1);
border-radius: 20px;
padding: 10px 15px;
margin: 10px;
}
}
}
.profile {
height: 250px;
width: 250px;
img {
max-height: 100%;
max-width: 100%;
}
margin-bottom: 20px;
}
.name {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
}
.social-buttons {
margin-top: 1rem;
background: rgb(64, 63, 79);
background: linear-gradient(
90deg,
rgba(64, 63, 79, 1) 0%,
rgba(92, 84, 90, 1) 43%
);
border-radius: 12px;
}
`;

190
components/nav.jsx
View File

@ -9,107 +9,107 @@ import MenuIcon from "@mui/icons-material/Menu";
import { discord_id } from "config";
const LINKS = [
{
title: "About",
href: "/about",
},
{
title: "Stats",
href: "/stats",
},
{
title: "Resume",
href: "/resume",
},
{
title: "Contact",
href: "/contact",
},
{
title: "Art/Projects",
href: "/projects",
},
{
title: "Blog",
href: "https://blog.bravo68web.me",
},
{
title: "Extras",
href: "/extras",
},
{
title: "About",
href: "/about",
},
{
title: "Stats",
href: "/stats",
},
{
title: "Resume",
href: "/resume",
},
{
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({
userId: discord_id,
socket: true,
});
const { loading, status /*, websocket */ } = useLanyard({
userId: discord_id,
socket: true,
});
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<NavStyle>
<Link href="/" passHref>
<div className="title">
<h1>echo &quot;Bravo&quot;</h1>
<div className="indicator">
<div
className={`circle ${
!loading &&
(status?.discord_status === "online" ||
status?.discord_status === "idle" ||
status?.discord_status === "dnd")
? "green"
: "red"
}`}
></div>
</div>
</div>
</Link>
return (
<NavStyle>
<Link href="/" passHref>
<div className="title">
<h1>echo &quot;Bravo&quot;</h1>
<div className="indicator">
<div
className={`circle ${
!loading &&
(status?.discord_status === "online" ||
status?.discord_status === "idle" ||
status?.discord_status === "dnd")
? "green"
: "red"
}`}
></div>
</div>
</div>
</Link>
<div className="links">
{LINKS.map(({ title, href }, index) => (
<div key={index} className="link">
<Link href={href}>{title}</Link>
</div>
))}
</div>
{/* Mobile Menu */}
<div className={"menu"}>
<IconButton
id="nav-menu-button"
aria-controls={open ? "nav-menu" : undefined}
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={handleClick}
>
<MenuIcon />
</IconButton>
<Menu
id="nav-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
"aria-labelledby": "nav-menu-button",
}}
>
{LINKS.map(({ title, href }, index) => (
<MenuItem key={index} onClick={handleClose}>
<Link href={href}>{title}</Link>
</MenuItem>
))}
</Menu>
</div>
</NavStyle>
);
<div className="links">
{LINKS.map(({ title, href }, index) => (
<div key={index} className="link">
<Link href={href}>{title}</Link>
</div>
))}
</div>
{/* Mobile Menu */}
<div className={"menu"}>
<IconButton
id="nav-menu-button"
aria-controls={open ? "nav-menu" : undefined}
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={handleClick}
>
<MenuIcon />
</IconButton>
<Menu
id="nav-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
"aria-labelledby": "nav-menu-button",
}}
>
{LINKS.map(({ title, href }, index) => (
<MenuItem key={index} onClick={handleClose}>
<Link href={href}>{title}</Link>
</MenuItem>
))}
</Menu>
</div>
</NavStyle>
);
}
export default Nav;

118
components/nav.style.js
View File

@ -1,65 +1,65 @@
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%
);
padding: 20px;
position: fixed;
top: 0;
left: 0;
z-index: 10;
width: 100vw;
display: flex;
font-size: 1.5em;
align-items: center;
justify-content: space-between;
.title {
display: flex;
}
.links {
display: flex;
.link {
/* padding: 20px; */
margin-left: 10px;
color: #fff;
border-radius: 5px;
&:hover {
color: #111111;
background-color: #6ffc03;
}
}
@media (max-width: 900px) {
display: none;
}
}
.menu {
button {
color: white !important;
}
@media (min-width: 901px) {
display: none;
}
}
.indicator {
.circle {
height: 10px;
width: 10px;
border-radius: 100%;
background: rgb(52, 47, 50);
background: linear-gradient(
90deg,
rgba(52, 47, 50, 1) 0%,
rgba(96, 97, 103, 1) 60%
);
padding: 20px;
position: fixed;
top: 0;
left: 0;
z-index: 10;
width: 100vw;
display: flex;
font-size: 1.5em;
align-items: center;
justify-content: space-between;
.title {
display: flex;
}
.links {
display: flex;
.link {
/* padding: 20px; */
margin-left: 10px;
color: #fff;
border-radius: 5px;
&:hover {
color: #111111;
background-color: #6ffc03;
}
}
@media (max-width: 900px) {
display: none;
}
}
.menu {
button {
color: white !important;
}
@media (min-width: 901px) {
display: none;
}
}
.indicator {
.circle {
height: 10px;
width: 10px;
border-radius: 100%;
margin-top: 8px;
margin-left: 5px;
/* margin-right: auto;
margin-top: 8px;
margin-left: 5px;
/* margin-right: auto;
flex: start; */
}
.green {
background-color: #6ffc03;
}
.red {
background-color: #fc0703;
}
}
}
.green {
background-color: #6ffc03;
}
.red {
background-color: #fc0703;
}
}
`;

2
components/providers/cursor.js
View File

@ -1,4 +1,4 @@
// import { useRef, useEffect } from "react";
export default function CustomCursor() {
return <div className="cursor"></div>;
return <div className="cursor"></div>;
}

98
components/providers/cursor.style.jsx
View File

@ -1,57 +1,57 @@
import styled from "@emotion/styled";
export const CursorStyle = styled.div`
html {
cursor: url("data:image/svg+xml,%3Csvg height='8' width='8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' fill='%2364FFDA' r='2'/%3E%3C/svg%3E")
4 4,
auto;
}
html {
cursor: url("data:image/svg+xml,%3Csvg height='8' width='8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' fill='%2364FFDA' r='2'/%3E%3C/svg%3E")
4 4,
auto;
}
.cursor {
display: none;
position: fixed;
top: 0;
left: 0;
width: var(--width);
height: var(--height);
transform: translate(
calc(var(--x) - var(--width) / 2),
calc(var(--y) - var(--height) / 2)
);
transition: 150ms width cubic-bezier(0.39, 0.575, 0.565, 1),
150ms height cubic-bezier(0.39, 0.575, 0.565, 1),
150ms transform cubic-bezier(0.39, 0.575, 0.565, 1);
z-index: var(--zIndex);
pointer-events: none;
will-change: transform;
box-shadow: var(--boxShadow);
}
.cursor {
display: none;
position: fixed;
top: 0;
left: 0;
width: var(--width);
height: var(--height);
transform: translate(
calc(var(--x) - var(--width) / 2),
calc(var(--y) - var(--height) / 2)
);
transition: 150ms width cubic-bezier(0.39, 0.575, 0.565, 1),
150ms height cubic-bezier(0.39, 0.575, 0.565, 1),
150ms transform cubic-bezier(0.39, 0.575, 0.565, 1);
z-index: var(--zIndex);
pointer-events: none;
will-change: transform;
box-shadow: var(--boxShadow);
}
@media (pointer: fine) {
.cursor {
display: block;
}
}
@media (pointer: fine) {
.cursor {
display: block;
}
}
.cursor::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: var(--radius);
border: 2px solid #64ffda;
opacity: var(--scale);
-webkit-transform: scale(var(--scale));
transform: scale(var(--scale));
transition: 300ms opacity cubic-bezier(0.39, 0.575, 0.565, 1),
300ms transform cubic-bezier(0.39, 0.575, 0.565, 1),
150ms border-radius cubic-bezier(0.39, 0.575, 0.565, 1);
}
.cursor::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: var(--radius);
border: 2px solid #64ffda;
opacity: var(--scale);
-webkit-transform: scale(var(--scale));
transform: scale(var(--scale));
transition: 300ms opacity cubic-bezier(0.39, 0.575, 0.565, 1),
300ms transform cubic-bezier(0.39, 0.575, 0.565, 1),
150ms border-radius cubic-bezier(0.39, 0.575, 0.565, 1);
}
html:not(html:hover) .cursor::after {
opacity: 0;
transform: scale(0);
}
html:not(html:hover) .cursor::after {
opacity: 0;
transform: scale(0);
}
`;

66
components/qbadges.js
View File

@ -2,39 +2,39 @@ import { QBStyles } from "./qbadges.style";
import { qwiklabs as qb } from "config";
function qbadges() {
return (
<QBStyles>
<div>
<h1 className="title">Qwiklab Badges</h1>
<div className="default">
{qb.map((badge, index) => {
return (
<>
<div>
<div className="content">
<div className="content-description">
<img src={badge.image} />
</div>
<div className="content-title">
<h1>
<a
href={badge.url}
target="_blank"
rel="noopener noreferrer"
>
{badge.title}
</a>
</h1>
</div>
</div>
</div>
</>
);
})}
</div>
</div>
</QBStyles>
);
return (
<QBStyles>
<div>
<h1 className="title">Qwiklab Badges</h1>
<div className="default">
{qb.map((badge, index) => {
return (
<>
<div>
<div className="content">
<div className="content-description">
<img src={badge.image} />
</div>
<div className="content-title">
<h1>
<a
href={badge.url}
target="_blank"
rel="noopener noreferrer"
>
{badge.title}
</a>
</h1>
</div>
</div>
</div>
</>
);
})}
</div>
</div>
</QBStyles>
);
}
export default qbadges;

156
components/qbadges.style.jsx
View File

@ -1,82 +1,82 @@
import styled from "styled-components";
export const QBStyles = styled.div`
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding-top: 15vh;
background-image: url("images/background6.webp");
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-y: scroll !important;
height: 100vh;
.title {
font-size: 2rem;
font-weight: bold;
background-color: var(--color4);
color: var(--color3);
}
.default {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
/* height: 100vh; */
padding-bottom: 3em;
padding-top: 2em;
.content {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding-top: 2em;
padding-bottom: 2em;
&:hover {
filter: contrast(200%);
-webkit-transform: translateX(-5px) translateY(-5px);
transform: translateX(-5px) translateY(-5px);
transition: 1s ease;
}
.content-description {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.content-description img {
width: 225px;
}
.content-title {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
word-break: break-word;
white-space: pre-wrap;
-moz-white-space: pre-wrap;
justify-content: center;
align-items: center;
h1 {
font-size: 1.5em;
font-weight: bold;
color: var(--color7);
text-align: center;
margin: 0;
padding: 0;
a {
color: var(--color7);
text-decoration: none;
&:hover {
color: var(--color3);
}
}
}
}
}
}
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding-top: 15vh;
background-image: url("images/background6.webp");
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-y: scroll !important;
height: 100vh;
.title {
font-size: 2rem;
font-weight: bold;
background-color: var(--color4);
color: var(--color3);
}
.default {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
/* height: 100vh; */
padding-bottom: 3em;
padding-top: 2em;
.content {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding-top: 2em;
padding-bottom: 2em;
&:hover {
filter: contrast(200%);
-webkit-transform: translateX(-5px) translateY(-5px);
transform: translateX(-5px) translateY(-5px);
transition: 1s ease;
}
.content-description {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.content-description img {
width: 225px;
}
.content-title {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
word-break: break-word;
white-space: pre-wrap;
-moz-white-space: pre-wrap;
justify-content: center;
align-items: center;
h1 {
font-size: 1.5em;
font-weight: bold;
color: var(--color7);
text-align: center;
margin: 0;
padding: 0;
a {
color: var(--color7);
text-decoration: none;
&:hover {
color: var(--color3);
}
}
}
}
}
}
`;

47
components/resume.jsx
View File

@ -2,29 +2,32 @@ import React, { useEffect, useState, useRef } from "react";
import { ResumeStyle } from "./resume.style";
function Resume() {
const viewer = useRef(null);
const viewer = useRef(null);
useEffect(() => {
import("@pdftron/webviewer").then(() => {
WebViewer(
{
path: "webviewer/lib",
mobileRedirect: true,
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>
</ResumeStyle>
);
useEffect(() => {
import("@pdftron/webviewer").then(() => {
WebViewer(
{
path: "webviewer/lib",
mobileRedirect: true,
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>
</ResumeStyle>
);
}
export default Resume;

2
components/resume.style.jsx
View File

@ -1,5 +1,5 @@
import styled from "styled-components";
export const ResumeStyle = styled.div`
padding: 10%;
padding: 10%;
`;

30
components/skillCard.jsx
View File

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

184
components/skillCard.styled.js
View File

@ -1,100 +1,100 @@
import styled from "styled-components";
export default styled.div`
padding: 8px;
display: inline-flex;
/* box-shadow: 10px 9px 0px -3px #fffefe; */
.card {
background-color: var(--color1);
padding: 15px;
width: 100%;
/* min-width: 225px; */
max-width: 225px;
padding: 8px;
display: inline-flex;
/* box-shadow: 10px 9px 0px -3px #fffefe; */
.card {
background-color: var(--color1);
padding: 15px;
width: 100%;
/* min-width: 225px; */
max-width: 225px;
/* max-width: 10.7em; */
height: auto;
border-radius: 5px;
transition: 0.1s;
:hover {
transform: scale(1.1);
}
box-shadow: 46px 35px 22px -2px rgba(0, 0, 0, 0.1);
@media (max-width: 901px) {
max-width: 175px;
}
}
.card-logo {
float: right;
background-color: #fff;
border-radius: 100px;
display: flex;
align-items: center;
}
.title {
font-size: 1.2rem;
font-weight: bold;
color: var(--color3);
}
.description {
font-size: 1rem;
color: var(--color4);
/* width: 225px; */
}
.topSongs {
display: flex;
flex-direction: column;
}
.topSongs__song {
display: flex;
align-items: center;
justify-content: flex-start;
/* max-width: 10.7em; */
height: auto;
border-radius: 5px;
transition: 0.1s;
:hover {
transform: scale(1.1);
}
box-shadow: 46px 35px 22px -2px rgba(0, 0, 0, 0.1);
@media (max-width: 901px) {
max-width: 175px;
}
}
.card-logo {
float: right;
background-color: #fff;
border-radius: 100px;
display: flex;
align-items: center;
}
.title {
font-size: 1.2rem;
font-weight: bold;
color: var(--color3);
}
.description {
font-size: 1rem;
color: var(--color4);
/* width: 225px; */
}
.topSongs {
display: flex;
flex-direction: column;
}
.topSongs__song {
display: flex;
align-items: center;
justify-content: flex-start;
/* padding-right: 5px; */
flex-direction: row;
/* margin-bottom: 10px; */
}
.topSongs__song__info {
display: flex;
margin-left: 10px;
/* align-items: center; */
flex-direction: column;
.topSongs__song__info__name {
font-size: 1rem;
/* padding-right: 5px; */
flex-direction: row;
/* margin-bottom: 10px; */
}
.topSongs__song__info {
display: flex;
margin-left: 10px;
/* align-items: center; */
flex-direction: column;
.topSongs__song__info__name {
font-size: 1rem;
font-weight: bold;
color: var(--color4);
}
.topSongs__song__info__artist {
font-size: 0.9rem;
font-weight: bold;
color: var(--color4);
}
.topSongs__song__info__artist {
font-size: 0.9rem;
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);
}
.gh-act-icons {
img {
background-color: var(--color7);
}
}
.albumart {
padding-top: 5px;
width: 97%;
}
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);
}
.gh-act-icons {
img {
background-color: var(--color7);
}
}
.albumart {
padding-top: 5px;
width: 97%;
}
`;

168
components/skillComponents/github_events.jsx
View File

@ -2,88 +2,94 @@ import React from "react";
import SkillCard from "../skillCard";
function GitCommits({ title, image, evt1, evt2, evt3, url }) {
let ghLogo = "/images/github_events/GitIcon.png";
let ghLogo = "/images/github_events/GitIcon.png";
[evt1, evt2, evt3].map((evt) => {
if (evt?.type === "PushEvent") {
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";
} else if (evt?.type === "IssuesEvent") {
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.commitMsg =
evt.payload.ref_type + " " + evt.payload.ref + " deleted";
} else if (evt?.type === "IssueCommentEvent") {
evt.entTypeLogo =
"/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.commitMsg = evt.payload.ref_type;
} else if (evt?.type === "PullRequestEvent") {
evt.entTypeLogo =
"/images/github_events/github_pull_request_event_logo.png";
if (evt?.payload.action === "opened") {
evt.commitMsg = "Opened " + evt.payload.pull_request.title;
} else if (evt?.payload.action === "closed") {
evt.commitMsg = "Closed " + evt.payload.pull_request.title;
}
} else if (evt?.type === "ForkEvent") {
evt.entTypeLogo = "/images/github_events/github_fork_event_logo.png";
evt.commitMsg = "Forked " + evt.payload.forkee.full_name;
}
})
[evt1, evt2, evt3].map((evt) => {
if (evt?.type === "PushEvent") {
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";
} else if (evt?.type === "IssuesEvent") {
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.commitMsg =
evt.payload.ref_type + " " + evt.payload.ref + " deleted";
} else if (evt?.type === "IssueCommentEvent") {
evt.entTypeLogo =
"/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.commitMsg = evt.payload.ref_type;
} else if (evt?.type === "PullRequestEvent") {
evt.entTypeLogo =
"/images/github_events/github_pull_request_event_logo.png";
if (evt?.payload.action === "opened") {
evt.commitMsg = "Opened " + evt.payload.pull_request.title;
} else if (evt?.payload.action === "closed") {
evt.commitMsg = "Closed " + evt.payload.pull_request.title;
}
} else if (evt?.type === "ForkEvent") {
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}>
<div className="gh-cards">
<div className="description gh-act-icons">
<img src={ghLogo} width="20px" />{" "}
<img src={evt1?.entTypeLogo} height="20px" />
<br />
{evt1?.repo?.name}
</div>
<div className="description commit-msg">
{evt1?.commitMsg?.slice(0, 50)}
</div>
{/* <div className="description">{evt1?.created_at}</div> */}
</div>
<br />
<div className="gh-cards">
<div className="description gh-act-icons">
<img src={ghLogo} width="20px" />{" "}
<img src={evt2?.entTypeLogo} height="20px" />
<br />
{evt2?.repo?.name}
</div>
<div className="description commit-msg">
{evt2?.commitMsg?.slice(0, 50)}
</div>
{/* <div className="description">{evt2?.created_at}</div> */}
</div>
<br />
<div className="gh-cards">
<div className="description gh-act-icons">
<img src={ghLogo} width="20px" />{" "}
<img src={evt3?.entTypeLogo} height="20px" />
<br />
{evt3?.repo?.name}
</div>
<div className="description commit-msg">
{evt3?.commitMsg?.slice(0, 50)}
</div>
{/* <div className="description">{evt3?.created_at}</div> */}
</div>
</SkillCard>
);
return (
<SkillCard title={title} image={image} url={url}>
<div className="gh-cards">
<div className="description gh-act-icons">
<img src={ghLogo} width="20px" />{" "}
<img src={evt1?.entTypeLogo} height="20px" />
<br />
{evt1?.repo?.name}
</div>
<div className="description commit-msg">
{evt1?.commitMsg?.slice(0, 50)}
</div>
{/* <div className="description">{evt1?.created_at}</div> */}
</div>
<br />
<div className="gh-cards">
<div className="description gh-act-icons">
<img src={ghLogo} width="20px" />{" "}
<img src={evt2?.entTypeLogo} height="20px" />
<br />
{evt2?.repo?.name}
</div>
<div className="description commit-msg">
{evt2?.commitMsg?.slice(0, 50)}
</div>
{/* <div className="description">{evt2?.created_at}</div> */}
</div>
<br />
<div className="gh-cards">
<div className="description gh-act-icons">
<img src={ghLogo} width="20px" />{" "}
<img src={evt3?.entTypeLogo} height="20px" />
<br />
{evt3?.repo?.name}
</div>
<div className="description commit-msg">
{evt3?.commitMsg?.slice(0, 50)}
</div>
{/* <div className="description">{evt3?.created_at}</div> */}
</div>
</SkillCard>
);
}
export default GitCommits
export default GitCommits;

20
components/skillComponents/github_trophy.jsx
View File

@ -1,15 +1,15 @@
import React from "react";
import SkillCard from "../skillCard";
function GithubTrophySkillCard ({ title, image, bannerImage, url }) {
return (
<SkillCard title={title} image={image} url={url}>
<br />
<div className="description">
<img src={bannerImage} alt="" />
</div>
</SkillCard>
);
function GithubTrophySkillCard({ title, image, bannerImage, url }) {
return (
<SkillCard title={title} image={image} url={url}>
<br />
<div className="description">
<img src={bannerImage} alt="" />
</div>
</SkillCard>
);
}
export default GithubTrophySkillCard;
export default GithubTrophySkillCard;

38
components/skillComponents/github_user.jsx
View File

@ -4,26 +4,26 @@ import SkillCardStyle from "../skillCard.styled";
import { format } from "date-format-parse";
function GitHubSkillCard({
title,
image,
public_gists,
followers,
following,
public_repos,
created_at,
url,
title,
image,
public_gists,
followers,
following,
public_repos,
created_at,
url,
}) {
return (
<SkillCard title={title} image={image} url={url}>
<div className="description">Repos :- {public_repos}</div>
<div className="description">Followers :- {followers}</div>
<div className="description">Following :- {following}</div>
<div className="description">Gists :- {public_gists}</div>
<div className="description">
Joined On :- {format(created_at, "DD MMM YYYY")}
</div>
</SkillCard>
);
return (
<SkillCard title={title} image={image} url={url}>
<div className="description">Repos :- {public_repos}</div>
<div className="description">Followers :- {followers}</div>
<div className="description">Following :- {following}</div>
<div className="description">Gists :- {public_gists}</div>
<div className="description">
Joined On :- {format(created_at, "DD MMM YYYY")}
</div>
</SkillCard>
);
}
export default GitHubSkillCard;

38
components/skillComponents/hashnode_inst.jsx
View File

@ -4,28 +4,28 @@ import SkillCardStyle from "../skillCard.styled";
import { format, parse } from "date-format-parse";
function HashNodeSkillCard({
title,
image,
joinOn,
numPosts,
numFollowers,
publicationDomain,
numReactions,
url,
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">
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>
);
<div className="description"> Total Reactions : {numReactions}</div>
</SkillCard>
);
}
export default HashNodeSkillCard;

60
components/skillComponents/lastfm_current.jsx
View File

@ -3,33 +3,41 @@ import SkillCard from "../skillCard";
import useLastFM from "hooks/useLastFM";
function LastFMCurrentSkillCard({
title,
image,
empty,
artist,
albumImg,
name,
url,
title,
image,
empty,
artist,
albumImg,
name,
url,
}) {
const {status,song} = useLastFM();
const { status, song } = useLastFM();
if (status !== "playing") {
return (
<SkillCard title={title} image={image} url={url}>
Not listening to anything
</SkillCard>
);
}
return (
<SkillCard title={title} image={image} url={url}>
<div className="description">
{empty ? "No recent tracks" : `${song.artist} - ${song.name}`}
</div>
<div className="description">
{empty ? "" : <img src={song.art} alt={`${song.artist} - ${song.name}`} className="albumart"/>}
</div>
</SkillCard>
);
if (status !== "playing") {
return (
<SkillCard title={title} image={image} url={url}>
Not listening to anything
</SkillCard>
);
}
return (
<SkillCard title={title} image={image} url={url}>
<div className="description">
{empty ? "No recent tracks" : `${song.artist} - ${song.name}`}
</div>
<div className="description">
{empty ? (
""
) : (
<img
src={song.art}
alt={`${song.artist} - ${song.name}`}
className="albumart"
/>
)}
</div>
</SkillCard>
);
}
export default LastFMCurrentSkillCard;
export default LastFMCurrentSkillCard;

257
components/skillComponents/osu_bestScores.jsx
View File

@ -3,134 +3,137 @@ import SkillCard from "../skillCard";
import SkillCardStyle from "../skillCard.styled";
function OsuBestScoresSkillCard({
title,
image,
bestScore1,
bestScore2,
bestScore3,
bestScore4,
bestScore5,
url,
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>
);
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;

60
components/skillComponents/osu_user.jsx
View File

@ -4,36 +4,38 @@ import SkillCardStyle from "../skillCard.styled";
import { format, parse } from "date-format-parse";
function OsuUserSkillCard({
title,
image,
accuracy,
level,
pp_raw,
country,
pp_rank,
// countryRank,
join_date,
maximum_combo,
total_score,
url,
title,
image,
accuracy,
level,
pp_raw,
country,
pp_rank,
// countryRank,
join_date,
maximum_combo,
total_score,
url,
}) {
return (
<SkillCard title={title} image={image} url={url}>
<div className="description">Accuracy :- {Math.floor(accuracy)} %</div>
<div className="description">Level :- {Math.floor(level)}</div>
<div className="description">PP :- {Math.floor(pp_raw)}</div>
<div className="description">Country :- {country}</div>
{/* <div className="description">Country Rank :- #{countryRank}</div> */}
<div className="description">Global Rank :- #{pp_rank}</div>
<div className="description">Max Combo :- {maximum_combo}</div>
<div className="description">
Total Score :- {total_score?.toLocaleString()}
</div>
<div className="description">
Joined on : {format(join_date, "DD MMM YYYY")}
</div>
</SkillCard>
);
return (
<SkillCard title={title} image={image} url={url}>
<div className="description">
Accuracy :- {Math.floor(accuracy)} %
</div>
<div className="description">Level :- {Math.floor(level)}</div>
<div className="description">PP :- {Math.floor(pp_raw)}</div>
<div className="description">Country :- {country}</div>
{/* <div className="description">Country Rank :- #{countryRank}</div> */}
<div className="description">Global Rank :- #{pp_rank}</div>
<div className="description">Max Combo :- {maximum_combo}</div>
<div className="description">
Total Score :- {total_score?.toLocaleString()}
</div>
<div className="description">
Joined on : {format(join_date, "DD MMM YYYY")}
</div>
</SkillCard>
);
}
export default OsuUserSkillCard;

208
components/skillComponents/spotify_top_songs.jsx
View File

@ -4,106 +4,116 @@ import SkillCardStyle from "../skillCard.styled";
// import { format, parse } from "date-format-parse";
function SpotifyTopSkillCard({
title,
image,
topSongs1,
topSongs2,
topSongs3,
topSongs4,
topSongs5,
url,
title,
image,
topSongs1,
topSongs2,
topSongs3,
topSongs4,
topSongs5,
url,
}) {
return (
<SkillCard title={title} image={image} url={url}>
<div className="topSongs">
<div className="topSongs__song">
<div className="topSongs__song__image">
<a href={topSongs1?.external_urls.spotify}>
<img
src={topSongs1?.album?.images[0]?.url}
alt={topSongs1?.name}
width="60px"
/>
</a>
</div>
<div className="topSongs__song__info">
<div className="topSongs__song__info__name">{topSongs1?.name}</div>
<div className="topSongs__song__info__artist">
{topSongs1?.artists[0]?.name}
</div>
</div>
</div>
<div className="topSongs__song">
<div className="topSongs__song__image">
<a href={topSongs2?.external_urls.spotify}>
<img
src={topSongs2?.album?.images[0]?.url}
alt={topSongs2?.name}
width="60px"
/>
</a>
</div>
<div className="topSongs__song__info">
<div className="topSongs__song__info__name">{topSongs2?.name}</div>
<div className="topSongs__song__info__artist">
{topSongs2?.artists[0]?.name}
</div>
</div>
</div>
<div className="topSongs__song">
<div className="topSongs__song__image">
<a href={topSongs3?.external_urls.spotify}>
<img
src={topSongs3?.album?.images[0]?.url}
alt={topSongs3?.name}
width="60px"
/>
</a>
</div>
<div className="topSongs__song__info">
<div className="topSongs__song__info__name">{topSongs3?.name}</div>
<div className="topSongs__song__info__artist">
{topSongs3?.artists[0]?.name}
</div>
</div>
</div>
<div className="topSongs__song">
<div className="topSongs__song__image">
<a href={topSongs4?.external_urls.spotify}>
<img
src={topSongs4?.album?.images[0]?.url}
alt={topSongs4?.name}
width="60px"
/>
</a>
</div>
<div className="topSongs__song__info">
<div className="topSongs__song__info__name">{topSongs4?.name}</div>
<div className="topSongs__song__info__artist">
{topSongs4?.artists[0]?.name}
</div>
</div>
</div>
<div className="topSongs__song">
<div className="topSongs__song__image">
<a href={topSongs5?.external_urls.spotify}>
<img
src={topSongs5?.album?.images[0]?.url}
alt={topSongs5?.name}
width="60px"
/>
</a>
</div>
<div className="topSongs__song__info">
<div className="topSongs__song__info__name">{topSongs5?.name}</div>
<div className="topSongs__song__info__artist">
{topSongs5?.artists[0]?.name}
</div>
</div>
</div>
</div>
</SkillCard>
);
return (
<SkillCard title={title} image={image} url={url}>
<div className="topSongs">
<div className="topSongs__song">
<div className="topSongs__song__image">
<a href={topSongs1?.external_urls.spotify}>
<img
src={topSongs1?.album?.images[0]?.url}
alt={topSongs1?.name}
width="60px"
/>
</a>
</div>
<div className="topSongs__song__info">
<div className="topSongs__song__info__name">
{topSongs1?.name}
</div>
<div className="topSongs__song__info__artist">
{topSongs1?.artists[0]?.name}
</div>
</div>
</div>
<div className="topSongs__song">
<div className="topSongs__song__image">
<a href={topSongs2?.external_urls.spotify}>
<img
src={topSongs2?.album?.images[0]?.url}
alt={topSongs2?.name}
width="60px"
/>
</a>
</div>
<div className="topSongs__song__info">
<div className="topSongs__song__info__name">
{topSongs2?.name}
</div>
<div className="topSongs__song__info__artist">
{topSongs2?.artists[0]?.name}
</div>
</div>
</div>
<div className="topSongs__song">
<div className="topSongs__song__image">
<a href={topSongs3?.external_urls.spotify}>
<img
src={topSongs3?.album?.images[0]?.url}
alt={topSongs3?.name}
width="60px"
/>
</a>
</div>
<div className="topSongs__song__info">
<div className="topSongs__song__info__name">
{topSongs3?.name}
</div>
<div className="topSongs__song__info__artist">
{topSongs3?.artists[0]?.name}
</div>
</div>
</div>
<div className="topSongs__song">
<div className="topSongs__song__image">
<a href={topSongs4?.external_urls.spotify}>
<img
src={topSongs4?.album?.images[0]?.url}
alt={topSongs4?.name}
width="60px"
/>
</a>
</div>
<div className="topSongs__song__info">
<div className="topSongs__song__info__name">
{topSongs4?.name}
</div>
<div className="topSongs__song__info__artist">
{topSongs4?.artists[0]?.name}
</div>
</div>
</div>
<div className="topSongs__song">
<div className="topSongs__song__image">
<a href={topSongs5?.external_urls.spotify}>
<img
src={topSongs5?.album?.images[0]?.url}
alt={topSongs5?.name}
width="60px"
/>
</a>
</div>
<div className="topSongs__song__info">
<div className="topSongs__song__info__name">
{topSongs5?.name}
</div>
<div className="topSongs__song__info__artist">
{topSongs5?.artists[0]?.name}
</div>
</div>
</div>
</div>
</SkillCard>
);
}
export default SpotifyTopSkillCard;

85
components/skillComponents/twitter_tweets.jsx
View File

@ -3,42 +3,57 @@ import SkillCard from "../skillCard";
import { format } from "date-format-parse";
function TwitterTweetsSkillCard({
title,
image,
tweets1,
tweets2,
tweets3,
url,
title,
image,
tweets1,
tweets2,
tweets3,
url,
}) {
return (
<SkillCard title={title} image={image} url={url}>
<div className="skill-card-content">
Latest Tweet
<div className="skill-card-content-inner">
<a href={"https://twitter.com/Bravo68web/status/" + tweets1?.id}>
<div>{tweets1?.text}</div>
</a>
</div>
</div>
<br />
<div className="skill-card-content">
Previous Tweets
<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>
);
return (
<SkillCard title={title} image={image} url={url}>
<div className="skill-card-content">
Latest Tweet
<div className="skill-card-content-inner">
<a
href={
"https://twitter.com/Bravo68web/status/" +
tweets1?.id
}
>
<div>{tweets1?.text}</div>
</a>
</div>
</div>
<br />
<div className="skill-card-content">
Previous Tweets
<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;

38
components/skillComponents/twitter_user.jsx
View File

@ -4,28 +4,28 @@ import SkillCardStyle from "../skillCard.styled";
import { format } from "date-format-parse";
function TwitterUserSkillCard({
title,
image,
followers_count,
friends_count,
statuses_count,
// favourites_count,
created_at,
url,
title,
image,
followers_count,
friends_count,
statuses_count,
// favourites_count,
created_at,
url,
}) {
return (
<SkillCard title={title} image={image} url={url}>
<div className="description">Followers :- {followers_count}</div>
<div className="description">Following :- {friends_count}</div>
{/* <div className="description">
return (
<SkillCard title={title} image={image} url={url}>
<div className="description">Followers :- {followers_count}</div>
<div className="description">Following :- {friends_count}</div>
{/* <div className="description">
Total Liked Tweets :- {favourites_count}
</div> */}
<div className="description">Total Tweets :- {statuses_count}</div>
<div className="description">
Joined On :- {format(created_at, "DD MMM YYYY")}
</div>
</SkillCard>
);
<div className="description">Total Tweets :- {statuses_count}</div>
<div className="description">
Joined On :- {format(created_at, "DD MMM YYYY")}
</div>
</SkillCard>
);
}
export default TwitterUserSkillCard;

54
components/skillComponents/wakatime_lang.jsx
View File

@ -4,34 +4,34 @@ import SkillCardStyle from "../skillCard.styled";
import { format, parse } from "date-format-parse";
function WakatimeTopLangSkillCard({
title,
image,
topLang1,
topLang2,
topLang3,
topLang4,
topLang5,
url,
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>
);
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;

42
components/skillComponents/wakatime_user.jsx
View File

@ -4,28 +4,28 @@ 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,
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 Daily 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>
);
return (
<SkillCard title={title} image={image} url={url}>
<div className="description">Total Code time :- {total_time}</div>
<div className="description">
Average Daily Code time :- {average_weekly_time}
</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;

405
components/skills.jsx
View File

@ -21,193 +21,232 @@ import LastFMCurrentSkillCard from "./skillComponents/lastfm_current";
import GitHubUserEvtSkillCard from "./skillComponents/github_events";
function Skills() {
const [skills, setSkills] = useState({});
const [loading, setLoading] = useState(true);
const [skills, setSkills] = useState({});
const [loading, setLoading] = useState(true);
async function requestAPIS() {
await APISDK.req();
APISDK.data.logo = {
osu: `https://www.pngkit.com/png/full/345-3451155_osu-logo.png`,
github: `https://www.freepnglogos.com/uploads/512x512-logo/512x512-transparent-logo-github-logo-24.png`,
spotify: `https://www.freepnglogos.com/uploads/spotify-logo-png/spotify-icon-marilyn-scott-0.png`,
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: `/images/brandlogos/WakaTime-logo-vector-01.svg`,
lastfm: "/images/brandlogos/Lastfm-icon-vector-03.svg",
twitter:
"https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png",
};
setSkills(APISDK.data);
setLoading(false);
}
async function requestAPIS() {
await APISDK.req();
APISDK.data.logo = {
osu: `https://www.pngkit.com/png/full/345-3451155_osu-logo.png`,
github: `https://www.freepnglogos.com/uploads/512x512-logo/512x512-transparent-logo-github-logo-24.png`,
spotify: `https://www.freepnglogos.com/uploads/spotify-logo-png/spotify-icon-marilyn-scott-0.png`,
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: `/images/brandlogos/WakaTime-logo-vector-01.svg`,
lastfm: "/images/brandlogos/Lastfm-icon-vector-03.svg",
twitter:
"https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png",
};
setSkills(APISDK.data);
setLoading(false);
}
useEffect(() => {
requestAPIS();
}, [loading, APISDK]);
useEffect(() => {
requestAPIS();
}, [loading, APISDK]);
if (loading) {
return (
<SkillsStyle>
<Box sx={{ width: "60%" }}>
<LinearProgress />
Requesting Live API data...
</Box>
<br />
</SkillsStyle>
);
} else {
let lastFMempty = true;
if (skills?.lastfm_current?.recenttracks?.track?.length > 0) {
lastFMempty = false;
}
if (loading) {
return (
<SkillsStyle>
<Box sx={{ width: "60%" }}>
<LinearProgress />
Requesting Live API data...
</Box>
<br />
</SkillsStyle>
);
} else {
let lastFMempty = true;
if (skills?.lastfm_current?.recenttracks?.track?.length > 0) {
lastFMempty = false;
}
return (
<div>
{/* <Cursor /> */}
{!loading && (
<SkillsStyle>
<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}
following={skills?.gh_user?.data?.following}
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}
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}
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}
/>
<TwitterUserSkillCard
title={"Twitter Stats"}
url={"https://twitter.com/Bravo68web"}
image={skills?.logo?.twitter}
followers_count={
skills?.twitter_user?.public_metrics?.followers_count
}
friends_count={
skills?.twitter_user?.public_metrics?.following_count
}
statuses_count={
skills?.twitter_user?.public_metrics?.tweet_count
}
created_at={skills?.twitter_user?.created_at}
/>
<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]}
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}
average_weekly_time={
skills?.wakatime_stats?.data
?.human_readable_daily_average_including_other_language
}
total_weekly_time={
skills?.wakatime_stats?.data
?.human_readable_total_including_other_language
}
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}
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]}
/>
<TwitterTweetsSkillCard
title={"Twitter Tweets"}
url={"https://twitter.com/Bravo68web"}
image={skills?.logo?.twitter}
tweets1={skills?.twitter_tweets?.[0]}
tweets2={skills?.twitter_tweets?.[1]}
tweets3={skills?.twitter_tweets?.[2]}
/>
<WakatimeTopLangSkillCard
title={"Wakatime Top Languages"}
url={"https://wakatime.com/@bravo68web"}
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?.recenttracks?.track?.[0]?.artist[
"#text"
]
}
name={skills?.lastfm_current?.recenttracks?.track?.[0]?.name}
album={
skills?.lastfm_current?.recenttracks?.track?.[0]?.album[
"#text"
]
}
albumImg={
skills?.lastfm_current?.recenttracks?.track?.[0].image[1][
"#text"
]
}
/>
<GitHubUserEvtSkillCard
title={"GitHub User Events"}
url={"https://github.com/bravo68web"}
image={skills?.logo?.github}
evt1={skills?.gh_events?.data?.[0]}
evt2={skills?.gh_events?.data?.[1]}
evt3={skills?.gh_events?.data?.[2]}
evt4={skills?.gh_events?.data?.[3]}
evt5={skills?.gh_events?.data?.[4]}
/>
</div>
</SkillsStyle>
)}
</div>
);
}
return (
<div>
{/* <Cursor /> */}
{!loading && (
<SkillsStyle>
<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}
following={skills?.gh_user?.data?.following}
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
}
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
}
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
}
/>
<TwitterUserSkillCard
title={"Twitter Stats"}
url={"https://twitter.com/Bravo68web"}
image={skills?.logo?.twitter}
followers_count={
skills?.twitter_user?.public_metrics
?.followers_count
}
friends_count={
skills?.twitter_user?.public_metrics
?.following_count
}
statuses_count={
skills?.twitter_user?.public_metrics
?.tweet_count
}
created_at={skills?.twitter_user?.created_at}
/>
<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]
}
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
}
average_weekly_time={
skills?.wakatime_stats?.data
?.human_readable_daily_average_including_other_language
}
total_weekly_time={
skills?.wakatime_stats?.data
?.human_readable_total_including_other_language
}
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
}
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]}
/>
<TwitterTweetsSkillCard
title={"Twitter Tweets"}
url={"https://twitter.com/Bravo68web"}
image={skills?.logo?.twitter}
tweets1={skills?.twitter_tweets?.[0]}
tweets2={skills?.twitter_tweets?.[1]}
tweets3={skills?.twitter_tweets?.[2]}
/>
<WakatimeTopLangSkillCard
title={"Wakatime Top Languages"}
url={"https://wakatime.com/@bravo68web"}
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?.recenttracks
?.track?.[0]?.artist["#text"]
}
name={
skills?.lastfm_current?.recenttracks
?.track?.[0]?.name
}
album={
skills?.lastfm_current?.recenttracks
?.track?.[0]?.album["#text"]
}
albumImg={
skills?.lastfm_current?.recenttracks
?.track?.[0].image[1]["#text"]
}
/>
<GitHubUserEvtSkillCard
title={"GitHub User Events"}
url={"https://github.com/bravo68web"}
image={skills?.logo?.github}
evt1={skills?.gh_events?.data?.[0]}
evt2={skills?.gh_events?.data?.[1]}
evt3={skills?.gh_events?.data?.[2]}
evt4={skills?.gh_events?.data?.[3]}
evt5={skills?.gh_events?.data?.[4]}
/>
</div>
</SkillsStyle>
)}
</div>
);
}
}
export default Skills;

368
components/skills.style.js
View File

@ -1,213 +1,213 @@
import styled from "styled-components";
export default styled.div`
display: flex;
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-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
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-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
.mainboard__container {
width: 100%;
}
@media (min-width: 0px) and (max-width: 755px) {
.mainboard__container {
max-width: 504px;
column-count: 2;
}
}
.mainboard__container {
width: 100%;
}
@media (min-width: 0px) and (max-width: 755px) {
.mainboard__container {
max-width: 504px;
column-count: 2;
}
}
@media (min-width: 756px) and (max-width: 1007px) {
.mainboard__container {
max-width: 756px;
column-count: 3;
}
}
@media (min-width: 756px) and (max-width: 1007px) {
.mainboard__container {
max-width: 756px;
column-count: 3;
}
}
@media (min-width: 1008px) and (max-width: 1259px) {
.mainboard__container {
max-width: 1008px;
column-count: 4;
}
}
@media (min-width: 1008px) and (max-width: 1259px) {
.mainboard__container {
max-width: 1008px;
column-count: 4;
}
}
@media (min-width: 1260px) and (max-width: 1511px) {
.mainboard__container {
max-width: 1260px;
column-count: 5;
}
}
@media (min-width: 1260px) and (max-width: 1511px) {
.mainboard__container {
max-width: 1260px;
column-count: 5;
}
}
@media (min-width: 1512px) and (max-width: 1763px) {
.mainboard__container {
width: 1512px;
column-count: 6;
}
}
@media (min-width: 1512px) and (max-width: 1763px) {
.mainboard__container {
width: 1512px;
column-count: 6;
}
}
@media (min-width: 1764px) and (max-width: 2015px) {
.mainboard__container {
width: 1764px;
column-count: 7;
}
}
@media (min-width: 1764px) and (max-width: 2015px) {
.mainboard__container {
width: 1764px;
column-count: 7;
}
}
@media (min-width: 2016px) and (max-width: 2267px) {
.mainboard__container {
width: 2016px;
column-count: 8;
}
}
@media (min-width: 2016px) and (max-width: 2267px) {
.mainboard__container {
width: 2016px;
column-count: 8;
}
}
@media (min-width: 2268px) and (max-width: 2519px) {
.mainboard__container {
width: 2268px;
column-count: 9;
}
}
@media (min-width: 2268px) and (max-width: 2519px) {
.mainboard__container {
width: 2268px;
column-count: 9;
}
}
@media (min-width: 2520px) and (max-width: 2771px) {
.mainboard__container {
width: 2520px;
column-count: 10;
}
}
@media (min-width: 2520px) and (max-width: 2771px) {
.mainboard__container {
width: 2520px;
column-count: 10;
}
}
@media (min-width: 2772px) and (max-width: 3023px) {
.mainboard__container {
width: 2772px;
column-count: 11;
}
}
@media (min-width: 2772px) and (max-width: 3023px) {
.mainboard__container {
width: 2772px;
column-count: 11;
}
}
@media (min-width: 3024px) and (max-width: 3275px) {
.mainboard__container {
width: 3024px;
column-count: 12;
}
}
@media (min-width: 3024px) and (max-width: 3275px) {
.mainboard__container {
width: 3024px;
column-count: 12;
}
}
@media (min-width: 3276px) and (max-width: 3527px) {
.mainboard__container {
width: 3276px;
column-count: 13;
}
}
@media (min-width: 3276px) and (max-width: 3527px) {
.mainboard__container {
width: 3276px;
column-count: 13;
}
}
@media (min-width: 3528px) and (max-width: 3779px) {
.mainboard__container {
width: 3528px;
column-count: 14;
}
}
@media (min-width: 3528px) and (max-width: 3779px) {
.mainboard__container {
width: 3528px;
column-count: 14;
}
}
@media (min-width: 3780px) and (max-width: 4031px) {
.mainboard__container {
width: 3780px;
column-count: 15;
}
}
@media (min-width: 3780px) and (max-width: 4031px) {
.mainboard__container {
width: 3780px;
column-count: 15;
}
}
@media (min-width: 4032px) and (max-width: 4283px) {
.mainboard__container {
width: 4032px;
column-count: 16;
}
}
@media (min-width: 4032px) and (max-width: 4283px) {
.mainboard__container {
width: 4032px;
column-count: 16;
}
}
@media (min-width: 4284px) and (max-width: 4535px) {
.mainboard__container {
width: 4284px;
column-count: 17;
}
}
@media (min-width: 4284px) and (max-width: 4535px) {
.mainboard__container {
width: 4284px;
column-count: 17;
}
}
@media (min-width: 4536px) and (max-width: 4787px) {
.mainboard__container {
width: 4536px;
column-count: 18;
}
}
@media (min-width: 4536px) and (max-width: 4787px) {
.mainboard__container {
width: 4536px;
column-count: 18;
}
}
@media (min-width: 4788px) and (max-width: 5039px) {
.mainboard__container {
width: 4788px;
column-count: 19;
}
}
@media (min-width: 4788px) and (max-width: 5039px) {
.mainboard__container {
width: 4788px;
column-count: 19;
}
}
@media (min-width: 5040px) and (max-width: 5291px) {
.mainboard__container {
width: 5040px;
column-count: 20;
}
}
@media (min-width: 5040px) and (max-width: 5291px) {
.mainboard__container {
width: 5040px;
column-count: 20;
}
}
@media (min-width: 5292px) and (max-width: 5543px) {
.mainboard__container {
width: 5292px;
column-count: 21;
}
}
@media (min-width: 5292px) and (max-width: 5543px) {
.mainboard__container {
width: 5292px;
column-count: 21;
}
}
@media (min-width: 5544) and (max-width: 5795px) {
.mainboard__container {
width: 5544px;
column-count: 22;
}
}
@media (min-width: 5544) and (max-width: 5795px) {
.mainboard__container {
width: 5544px;
column-count: 22;
}
}
@media (min-width: 5796px) and (max-width: 6047px) {
.mainboard__container {
width: 5796px;
column-count: 23;
}
}
@media (min-width: 5796px) and (max-width: 6047px) {
.mainboard__container {
width: 5796px;
column-count: 23;
}
}
@media (min-width: 6048px) and (max-width: 6299px) {
.mainboard__container {
width: 6048px;
column-count: 24;
}
}
@media (min-width: 6048px) and (max-width: 6299px) {
.mainboard__container {
width: 6048px;
column-count: 24;
}
}
@media (min-width: 6300px) and (max-width: 6551px) {
.mainboard__container {
width: 6300px;
column-count: 25;
}
}
@media (min-width: 6552px) and (max-width: 6803px) {
.mainboard__container {
width: 6552px;
column-count: 26;
}
}
@media (min-width: 6300px) and (max-width: 6551px) {
.mainboard__container {
width: 6300px;
column-count: 25;
}
}
@media (min-width: 6552px) and (max-width: 6803px) {
.mainboard__container {
width: 6552px;
column-count: 26;
}
}
@media (min-width: 6804px) and (max-width: 7055px) {
.mainboard__container {
width: 6804px;
column-count: 27;
}
}
@media (min-width: 7056px) and (max-width: 7307px) {
.mainboard__container {
width: 7056px;
column-count: 28;
}
}
@media (min-width: 7308px) and (max-width: 7559px) {
.mainboard__container {
width: 7308px;
column-count: 29;
}
}
@media (min-width: 6804px) and (max-width: 7055px) {
.mainboard__container {
width: 6804px;
column-count: 27;
}
}
@media (min-width: 7056px) and (max-width: 7307px) {
.mainboard__container {
width: 7056px;
column-count: 28;
}
}
@media (min-width: 7308px) and (max-width: 7559px) {
.mainboard__container {
width: 7308px;
column-count: 29;
}
}
`;

54
components/status.jsx
View File

@ -4,32 +4,28 @@ import Box from "@mui/material/Box";
import LinearProgress from "@mui/material/LinearProgress";
export default function Status() {
const [status, setStatus] = useState({});
const [loading, setLoading] = useState(true);
async function requestStatus() {
await axios.get("/health/health").then((res) => {
setStatus(res.data);
setLoading(false);
});
}
useEffect(() => {
requestStatus();
}, [loading]);
if (loading) {
return (
<Box sx={{ width: "60%" }}>
<LinearProgress />
Requesting Live API data...
</Box>
);
} else {
return (
<div>
{(status.status)}
</div>
);
}
}
const [status, setStatus] = useState({});
const [loading, setLoading] = useState(true);
async function requestStatus() {
await axios.get("/health/health").then((res) => {
setStatus(res.data);
setLoading(false);
});
}
useEffect(() => {
requestStatus();
}, [loading]);
if (loading) {
return (
<Box sx={{ width: "60%" }}>
<LinearProgress />
Requesting Live API data...
</Box>
);
} else {
return <div>{status.status}</div>;
}
}

76
components/tootCard.js
View File

@ -3,43 +3,45 @@ import ArtCardStyle from "./tootCard.style";
import { compile } from "html-to-text";
function SkillCard({ content, created_at, url, image }) {
const contents = [content];
const options = {
wordwrap: 10,
limits: {
ellipsis: " ...",
maxInputLength: "200",
},
longWordSplit: {
forceWrapOnLimit: true,
wrapCharacters: ["-", "/"],
},
};
const compiledConvert = compile(options);
const texts = contents.map(compiledConvert);
return (
<div>
{content && (
<div>
<a href={url}>
<ArtCardStyle>
<div className="card">
{image && (
<div className="card-logo">
<img src={image} height="30" />
</div>
)}
<div className="content">&quot;{texts.join("\n")}&quot;</div>
<div className="type">
# {format(created_at, "DD MMM YYYY")}
</div>
</div>
</ArtCardStyle>
</a>
</div>
)}
</div>
);
const contents = [content];
const options = {
wordwrap: 10,
limits: {
ellipsis: " ...",
maxInputLength: "200",
},
longWordSplit: {
forceWrapOnLimit: true,
wrapCharacters: ["-", "/"],
},
};
const compiledConvert = compile(options);
const texts = contents.map(compiledConvert);
return (
<div>
{content && (
<div>
<a href={url}>
<ArtCardStyle>
<div className="card">
{image && (
<div className="card-logo">
<img src={image} height="30" />
</div>
)}
<div className="content">
&quot;{texts.join("\n")}&quot;
</div>
<div className="type">
# {format(created_at, "DD MMM YYYY")}
</div>
</div>
</ArtCardStyle>
</a>
</div>
)}
</div>
);
}
export default SkillCard;

54
components/tootCard.style.jsx
View File

@ -1,32 +1,32 @@
import styled from "styled-components";
export default styled.div`
padding: 5%;
width: 230px;
height: 100%;
box-sizing: border-box;
background-color: #aa78f6;
border-radius: 5px;
box-shadow: 10px 9px 0px -3px #7b3ea7;
margin: 8px;
align-content: stretch;
* {
margin-top: inherit;
}
.type {
color: #9bdcf0;
/* padding: 4px; */
}
.card-logo {
float: inline-end;
border-radius: 100px;
display: flex;
align-items: center;
}
padding: 5%;
width: 230px;
height: 100%;
box-sizing: border-box;
background-color: #aa78f6;
border-radius: 5px;
box-shadow: 10px 9px 0px -3px #7b3ea7;
margin: 8px;
align-content: stretch;
* {
margin-top: inherit;
}
.type {
color: #9bdcf0;
/* padding: 4px; */
}
.card-logo {
float: inline-end;
border-radius: 100px;
display: flex;
align-items: center;
}
// On hover of the card, the card will grow in size
&:hover {
transform: scale(1.05);
transition: 0.3s;
}
// On hover of the card, the card will grow in size
&:hover {
transform: scale(1.05);
transition: 0.3s;
}
`;

100
components/toots.jsx
View File

@ -6,58 +6,56 @@ import SkillsStyle from "./skills.style";
import Box from "@mui/material/Box";
import LinearProgress from "@mui/material/LinearProgress";
function Toots () {
const [skills, setSkills] = useState({});
const [loading, setLoading] = useState(true);
function Toots() {
const [skills, setSkills] = useState({});
const [loading, setLoading] = useState(true);
async function requestAPIS() {
await APISDK.req();
APISDK.data.logo = {
masto: `https://cdn.fosstodon.org/accounts/avatars/000/028/400/original/324cba4cb379bd4e.png`,
};
setSkills(APISDK.data.masto_status);
setLoading(false);
}
async function requestAPIS() {
await APISDK.req();
APISDK.data.logo = {
masto: `https://cdn.fosstodon.org/accounts/avatars/000/028/400/original/324cba4cb379bd4e.png`,
};
setSkills(APISDK.data.masto_status);
setLoading(false);
}
useEffect(() => {
requestAPIS();
}, [loading]);
let image = skills?.logo?.masto;
if (loading) {
return (
<SkillsStyle>
<Box sx={{ width: "60%" }}>
<LinearProgress />
Fetching Toots from Fosstodon...
</Box>
<br />
</SkillsStyle>
);
} else {
return (
<>
<ArtTitleStyle>
<div className="title-bar">
Fosstodon Status
</div>
</ArtTitleStyle>
<div className="mainboard__container">
{skills && (
<ArtStyle>
{skills?.data?.map((project, index) => {
project.image = image;
return (
<>
<SkillCard {...project} />
</>
);
})}
</ArtStyle>
)}
</div>
</>
);
}
useEffect(() => {
requestAPIS();
}, [loading]);
let image = skills?.logo?.masto;
if (loading) {
return (
<SkillsStyle>
<Box sx={{ width: "60%" }}>
<LinearProgress />
Fetching Toots from Fosstodon...
</Box>
<br />
</SkillsStyle>
);
} else {
return (
<>
<ArtTitleStyle>
<div className="title-bar">Fosstodon Status</div>
</ArtTitleStyle>
<div className="mainboard__container">
{skills && (
<ArtStyle>
{skills?.data?.map((project, index) => {
project.image = image;
return (
<>
<SkillCard {...project} />
</>
);
})}
</ArtStyle>
)}
</div>
</>
);
}
}
export default Toots;
export default Toots;

38
components/toots.style.jsx
View File

@ -1,25 +1,25 @@
import styled from "styled-components";
export const ArtStyle = styled.div`
padding: 100px 50px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
overflow-y: auto;
background-image: url("/images/background7.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 100px 50px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
overflow-y: auto;
background-image: url("/images/background7.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
`;
export const ArtTitleStyle = styled.div`
font-size: 2.5rem;
font-weight: 700;
color: #fff;
text-align: center;
margin-bottom: 18px;
padding-top: 90px;
`
font-size: 2.5rem;
font-weight: 700;
color: #fff;
text-align: center;
margin-bottom: 18px;
padding-top: 90px;
`;

78
components/vsexts.jsx
View File

@ -2,44 +2,46 @@ import { ExtraStyles } from "./vsexts.style";
import { vsExts } from "config";
function vsExtsShow() {
return (
<ExtraStyles>
<div>
<h1 className="title">VS Code Extensions</h1>
<div className="default">
{vsExts.map((content, index) => {
return (
<div key={index}>
<div className="content">
<div className="content-description">
<a
href={content.url}
target="_blank"
rel="noopener noreferrer"
>
<img src={content.image} />
</a>
</div>
<div className="content-title">
<h1>
<a
href={content.url}
target="_blank"
rel="noopener noreferrer"
>
{content.name}
</a>
</h1>
<h2 className="tags">#{content.type}</h2>
</div>
</div>
</div>
);
})}
</div>
</div>
</ExtraStyles>
);
return (
<ExtraStyles>
<div>
<h1 className="title">VS Code Extensions</h1>
<div className="default">
{vsExts.map((content, index) => {
return (
<div key={index}>
<div className="content">
<div className="content-description">
<a
href={content.url}
target="_blank"
rel="noopener noreferrer"
>
<img src={content.image} />
</a>
</div>
<div className="content-title">
<h1>
<a
href={content.url}
target="_blank"
rel="noopener noreferrer"
>
{content.name}
</a>
</h1>
<h2 className="tags">
#{content.type}
</h2>
</div>
</div>
</div>
);
})}
</div>
</div>
</ExtraStyles>
);
}
export default vsExtsShow;

188
components/vsexts.style.js
View File

@ -1,98 +1,98 @@
import styled from "styled-components";
export const ExtraStyles = styled.div`
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding-top: 15vh;
background-image: url("images/background3.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-y: scroll !important;
height: 100vh;
.title {
font-size: 2rem;
font-weight: bold;
background-color: var(--color4);
color: var(--color3);
}
.default {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
/* height: 100vh; */
padding-bottom: 3em;
padding-top: 2em;
.content {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding-top: 2em;
padding-bottom: 2em;
&:hover {
filter: contrast(200%);
-webkit-transform: translateX(-5px) translateY(-5px);
transform: translateX(-5px) translateY(-5px);
transition: 1s ease;
background-color: var(--color3);
color: var(--color7);
border-radius: 1em;
}
.content-description {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.content-description img {
width: 100px;
}
.content-title {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
h1 {
font-size: 1.5em;
font-weight: bold;
color: var(--color7);
text-align: center;
margin: 0;
padding: 0;
a {
color: var(--color7);
text-decoration: none;
&:hover {
color: var(--color7);
}
}
}
}
.tags {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
color: var(--color5);
h2 {
font-size: 1em;
font-weight: bold;
text-align: center;
margin: 0;
padding: 0;
}
}
}
}
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding-top: 15vh;
background-image: url("images/background3.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-y: scroll !important;
height: 100vh;
.title {
font-size: 2rem;
font-weight: bold;
background-color: var(--color4);
color: var(--color3);
}
.default {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
/* height: 100vh; */
padding-bottom: 3em;
padding-top: 2em;
.content {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding-top: 2em;
padding-bottom: 2em;
&:hover {
filter: contrast(200%);
-webkit-transform: translateX(-5px) translateY(-5px);
transform: translateX(-5px) translateY(-5px);
transition: 1s ease;
background-color: var(--color3);
color: var(--color7);
border-radius: 1em;
}
.content-description {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.content-description img {
width: 100px;
}
.content-title {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
h1 {
font-size: 1.5em;
font-weight: bold;
color: var(--color7);
text-align: center;
margin: 0;
padding: 0;
a {
color: var(--color7);
text-decoration: none;
&:hover {
color: var(--color7);
}
}
}
}
.tags {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
color: var(--color5);
h2 {
font-size: 1em;
font-weight: bold;
text-align: center;
margin: 0;
padding: 0;
}
}
}
}
`;

2116
config.js
View File

File diff suppressed because it is too large Load Diff

4
handlers/axios.js
View File

@ -1,6 +1,6 @@
import axios from "axios";
export default axios.create({
baseURL: "https://api.b68.dev",
// baseURL: "http://localhost:9000",
baseURL: "https://api.b68.dev",
// baseURL: "http://localhost:9000",
});

58
handlers/requester.js
View File

@ -1,38 +1,38 @@
import axios from "./axios";
export const tempEndpoint = async (endpoint, data) => {
let response = [false, { error: "Error" }];
let response = [false, { error: "Error" }];
let reqPromise = axios
.get(endpoint)
.then((res) => {
data.github = res.data;
response = [true, res.data];
})
.catch((err) => {
console.error(err);
response = [false, err];
});
await Promise.all([reqPromise]);
return response;
let reqPromise = axios
.get(endpoint)
.then((res) => {
data.github = res.data;
response = [true, res.data];
})
.catch((err) => {
console.error(err);
response = [false, err];
});
await Promise.all([reqPromise]);
return response;
};
export const requester = async (configs, data) => {
let requests = [];
for (const element of configs) {
const { endpoint, name } = element;
data[name] = {};
let request = axios
.get(endpoint)
.then((res) => {
data[name] = res.data;
})
.catch((err) => {
console.error(err);
data[name].error = err;
});
let requests = [];
for (const element of configs) {
const { endpoint, name } = element;
data[name] = {};
let request = axios
.get(endpoint)
.then((res) => {
data[name] = res.data;
})
.catch((err) => {
console.error(err);
data[name].error = err;
});
requests.push(request);
}
return await Promise.all(requests);
requests.push(request);
}
return await Promise.all(requests);
};

138
handlers/sdk.js
View File

@ -1,73 +1,73 @@
import { requester } from "./requester";
export const APISDK = {
data: {},
async req() {
await requester(
[
{
endpoint: "/me/github/user",
name: "gh_user",
},
{
endpoint: "/me/discord/profile",
name: "discord_activity",
},
{
endpoint: "/me/gaming/osu/user",
name: "osu_user",
},
{
endpoint: "/me/gaming/osu/best",
name: "osu_bestScores",
},
{
endpoint: "/me/spotify/top",
name: "spotify_top_songs",
},
{
endpoint: "/me/wakatime/codeTimeAllTime",
name: "wakatime_alltime",
},
{
endpoint: "/me/wakatime/codeStatsLast7Days",
name: "wakatime_stats",
},
{
endpoint: "/me/wakatime/LanguageUsageInLast7Days",
name: "wakatime_lang",
},
{
endpoint: "/me/hashnode/",
name: "hn_user",
},
{
endpoint: "/me/twitter/profile",
name: "twitter_user",
},
{
endpoint: "/me/twitter/tweets",
name: "twitter_tweets",
},
{
endpoint: "/me/lastfm/current",
name: "lastfm_current",
},
{
endpoint: "/me/github/events",
name: "gh_events",
},
{
endpoint: "/me/vscode/",
name: "vscode",
},
{
endpoint: "/me/mastodon/statuses",
name: "masto_status",
},
],
this.data
);
// return tempEndpoint("https://api.github.com/users/bravo68web", this.data);
},
data: {},
async req() {
await requester(
[
{
endpoint: "/me/github/user",
name: "gh_user",
},
{
endpoint: "/me/discord/profile",
name: "discord_activity",
},
{
endpoint: "/me/gaming/osu/user",
name: "osu_user",
},
{
endpoint: "/me/gaming/osu/best",
name: "osu_bestScores",
},
{
endpoint: "/me/spotify/top",
name: "spotify_top_songs",
},
{
endpoint: "/me/wakatime/codeTimeAllTime",
name: "wakatime_alltime",
},
{
endpoint: "/me/wakatime/codeStatsLast7Days",
name: "wakatime_stats",
},
{
endpoint: "/me/wakatime/LanguageUsageInLast7Days",
name: "wakatime_lang",
},
{
endpoint: "/me/hashnode/",
name: "hn_user",
},
{
endpoint: "/me/twitter/profile",
name: "twitter_user",
},
{
endpoint: "/me/twitter/tweets",
name: "twitter_tweets",
},
{
endpoint: "/me/lastfm/current",
name: "lastfm_current",
},
{
endpoint: "/me/github/events",
name: "gh_events",
},
{
endpoint: "/me/vscode/",
name: "vscode",
},
{
endpoint: "/me/mastodon/statuses",
name: "masto_status",
},
],
this.data
);
// return tempEndpoint("https://api.github.com/users/bravo68web", this.data);
},
};

110
hooks/useLastFM.js
View File

@ -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,
) => {
if (!body) {
return {
status: 'connecting',
song: null,
};
}
const lastSong = body.recenttracks.track?.[0];
if (!lastSong || !lastSong['@attr']?.nowplaying) {
return {
status: 'idle',
song: null,
};
}
const image = lastSong.image.find(i => {
return i.size === imageSize;
});
return {
status: 'playing',
song: {
name: lastSong.name,
artist: lastSong.artist['#text'],
art: image?.['#text'] ?? lastSong.image[0]['#text'],
url: lastSong.url,
album: lastSong.album['#text'],
},
};
}
const parseSong = (body, imageSize) => {
if (!body) {
return {
status: "connecting",
song: null,
};
}
const useLastFM = () =>{
const [status,setStatus] = useState("idle")
const [song,setSong] = useState();
const lastSong = body.recenttracks.track?.[0];
const getStatus = async () =>{
if (!lastSong || !lastSong["@attr"]?.nowplaying) {
return {
status: "idle",
song: null,
};
}
axios.get("/me/lastfm/current").then((res)=>{
const {status, song}=
parseSong(res.data, "extralarge")
setSong(song)
setStatus(status)
})
}
useEffect(()=>{
const image = lastSong.image.find((i) => {
return i.size === imageSize;
});
const interval = setInterval(()=>{
getStatus()
}, 3000)
return {
status: "playing",
song: {
name: lastSong.name,
artist: lastSong.artist["#text"],
art: image?.["#text"] ?? lastSong.image[0]["#text"],
url: lastSong.url,
album: lastSong.album["#text"],
},
};
};
return () => clearInterval(interval)
const useLastFM = () => {
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);
});
};
return {status,song}
}
useEffect(() => {
const interval = setInterval(() => {
getStatus();
}, 3000);
export default useLastFM
return () => clearInterval(interval);
}, []);
return { status, song };
};
export default useLastFM;

6
jsconfig.json
View File

@ -1,5 +1,5 @@
{
"compilerOptions": {
"baseUrl": "./"
}
"compilerOptions": {
"baseUrl": "./"
}
}

209
libs/discord-parser.js
View File

@ -1,103 +1,126 @@
export default function parse(data) {
const output = {};
const act = [];
const PrirorityActivityType = ['Coding', 'Listening to Spotify', 'Playing', 'Custom Status', 'Streaming', 'Watching', 'Competing', 'Unknown'];
const output = {};
const act = [];
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"
}
const PrirorityActivityType = [
"Coding",
"Listening to Spotify",
"Playing",
"Custom Status",
"Streaming",
"Watching",
"Competing",
"Unknown",
];
output.kv = data.kv;
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",
};
if(data.discord_status == "offline"){
return {
discord_status: "offline",
}
}
output.kv = data.kv;
if (data.listening_to_spotify) {
output.spotify = {
album: data.spotify.album,
artist: data.spotify.artist,
song: data.spotify.song,
album_art_url: data.spotify.album_art_url,
timestamps: data.spotify.timestamps,
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
});
}
else if(activity.name.includes("Spotify")){
act.push({
prirority_id: PrirorityActivityType.indexOf('Listening to Spotify'),
...activity
});
}
else if(activity.type === 0){
act.push({
prirority_id: PrirorityActivityType.indexOf('Playing'),
...activity
});
}
if (data.discord_status == "offline") {
return {
discord_status: "offline",
};
}
else if(activity.name.includes("Custom Status")){
act.push({
prirority_id: PrirorityActivityType.indexOf('Custom Status'),
...activity
});
output.custom_status = {
state: activity.state,
emoji: {
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"
}
};
}
else {
act.push({
prirority_id: PrirorityActivityType.indexOf('Unknown'),
...activity
});
break;
}
}
if (data.listening_to_spotify) {
output.spotify = {
album: data.spotify.album,
artist: data.spotify.artist,
song: data.spotify.song,
album_art_url: data.spotify.album_art_url,
timestamps: data.spotify.timestamps,
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,
});
} else if (activity.name.includes("Spotify")) {
act.push({
prirority_id: PrirorityActivityType.indexOf(
"Listening to Spotify"
),
...activity,
});
} else if (activity.type === 0) {
act.push({
prirority_id: PrirorityActivityType.indexOf("Playing"),
...activity,
});
} else if (activity.name.includes("Custom Status")) {
act.push({
prirority_id: PrirorityActivityType.indexOf("Custom Status"),
...activity,
});
output.custom_status = {
state: activity.state,
emoji: {
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",
},
};
} else {
act.push({
prirority_id: PrirorityActivityType.indexOf("Unknown"),
...activity,
});
break;
}
}
act.sort((a, b) => a.prirority_id - b.prirority_id);
act.sort((a, b) => a.prirority_id - b.prirority_id);
output.activity = act[0];
output.activity = act[0];
if(output.activity?.prirority_id == 1){
output.activity.assets = {
large_image : output.spotify.album_art_url,
small_image : "/images/brandlogos/SpotifyLogo.png"
}
}
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) {
output.activity.assets = {
large_image: "/images/anime-profile-pic.png",
small_image: output.custom_status.emoji.emoji_url,
};
} 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",
};
}
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 {
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",
}
}
return output;
}
return output;
}

8
next.config.js
View File

@ -1,7 +1,7 @@
const moduleExports = {
reactStrictMode: true,
compiler: {
styledComponents: true,
},
reactStrictMode: true,
compiler: {
styledComponents: true,
},
};
module.exports = moduleExports;

94
package.json
View File

@ -1,49 +1,49 @@
{
"name": "bravo68web-portfolio",
"private": true,
"description": "My NextJS Portfolio",
"version": "2.0.0",
"license": "CC-BY-ND-4.0",
"author": {
"name": "Bravo68Web",
"email": "me@bravo68web.me",
"website": "https://bravo68web.me"
},
"repository": {
"type": "git",
"url": "https://github.com/BRAVO68WEB/bravo68web-portfolio-nextjs/"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"postinstall": "node tools/copy-webviewer-files.js",
"prettier": "prettier --write ."
},
"dependencies": {
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@mui/icons-material": "^5.3.0",
"@mui/material": "^5.3.0",
"@pdftron/webviewer": "^8.3.3",
"axios": "^0.26.1",
"ciao-status-fetch": "^1.0.1",
"core-js": "^3.21.1",
"date-format-parse": "^0.2.7",
"fs-extra": "^10.0.1",
"html-to-text": "^9.0.4",
"next": "^13.1.1",
"next-connect": "^0.12.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-use-lanyard": "^0.1.1",
"sitemap": "^7.1.1",
"styled-components": "^5.3.7"
},
"devDependencies": {
"eslint": "^7.32.0",
"eslint-config-next": "^13.1.1",
"prettier": "^2.6.2"
}
"name": "bravo68web-portfolio",
"private": true,
"description": "My NextJS Portfolio",
"version": "2.0.0",
"license": "CC-BY-ND-4.0",
"author": {
"name": "Bravo68Web",
"email": "me@bravo68web.me",
"website": "https://bravo68web.me"
},
"repository": {
"type": "git",
"url": "https://github.com/BRAVO68WEB/bravo68web-portfolio-nextjs/"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"postinstall": "node tools/copy-webviewer-files.js",
"prettier": "prettier --write ."
},
"dependencies": {
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@mui/icons-material": "^5.3.0",
"@mui/material": "^5.3.0",
"@pdftron/webviewer": "^8.3.3",
"axios": "^0.26.1",
"ciao-status-fetch": "^1.0.1",
"core-js": "^3.21.1",
"date-format-parse": "^0.2.7",
"fs-extra": "^10.0.1",
"html-to-text": "^9.0.4",
"next": "^13.1.1",
"next-connect": "^0.12.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-use-lanyard": "^0.1.1",
"sitemap": "^7.1.1",
"styled-components": "^5.3.7"
},
"devDependencies": {
"eslint": "^7.32.0",
"eslint-config-next": "^13.1.1",
"prettier": "^2.6.2"
}
}

10
pages/404.js
View File

@ -2,10 +2,10 @@ import Page404 from "components/404Page";
import Footer from "components/footer";
export default function Custom404() {
return (
// <>
<Page404 />
/* <Footer />
return (
// <>
<Page404 />
/* <Footer />
</> */
);
);
}

2
pages/500.js
View File

@ -2,5 +2,5 @@ import Page500 from "components/500Page";
import Footer from "components/footer";
export default function Custom500() {
return <Page500 />;
return <Page500 />;
}

20
pages/_app.js
View File

@ -1,18 +1,16 @@
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 (
<>
{/* <CustomCursor /> */}
<ErrorBoundary>
<Component {...pageProps} />
</ErrorBoundary>
</>
);
return (
<>
{/* <CustomCursor /> */}
<ErrorBoundary>
<Component {...pageProps} />
</ErrorBoundary>
</>
);
}
export default MyPortfolio;

111
pages/_document.js
View File

@ -3,61 +3,64 @@ import { ServerStyleSheet } from "styled-components";
import Nav from "../components/nav";
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: [initialProps.styles, sheet.getStyleElement()],
};
} finally {
sheet.seal();
}
}
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: [initialProps.styles, sheet.getStyleElement()],
};
} finally {
sheet.seal();
}
}
render() {
return (
<Html>
<Head>
<meta
name="description"
content="Jyotirmoy Bandyopadhayaya's Website | A Student, Full Stack and DevOps Platform Developer | Jyotirmoy Bandyopadhayaya's Tech Stack"
/>
<meta
name="keywords"
content="bravo, bravo68web, Jyotirmoy, Bandyopadhayaya, dev, web, Full Stack Developer, DevOps, gcp, linux, server, api, rest, lpu"
/>
<meta name="language" content="EN" />
<meta
name="author"
content="Jyotirmoy Bandyopadhayaya | Bravo68web"
/>
<meta
name="publisher"
content="Jyotirmoy Bandyopadhayaya | Bravo68web"
/>
<link rel="icon" href="/favicon.ico" />
<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"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
render() {
return (
<Html>
<Head>
<meta
name="description"
content="Jyotirmoy Bandyopadhayaya's Website | A Student, Full Stack and DevOps Platform Developer | Jyotirmoy Bandyopadhayaya's Tech Stack"
/>
<meta
name="keywords"
content="bravo, bravo68web, Jyotirmoy, Bandyopadhayaya, dev, web, Full Stack Developer, DevOps, gcp, linux, server, api, rest, lpu"
/>
<meta name="language" content="EN" />
<meta
name="author"
content="Jyotirmoy Bandyopadhayaya | Bravo68web"
/>
<meta
name="publisher"
content="Jyotirmoy Bandyopadhayaya | Bravo68web"
/>
<link rel="icon" href="/favicon.ico" />
<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"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}

26
pages/about.js
View File

@ -4,18 +4,18 @@ import About from "components/about";
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 />
return (
<div>
<Head>
<title>
About | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer
and DevOps Engineer
</title>
</Head>
<Nav />
<About />
{/* <Footer /> */}
</div>
);
{/* <Footer /> */}
</div>
);
}

2
pages/api/index.js
View File

@ -1,7 +1,7 @@
import axios from "axios";
const handler = async (req, res) => {
res.status(200).json({ name: "John Doe" });
res.status(200).json({ name: "John Doe" });
};
export default handler;

32
pages/api/sitemap.js
View File

@ -4,25 +4,25 @@ const { createWriteStream } = require("fs");
const { SitemapStream } = require("sitemap");
export default handler.get(async (req, res) => {
// Get the all Blog posts
const sitemap = new SitemapStream({
hostname: "https://itsmebravo.dev",
});
// Get the all Blog posts
const sitemap = new SitemapStream({
hostname: "https://itsmebravo.dev",
});
const writeStream = createWriteStream("./public/sitemap.xml");
const writeStream = createWriteStream("./public/sitemap.xml");
sitemap.pipe(writeStream);
sitemap.pipe(writeStream);
// Writing static pages to sitemap
sitemap.write({ url: "/", changefreq: "daily", priority: 1 });
sitemap.write({ url: "/stats/", changefreq: "daily", priority: 0.8 });
sitemap.write({ url: "/contact/", changefreq: "daily", priority: 0.8 });
sitemap.write({ url: "/resume/", changefreq: "daily", priority: 0.8 });
sitemap.write({ url: "/about/", changefreq: "daily", priority: 0.8 });
sitemap.write({ url: "/projects/", changefreq: "daily", priority: 0.8 });
// Writing static pages to sitemap
sitemap.write({ url: "/", changefreq: "daily", priority: 1 });
sitemap.write({ url: "/stats/", changefreq: "daily", priority: 0.8 });
sitemap.write({ url: "/contact/", changefreq: "daily", priority: 0.8 });
sitemap.write({ url: "/resume/", changefreq: "daily", priority: 0.8 });
sitemap.write({ url: "/about/", changefreq: "daily", priority: 0.8 });
sitemap.write({ url: "/projects/", changefreq: "daily", priority: 0.8 });
sitemap.end();
sitemap.end();
// Send a message after process done
res.status(200).json({ message: "Done" });
// Send a message after process done
res.status(200).json({ message: "Done" });
});

26
pages/contact.js
View File

@ -4,17 +4,17 @@ import Contact from "components/contact";
import Footer from "components/footer";
export default function Home() {
return (
<div>
<Head>
<title>
Contact | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
DevOps Engineer
</title>
</Head>
<Nav />
<Contact />
{/* <Footer /> */}
</div>
);
return (
<div>
<Head>
<title>
Contact | Jyotirmoy Bandyopadhayaya | Full Stack Web
Developer and DevOps Engineer
</title>
</Head>
<Nav />
<Contact />
{/* <Footer /> */}
</div>
);
}

21
pages/exps.js Normal file
View File

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

26
pages/extras.js
View File

@ -4,18 +4,18 @@ import Extras from "components/extras";
import Footer from "components/footer";
export default function Home() {
return (
<div>
<Head>
<title>
Extras | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
DevOps Engineer
</title>
</Head>
<Nav />
<Extras />
return (
<div>
<Head>
<title>
Extras | Jyotirmoy Bandyopadhayaya | Full Stack Web
Developer and DevOps Engineer
</title>
</Head>
<Nav />
<Extras />
<Footer />
</div>
);
<Footer />
</div>
);
}

28
pages/index.js
View File

@ -4,18 +4,18 @@ import Main from "components/main";
import BMC from "components/buymeacoffee";
export default function Home() {
return (
<div>
<Head>
<title>
Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and DevOps
Engineer
</title>
</Head>
<Nav />
<Main />
<BMC />
{/* <Footer /> */}
</div>
);
return (
<div>
<Head>
<title>
Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
DevOps Engineer
</title>
</Head>
<Nav />
<Main />
<BMC />
{/* <Footer /> */}
</div>
);
}

26
pages/projects.js
View File

@ -3,17 +3,17 @@ import Nav from "components/nav";
import Art from "components/art";
export default function Home() {
return (
<div>
<Head>
<title>
Projects | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
DevOps Engineer
</title>
</Head>
<Nav />
<Art />
{/* <Footer /> */}
</div>
);
return (
<div>
<Head>
<title>
Projects | Jyotirmoy Bandyopadhayaya | Full Stack Web
Developer and DevOps Engineer
</title>
</Head>
<Nav />
<Art />
{/* <Footer /> */}
</div>
);
}

26
pages/qbadges.js
View File

@ -3,17 +3,17 @@ import Nav from "components/nav";
import Qbadges from "components/qbadges";
export default function Home() {
return (
<div>
<Head>
<title>
Projects | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
DevOps Engineer
</title>
</Head>
<Nav />
<Qbadges />
{/* <Footer /> */}
</div>
);
return (
<div>
<Head>
<title>
Projects | Jyotirmoy Bandyopadhayaya | Full Stack Web
Developer and DevOps Engineer
</title>
</Head>
<Nav />
<Qbadges />
{/* <Footer /> */}
</div>
);
}

26
pages/resume.js
View File

@ -5,17 +5,17 @@ import Resume from "components/resume";
import Footer from "components/footer";
export default function Home() {
return (
<div>
<Head>
<title>
Resume | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
DevOps Engineer
</title>
</Head>
<Nav />
<Resume />
{/* <Footer /> */}
</div>
);
return (
<div>
<Head>
<title>
Resume | Jyotirmoy Bandyopadhayaya | Full Stack Web
Developer and DevOps Engineer
</title>
</Head>
<Nav />
<Resume />
{/* <Footer /> */}
</div>
);
}

27
pages/stats.js
View File

@ -4,19 +4,19 @@ import Skills from "components/skills";
import Footer from "components/footer";
export default function Home() {
return (
<div>
<Head>
<title>
Stats | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
DevOps Engineer
</title>
</Head>
<Nav />
<Skills />
<Footer />
</div>
);
return (
<div>
<Head>
<title>
Stats | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer
and DevOps Engineer
</title>
</Head>
<Nav />
<Skills />
<Footer />
</div>
);
}
// export const getServerSideProps = async () => {
@ -27,4 +27,3 @@ export default function Home() {
// props:[]
// }
// }

26
pages/toots.js
View File

@ -4,18 +4,18 @@ import Toots from "components/toots";
import Footer from "components/footer";
export default function Home() {
return (
<div>
<Head>
<title>
Toots | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
DevOps Engineer
</title>
</Head>
<Nav />
<Toots />
return (
<div>
<Head>
<title>
Toots | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer
and DevOps Engineer
</title>
</Head>
<Nav />
<Toots />
<Footer />
</div>
);
<Footer />
</div>
);
}

26
pages/vscode.js
View File

@ -4,18 +4,18 @@ import VSExts from "components/vsexts";
import Footer from "components/footer";
export default function Home() {
return (
<div>
<Head>
<title>
VS Code Extensions | Jyotirmoy Bandyopadhayaya | Full Stack Web
Developer and DevOps Engineer
</title>
</Head>
<Nav />
<VSExts />
return (
<div>
<Head>
<title>
VS Code Extensions | Jyotirmoy Bandyopadhayaya | Full Stack
Web Developer and DevOps Engineer
</title>
</Head>
<Nav />
<VSExts />
<Footer />
</div>
);
<Footer />
</div>
);
}

8484
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

63
styles/globals.css
View File

@ -2,47 +2,48 @@
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
:root {
--color1: #11052c;
--color2: #3d087b;
--color3: #f43b86;
--color4: #ffe459;
--color5: #16b2fa;
--color6: #0ff558;
--color7: #f4f4f4;
--color8: #f58a0f;
--color9: #f5a80f;
--color10: #0ffaac;
--font: "Source Code Pro", monospace;
--color-cursor: 220, 90, 90;
--cursor-outline-shade: 0.3;
--cursor-size: 10px;
--cursor-outline-size: 12px;
--color1: #11052c;
--color2: #3d087b;
--color3: #f43b86;
--color4: #ffe459;
--color5: #16b2fa;
--color6: #0ff558;
--color7: #f4f4f4;
--color8: #f58a0f;
--color9: #f5a80f;
--color10: #0ffaac;
--font: "Source Code Pro", monospace;
--color-cursor: 220, 90, 90;
--cursor-outline-shade: 0.3;
--cursor-size: 10px;
--cursor-outline-size: 12px;
}
* {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
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;
height: 100vh;
width: 100vw;
/* color:var(--color3) */
color: var(--color7);
/* cursor: none; */
overflow: hidden;
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;
height: 100vh;
width: 100vw;
/* color:var(--color3) */
color: var(--color7);
/* cursor: none; */
}
a {
color: inherit;
text-decoration: none;
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
box-sizing: border-box;
}
/* .cursor {

18
tools/copy-webviewer-files.js
View File

@ -1,15 +1,15 @@
const fs = require("fs-extra");
const copyFiles = async () => {
try {
await fs.copy(
"./node_modules/@pdftron/webviewer/public",
"./public/webviewer/lib"
);
console.log("WebViewer files copied over successfully");
} catch (err) {
console.error(err);
}
try {
await fs.copy(
"./node_modules/@pdftron/webviewer/public",
"./public/webviewer/lib"
);
console.log("WebViewer files copied over successfully");
} catch (err) {
console.error(err);
}
};
copyFiles();