Background image changes
|
@ -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 (
|
||||||
|
@ -23,9 +24,11 @@ function about() {
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="content">
|
||||||
|
<p>{description2}</p>
|
||||||
|
</div>
|
||||||
<div className="content-2">
|
<div className="content-2">
|
||||||
<p>{description2}</p>
|
<Image src="/images/header-banner.png" alt="cool lang and framework banner" width="1200" height="270" quality="100" className="banner-image-img"/>
|
||||||
<img src="https://bravo68web.me/images/header_.png" />
|
|
||||||
</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 {
|
}
|
||||||
width: 90%;
|
.banner-image {
|
||||||
padding: 1em;
|
width: 90%;
|
||||||
|
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} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
|
@ -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/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;
|
||||||
|
|
|
@ -5,7 +5,7 @@ export default styled.div`
|
||||||
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: 5px;
|
||||||
box-shadow: 10px 9px 0px -3px #fffefe;
|
box-shadow: 10px 9px 0px -3px #fffefe;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
|
|
|
@ -6,7 +6,7 @@ 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;
|
||||||
|
@ -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;
|
||||||
|
|
|
@ -4,8 +4,6 @@ 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",
|
||||||
"Watching Anime",
|
"Watching Anime",
|
||||||
|
@ -21,26 +19,8 @@ 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(() => {
|
||||||
|
@ -49,33 +29,18 @@ export default function DiscordActivity() {
|
||||||
}
|
}
|
||||||
}, [status, loading]);
|
}, [status, loading]);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let interval = setInterval(() => {
|
|
||||||
if (!loading) {
|
|
||||||
setCurrentTs(Date.now());
|
|
||||||
let timeElapsed = convertMsToHM(
|
|
||||||
currentTs -
|
|
||||||
new Date(parsedStatus?.activity?.timestamps.start)
|
|
||||||
);
|
|
||||||
setTime(timeElapsed);
|
|
||||||
}
|
|
||||||
}, 1000);
|
|
||||||
return () => {
|
|
||||||
clearInterval(interval);
|
|
||||||
};
|
|
||||||
}, [currentTs, loading, convertMsToHM, parsedStatus]);
|
|
||||||
|
|
||||||
if (!loading && parsedStatus && status.discord_status !== "offline") {
|
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
|
<img
|
||||||
src={parsedStatus.activity.assets.small_image}
|
src={parsedStatus.activity.assets.small_image} alt="discord small image"
|
||||||
alt=""
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -94,7 +59,6 @@ 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>
|
||||||
);
|
);
|
||||||
|
@ -130,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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -5,161 +5,137 @@ function experinces() {
|
||||||
return (
|
return (
|
||||||
<ExpStyle>
|
<ExpStyle>
|
||||||
<div className="all">
|
<div className="all">
|
||||||
<div className="company">
|
<div className="company">
|
||||||
<div className="company-left">
|
<div className="company-left">
|
||||||
<div className="company-img">
|
<div className="company-img">
|
||||||
<img src={job_exp_1.logo} alt="company logo" />
|
<img src={job_exp_1.logo} alt="company logo" />
|
||||||
</div>
|
</div>
|
||||||
<div className="company-info">
|
<div className="company-info">
|
||||||
<div className="company-name">
|
<div className="company-name">{job_exp_1.name}</div>
|
||||||
{job_exp_1.name}
|
<div className="company-desp">{job_exp_1.info}</div>
|
||||||
</div>
|
|
||||||
<div className="company-desp">
|
|
||||||
{job_exp_1.info}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="company-right">
|
<div className="company-right">
|
||||||
<div className="company-exp-short">
|
<div className="company-exp-short">
|
||||||
<div className="company-role-name">
|
<div className="company-role-name">
|
||||||
{job_exp_1.role}
|
{job_exp_1.role}
|
||||||
</div>
|
</div>
|
||||||
<div className="company-role-dur">
|
<div className="company-role-dur">
|
||||||
{job_exp_1.start_date} - {job_exp_1.end_date}
|
{job_exp_1.start_date} - {job_exp_1.end_date}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="company-role-desp">
|
<div className="company-role-desp">
|
||||||
<p className="company-role-desp-para">
|
<p className="company-role-desp-para">
|
||||||
{job_exp_1.description}
|
{job_exp_1.description}
|
||||||
</p>
|
</p>
|
||||||
<div className="tech-list">
|
<div className="tech-list">
|
||||||
{job_exp_1.techstack.map((tech) => (
|
{job_exp_1.techstack.map((tech) => (
|
||||||
<div key={tech} className="tech-name">
|
<div key={tech} className="tech-name">
|
||||||
#{tech}
|
#{tech}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className="company">
|
<div className="company">
|
||||||
<div className="company-left">
|
<div className="company-left">
|
||||||
<div className="company-img">
|
<div className="company-img">
|
||||||
<img src={job_exp_2.logo} alt="company logo" />
|
<img src={job_exp_2.logo} alt="company logo" />
|
||||||
</div>
|
</div>
|
||||||
<div className="company-info">
|
<div className="company-info">
|
||||||
<div className="company-name">
|
<div className="company-name">{job_exp_2.name}</div>
|
||||||
{job_exp_2.name}
|
<div className="company-desp">{job_exp_2.info}</div>
|
||||||
</div>
|
|
||||||
<div className="company-desp">
|
|
||||||
{job_exp_2.info}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="company-right">
|
<div className="company-right">
|
||||||
<div className="company-exp-short">
|
<div className="company-exp-short">
|
||||||
<div className="company-role-name">
|
<div className="company-role-name">
|
||||||
{job_exp_2.role}
|
{job_exp_2.role}
|
||||||
</div>
|
</div>
|
||||||
<div className="company-role-dur">
|
<div className="company-role-dur">
|
||||||
{job_exp_2.start_date} - {job_exp_2.end_date}
|
{job_exp_2.start_date} - {job_exp_2.end_date}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="company-role-desp">
|
<div className="company-role-desp">
|
||||||
<p className="company-role-desp-para">
|
<p className="company-role-desp-para">
|
||||||
{job_exp_2.description}
|
{job_exp_2.description}
|
||||||
</p>
|
</p>
|
||||||
<div className="tech-list">
|
<div className="tech-list">
|
||||||
{job_exp_2.techstack.map((tech) => (
|
{job_exp_2.techstack.map((tech) => (
|
||||||
<div key={tech} className="tech-name">
|
<div key={tech} className="tech-name">
|
||||||
#{tech}
|
#{tech}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className="company">
|
<div className="company">
|
||||||
<div className="company-left">
|
<div className="company-left">
|
||||||
<div className="company-img">
|
<div className="company-img">
|
||||||
<img src={job_exp_3.logo} alt="company logo" />
|
<img src={job_exp_3.logo} alt="company logo" />
|
||||||
</div>
|
</div>
|
||||||
<div className="company-info">
|
<div className="company-info">
|
||||||
<div className="company-name">
|
<div className="company-name">{job_exp_3.name}</div>
|
||||||
{job_exp_3.name}
|
<div className="company-desp">{job_exp_3.info}</div>
|
||||||
</div>
|
|
||||||
<div className="company-desp">
|
|
||||||
{job_exp_3.info}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="company-right">
|
<div className="company-right">
|
||||||
<div className="company-exp-short">
|
<div className="company-exp-short">
|
||||||
<div className="company-role-name">
|
<div className="company-role-name">
|
||||||
{job_exp_3.role}
|
{job_exp_3.role}
|
||||||
</div>
|
</div>
|
||||||
<div className="company-role-dur">
|
<div className="company-role-dur">
|
||||||
{job_exp_3.start_date} - {job_exp_3.end_date}
|
{job_exp_3.start_date} - {job_exp_3.end_date}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="company-role-desp">
|
<div className="company-role-desp">
|
||||||
<p className="company-role-desp-para">
|
<p className="company-role-desp-para">
|
||||||
{job_exp_3.description}
|
{job_exp_3.description}
|
||||||
</p>
|
</p>
|
||||||
<div className="tech-list">
|
<div className="tech-list">
|
||||||
{job_exp_3.techstack.map((tech) => (
|
{job_exp_3.techstack.map((tech) => (
|
||||||
<div key={tech} className="tech-name">
|
<div key={tech} className="tech-name">
|
||||||
#{tech}
|
#{tech}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className="company">
|
<div className="company">
|
||||||
<div className="company-left">
|
<div className="company-left">
|
||||||
<div className="company-img">
|
<div className="company-img">
|
||||||
<img src={job_exp_4.logo} alt="company logo" />
|
<img src={job_exp_4.logo} alt="company logo" />
|
||||||
</div>
|
</div>
|
||||||
<div className="company-info">
|
<div className="company-info">
|
||||||
<div className="company-name">
|
<div className="company-name">{job_exp_4.name}</div>
|
||||||
{job_exp_4.name}
|
<div className="company-desp">{job_exp_4.info}</div>
|
||||||
</div>
|
|
||||||
<div className="company-desp">
|
|
||||||
{job_exp_4.info}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="company-right">
|
<div className="company-right">
|
||||||
<div className="company-exp-short">
|
<div className="company-exp-short">
|
||||||
<div className="company-role-name">
|
<div className="company-role-name">
|
||||||
{job_exp_4.role}
|
{job_exp_4.role}
|
||||||
</div>
|
</div>
|
||||||
<div className="company-role-dur">
|
<div className="company-role-dur">
|
||||||
{job_exp_4.start_date} - {job_exp_4.end_date}
|
{job_exp_4.start_date} - {job_exp_4.end_date}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="company-role-desp">
|
<div className="company-role-desp">
|
||||||
<p className="company-role-desp-para">
|
<p className="company-role-desp-para">
|
||||||
{job_exp_4.description}
|
{job_exp_4.description}
|
||||||
</p>
|
</p>
|
||||||
<div className="tech-list">
|
<div className="tech-list">
|
||||||
{job_exp_4.techstack.map((tech) => (
|
{job_exp_4.techstack.map((tech) => (
|
||||||
<div key={tech} className="tech-name">
|
<div key={tech} className="tech-name">
|
||||||
#{tech}
|
#{tech}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ExpStyle>
|
</ExpStyle>
|
||||||
|
|
|
@ -35,11 +35,11 @@ export const ExpStyle = styled.div`
|
||||||
gap: 0.2px;
|
gap: 0.2px;
|
||||||
.company-img {
|
.company-img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
max-height: 12rem;
|
max-height: 12rem;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
|
@ -47,7 +47,7 @@ export const ExpStyle = styled.div`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.company-right {
|
.company-right {
|
||||||
width: 75%;
|
width: 75%;
|
||||||
.company-exp-short {
|
.company-exp-short {
|
||||||
|
@ -71,8 +71,8 @@ export const ExpStyle = styled.div`
|
||||||
.company-role-desp {
|
.company-role-desp {
|
||||||
.company-role-desp-para {
|
.company-role-desp-para {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
margin-bottom: 0.8rem;
|
margin-bottom: 0.8rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -80,7 +80,7 @@ export const ExpStyle = styled.div`
|
||||||
.company-info {
|
.company-info {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
.company-name {
|
.company-name {
|
||||||
color: var(--color3);
|
color: var(--color3);
|
||||||
font-size: 1.7rem;
|
font-size: 1.7rem;
|
||||||
|
|
|
@ -6,7 +6,7 @@ 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/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;
|
||||||
|
@ -27,6 +27,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 +36,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);
|
||||||
|
|
|
@ -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,
|
||||||
|
@ -44,13 +43,13 @@ function Main() {
|
||||||
<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 {
|
||||||
|
|
|
@ -40,7 +40,7 @@ const LINKS = [
|
||||||
];
|
];
|
||||||
|
|
||||||
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 +76,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>
|
||||||
))}
|
))}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -13,10 +13,7 @@ function Resume() {
|
||||||
initialDoc: "/resume.pdf",
|
initialDoc: "/resume.pdf",
|
||||||
},
|
},
|
||||||
viewer.current
|
viewer.current
|
||||||
).then((instance) => {
|
)
|
||||||
const { docViewer } = instance;
|
|
||||||
// you can now call WebViewer APIs here...
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -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; */
|
||||||
|
|
|
@ -9,7 +9,7 @@ export default styled.div`
|
||||||
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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
63
config.js
|
@ -213,6 +213,69 @@ export const extra = [
|
||||||
];
|
];
|
||||||
|
|
||||||
export const projects = [
|
export const projects = [
|
||||||
|
{
|
||||||
|
name: "vs-presence-server",
|
||||||
|
type: "project",
|
||||||
|
description: "This is a server that allows you to project your vscode presence to a custom rich presence server.",
|
||||||
|
image: "/images/GitHub-Logo.png",
|
||||||
|
url: "https://github.com/BRAVO68WEB/vsc-presence-server",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Stockpile",
|
||||||
|
type: "project",
|
||||||
|
description: "Redis from Scratch using Nodejs [No External Dependencies] ",
|
||||||
|
image: "/images/GitHub-Logo.png",
|
||||||
|
url: "https://github.com/BRAVO68WEB/stockpile",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "api-v1",
|
||||||
|
type: "project",
|
||||||
|
description: "My Old API",
|
||||||
|
image: "/images/GitHub-Logo.png",
|
||||||
|
url: "https://github.com/BRAVO68WEB/api-v1",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "webrtc-call-app",
|
||||||
|
type: "project",
|
||||||
|
description: "WebRTC Video Call Application",
|
||||||
|
image: "/images/GitHub-Logo.png",
|
||||||
|
url: "https://github.com/BRAVO68WEB/webrtc-call-app",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "stockpile-node-sdk",
|
||||||
|
type: "project",
|
||||||
|
description: "NodeJS SDK for Stockpile",
|
||||||
|
image: "/images/GitHub-Logo.png",
|
||||||
|
url: "https://github.com/BRAVO68WEB/stockpile-node-sdk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "emailengine-foss",
|
||||||
|
type: "project",
|
||||||
|
description: "FOSS Fork for EmailEmgine",
|
||||||
|
image: "/images/GitHub-Logo.png",
|
||||||
|
url: "https://github.com/BRAVO68WEB/emailengine-foss",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "typescript-express-hasura-pgsql-template",
|
||||||
|
type: "project",
|
||||||
|
description: "A Template for a Typescript Express Server with Hasura and Postgres",
|
||||||
|
image: "/images/GitHub-Logo.png",
|
||||||
|
url: "https://github.com/BRAVO68WEB/typescript-express-hasura-pgsql-template"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "cat-as-a-service",
|
||||||
|
type: "project",
|
||||||
|
description: "Cat as a Service API",
|
||||||
|
image: "/images/GitHub-Logo.png",
|
||||||
|
url: "https://github.com/gdsclpu/cat-as-a-service"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "SHX",
|
||||||
|
type: "project",
|
||||||
|
description: "Shx is a platform ment to store and share files, images, text and URLs with ease.",
|
||||||
|
image: "/images/GitHub-Logo.png",
|
||||||
|
url: "https://github.com/BRAVO68WEB/shx"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "Enterprise Workspace Images [arm64]",
|
name: "Enterprise Workspace Images [arm64]",
|
||||||
type: "project",
|
type: "project",
|
||||||
|
|
|
@ -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,7 +1,12 @@
|
||||||
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 (
|
||||||
|
@ -15,7 +20,6 @@ export default function Home() {
|
||||||
<Nav />
|
<Nav />
|
||||||
<Main />
|
<Main />
|
||||||
<BMC />
|
<BMC />
|
||||||
{/* <Footer /> */}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
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: 345 KiB |
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 |
|
@ -13,6 +13,10 @@
|
||||||
--color9: #f5a80f;
|
--color9: #f5a80f;
|
||||||
--color10: #0ffaac;
|
--color10: #0ffaac;
|
||||||
--color11: rgba(255, 255, 255, 0.1);
|
--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;
|
||||||
|
|