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

Background image changes

This commit is contained in:
Jyotirmoy Bandyopadhayaya 2023-06-13 10:37:09 +05:30
parent de105ff2e1
commit 43598b7533
Signed by: bravo68web
GPG Key ID: F5671FD7BCB9917A
39 changed files with 177 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/about.jsx
View File

@ -1,5 +1,6 @@
import { LanguagesKnownCategory, description1, description2 } from "config";
import { AboutStyle } from "./about.style";
import Image from "next/image";
function about() {
return (
@ -23,9 +24,11 @@ function about() {
);
})}
</div>
<div className="content">
<p>{description2}</p>
</div>
<div className="content-2">
<p>{description2}</p>
<img src="https://bravo68web.me/images/header_.png" />
<Image src="/images/header-banner.png" alt="cool lang and framework banner" width="1200" height="270" quality="100" className="banner-image-img"/>
</div>
</div>
</AboutStyle>

55
components/about.style.jsx
View File

@ -3,18 +3,14 @@ import styled from "styled-components";
export const AboutStyle = styled.div`
background-color: var(--color1);
overflow-y: scroll !important;
margin: 0;
top: 50%;
left: 50%;
overflow-x: hidden !important;
padding: 2rem;
height: 100vh;
padding-top: 12em;
/* padding-bottom: 8em; */
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
/* position: relative; */
background-image: url("/images/pxfuel-6.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-blend-mode: difference;
.default {
align-items: center;
display: flex;
@ -23,32 +19,31 @@ export const AboutStyle = styled.div`
text-align: center;
padding-top: 8em;
padding-bottom: 8em;
/* position: absolute; */
/* top: 0; */
/* overflow-y: auto; */
}
.content {
margin-top: 1em;
margin-bottom: 1em;
margin-left: 1.3em;
margin-right: 1.3em;
font-weight: bold;
font-size: 1.3em;
color: var(--color3);
color: var(--color14);
padding-bottom: 2rem;
background-color: var(--color15);
}
.content-2 {
margin-top: 1em;
margin-bottom: 1em;
margin-left: 1.3em;
margin-right: 1.3em;
padding-top: 2rem;
font-weight: bold;
font-size: 1.3em;
color: var(--color4);
img {
width: 90%;
padding: 1em;
}
.banner-image {
width: 90%;
padding: 1em;
.banner-image-img {
align-items: center;
object-fit: contain;
object-position: center;
width: auto;
height: auto;
}
}
.lang-map {
@ -58,18 +53,12 @@ export const AboutStyle = styled.div`
margin-left: 1.7em;
margin-right: 1.7em;
align-items: center;
padding-bottom: 2rem;
}
.lang-map-element {
padding: 5px;
border-radius: 20px;
margin: 2px;
/* background-color: #${Math.random().toString(16).substring(2, 6)}; */
/* background: rgb(34, 193, 195);
background: linear-gradient(
0deg,
rgba(34, 193, 195, 1) 0%,
rgba(253, 187, 45, 1) 100%
); */
font-weight: bold;
box-shadow: 10px 9px 0px -3px #fffefe;
font-size: 1.1em;

4
components/art.js
View File

@ -11,14 +11,14 @@ function Art() {
{projects.map((project, index) => {
return (
<>
<SkillCard key={index} {...project} />
<SkillCard key={project.name} {...project} />
</>
);
})}
{arts.map((project, index) => {
return (
<>
<SkillCard key={index} {...project} />
<SkillCard key={project.name} {...project} />
</>
);
})}

2
components/art.style.jsx
View File

@ -8,7 +8,7 @@ export const ArtStyle = styled.div`
justify-content: center;
flex-wrap: wrap;
overflow-y: auto;
background-image: url("/images/background4.jpg");
background-image: url("/images/pxfuel-4.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;

2
components/artCard.style.jsx
View File

@ -5,7 +5,7 @@ export default styled.div`
width: 230px;
height: 320px;
box-sizing: border-box;
background-color: #5f046b;
background-color: var(--color12);
border-radius: 5px;
box-shadow: 10px 9px 0px -3px #fffefe;
margin: 5px;

8
components/contact.style.jsx
View File

@ -6,7 +6,7 @@ export const ContactStyle = styled.div`
align-items: center;
display: flex;
justify-content: center;
background-image: url("images/background2.jpg");
background-image: url("images/pxfuel-3.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
@ -130,9 +130,9 @@ export const ContactStyle = styled.div`
background: rgb(131, 58, 180);
background: linear-gradient(
90deg,
rgba(131, 58, 180, 1) 0%,
rgba(253, 29, 29, 1) 50%,
rgba(252, 176, 69, 1) 100%
#eeb415 0%,
#ff9f21 50%,
#eeb415 100%
);
padding: 10.5px 21px;
-webkit-border-radius: 6px;

45
components/discord-activity.jsx
View File

@ -4,8 +4,6 @@ import { useLanyard } from "react-use-lanyard";
import { discord_id } from "config";
import DiscordParser from "../libs/discord-parser";
/* <pre>{!loading && JSON.stringify(status, null, 4)}</pre>; */
const customStatus = [
"Searching for Cat Girls",
"Watching Anime",
@ -21,26 +19,8 @@ export default function DiscordActivity() {
userId: discord_id,
socket: true,
});
const [time, setTime] = useState("00:00:00 elapsed");
const [pickedStatus] = useState(statusPicker());
const padTo2Digits = (num) => {
return num.toString().padStart(2, "0");
};
const convertMsToHM = (milliseconds) => {
let seconds = Math.floor(milliseconds / 1000);
let minutes = Math.floor(seconds / 60);
let hours = Math.floor(minutes / 60);
seconds = seconds % 60;
minutes = seconds >= 30 ? minutes + 1 : minutes;
minutes = minutes % 60;
hours = hours % 24;
return `${padTo2Digits(hours)}:${padTo2Digits(minutes)}:${padTo2Digits(
seconds
)} elapsed`;
};
const [currentTs, setCurrentTs] = useState(Date.now());
const [parsedStatus, setParsedStatus] = useState(null);
useEffect(() => {
@ -49,33 +29,18 @@ export default function DiscordActivity() {
}
}, [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") {
return (
<DicordActivityStyle>
<div className="discord-icons">
<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 className="discord-small-icon">
<img
src={parsedStatus.activity.assets.small_image}
alt=""
src={parsedStatus.activity.assets.small_image} alt="discord small image"
/>
</div>
</div>
@ -94,7 +59,6 @@ export default function DiscordActivity() {
<div className="discord-message-files">
<b>{parsedStatus.activity.state}</b>
</div>
<div className="time-elapsed">{time}</div>
</div>
</DicordActivityStyle>
);
@ -130,7 +94,6 @@ export default function DiscordActivity() {
<div className="discord-message-files">
<b>{pickedStatus}</b>
</div>
{/* <div className="time-elapsed">00:00:00 elapsed</div> */}
</div>
</DicordActivityStyle>
);

86
components/experinces.jsx
View File

@ -5,161 +5,137 @@ function experinces() {
return (
<ExpStyle>
<div className="all">
<div className="company">
<div className="company">
<div className="company-left">
<div className="company-img">
<img src={job_exp_1.logo} alt="company logo" />
<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 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">
<div className="company-role-name">
{job_exp_1.role}
</div>
<div className="company-role-dur">
<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}
{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>
<div className="company">
<div className="company">
<div className="company-left">
<div className="company-img">
<img src={job_exp_2.logo} alt="company logo" />
<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 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">
<div className="company-role-name">
{job_exp_2.role}
</div>
<div className="company-role-dur">
<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}
{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>
<div className="company">
<div className="company">
<div className="company-left">
<div className="company-img">
<img src={job_exp_3.logo} alt="company logo" />
<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 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">
<div className="company-role-name">
{job_exp_3.role}
</div>
<div className="company-role-dur">
<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}
{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>
<div className="company">
<div className="company-left">
<div className="company-img">
<img src={job_exp_4.logo} alt="company logo" />
<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 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">
<div className="company-role-name">
{job_exp_4.role}
</div>
<div className="company-role-dur">
<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}
{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>
</div>
</ExpStyle>

12
components/experinces.style.jsx
View File

@ -35,11 +35,11 @@ export const ExpStyle = styled.div`
gap: 0.2px;
.company-img {
width: 100%;
height: auto;
height: auto;
margin-bottom: 0.5rem;
img {
width: 100%;
height: auto;
height: auto;
margin: auto;
max-height: 12rem;
object-fit: contain;
@ -47,7 +47,7 @@ export const ExpStyle = styled.div`
}
}
}
.company-right {
width: 75%;
.company-exp-short {
@ -71,8 +71,8 @@ export const ExpStyle = styled.div`
.company-role-desp {
.company-role-desp-para {
font-size: 1.1rem;
font-weight: 400;
margin-bottom: 0.8rem;
font-weight: 400;
margin-bottom: 0.8rem;
}
}
}
@ -80,7 +80,7 @@ export const ExpStyle = styled.div`
.company-info {
align-items: center;
justify-content: center;
.company-name {
color: var(--color3);
font-size: 1.7rem;

6
components/extras.style.jsx
View File

@ -6,7 +6,7 @@ export const ExtraStyles = styled.div`
justify-content: center;
align-items: center;
padding-top: 15vh;
background-image: url("images/background6.webp");
background-image: url("images/pxfuel-5.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
@ -27,6 +27,8 @@ export const ExtraStyles = styled.div`
/* height: 100vh; */
padding-bottom: 3em;
padding-top: 2em;
gap: 2.5em;
.content {
display: flex;
flex-wrap: wrap;
@ -34,6 +36,8 @@ export const ExtraStyles = styled.div`
align-items: center;
padding-top: 2em;
padding-bottom: 2em;
background-color: var(--color12);
&:hover {
filter: contrast(200%);
-webkit-transform: translateX(-5px) translateY(-5px);

5
components/main.jsx
View File

@ -8,7 +8,6 @@ import LinkedInIcon from "@mui/icons-material/LinkedIn";
import InstagramIcon from "@mui/icons-material/Instagram";
import FacebookIcon from "@mui/icons-material/Facebook";
import SvgIcon from "@mui/material/SvgIcon";
import MastodonSVG from "./assets/mastodon_icon_137420.svg";
import {
name,
@ -44,13 +43,13 @@ function Main() {
<div className="content">
<div className="profile">
<img
src="/images/anime-profile-pic.png"
src="/images/profile-new-transp.png"
alt=""
className="profile-img"
id="anime-pic"
/>
<img
src="/images/profile-new-transp.png"
src="/images/anime-profile-pic.png"
alt=""
className="profile-img"
id="prof-pic"

2
components/main.style.jsx
View File

@ -7,7 +7,7 @@ export default styled.main`
width: 100%;
justify-content: center;
align-items: center;
background-image: url("/images/background.jpg");
background-image: url("/images/pxfuel.jpg");
background-size: cover;
background-position: center;
#prof-pic {

4
components/nav.jsx
View File

@ -40,7 +40,7 @@ const LINKS = [
];
function Nav() {
const { loading, status /*, websocket */ } = useLanyard({
const { loading, status } = useLanyard({
userId: discord_id,
socket: true,
});
@ -76,7 +76,7 @@ function Nav() {
<div className="links">
{LINKS.map(({ title, href }, index) => (
<div key={index} className="link">
<div key={title} className="link">
<Link href={href}>{title}</Link>
</div>
))}

2
components/qbadges.style.jsx
View File

@ -6,7 +6,7 @@ export const QBStyles = styled.div`
justify-content: center;
align-items: center;
padding-top: 15vh;
background-image: url("images/background6.webp");
background-image: url("images/pxfuel-5.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;

5
components/resume.jsx
View File

@ -13,10 +13,7 @@ function Resume() {
initialDoc: "/resume.pdf",
},
viewer.current
).then((instance) => {
const { docViewer } = instance;
// you can now call WebViewer APIs here...
});
)
});
}, []);
return (

2
components/skillCard.styled.js
View File

@ -5,7 +5,7 @@ export default styled.div`
display: inline-flex;
/* box-shadow: 10px 9px 0px -3px #fffefe; */
.card {
background-color: var(--color1);
background-color: var(--color13);
padding: 15px;
width: 100%;
/* min-width: 225px; */

2
components/skills.style.js
View File

@ -9,7 +9,7 @@ export default styled.div`
align-items: center;
flex-direction: column;
overflow-y: auto !important;
background-image: url("/images/background5.jpg");
background-image: url("/images/pxfuel-2.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;

2
components/tootCard.style.jsx
View File

@ -5,7 +5,7 @@ export default styled.div`
width: 230px;
height: 100%;
box-sizing: border-box;
background-color: #aa78f6;
background-color: #aa78f6ac;
border-radius: 5px;
box-shadow: 10px 9px 0px -3px #7b3ea7;
margin: 8px;

2
components/toots.style.jsx
View File

@ -8,7 +8,7 @@ export const ArtStyle = styled.div`
justify-content: center;
flex-wrap: wrap;
overflow-y: auto;
background-image: url("/images/background7.png");
background-image: url("/images/pxfuel-2.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;

3
components/vsexts.style.js
View File

@ -6,13 +6,14 @@ export const ExtraStyles = styled.div`
justify-content: center;
align-items: center;
padding-top: 15vh;
background-image: url("images/background3.jpg");
background-image: url("images/pxfuel-4.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-y: scroll !important;
height: 100vh;
gap: 1rem;
.title {
font-size: 2rem;
font-weight: bold;

63
config.js
View File

@ -213,6 +213,69 @@ export const extra = [
];
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]",
type: "project",

10
next.config.js
View File

@ -3,5 +3,15 @@ const moduleExports = {
compiler: {
styledComponents: true,
},
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'bravo68web.me',
port: '',
pathname: '/images/**/*.{jpg,jpeg,png,svg,gif,webp}',
},
],
},
};
module.exports = moduleExports;

8
pages/index.js
View File

@ -1,7 +1,12 @@
import Head from "next/head";
import Nav from "components/nav";
import Main from "components/main";
// import Main from "components/main";
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() {
return (
@ -15,7 +20,6 @@ export default function Home() {
<Nav />
<Main />
<BMC />
{/* <Footer /> */}
</div>
);
}

BIN
public/images/background.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 78 KiB

BIN
public/images/background2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 283 KiB

BIN
public/images/background3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 302 KiB

BIN
public/images/background4.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 450 KiB

BIN
public/images/background5.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 537 KiB

BIN
public/images/background6.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 23 KiB

BIN
public/images/background7.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 345 KiB

BIN
public/images/desktop-1024x576.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
public/images/header-banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 249 KiB

BIN
public/images/pxfuel-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 733 KiB

BIN
public/images/pxfuel-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 459 KiB

BIN
public/images/pxfuel-4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 380 KiB

BIN
public/images/pxfuel-5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 500 KiB

BIN
public/images/pxfuel-6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 641 KiB

BIN
public/images/pxfuel.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 297 KiB

4
styles/globals.css
View File

@ -13,6 +13,10 @@
--color9: #f5a80f;
--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;
--color-cursor: 220, 90, 90;
--cursor-outline-shade: 0.3;