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" name: "CodeQL"
on: on:
push: push:
branches: [main] branches: [main]
pull_request: pull_request:
# The branches below must be a subset of the branches above # The branches below must be a subset of the branches above
branches: [main] branches: [main]
schedule: schedule:
- cron: "15 19 * * 5" - cron: "15 19 * * 5"
jobs: jobs:
analyze: analyze:
name: Analyze name: Analyze
runs-on: ubuntu-latest runs-on: ubuntu-latest
permissions: permissions:
actions: read actions: read
contents: read contents: read
security-events: write security-events: write
strategy: strategy:
fail-fast: false fail-fast: false
matrix: matrix:
language: ["javascript"] language: ["javascript"]
# CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
# Learn more about CodeQL language support at https://git.io/codeql-language-support # Learn more about CodeQL language support at https://git.io/codeql-language-support
steps: steps:
- name: Checkout repository - name: Checkout repository
uses: actions/checkout@v3 uses: actions/checkout@v3
# Initializes the CodeQL tools for scanning. # Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL - name: Initialize CodeQL
uses: github/codeql-action/init@v2 uses: github/codeql-action/init@v2
with: with:
languages: ${{ matrix.language }} languages: ${{ matrix.language }}
# If you wish to specify custom queries, you can do so here or in a config file. # 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. # 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. # 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 # queries: ./path/to/local/query, your-org/your-repo/queries@main
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java). # 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) # If this step fails, then you should remove it and run the build manually (see below)
- name: Autobuild - name: Autobuild
uses: github/codeql-action/autobuild@v2 uses: github/codeql-action/autobuild@v2
# ℹ️ Command-line programs to run using the OS shell. # ℹ️ Command-line programs to run using the OS shell.
# 📚 https://git.io/JvXDl # 📚 https://git.io/JvXDl
# ✏️ If the Autobuild fails above, remove it and uncomment the following three lines # ✏️ 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 # and modify them (or add more) to build your code if your project
# uses a compiled language # uses a compiled language
#- run: | #- run: |
# make bootstrap # make bootstrap
# make release # make release
- name: Perform CodeQL Analysis - name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v2 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 name: Deploy Next.js site to Pages
on: on:
# Runs on pushes targeting the default branch # Runs on pushes targeting the default branch
push: push:
branches: ["main"] branches: ["main"]
# Allows you to run this workflow manually from the Actions tab # Allows you to run this workflow manually from the Actions tab
workflow_dispatch: workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions: permissions:
contents: read contents: read
pages: write pages: write
id-token: write id-token: write
# Allow one concurrent deployment # Allow one concurrent deployment
concurrency: concurrency:
group: "pages" group: "pages"
cancel-in-progress: true cancel-in-progress: true
jobs: jobs:
# Build job # Build job
build: build:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: Checkout - name: Checkout
uses: actions/checkout@v3 uses: actions/checkout@v3
- name: Detect package manager - name: Detect package manager
id: detect-package-manager id: detect-package-manager
run: | run: |
if [ -f "${{ github.workspace }}/yarn.lock" ]; then if [ -f "${{ github.workspace }}/yarn.lock" ]; then
echo "::set-output name=manager::yarn" echo "::set-output name=manager::yarn"
echo "::set-output name=command::install" echo "::set-output name=command::install"
echo "::set-output name=runner::yarn" echo "::set-output name=runner::yarn"
exit 0 exit 0
elif [ -f "${{ github.workspace }}/package.json" ]; then elif [ -f "${{ github.workspace }}/package.json" ]; then
echo "::set-output name=manager::npm" echo "::set-output name=manager::npm"
echo "::set-output name=command::ci" echo "::set-output name=command::ci"
echo "::set-output name=runner::npx --no-install" echo "::set-output name=runner::npx --no-install"
exit 0 exit 0
else else
echo "Unable to determine packager manager" echo "Unable to determine packager manager"
exit 1 exit 1
fi fi
- name: Setup Node - name: Setup Node
uses: actions/setup-node@v3 uses: actions/setup-node@v3
with: with:
node-version: "16" node-version: "16"
cache: ${{ steps.detect-package-manager.outputs.manager }} cache: ${{ steps.detect-package-manager.outputs.manager }}
- name: Setup Pages - name: Setup Pages
id: pages id: pages
uses: actions/configure-pages@v1 uses: actions/configure-pages@v1
with: with:
# Automatically inject basePath in your Next.js configuration file and disable # Automatically inject basePath in your Next.js configuration file and disable
# server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized). # 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. # You may remove this line if you want to manage the configuration yourself.
static_site_generator: next static_site_generator: next
- name: Restore cache - name: Restore cache
uses: actions/cache@v3 uses: actions/cache@v3
with: with:
path: | path: |
.next/cache .next/cache
# Generate a new cache whenever packages or source files change. # 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') }} 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. # If source files changed but packages didn't, rebuild from a prior cache.
restore-keys: | restore-keys: |
${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}- ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
- name: Install dependencies - name: Install dependencies
run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }} run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
- name: Build with Next.js - name: Build with Next.js
run: ${{ steps.detect-package-manager.outputs.runner }} next build run: ${{ steps.detect-package-manager.outputs.runner }} next build
- name: Static HTML export with Next.js - name: Static HTML export with Next.js
run: ${{ steps.detect-package-manager.outputs.runner }} next export run: ${{ steps.detect-package-manager.outputs.runner }} next export
- name: Upload artifact - name: Upload artifact
uses: actions/upload-pages-artifact@v1 uses: actions/upload-pages-artifact@v1
with: with:
path: ./out path: ./out
# Deployment job # Deployment job
deploy: deploy:
environment: environment:
name: github-pages name: github-pages
url: ${{ steps.deployment.outputs.page_url }} url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest runs-on: ubuntu-latest
needs: build needs: build
steps: steps:
- name: Deploy to GitHub Pages - name: Deploy to GitHub Pages
id: deployment id: deployment
uses: actions/deploy-pages@v1 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 :- #### Features :-
- Discord Integration - Discord Integration
- Online Status Checker - Online Status Checker
- Resume Embed - Resume Embed
- Custom User Stats representations - Custom User Stats representations
- Art and Project Showcase - Art and Project Showcase
- Custom Error page (including 404 and 500 response error) - Custom Error page (including 404 and 500 response error)
- More to be added soon ... - More to be added soon ...
#### Technologies Used:- #### Technologies Used:-
@ -44,10 +44,10 @@ This Repo cotains source code for my developer portfolio at https://itsmebravo.d
**BRAVO68WEB** **BRAVO68WEB**
- Website: https://itsmebravo.dev - Website: https://itsmebravo.dev
- Twitter: [@BRAVO68WEB](https://twitter.com/BRAVO68WEB) - Twitter: [@BRAVO68WEB](https://twitter.com/BRAVO68WEB)
- GitHub: [@BRAVO68WEB](https://github.com/BRAVO68WEB) - GitHub: [@BRAVO68WEB](https://github.com/BRAVO68WEB)
- LinkedIn: [@BRAVO68WEB](https://linkedin.com/in/BRAVO68WEB) - LinkedIn: [@BRAVO68WEB](https://linkedin.com/in/BRAVO68WEB)
<br> <br>

20
components/404Page.jsx
View File

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

172
components/404Page.style.jsx
View File

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

30
components/500Page.jsx
View File

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

80
components/500Page.style.jsx
View File

@ -1,48 +1,48 @@
import styled from "styled-components"; import styled from "styled-components";
export const Page500Style = styled.div` export const Page500Style = styled.div`
@import url("https://fonts.googleapis.com/css?family=Fira+Code&display=swap"); @import url("https://fonts.googleapis.com/css?family=Fira+Code&display=swap");
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
background-color: #111; background-color: #111;
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: "Fira Code", monospace; font-family: "Fira Code", monospace;
} }
.container { .container {
text-align: center; text-align: center;
margin: auto; margin: auto;
padding: 4em; padding: 4em;
img { img {
width: 256px; width: 256px;
height: 225px; height: 225px;
} }
h1 { h1 {
margin-top: 1rem; margin-top: 1rem;
font-size: 35px; font-size: 35px;
text-align: center; text-align: center;
span { span {
font-size: 60px; font-size: 60px;
} }
} }
p { p {
margin-top: 1rem; margin-top: 1rem;
} }
p.info { p.info {
margin-top: 4em; margin-top: 4em;
font-size: 12px; font-size: 12px;
a { a {
text-decoration: none; text-decoration: none;
color: rgb(84, 84, 206); 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"; import { AboutStyle } from "./about.style";
function about() { function about() {
return ( return (
<AboutStyle> <AboutStyle>
<div className="default"> <div className="default">
<div className="content"> <div className="content">
<p>{description1}</p> <p>{description1}</p>
</div> </div>
<div className="lang-map"> <div className="lang-map">
{LanguagesKnownCategory.map((lang) => { {LanguagesKnownCategory.map((lang) => {
return ( return (
<div <div
className="lang-map-element" className="lang-map-element"
key={lang} key={lang}
style={{ backgroundColor: lang[Object.keys(lang)[0]] }} style={{
> backgroundColor: lang[Object.keys(lang)[0]],
#{Object.keys(lang)[0].toString()} }}
</div> >
); #{Object.keys(lang)[0].toString()}
})} </div>
</div> );
<div className="content-2"> })}
<p>{description2}</p> </div>
<img src="https://bravo68web.me/images/header_.png" /> <div className="content-2">
</div> <p>{description2}</p>
</div> <img src="https://bravo68web.me/images/header_.png" />
</AboutStyle> </div>
); </div>
</AboutStyle>
);
} }
export default about; export default about;

138
components/about.style.jsx
View File

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

40
components/art.js
View File

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

24
components/art.style.jsx
View File

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

64
components/artCard.js
View File

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

58
components/artCard.style.jsx
View File

@ -1,34 +1,34 @@
import styled from "styled-components"; import styled from "styled-components";
export default styled.div` export default styled.div`
padding: 2%; padding: 2%;
width: 230px; width: 230px;
height: 320px; height: 320px;
box-sizing: border-box; box-sizing: border-box;
background-color: #5f046b; background-color: #5f046b;
border-radius: 5px; border-radius: 5px;
box-shadow: 10px 9px 0px -3px #fffefe; box-shadow: 10px 9px 0px -3px #fffefe;
margin: 5px; margin: 5px;
* { * {
margin-top: inherit; margin-top: inherit;
} }
.type { .type {
color: #92dcf3; color: #92dcf3;
/* padding: 4px; */ /* padding: 4px; */
} }
.card-logo { .card-logo {
display: flex; display: flex;
/* width: 100%; */ /* width: 100%; */
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
border-radius: 10px; border-radius: 10px;
img { img {
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
/* object-position: 0px -10px; */ /* object-position: 0px -10px; */
} }
/* margin: 5px 5px 0px 0px; */ /* 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"; import { useTheme } from "@mui/material/styles";
function ArtModel({ children, open, onClose }) { function ArtModel({ children, open, onClose }) {
const theme = useTheme(); const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down("md")); const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
return ( return (
<Dialog <Dialog
open={open} open={open}
onClose={onClose} onClose={onClose}
fullScreen={fullScreen} fullScreen={fullScreen}
aria-labelledby="responsive-dialog-title" aria-labelledby="responsive-dialog-title"
> >
{children} {children}
</Dialog> </Dialog>
); );
} }
export default ArtModel; export default ArtModel;

67
components/buymeacoffee.jsx
View File

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

6
components/buymeacoffee.style.jsx
View File

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

269
components/contact.js
View File

@ -3,138 +3,143 @@ import { ContactStyle } from "./contact.style";
import axios from "handlers/axios"; import axios from "handlers/axios";
function Contact() { function Contact() {
const [input, setInput] = useState({ const [input, setInput] = useState({
senderName: "", senderName: "",
email: "", email: "",
message: "", message: "",
topic: "", topic: "",
}); });
const [isSubmitted, setIsSubmitted] = useState(false); const [isSubmitted, setIsSubmitted] = useState(false);
function changeInput(evt) { function changeInput(evt) {
const { name, value } = evt.target; const { name, value } = evt.target;
setInput({ setInput({
...input, ...input,
[name]: value, [name]: value,
}); });
} }
function submitForm(evt) { function submitForm(evt) {
evt.preventDefault(); evt.preventDefault();
axios.post("/contactme/postQuery", input); axios.post("/contactme/postQuery", input);
setIsSubmitted(true); setIsSubmitted(true);
} }
return ( return (
<ContactStyle> <ContactStyle>
<div className="form-group-main row"> <div className="form-group-main row">
<div className="column"> <div className="column">
<div className="prewritten-info"> <div className="prewritten-info">
<div className="prewritten-info-content"> <div className="prewritten-info-content">
<h1> <h1>
<u>Contact Me</u> <u>Contact Me</u>
</h1> </h1>
<p> <p>
If you have any questions, feel free to contact me. I am always If you have any questions, feel free to contact
open to discussing new projects and opportunities. me. I am always open to discussing new projects
</p> and opportunities.
<br /> </p>
<p> <br />
<h3> <p>
<strong>Email:</strong> <h3>
</h3> <strong>Email:</strong>
<a href="mailto:me@bravo68web.me">me@bravo68web.me</a> </h3>
</p> <a href="mailto:me@bravo68web.me">
<br /> me@bravo68web.me
<p> </a>
<h3> </p>
<strong>Phone:</strong> <br />
</h3> <p>
<a href="tel:+916291559872">+91 6291559872</a> <h3>
</p> <strong>Phone:</strong>
<br /> </h3>
<p> <a href="tel:+916291559872">+91 6291559872</a>
<h3> </p>
<strong>Discord:</strong> <br />
</h3> <p>
<a href="https://discord.com/users/457039372009865226"> <h3>
Bravo68-DF_Techs#6429 <strong>Discord:</strong>
</a> </h3>
</p> <a href="https://discord.com/users/457039372009865226">
<br /> Bravo68-DF_Techs#6429
<p> </a>
<h3> </p>
<strong>Extra:</strong> <br />
</h3> <p>
<a href="https://calendly.com/bravo68web">Calendly</a> <h3>
</p> <strong>Extra:</strong>
</div> </h3>
</div> <a href="https://calendly.com/bravo68web">
</div> Calendly
<div className="column"> </a>
<form onSubmit={submitForm} className="contact-us"> </p>
<div className="form-group"> </div>
<label htmlFor="email">Email Address </label> </div>
<br /> </div>
<input <div className="column">
name="email" <form onSubmit={submitForm} className="contact-us">
required <div className="form-group">
value={input.email} <label htmlFor="email">Email Address </label>
onChange={changeInput} <br />
type="email" <input
className="form-control" name="email"
id="email" required
placeholder="Your email" value={input.email}
/> onChange={changeInput}
</div> type="email"
<div className="form-group"> className="form-control"
<label htmlFor="senderName">Your Name </label> id="email"
<br /> placeholder="Your email"
<input />
name="senderName" </div>
value={input.senderName} <div className="form-group">
onChange={changeInput} <label htmlFor="senderName">Your Name </label>
type="text" <br />
className="form-control" <input
id="senderName" name="senderName"
placeholder="Your Name" value={input.senderName}
/> onChange={changeInput}
</div> type="text"
<div className="form-group"> className="form-control"
<label htmlFor="topic">Subject </label> id="senderName"
<br /> placeholder="Your Name"
<input />
name="topic" </div>
value={input.topic} <div className="form-group">
onChange={changeInput} <label htmlFor="topic">Subject </label>
type="text" <br />
className="form-control" <input
id="topic" name="topic"
placeholder="I want to talk about..." value={input.topic}
/> onChange={changeInput}
</div> type="text"
<div className="form-group"> className="form-control"
<label htmlFor="senderName">Message </label> id="topic"
<br /> placeholder="I want to talk about..."
<textarea />
name="message" </div>
value={input.message} <div className="form-group">
onChange={changeInput} <label htmlFor="senderName">Message </label>
type="text" <br />
className="form-control" <textarea
id="message" name="message"
placeholder="Your message" value={input.message}
/> onChange={changeInput}
</div> type="text"
<button className="form-control"
type="submit" id="message"
className="btn btn-primary" placeholder="Your message"
disabled={isSubmitted} />
> </div>
Submit <button
</button> type="submit"
</form> className="btn btn-primary"
</div> disabled={isSubmitted}
</div> >
</ContactStyle> Submit
); </button>
</form>
</div>
</div>
</ContactStyle>
);
} }
export default Contact; 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"; // import SendIcon from "@mui/icons-material/Send";
export const ContactStyle = styled.div` export const ContactStyle = styled.div`
padding: 10%; padding: 10%;
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: center; justify-content: center;
background-image: url("images/background2.jpg"); background-image: url("images/background2.jpg");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-attachment: fixed; background-attachment: fixed;
background-repeat: no-repeat; background-repeat: no-repeat;
body { body {
background: #2d3b36 url(http://www.luismruiz.com/img/blured.jpg) no-repeat background: #2d3b36 url(http://www.luismruiz.com/img/blured.jpg)
center center fixed; no-repeat center center fixed;
-webkit-background-size: cover; -webkit-background-size: cover;
-moz-background-size: cover; -moz-background-size: cover;
-o-background-size: cover; -o-background-size: cover;
background-size: cover; background-size: cover;
padding-top: 100px; padding-top: 100px;
} }
textarea { textarea {
/* background: rgba(255, 255, 255, 0.4) /* background: rgba(255, 255, 255, 0.4)
url(http://luismruiz.com/img/gemicon_message.png) no-repeat scroll 16px url(http://luismruiz.com/img/gemicon_message.png) no-repeat scroll 16px
16px; */ 16px; */
width: 276px; width: 276px;
resize: none; resize: none;
height: 110px; height: 110px;
border: 1px solid rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.6);
-moz-border-radius: 4px; -moz-border-radius: 4px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
-moz-background-clip: padding; -moz-background-clip: padding;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
background-clip: padding-box; background-clip: padding-box;
display: block; display: block;
font-family: "Source Sans Pro", sans-serif; font-family: "Source Sans Pro", sans-serif;
font-size: 18px; font-size: 18px;
color: #030303; color: #030303;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
padding-top: 12px; padding-top: 12px;
margin-bottom: 20px; margin-bottom: 20px;
overflow: hidden; overflow: hidden;
} }
input { input {
width: 276px; width: 276px;
height: 48px; height: 48px;
border: 1px solid rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.4);
-moz-border-radius: 4px; -moz-border-radius: 4px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
-moz-background-clip: padding; -moz-background-clip: padding;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
background-clip: padding-box; background-clip: padding-box;
display: block; display: block;
font-family: "Source Sans Pro", sans-serif; font-family: "Source Sans Pro", sans-serif;
font-size: 18px; font-size: 18px;
color: #000000; color: #000000;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.message-input { .message-input {
height: 90px; height: 90px;
} }
input[type="submit"] { input[type="submit"] {
cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.svg), cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.svg),
auto; auto;
} }
input.name { input.name {
padding-left: 45px; padding-left: 45px;
} }
input.email { input.email {
padding-left: 45px; padding-left: 45px;
} }
input.message { input.message {
padding-left: 45px; padding-left: 45px;
} }
input.topic { input.topic {
padding-left: 45px; padding-left: 45px;
} }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
color: #fff; color: #fff;
} }
:-moz-placeholder { :-moz-placeholder {
color: #fff; color: #fff;
} }
::-moz-placeholder { ::-moz-placeholder {
color: #fff; color: #fff;
} }
:-ms-input-placeholder { :-ms-input-placeholder {
color: #fff; color: #fff;
} }
input:focus, input:focus,
textarea:focus { textarea:focus {
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.5); -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); -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); box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.5);
overflow: hidden; overflow: hidden;
color: #fff; color: #fff;
} }
.btn { .btn {
cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.svg), cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.svg),
auto; auto;
width: 138px; width: 138px;
height: 44px; height: 44px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
float: right; float: right;
/* border: 1px solid rgba(0, 0, 0, 0.2); */ /* border: 1px solid rgba(0, 0, 0, 0.2); */
border: 1px solid #253737; border: 1px solid #253737;
background: rgb(131, 58, 180); background: rgb(131, 58, 180);
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
rgba(131, 58, 180, 1) 0%, rgba(131, 58, 180, 1) 0%,
rgba(253, 29, 29, 1) 50%, rgba(253, 29, 29, 1) 50%,
rgba(252, 176, 69, 1) 100% rgba(252, 176, 69, 1) 100%
); );
padding: 10.5px 21px; padding: 10.5px 21px;
-webkit-border-radius: 6px; -webkit-border-radius: 6px;
-moz-border-radius: 6px; -moz-border-radius: 6px;
border-radius: 6px; border-radius: 6px;
-webkit-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, -webkit-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0,
inset rgba(255, 255, 255, 0.7) 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, -moz-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0,
inset rgba(255, 255, 255, 0.7) 0 1px 0; inset rgba(255, 255, 255, 0.7) 0 1px 0;
box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0,
inset rgba(255, 255, 255, 0.7) 0 1px 0; inset rgba(255, 255, 255, 0.7) 0 1px 0;
text-shadow: #333333 0 1px 0; text-shadow: #333333 0 1px 0;
color: #e1e1e1; color: #e1e1e1;
} }
.btn:hover { .btn:hover {
border: 1px solid #253737; border: 1px solid #253737;
text-shadow: #333333 0 1px 0; text-shadow: #333333 0 1px 0;
background: rgb(131, 58, 180); background: rgb(131, 58, 180);
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
rgba(131, 58, 180, 1) 0%, rgba(131, 58, 180, 1) 0%,
rgba(253, 29, 29, 1) 50%, rgba(253, 29, 29, 1) 50%,
rgba(252, 176, 69, 1) 100% rgba(252, 176, 69, 1) 100%
); );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fc466b",endColorstr="#3f5efb",GradientType=1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fc466b",endColorstr="#3f5efb",GradientType=1);
color: #fff; color: #fff;
} }
.btn:active { .btn:active {
margin-top: 1px; margin-top: 1px;
text-shadow: #333333 0 -1px 0; text-shadow: #333333 0 -1px 0;
border: 1px solid #253737; border: 1px solid #253737;
background: rgb(131, 58, 180); background: rgb(131, 58, 180);
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
rgba(131, 58, 180, 1) 0%, rgba(131, 58, 180, 1) 0%,
rgba(253, 29, 29, 1) 50%, rgba(253, 29, 29, 1) 50%,
rgba(252, 176, 69, 1) 100% rgba(252, 176, 69, 1) 100%
); );
} }
form { form {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: auto; margin-bottom: auto;
width: 343px; width: 343px;
height: 510px; height: 510px;
padding: 30px; padding: 30px;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
-moz-border-radius: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
-moz-background-clip: padding; -moz-background-clip: padding;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
background-clip: padding-box; background-clip: padding-box;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 13px 3px 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); -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); box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
overflow: hidden; overflow: hidden;
} }
.prewritten-info { .prewritten-info {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-top: auto; margin-top: auto;
width: 343px; width: 343px;
height: 510px; height: 510px;
padding: 30px; padding: 30px;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
-moz-border-radius: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
-moz-background-clip: padding; -moz-background-clip: padding;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
background-clip: padding-box; background-clip: padding-box;
background: rgba(255, 143, 15, 0.61); background: rgba(255, 143, 15, 0.61);
-moz-box-shadow: 0 0 13px 3px 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); -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); box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
overflow: hidden; overflow: hidden;
} }
.prewritten-info-content { .prewritten-info-content {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
@media (min-width: 800px) { @media (min-width: 800px) {
/* overflow-y: scroll !important; */ /* overflow-y: scroll !important; */
.row { .row {
display: flex; display: flex;
/* flex-grow: true; */ /* flex-grow: true; */
flex-direction: row; flex-direction: row;
} }
.column { .column {
/* flex: 50%; */ /* flex: 50%; */
} }
.prewritten-info { .prewritten-info {
margin-top: 140%; margin-top: 140%;
} }
form { form {
margin-bottom: 17%; margin-bottom: 17%;
} }
} }
@media (min-width: 1000px) { @media (min-width: 1000px) {
overflow-y: hidden !important; overflow-y: hidden !important;
.prewritten-info { .prewritten-info {
margin-top: auto !important; margin-top: auto !important;
} }
form { form {
margin-bottom: auto !important; margin-bottom: auto !important;
} }
.row { .row {
display: flex; display: flex;
/* flex-grow: true; */ /* flex-grow: true; */
} }
.column { .column {
/* flex: 50%; */ /* flex: 50%; */
flex-direction: column; flex-direction: column;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
padding-top: 25%; padding-top: 25%;
padding-bottom: 20%; 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 { DicordActivityStyle } from "./discord-activity.style";
import { useLanyard } from "react-use-lanyard"; import { useLanyard } from "react-use-lanyard";
import { discord_id } from "config"; 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>; */ /* <pre>{!loading && JSON.stringify(status, null, 4)}</pre>; */
const customStatus = [ const customStatus = [
"Searching for Cat Girls", "Searching for Cat Girls",
"Watching Anime", "Watching Anime",
"Sleeping", "Sleeping",
"Studying", "Studying",
]; ];
export default function DiscordActivity() { export default function DiscordActivity() {
const statusPicker = () => { const statusPicker = () => {
return customStatus[Math.floor(Math.random() * customStatus.length)]; return customStatus[Math.floor(Math.random() * customStatus.length)];
}; };
const { loading, status } = useLanyard({ const { loading, status } = useLanyard({
userId: discord_id, userId: discord_id,
socket: true, socket: true,
}); });
const [time, setTime] = useState("00:00:00 elapsed"); const [time, setTime] = useState("00:00:00 elapsed");
const [pickedStatus] = useState(statusPicker()); const [pickedStatus] = useState(statusPicker());
const padTo2Digits = (num) => { const padTo2Digits = (num) => {
return num.toString().padStart(2, "0"); return num.toString().padStart(2, "0");
}; };
const convertMsToHM = (milliseconds) => { const convertMsToHM = (milliseconds) => {
let seconds = Math.floor(milliseconds / 1000); let seconds = Math.floor(milliseconds / 1000);
let minutes = Math.floor(seconds / 60); let minutes = Math.floor(seconds / 60);
let hours = Math.floor(minutes / 60); let hours = Math.floor(minutes / 60);
seconds = seconds % 60; seconds = seconds % 60;
minutes = seconds >= 30 ? minutes + 1 : minutes; minutes = seconds >= 30 ? minutes + 1 : minutes;
minutes = minutes % 60; minutes = minutes % 60;
hours = hours % 24; hours = hours % 24;
return `${padTo2Digits(hours)}:${padTo2Digits(minutes)}:${padTo2Digits( return `${padTo2Digits(hours)}:${padTo2Digits(minutes)}:${padTo2Digits(
seconds seconds
)} elapsed`; )} elapsed`;
}; };
const [currentTs, setCurrentTs] = useState(Date.now()); const [currentTs, setCurrentTs] = useState(Date.now());
const [parsedStatus, setParsedStatus] = useState(null); const [parsedStatus, setParsedStatus] = useState(null);
useEffect(() => { useEffect(() => {
if(!loading){ if (!loading) {
setParsedStatus(DiscordParser(status)); setParsedStatus(DiscordParser(status));
} }
}, [status, loading]) }, [status, loading]);
useEffect(() => { useEffect(() => {
let interval = setInterval(() => { let interval = setInterval(() => {
if (!loading) { if (!loading) {
setCurrentTs(Date.now()); setCurrentTs(Date.now());
let timeElapsed = convertMsToHM( let timeElapsed = convertMsToHM(
currentTs - new Date(parsedStatus?.activity?.timestamps.start) currentTs -
); new Date(parsedStatus?.activity?.timestamps.start)
setTime(timeElapsed); );
} setTime(timeElapsed);
}, 1000); }
return () => { }, 1000);
clearInterval(interval); return () => {
}; clearInterval(interval);
}, [currentTs, loading, convertMsToHM, parsedStatus]); };
}, [currentTs, loading, convertMsToHM, parsedStatus]);
if ( if (!loading && parsedStatus && status.discord_status !== "offline") {
!loading && parsedStatus && status.discord_status !== "offline" return (
) { <DicordActivityStyle>
return ( <div className="discord-icons">
<DicordActivityStyle> <div className="discord-large-icon">
<div className="discord-icons"> <img src={parsedStatus.activity.assets.large_image} />
<div className="discord-large-icon"> </div>
<img src={parsedStatus.activity.assets.large_image} /> <div className="discord-small-icon">
</div> <img
<div className="discord-small-icon"> src={parsedStatus.activity.assets.small_image}
<img src={parsedStatus.activity.assets.small_image} alt="" /> alt=""
</div> />
</div> </div>
<div className="discord-messageBox"> </div>
<div className="discord-message-application"> <div className="discord-messageBox">
<b>{parsedStatus.discord.username + "#" + parsedStatus.discord.discriminator}</b> <div className="discord-message-application">
</div> <b>
<div className="discord-message-activity"> {parsedStatus.discord.username +
<b>{parsedStatus.activity.details}</b> "#" +
</div> parsedStatus.discord.discriminator}
<br /> </b>
<div className="discord-message-files"> </div>
<b>{parsedStatus.activity.state}</b> <div className="discord-message-activity">
</div> <b>{parsedStatus.activity.details}</b>
<div className="time-elapsed">{time}</div> </div>
</div> <br />
</DicordActivityStyle> <div className="discord-message-files">
); <b>{parsedStatus.activity.state}</b>
} </div>
else { <div className="time-elapsed">{time}</div>
let restData = { </div>
username: "Bravo68-DF_Techs", </DicordActivityStyle>
public_flags: 64, );
id: "457039372009865226", } else {
discriminator: "6429", let restData = {
avatar: "08a8937664b3b165805965244d6f095f", username: "Bravo68-DF_Techs",
}; public_flags: 64,
id: "457039372009865226",
discriminator: "6429",
avatar: "08a8937664b3b165805965244d6f095f",
};
return ( return (
<DicordActivityStyle> <DicordActivityStyle>
<div className="discord-icons"> <div className="discord-icons">
<div className="discord-large-icon"> <div className="discord-large-icon">
<img src={"/images/default_game.jpg"} /> <img src={"/images/default_game.jpg"} />
</div> </div>
<div className="discord-small-icon"> <div className="discord-small-icon">
<img src={"/images/" + "offline" + ".png"} alt="" /> <img src={"/images/" + "offline" + ".png"} alt="" />
</div> </div>
</div> </div>
<div className="discord-messageBox"> <div className="discord-messageBox">
<div className="discord-message-application"> <div className="discord-message-application">
<b>{restData.username + "#" + restData.discriminator}</b> <b>
</div> {restData.username + "#" + restData.discriminator}
<div className="discord-message-activity"> </b>
<b>is Offline</b> </div>
</div> <div className="discord-message-activity">
<br /> <b>is Offline</b>
<div className="discord-message-files"> </div>
<b>{pickedStatus}</b> <br />
</div> <div className="discord-message-files">
{/* <div className="time-elapsed">00:00:00 elapsed</div> */} <b>{pickedStatus}</b>
</div> </div>
</DicordActivityStyle> {/* <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"; import styled from "styled-components";
export const DicordActivityStyle = styled.div` export const DicordActivityStyle = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: start; justify-content: start;
width: 400px; width: 400px;
min-height: 75px; min-height: 75px;
background: rgb(131, 58, 180); background: rgb(131, 58, 180);
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
rgba(131, 58, 180, 1) 0%, rgba(131, 58, 180, 1) 0%,
rgba(253, 29, 29, 1) 50%, rgba(253, 29, 29, 1) 50%,
rgba(252, 176, 69, 1) 100% rgba(252, 176, 69, 1) 100%
); );
border-radius: 6px; border-radius: 6px;
padding: 0.3em 0.8em; padding: 0.3em 0.8em;
.discord-icons { .discord-icons {
display: flex; display: flex;
/* margin-right: 2em; */ /* margin-right: 2em; */
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100px; width: 100px;
height: 100px; height: 100px;
/* position: absolute; */ /* position: absolute; */
position: relative; position: relative;
.discord-large-icon { .discord-large-icon {
width: 80px; width: 80px;
height: 80px; height: 80px;
/* background-color: #61c626; */ /* background-color: #61c626; */
img { img {
max-width: 100%; max-width: 100%;
object-fit: contain; object-fit: contain;
border-radius: 6px; border-radius: 6px;
} }
} }
.discord-small-icon { .discord-small-icon {
width: 25px; width: 25px;
height: 25px; height: 25px;
box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.3); box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.3);
border-radius: 50px; border-radius: 50px;
position: absolute; position: absolute;
bottom: 6px; bottom: 6px;
right: 1px; right: 1px;
img { img {
max-width: 100%; max-width: 100%;
object-fit: contain; object-fit: contain;
border-radius: 50px; border-radius: 50px;
} }
} }
} }
.discord-messageBox { .discord-messageBox {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 1em; margin-left: 1em;
font-size: 0.9em; font-size: 0.9em;
} }
.discord-message-application { .discord-message-application {
font-size: 1.3em; font-size: 1.3em;
} }
.discord-message-activity { .discord-message-activity {
font-size: 1.1em; font-size: 1.1em;
} }
`; `;

77
components/errorBoundary.jsx
View File

@ -1,41 +1,40 @@
import { Component } from "react" import { Component } from "react";
import Page500 from "./500Page" import Page500 from "./500Page";
class ErrorBoundary extends Component { class ErrorBoundary extends Component {
constructor(props) { constructor(props) {
super(props) super(props);
// Define a state variable to track whether is an error or not // Define a state variable to track whether is an error or not
this.state = { hasError: false } this.state = { hasError: false };
} }
static getDerivedStateFromError(error) { static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI // Update state so the next render will show the fallback UI
return { hasError: true } return { hasError: true };
} }
componentDidCatch(error, errorInfo) { componentDidCatch(error, errorInfo) {
// You can use your own error logging service here // You can use your own error logging service here
console.log({ error, errorInfo }) console.log({ error, errorInfo });
} }
render() { render() {
// Check if the error is thrown // Check if the error is thrown
if (this.state.hasError) { if (this.state.hasError) {
// You can render any custom fallback UI // You can render any custom fallback UI
return ( return (
<div> <div>
<Page500 /> <Page500 />
<h2>Oops, there is an error!</h2> <h2>Oops, there is an error!</h2>
<button <button
type="button" type="button"
onClick={() => this.setState({ hasError: false })} onClick={() => this.setState({ hasError: false })}
> >
Try again? Try again?
</button> </button>
</div> </div>
) );
} }
// Return children components in case of no error // Return children components in case of no error
return this.props.children return this.props.children;
} }
} }
export default ErrorBoundary 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"; import { extra, extraPages } from "config";
function extras() { function extras() {
return ( return (
<ExtraStyles> <ExtraStyles>
<div> <div>
<h1 className="title">Pages</h1> <h1 className="title">Pages</h1>
<div className="default"> <div className="default">
{extraPages.map((content, index) => { {extraPages.map((content, index) => {
return ( return (
<div key={index}> <div key={index}>
<div className="content"> <div className="content">
<div className="content-description"> <div className="content-description">
<img src={content.image} /> <img src={content.image} />
</div> </div>
<div className="content-title"> <div className="content-title">
<h1> <h1>
<a <a
href={content.url} href={content.url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
{content.name} {content.name}
</a> </a>
</h1> </h1>
</div> </div>
</div> </div>
</div> </div>
); );
})} })}
</div> </div>
</div> </div>
<div> <div>
<h1 className="title">Components</h1> <h1 className="title">Components</h1>
<div className="default"> <div className="default">
{extra.map((content, index) => { {extra.map((content, index) => {
return ( return (
<div key={index}> <div key={index}>
<div className="content"> <div className="content">
<div className="content-description"> <div className="content-description">
<img src={content.image} /> <img src={content.image} />
</div> </div>
<div className="content-title"> <div className="content-title">
<h1> <h1>
<a <a
href={content.url} href={content.url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
{content.name} {content.name}
</a> </a>
</h1> </h1>
</div> </div>
</div> </div>
</div> </div>
); );
})} })}
</div> </div>
</div> </div>
</ExtraStyles> </ExtraStyles>
); );
} }
export default extras; export default extras;

150
components/extras.style.jsx
View File

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

14
components/footer.jsx
View File

@ -4,14 +4,14 @@ import { name } from "config";
import Status from "./status"; import Status from "./status";
function footer() { function footer() {
return <FooterStyle> return (
<div className="main-footer"> <FooterStyle>
Build By {name} <div className="main-footer">Build By {name}</div>
</div> {/* <div className="api-status">
<div className="api-status">
<Status /> <Status />
</div> </div> */}
</FooterStyle>; </FooterStyle>
);
} }
export default footer; export default footer;

41
components/footer.style.jsx
View File

@ -1,25 +1,24 @@
import styled from "styled-components"; import styled from "styled-components";
export default styled.div` export default styled.div`
height: 50px; height: 50px;
width: 100vw; width: 100vw;
position: fixed; position: fixed;
left: 0; left: 0;
bottom: 0; bottom: 0;
background: var(--color1); background: var(--color1);
display: flex; display: flex;
justify-content: center; justify-content: center;
.main-footer { .main-footer {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 1.2rem; font-size: 1.2rem;
.api-status { .api-status {
justify-content: right; justify-content: right;
align-items: right; align-items: right;
font-size: 1.2rem; font-size: 1.2rem;
padding-bottom: 20px; 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 MastodonSVG from "./assets/mastodon_icon_137420.svg";
import { import {
name, name,
github_url, github_url,
linkedin_url, linkedin_url,
facebook_url, facebook_url,
twitter_url, twitter_url,
// email, // email,
// resume_url, // resume_url,
instagram_url, instagram_url,
mastodon_url, mastodon_url,
} from "config"; } from "config";
import DiscordActivity from "./discord-activity"; import DiscordActivity from "./discord-activity";
function Main() { function Main() {
useEffect(() => { useEffect(() => {
const animePic = document.getElementById('anime-pic'); const animePic = document.getElementById("anime-pic");
const profPic = document.getElementById('prof-pic'); const profPic = document.getElementById("prof-pic");
animePic.addEventListener('mouseover', function() { animePic.addEventListener("mouseover", function () {
animePic.style.display = 'none'; animePic.style.display = "none";
profPic.style.display = 'block'; profPic.style.display = "block";
}); });
profPic.addEventListener('mouseout', function() {
animePic.style.display = 'block';
profPic.style.display = 'none';
});
},[])
return ( profPic.addEventListener("mouseout", function () {
<MainStyle> animePic.style.display = "block";
<div className="content"> profPic.style.display = "none";
<div className="profile"> });
<img }, []);
src="/images/anime-profile-pic.png"
alt="" return (
className="profile-img" <MainStyle>
id="anime-pic" <div className="content">
/> <div className="profile">
<img <img
src="/images/profile-new-transp.png" src="/images/anime-profile-pic.png"
alt="" alt=""
className="profile-img" className="profile-img"
id="prof-pic" id="anime-pic"
/> />
</div> <img
<div className="name">{name}</div> src="/images/profile-new-transp.png"
<br /> alt=""
<div> className="profile-img"
<DiscordActivity /> id="prof-pic"
</div> />
<br /> </div>
<div className="social-buttons"> <div className="name">{name}</div>
<a href={github_url}> <br />
<IconButton> <div>
<GitHubIcon fontSize="large" /> <DiscordActivity />
</IconButton> </div>
</a> <br />
<a href={twitter_url}> <div className="social-buttons">
<IconButton> <a href={github_url}>
<TwitterIcon fontSize="large" /> <IconButton>
</IconButton> <GitHubIcon fontSize="large" />
</a> </IconButton>
<a href={linkedin_url}> </a>
<IconButton> <a href={twitter_url}>
<LinkedInIcon fontSize="large" /> <IconButton>
</IconButton> <TwitterIcon fontSize="large" />
</a> </IconButton>
<a href={instagram_url}> </a>
<IconButton> <a href={linkedin_url}>
<InstagramIcon fontSize="large" /> <IconButton>
</IconButton> <LinkedInIcon fontSize="large" />
</a> </IconButton>
<a href={facebook_url}> </a>
<IconButton> <a href={instagram_url}>
<FacebookIcon fontSize="large" /> <IconButton>
</IconButton> <InstagramIcon fontSize="large" />
</a> </IconButton>
<a href={mastodon_url} rel="me"> </a>
<IconButton> <a href={facebook_url}>
<SvgIcon fontSize="large"> <IconButton>
<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" /> <FacebookIcon fontSize="large" />
</SvgIcon> </IconButton>
</IconButton> </a>
</a> <a href={mastodon_url} rel="me">
</div> <IconButton>
{/* <div className="buttons"> <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}> <a href={resume_url}>
<Button variant="contained " size="large"> <Button variant="contained " size="large">
Resume Resume
@ -108,9 +108,9 @@ function Main() {
</Button> </Button>
</a> </a>
</div> */} </div> */}
</div> </div>
</MainStyle> </MainStyle>
); );
} }
export default Main; export default Main;

170
components/main.style.jsx
View File

@ -1,92 +1,92 @@
import styled from "styled-components"; import styled from "styled-components";
export default styled.main` export default styled.main`
padding-top: 15px; padding-top: 15px;
display: flex; display: flex;
height: 100vh; height: 100vh;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-image: url("/images/background.jpg"); background-image: url("/images/background.jpg");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
#prof-pic { #prof-pic {
display: none; display: none;
} }
#anime-pic:hover + #prof-pic { #anime-pic:hover + #prof-pic {
display: block; display: block;
} }
.profile-img { .profile-img {
border-radius: 50%; border-radius: 50%;
background: rgb(251, 167, 63); background: rgb(251, 167, 63);
background: -moz-radial-gradient( background: -moz-radial-gradient(
circle, circle,
rgba(251, 167, 63, 1) 0%, rgba(251, 167, 63, 1) 0%,
rgba(252, 70, 107, 1) 100% rgba(252, 70, 107, 1) 100%
); );
background: -webkit-radial-gradient( background: -webkit-radial-gradient(
circle, circle,
rgba(251, 167, 63, 1) 0%, rgba(251, 167, 63, 1) 0%,
rgba(252, 70, 107, 1) 100% rgba(252, 70, 107, 1) 100%
); );
background: radial-gradient( background: radial-gradient(
circle, circle,
rgba(251, 167, 63, 1) 0%, rgba(251, 167, 63, 1) 0%,
rgba(252, 70, 107, 1) 100% rgba(252, 70, 107, 1) 100%
); );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fba73f",endColorstr="#fc466b",GradientType=1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fba73f",endColorstr="#fc466b",GradientType=1);
} }
.backimage { .backimage {
filter: blur(8px); filter: blur(8px);
-webkit-filter: blur(8px); -webkit-filter: blur(8px);
} }
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.social-buttons { .social-buttons {
button { button {
margin: 5px; margin: 5px;
} }
.MuiSvgIcon-root { .MuiSvgIcon-root {
color: white; color: white;
} }
} }
.buttons { .buttons {
button { button {
background: var(--color1); background: var(--color1);
border-radius: 20px; border-radius: 20px;
padding: 10px 15px; padding: 10px 15px;
margin: 10px; margin: 10px;
} }
} }
} }
.profile { .profile {
height: 250px; height: 250px;
width: 250px; width: 250px;
img { img {
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
} }
margin-bottom: 20px; margin-bottom: 20px;
} }
.name { .name {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 600; font-weight: 600;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.social-buttons { .social-buttons {
margin-top: 1rem; margin-top: 1rem;
background: rgb(64, 63, 79); background: rgb(64, 63, 79);
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
rgba(64, 63, 79, 1) 0%, rgba(64, 63, 79, 1) 0%,
rgba(92, 84, 90, 1) 43% rgba(92, 84, 90, 1) 43%
); );
border-radius: 12px; 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"; import { discord_id } from "config";
const LINKS = [ const LINKS = [
{ {
title: "About", title: "About",
href: "/about", href: "/about",
}, },
{ {
title: "Stats", title: "Stats",
href: "/stats", href: "/stats",
}, },
{ {
title: "Resume", title: "Resume",
href: "/resume", href: "/resume",
}, },
{ {
title: "Contact", title: "Contact",
href: "/contact", href: "/contact",
}, },
{ {
title: "Art/Projects", title: "Art/Projects",
href: "/projects", href: "/projects",
}, },
{ {
title: "Blog", title: "Blog",
href: "https://blog.bravo68web.me", href: "https://blog.bravo68web.me",
}, },
{ {
title: "Extras", title: "Extras",
href: "/extras", href: "/extras",
}, },
]; ];
function Nav() { function Nav() {
const { loading, status /*, websocket */ } = useLanyard({ const { loading, status /*, websocket */ } = useLanyard({
userId: discord_id, userId: discord_id,
socket: true, socket: true,
}); });
const [anchorEl, setAnchorEl] = useState(null); const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl); const open = Boolean(anchorEl);
const handleClick = (event) => { const handleClick = (event) => {
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
}; };
const handleClose = () => { const handleClose = () => {
setAnchorEl(null); setAnchorEl(null);
}; };
return ( return (
<NavStyle> <NavStyle>
<Link href="/" passHref> <Link href="/" passHref>
<div className="title"> <div className="title">
<h1>echo &quot;Bravo&quot;</h1> <h1>echo &quot;Bravo&quot;</h1>
<div className="indicator"> <div className="indicator">
<div <div
className={`circle ${ className={`circle ${
!loading && !loading &&
(status?.discord_status === "online" || (status?.discord_status === "online" ||
status?.discord_status === "idle" || status?.discord_status === "idle" ||
status?.discord_status === "dnd") status?.discord_status === "dnd")
? "green" ? "green"
: "red" : "red"
}`} }`}
></div> ></div>
</div> </div>
</div> </div>
</Link> </Link>
<div className="links"> <div className="links">
{LINKS.map(({ title, href }, index) => ( {LINKS.map(({ title, href }, index) => (
<div key={index} className="link"> <div key={index} className="link">
<Link href={href}>{title}</Link> <Link href={href}>{title}</Link>
</div> </div>
))} ))}
</div> </div>
{/* Mobile Menu */} {/* Mobile Menu */}
<div className={"menu"}> <div className={"menu"}>
<IconButton <IconButton
id="nav-menu-button" id="nav-menu-button"
aria-controls={open ? "nav-menu" : undefined} aria-controls={open ? "nav-menu" : undefined}
aria-haspopup="true" aria-haspopup="true"
aria-expanded={open ? "true" : undefined} aria-expanded={open ? "true" : undefined}
onClick={handleClick} onClick={handleClick}
> >
<MenuIcon /> <MenuIcon />
</IconButton> </IconButton>
<Menu <Menu
id="nav-menu" id="nav-menu"
anchorEl={anchorEl} anchorEl={anchorEl}
open={open} open={open}
onClose={handleClose} onClose={handleClose}
MenuListProps={{ MenuListProps={{
"aria-labelledby": "nav-menu-button", "aria-labelledby": "nav-menu-button",
}} }}
> >
{LINKS.map(({ title, href }, index) => ( {LINKS.map(({ title, href }, index) => (
<MenuItem key={index} onClick={handleClose}> <MenuItem key={index} onClick={handleClose}>
<Link href={href}>{title}</Link> <Link href={href}>{title}</Link>
</MenuItem> </MenuItem>
))} ))}
</Menu> </Menu>
</div> </div>
</NavStyle> </NavStyle>
); );
} }
export default Nav; export default Nav;

118
components/nav.style.js
View File

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

2
components/providers/cursor.js
View File

@ -1,4 +1,4 @@
// import { useRef, useEffect } from "react"; // import { useRef, useEffect } from "react";
export default function CustomCursor() { 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"; import styled from "@emotion/styled";
export const CursorStyle = styled.div` export const CursorStyle = styled.div`
html { 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") 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, 4 4,
auto; auto;
} }
.cursor { .cursor {
display: none; display: none;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: var(--width); width: var(--width);
height: var(--height); height: var(--height);
transform: translate( transform: translate(
calc(var(--x) - var(--width) / 2), calc(var(--x) - var(--width) / 2),
calc(var(--y) - var(--height) / 2) calc(var(--y) - var(--height) / 2)
); );
transition: 150ms width cubic-bezier(0.39, 0.575, 0.565, 1), transition: 150ms width cubic-bezier(0.39, 0.575, 0.565, 1),
150ms height 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); 150ms transform cubic-bezier(0.39, 0.575, 0.565, 1);
z-index: var(--zIndex); z-index: var(--zIndex);
pointer-events: none; pointer-events: none;
will-change: transform; will-change: transform;
box-shadow: var(--boxShadow); box-shadow: var(--boxShadow);
} }
@media (pointer: fine) { @media (pointer: fine) {
.cursor { .cursor {
display: block; display: block;
} }
} }
.cursor::after { .cursor::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
border-radius: var(--radius); border-radius: var(--radius);
border: 2px solid #64ffda; border: 2px solid #64ffda;
opacity: var(--scale); opacity: var(--scale);
-webkit-transform: scale(var(--scale)); -webkit-transform: scale(var(--scale));
transform: scale(var(--scale)); transform: scale(var(--scale));
transition: 300ms opacity cubic-bezier(0.39, 0.575, 0.565, 1), transition: 300ms opacity cubic-bezier(0.39, 0.575, 0.565, 1),
300ms transform 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); 150ms border-radius cubic-bezier(0.39, 0.575, 0.565, 1);
} }
html:not(html:hover) .cursor::after { html:not(html:hover) .cursor::after {
opacity: 0; opacity: 0;
transform: scale(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"; import { qwiklabs as qb } from "config";
function qbadges() { function qbadges() {
return ( return (
<QBStyles> <QBStyles>
<div> <div>
<h1 className="title">Qwiklab Badges</h1> <h1 className="title">Qwiklab Badges</h1>
<div className="default"> <div className="default">
{qb.map((badge, index) => { {qb.map((badge, index) => {
return ( return (
<> <>
<div> <div>
<div className="content"> <div className="content">
<div className="content-description"> <div className="content-description">
<img src={badge.image} /> <img src={badge.image} />
</div> </div>
<div className="content-title"> <div className="content-title">
<h1> <h1>
<a <a
href={badge.url} href={badge.url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
{badge.title} {badge.title}
</a> </a>
</h1> </h1>
</div> </div>
</div> </div>
</div> </div>
</> </>
); );
})} })}
</div> </div>
</div> </div>
</QBStyles> </QBStyles>
); );
} }
export default qbadges; export default qbadges;

156
components/qbadges.style.jsx
View File

@ -1,82 +1,82 @@
import styled from "styled-components"; import styled from "styled-components";
export const QBStyles = styled.div` export const QBStyles = styled.div`
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding-top: 15vh; padding-top: 15vh;
background-image: url("images/background6.webp"); background-image: url("images/background6.webp");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-attachment: fixed; background-attachment: fixed;
background-repeat: no-repeat; background-repeat: no-repeat;
overflow-y: scroll !important; overflow-y: scroll !important;
height: 100vh; height: 100vh;
.title { .title {
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
background-color: var(--color4); background-color: var(--color4);
color: var(--color3); color: var(--color3);
} }
.default { .default {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
/* height: 100vh; */ /* height: 100vh; */
padding-bottom: 3em; padding-bottom: 3em;
padding-top: 2em; padding-top: 2em;
.content { .content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding-top: 2em; padding-top: 2em;
padding-bottom: 2em; padding-bottom: 2em;
&:hover { &:hover {
filter: contrast(200%); filter: contrast(200%);
-webkit-transform: translateX(-5px) translateY(-5px); -webkit-transform: translateX(-5px) translateY(-5px);
transform: translateX(-5px) translateY(-5px); transform: translateX(-5px) translateY(-5px);
transition: 1s ease; transition: 1s ease;
} }
.content-description { .content-description {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.content-description img { .content-description img {
width: 225px; width: 225px;
} }
.content-title { .content-title {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
word-break: break-word; word-break: break-word;
white-space: pre-wrap; white-space: pre-wrap;
-moz-white-space: pre-wrap; -moz-white-space: pre-wrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
h1 { h1 {
font-size: 1.5em; font-size: 1.5em;
font-weight: bold; font-weight: bold;
color: var(--color7); color: var(--color7);
text-align: center; text-align: center;
margin: 0; margin: 0;
padding: 0; padding: 0;
a { a {
color: var(--color7); color: var(--color7);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: var(--color3); 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"; import { ResumeStyle } from "./resume.style";
function Resume() { function Resume() {
const viewer = useRef(null); const viewer = useRef(null);
useEffect(() => { useEffect(() => {
import("@pdftron/webviewer").then(() => { import("@pdftron/webviewer").then(() => {
WebViewer( WebViewer(
{ {
path: "webviewer/lib", path: "webviewer/lib",
mobileRedirect: true, mobileRedirect: true,
initialDoc: initialDoc: "/resume.pdf",
"/resume.pdf", },
}, viewer.current
viewer.current ).then((instance) => {
).then((instance) => { const { docViewer } = instance;
const { docViewer } = instance; // you can now call WebViewer APIs here...
// you can now call WebViewer APIs here... });
}); });
}); }, []);
}, []); return (
return ( <ResumeStyle>
<ResumeStyle> <div
<div className="webviewer" ref={viewer} style={{ height: "100vh" }}></div> className="webviewer"
</ResumeStyle> ref={viewer}
); style={{ height: "100vh" }}
></div>
</ResumeStyle>
);
} }
export default Resume; export default Resume;

2
components/resume.style.jsx
View File

@ -1,5 +1,5 @@
import styled from "styled-components"; import styled from "styled-components";
export const ResumeStyle = styled.div` 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"; import SkillCardStyle from "./skillCard.styled";
function SkillCard({ title, children, image, bannerImage, url }) { function SkillCard({ title, children, image, bannerImage, url }) {
return ( return (
<SkillCardStyle> <SkillCardStyle>
<div className="card"> <div className="card">
{image && ( {image && (
<a href={url}> <a href={url}>
<div className="card-logo"> <div className="card-logo">
<img src={image} height="30" /> <img src={image} height="30" />
</div> </div>
</a> </a>
)} )}
<div className="title">{title}</div> <div className="title">{title}</div>
{children} {children}
</div> </div>
</SkillCardStyle> </SkillCardStyle>
); );
} }
export default SkillCard; export default SkillCard;

184
components/skillCard.styled.js
View File

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

168
components/skillComponents/github_events.jsx
View File

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

20
components/skillComponents/github_trophy.jsx
View File

@ -1,15 +1,15 @@
import React from "react"; import React from "react";
import SkillCard from "../skillCard"; import SkillCard from "../skillCard";
function GithubTrophySkillCard ({ title, image, bannerImage, url }) { function GithubTrophySkillCard({ title, image, bannerImage, url }) {
return ( return (
<SkillCard title={title} image={image} url={url}> <SkillCard title={title} image={image} url={url}>
<br /> <br />
<div className="description"> <div className="description">
<img src={bannerImage} alt="" /> <img src={bannerImage} alt="" />
</div> </div>
</SkillCard> </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"; import { format } from "date-format-parse";
function GitHubSkillCard({ function GitHubSkillCard({
title, title,
image, image,
public_gists, public_gists,
followers, followers,
following, following,
public_repos, public_repos,
created_at, created_at,
url, url,
}) { }) {
return ( return (
<SkillCard title={title} image={image} url={url}> <SkillCard title={title} image={image} url={url}>
<div className="description">Repos :- {public_repos}</div> <div className="description">Repos :- {public_repos}</div>
<div className="description">Followers :- {followers}</div> <div className="description">Followers :- {followers}</div>
<div className="description">Following :- {following}</div> <div className="description">Following :- {following}</div>
<div className="description">Gists :- {public_gists}</div> <div className="description">Gists :- {public_gists}</div>
<div className="description"> <div className="description">
Joined On :- {format(created_at, "DD MMM YYYY")} Joined On :- {format(created_at, "DD MMM YYYY")}
</div> </div>
</SkillCard> </SkillCard>
); );
} }
export default GitHubSkillCard; 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"; import { format, parse } from "date-format-parse";
function HashNodeSkillCard({ function HashNodeSkillCard({
title, title,
image, image,
joinOn, joinOn,
numPosts, numPosts,
numFollowers, numFollowers,
publicationDomain, publicationDomain,
numReactions, numReactions,
url, url,
}) { }) {
return ( return (
<SkillCard title={title} image={image} url={url}> <SkillCard title={title} image={image} url={url}>
<div className="description"> <div className="description">
Joined on: {format(joinOn, "DD MMM YYYY")} Joined on: {format(joinOn, "DD MMM YYYY")}
</div> </div>
<div className="description"> Total Posts : {numPosts}</div> <div className="description"> Total Posts : {numPosts}</div>
<div className="description"> Total Followers : {numFollowers}</div> <div className="description"> Total Followers : {numFollowers}</div>
{/* <div className="description"> {/* <div className="description">
Publication Domain : {publicationDomain} Publication Domain : {publicationDomain}
</div> */} </div> */}
<div className="description"> Total Reactions : {numReactions}</div> <div className="description"> Total Reactions : {numReactions}</div>
</SkillCard> </SkillCard>
); );
} }
export default HashNodeSkillCard; export default HashNodeSkillCard;

60
components/skillComponents/lastfm_current.jsx
View File

@ -3,33 +3,41 @@ import SkillCard from "../skillCard";
import useLastFM from "hooks/useLastFM"; import useLastFM from "hooks/useLastFM";
function LastFMCurrentSkillCard({ function LastFMCurrentSkillCard({
title, title,
image, image,
empty, empty,
artist, artist,
albumImg, albumImg,
name, name,
url, url,
}) { }) {
const {status,song} = useLastFM(); const { status, song } = useLastFM();
if (status !== "playing") { if (status !== "playing") {
return ( return (
<SkillCard title={title} image={image} url={url}> <SkillCard title={title} image={image} url={url}>
Not listening to anything Not listening to anything
</SkillCard> </SkillCard>
); );
} }
return ( return (
<SkillCard title={title} image={image} url={url}> <SkillCard title={title} image={image} url={url}>
<div className="description"> <div className="description">
{empty ? "No recent tracks" : `${song.artist} - ${song.name}`} {empty ? "No recent tracks" : `${song.artist} - ${song.name}`}
</div> </div>
<div className="description"> <div className="description">
{empty ? "" : <img src={song.art} alt={`${song.artist} - ${song.name}`} className="albumart"/>} {empty ? (
</div> ""
</SkillCard> ) : (
); <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"; import SkillCardStyle from "../skillCard.styled";
function OsuBestScoresSkillCard({ function OsuBestScoresSkillCard({
title, title,
image, image,
bestScore1, bestScore1,
bestScore2, bestScore2,
bestScore3, bestScore3,
bestScore4, bestScore4,
bestScore5, bestScore5,
url, url,
}) { }) {
return ( return (
<SkillCard title={title} image={image} url={url}> <SkillCard title={title} image={image} url={url}>
<div className="bestScores"> <div className="bestScores">
<div className="bestScores__score"> <div className="bestScores__score">
<div className="bestScores__score__image"> <div className="bestScores__score__image">
<a href={bestScore1?.beatmap.url}> <a href={bestScore1?.beatmap.url}>
<img <img
src={bestScore1?.beatmapset?.covers.cover} src={bestScore1?.beatmapset?.covers.cover}
alt={bestScore1?.beatmapset?.title} alt={bestScore1?.beatmapset?.title}
width="120px" width="120px"
/> />
</a> </a>
</div> </div>
<div className="bestScores__score__info"> <div className="bestScores__score__info">
<div className="bestScores__score__info__name"> <div className="bestScores__score__info__name">
<div className="bestScores__score__info__name__title"> <div className="bestScores__score__info__name__title">
{bestScore1?.beatmapset?.title} {bestScore1?.beatmapset?.title}
</div> </div>
<div className="bestScores__score__info__name__artist"> <div className="bestScores__score__info__name__artist">
{bestScore1?.beatmapset?.artist} {bestScore1?.beatmapset?.artist}
</div> </div>
</div> </div>
<div className="bestScores__score__info__score"> <div className="bestScores__score__info__score">
Star/Combos/PP Star/Combos/PP
<div className="bestScores__score__info__score__value"> <div className="bestScores__score__info__score__value">
<div className="bestScores__score__info__name__artist"> <div className="bestScores__score__info__name__artist">
{bestScore1?.beatmap?.difficulty_rating + " "} {bestScore1?.beatmap?.difficulty_rating +
</div> " "}
/ </div>
<div className="bestScores__score__info__name__artist"> /
{bestScore1?.max_combo} <div className="bestScores__score__info__name__artist">
</div> {bestScore1?.max_combo}
/ </div>
<div className="bestScores__score__info__name__artist"> /
{Math.round(bestScore1?.pp)} <div className="bestScores__score__info__name__artist">
</div> {Math.round(bestScore1?.pp)}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<br /> </div>
<div className="bestScores__score"> <br />
<div className="bestScores__score__image"> <div className="bestScores__score">
<a href={bestScore2?.beatmap.url}> <div className="bestScores__score__image">
<img <a href={bestScore2?.beatmap.url}>
src={bestScore2?.beatmapset?.covers.cover} <img
alt={bestScore2?.beatmapset?.title} src={bestScore2?.beatmapset?.covers.cover}
width="120px" alt={bestScore2?.beatmapset?.title}
/> width="120px"
</a> />
</div> </a>
<div className="bestScores__score__info"> </div>
<div className="bestScores__score__info__name"> <div className="bestScores__score__info">
<div className="bestScores__score__info__name__title"> <div className="bestScores__score__info__name">
{bestScore2?.beatmapset?.title} <div className="bestScores__score__info__name__title">
</div> {bestScore2?.beatmapset?.title}
<div className="bestScores__score__info__name__artist"> </div>
{bestScore2?.beatmapset?.artist} <div className="bestScores__score__info__name__artist">
</div> {bestScore2?.beatmapset?.artist}
</div> </div>
<div className="bestScores__score__info__score"> </div>
Star/Combos/PP <div className="bestScores__score__info__score">
<div className="bestScores__score__info__score__value"> Star/Combos/PP
<div className="bestScores__score__info__name__artist"> <div className="bestScores__score__info__score__value">
{bestScore2?.beatmap?.difficulty_rating + " "} <div className="bestScores__score__info__name__artist">
</div> {bestScore2?.beatmap?.difficulty_rating +
/ " "}
<div className="bestScores__score__info__name__artist"> </div>
{bestScore2?.max_combo} /
</div> <div className="bestScores__score__info__name__artist">
/ {bestScore2?.max_combo}
<div className="bestScores__score__info__name__artist"> </div>
{Math.round(bestScore2?.pp)} /
</div> <div className="bestScores__score__info__name__artist">
</div> {Math.round(bestScore2?.pp)}
</div> </div>
</div> </div>
</div> </div>
<br /> </div>
<div className="bestScores__score"> </div>
<div className="bestScores__score__image"> <br />
<a href={bestScore3?.beatmap.url}> <div className="bestScores__score">
<img <div className="bestScores__score__image">
src={bestScore3?.beatmapset?.covers.cover} <a href={bestScore3?.beatmap.url}>
alt={bestScore3?.beatmapset?.title} <img
width="120px" src={bestScore3?.beatmapset?.covers.cover}
/> alt={bestScore3?.beatmapset?.title}
</a> width="120px"
</div> />
<div className="bestScores__score__info"> </a>
<div className="bestScores__score__info__name"> </div>
<div className="bestScores__score__info__name__title"> <div className="bestScores__score__info">
{bestScore3?.beatmapset?.title} <div className="bestScores__score__info__name">
</div> <div className="bestScores__score__info__name__title">
<div className="bestScores__score__info__name__artist"> {bestScore3?.beatmapset?.title}
{bestScore3?.beatmapset?.artist} </div>
</div> <div className="bestScores__score__info__name__artist">
</div> {bestScore3?.beatmapset?.artist}
<div className="bestScores__score__info__score"> </div>
Star/Combos/PP </div>
<div className="bestScores__score__info__score__value"> <div className="bestScores__score__info__score">
<div className="bestScores__score__info__name__artist"> Star/Combos/PP
{bestScore3?.beatmap?.difficulty_rating + " "} <div className="bestScores__score__info__score__value">
</div> <div className="bestScores__score__info__name__artist">
/ {bestScore3?.beatmap?.difficulty_rating +
<div className="bestScores__score__info__name__artist"> " "}
{bestScore3?.max_combo} </div>
</div> /
/ <div className="bestScores__score__info__name__artist">
<div className="bestScores__score__info__name__artist"> {bestScore3?.max_combo}
{Math.round(bestScore3?.pp)} </div>
</div> /
</div> <div className="bestScores__score__info__name__artist">
</div> {Math.round(bestScore3?.pp)}
</div> </div>
</div> </div>
</div> </div>
</SkillCard> </div>
); </div>
</div>
</SkillCard>
);
} }
export default OsuBestScoresSkillCard; 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"; import { format, parse } from "date-format-parse";
function OsuUserSkillCard({ function OsuUserSkillCard({
title, title,
image, image,
accuracy, accuracy,
level, level,
pp_raw, pp_raw,
country, country,
pp_rank, pp_rank,
// countryRank, // countryRank,
join_date, join_date,
maximum_combo, maximum_combo,
total_score, total_score,
url, url,
}) { }) {
return ( return (
<SkillCard title={title} image={image} url={url}> <SkillCard title={title} image={image} url={url}>
<div className="description">Accuracy :- {Math.floor(accuracy)} %</div> <div className="description">
<div className="description">Level :- {Math.floor(level)}</div> Accuracy :- {Math.floor(accuracy)} %
<div className="description">PP :- {Math.floor(pp_raw)}</div> </div>
<div className="description">Country :- {country}</div> <div className="description">Level :- {Math.floor(level)}</div>
{/* <div className="description">Country Rank :- #{countryRank}</div> */} <div className="description">PP :- {Math.floor(pp_raw)}</div>
<div className="description">Global Rank :- #{pp_rank}</div> <div className="description">Country :- {country}</div>
<div className="description">Max Combo :- {maximum_combo}</div> {/* <div className="description">Country Rank :- #{countryRank}</div> */}
<div className="description"> <div className="description">Global Rank :- #{pp_rank}</div>
Total Score :- {total_score?.toLocaleString()} <div className="description">Max Combo :- {maximum_combo}</div>
</div> <div className="description">
<div className="description"> Total Score :- {total_score?.toLocaleString()}
Joined on : {format(join_date, "DD MMM YYYY")} </div>
</div> <div className="description">
</SkillCard> Joined on : {format(join_date, "DD MMM YYYY")}
); </div>
</SkillCard>
);
} }
export default OsuUserSkillCard; 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"; // import { format, parse } from "date-format-parse";
function SpotifyTopSkillCard({ function SpotifyTopSkillCard({
title, title,
image, image,
topSongs1, topSongs1,
topSongs2, topSongs2,
topSongs3, topSongs3,
topSongs4, topSongs4,
topSongs5, topSongs5,
url, url,
}) { }) {
return ( return (
<SkillCard title={title} image={image} url={url}> <SkillCard title={title} image={image} url={url}>
<div className="topSongs"> <div className="topSongs">
<div className="topSongs__song"> <div className="topSongs__song">
<div className="topSongs__song__image"> <div className="topSongs__song__image">
<a href={topSongs1?.external_urls.spotify}> <a href={topSongs1?.external_urls.spotify}>
<img <img
src={topSongs1?.album?.images[0]?.url} src={topSongs1?.album?.images[0]?.url}
alt={topSongs1?.name} alt={topSongs1?.name}
width="60px" width="60px"
/> />
</a> </a>
</div> </div>
<div className="topSongs__song__info"> <div className="topSongs__song__info">
<div className="topSongs__song__info__name">{topSongs1?.name}</div> <div className="topSongs__song__info__name">
<div className="topSongs__song__info__artist"> {topSongs1?.name}
{topSongs1?.artists[0]?.name} </div>
</div> <div className="topSongs__song__info__artist">
</div> {topSongs1?.artists[0]?.name}
</div> </div>
<div className="topSongs__song"> </div>
<div className="topSongs__song__image"> </div>
<a href={topSongs2?.external_urls.spotify}> <div className="topSongs__song">
<img <div className="topSongs__song__image">
src={topSongs2?.album?.images[0]?.url} <a href={topSongs2?.external_urls.spotify}>
alt={topSongs2?.name} <img
width="60px" src={topSongs2?.album?.images[0]?.url}
/> alt={topSongs2?.name}
</a> width="60px"
</div> />
<div className="topSongs__song__info"> </a>
<div className="topSongs__song__info__name">{topSongs2?.name}</div> </div>
<div className="topSongs__song__info__artist"> <div className="topSongs__song__info">
{topSongs2?.artists[0]?.name} <div className="topSongs__song__info__name">
</div> {topSongs2?.name}
</div> </div>
</div> <div className="topSongs__song__info__artist">
<div className="topSongs__song"> {topSongs2?.artists[0]?.name}
<div className="topSongs__song__image"> </div>
<a href={topSongs3?.external_urls.spotify}> </div>
<img </div>
src={topSongs3?.album?.images[0]?.url} <div className="topSongs__song">
alt={topSongs3?.name} <div className="topSongs__song__image">
width="60px" <a href={topSongs3?.external_urls.spotify}>
/> <img
</a> src={topSongs3?.album?.images[0]?.url}
</div> alt={topSongs3?.name}
<div className="topSongs__song__info"> width="60px"
<div className="topSongs__song__info__name">{topSongs3?.name}</div> />
<div className="topSongs__song__info__artist"> </a>
{topSongs3?.artists[0]?.name} </div>
</div> <div className="topSongs__song__info">
</div> <div className="topSongs__song__info__name">
</div> {topSongs3?.name}
<div className="topSongs__song"> </div>
<div className="topSongs__song__image"> <div className="topSongs__song__info__artist">
<a href={topSongs4?.external_urls.spotify}> {topSongs3?.artists[0]?.name}
<img </div>
src={topSongs4?.album?.images[0]?.url} </div>
alt={topSongs4?.name} </div>
width="60px" <div className="topSongs__song">
/> <div className="topSongs__song__image">
</a> <a href={topSongs4?.external_urls.spotify}>
</div> <img
<div className="topSongs__song__info"> src={topSongs4?.album?.images[0]?.url}
<div className="topSongs__song__info__name">{topSongs4?.name}</div> alt={topSongs4?.name}
<div className="topSongs__song__info__artist"> width="60px"
{topSongs4?.artists[0]?.name} />
</div> </a>
</div> </div>
</div> <div className="topSongs__song__info">
<div className="topSongs__song"> <div className="topSongs__song__info__name">
<div className="topSongs__song__image"> {topSongs4?.name}
<a href={topSongs5?.external_urls.spotify}> </div>
<img <div className="topSongs__song__info__artist">
src={topSongs5?.album?.images[0]?.url} {topSongs4?.artists[0]?.name}
alt={topSongs5?.name} </div>
width="60px" </div>
/> </div>
</a> <div className="topSongs__song">
</div> <div className="topSongs__song__image">
<div className="topSongs__song__info"> <a href={topSongs5?.external_urls.spotify}>
<div className="topSongs__song__info__name">{topSongs5?.name}</div> <img
<div className="topSongs__song__info__artist"> src={topSongs5?.album?.images[0]?.url}
{topSongs5?.artists[0]?.name} alt={topSongs5?.name}
</div> width="60px"
</div> />
</div> </a>
</div> </div>
</SkillCard> <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; 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"; import { format } from "date-format-parse";
function TwitterTweetsSkillCard({ function TwitterTweetsSkillCard({
title, title,
image, image,
tweets1, tweets1,
tweets2, tweets2,
tweets3, tweets3,
url, url,
}) { }) {
return ( return (
<SkillCard title={title} image={image} url={url}> <SkillCard title={title} image={image} url={url}>
<div className="skill-card-content"> <div className="skill-card-content">
Latest Tweet Latest Tweet
<div className="skill-card-content-inner"> <div className="skill-card-content-inner">
<a href={"https://twitter.com/Bravo68web/status/" + tweets1?.id}> <a
<div>{tweets1?.text}</div> href={
</a> "https://twitter.com/Bravo68web/status/" +
</div> tweets1?.id
</div> }
<br /> >
<div className="skill-card-content"> <div>{tweets1?.text}</div>
Previous Tweets </a>
<div className="skill-card-content-inner"> </div>
<a href={"https://twitter.com/Bravo68web/status/" + tweets2?.id}> </div>
{tweets2?.text} <br />
</a> <div className="skill-card-content">
</div> Previous Tweets
</div> <div className="skill-card-content-inner">
<br /> <a
<div className="skill-card-content"> href={
<div className="skill-card-content-inner"> "https://twitter.com/Bravo68web/status/" +
<a href={"https://twitter.com/Bravo68web/status/" + tweets3?.id}> tweets2?.id
{tweets3?.text} }
</a> >
</div> {tweets2?.text}
</div> </a>
</SkillCard> </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; 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"; import { format } from "date-format-parse";
function TwitterUserSkillCard({ function TwitterUserSkillCard({
title, title,
image, image,
followers_count, followers_count,
friends_count, friends_count,
statuses_count, statuses_count,
// favourites_count, // favourites_count,
created_at, created_at,
url, url,
}) { }) {
return ( return (
<SkillCard title={title} image={image} url={url}> <SkillCard title={title} image={image} url={url}>
<div className="description">Followers :- {followers_count}</div> <div className="description">Followers :- {followers_count}</div>
<div className="description">Following :- {friends_count}</div> <div className="description">Following :- {friends_count}</div>
{/* <div className="description"> {/* <div className="description">
Total Liked Tweets :- {favourites_count} Total Liked Tweets :- {favourites_count}
</div> */} </div> */}
<div className="description">Total Tweets :- {statuses_count}</div> <div className="description">Total Tweets :- {statuses_count}</div>
<div className="description"> <div className="description">
Joined On :- {format(created_at, "DD MMM YYYY")} Joined On :- {format(created_at, "DD MMM YYYY")}
</div> </div>
</SkillCard> </SkillCard>
); );
} }
export default TwitterUserSkillCard; 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"; import { format, parse } from "date-format-parse";
function WakatimeTopLangSkillCard({ function WakatimeTopLangSkillCard({
title, title,
image, image,
topLang1, topLang1,
topLang2, topLang2,
topLang3, topLang3,
topLang4, topLang4,
topLang5, topLang5,
url, url,
}) { }) {
return ( return (
<SkillCard title={title} image={image} url={url}> <SkillCard title={title} image={image} url={url}>
<div className="description"> <div className="description">
{topLang1?.name} :- {topLang1?.percent}% {topLang1?.name} :- {topLang1?.percent}%
</div> </div>
<div className="description"> <div className="description">
{topLang2?.name} :- {topLang2?.percent}% {topLang2?.name} :- {topLang2?.percent}%
</div> </div>
<div className="description"> <div className="description">
{topLang3?.name} :- {topLang3?.percent}% {topLang3?.name} :- {topLang3?.percent}%
</div> </div>
<div className="description"> <div className="description">
{topLang4?.name} :- {topLang4?.percent}% {topLang4?.name} :- {topLang4?.percent}%
</div> </div>
<div className="description"> <div className="description">
{topLang5?.name} :- {topLang5?.percent}% {topLang5?.name} :- {topLang5?.percent}%
</div> </div>
</SkillCard> </SkillCard>
); );
} }
export default WakatimeTopLangSkillCard; 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"; import { format, parse } from "date-format-parse";
function WakatimeUserSkillCard({ function WakatimeUserSkillCard({
title, title,
image, image,
total_time, total_time,
average_weekly_time, average_weekly_time,
total_weekly_time, total_weekly_time,
joinedOn, joinedOn,
url, url,
}) { }) {
return ( return (
<SkillCard title={title} image={image} url={url}> <SkillCard title={title} image={image} url={url}>
<div className="description">Total Code time :- {total_time}</div> <div className="description">Total Code time :- {total_time}</div>
<div className="description"> <div className="description">
Average Daily Code time :- {average_weekly_time} Average Daily Code time :- {average_weekly_time}
</div> </div>
<div className="description"> <div className="description">
Total Weekly Code time :- {total_weekly_time} Total Weekly Code time :- {total_weekly_time}
</div> </div>
<div className="description"> <div className="description">
Joined on :- {format(joinedOn, "DD MMM YYYY")} Joined on :- {format(joinedOn, "DD MMM YYYY")}
</div> </div>
</SkillCard> </SkillCard>
); );
} }
export default WakatimeUserSkillCard; 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"; import GitHubUserEvtSkillCard from "./skillComponents/github_events";
function Skills() { function Skills() {
const [skills, setSkills] = useState({}); const [skills, setSkills] = useState({});
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
async function requestAPIS() { async function requestAPIS() {
await APISDK.req(); await APISDK.req();
APISDK.data.logo = { APISDK.data.logo = {
osu: `https://www.pngkit.com/png/full/345-3451155_osu-logo.png`, 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`, 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`, 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`, 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`, 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`, wakatime: `/images/brandlogos/WakaTime-logo-vector-01.svg`,
lastfm: "/images/brandlogos/Lastfm-icon-vector-03.svg", lastfm: "/images/brandlogos/Lastfm-icon-vector-03.svg",
twitter: twitter:
"https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png", "https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png",
}; };
setSkills(APISDK.data); setSkills(APISDK.data);
setLoading(false); setLoading(false);
} }
useEffect(() => { useEffect(() => {
requestAPIS(); requestAPIS();
}, [loading, APISDK]); }, [loading, APISDK]);
if (loading) { if (loading) {
return ( return (
<SkillsStyle> <SkillsStyle>
<Box sx={{ width: "60%" }}> <Box sx={{ width: "60%" }}>
<LinearProgress /> <LinearProgress />
Requesting Live API data... Requesting Live API data...
</Box> </Box>
<br /> <br />
</SkillsStyle> </SkillsStyle>
); );
} else { } else {
let lastFMempty = true; let lastFMempty = true;
if (skills?.lastfm_current?.recenttracks?.track?.length > 0) { if (skills?.lastfm_current?.recenttracks?.track?.length > 0) {
lastFMempty = false; lastFMempty = false;
} }
return ( return (
<div> <div>
{/* <Cursor /> */} {/* <Cursor /> */}
{!loading && ( {!loading && (
<SkillsStyle> <SkillsStyle>
<div className="mainboard__container"> <div className="mainboard__container">
<GitHubSkillCard <GitHubSkillCard
title={"GitHub Stats"} title={"GitHub Stats"}
url={"https://github.com/Bravo68web"} url={"https://github.com/Bravo68web"}
image={skills?.logo?.github} image={skills?.logo?.github}
public_repos={skills?.gh_user?.data?.public_repos} public_repos={
followers={skills?.gh_user?.data?.followers} skills?.gh_user?.data?.public_repos
following={skills?.gh_user?.data?.following} }
public_gists={skills?.gh_user?.data?.public_gists} followers={skills?.gh_user?.data?.followers}
created_at={skills?.gh_user?.data?.created_at} following={skills?.gh_user?.data?.following}
/> public_gists={
<OsuUserSkillCard skills?.gh_user?.data?.public_gists
title={"Osu! Player Stats"} }
url={"https://osu.ppy.sh/users/bravo68web"} created_at={skills?.gh_user?.data?.created_at}
image={skills?.logo?.osu} />
accuracy={skills?.osu_user?.data?.statistics?.hit_accuracy} <OsuUserSkillCard
level={skills?.osu_user?.data?.statistics?.level?.current} title={"Osu! Player Stats"}
pp_raw={skills?.osu_user?.data?.statistics?.pp} url={"https://osu.ppy.sh/users/bravo68web"}
country={skills?.osu_user?.data?.country?.code} image={skills?.logo?.osu}
pp_rank={skills?.osu_user?.data?.statistics?.global_rank} accuracy={
countryRank={skills?.osu_user?.data?.statistics?.country_rank} skills?.osu_user?.data?.statistics
maximum_combo={ ?.hit_accuracy
skills?.osu_user?.data?.statistics?.maximum_combo }
} level={
join_date={"2019-09-21 19:33:44"} skills?.osu_user?.data?.statistics?.level
total_score={skills?.osu_user?.data?.statistics?.total_score} ?.current
/> }
<TwitterUserSkillCard pp_raw={skills?.osu_user?.data?.statistics?.pp}
title={"Twitter Stats"} country={skills?.osu_user?.data?.country?.code}
url={"https://twitter.com/Bravo68web"} pp_rank={
image={skills?.logo?.twitter} skills?.osu_user?.data?.statistics
followers_count={ ?.global_rank
skills?.twitter_user?.public_metrics?.followers_count }
} countryRank={
friends_count={ skills?.osu_user?.data?.statistics
skills?.twitter_user?.public_metrics?.following_count ?.country_rank
} }
statuses_count={ maximum_combo={
skills?.twitter_user?.public_metrics?.tweet_count skills?.osu_user?.data?.statistics
} ?.maximum_combo
created_at={skills?.twitter_user?.created_at} }
/> join_date={"2019-09-21 19:33:44"}
<SpotifyTopSkillCard total_score={
title={"Spotify Top Songs"} skills?.osu_user?.data?.statistics
url={ ?.total_score
"https://open.spotify.com/user/31huoajpuynl4w4dzbhp4frktqw4?si=48195baf55a54d7d" }
} />
image={skills?.logo?.spotify} <TwitterUserSkillCard
topSongs1={skills?.spotify_top_songs?.data?.items[0]} title={"Twitter Stats"}
topSongs2={skills?.spotify_top_songs?.data?.items[1]} url={"https://twitter.com/Bravo68web"}
topSongs3={skills?.spotify_top_songs?.data?.items[2]} image={skills?.logo?.twitter}
topSongs4={skills?.spotify_top_songs?.data?.items[3]} followers_count={
topSongs5={skills?.spotify_top_songs?.data?.items[4]} skills?.twitter_user?.public_metrics
/> ?.followers_count
<WakatimeUserSkillCard }
title={"Wakatime Stats"} friends_count={
url={"https://wakatime.com/@bravo68web"} skills?.twitter_user?.public_metrics
image={skills?.logo?.wakatime} ?.following_count
total_time={skills?.wakatime_alltime?.data?.text} }
average_weekly_time={ statuses_count={
skills?.wakatime_stats?.data skills?.twitter_user?.public_metrics
?.human_readable_daily_average_including_other_language ?.tweet_count
} }
total_weekly_time={ created_at={skills?.twitter_user?.created_at}
skills?.wakatime_stats?.data />
?.human_readable_total_including_other_language <SpotifyTopSkillCard
} title={"Spotify Top Songs"}
joinedOn={"2020-09-14"} url={
/> "https://open.spotify.com/user/31huoajpuynl4w4dzbhp4frktqw4?si=48195baf55a54d7d"
<HashNodeSkillCard }
title={"HashNode Stats"} image={skills?.logo?.spotify}
url={"https://blog.bravo68web.me/"} topSongs1={
image={skills?.logo?.hashnode} skills?.spotify_top_songs?.data?.items[0]
joinOn={"2021-06-18"} }
numPosts={skills?.hn_user?.data?.numPosts} topSongs2={
numFollowers={skills?.hn_user?.data?.numFollowers} skills?.spotify_top_songs?.data?.items[1]
numReactions={skills?.hn_user?.data?.numReactions} }
/> topSongs3={
<OsuBestScoresSkillCard skills?.spotify_top_songs?.data?.items[2]
title={"Osu! Best Scores"} }
image={skills?.logo?.osu} topSongs4={
url={"https://osu.ppy.sh/users/bravo68web"} skills?.spotify_top_songs?.data?.items[3]
bestScore1={skills?.osu_bestScores?.data?.[0]} }
bestScore2={skills?.osu_bestScores?.data?.[1]} topSongs5={
bestScore3={skills?.osu_bestScores?.data?.[2]} skills?.spotify_top_songs?.data?.items[4]
/> }
<TwitterTweetsSkillCard />
title={"Twitter Tweets"} <WakatimeUserSkillCard
url={"https://twitter.com/Bravo68web"} title={"Wakatime Stats"}
image={skills?.logo?.twitter} url={"https://wakatime.com/@bravo68web"}
tweets1={skills?.twitter_tweets?.[0]} image={skills?.logo?.wakatime}
tweets2={skills?.twitter_tweets?.[1]} total_time={
tweets3={skills?.twitter_tweets?.[2]} skills?.wakatime_alltime?.data?.text
/> }
<WakatimeTopLangSkillCard average_weekly_time={
title={"Wakatime Top Languages"} skills?.wakatime_stats?.data
url={"https://wakatime.com/@bravo68web"} ?.human_readable_daily_average_including_other_language
image={skills?.logo?.wakatime} }
topLang1={skills?.wakatime_lang?.data?.[0]} total_weekly_time={
topLang2={skills?.wakatime_lang?.data?.[1]} skills?.wakatime_stats?.data
topLang3={skills?.wakatime_lang?.data?.[2]} ?.human_readable_total_including_other_language
topLang4={skills?.wakatime_lang?.data?.[3]} }
topLang5={skills?.wakatime_lang?.data?.[4]} joinedOn={"2020-09-14"}
/> />
<LastFMCurrentSkillCard <HashNodeSkillCard
title={"LastFM Current Tracks"} title={"HashNode Stats"}
url={"https://last.fm/user/bravo68web"} url={"https://blog.bravo68web.me/"}
image={skills?.logo?.lastfm} image={skills?.logo?.hashnode}
empty={lastFMempty} joinOn={"2021-06-18"}
artist={ numPosts={skills?.hn_user?.data?.numPosts}
skills?.lastfm_current?.recenttracks?.track?.[0]?.artist[ numFollowers={
"#text" skills?.hn_user?.data?.numFollowers
] }
} numReactions={
name={skills?.lastfm_current?.recenttracks?.track?.[0]?.name} skills?.hn_user?.data?.numReactions
album={ }
skills?.lastfm_current?.recenttracks?.track?.[0]?.album[ />
"#text" <OsuBestScoresSkillCard
] title={"Osu! Best Scores"}
} image={skills?.logo?.osu}
albumImg={ url={"https://osu.ppy.sh/users/bravo68web"}
skills?.lastfm_current?.recenttracks?.track?.[0].image[1][ bestScore1={skills?.osu_bestScores?.data?.[0]}
"#text" bestScore2={skills?.osu_bestScores?.data?.[1]}
] bestScore3={skills?.osu_bestScores?.data?.[2]}
} />
/> <TwitterTweetsSkillCard
<GitHubUserEvtSkillCard title={"Twitter Tweets"}
title={"GitHub User Events"} url={"https://twitter.com/Bravo68web"}
url={"https://github.com/bravo68web"} image={skills?.logo?.twitter}
image={skills?.logo?.github} tweets1={skills?.twitter_tweets?.[0]}
evt1={skills?.gh_events?.data?.[0]} tweets2={skills?.twitter_tweets?.[1]}
evt2={skills?.gh_events?.data?.[1]} tweets3={skills?.twitter_tweets?.[2]}
evt3={skills?.gh_events?.data?.[2]} />
evt4={skills?.gh_events?.data?.[3]} <WakatimeTopLangSkillCard
evt5={skills?.gh_events?.data?.[4]} title={"Wakatime Top Languages"}
/> url={"https://wakatime.com/@bravo68web"}
</div> image={skills?.logo?.wakatime}
</SkillsStyle> topLang1={skills?.wakatime_lang?.data?.[0]}
)} topLang2={skills?.wakatime_lang?.data?.[1]}
</div> 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; export default Skills;

368
components/skills.style.js
View File

@ -1,213 +1,213 @@
import styled from "styled-components"; import styled from "styled-components";
export default styled.div` export default styled.div`
display: flex; display: flex;
max-width: 100%; max-width: 100%;
height: 100vh; height: 100vh;
padding: 100px 20px; padding: 100px 20px;
margin-top: 15px; margin-top: 15px;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
overflow-y: auto !important; overflow-y: auto !important;
background-image: url("/images/background5.jpg"); background-image: url("/images/background5.jpg");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: fixed; background-attachment: fixed;
.mainboard__container { .mainboard__container {
width: 100%; width: 100%;
} }
@media (min-width: 0px) and (max-width: 755px) { @media (min-width: 0px) and (max-width: 755px) {
.mainboard__container { .mainboard__container {
max-width: 504px; max-width: 504px;
column-count: 2; column-count: 2;
} }
} }
@media (min-width: 756px) and (max-width: 1007px) { @media (min-width: 756px) and (max-width: 1007px) {
.mainboard__container { .mainboard__container {
max-width: 756px; max-width: 756px;
column-count: 3; column-count: 3;
} }
} }
@media (min-width: 1008px) and (max-width: 1259px) { @media (min-width: 1008px) and (max-width: 1259px) {
.mainboard__container { .mainboard__container {
max-width: 1008px; max-width: 1008px;
column-count: 4; column-count: 4;
} }
} }
@media (min-width: 1260px) and (max-width: 1511px) { @media (min-width: 1260px) and (max-width: 1511px) {
.mainboard__container { .mainboard__container {
max-width: 1260px; max-width: 1260px;
column-count: 5; column-count: 5;
} }
} }
@media (min-width: 1512px) and (max-width: 1763px) { @media (min-width: 1512px) and (max-width: 1763px) {
.mainboard__container { .mainboard__container {
width: 1512px; width: 1512px;
column-count: 6; column-count: 6;
} }
} }
@media (min-width: 1764px) and (max-width: 2015px) { @media (min-width: 1764px) and (max-width: 2015px) {
.mainboard__container { .mainboard__container {
width: 1764px; width: 1764px;
column-count: 7; column-count: 7;
} }
} }
@media (min-width: 2016px) and (max-width: 2267px) { @media (min-width: 2016px) and (max-width: 2267px) {
.mainboard__container { .mainboard__container {
width: 2016px; width: 2016px;
column-count: 8; column-count: 8;
} }
} }
@media (min-width: 2268px) and (max-width: 2519px) { @media (min-width: 2268px) and (max-width: 2519px) {
.mainboard__container { .mainboard__container {
width: 2268px; width: 2268px;
column-count: 9; column-count: 9;
} }
} }
@media (min-width: 2520px) and (max-width: 2771px) { @media (min-width: 2520px) and (max-width: 2771px) {
.mainboard__container { .mainboard__container {
width: 2520px; width: 2520px;
column-count: 10; column-count: 10;
} }
} }
@media (min-width: 2772px) and (max-width: 3023px) { @media (min-width: 2772px) and (max-width: 3023px) {
.mainboard__container { .mainboard__container {
width: 2772px; width: 2772px;
column-count: 11; column-count: 11;
} }
} }
@media (min-width: 3024px) and (max-width: 3275px) { @media (min-width: 3024px) and (max-width: 3275px) {
.mainboard__container { .mainboard__container {
width: 3024px; width: 3024px;
column-count: 12; column-count: 12;
} }
} }
@media (min-width: 3276px) and (max-width: 3527px) { @media (min-width: 3276px) and (max-width: 3527px) {
.mainboard__container { .mainboard__container {
width: 3276px; width: 3276px;
column-count: 13; column-count: 13;
} }
} }
@media (min-width: 3528px) and (max-width: 3779px) { @media (min-width: 3528px) and (max-width: 3779px) {
.mainboard__container { .mainboard__container {
width: 3528px; width: 3528px;
column-count: 14; column-count: 14;
} }
} }
@media (min-width: 3780px) and (max-width: 4031px) { @media (min-width: 3780px) and (max-width: 4031px) {
.mainboard__container { .mainboard__container {
width: 3780px; width: 3780px;
column-count: 15; column-count: 15;
} }
} }
@media (min-width: 4032px) and (max-width: 4283px) { @media (min-width: 4032px) and (max-width: 4283px) {
.mainboard__container { .mainboard__container {
width: 4032px; width: 4032px;
column-count: 16; column-count: 16;
} }
} }
@media (min-width: 4284px) and (max-width: 4535px) { @media (min-width: 4284px) and (max-width: 4535px) {
.mainboard__container { .mainboard__container {
width: 4284px; width: 4284px;
column-count: 17; column-count: 17;
} }
} }
@media (min-width: 4536px) and (max-width: 4787px) { @media (min-width: 4536px) and (max-width: 4787px) {
.mainboard__container { .mainboard__container {
width: 4536px; width: 4536px;
column-count: 18; column-count: 18;
} }
} }
@media (min-width: 4788px) and (max-width: 5039px) { @media (min-width: 4788px) and (max-width: 5039px) {
.mainboard__container { .mainboard__container {
width: 4788px; width: 4788px;
column-count: 19; column-count: 19;
} }
} }
@media (min-width: 5040px) and (max-width: 5291px) { @media (min-width: 5040px) and (max-width: 5291px) {
.mainboard__container { .mainboard__container {
width: 5040px; width: 5040px;
column-count: 20; column-count: 20;
} }
} }
@media (min-width: 5292px) and (max-width: 5543px) { @media (min-width: 5292px) and (max-width: 5543px) {
.mainboard__container { .mainboard__container {
width: 5292px; width: 5292px;
column-count: 21; column-count: 21;
} }
} }
@media (min-width: 5544) and (max-width: 5795px) { @media (min-width: 5544) and (max-width: 5795px) {
.mainboard__container { .mainboard__container {
width: 5544px; width: 5544px;
column-count: 22; column-count: 22;
} }
} }
@media (min-width: 5796px) and (max-width: 6047px) { @media (min-width: 5796px) and (max-width: 6047px) {
.mainboard__container { .mainboard__container {
width: 5796px; width: 5796px;
column-count: 23; column-count: 23;
} }
} }
@media (min-width: 6048px) and (max-width: 6299px) { @media (min-width: 6048px) and (max-width: 6299px) {
.mainboard__container { .mainboard__container {
width: 6048px; width: 6048px;
column-count: 24; column-count: 24;
} }
} }
@media (min-width: 6300px) and (max-width: 6551px) { @media (min-width: 6300px) and (max-width: 6551px) {
.mainboard__container { .mainboard__container {
width: 6300px; width: 6300px;
column-count: 25; column-count: 25;
} }
} }
@media (min-width: 6552px) and (max-width: 6803px) { @media (min-width: 6552px) and (max-width: 6803px) {
.mainboard__container { .mainboard__container {
width: 6552px; width: 6552px;
column-count: 26; column-count: 26;
} }
} }
@media (min-width: 6804px) and (max-width: 7055px) { @media (min-width: 6804px) and (max-width: 7055px) {
.mainboard__container { .mainboard__container {
width: 6804px; width: 6804px;
column-count: 27; column-count: 27;
} }
} }
@media (min-width: 7056px) and (max-width: 7307px) { @media (min-width: 7056px) and (max-width: 7307px) {
.mainboard__container { .mainboard__container {
width: 7056px; width: 7056px;
column-count: 28; column-count: 28;
} }
} }
@media (min-width: 7308px) and (max-width: 7559px) { @media (min-width: 7308px) and (max-width: 7559px) {
.mainboard__container { .mainboard__container {
width: 7308px; width: 7308px;
column-count: 29; 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"; import LinearProgress from "@mui/material/LinearProgress";
export default function Status() { export default function Status() {
const [status, setStatus] = useState({}); const [status, setStatus] = useState({});
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
async function requestStatus() { async function requestStatus() {
await axios.get("/health/health").then((res) => { await axios.get("/health/health").then((res) => {
setStatus(res.data); setStatus(res.data);
setLoading(false); setLoading(false);
}); });
} }
useEffect(() => { useEffect(() => {
requestStatus(); requestStatus();
}, [loading]); }, [loading]);
if (loading) { if (loading) {
return ( return (
<Box sx={{ width: "60%" }}> <Box sx={{ width: "60%" }}>
<LinearProgress /> <LinearProgress />
Requesting Live API data... Requesting Live API data...
</Box> </Box>
); );
} else { } else {
return ( return <div>{status.status}</div>;
<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"; import { compile } from "html-to-text";
function SkillCard({ content, created_at, url, image }) { function SkillCard({ content, created_at, url, image }) {
const contents = [content]; const contents = [content];
const options = { const options = {
wordwrap: 10, wordwrap: 10,
limits: { limits: {
ellipsis: " ...", ellipsis: " ...",
maxInputLength: "200", maxInputLength: "200",
}, },
longWordSplit: { longWordSplit: {
forceWrapOnLimit: true, forceWrapOnLimit: true,
wrapCharacters: ["-", "/"], wrapCharacters: ["-", "/"],
}, },
}; };
const compiledConvert = compile(options); const compiledConvert = compile(options);
const texts = contents.map(compiledConvert); const texts = contents.map(compiledConvert);
return ( return (
<div> <div>
{content && ( {content && (
<div> <div>
<a href={url}> <a href={url}>
<ArtCardStyle> <ArtCardStyle>
<div className="card"> <div className="card">
{image && ( {image && (
<div className="card-logo"> <div className="card-logo">
<img src={image} height="30" /> <img src={image} height="30" />
</div> </div>
)} )}
<div className="content">&quot;{texts.join("\n")}&quot;</div> <div className="content">
<div className="type"> &quot;{texts.join("\n")}&quot;
# {format(created_at, "DD MMM YYYY")} </div>
</div> <div className="type">
</div> # {format(created_at, "DD MMM YYYY")}
</ArtCardStyle> </div>
</a> </div>
</div> </ArtCardStyle>
)} </a>
</div> </div>
); )}
</div>
);
} }
export default SkillCard; export default SkillCard;

54
components/tootCard.style.jsx
View File

@ -1,32 +1,32 @@
import styled from "styled-components"; import styled from "styled-components";
export default styled.div` export default styled.div`
padding: 5%; padding: 5%;
width: 230px; width: 230px;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
background-color: #aa78f6; background-color: #aa78f6;
border-radius: 5px; border-radius: 5px;
box-shadow: 10px 9px 0px -3px #7b3ea7; box-shadow: 10px 9px 0px -3px #7b3ea7;
margin: 8px; margin: 8px;
align-content: stretch; align-content: stretch;
* { * {
margin-top: inherit; margin-top: inherit;
} }
.type { .type {
color: #9bdcf0; color: #9bdcf0;
/* padding: 4px; */ /* padding: 4px; */
} }
.card-logo { .card-logo {
float: inline-end; float: inline-end;
border-radius: 100px; border-radius: 100px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
// On hover of the card, the card will grow in size // On hover of the card, the card will grow in size
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
transition: 0.3s; 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 Box from "@mui/material/Box";
import LinearProgress from "@mui/material/LinearProgress"; import LinearProgress from "@mui/material/LinearProgress";
function Toots () { function Toots() {
const [skills, setSkills] = useState({}); const [skills, setSkills] = useState({});
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
async function requestAPIS() { async function requestAPIS() {
await APISDK.req(); await APISDK.req();
APISDK.data.logo = { APISDK.data.logo = {
masto: `https://cdn.fosstodon.org/accounts/avatars/000/028/400/original/324cba4cb379bd4e.png`, masto: `https://cdn.fosstodon.org/accounts/avatars/000/028/400/original/324cba4cb379bd4e.png`,
}; };
setSkills(APISDK.data.masto_status); setSkills(APISDK.data.masto_status);
setLoading(false); setLoading(false);
} }
useEffect(() => { useEffect(() => {
requestAPIS(); requestAPIS();
}, [loading]); }, [loading]);
let image = skills?.logo?.masto; let image = skills?.logo?.masto;
if (loading) { if (loading) {
return ( return (
<SkillsStyle> <SkillsStyle>
<Box sx={{ width: "60%" }}> <Box sx={{ width: "60%" }}>
<LinearProgress /> <LinearProgress />
Fetching Toots from Fosstodon... Fetching Toots from Fosstodon...
</Box> </Box>
<br /> <br />
</SkillsStyle> </SkillsStyle>
); );
} else { } else {
return ( return (
<> <>
<ArtTitleStyle> <ArtTitleStyle>
<div className="title-bar"> <div className="title-bar">Fosstodon Status</div>
Fosstodon Status </ArtTitleStyle>
</div> <div className="mainboard__container">
</ArtTitleStyle> {skills && (
<div className="mainboard__container"> <ArtStyle>
{skills && ( {skills?.data?.map((project, index) => {
<ArtStyle> project.image = image;
{skills?.data?.map((project, index) => { return (
project.image = image; <>
return ( <SkillCard {...project} />
<> </>
<SkillCard {...project} /> );
</> })}
); </ArtStyle>
})} )}
</ArtStyle> </div>
)} </>
</div> );
</> }
);
}
} }
export default Toots; export default Toots;

38
components/toots.style.jsx
View File

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

78
components/vsexts.jsx
View File

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

188
components/vsexts.style.js
View File

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

58
handlers/requester.js
View File

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

138
handlers/sdk.js
View File

@ -1,73 +1,73 @@
import { requester } from "./requester"; import { requester } from "./requester";
export const APISDK = { export const APISDK = {
data: {}, data: {},
async req() { async req() {
await requester( await requester(
[ [
{ {
endpoint: "/me/github/user", endpoint: "/me/github/user",
name: "gh_user", name: "gh_user",
}, },
{ {
endpoint: "/me/discord/profile", endpoint: "/me/discord/profile",
name: "discord_activity", name: "discord_activity",
}, },
{ {
endpoint: "/me/gaming/osu/user", endpoint: "/me/gaming/osu/user",
name: "osu_user", name: "osu_user",
}, },
{ {
endpoint: "/me/gaming/osu/best", endpoint: "/me/gaming/osu/best",
name: "osu_bestScores", name: "osu_bestScores",
}, },
{ {
endpoint: "/me/spotify/top", endpoint: "/me/spotify/top",
name: "spotify_top_songs", name: "spotify_top_songs",
}, },
{ {
endpoint: "/me/wakatime/codeTimeAllTime", endpoint: "/me/wakatime/codeTimeAllTime",
name: "wakatime_alltime", name: "wakatime_alltime",
}, },
{ {
endpoint: "/me/wakatime/codeStatsLast7Days", endpoint: "/me/wakatime/codeStatsLast7Days",
name: "wakatime_stats", name: "wakatime_stats",
}, },
{ {
endpoint: "/me/wakatime/LanguageUsageInLast7Days", endpoint: "/me/wakatime/LanguageUsageInLast7Days",
name: "wakatime_lang", name: "wakatime_lang",
}, },
{ {
endpoint: "/me/hashnode/", endpoint: "/me/hashnode/",
name: "hn_user", name: "hn_user",
}, },
{ {
endpoint: "/me/twitter/profile", endpoint: "/me/twitter/profile",
name: "twitter_user", name: "twitter_user",
}, },
{ {
endpoint: "/me/twitter/tweets", endpoint: "/me/twitter/tweets",
name: "twitter_tweets", name: "twitter_tweets",
}, },
{ {
endpoint: "/me/lastfm/current", endpoint: "/me/lastfm/current",
name: "lastfm_current", name: "lastfm_current",
}, },
{ {
endpoint: "/me/github/events", endpoint: "/me/github/events",
name: "gh_events", name: "gh_events",
}, },
{ {
endpoint: "/me/vscode/", endpoint: "/me/vscode/",
name: "vscode", name: "vscode",
}, },
{ {
endpoint: "/me/mastodon/statuses", endpoint: "/me/mastodon/statuses",
name: "masto_status", name: "masto_status",
}, },
], ],
this.data this.data
); );
// return tempEndpoint("https://api.github.com/users/bravo68web", 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 { useEffect, useState } from "react";
import axios from "../handlers/axios" import axios from "../handlers/axios";
const parseSong = ( const parseSong = (body, imageSize) => {
body, if (!body) {
imageSize, return {
) => { status: "connecting",
if (!body) { song: null,
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 useLastFM = () =>{ const lastSong = body.recenttracks.track?.[0];
const [status,setStatus] = useState("idle")
const [song,setSong] = useState();
const getStatus = async () =>{ if (!lastSong || !lastSong["@attr"]?.nowplaying) {
return {
status: "idle",
song: null,
};
}
axios.get("/me/lastfm/current").then((res)=>{ const image = lastSong.image.find((i) => {
const {status, song}= return i.size === imageSize;
parseSong(res.data, "extralarge") });
setSong(song)
setStatus(status)
})
}
useEffect(()=>{
const interval = setInterval(()=>{ return {
getStatus() status: "playing",
}, 3000) 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": { "compilerOptions": {
"baseUrl": "./" "baseUrl": "./"
} }
} }

209
libs/discord-parser.js
View File

@ -1,103 +1,126 @@
export default function parse(data) { export default function parse(data) {
const output = {}; const output = {};
const act = []; const act = [];
const PrirorityActivityType = ['Coding', 'Listening to Spotify', 'Playing', 'Custom Status', 'Streaming', 'Watching', 'Competing', 'Unknown'];
output.discord = { const PrirorityActivityType = [
id: data.discord_user.id, "Coding",
username: data.discord_user.username, "Listening to Spotify",
discriminator: data.discord_user.discriminator, "Playing",
avatar_url: "https://cdn.discordapp.com/avatars/" + data.discord_user.id + "/" + data.discord_user.avatar + ".png", "Custom Status",
avatar_decoration_url: "https://cdn.discordapp.com/avatar-decoration-presets/" + data.discord_user.avatar_decoration + ".png" "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"){ output.kv = data.kv;
return {
discord_status: "offline",
}
}
if (data.listening_to_spotify) { if (data.discord_status == "offline") {
output.spotify = { return {
album: data.spotify.album, discord_status: "offline",
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")){ if (data.listening_to_spotify) {
act.push({ output.spotify = {
prirority_id: PrirorityActivityType.indexOf('Custom Status'), album: data.spotify.album,
...activity artist: data.spotify.artist,
}); song: data.spotify.song,
output.custom_status = { album_art_url: data.spotify.album_art_url,
state: activity.state, timestamps: data.spotify.timestamps,
emoji: { track_id: data.spotify.track_id,
name: activity.emoji?.name, };
id: activity.emoji?.id, }
animated: activity.emoji?.animated, for (const activity of data.activities) {
emoji_url: "https://cdn.discordapp.com/emojis/" + activity.emoji?.id + ".webp?size=44&quality=lossless" if (activity.name.includes("Visual Studio Code")) {
} act.push({
}; prirority_id: PrirorityActivityType.indexOf("Coding"),
} ...activity,
else { });
act.push({ } else if (activity.name.includes("Spotify")) {
prirority_id: PrirorityActivityType.indexOf('Unknown'), act.push({
...activity prirority_id: PrirorityActivityType.indexOf(
}); "Listening to Spotify"
break; ),
} ...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){ if (output.activity?.prirority_id == 1) {
output.activity.assets = { output.activity.assets = {
large_image : output.spotify.album_art_url, large_image: output.spotify.album_art_url,
small_image : "/images/brandlogos/SpotifyLogo.png" 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){ return output;
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;
}

8
next.config.js
View File

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

94
package.json
View File

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

10
pages/404.js
View File

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

2
pages/500.js
View File

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

20
pages/_app.js
View File

@ -1,18 +1,16 @@
import "../styles/globals.css"; import "../styles/globals.css";
// import CustomCursor from "components/providers/cursor"; // import CustomCursor from "components/providers/cursor";
import ErrorBoundary from '../components/errorBoundary' import ErrorBoundary from "../components/errorBoundary";
function MyPortfolio({ Component, pageProps }) { function MyPortfolio({ Component, pageProps }) {
return ( return (
<> <>
{/* <CustomCursor /> */} {/* <CustomCursor /> */}
<ErrorBoundary> <ErrorBoundary>
<Component {...pageProps} /> <Component {...pageProps} />
</ErrorBoundary> </ErrorBoundary>
</> </>
); );
} }
export default MyPortfolio; export default MyPortfolio;

111
pages/_document.js
View File

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

26
pages/about.js
View File

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

2
pages/api/index.js
View File

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

32
pages/api/sitemap.js
View File

@ -4,25 +4,25 @@ const { createWriteStream } = require("fs");
const { SitemapStream } = require("sitemap"); const { SitemapStream } = require("sitemap");
export default handler.get(async (req, res) => { export default handler.get(async (req, res) => {
// Get the all Blog posts // Get the all Blog posts
const sitemap = new SitemapStream({ const sitemap = new SitemapStream({
hostname: "https://itsmebravo.dev", 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 // Writing static pages to sitemap
sitemap.write({ url: "/", changefreq: "daily", priority: 1 }); sitemap.write({ url: "/", changefreq: "daily", priority: 1 });
sitemap.write({ url: "/stats/", changefreq: "daily", priority: 0.8 }); sitemap.write({ url: "/stats/", changefreq: "daily", priority: 0.8 });
sitemap.write({ url: "/contact/", 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: "/resume/", changefreq: "daily", priority: 0.8 });
sitemap.write({ url: "/about/", changefreq: "daily", priority: 0.8 }); sitemap.write({ url: "/about/", changefreq: "daily", priority: 0.8 });
sitemap.write({ url: "/projects/", changefreq: "daily", priority: 0.8 }); sitemap.write({ url: "/projects/", changefreq: "daily", priority: 0.8 });
sitemap.end(); sitemap.end();
// Send a message after process done // Send a message after process done
res.status(200).json({ message: "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"; import Footer from "components/footer";
export default function Home() { export default function Home() {
return ( return (
<div> <div>
<Head> <Head>
<title> <title>
Contact | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and Contact | Jyotirmoy Bandyopadhayaya | Full Stack Web
DevOps Engineer Developer and DevOps Engineer
</title> </title>
</Head> </Head>
<Nav /> <Nav />
<Contact /> <Contact />
{/* <Footer /> */} {/* <Footer /> */}
</div> </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"; import Footer from "components/footer";
export default function Home() { export default function Home() {
return ( return (
<div> <div>
<Head> <Head>
<title> <title>
Extras | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and Extras | Jyotirmoy Bandyopadhayaya | Full Stack Web
DevOps Engineer Developer and DevOps Engineer
</title> </title>
</Head> </Head>
<Nav /> <Nav />
<Extras /> <Extras />
<Footer /> <Footer />
</div> </div>
); );
} }

28
pages/index.js
View File

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

26
pages/projects.js
View File

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

26
pages/qbadges.js
View File

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

26
pages/resume.js
View File

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

27
pages/stats.js
View File

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

26
pages/toots.js
View File

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

26
pages/vscode.js
View File

@ -4,18 +4,18 @@ import VSExts from "components/vsexts";
import Footer from "components/footer"; import Footer from "components/footer";
export default function Home() { export default function Home() {
return ( return (
<div> <div>
<Head> <Head>
<title> <title>
VS Code Extensions | Jyotirmoy Bandyopadhayaya | Full Stack Web VS Code Extensions | Jyotirmoy Bandyopadhayaya | Full Stack
Developer and DevOps Engineer Web Developer and DevOps Engineer
</title> </title>
</Head> </Head>
<Nav /> <Nav />
<VSExts /> <VSExts />
<Footer /> <Footer />
</div> </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"); @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
:root { :root {
--color1: #11052c; --color1: #11052c;
--color2: #3d087b; --color2: #3d087b;
--color3: #f43b86; --color3: #f43b86;
--color4: #ffe459; --color4: #ffe459;
--color5: #16b2fa; --color5: #16b2fa;
--color6: #0ff558; --color6: #0ff558;
--color7: #f4f4f4; --color7: #f4f4f4;
--color8: #f58a0f; --color8: #f58a0f;
--color9: #f5a80f; --color9: #f5a80f;
--color10: #0ffaac; --color10: #0ffaac;
--font: "Source Code Pro", monospace; --font: "Source Code Pro", monospace;
--color-cursor: 220, 90, 90; --color-cursor: 220, 90, 90;
--cursor-outline-shade: 0.3; --cursor-outline-shade: 0.3;
--cursor-size: 10px; --cursor-size: 10px;
--cursor-outline-size: 12px; --cursor-outline-size: 12px;
} }
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
html, html,
body { body {
overflow: hidden; overflow: hidden;
background: var(--color2); background: var(--color2);
padding: 0; padding: 0;
margin: 0; margin: 0;
font-family: var(--font), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, font-family: var(--font), -apple-system, BlinkMacSystemFont, Segoe UI,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
height: 100vh; sans-serif;
width: 100vw; height: 100vh;
/* color:var(--color3) */ width: 100vw;
color: var(--color7); /* color:var(--color3) */
/* cursor: none; */ color: var(--color7);
/* cursor: none; */
} }
a { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
/* .cursor { /* .cursor {

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

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