fixed code

This commit is contained in:
Hope87
2021-07-02 16:02:47 +03:00
parent edd01168a5
commit c44c1fe27c
28 changed files with 356 additions and 357 deletions

View File

@ -1,24 +1,24 @@
import React from 'react';
import { useHistory, useParams } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { selectCandidates, currentCandidate, selectCurrentCandidate } from '../../redux/outstaffingSlice';
import style from './Candidate.module.css';
import arrow from '../../images/right-arrow.png';
import rectangle from '../../images/rectangle_secondPage.png';
import Sidebar from '../Sidebar/Sidebar';
import SectionOne from './sections/SectionOne';
import SectionTwo from './sections/SectionTwo';
import SectionThree from './sections/SectionThree';
import SectionFour from './sections/SectionFour';
import SectionFive from './sections/SectionFive';
import SectionSkills from './sections/SectionSkills';
import SectionSkills from './SectionSkills';
const Candidate = ({ candidatesArr, getCandidateForCalendar }) => {
const Candidate = () => {
const history = useHistory();
const { id: candidateId } = useParams();
const currentCandidate = candidatesArr.find((el) => Number(el.id) === Number(candidateId));
const dispatch = useDispatch();
const { name, skillsName, img } = currentCandidate;
const candidatesArr = useSelector(selectCandidates);
dispatch(currentCandidate(candidatesArr.find((el) => Number(el.id) === Number(candidateId))));
const currentCandidateObj = useSelector(selectCurrentCandidate);
const { name, skillsName, img, skills } = currentCandidateObj;
let classes;
@ -66,24 +66,67 @@ const Candidate = ({ candidatesArr, getCandidateForCalendar }) => {
<div className={style.candidate__main}>
<div className="row">
<div className="col-12 col-xl-4">
<Sidebar getCandidateForCalendar={getCandidateForCalendar} currentCandidateObj={currentCandidate} />
<Sidebar />
</div>
<div className="col-12 col-xl-8">
<div className={style.candidate__main__description}>
<h2>{name}</h2>
<img src={rectangle} alt="" />
<p># Описание опыта</p>
<SectionOne />
<div className={style.SectionOne}>
<h3>SVM - сервис выездных менеджеров для банка ПСБ</h3>
<p>
Приложение, которое позволяет управлять работой т.н. выездных менеджеров (ВМ). Банк предоставляет их
услуги своим (потенциальным или реальным) клиентам, позволяя подключать расчетно-кассовое
обслуживание или регистрировать свой бизнес. Клиенту не нужно приходить в отделение/офис банка - все
необходимые бумаги ВМ подготовит заранее и принесет на согласование и подпись в удобное ему (клиент)
время и место.
</p>
<h4>Senior PHP/JS Developer</h4>
</div>
<p># Средства и инструменты:</p>
<SectionTwo />
<div className={style.SectionTwo}>
<p>
- Разработал и внедрил веб приложения, а также программное обеспечение с использованием Node.js,
MySQL, JavaScript, HTML, CSS, React.js и Vue.JS. - Поддерживал существующий веб-сайт на базе PHP.
Перевел существующую платформу с Laravel на современную архитектуру React/Redux и Node.
</p>
<p>
- Проектировал и разрабатывал компоненты пользовательского интерфейса с использованием HTML, CSS и
JavaScript. - Повысил скорость загрузки веб-сайта и время безотказной работы за счете переписывания
всех основных компонентов и внедрения новой архетиктуры. - Разработал персональное APIs.
</p>
</div>
<p># Описание опыта</p>
<SectionThree />
<div className={style.SectionThree}>
<h3>Multitur - личный кабинет для сервиса поиска/подбора отелей</h3>
<p>
Личный кабинет для сотрудников отелей, который позволяет управлять информацией по отелю на сайте.
</p>
<h4>Senior PHP/JS Developer</h4>
</div>
<p># Средства и инструменты:</p>
<SectionFour />
<div className={style.SectionFour}>
<p>Backend - REST API на PHP 7.1 с использованием фреймворка Laravel 5.8</p>
<p>Frontend - Vue.js</p>
<p>БД - MYSQL</p>
</div>
<p># Функционал:</p>
<SectionFive />
<SectionSkills />
<>
<div className={style.SectionFive}>
<p>Регистрации/авторизации;</p>
<p>Управления правами менеджеров отеля, назначение поставщиков</p>
<p>Управления описанием и профилем отелей;</p>
<p>Управления финансами, ценообразованием, квотами;</p>
<p>Переписки со своими менеджерами, а также с вышестоящими инстанциями;</p>
<p>Управления новостями отеля;</p>
<p>Просмотра расширенной статистики по заявкам и людям;</p>
</div>
<button type="submit" className={style.SectionFive__btn}>
Выбрать к собеседованию
</button>
</>
<SectionSkills skillsArr={skills} />
</div>
</div>
</div>

View File

@ -182,3 +182,162 @@
text-align: left;
margin: 20px 0px;
}
.SectionOne > h3 {
font-family: 'GT Eesti Pro Display';
font-size: 2.2em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
.SectionOne > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 28px;
text-align: left;
}
.SectionOne > h4 {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
.SectionTwo > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 28px;
text-align: left;
}
.SectionThree > h3 {
font-family: 'GT Eesti Pro Display';
font-size: 2.2em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
.SectionThree > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 28px;
text-align: left;
}
.SectionThree > h4 {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
.SectionFour > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 18px;
text-align: left;
}
.SectionFive > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 16px;
text-align: left;
}
@media (min-width: 576.98px) {
.SectionFive__btn {
display: none;
}
}
@media (max-width: 575.98px) {
.SectionFive__btn {
display: block;
width: 221px;
height: 49px;
box-shadow: 0 8px 20px rgba(82, 151, 34, 0.21);
border-radius: 24px;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
color: #ffffff;
font-family: 'Muller';
font-size: 1.3em;
letter-spacing: normal;
text-align: left;
border: none;
text-align: center;
margin: 28px auto;
}
}
.SectionSkills {
display: flex;
border: 1px solid #69bf2c;
padding: 28px 40px 16px 30px;
margin-top: 60px;
border-radius: 10px;
margin-bottom: 60px;
}
@media (max-width: 575.98px) {
.SectionSkills {
display: none;
}
}
.SectionSkills > h3 {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 28px;
text-align: left;
}
.SectionSkills > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 28px;
text-align: left;
margin-left: 20px;
}

View File

@ -0,0 +1,15 @@
import React from 'react';
import style from './Candidate.module.css';
const SectionSkills = ({ skillsArr }) => {
return (
<div className={style.SectionSkills}>
<h3>Навыки:</h3>
{skillsArr.map((skills) => (
<p key={skills.id}>{skills.skill.name}</p>
))}
</div>
);
};
export default SectionSkills;

View File

@ -1,156 +0,0 @@
.SectionOne > h3 {
font-family: 'GT Eesti Pro Display';
font-size: 2.2em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
.SectionOne > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 28px;
text-align: left;
}
.SectionOne > h4 {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
.SectionTwo > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 28px;
text-align: left;
}
.SectionThree > h3 {
font-family: 'GT Eesti Pro Display';
font-size: 2.2em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
.SectionThree > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 28px;
text-align: left;
}
.SectionThree > h4 {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
.SectionFour > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 18px;
text-align: left;
}
.SectionFive > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 16px;
text-align: left;
}
@media (min-width: 576.98px) {
.SectionFive__btn {
display: none;
}
}
@media (max-width: 575.98px) {
.SectionFive__btn {
display: block;
width: 221px;
height: 49px;
box-shadow: 0 8px 20px rgba(82, 151, 34, 0.21);
border-radius: 24px;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
color: #ffffff;
font-family: 'Muller';
font-size: 1.3em;
letter-spacing: normal;
text-align: left;
border: none;
text-align: center;
margin: 28px auto;
}
}
.SectionSkills {
border: 1px solid #69bf2c;
padding: 28px 40px 16px 30px;
margin-top: 60px;
border-radius: 10px;
margin-bottom: 60px;
}
@media (max-width: 575.98px) {
.SectionSkills {
display: none;
}
}
.SectionSkills > h3 {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 28px;
text-align: left;
}
.SectionSkills > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 28px;
text-align: left;
}

View File

@ -1,23 +0,0 @@
import React from 'react';
import style from './Section.module.css';
const SectionFive = () => {
return (
<>
<div className={style.SectionFive}>
<p>Регистрации/авторизации;</p>
<p>Управления правами менеджеров отеля, назначение поставщиков</p>
<p>Управления описанием и профилем отелей;</p>
<p>Управления финансами, ценообразованием, квотами;</p>
<p>Переписки со своими менеджерами, а также с вышестоящими инстанциями;</p>
<p>Управления новостями отеля;</p>
<p>Просмотра расширенной статистики по заявкам и людям;</p>
</div>
<button type="submit" className={style.SectionFive__btn}>
Выбрать к собеседованию
</button>
</>
);
};
export default SectionFive;

View File

@ -1,14 +0,0 @@
import React from 'react';
import style from './Section.module.css';
const SectionFour = () => {
return (
<div className={style.SectionFour}>
<p>Backend - REST API на PHP 7.1 с использованием фреймворка Laravel 5.8</p>
<p>Frontend - Vue.js</p>
<p>БД - MYSQL</p>
</div>
);
};
export default SectionFour;

View File

@ -1,19 +0,0 @@
import React from 'react';
import style from './Section.module.css';
const SectionOne = () => {
return (
<div className={style.SectionOne}>
<h3>SVM - сервис выездных менеджеров для банка ПСБ</h3>
<p>
Приложение, которое позволяет управлять работой т.н. выездных менеджеров (ВМ). Банк предоставляет их услуги
своим (потенциальным или реальным) клиентам, позволяя подключать расчетно-кассовое обслуживание или
регистрировать свой бизнес. Клиенту не нужно приходить в отделение/офис банка - все необходимые бумаги ВМ
подготовит заранее и принесет на согласование и подпись в удобное ему (клиент) время и место.
</p>
<h4>Senior PHP/JS Developer</h4>
</div>
);
};
export default SectionOne;

View File

@ -1,18 +0,0 @@
import React from 'react';
import style from './Section.module.css';
const SectionSkills = () => {
return (
<div className={style.SectionSkills}>
<h3>Навыки:</h3>
<p>
PHP: Native, Laravel, Zend Framework, CodeIgniter, YII, Symfony. JavaScript: Native, jQuery, AngularJS, ExtJS,
BackboneJS, ReactJS + Redux, VueJS. Search Engines: Sphinx, Elastic Search. Cache: Memcache, Redis. Profiling:
Xdebug, XHProf. WebSockets: Ratchet, Socket.io. Очереди: RabbitMQ, Beanstalk. MySQL, PostgreSQL, Oracle, MsSQL,
Vertica, HBase, Cassandra, MongoDB, Redis, Tarantool. CSS 2/3 (Sass, Less). HTML 4/5.
</p>
</div>
);
};
export default SectionSkills;

View File

@ -1,14 +0,0 @@
import React from 'react';
import style from './Section.module.css';
const SectionThree = () => {
return (
<div className={style.SectionThree}>
<h3>Multitur - личный кабинет для сервиса поиска/подбора отелей</h3>
<p>Личный кабинет для сотрудников отелей, который позволяет управлять информацией по отелю на сайте.</p>
<h4>Senior PHP/JS Developer</h4>
</div>
);
};
export default SectionThree;

View File

@ -1,21 +0,0 @@
import React from 'react';
import style from './Section.module.css';
const SectionTwo = () => {
return (
<div className={style.SectionTwo}>
<p>
- Разработал и внедрил веб приложения, а также программное обеспечение с использованием Node.js, MySQL,
JavaScript, HTML, CSS, React.js и Vue.JS. - Поддерживал существующий веб-сайт на базе PHP. Перевел существующую
платформу с Laravel на современную архитектуру React/Redux и Node.
</p>
<p>
- Проектировал и разрабатывал компоненты пользовательского интерфейса с использованием HTML, CSS и JavaScript. -
Повысил скорость загрузки веб-сайта и время безотказной работы за счете переписывания всех основных компонентов
и внедрения новой архетиктуры. - Разработал персональное APIs.
</p>
</div>
);
};
export default SectionTwo;