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

Added Experience section

This commit is contained in:
Jyotirmoy Bandyopadhayaya 2023-06-12 15:58:34 +05:30
parent 451094dbda
commit de105ff2e1
Signed by: bravo68web
GPG Key ID: F5671FD7BCB9917A
5 changed files with 244 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

239
components/experinces.jsx
View File

@ -4,97 +4,162 @@ import { ExpStyle } from "./experinces.style";
function experinces() { function experinces() {
return ( return (
<ExpStyle> <ExpStyle>
<div className="default"> <div className="all">
<div className="content"> <div className="company">
<div className="comp-img"> <div className="company-left">
<img src={job_exp_1.logo} alt="logo" /> <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>
<p id="name">{job_exp_1.name}</p> <div className="company-right">
<p id="info">{job_exp_1.info}</p> <div className="company-exp-short">
<p id="role">{job_exp_1.role}</p> <div className="company-role-name">
<p id="dates"> {job_exp_1.role}
{job_exp_1.start_date} - {job_exp_1.end_date} </div>
</p> <div className="company-role-dur">
<p id="desp">{job_exp_1.description}</p> {job_exp_1.start_date} - {job_exp_1.end_date}
<p id="techbits"> </div>
{job_exp_1.techstack </div>
.map((a) => { <div className="company-role-desp">
return "#" + a; <p className="company-role-desp-para">
}) {job_exp_1.description}
.join(" ")} </p>
</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="content"> <div className="company">
<div className="comp-img"> <div className="company-left">
<img <div className="company-img">
src={job_exp_2.logo} <img src={job_exp_2.logo} alt="company logo" />
alt="logo" </div>
height="20%" <div className="company-info">
width="20%" <div className="company-name">
/> {job_exp_2.name}
</div> </div>
<p id="name">{job_exp_2.name}</p> <div className="company-desp">
<p id="info">{job_exp_2.info}</p> {job_exp_2.info}
<p id="role">{job_exp_2.role}</p> </div>
<p id="dates"> </div>
{job_exp_2.start_date} - {job_exp_2.end_date} </div>
</p> <div className="company-right">
<p id="desp">{job_exp_2.description}</p> <div className="company-exp-short">
<p id="techbits"> <div className="company-role-name">
{job_exp_2.techstack {job_exp_2.role}
.map((a) => { </div>
return "#" + a; <div className="company-role-dur">
}) {job_exp_2.start_date} - {job_exp_2.end_date}
.join(" ")} </div>
</p> </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>
<div className="content"> <div className="company">
<div className="comp-img"> <div className="company-left">
<img <div className="company-img">
src={job_exp_3.logo} <img src={job_exp_3.logo} alt="company logo" />
alt="logo" </div>
height="30%" <div className="company-info">
width="18%" <div className="company-name">
/> {job_exp_3.name}
</div> </div>
<p id="name">{job_exp_3.name}</p> <div className="company-desp">
<p id="info">{job_exp_3.info}</p> {job_exp_3.info}
<p id="role">{job_exp_3.role}</p> </div>
<p id="dates"> </div>
{job_exp_3.start_date} - {job_exp_3.end_date} </div>
</p> <div className="company-right">
<p id="desp">{job_exp_3.description}</p> <div className="company-exp-short">
<p id="techbits"> <div className="company-role-name">
{job_exp_3.techstack {job_exp_3.role}
.map((a) => { </div>
return "#" + a; <div className="company-role-dur">
}) {job_exp_3.start_date} - {job_exp_3.end_date}
.join(" ")} </div>
</p> </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>
<div className="content"> <div className="company">
<div className="comp-img"> <div className="company-left">
<img <div className="company-img">
src={job_exp_4.logo} <img src={job_exp_4.logo} alt="company logo" />
alt="logo" </div>
height="35%" <div className="company-info">
width="13%" <div className="company-name">
/> {job_exp_4.name}
</div> </div>
<p id="name">{job_exp_4.name}</p> <div className="company-desp">
<p id="info">{job_exp_4.info}</p> {job_exp_4.info}
<p id="role">{job_exp_4.role}</p> </div>
<p id="dates"> </div>
{job_exp_4.start_date} - {job_exp_4.end_date} </div>
</p> <div className="company-right">
<p id="desp">{job_exp_4.description}</p> <div className="company-exp-short">
<p id="techbits"> <div className="company-role-name">
{job_exp_4.techstack {job_exp_4.role}
.map((a) => { </div>
return "#" + a; <div className="company-role-dur">
}) {job_exp_4.start_date} - {job_exp_4.end_date}
.join(" ")} </div>
</p> </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>
</div> </div>
</ExpStyle> </ExpStyle>

118
components/experinces.style.jsx
View File

@ -3,37 +3,99 @@ import styled from "styled-components";
export const ExpStyle = styled.div` export const ExpStyle = styled.div`
background-color: var(--color1); background-color: var(--color1);
overflow-y: scroll !important; overflow-y: scroll !important;
margin: 0; padding: 2rem;
top: 50%; padding-top: 8rem;
left: 50%;
height: 100vh; height: 100vh;
padding-top: 12em;
align-items: center; .company {
display: flex; display: flex;
flex-direction: column; padding: 1rem;
justify-content: center; background-color: var(--color11);
text-align: center; border-radius: 1rem;
.default { }
align-items: center; .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; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; gap: 0.2px;
text-align: center; .company-img {
padding-top: 8em; width: 100%;
padding-bottom: 8em; height: auto;
margin-bottom: 0.5rem;
/* position: absolute; */ img {
/* top: 0; */ width: 100%;
height: auto;
/* overflow-y: auto; */ margin: auto;
max-height: 12rem;
object-fit: contain;
object-position: center;
}
}
} }
.content {
margin-top: 1em; .company-right {
margin-bottom: 1em; width: 75%;
margin-left: 1.3em; .company-exp-short {
margin-right: 1.3em; display: flex;
font-weight: bold; align-items: center;
font-size: 1.3em; justify-content: space-between;
color: var(--color3); 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;
} }
`; `;

2
config.js
View File

@ -21,7 +21,7 @@ export const job_exp_1 = {
"I was the Wordpress Manager and Hosting Manager of the DF Tech Community. I was responsible for managing the Wordpress website and the hosting of the website. I was also responsible for managing the hosting of the community's Discord bot.", "I was the Wordpress Manager and Hosting Manager of the DF Tech Community. I was responsible for managing the Wordpress website and the hosting of the website. I was also responsible for managing the hosting of the community's Discord bot.",
start_date: "2018-04-05", start_date: "2018-04-05",
end_date: "2019-12-24", end_date: "2019-12-24",
logo: "", logo: "/images/companies/DFTechsLogo.png",
website: "", website: "",
techstack: [ techstack: [
"Wordpress", "Wordpress",

BIN
public/images/companies/DFTechsLogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 MiB

1
styles/globals.css
View File

@ -12,6 +12,7 @@
--color8: #f58a0f; --color8: #f58a0f;
--color9: #f5a80f; --color9: #f5a80f;
--color10: #0ffaac; --color10: #0ffaac;
--color11: rgba(255, 255, 255, 0.1);
--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;