profilePage
This commit is contained in:
parent
731244905f
commit
4c636c424a
@ -42,8 +42,8 @@ export const ProfileHeader = () => {
|
|||||||
<div className='profileHeader__info'>
|
<div className='profileHeader__info'>
|
||||||
<div className='profileHeader__container'>
|
<div className='profileHeader__container'>
|
||||||
<nav className='profileHeader__nav'>
|
<nav className='profileHeader__nav'>
|
||||||
<NavLink to={'/profile'}>Резюме</NavLink>
|
<NavLink to={'/summary'}>Резюме</NavLink>
|
||||||
<NavLink to={'/profileCalendar'}>Отчетность</NavLink>
|
<NavLink to={'/profile'}>Отчетность</NavLink>
|
||||||
<a>Трекер</a>
|
<a>Трекер</a>
|
||||||
<a>Выплаты</a>
|
<a>Выплаты</a>
|
||||||
<a>Настройки</a>
|
<a>Настройки</a>
|
||||||
|
|||||||
@ -2,44 +2,19 @@
|
|||||||
background: #F1F1F1;
|
background: #F1F1F1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
//
|
|
||||||
//&__container {
|
|
||||||
// max-width: 1160px;
|
|
||||||
// padding: 0 10px;
|
|
||||||
// margin: 20px auto;
|
|
||||||
// position: relative;
|
|
||||||
// display: flex;
|
|
||||||
// flex-direction: column;
|
|
||||||
//}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
margin-bottom: 0;
|
color: #000000;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
color: #52B709;
|
color: #52B709;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__back {
|
@media (max-width: 560px) {
|
||||||
display: flex;
|
font-size: 17px;
|
||||||
align-items: center;
|
|
||||||
column-gap: 30px;
|
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 32px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -52,321 +27,83 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 130px 0 45px;
|
padding: 0 130px 0 45px;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
@media (max-width: 930px) {
|
|
||||||
padding: 0 40px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 690px) {
|
|
||||||
padding: 0 20px;
|
|
||||||
min-height: 80px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__person {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
column-gap: 45px;
|
|
||||||
|
|
||||||
@media (max-width: 690px) {
|
|
||||||
column-gap: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__avatar {
|
|
||||||
width: 88px;
|
|
||||||
height: 88px;
|
|
||||||
border-radius: 100px;
|
|
||||||
|
|
||||||
@media (max-width: 690px) {
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
min-width: 44px;
|
|
||||||
min-height: 44px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__name {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 32px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
@media (max-width: 690px) {
|
|
||||||
font-size: 14px;
|
|
||||||
margin-right: 10px;
|
|
||||||
line-height: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
background: #52B709;
|
|
||||||
border-radius: 12px;
|
|
||||||
width: 70%;
|
|
||||||
height: 8px;
|
|
||||||
bottom: -14px;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__git {
|
|
||||||
background: #52B709;
|
|
||||||
border-radius: 44px;
|
|
||||||
width: 177px;
|
|
||||||
height: 50px;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 32px;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
@media (max-width: 690px) {
|
|
||||||
width: 120px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__skills {
|
|
||||||
background: #FFFFFF;
|
|
||||||
border-radius: 12px;
|
|
||||||
margin-top: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__sections__head {
|
|
||||||
display: flex;
|
|
||||||
min-height: 69px;
|
|
||||||
background: #E1FCCF;
|
|
||||||
border-radius: 12px 12px 0px 0px;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 35px 0 50px;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
@media (max-width: 550px) {
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 32px;
|
|
||||||
|
|
||||||
@media (max-width: 660px) {
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
background: #FFFFFF;
|
|
||||||
border-radius: 44px;
|
|
||||||
padding: 10px 20px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
border: none;
|
|
||||||
height: 42px;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 32px;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
@media (max-width: 520px) {
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 10px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills__section {
|
|
||||||
&__items {
|
&__items {
|
||||||
padding: 25px 35px 25px 50px;
|
|
||||||
|
|
||||||
@media (max-width: 550px) {
|
|
||||||
padding: 15px 15px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__wrapper {
|
|
||||||
max-width: 630px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
column-gap: 5px;
|
|
||||||
|
|
||||||
.skill_item {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 32px;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__experience {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
row-gap: 20px;
|
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
|
row-gap: 25px;
|
||||||
|
column-gap: 35px;
|
||||||
|
|
||||||
.experience {
|
@media (max-width: 1175px) {
|
||||||
&__block {
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
max-width: 353px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 35px 45px 15px 30px;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
}
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
&__content {
|
@media (max-width: 1175px) {
|
||||||
padding: 15px 35px 15px 50px;
|
|
||||||
|
|
||||||
@media (max-width: 550px) {
|
|
||||||
padding: 15px 15px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 32px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 32px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__sectionGit {
|
|
||||||
margin-top: 25px;
|
|
||||||
|
|
||||||
&Items {
|
|
||||||
margin-top: 25px;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
row-gap: 20px;
|
|
||||||
column-gap: 25px;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.gitItem {
|
|
||||||
width: 48%;
|
width: 48%;
|
||||||
display: flex;
|
max-width: none;
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
background: #FFFFFF;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 35px 30px 30px 45px;
|
|
||||||
|
|
||||||
@media (max-width: 825px) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 470px) {
|
@media (max-width: 925px) {
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__info {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
max-width: 350px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
@media (max-width: 825px) {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__about {
|
&__about {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
column-gap: 20px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
column-gap: 15px;
|
margin-bottom: 30px;
|
||||||
}
|
|
||||||
|
|
||||||
&__name {
|
h3 {
|
||||||
h4 {
|
color: #000000;
|
||||||
font-weight: 700;
|
font-weight: 500;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 32px;
|
line-height: 22px;
|
||||||
|
max-width: 125px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-weight: 300;
|
font-weight: 700;
|
||||||
font-size: 16px;
|
font-size: 12px;
|
||||||
line-height: 32px;
|
line-height: 20px;
|
||||||
|
color: #000000;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
white-space: nowrap;
|
|
||||||
max-width: 300px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
@media (max-width: 1040px) {
|
|
||||||
max-width: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 890px) {
|
|
||||||
max-width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 825px) {
|
|
||||||
max-width: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 720px) {
|
|
||||||
max-width: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 470px) {
|
|
||||||
max-width: 200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__specification {
|
|
||||||
margin-top: 30px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding-left: 10px;
|
|
||||||
column-gap: 25px;
|
|
||||||
|
|
||||||
@media (max-width: 470px) {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
span {
|
||||||
background: #D4F123;
|
color: #52B709;
|
||||||
border-radius: 12px;
|
font-weight: 700;
|
||||||
max-width: 260px;
|
|
||||||
width: 100%;
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 32px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
&Link {
|
||||||
|
width: 48px;
|
||||||
&__link {
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #DDEEC6;
|
|
||||||
min-width: 48px;
|
|
||||||
height: 48px;
|
height: 48px;
|
||||||
cursor: pointer;
|
background: #DDEEC6;
|
||||||
|
border-radius: 50px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
|
||||||
margin-top: 70px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1160px;
|
max-width: 1160px;
|
||||||
margin-top: 23px;
|
margin-top: 23px;
|
||||||
@ -375,4 +112,8 @@
|
|||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin-top: 70px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,17 +2,47 @@
|
|||||||
background: #F1F1F1;
|
background: #F1F1F1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
//
|
||||||
|
//&__container {
|
||||||
|
// max-width: 1160px;
|
||||||
|
// padding: 0 10px;
|
||||||
|
// margin: 20px auto;
|
||||||
|
// position: relative;
|
||||||
|
// display: flex;
|
||||||
|
// flex-direction: column;
|
||||||
|
//}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
color: #000000;
|
margin-bottom: 0;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
color: #52B709;
|
color: #52B709;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__back {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
column-gap: 30px;
|
||||||
|
margin-top: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 32px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__info {
|
&__info {
|
||||||
min-height: 128px;
|
min-height: 128px;
|
||||||
background: white;
|
background: white;
|
||||||
@ -22,83 +52,321 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 130px 0 45px;
|
padding: 0 130px 0 45px;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
|
@media (max-width: 930px) {
|
||||||
|
padding: 0 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__items {
|
@media (max-width: 690px) {
|
||||||
|
padding: 0 20px;
|
||||||
|
min-height: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__person {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
align-items: center;
|
||||||
margin-top: 30px;
|
column-gap: 45px;
|
||||||
row-gap: 25px;
|
|
||||||
column-gap: 35px;
|
|
||||||
|
|
||||||
@media (max-width: 1175px) {
|
@media (max-width: 690px) {
|
||||||
justify-content: center;
|
column-gap: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
&__avatar {
|
||||||
max-width: 353px;
|
width: 88px;
|
||||||
width: 100%;
|
height: 88px;
|
||||||
padding: 35px 45px 15px 30px;
|
border-radius: 100px;
|
||||||
|
|
||||||
|
@media (max-width: 690px) {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
min-width: 44px;
|
||||||
|
min-height: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__name {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 32px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
@media (max-width: 690px) {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-right: 10px;
|
||||||
|
line-height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
background: #52B709;
|
||||||
|
border-radius: 12px;
|
||||||
|
width: 70%;
|
||||||
|
height: 8px;
|
||||||
|
bottom: -14px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__git {
|
||||||
|
background: #52B709;
|
||||||
|
border-radius: 44px;
|
||||||
|
width: 177px;
|
||||||
|
height: 50px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 32px;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
@media (max-width: 690px) {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__skills {
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
text-decoration: none;
|
margin-top: 35px;
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
@media (max-width: 1175px) {
|
|
||||||
width: 48%;
|
|
||||||
max-width: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 925px) {
|
&__sections__head {
|
||||||
|
display: flex;
|
||||||
|
min-height: 69px;
|
||||||
|
background: #E1FCCF;
|
||||||
|
border-radius: 12px 12px 0px 0px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 35px 0 50px;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
@media (max-width: 550px) {
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 32px;
|
||||||
|
|
||||||
|
@media (max-width: 660px) {
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 44px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border: none;
|
||||||
|
height: 42px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 32px;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
@media (max-width: 520px) {
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 10px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__section {
|
||||||
|
&__items {
|
||||||
|
padding: 25px 35px 25px 50px;
|
||||||
|
|
||||||
|
@media (max-width: 550px) {
|
||||||
|
padding: 15px 15px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
max-width: 630px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
column-gap: 5px;
|
||||||
|
|
||||||
|
.skill_item {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 32px;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__experience {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
row-gap: 20px;
|
||||||
|
margin-top: 30px;
|
||||||
|
|
||||||
|
.experience {
|
||||||
|
&__block {
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
padding: 15px 35px 15px 50px;
|
||||||
|
|
||||||
|
@media (max-width: 550px) {
|
||||||
|
padding: 15px 15px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__sectionGit {
|
||||||
|
margin-top: 25px;
|
||||||
|
|
||||||
|
&Items {
|
||||||
|
margin-top: 25px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
row-gap: 20px;
|
||||||
|
column-gap: 25px;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.gitItem {
|
||||||
|
width: 48%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 35px 30px 30px 45px;
|
||||||
|
|
||||||
|
@media (max-width: 825px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__about {
|
@media (max-width: 470px) {
|
||||||
display: flex;
|
padding: 15px;
|
||||||
column-gap: 20px;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
color: #000000;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 22px;
|
|
||||||
max-width: 125px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__info {
|
&__info {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
flex-direction: column;
|
||||||
|
max-width: 350px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
@media (max-width: 825px) {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__about {
|
||||||
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
column-gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__name {
|
||||||
|
h4 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-weight: 700;
|
font-weight: 300;
|
||||||
font-size: 12px;
|
font-size: 16px;
|
||||||
line-height: 20px;
|
line-height: 32px;
|
||||||
color: #000000;
|
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
max-width: 300px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
@media (max-width: 1040px) {
|
||||||
|
max-width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 890px) {
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 825px) {
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
max-width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 470px) {
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__specification {
|
||||||
|
margin-top: 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 10px;
|
||||||
|
column-gap: 25px;
|
||||||
|
|
||||||
|
@media (max-width: 470px) {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
color: #52B709;
|
background: #D4F123;
|
||||||
font-weight: 700;
|
border-radius: 12px;
|
||||||
|
max-width: 260px;
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 32px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&Link {
|
}
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
&__link {
|
||||||
|
border-radius: 50%;
|
||||||
background: #DDEEC6;
|
background: #DDEEC6;
|
||||||
border-radius: 50px;
|
min-width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin-top: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1160px;
|
max-width: 1160px;
|
||||||
margin-top: 23px;
|
margin-top: 23px;
|
||||||
@ -107,8 +375,4 @@
|
|||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
|
||||||
margin-top: 70px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,7 +8,7 @@ export function transformHtml(text) {
|
|||||||
return (el != null && el != "" || el === 0)
|
return (el != null && el != "" || el === 0)
|
||||||
})
|
})
|
||||||
const finalHtml = startHtml.map((item) => {
|
const finalHtml = startHtml.map((item) => {
|
||||||
return `<div class='experience__block'><div class="profile__sections__head"><h3>Описание опыта работы</h3><button>Редактировать раздел</button></div><div class="experience__content">${item.split('<h3>')[0]}</div></div>`
|
return `<div class='experience__block'><div class="summary__sections__head"><h3>Описание опыта работы</h3><button>Редактировать раздел</button></div><div class="experience__content">${item.split('<h3>')[0]}</div></div>`
|
||||||
})
|
})
|
||||||
return {__html: finalHtml.join('')}
|
return {__html: finalHtml.join('')}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,101 +1,96 @@
|
|||||||
import React, {useEffect, useState} from 'react';
|
import React from 'react';
|
||||||
import { ProfileHeader } from "../components/Profile/ProfileHeader";
|
import {useSelector} from "react-redux";
|
||||||
import {getProfileInfo} from "../redux/outstaffingSlice";
|
import {getProfileInfo} from "../redux/outstaffingSlice";
|
||||||
import { useSelector } from "react-redux";
|
import {ProfileHeader} from "../components/Profile/ProfileHeader";
|
||||||
import {transformHtml} from "../helper";
|
import {NavLink} from "react-router-dom";
|
||||||
import { Footer } from '../components/Footer/Footer'
|
import {Footer} from "../components/Footer/Footer";
|
||||||
|
|
||||||
import arrow from "../images/right-arrow.png";
|
import reportsIcon from "../images/reports.png"
|
||||||
|
import summaryIcon from "../images/summaryIcon.png"
|
||||||
|
import timerIcon from "../images/timerIcon.png"
|
||||||
|
import paymentIcon from "../images/paymentIcon.png"
|
||||||
|
import settingIcon from "../images/settingIcon.png"
|
||||||
import rightArrow from "../images/arrowRight.png"
|
import rightArrow from "../images/arrowRight.png"
|
||||||
import gitImgItem from "../images/gitItemImg.png"
|
|
||||||
|
|
||||||
import './../components/Profile/profile.scss'
|
import '../components/Profile/profile.scss'
|
||||||
import {fetchGet} from "../server/server";
|
|
||||||
|
|
||||||
export const Profile = () => {
|
export const Profile = () => {
|
||||||
const profileInfo = useSelector(getProfileInfo)
|
const profileInfo = useSelector(getProfileInfo)
|
||||||
const [openGit, setOpenGit] = useState(false);
|
|
||||||
const [gitInfo, setGitInfo] = useState([])
|
|
||||||
useEffect(() => {
|
|
||||||
fetchGet({
|
|
||||||
link: `${process.env.REACT_APP_API_URL}/api/profile/portfolio-projects?card_id=${localStorage.getItem('cardId')}`,
|
|
||||||
}).then((responseGit) => {
|
|
||||||
setGitInfo(responseGit)
|
|
||||||
})
|
|
||||||
}, [])
|
|
||||||
return(
|
return(
|
||||||
<div className='profile'>
|
<div className='profile'>
|
||||||
<ProfileHeader/>
|
<ProfileHeader/>
|
||||||
<div className='container'>
|
<div className='container'>
|
||||||
<div className='profile__content'>
|
<h2 className='profile__title'>Добрый день, <span>{profileInfo.fio}</span></h2>
|
||||||
<h2 className='profile__title'>Ваше резюме {openGit && <span>- Git</span>}</h2>
|
<div className='summary__info'>
|
||||||
{openGit && <div className='profile__back' onClick={() => setOpenGit(false)}>
|
<div className='summary__person'>
|
||||||
<img src={arrow} alt='arrow'/>
|
<img src={profileInfo.photo} className='summary__avatar' />
|
||||||
<p>Вернуться</p>
|
<p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
|
||||||
</div>}
|
|
||||||
<div className='profile__info'>
|
|
||||||
<div className='profile__person'>
|
|
||||||
<img src={profileInfo.photo} className='profile__avatar' />
|
|
||||||
<p className='profile__name'>{profileInfo.fio} {profileInfo.specification}</p>
|
|
||||||
</div>
|
|
||||||
{!openGit &&
|
|
||||||
<button className='profile__git' onClick={()=> setOpenGit(true)}>Git</button>
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{!openGit &&
|
<div className='profile__items'>
|
||||||
<div className='profile__skills skills__section'>
|
<NavLink to={'/ProfileCalendar'} className='item'>
|
||||||
<div className='profile__sections__head'>
|
<div className='item__about'>
|
||||||
<h3>Основной стек</h3>
|
<img src={reportsIcon} />
|
||||||
<button>Редактировать раздел</button>
|
<h3>Ваша отчетность</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className='skills__section__items'>
|
<div className='item__info'>
|
||||||
<div className='skills__section__items__wrapper'>
|
<p><span>У вас 122 часа</span><br/> отработанных в этом месяце</p>
|
||||||
{profileInfo.skillValues && profileInfo.skillValues.map((skill) => {
|
<div className='item__infoLink'>
|
||||||
return <span key={skill.id} className='skill_item'>{skill.skill.name}</span>
|
<img src={rightArrow} />
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</NavLink>
|
||||||
|
<NavLink to={'/summary'} className='item'>
|
||||||
|
<div className='item__about'>
|
||||||
|
<img src={summaryIcon} />
|
||||||
|
<h3>Данные и резюме</h3>
|
||||||
</div>
|
</div>
|
||||||
}
|
<div className='item__info'>
|
||||||
{profileInfo.vc_text && !openGit &&
|
<p>Ваше резюме<br/><span>заполнено</span></p>
|
||||||
<div className='profile__experience' dangerouslySetInnerHTML={transformHtml(profileInfo.vc_text)}>
|
<div className='item__infoLink'>
|
||||||
</div>
|
<img src={rightArrow} />
|
||||||
}
|
|
||||||
{openGit &&
|
|
||||||
<div className='profile__sectionGit'>
|
|
||||||
<div className='profile__sections__head'>
|
|
||||||
<h3>Страница портфолио кода разработчика</h3>
|
|
||||||
<button>Редактировать раздел</button>
|
|
||||||
</div>
|
|
||||||
<div className='profile__sectionGitItems'>
|
|
||||||
{gitInfo.length && gitInfo.map((itemGit) => {
|
|
||||||
return <div key={itemGit.id} className='profile__sectionGitItem gitItem'>
|
|
||||||
<div className='gitItem__info'>
|
|
||||||
<div className='gitItem__info__about'>
|
|
||||||
<img src={gitImgItem} alt='gitImg' />
|
|
||||||
<div className='gitItem__info__name'>
|
|
||||||
<h4>{itemGit.title}</h4>
|
|
||||||
<p>{itemGit.description}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='gitItem__info__specification'>
|
</NavLink>
|
||||||
<span></span>
|
<NavLink to={'/profile'} className='item'>
|
||||||
<p>{itemGit.main_stack}</p>
|
<div className='item__about'>
|
||||||
|
<img src={timerIcon} />
|
||||||
|
<h3>Трекер времени</h3>
|
||||||
|
</div>
|
||||||
|
<div className='item__info'>
|
||||||
|
<p>Сколько времени занимает<br/> выполнение задач</p>
|
||||||
|
<div className='item__infoLink'>
|
||||||
|
<img src={rightArrow} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a className='gitItem__link' href={itemGit.link} target="_blank">
|
</NavLink>
|
||||||
<img src={rightArrow} alt='arrowRight' />
|
<NavLink to={'/profile'} className='item'>
|
||||||
</a>
|
<div className='item__about'>
|
||||||
|
<img src={paymentIcon} />
|
||||||
|
<h3>Выплаты</h3>
|
||||||
</div>
|
</div>
|
||||||
})
|
<div className='item__info'>
|
||||||
}
|
<p>У вас <span>подтвержден</span><br/> статус самозанятого</p>
|
||||||
|
<div className='item__infoLink'>
|
||||||
|
<img src={rightArrow} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
</NavLink>
|
||||||
|
<NavLink to={'/profile'} className='item'>
|
||||||
|
<div className='item__about'>
|
||||||
|
<img src={settingIcon} />
|
||||||
|
<h3>Настройки аккаунта</h3>
|
||||||
|
</div>
|
||||||
|
<div className='item__info'>
|
||||||
|
<p>Перейдите чтобы начать<br/> редактирование</p>
|
||||||
|
<div className='item__infoLink'>
|
||||||
|
<img src={rightArrow} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</NavLink>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Footer/>
|
<Footer/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,96 +1,101 @@
|
|||||||
import React from 'react';
|
import React, {useEffect, useState} from 'react';
|
||||||
import {useSelector} from "react-redux";
|
import { ProfileHeader } from "../components/Profile/ProfileHeader";
|
||||||
import {getProfileInfo} from "../redux/outstaffingSlice";
|
import {getProfileInfo} from "../redux/outstaffingSlice";
|
||||||
import {ProfileHeader} from "../components/Profile/ProfileHeader";
|
import { useSelector } from "react-redux";
|
||||||
import {NavLink} from "react-router-dom";
|
import {transformHtml} from "../helper";
|
||||||
import {Footer} from "../components/Footer/Footer";
|
import { Footer } from '../components/Footer/Footer'
|
||||||
|
|
||||||
import reportsIcon from "../images/reports.png"
|
import arrow from "../images/right-arrow.png";
|
||||||
import summaryIcon from "../images/summaryIcon.png"
|
|
||||||
import timerIcon from "../images/timerIcon.png"
|
|
||||||
import paymentIcon from "../images/paymentIcon.png"
|
|
||||||
import settingIcon from "../images/settingIcon.png"
|
|
||||||
import rightArrow from "../images/arrowRight.png"
|
import rightArrow from "../images/arrowRight.png"
|
||||||
|
import gitImgItem from "../images/gitItemImg.png"
|
||||||
|
|
||||||
import './../components/Profile/summary.scss'
|
import '../components/Profile/summary.scss'
|
||||||
|
import {fetchGet} from "../server/server";
|
||||||
|
|
||||||
export const Summary = () => {
|
export const Summary = () => {
|
||||||
const profileInfo = useSelector(getProfileInfo)
|
const profileInfo = useSelector(getProfileInfo)
|
||||||
|
const [openGit, setOpenGit] = useState(false);
|
||||||
|
const [gitInfo, setGitInfo] = useState([])
|
||||||
|
useEffect(() => {
|
||||||
|
fetchGet({
|
||||||
|
link: `${process.env.REACT_APP_API_URL}/api/profile/portfolio-projects?card_id=${localStorage.getItem('cardId')}`,
|
||||||
|
}).then((responseGit) => {
|
||||||
|
setGitInfo(responseGit)
|
||||||
|
})
|
||||||
|
}, [])
|
||||||
return(
|
return(
|
||||||
<div className='summary'>
|
<div className='summary'>
|
||||||
<ProfileHeader/>
|
<ProfileHeader/>
|
||||||
<div className='container'>
|
<div className='container'>
|
||||||
<h2 className='summary__title'>Добрый день, <span>{profileInfo.fio}</span></h2>
|
<div className='summary__content'>
|
||||||
|
<h2 className='summary__title'>Ваше резюме {openGit && <span>- Git</span>}</h2>
|
||||||
|
{openGit && <div className='summary__back' onClick={() => setOpenGit(false)}>
|
||||||
|
<img src={arrow} alt='arrow'/>
|
||||||
|
<p>Вернуться</p>
|
||||||
|
</div>}
|
||||||
<div className='summary__info'>
|
<div className='summary__info'>
|
||||||
<div className='profile__person'>
|
<div className='summary__person'>
|
||||||
<img src={profileInfo.photo} className='profile__avatar' />
|
<img src={profileInfo.photo} className='summary__avatar' />
|
||||||
<p className='profile__name'>{profileInfo.fio} {profileInfo.specification}</p>
|
<p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
|
||||||
|
</div>
|
||||||
|
{!openGit &&
|
||||||
|
<button className='summary__git' onClick={()=> setOpenGit(true)}>Git</button>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='summary__items'>
|
{!openGit &&
|
||||||
<NavLink to={'/profile'} className='item'>
|
<div className='summary__skills skills__section'>
|
||||||
<div className='item__about'>
|
<div className='summary__sections__head'>
|
||||||
<img src={reportsIcon} />
|
<h3>Основной стек</h3>
|
||||||
<h3>Ваша отчетность</h3>
|
<button>Редактировать раздел</button>
|
||||||
</div>
|
</div>
|
||||||
<div className='item__info'>
|
<div className='skills__section__items'>
|
||||||
<p><span>У вас 122 часа</span><br/> отработанных в этом месяце</p>
|
<div className='skills__section__items__wrapper'>
|
||||||
<div className='item__infoLink'>
|
{profileInfo.skillValues && profileInfo.skillValues.map((skill) => {
|
||||||
<img src={rightArrow} />
|
return <span key={skill.id} className='skill_item'>{skill.skill.name}</span>
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</NavLink>
|
|
||||||
<NavLink to={'/profile'} className='item'>
|
|
||||||
<div className='item__about'>
|
|
||||||
<img src={summaryIcon} />
|
|
||||||
<h3>Данные и резюме</h3>
|
|
||||||
</div>
|
</div>
|
||||||
<div className='item__info'>
|
}
|
||||||
<p>Ваше резюме<br/><span>заполнено</span></p>
|
{profileInfo.vc_text && !openGit &&
|
||||||
<div className='item__infoLink'>
|
<div className='summary__experience' dangerouslySetInnerHTML={transformHtml(profileInfo.vc_text)}>
|
||||||
<img src={rightArrow} />
|
</div>
|
||||||
|
}
|
||||||
|
{openGit &&
|
||||||
|
<div className='summary__sectionGit'>
|
||||||
|
<div className='summary__sections__head'>
|
||||||
|
<h3>Страница портфолио кода разработчика</h3>
|
||||||
|
<button>Редактировать раздел</button>
|
||||||
|
</div>
|
||||||
|
<div className='summary__sectionGitItems'>
|
||||||
|
{gitInfo.length && gitInfo.map((itemGit) => {
|
||||||
|
return <div key={itemGit.id} className='summary__sectionGitItem gitItem'>
|
||||||
|
<div className='gitItem__info'>
|
||||||
|
<div className='gitItem__info__about'>
|
||||||
|
<img src={gitImgItem} alt='gitImg' />
|
||||||
|
<div className='gitItem__info__name'>
|
||||||
|
<h4>{itemGit.title}</h4>
|
||||||
|
<p>{itemGit.description}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</NavLink>
|
<div className='gitItem__info__specification'>
|
||||||
<NavLink to={'/profile'} className='item'>
|
<span></span>
|
||||||
<div className='item__about'>
|
<p>{itemGit.main_stack}</p>
|
||||||
<img src={timerIcon} />
|
|
||||||
<h3>Трекер времени</h3>
|
|
||||||
</div>
|
|
||||||
<div className='item__info'>
|
|
||||||
<p>Сколько времени занимает<br/> выполнение задач</p>
|
|
||||||
<div className='item__infoLink'>
|
|
||||||
<img src={rightArrow} />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</NavLink>
|
<a className='gitItem__link' href={itemGit.link} target="_blank">
|
||||||
<NavLink to={'/profile'} className='item'>
|
<img src={rightArrow} alt='arrowRight' />
|
||||||
<div className='item__about'>
|
</a>
|
||||||
<img src={paymentIcon} />
|
|
||||||
<h3>Выплаты</h3>
|
|
||||||
</div>
|
</div>
|
||||||
<div className='item__info'>
|
})
|
||||||
<p>У вас <span>подтвержден</span><br/> статус самозанятого</p>
|
}
|
||||||
<div className='item__infoLink'>
|
|
||||||
<img src={rightArrow} />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</NavLink>
|
}
|
||||||
<NavLink to={'/profile'} className='item'>
|
|
||||||
<div className='item__about'>
|
|
||||||
<img src={settingIcon} />
|
|
||||||
<h3>Настройки аккаунта</h3>
|
|
||||||
</div>
|
|
||||||
<div className='item__info'>
|
|
||||||
<p>Перейдите чтобы начать<br/> редактирование</p>
|
|
||||||
<div className='item__infoLink'>
|
|
||||||
<img src={rightArrow} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</NavLink>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<Footer/>
|
<Footer/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user