merge rework
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"tabWidth": 4,
|
||||||
|
"arrowParens": "always",
|
||||||
|
"semi": true,
|
||||||
|
"useTabs": true
|
||||||
|
}
|
|
@ -11,7 +11,7 @@ function Page500(error = null) {
|
||||||
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>
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { LanguagesKnownCategory, description1, description2 } from "config";
|
import { LanguagesKnownCategory, description1, description2 } from "config";
|
||||||
import { AboutStyle } from "./about.style";
|
import { AboutStyle } from "./about.style";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
function about() {
|
function about() {
|
||||||
return (
|
return (
|
||||||
|
@ -14,16 +15,20 @@ function about() {
|
||||||
<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()}
|
#{Object.keys(lang)[0].toString()}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
<div className="content-2">
|
<div className="content">
|
||||||
<p>{description2}</p>
|
<p>{description2}</p>
|
||||||
<img src="https://bravo68web.me/images/header_.png" />
|
</div>
|
||||||
|
<div className="content-2">
|
||||||
|
<Image src="/images/header-banner.png" alt="cool lang and framework banner" width="1200" height="270" quality="100" className="banner-image-img"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</AboutStyle>
|
</AboutStyle>
|
||||||
|
|
|
@ -3,18 +3,14 @@ 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;
|
overflow-x: hidden !important;
|
||||||
top: 50%;
|
padding: 2rem;
|
||||||
left: 50%;
|
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
padding-top: 12em;
|
background-image: url("/images/pxfuel-6.jpg");
|
||||||
/* padding-bottom: 8em; */
|
background-size: cover;
|
||||||
align-items: center;
|
background-position: center;
|
||||||
display: flex;
|
background-repeat: no-repeat;
|
||||||
flex-direction: column;
|
background-blend-mode: difference;
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
/* position: relative; */
|
|
||||||
.default {
|
.default {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -23,32 +19,31 @@ export const AboutStyle = styled.div`
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 8em;
|
padding-top: 8em;
|
||||||
padding-bottom: 8em;
|
padding-bottom: 8em;
|
||||||
|
|
||||||
/* position: absolute; */
|
|
||||||
/* top: 0; */
|
|
||||||
|
|
||||||
/* overflow-y: auto; */
|
|
||||||
}
|
}
|
||||||
.content {
|
.content {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
margin-left: 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(--color14);
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
background-color: var(--color15);
|
||||||
}
|
}
|
||||||
.content-2 {
|
.content-2 {
|
||||||
margin-top: 1em;
|
padding-top: 2rem;
|
||||||
margin-bottom: 1em;
|
|
||||||
margin-left: 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 {
|
}
|
||||||
|
.banner-image {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
|
.banner-image-img {
|
||||||
|
align-items: center;
|
||||||
|
object-fit: contain;
|
||||||
|
object-position: center;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.lang-map {
|
.lang-map {
|
||||||
|
@ -58,18 +53,12 @@ export const AboutStyle = styled.div`
|
||||||
margin-left: 1.7em;
|
margin-left: 1.7em;
|
||||||
margin-right: 1.7em;
|
margin-right: 1.7em;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
padding-bottom: 2rem;
|
||||||
}
|
}
|
||||||
.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: rgb(34, 193, 195);
|
|
||||||
background: linear-gradient(
|
|
||||||
0deg,
|
|
||||||
rgba(34, 193, 195, 1) 0%,
|
|
||||||
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;
|
||||||
|
|
|
@ -11,14 +11,14 @@ function Art() {
|
||||||
{projects.map((project, index) => {
|
{projects.map((project, index) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SkillCard key={index} {...project} />
|
<SkillCard key={project.name} {...project} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
{arts.map((project, index) => {
|
{arts.map((project, index) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SkillCard key={index} {...project} />
|
<SkillCard key={project.name} {...project} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
|
@ -4,11 +4,12 @@ export const ArtStyle = styled.div`
|
||||||
padding: 100px 20px;
|
padding: 100px 20px;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
gap:10px;
|
||||||
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/pxfuel-4.jpg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
|
@ -1,13 +1,12 @@
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
|
||||||
export default styled.div`
|
export default styled.div`
|
||||||
padding: 2%;
|
padding: 0.8rem;
|
||||||
width: 230px;
|
width: 230px;
|
||||||
height: 320px;
|
height: 320px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: #5f046b;
|
background-color: var(--color12);
|
||||||
border-radius: 5px;
|
border-radius: 1rem;
|
||||||
box-shadow: 10px 9px 0px -3px #fffefe;
|
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
* {
|
* {
|
||||||
margin-top: inherit;
|
margin-top: inherit;
|
||||||
|
@ -16,6 +15,10 @@ export default styled.div`
|
||||||
color: #92dcf3;
|
color: #92dcf3;
|
||||||
/* padding: 4px; */
|
/* padding: 4px; */
|
||||||
}
|
}
|
||||||
|
.date{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
.card-logo {
|
.card-logo {
|
||||||
display: flex;
|
display: flex;
|
||||||
/* width: 100%; */
|
/* width: 100%; */
|
||||||
|
|
|
@ -13,7 +13,10 @@ export default function Buymeacoffee() {
|
||||||
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(
|
||||||
|
"data-description",
|
||||||
|
"Support me on Buy me a coffee!"
|
||||||
|
);
|
||||||
script.setAttribute(
|
script.setAttribute(
|
||||||
"data-message",
|
"data-message",
|
||||||
"Buying a single coffee for me is 1000 times worth than a Thankyou "
|
"Buying a single coffee for me is 1000 times worth than a Thankyou "
|
||||||
|
|
|
@ -32,15 +32,18 @@ function Contact() {
|
||||||
<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
|
||||||
|
and opportunities.
|
||||||
</p>
|
</p>
|
||||||
<br />
|
<br />
|
||||||
<p>
|
<p>
|
||||||
<h3>
|
<h3>
|
||||||
<strong>Email:</strong>
|
<strong>Email:</strong>
|
||||||
</h3>
|
</h3>
|
||||||
<a href="mailto:me@bravo68web.me">me@bravo68web.me</a>
|
<a href="mailto:me@bravo68web.me">
|
||||||
|
me@bravo68web.me
|
||||||
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<br />
|
<br />
|
||||||
<p>
|
<p>
|
||||||
|
@ -63,7 +66,9 @@ function Contact() {
|
||||||
<h3>
|
<h3>
|
||||||
<strong>Extra:</strong>
|
<strong>Extra:</strong>
|
||||||
</h3>
|
</h3>
|
||||||
<a href="https://calendly.com/bravo68web">Calendly</a>
|
<a href="https://calendly.com/bravo68web">
|
||||||
|
Calendly
|
||||||
|
</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,15 +6,15 @@ export const ContactStyle = styled.div`
|
||||||
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/pxfuel-3.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;
|
||||||
|
@ -130,9 +130,9 @@ export const ContactStyle = styled.div`
|
||||||
background: rgb(131, 58, 180);
|
background: rgb(131, 58, 180);
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
90deg,
|
90deg,
|
||||||
rgba(131, 58, 180, 1) 0%,
|
#eeb415 0%,
|
||||||
rgba(253, 29, 29, 1) 50%,
|
#ff9f21 50%,
|
||||||
rgba(252, 176, 69, 1) 100%
|
#eeb415 100%
|
||||||
);
|
);
|
||||||
padding: 10.5px 21px;
|
padding: 10.5px 21px;
|
||||||
-webkit-border-radius: 6px;
|
-webkit-border-radius: 6px;
|
||||||
|
|
|
@ -2,9 +2,7 @@ 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>; */
|
|
||||||
|
|
||||||
const customStatus = [
|
const customStatus = [
|
||||||
"Searching for Cat Girls",
|
"Searching for Cat Girls",
|
||||||
|
@ -21,65 +19,38 @@ export default function DiscordActivity() {
|
||||||
userId: discord_id,
|
userId: discord_id,
|
||||||
socket: true,
|
socket: true,
|
||||||
});
|
});
|
||||||
const [time, setTime] = useState("00:00:00 elapsed");
|
|
||||||
const [pickedStatus] = useState(statusPicker());
|
const [pickedStatus] = useState(statusPicker());
|
||||||
const padTo2Digits = (num) => {
|
|
||||||
return num.toString().padStart(2, "0");
|
|
||||||
};
|
|
||||||
|
|
||||||
const convertMsToHM = (milliseconds) => {
|
|
||||||
let seconds = Math.floor(milliseconds / 1000);
|
|
||||||
let minutes = Math.floor(seconds / 60);
|
|
||||||
let hours = Math.floor(minutes / 60);
|
|
||||||
seconds = seconds % 60;
|
|
||||||
minutes = seconds >= 30 ? minutes + 1 : minutes;
|
|
||||||
minutes = minutes % 60;
|
|
||||||
hours = hours % 24;
|
|
||||||
return `${padTo2Digits(hours)}:${padTo2Digits(minutes)}:${padTo2Digits(
|
|
||||||
seconds
|
|
||||||
)} elapsed`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const [currentTs, setCurrentTs] = useState(Date.now());
|
|
||||||
const [parsedStatus, setParsedStatus] = useState(null);
|
const [parsedStatus, setParsedStatus] = useState(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if(!loading){
|
if (!loading) {
|
||||||
setParsedStatus(DiscordParser(status));
|
setParsedStatus(DiscordParser(status));
|
||||||
}
|
}
|
||||||
}, [status, loading])
|
}, [status, loading]);
|
||||||
|
|
||||||
useEffect(() => {
|
if (!loading && parsedStatus && status.discord_status !== "offline") {
|
||||||
let interval = setInterval(() => {
|
|
||||||
if (!loading) {
|
|
||||||
setCurrentTs(Date.now());
|
|
||||||
let timeElapsed = convertMsToHM(
|
|
||||||
currentTs - new Date(parsedStatus?.activity?.timestamps.start)
|
|
||||||
);
|
|
||||||
setTime(timeElapsed);
|
|
||||||
}
|
|
||||||
}, 1000);
|
|
||||||
return () => {
|
|
||||||
clearInterval(interval);
|
|
||||||
};
|
|
||||||
}, [currentTs, loading, convertMsToHM, parsedStatus]);
|
|
||||||
|
|
||||||
if (
|
|
||||||
!loading && parsedStatus && status.discord_status !== "offline"
|
|
||||||
) {
|
|
||||||
return (
|
return (
|
||||||
<DicordActivityStyle>
|
<DicordActivityStyle>
|
||||||
<div className="discord-icons">
|
<div className="discord-icons">
|
||||||
<div className="discord-large-icon">
|
<div className="discord-large-icon">
|
||||||
<img src={parsedStatus.activity.assets.large_image} />
|
<img
|
||||||
|
src={parsedStatus.activity.assets.large_image} alt="discord large image"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="discord-small-icon">
|
<div className="discord-small-icon">
|
||||||
<img src={parsedStatus.activity.assets.small_image} alt="" />
|
<img
|
||||||
|
src={parsedStatus.activity.assets.small_image} alt="discord small image"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="discord-messageBox">
|
<div className="discord-messageBox">
|
||||||
<div className="discord-message-application">
|
<div className="discord-message-application">
|
||||||
<b>{parsedStatus.discord.username + "#" + parsedStatus.discord.discriminator}</b>
|
<b>
|
||||||
|
{parsedStatus.discord.username +
|
||||||
|
"#" +
|
||||||
|
parsedStatus.discord.discriminator}
|
||||||
|
</b>
|
||||||
</div>
|
</div>
|
||||||
<div className="discord-message-activity">
|
<div className="discord-message-activity">
|
||||||
<b>{parsedStatus.activity.details}</b>
|
<b>{parsedStatus.activity.details}</b>
|
||||||
|
@ -88,12 +59,10 @@ export default function DiscordActivity() {
|
||||||
<div className="discord-message-files">
|
<div className="discord-message-files">
|
||||||
<b>{parsedStatus.activity.state}</b>
|
<b>{parsedStatus.activity.state}</b>
|
||||||
</div>
|
</div>
|
||||||
<div className="time-elapsed">{time}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</DicordActivityStyle>
|
</DicordActivityStyle>
|
||||||
);
|
);
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
let restData = {
|
let restData = {
|
||||||
username: "Bravo68-DF_Techs",
|
username: "Bravo68-DF_Techs",
|
||||||
public_flags: 64,
|
public_flags: 64,
|
||||||
|
@ -114,7 +83,9 @@ export default function DiscordActivity() {
|
||||||
</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>
|
||||||
|
{restData.username + "#" + restData.discriminator}
|
||||||
|
</b>
|
||||||
</div>
|
</div>
|
||||||
<div className="discord-message-activity">
|
<div className="discord-message-activity">
|
||||||
<b>is Offline</b>
|
<b>is Offline</b>
|
||||||
|
@ -123,7 +94,6 @@ export default function DiscordActivity() {
|
||||||
<div className="discord-message-files">
|
<div className="discord-message-files">
|
||||||
<b>{pickedStatus}</b>
|
<b>{pickedStatus}</b>
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="time-elapsed">00:00:00 elapsed</div> */}
|
|
||||||
</div>
|
</div>
|
||||||
</DicordActivityStyle>
|
</DicordActivityStyle>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,19 +1,19 @@
|
||||||
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
|
||||||
|
@ -30,12 +30,11 @@ class ErrorBoundary extends Component {
|
||||||
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;
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,145 @@
|
||||||
|
import { job_exp_1, job_exp_2, job_exp_3, job_exp_4 } from "config";
|
||||||
|
import { ExpStyle } from "./experinces.style";
|
||||||
|
|
||||||
|
function experinces() {
|
||||||
|
return (
|
||||||
|
<ExpStyle>
|
||||||
|
<div className="all">
|
||||||
|
<div className="company">
|
||||||
|
<div className="company-left">
|
||||||
|
<div className="company-img">
|
||||||
|
<img src={job_exp_1.logo} alt="company logo" />
|
||||||
|
</div>
|
||||||
|
<div className="company-info">
|
||||||
|
<div className="company-name">{job_exp_1.name}</div>
|
||||||
|
<div className="company-desp">{job_exp_1.info}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="company-right">
|
||||||
|
<div className="company-exp-short">
|
||||||
|
<div className="company-role-name">
|
||||||
|
{job_exp_1.role}
|
||||||
|
</div>
|
||||||
|
<div className="company-role-dur">
|
||||||
|
{job_exp_1.start_date} - {job_exp_1.end_date}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="company-role-desp">
|
||||||
|
<p className="company-role-desp-para">
|
||||||
|
{job_exp_1.description}
|
||||||
|
</p>
|
||||||
|
<div className="tech-list">
|
||||||
|
{job_exp_1.techstack.map((tech) => (
|
||||||
|
<div key={tech} className="tech-name">
|
||||||
|
#{tech}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="company">
|
||||||
|
<div className="company-left">
|
||||||
|
<div className="company-img">
|
||||||
|
<img src={job_exp_2.logo} alt="company logo" />
|
||||||
|
</div>
|
||||||
|
<div className="company-info">
|
||||||
|
<div className="company-name">{job_exp_2.name}</div>
|
||||||
|
<div className="company-desp">{job_exp_2.info}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="company-right">
|
||||||
|
<div className="company-exp-short">
|
||||||
|
<div className="company-role-name">
|
||||||
|
{job_exp_2.role}
|
||||||
|
</div>
|
||||||
|
<div className="company-role-dur">
|
||||||
|
{job_exp_2.start_date} - {job_exp_2.end_date}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="company-role-desp">
|
||||||
|
<p className="company-role-desp-para">
|
||||||
|
{job_exp_2.description}
|
||||||
|
</p>
|
||||||
|
<div className="tech-list">
|
||||||
|
{job_exp_2.techstack.map((tech) => (
|
||||||
|
<div key={tech} className="tech-name">
|
||||||
|
#{tech}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="company">
|
||||||
|
<div className="company-left">
|
||||||
|
<div className="company-img">
|
||||||
|
<img src={job_exp_3.logo} alt="company logo" />
|
||||||
|
</div>
|
||||||
|
<div className="company-info">
|
||||||
|
<div className="company-name">{job_exp_3.name}</div>
|
||||||
|
<div className="company-desp">{job_exp_3.info}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="company-right">
|
||||||
|
<div className="company-exp-short">
|
||||||
|
<div className="company-role-name">
|
||||||
|
{job_exp_3.role}
|
||||||
|
</div>
|
||||||
|
<div className="company-role-dur">
|
||||||
|
{job_exp_3.start_date} - {job_exp_3.end_date}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="company-role-desp">
|
||||||
|
<p className="company-role-desp-para">
|
||||||
|
{job_exp_3.description}
|
||||||
|
</p>
|
||||||
|
<div className="tech-list">
|
||||||
|
{job_exp_3.techstack.map((tech) => (
|
||||||
|
<div key={tech} className="tech-name">
|
||||||
|
#{tech}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="company">
|
||||||
|
<div className="company-left">
|
||||||
|
<div className="company-img">
|
||||||
|
<img src={job_exp_4.logo} alt="company logo" />
|
||||||
|
</div>
|
||||||
|
<div className="company-info">
|
||||||
|
<div className="company-name">{job_exp_4.name}</div>
|
||||||
|
<div className="company-desp">{job_exp_4.info}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="company-right">
|
||||||
|
<div className="company-exp-short">
|
||||||
|
<div className="company-role-name">
|
||||||
|
{job_exp_4.role}
|
||||||
|
</div>
|
||||||
|
<div className="company-role-dur">
|
||||||
|
{job_exp_4.start_date} - {job_exp_4.end_date}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="company-role-desp">
|
||||||
|
<p className="company-role-desp-para">
|
||||||
|
{job_exp_4.description}
|
||||||
|
</p>
|
||||||
|
<div className="tech-list">
|
||||||
|
{job_exp_4.techstack.map((tech) => (
|
||||||
|
<div key={tech} className="tech-name">
|
||||||
|
#{tech}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ExpStyle>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default experinces;
|
|
@ -0,0 +1,101 @@
|
||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
|
export const ExpStyle = styled.div`
|
||||||
|
background-color: var(--color1);
|
||||||
|
overflow-y: scroll !important;
|
||||||
|
padding: 2rem;
|
||||||
|
padding-top: 8rem;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
.company {
|
||||||
|
display: flex;
|
||||||
|
padding: 1rem;
|
||||||
|
background-color: var(--color11);
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.company-exp-short {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.tech-list {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.3rem;
|
||||||
|
.tech-name {
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
background-color: var(--color2);
|
||||||
|
}
|
||||||
|
.tech-name:hover {
|
||||||
|
background-color: var(--color3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.company-left {
|
||||||
|
width: 25%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.2px;
|
||||||
|
.company-img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin: auto;
|
||||||
|
max-height: 12rem;
|
||||||
|
object-fit: contain;
|
||||||
|
object-position: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-right {
|
||||||
|
width: 75%;
|
||||||
|
.company-exp-short {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
.company-role-name {
|
||||||
|
font-size: 1.55rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--color3);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.company-role-dur {
|
||||||
|
font-size: 1.55rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--color4);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.company-role-desp {
|
||||||
|
.company-role-desp-para {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-bottom: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-info {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.company-name {
|
||||||
|
color: var(--color3);
|
||||||
|
font-size: 1.7rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.company-desp {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.all {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 3rem;
|
||||||
|
}
|
||||||
|
`;
|
|
@ -7,9 +7,9 @@ function extras() {
|
||||||
<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) => {
|
||||||
return (
|
return (
|
||||||
<div key={index}>
|
<div key={content.name}>
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<div className="content-description">
|
<div className="content-description">
|
||||||
<img src={content.image} />
|
<img src={content.image} />
|
||||||
|
@ -36,7 +36,7 @@ function extras() {
|
||||||
<div className="default">
|
<div className="default">
|
||||||
{extra.map((content, index) => {
|
{extra.map((content, index) => {
|
||||||
return (
|
return (
|
||||||
<div key={index}>
|
<div key={content.name}>
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<div className="content-description">
|
<div className="content-description">
|
||||||
<img src={content.image} />
|
<img src={content.image} />
|
||||||
|
|
|
@ -5,8 +5,8 @@ export const ExtraStyles = styled.div`
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-top: 15vh;
|
padding: 15vh 10vw;
|
||||||
background-image: url("images/background6.webp");
|
background-image: url("images/pxfuel-5.jpg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
|
@ -14,10 +14,13 @@ export const ExtraStyles = styled.div`
|
||||||
overflow-y: scroll !important;
|
overflow-y: scroll !important;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
.title {
|
.title {
|
||||||
|
width: 100%;
|
||||||
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);
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius:0.1rem;
|
||||||
}
|
}
|
||||||
.default {
|
.default {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -27,6 +30,8 @@ export const ExtraStyles = styled.div`
|
||||||
/* height: 100vh; */
|
/* height: 100vh; */
|
||||||
padding-bottom: 3em;
|
padding-bottom: 3em;
|
||||||
padding-top: 2em;
|
padding-top: 2em;
|
||||||
|
gap: 2.5em;
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
@ -34,6 +39,8 @@ export const ExtraStyles = styled.div`
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-top: 2em;
|
padding-top: 2em;
|
||||||
padding-bottom: 2em;
|
padding-bottom: 2em;
|
||||||
|
background-color: var(--color12);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
filter: contrast(200%);
|
filter: contrast(200%);
|
||||||
-webkit-transform: translateX(-5px) translateY(-5px);
|
-webkit-transform: translateX(-5px) translateY(-5px);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -20,6 +20,5 @@ export default styled.div`
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -8,7 +8,6 @@ import LinkedInIcon from "@mui/icons-material/LinkedIn";
|
||||||
import InstagramIcon from "@mui/icons-material/Instagram";
|
import InstagramIcon from "@mui/icons-material/Instagram";
|
||||||
import FacebookIcon from "@mui/icons-material/Facebook";
|
import FacebookIcon from "@mui/icons-material/Facebook";
|
||||||
import SvgIcon from "@mui/material/SvgIcon";
|
import SvgIcon from "@mui/material/SvgIcon";
|
||||||
import MastodonSVG from "./assets/mastodon_icon_137420.svg";
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
name,
|
name,
|
||||||
|
@ -25,32 +24,32 @@ 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() {
|
profPic.addEventListener("mouseout", function () {
|
||||||
animePic.style.display = 'block';
|
animePic.style.display = "block";
|
||||||
profPic.style.display = 'none';
|
profPic.style.display = "none";
|
||||||
});
|
});
|
||||||
},[])
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MainStyle>
|
<MainStyle>
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<div className="profile">
|
<div className="profile">
|
||||||
<img
|
<img
|
||||||
src="/images/anime-profile-pic.png"
|
src="/images/profile-new-transp.png"
|
||||||
alt=""
|
alt=""
|
||||||
className="profile-img"
|
className="profile-img"
|
||||||
id="anime-pic"
|
id="anime-pic"
|
||||||
/>
|
/>
|
||||||
<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="prof-pic"
|
||||||
|
|
|
@ -7,7 +7,7 @@ export default styled.main`
|
||||||
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/pxfuel.jpg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
#prof-pic {
|
#prof-pic {
|
||||||
|
|
|
@ -18,29 +18,17 @@ const LINKS = [
|
||||||
href: "/stats",
|
href: "/stats",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Resume",
|
title: "Experience",
|
||||||
href: "/resume",
|
href: "/exps",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Contact",
|
title: "Contact",
|
||||||
href: "/contact",
|
href: "/contact",
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: "Art/Projects",
|
|
||||||
href: "/projects",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Blog",
|
|
||||||
href: "https://blog.bravo68web.me",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Extras",
|
|
||||||
href: "/extras",
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
function Nav() {
|
function Nav() {
|
||||||
const { loading, status /*, websocket */ } = useLanyard({
|
const { loading, status } = useLanyard({
|
||||||
userId: discord_id,
|
userId: discord_id,
|
||||||
socket: true,
|
socket: true,
|
||||||
});
|
});
|
||||||
|
@ -76,7 +64,7 @@ function Nav() {
|
||||||
|
|
||||||
<div className="links">
|
<div className="links">
|
||||||
{LINKS.map(({ title, href }, index) => (
|
{LINKS.map(({ title, href }, index) => (
|
||||||
<div key={index} className="link">
|
<div key={title} className="link">
|
||||||
<Link href={href}>{title}</Link>
|
<Link href={href}>{title}</Link>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
@ -102,7 +90,7 @@ function Nav() {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{LINKS.map(({ title, href }, index) => (
|
{LINKS.map(({ title, href }, index) => (
|
||||||
<MenuItem key={index} onClick={handleClose}>
|
<MenuItem key={title} onClick={handleClose}>
|
||||||
<Link href={href}>{title}</Link>
|
<Link href={href}>{title}</Link>
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
))}
|
))}
|
||||||
|
|
|
@ -1,12 +1,7 @@
|
||||||
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(0, 0, 0, 0.3);
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
rgba(52, 47, 50, 1) 0%,
|
|
||||||
rgba(96, 97, 103, 1) 60%
|
|
||||||
);
|
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -22,14 +17,14 @@ export default styled.nav`
|
||||||
}
|
}
|
||||||
.links {
|
.links {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
gap: 0.8rem;
|
||||||
.link {
|
.link {
|
||||||
/* padding: 20px; */
|
padding: 5px 10px;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #111111;
|
background-color: rgba(0,0,0, 0.5);
|
||||||
background-color: #6ffc03;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
|
|
|
@ -6,7 +6,7 @@ export const QBStyles = styled.div`
|
||||||
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/pxfuel-5.jpg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
|
|
|
@ -10,19 +10,19 @@ function Resume() {
|
||||||
{
|
{
|
||||||
path: "webviewer/lib",
|
path: "webviewer/lib",
|
||||||
mobileRedirect: true,
|
mobileRedirect: true,
|
||||||
initialDoc:
|
initialDoc: "/resume.pdf",
|
||||||
"/resume.pdf",
|
|
||||||
},
|
},
|
||||||
viewer.current
|
viewer.current
|
||||||
).then((instance) => {
|
)
|
||||||
const { docViewer } = instance;
|
|
||||||
// you can now call WebViewer APIs here...
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
return (
|
return (
|
||||||
<ResumeStyle>
|
<ResumeStyle>
|
||||||
<div className="webviewer" ref={viewer} style={{ height: "100vh" }}></div>
|
<div
|
||||||
|
className="webviewer"
|
||||||
|
ref={viewer}
|
||||||
|
style={{ height: "100vh" }}
|
||||||
|
></div>
|
||||||
</ResumeStyle>
|
</ResumeStyle>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,7 @@ export default styled.div`
|
||||||
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(--color13);
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
/* min-width: 225px; */
|
/* min-width: 225px; */
|
||||||
|
|
|
@ -6,19 +6,23 @@ function GitCommits({ title, image, evt1, evt2, evt3, url }) {
|
||||||
|
|
||||||
[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 =
|
||||||
|
"/images/github_events/github_push_event_logo.png";
|
||||||
evt.commitMsg = evt.payload.commits[0].message;
|
evt.commitMsg = evt.payload.commits[0].message;
|
||||||
} else if (evt?.type === "WatchEvent") {
|
} else if (evt?.type === "WatchEvent") {
|
||||||
evt.entTypeLogo = "/images/github_events/github_watch_event_logo.png";
|
evt.entTypeLogo =
|
||||||
|
"/images/github_events/github_watch_event_logo.png";
|
||||||
} else if (evt?.type === "IssuesEvent") {
|
} else if (evt?.type === "IssuesEvent") {
|
||||||
evt.entTypeLogo = "/images/github_events/github_issues_event_logo.png";
|
evt.entTypeLogo =
|
||||||
|
"/images/github_events/github_issues_event_logo.png";
|
||||||
if (evt?.payload.action === "opened") {
|
if (evt?.payload.action === "opened") {
|
||||||
evt.commitMsg = "Opened " + evt.payload.issue.title;
|
evt.commitMsg = "Opened " + evt.payload.issue.title;
|
||||||
} else if (evt?.payload.action === "closed") {
|
} else if (evt?.payload.action === "closed") {
|
||||||
evt.commitMsg = "Closed " + evt.payload.issue.title;
|
evt.commitMsg = "Closed " + evt.payload.issue.title;
|
||||||
}
|
}
|
||||||
} else if (evt?.type === "DeleteEvent") {
|
} else if (evt?.type === "DeleteEvent") {
|
||||||
evt.entTypeLogo = "/images/github_events/github_delete_event_logo.png";
|
evt.entTypeLogo =
|
||||||
|
"/images/github_events/github_delete_event_logo.png";
|
||||||
evt.commitMsg =
|
evt.commitMsg =
|
||||||
evt.payload.ref_type + " " + evt.payload.ref + " deleted";
|
evt.payload.ref_type + " " + evt.payload.ref + " deleted";
|
||||||
} else if (evt?.type === "IssueCommentEvent") {
|
} else if (evt?.type === "IssueCommentEvent") {
|
||||||
|
@ -26,7 +30,8 @@ function GitCommits({ title, image, evt1, evt2, evt3, url }) {
|
||||||
"/images/github_events/github_issue_comment_event_logo.png";
|
"/images/github_events/github_issue_comment_event_logo.png";
|
||||||
evt.commitMsg = evt.payload.comment.body;
|
evt.commitMsg = evt.payload.comment.body;
|
||||||
} else if (evt?.type === "CreateEvent") {
|
} else if (evt?.type === "CreateEvent") {
|
||||||
evt.entTypeLogo = "/images/github_events/github_create_event_logo.png";
|
evt.entTypeLogo =
|
||||||
|
"/images/github_events/github_create_event_logo.png";
|
||||||
evt.commitMsg = evt.payload.ref_type;
|
evt.commitMsg = evt.payload.ref_type;
|
||||||
} else if (evt?.type === "PullRequestEvent") {
|
} else if (evt?.type === "PullRequestEvent") {
|
||||||
evt.entTypeLogo =
|
evt.entTypeLogo =
|
||||||
|
@ -37,10 +42,11 @@ function GitCommits({ title, image, evt1, evt2, evt3, url }) {
|
||||||
evt.commitMsg = "Closed " + evt.payload.pull_request.title;
|
evt.commitMsg = "Closed " + evt.payload.pull_request.title;
|
||||||
}
|
}
|
||||||
} else if (evt?.type === "ForkEvent") {
|
} else if (evt?.type === "ForkEvent") {
|
||||||
evt.entTypeLogo = "/images/github_events/github_fork_event_logo.png";
|
evt.entTypeLogo =
|
||||||
|
"/images/github_events/github_fork_event_logo.png";
|
||||||
evt.commitMsg = "Forked " + evt.payload.forkee.full_name;
|
evt.commitMsg = "Forked " + evt.payload.forkee.full_name;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SkillCard title={title} image={image} url={url}>
|
<SkillCard title={title} image={image} url={url}>
|
||||||
|
@ -86,4 +92,4 @@ function GitCommits({ title, image, evt1, evt2, evt3, url }) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default GitCommits
|
export default GitCommits;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
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 />
|
||||||
|
|
|
@ -11,7 +11,7 @@ function LastFMCurrentSkillCard({
|
||||||
name,
|
name,
|
||||||
url,
|
url,
|
||||||
}) {
|
}) {
|
||||||
const {status,song} = useLastFM();
|
const { status, song } = useLastFM();
|
||||||
|
|
||||||
if (status !== "playing") {
|
if (status !== "playing") {
|
||||||
return (
|
return (
|
||||||
|
@ -26,7 +26,15 @@ function LastFMCurrentSkillCard({
|
||||||
{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 ? (
|
||||||
|
""
|
||||||
|
) : (
|
||||||
|
<img
|
||||||
|
src={song.art}
|
||||||
|
alt={`${song.artist} - ${song.name}`}
|
||||||
|
className="albumart"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</SkillCard>
|
</SkillCard>
|
||||||
);
|
);
|
||||||
|
|
|
@ -38,7 +38,8 @@ function OsuBestScoresSkillCard({
|
||||||
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">
|
<div className="bestScores__score__info__name__artist">
|
||||||
|
@ -76,7 +77,8 @@ function OsuBestScoresSkillCard({
|
||||||
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">
|
||||||
{bestScore2?.beatmap?.difficulty_rating + " "}
|
{bestScore2?.beatmap?.difficulty_rating +
|
||||||
|
" "}
|
||||||
</div>
|
</div>
|
||||||
/
|
/
|
||||||
<div className="bestScores__score__info__name__artist">
|
<div className="bestScores__score__info__name__artist">
|
||||||
|
@ -114,7 +116,8 @@ function OsuBestScoresSkillCard({
|
||||||
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">
|
||||||
{bestScore3?.beatmap?.difficulty_rating + " "}
|
{bestScore3?.beatmap?.difficulty_rating +
|
||||||
|
" "}
|
||||||
</div>
|
</div>
|
||||||
/
|
/
|
||||||
<div className="bestScores__score__info__name__artist">
|
<div className="bestScores__score__info__name__artist">
|
||||||
|
|
|
@ -19,7 +19,9 @@ function OsuUserSkillCard({
|
||||||
}) {
|
}) {
|
||||||
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">
|
||||||
|
Accuracy :- {Math.floor(accuracy)} %
|
||||||
|
</div>
|
||||||
<div className="description">Level :- {Math.floor(level)}</div>
|
<div className="description">Level :- {Math.floor(level)}</div>
|
||||||
<div className="description">PP :- {Math.floor(pp_raw)}</div>
|
<div className="description">PP :- {Math.floor(pp_raw)}</div>
|
||||||
<div className="description">Country :- {country}</div>
|
<div className="description">Country :- {country}</div>
|
||||||
|
|
|
@ -27,7 +27,9 @@ function SpotifyTopSkillCard({
|
||||||
</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">
|
||||||
|
{topSongs1?.name}
|
||||||
|
</div>
|
||||||
<div className="topSongs__song__info__artist">
|
<div className="topSongs__song__info__artist">
|
||||||
{topSongs1?.artists[0]?.name}
|
{topSongs1?.artists[0]?.name}
|
||||||
</div>
|
</div>
|
||||||
|
@ -44,7 +46,9 @@ function SpotifyTopSkillCard({
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div className="topSongs__song__info">
|
<div className="topSongs__song__info">
|
||||||
<div className="topSongs__song__info__name">{topSongs2?.name}</div>
|
<div className="topSongs__song__info__name">
|
||||||
|
{topSongs2?.name}
|
||||||
|
</div>
|
||||||
<div className="topSongs__song__info__artist">
|
<div className="topSongs__song__info__artist">
|
||||||
{topSongs2?.artists[0]?.name}
|
{topSongs2?.artists[0]?.name}
|
||||||
</div>
|
</div>
|
||||||
|
@ -61,7 +65,9 @@ function SpotifyTopSkillCard({
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div className="topSongs__song__info">
|
<div className="topSongs__song__info">
|
||||||
<div className="topSongs__song__info__name">{topSongs3?.name}</div>
|
<div className="topSongs__song__info__name">
|
||||||
|
{topSongs3?.name}
|
||||||
|
</div>
|
||||||
<div className="topSongs__song__info__artist">
|
<div className="topSongs__song__info__artist">
|
||||||
{topSongs3?.artists[0]?.name}
|
{topSongs3?.artists[0]?.name}
|
||||||
</div>
|
</div>
|
||||||
|
@ -78,7 +84,9 @@ function SpotifyTopSkillCard({
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div className="topSongs__song__info">
|
<div className="topSongs__song__info">
|
||||||
<div className="topSongs__song__info__name">{topSongs4?.name}</div>
|
<div className="topSongs__song__info__name">
|
||||||
|
{topSongs4?.name}
|
||||||
|
</div>
|
||||||
<div className="topSongs__song__info__artist">
|
<div className="topSongs__song__info__artist">
|
||||||
{topSongs4?.artists[0]?.name}
|
{topSongs4?.artists[0]?.name}
|
||||||
</div>
|
</div>
|
||||||
|
@ -95,7 +103,9 @@ function SpotifyTopSkillCard({
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div className="topSongs__song__info">
|
<div className="topSongs__song__info">
|
||||||
<div className="topSongs__song__info__name">{topSongs5?.name}</div>
|
<div className="topSongs__song__info__name">
|
||||||
|
{topSongs5?.name}
|
||||||
|
</div>
|
||||||
<div className="topSongs__song__info__artist">
|
<div className="topSongs__song__info__artist">
|
||||||
{topSongs5?.artists[0]?.name}
|
{topSongs5?.artists[0]?.name}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -15,7 +15,12 @@ function TwitterTweetsSkillCard({
|
||||||
<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
|
||||||
|
href={
|
||||||
|
"https://twitter.com/Bravo68web/status/" +
|
||||||
|
tweets1?.id
|
||||||
|
}
|
||||||
|
>
|
||||||
<div>{tweets1?.text}</div>
|
<div>{tweets1?.text}</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -24,7 +29,12 @@ function TwitterTweetsSkillCard({
|
||||||
<div className="skill-card-content">
|
<div className="skill-card-content">
|
||||||
Previous Tweets
|
Previous Tweets
|
||||||
<div className="skill-card-content-inner">
|
<div className="skill-card-content-inner">
|
||||||
<a href={"https://twitter.com/Bravo68web/status/" + tweets2?.id}>
|
<a
|
||||||
|
href={
|
||||||
|
"https://twitter.com/Bravo68web/status/" +
|
||||||
|
tweets2?.id
|
||||||
|
}
|
||||||
|
>
|
||||||
{tweets2?.text}
|
{tweets2?.text}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -32,7 +42,12 @@ function TwitterTweetsSkillCard({
|
||||||
<br />
|
<br />
|
||||||
<div className="skill-card-content">
|
<div className="skill-card-content">
|
||||||
<div className="skill-card-content-inner">
|
<div className="skill-card-content-inner">
|
||||||
<a href={"https://twitter.com/Bravo68web/status/" + tweets3?.id}>
|
<a
|
||||||
|
href={
|
||||||
|
"https://twitter.com/Bravo68web/status/" +
|
||||||
|
tweets3?.id
|
||||||
|
}
|
||||||
|
>
|
||||||
{tweets3?.text}
|
{tweets3?.text}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -71,40 +71,63 @@ function Skills() {
|
||||||
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={
|
||||||
|
skills?.gh_user?.data?.public_repos
|
||||||
|
}
|
||||||
followers={skills?.gh_user?.data?.followers}
|
followers={skills?.gh_user?.data?.followers}
|
||||||
following={skills?.gh_user?.data?.following}
|
following={skills?.gh_user?.data?.following}
|
||||||
public_gists={skills?.gh_user?.data?.public_gists}
|
public_gists={
|
||||||
|
skills?.gh_user?.data?.public_gists
|
||||||
|
}
|
||||||
created_at={skills?.gh_user?.data?.created_at}
|
created_at={skills?.gh_user?.data?.created_at}
|
||||||
/>
|
/>
|
||||||
<OsuUserSkillCard
|
<OsuUserSkillCard
|
||||||
title={"Osu! Player Stats"}
|
title={"Osu! Player Stats"}
|
||||||
url={"https://osu.ppy.sh/users/bravo68web"}
|
url={"https://osu.ppy.sh/users/bravo68web"}
|
||||||
image={skills?.logo?.osu}
|
image={skills?.logo?.osu}
|
||||||
accuracy={skills?.osu_user?.data?.statistics?.hit_accuracy}
|
accuracy={
|
||||||
level={skills?.osu_user?.data?.statistics?.level?.current}
|
skills?.osu_user?.data?.statistics
|
||||||
|
?.hit_accuracy
|
||||||
|
}
|
||||||
|
level={
|
||||||
|
skills?.osu_user?.data?.statistics?.level
|
||||||
|
?.current
|
||||||
|
}
|
||||||
pp_raw={skills?.osu_user?.data?.statistics?.pp}
|
pp_raw={skills?.osu_user?.data?.statistics?.pp}
|
||||||
country={skills?.osu_user?.data?.country?.code}
|
country={skills?.osu_user?.data?.country?.code}
|
||||||
pp_rank={skills?.osu_user?.data?.statistics?.global_rank}
|
pp_rank={
|
||||||
countryRank={skills?.osu_user?.data?.statistics?.country_rank}
|
skills?.osu_user?.data?.statistics
|
||||||
|
?.global_rank
|
||||||
|
}
|
||||||
|
countryRank={
|
||||||
|
skills?.osu_user?.data?.statistics
|
||||||
|
?.country_rank
|
||||||
|
}
|
||||||
maximum_combo={
|
maximum_combo={
|
||||||
skills?.osu_user?.data?.statistics?.maximum_combo
|
skills?.osu_user?.data?.statistics
|
||||||
|
?.maximum_combo
|
||||||
}
|
}
|
||||||
join_date={"2019-09-21 19:33:44"}
|
join_date={"2019-09-21 19:33:44"}
|
||||||
total_score={skills?.osu_user?.data?.statistics?.total_score}
|
total_score={
|
||||||
|
skills?.osu_user?.data?.statistics
|
||||||
|
?.total_score
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
<TwitterUserSkillCard
|
<TwitterUserSkillCard
|
||||||
title={"Twitter Stats"}
|
title={"Twitter Stats"}
|
||||||
url={"https://twitter.com/Bravo68web"}
|
url={"https://twitter.com/Bravo68web"}
|
||||||
image={skills?.logo?.twitter}
|
image={skills?.logo?.twitter}
|
||||||
followers_count={
|
followers_count={
|
||||||
skills?.twitter_user?.public_metrics?.followers_count
|
skills?.twitter_user?.public_metrics
|
||||||
|
?.followers_count
|
||||||
}
|
}
|
||||||
friends_count={
|
friends_count={
|
||||||
skills?.twitter_user?.public_metrics?.following_count
|
skills?.twitter_user?.public_metrics
|
||||||
|
?.following_count
|
||||||
}
|
}
|
||||||
statuses_count={
|
statuses_count={
|
||||||
skills?.twitter_user?.public_metrics?.tweet_count
|
skills?.twitter_user?.public_metrics
|
||||||
|
?.tweet_count
|
||||||
}
|
}
|
||||||
created_at={skills?.twitter_user?.created_at}
|
created_at={skills?.twitter_user?.created_at}
|
||||||
/>
|
/>
|
||||||
|
@ -114,17 +137,29 @@ function Skills() {
|
||||||
"https://open.spotify.com/user/31huoajpuynl4w4dzbhp4frktqw4?si=48195baf55a54d7d"
|
"https://open.spotify.com/user/31huoajpuynl4w4dzbhp4frktqw4?si=48195baf55a54d7d"
|
||||||
}
|
}
|
||||||
image={skills?.logo?.spotify}
|
image={skills?.logo?.spotify}
|
||||||
topSongs1={skills?.spotify_top_songs?.data?.items[0]}
|
topSongs1={
|
||||||
topSongs2={skills?.spotify_top_songs?.data?.items[1]}
|
skills?.spotify_top_songs?.data?.items[0]
|
||||||
topSongs3={skills?.spotify_top_songs?.data?.items[2]}
|
}
|
||||||
topSongs4={skills?.spotify_top_songs?.data?.items[3]}
|
topSongs2={
|
||||||
topSongs5={skills?.spotify_top_songs?.data?.items[4]}
|
skills?.spotify_top_songs?.data?.items[1]
|
||||||
|
}
|
||||||
|
topSongs3={
|
||||||
|
skills?.spotify_top_songs?.data?.items[2]
|
||||||
|
}
|
||||||
|
topSongs4={
|
||||||
|
skills?.spotify_top_songs?.data?.items[3]
|
||||||
|
}
|
||||||
|
topSongs5={
|
||||||
|
skills?.spotify_top_songs?.data?.items[4]
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
<WakatimeUserSkillCard
|
<WakatimeUserSkillCard
|
||||||
title={"Wakatime Stats"}
|
title={"Wakatime Stats"}
|
||||||
url={"https://wakatime.com/@bravo68web"}
|
url={"https://wakatime.com/@bravo68web"}
|
||||||
image={skills?.logo?.wakatime}
|
image={skills?.logo?.wakatime}
|
||||||
total_time={skills?.wakatime_alltime?.data?.text}
|
total_time={
|
||||||
|
skills?.wakatime_alltime?.data?.text
|
||||||
|
}
|
||||||
average_weekly_time={
|
average_weekly_time={
|
||||||
skills?.wakatime_stats?.data
|
skills?.wakatime_stats?.data
|
||||||
?.human_readable_daily_average_including_other_language
|
?.human_readable_daily_average_including_other_language
|
||||||
|
@ -141,8 +176,12 @@ function Skills() {
|
||||||
image={skills?.logo?.hashnode}
|
image={skills?.logo?.hashnode}
|
||||||
joinOn={"2021-06-18"}
|
joinOn={"2021-06-18"}
|
||||||
numPosts={skills?.hn_user?.data?.numPosts}
|
numPosts={skills?.hn_user?.data?.numPosts}
|
||||||
numFollowers={skills?.hn_user?.data?.numFollowers}
|
numFollowers={
|
||||||
numReactions={skills?.hn_user?.data?.numReactions}
|
skills?.hn_user?.data?.numFollowers
|
||||||
|
}
|
||||||
|
numReactions={
|
||||||
|
skills?.hn_user?.data?.numReactions
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
<OsuBestScoresSkillCard
|
<OsuBestScoresSkillCard
|
||||||
title={"Osu! Best Scores"}
|
title={"Osu! Best Scores"}
|
||||||
|
@ -176,20 +215,20 @@ function Skills() {
|
||||||
image={skills?.logo?.lastfm}
|
image={skills?.logo?.lastfm}
|
||||||
empty={lastFMempty}
|
empty={lastFMempty}
|
||||||
artist={
|
artist={
|
||||||
skills?.lastfm_current?.recenttracks?.track?.[0]?.artist[
|
skills?.lastfm_current?.recenttracks
|
||||||
"#text"
|
?.track?.[0]?.artist["#text"]
|
||||||
]
|
}
|
||||||
|
name={
|
||||||
|
skills?.lastfm_current?.recenttracks
|
||||||
|
?.track?.[0]?.name
|
||||||
}
|
}
|
||||||
name={skills?.lastfm_current?.recenttracks?.track?.[0]?.name}
|
|
||||||
album={
|
album={
|
||||||
skills?.lastfm_current?.recenttracks?.track?.[0]?.album[
|
skills?.lastfm_current?.recenttracks
|
||||||
"#text"
|
?.track?.[0]?.album["#text"]
|
||||||
]
|
|
||||||
}
|
}
|
||||||
albumImg={
|
albumImg={
|
||||||
skills?.lastfm_current?.recenttracks?.track?.[0].image[1][
|
skills?.lastfm_current?.recenttracks
|
||||||
"#text"
|
?.track?.[0].image[1]["#text"]
|
||||||
]
|
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<GitHubUserEvtSkillCard
|
<GitHubUserEvtSkillCard
|
||||||
|
|
|
@ -5,11 +5,10 @@ export default styled.div`
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
padding: 100px 20px;
|
padding: 100px 20px;
|
||||||
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/pxfuel-2.jpg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
|
@ -26,10 +26,6 @@ export default function Status() {
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return (
|
return <div>{status.status}</div>;
|
||||||
<div>
|
|
||||||
{(status.status)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -29,7 +29,9 @@ function SkillCard({ content, created_at, url, image }) {
|
||||||
<img src={image} height="30" />
|
<img src={image} height="30" />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="content">"{texts.join("\n")}"</div>
|
<div className="content">
|
||||||
|
"{texts.join("\n")}"
|
||||||
|
</div>
|
||||||
<div className="type">
|
<div className="type">
|
||||||
# {format(created_at, "DD MMM YYYY")}
|
# {format(created_at, "DD MMM YYYY")}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,7 +5,7 @@ export default styled.div`
|
||||||
width: 230px;
|
width: 230px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: #aa78f6;
|
background-color: #aa78f6ac;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
box-shadow: 10px 9px 0px -3px #7b3ea7;
|
box-shadow: 10px 9px 0px -3px #7b3ea7;
|
||||||
margin: 8px;
|
margin: 8px;
|
||||||
|
|
|
@ -6,7 +6,7 @@ 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);
|
||||||
|
|
||||||
|
@ -37,9 +37,7 @@ function Toots () {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ArtTitleStyle>
|
<ArtTitleStyle>
|
||||||
<div className="title-bar">
|
<div className="title-bar">Fosstodon Status</div>
|
||||||
Fosstodon Status
|
|
||||||
</div>
|
|
||||||
</ArtTitleStyle>
|
</ArtTitleStyle>
|
||||||
<div className="mainboard__container">
|
<div className="mainboard__container">
|
||||||
{skills && (
|
{skills && (
|
||||||
|
|
|
@ -8,7 +8,7 @@ export const ArtStyle = styled.div`
|
||||||
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/pxfuel-2.jpg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -22,4 +22,4 @@ export const ArtTitleStyle = styled.div`
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
padding-top: 90px;
|
padding-top: 90px;
|
||||||
`
|
`;
|
||||||
|
|
|
@ -9,7 +9,7 @@ function vsExtsShow() {
|
||||||
<div className="default">
|
<div className="default">
|
||||||
{vsExts.map((content, index) => {
|
{vsExts.map((content, index) => {
|
||||||
return (
|
return (
|
||||||
<div key={index}>
|
<div key={content.name}>
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<div className="content-description">
|
<div className="content-description">
|
||||||
<a
|
<a
|
||||||
|
@ -30,7 +30,9 @@ function vsExtsShow() {
|
||||||
{content.name}
|
{content.name}
|
||||||
</a>
|
</a>
|
||||||
</h1>
|
</h1>
|
||||||
<h2 className="tags">#{content.type}</h2>
|
<h2 className="tags">
|
||||||
|
#{content.type}
|
||||||
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,13 +6,14 @@ export const ExtraStyles = styled.div`
|
||||||
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/pxfuel-4.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;
|
||||||
|
gap: 1rem;
|
||||||
.title {
|
.title {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
|
@ -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,
|
|
||||||
imageSize,
|
|
||||||
) => {
|
|
||||||
if (!body) {
|
if (!body) {
|
||||||
return {
|
return {
|
||||||
status: 'connecting',
|
status: "connecting",
|
||||||
song: null,
|
song: null,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const lastSong = body.recenttracks.track?.[0];
|
const lastSong = body.recenttracks.track?.[0];
|
||||||
|
|
||||||
if (!lastSong || !lastSong['@attr']?.nowplaying) {
|
if (!lastSong || !lastSong["@attr"]?.nowplaying) {
|
||||||
return {
|
return {
|
||||||
status: 'idle',
|
status: "idle",
|
||||||
song: null,
|
song: null,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const image = lastSong.image.find(i => {
|
const image = lastSong.image.find((i) => {
|
||||||
return i.size === imageSize;
|
return i.size === imageSize;
|
||||||
});
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
status: 'playing',
|
status: "playing",
|
||||||
song: {
|
song: {
|
||||||
name: lastSong.name,
|
name: lastSong.name,
|
||||||
artist: lastSong.artist['#text'],
|
artist: lastSong.artist["#text"],
|
||||||
art: image?.['#text'] ?? lastSong.image[0]['#text'],
|
art: image?.["#text"] ?? lastSong.image[0]["#text"],
|
||||||
url: lastSong.url,
|
url: lastSong.url,
|
||||||
album: lastSong.album['#text'],
|
album: lastSong.album["#text"],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
};
|
||||||
|
|
||||||
|
const useLastFM = () => {
|
||||||
|
const [status, setStatus] = useState("idle");
|
||||||
|
const [song, setSong] = useState();
|
||||||
|
|
||||||
const useLastFM = () =>{
|
const getStatus = async () => {
|
||||||
const [status,setStatus] = useState("idle")
|
axios.get("/me/lastfm/current").then((res) => {
|
||||||
const [song,setSong] = useState();
|
const { status, song } = parseSong(res.data, "extralarge");
|
||||||
|
setSong(song);
|
||||||
|
setStatus(status);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const getStatus = async () =>{
|
useEffect(() => {
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
getStatus();
|
||||||
|
}, 3000);
|
||||||
|
|
||||||
axios.get("/me/lastfm/current").then((res)=>{
|
return () => clearInterval(interval);
|
||||||
const {status, song}=
|
}, []);
|
||||||
parseSong(res.data, "extralarge")
|
|
||||||
setSong(song)
|
|
||||||
setStatus(status)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(()=>{
|
return { status, song };
|
||||||
|
};
|
||||||
|
|
||||||
const interval = setInterval(()=>{
|
export default useLastFM;
|
||||||
getStatus()
|
|
||||||
}, 3000)
|
|
||||||
|
|
||||||
return () => clearInterval(interval)
|
|
||||||
|
|
||||||
},[])
|
|
||||||
|
|
||||||
return {status,song}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default useLastFM
|
|
||||||
|
|
|
@ -2,22 +2,39 @@ 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'];
|
const PrirorityActivityType = [
|
||||||
|
"Coding",
|
||||||
|
"Listening to Spotify",
|
||||||
|
"Playing",
|
||||||
|
"Custom Status",
|
||||||
|
"Streaming",
|
||||||
|
"Watching",
|
||||||
|
"Competing",
|
||||||
|
"Unknown",
|
||||||
|
];
|
||||||
|
|
||||||
output.discord = {
|
output.discord = {
|
||||||
id: data.discord_user.id,
|
id: data.discord_user.id,
|
||||||
username: data.discord_user.username,
|
username: data.discord_user.username,
|
||||||
discriminator: data.discord_user.discriminator,
|
discriminator: data.discord_user.discriminator,
|
||||||
avatar_url: "https://cdn.discordapp.com/avatars/" + data.discord_user.id + "/" + data.discord_user.avatar + ".png",
|
avatar_url:
|
||||||
avatar_decoration_url: "https://cdn.discordapp.com/avatar-decoration-presets/" + data.discord_user.avatar_decoration + ".png"
|
"https://cdn.discordapp.com/avatars/" +
|
||||||
}
|
data.discord_user.id +
|
||||||
|
"/" +
|
||||||
|
data.discord_user.avatar +
|
||||||
|
".png",
|
||||||
|
avatar_decoration_url:
|
||||||
|
"https://cdn.discordapp.com/avatar-decoration-presets/" +
|
||||||
|
data.discord_user.avatar_decoration +
|
||||||
|
".png",
|
||||||
|
};
|
||||||
|
|
||||||
output.kv = data.kv;
|
output.kv = data.kv;
|
||||||
|
|
||||||
if(data.discord_status == "offline"){
|
if (data.discord_status == "offline") {
|
||||||
return {
|
return {
|
||||||
discord_status: "offline",
|
discord_status: "offline",
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data.listening_to_spotify) {
|
if (data.listening_to_spotify) {
|
||||||
|
@ -27,33 +44,31 @@ export default function parse(data) {
|
||||||
song: data.spotify.song,
|
song: data.spotify.song,
|
||||||
album_art_url: data.spotify.album_art_url,
|
album_art_url: data.spotify.album_art_url,
|
||||||
timestamps: data.spotify.timestamps,
|
timestamps: data.spotify.timestamps,
|
||||||
track_id: data.spotify.track_id
|
track_id: data.spotify.track_id,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
for (const activity of data.activities) {
|
||||||
for(const activity of data.activities) {
|
if (activity.name.includes("Visual Studio Code")) {
|
||||||
if(activity.name.includes("Visual Studio Code")){
|
|
||||||
act.push({
|
act.push({
|
||||||
prirority_id: PrirorityActivityType.indexOf('Coding'),
|
prirority_id: PrirorityActivityType.indexOf("Coding"),
|
||||||
...activity
|
...activity,
|
||||||
});
|
});
|
||||||
}
|
} else if (activity.name.includes("Spotify")) {
|
||||||
else if(activity.name.includes("Spotify")){
|
|
||||||
act.push({
|
act.push({
|
||||||
prirority_id: PrirorityActivityType.indexOf('Listening to Spotify'),
|
prirority_id: PrirorityActivityType.indexOf(
|
||||||
...activity
|
"Listening to Spotify"
|
||||||
|
),
|
||||||
|
...activity,
|
||||||
});
|
});
|
||||||
}
|
} else if (activity.type === 0) {
|
||||||
else if(activity.type === 0){
|
|
||||||
act.push({
|
act.push({
|
||||||
prirority_id: PrirorityActivityType.indexOf('Playing'),
|
prirority_id: PrirorityActivityType.indexOf("Playing"),
|
||||||
...activity
|
...activity,
|
||||||
});
|
});
|
||||||
}
|
} else if (activity.name.includes("Custom Status")) {
|
||||||
|
|
||||||
else if(activity.name.includes("Custom Status")){
|
|
||||||
act.push({
|
act.push({
|
||||||
prirority_id: PrirorityActivityType.indexOf('Custom Status'),
|
prirority_id: PrirorityActivityType.indexOf("Custom Status"),
|
||||||
...activity
|
...activity,
|
||||||
});
|
});
|
||||||
output.custom_status = {
|
output.custom_status = {
|
||||||
state: activity.state,
|
state: activity.state,
|
||||||
|
@ -61,14 +76,16 @@ export default function parse(data) {
|
||||||
name: activity.emoji?.name,
|
name: activity.emoji?.name,
|
||||||
id: activity.emoji?.id,
|
id: activity.emoji?.id,
|
||||||
animated: activity.emoji?.animated,
|
animated: activity.emoji?.animated,
|
||||||
emoji_url: "https://cdn.discordapp.com/emojis/" + activity.emoji?.id + ".webp?size=44&quality=lossless"
|
emoji_url:
|
||||||
}
|
"https://cdn.discordapp.com/emojis/" +
|
||||||
|
activity.emoji?.id +
|
||||||
|
".webp?size=44&quality=lossless",
|
||||||
|
},
|
||||||
};
|
};
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
act.push({
|
act.push({
|
||||||
prirority_id: PrirorityActivityType.indexOf('Unknown'),
|
prirority_id: PrirorityActivityType.indexOf("Unknown"),
|
||||||
...activity
|
...activity,
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
@ -78,25 +95,31 @@ export default function parse(data) {
|
||||||
|
|
||||||
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) {
|
||||||
|
|
||||||
else if(output.activity?.prirority_id == 3){
|
|
||||||
output.activity.assets = {
|
output.activity.assets = {
|
||||||
large_image : "/images/anime-profile-pic.png",
|
large_image: "/images/anime-profile-pic.png",
|
||||||
small_image : output.custom_status.emoji.emoji_url,
|
small_image: output.custom_status.emoji.emoji_url,
|
||||||
}
|
};
|
||||||
}
|
} else {
|
||||||
|
|
||||||
else {
|
|
||||||
output.activity.assets = {
|
output.activity.assets = {
|
||||||
large_image : "https://cdn.discordapp.com/app-assets/"+output.activity.application_id+"/"+output.activity.assets.large_image+".png",
|
large_image:
|
||||||
small_image : "https://cdn.discordapp.com/app-assets/"+output.activity.application_id+"/"+output.activity.assets.small_image+".png",
|
"https://cdn.discordapp.com/app-assets/" +
|
||||||
}
|
output.activity.application_id +
|
||||||
|
"/" +
|
||||||
|
output.activity.assets.large_image +
|
||||||
|
".png",
|
||||||
|
small_image:
|
||||||
|
"https://cdn.discordapp.com/app-assets/" +
|
||||||
|
output.activity.application_id +
|
||||||
|
"/" +
|
||||||
|
output.activity.assets.small_image +
|
||||||
|
".png",
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
return output;
|
return output;
|
||||||
|
|
|
@ -3,5 +3,15 @@ const moduleExports = {
|
||||||
compiler: {
|
compiler: {
|
||||||
styledComponents: true,
|
styledComponents: true,
|
||||||
},
|
},
|
||||||
|
images: {
|
||||||
|
remotePatterns: [
|
||||||
|
{
|
||||||
|
protocol: 'https',
|
||||||
|
hostname: 'bravo68web.me',
|
||||||
|
port: '',
|
||||||
|
pathname: '/images/**/*.{jpg,jpeg,png,svg,gif,webp}',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
};
|
};
|
||||||
module.exports = moduleExports;
|
module.exports = moduleExports;
|
||||||
|
|
|
@ -1,8 +1,6 @@
|
||||||
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 (
|
||||||
|
|
|
@ -46,7 +46,10 @@ export default class MyDocument extends Document {
|
||||||
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
|
||||||
|
rel="preconnect"
|
||||||
|
href="https://fonts.googleapis.com"
|
||||||
|
/>
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||||
<link
|
<link
|
||||||
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
|
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"
|
||||||
|
|
|
@ -8,8 +8,8 @@ export default function Home() {
|
||||||
<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 />
|
||||||
|
|
|
@ -8,8 +8,8 @@ export default function Home() {
|
||||||
<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 />
|
||||||
|
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -8,8 +8,8 @@ export default function Home() {
|
||||||
<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 />
|
||||||
|
|
|
@ -1,21 +1,25 @@
|
||||||
import Head from "next/head";
|
import Head from "next/head";
|
||||||
import Nav from "components/nav";
|
import Nav from "components/nav";
|
||||||
import Main from "components/main";
|
// import Main from "components/main";
|
||||||
import BMC from "components/buymeacoffee";
|
import BMC from "components/buymeacoffee";
|
||||||
|
import dynamic from 'next/dynamic';
|
||||||
|
|
||||||
|
const Main = dynamic(() => import('components/main'), {
|
||||||
|
ssr: false, // Disable server-side rendering
|
||||||
|
});
|
||||||
|
|
||||||
export default function Home() {
|
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 /> */}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,8 +7,8 @@ export default function Home() {
|
||||||
<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 />
|
||||||
|
|
|
@ -7,8 +7,8 @@ export default function Home() {
|
||||||
<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 />
|
||||||
|
|
|
@ -9,8 +9,8 @@ export default function Home() {
|
||||||
<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 />
|
||||||
|
|
|
@ -8,8 +8,8 @@ export default function Home() {
|
||||||
<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 />
|
||||||
|
@ -27,4 +27,3 @@ export default function Home() {
|
||||||
// props:[]
|
// props:[]
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
|
@ -8,8 +8,8 @@ export default function Home() {
|
||||||
<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 />
|
||||||
|
|
|
@ -8,8 +8,8 @@ export default function Home() {
|
||||||
<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 />
|
||||||
|
|
Before Width: | Height: | Size: 78 KiB |
Before Width: | Height: | Size: 283 KiB |
Before Width: | Height: | Size: 302 KiB |
Before Width: | Height: | Size: 450 KiB |
Before Width: | Height: | Size: 537 KiB |
Before Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 207 KiB |
After Width: | Height: | Size: 4.2 MiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 249 KiB |
After Width: | Height: | Size: 733 KiB |
After Width: | Height: | Size: 459 KiB |
After Width: | Height: | Size: 380 KiB |
After Width: | Height: | Size: 500 KiB |
After Width: | Height: | Size: 641 KiB |
After Width: | Height: | Size: 297 KiB |
|
@ -12,6 +12,11 @@
|
||||||
--color8: #f58a0f;
|
--color8: #f58a0f;
|
||||||
--color9: #f5a80f;
|
--color9: #f5a80f;
|
||||||
--color10: #0ffaac;
|
--color10: #0ffaac;
|
||||||
|
--color11: rgba(255, 255, 255, 0.1);
|
||||||
|
--color12: rgba(67, 7, 55, 0.484);
|
||||||
|
--color13: rgba(53, 3, 9, 0.8);
|
||||||
|
--color14: rgb(255, 255, 255);
|
||||||
|
--color15: rgba(5, 59, 61, 0.333);
|
||||||
--font: "Source Code Pro", monospace;
|
--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;
|
||||||
|
@ -28,8 +33,9 @@ body {
|
||||||
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,
|
||||||
|
sans-serif;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
/* color:var(--color3) */
|
/* color:var(--color3) */
|
||||||
|
|