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() {
return (
<ExpStyle>
<div className="default">
<div className="content">
<div className="comp-img">
<img src={job_exp_1.logo} alt="logo" />
<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>
<p id="name">{job_exp_1.name}</p>
<p id="info">{job_exp_1.info}</p>
<p id="role">{job_exp_1.role}</p>
<p id="dates">
{job_exp_1.start_date} - {job_exp_1.end_date}
</p>
<p id="desp">{job_exp_1.description}</p>
<p id="techbits">
{job_exp_1.techstack
.map((a) => {
return "#" + a;
})
.join(" ")}
</p>
<div 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="content">
<div className="comp-img">
<img
src={job_exp_2.logo}
alt="logo"
height="20%"
width="20%"
/>
</div>
<p id="name">{job_exp_2.name}</p>
<p id="info">{job_exp_2.info}</p>
<p id="role">{job_exp_2.role}</p>
<p id="dates">
{job_exp_2.start_date} - {job_exp_2.end_date}
</p>
<p id="desp">{job_exp_2.description}</p>
<p id="techbits">
{job_exp_2.techstack
.map((a) => {
return "#" + a;
})
.join(" ")}
</p>
<div 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="content">
<div className="comp-img">
<img
src={job_exp_3.logo}
alt="logo"
height="30%"
width="18%"
/>
</div>
<p id="name">{job_exp_3.name}</p>
<p id="info">{job_exp_3.info}</p>
<p id="role">{job_exp_3.role}</p>
<p id="dates">
{job_exp_3.start_date} - {job_exp_3.end_date}
</p>
<p id="desp">{job_exp_3.description}</p>
<p id="techbits">
{job_exp_3.techstack
.map((a) => {
return "#" + a;
})
.join(" ")}
</p>
<div 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="content">
<div className="comp-img">
<img
src={job_exp_4.logo}
alt="logo"
height="35%"
width="13%"
/>
</div>
<p id="name">{job_exp_4.name}</p>
<p id="info">{job_exp_4.info}</p>
<p id="role">{job_exp_4.role}</p>
<p id="dates">
{job_exp_4.start_date} - {job_exp_4.end_date}
</p>
<p id="desp">{job_exp_4.description}</p>
<p id="techbits">
{job_exp_4.techstack
.map((a) => {
return "#" + a;
})
.join(" ")}
</p>
<div 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>

118
components/experinces.style.jsx
View File

@ -3,37 +3,99 @@ import styled from "styled-components";
export const ExpStyle = styled.div`
background-color: var(--color1);
overflow-y: scroll !important;
margin: 0;
top: 50%;
left: 50%;
padding: 2rem;
padding-top: 8rem;
height: 100vh;
padding-top: 12em;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
.default {
align-items: center;
.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;
justify-content: center;
text-align: center;
padding-top: 8em;
padding-bottom: 8em;
/* position: absolute; */
/* top: 0; */
/* overflow-y: auto; */
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;
}
}
}
.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);
.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;
}
`;

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.",
start_date: "2018-04-05",
end_date: "2019-12-24",
logo: "",
logo: "/images/companies/DFTechsLogo.png",
website: "",
techstack: [
"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;
--color9: #f5a80f;
--color10: #0ffaac;
--color11: rgba(255, 255, 255, 0.1);
--font: "Source Code Pro", monospace;
--color-cursor: 220, 90, 90;
--cursor-outline-shade: 0.3;