diff --git a/src/App.js b/src/App.js index 30828feb..25f0d0d2 100644 --- a/src/App.js +++ b/src/App.js @@ -11,6 +11,7 @@ const HomePage = lazy(() => import('./pages/HomePage')); const CandidatePage = lazy(() => import('./pages/CandidatePage')); const CalendarPage = lazy(() => import('./pages/CalendarPage')); const ReportPage = lazy(() => import('./pages/ReportFormPage.js')); +const FormPage = lazy(() => import('./pages/FormPage.js')); const App = () => { const isAuth = useSelector(selectAuth); @@ -35,6 +36,9 @@ const App = () => { + + + diff --git a/src/components/Auth/AuthForDevelopers.module.css b/src/components/Auth/AuthForDevelopers.module.css index e581f316..63d34e32 100644 --- a/src/components/Auth/AuthForDevelopers.module.css +++ b/src/components/Auth/AuthForDevelopers.module.css @@ -269,10 +269,6 @@ text-transform: uppercase; } -/* .specialists { - margin-left: 26px; -} */ - .info__list { list-style: none; margin-top: 110px; diff --git a/src/components/Candidate/Candidate.js b/src/components/Candidate/Candidate.js index 017a5578..0b63eb1b 100644 --- a/src/components/Candidate/Candidate.js +++ b/src/components/Candidate/Candidate.js @@ -8,6 +8,140 @@ import rectangle from '../../images/rectangle_secondPage.png'; import Sidebar from '../Sidebar/Sidebar'; import SectionSkills from './SectionSkills'; +// const Candidate = () => { +// const history = useHistory(); +// const { id: candidateId } = useParams(); + +// const dispatch = useDispatch(); + +// const candidatesArr = useSelector(selectCandidates); +// dispatch(currentCandidate(candidatesArr.find((el) => Number(el.id) === Number(candidateId)))); +// const currentCandidateObj = useSelector(selectCurrentCandidate); + +// console.log('currentCandidateObj ', currentCandidateObj); + +// const { name, skillsName, img, skills, text } = currentCandidateObj; + +// let classes; + +// if (skillsName === 'Backend') { +// classes = style.back; +// console.log(classes); +// } else if (skillsName === 'Design') { +// classes = style.des; +// } else if (skillsName === 'Frontend') { +// classes = style.front; +// } + +// return ( +//
+//
+//
+//
+//
+//

+// Аутстаффинг it-персонала +//

+//
+//
+//
+ +//
+//
+//
+//
history.push('/')}> +//
+// +//
+//
+// Вернуться к списку +//
+//
+ +//
+//

{skillsName}

+// +//
+//
+//
+//
+//
+//
+//
+// +//
+//
+//
+//

{name}

+// +//

# Описание опыта

+//
+//

SVM - сервис выездных менеджеров для банка ПСБ

+//

+// Приложение, которое позволяет управлять работой т.н. выездных менеджеров (ВМ). Банк предоставляет их +// услуги своим (потенциальным или реальным) клиентам, позволяя подключать расчетно-кассовое +// обслуживание или регистрировать свой бизнес. Клиенту не нужно приходить в отделение/офис банка - все +// необходимые бумаги ВМ подготовит заранее и принесет на согласование и подпись в удобное ему (клиент) +// время и место. +//

+//

Senior PHP/JS Developer

+//
+//

# Средства и инструменты:

+//
+//

+// - Разработал и внедрил веб приложения, а также программное обеспечение с использованием Node.js, +// MySQL, JavaScript, HTML, CSS, React.js и Vue.JS. - Поддерживал существующий веб-сайт на базе PHP. +// Перевел существующую платформу с Laravel на современную архитектуру React/Redux и Node. +//

+//

+// - Проектировал и разрабатывал компоненты пользовательского интерфейса с использованием HTML, CSS и +// JavaScript. - Повысил скорость загрузки веб-сайта и время безотказной работы за счете переписывания +// всех основных компонентов и внедрения новой архетиктуры. - Разработал персональное APIs. +//

+//
+//

# Описание опыта

+//
+//

Multitur - личный кабинет для сервиса поиска/подбора отелей

+//

+// Личный кабинет для сотрудников отелей, который позволяет управлять информацией по отелю на сайте. +//

+//

Senior PHP/JS Developer

+//
+//
+//

# Средства и инструменты:

+//

Backend - REST API на PHP 7.1 с использованием фреймворка Laravel 5.8

+//

Frontend - Vue.js

+//

БД - MYSQL

+//
+//

# Функционал:

+// <> +//
+//

Регистрации/авторизации;

+//

Управления правами менеджеров отеля, назначение поставщиков

+//

Управления описанием и профилем отелей;

+//

Управления финансами, ценообразованием, квотами;

+//

Переписки со своими менеджерами, а также с вышестоящими инстанциями;

+//

Управления новостями отеля;

+//

Просмотра расширенной статистики по заявкам и людям;

+//
+// +// +// +//
+//
+//
+//
+//
+//
+// ); +// }; + +// export default Candidate; + +////////////////////////////////////////////////// + const Candidate = () => { const history = useHistory(); const { id: candidateId } = useParams(); @@ -18,7 +152,9 @@ const Candidate = () => { dispatch(currentCandidate(candidatesArr.find((el) => Number(el.id) === Number(candidateId)))); const currentCandidateObj = useSelector(selectCurrentCandidate); - const { name, skillsName, img, skills } = currentCandidateObj; + console.log('currentCandidateObj ', currentCandidateObj); + + const { name, skillsName, img, skills, text } = currentCandidateObj; let classes; @@ -31,6 +167,10 @@ const Candidate = () => { classes = style.front; } + function createMarkup(text) { + return { __html: text.split('

').join('

') }; + } + return (
@@ -73,59 +213,14 @@ const Candidate = () => {

{name}

# Описание опыта

-
-

SVM - сервис выездных менеджеров для банка ПСБ

-

- Приложение, которое позволяет управлять работой т.н. выездных менеджеров (ВМ). Банк предоставляет их - услуги своим (потенциальным или реальным) клиентам, позволяя подключать расчетно-кассовое - обслуживание или регистрировать свой бизнес. Клиенту не нужно приходить в отделение/офис банка - все - необходимые бумаги ВМ подготовит заранее и принесет на согласование и подпись в удобное ему (клиент) - время и место. -

-

Senior PHP/JS Developer

-
-

# Средства и инструменты:

-
-

- - Разработал и внедрил веб приложения, а также программное обеспечение с использованием Node.js, - MySQL, JavaScript, HTML, CSS, React.js и Vue.JS. - Поддерживал существующий веб-сайт на базе PHP. - Перевел существующую платформу с Laravel на современную архитектуру React/Redux и Node. -

-

- - Проектировал и разрабатывал компоненты пользовательского интерфейса с использованием HTML, CSS и - JavaScript. - Повысил скорость загрузки веб-сайта и время безотказной работы за счете переписывания - всех основных компонентов и внедрения новой архетиктуры. - Разработал персональное APIs. -

-
-

# Описание опыта

-
-

Multitur - личный кабинет для сервиса поиска/подбора отелей

-

- Личный кабинет для сотрудников отелей, который позволяет управлять информацией по отелю на сайте. -

-

Senior PHP/JS Developer

-
-
-

# Средства и инструменты:

-

Backend - REST API на PHP 7.1 с использованием фреймворка Laravel 5.8

-

Frontend - Vue.js

-

БД - MYSQL

-
-

# Функционал:

- <> -
-

Регистрации/авторизации;

-

Управления правами менеджеров отеля, назначение поставщиков

-

Управления описанием и профилем отелей;

-

Управления финансами, ценообразованием, квотами;

-

Переписки со своими менеджерами, а также с вышестоящими инстанциями;

-

Управления новостями отеля;

-

Просмотра расширенной статистики по заявкам и людям;

-
- - + {text ? ( +
+ ) : ( +

Описание отсутствует...

+ )} +
diff --git a/src/components/Candidate/Candidate.module.css b/src/components/Candidate/Candidate.module.css index 5d394fc6..dca9e629 100644 --- a/src/components/Candidate/Candidate.module.css +++ b/src/components/Candidate/Candidate.module.css @@ -340,3 +340,23 @@ text-align: left; margin-left: 20px; } + +.candidate__text > p { + font-family: 'GT Eesti Pro Display'; + font-size: 1.6em; + font-weight: 100; + font-style: normal; + letter-spacing: normal; + text-align: left; +} + +.candidate__textSecondary { + font-family: 'GT Eesti Pro Display'; + font-size: 1.6em; + font-weight: 100; + font-style: normal; + letter-spacing: normal; + line-height: 24px; + text-align: left; + line-height: 28px; +} diff --git a/src/components/Description/Description.js b/src/components/Description/Description.js index 1ac0ee01..508a8125 100644 --- a/src/components/Description/Description.js +++ b/src/components/Description/Description.js @@ -1,17 +1,84 @@ -import React, { useState } from 'react'; +import React from 'react'; import style from './Description.module.css'; import dog from '../../images/dog.jpg'; import rectangle from '../../images/rectangle_secondPage.png'; import { Link } from 'react-router-dom'; import { LEVELS } from '../constants/constants'; +import { selectProfiles, selectFilteredCandidates } from '../../redux/outstaffingSlice'; +import { useSelector } from 'react-redux'; -const Description = ({ candidatesListArr, onLoadMore }) => { - const [text, setText] = useState([]); +// const Description = ({ candidatesListArr, onLoadMore }) => { +// function createMarkup(text) { +// return { __html: text.split('

').slice(0, 3).join('') }; +// } + +// return ( +//
+//
+//
+// {candidatesListArr.map((el) => ( +//
+//
+// +//
+//
+//

+// {el.skillsName} разработчик, {LEVELS[el.level]} +//

+ +// {el.text ? ( +//
+// ) : ( +//

Описание отсутствует...

+// )} +//
+//
+// +// +// +//
+//
+//
+// {el.skills.map((e) => ( +// +// {e.skill.name} +// +// ))} +// +//
+//
+//
+// ))} +//
+ +//
+//
+//
+//
+// +//
+//
+//
+//
+//
+//
+// ); +// }; + +// export default Description; + +const Description = ({ onLoadMore }) => { + const candidatesListArr = useSelector(selectProfiles); + const filteredListArr = useSelector(selectFilteredCandidates); + + function createMarkup(text) { + return { __html: text.split('

').slice(0, 3).join('') }; + } return (
-
+ {/*
{candidatesListArr.map((el) => (
@@ -19,17 +86,11 @@ const Description = ({ candidatesListArr, onLoadMore }) => {

- {el.skillsName} разработчик, {LEVELS[el.level]} + {el.fio} разработчик, {LEVELS[el.level]}

- {text.length > 0 ? ( - <> -

- - 10 лет пишу приложения под IOS, отлично владею Objective-C и Swift. -

-

- 5 лет руковожу командами мобильной разработки.

-

- 3 года преподаю в IOS-школе Сбера

- + {el.vc_text ? ( +
) : (

Описание отсутствует...

)} @@ -41,7 +102,7 @@ const Description = ({ candidatesListArr, onLoadMore }) => {
- {el.skills.map((e) => ( + {el.skillValues.map((e) => ( {e.skill.name} @@ -51,6 +112,76 @@ const Description = ({ candidatesListArr, onLoadMore }) => {
))} +
*/} + +
+ {filteredListArr && filteredListArr.length > 0 + ? filteredListArr.map((el) => ( +
+
+ +
+
+

+ {el.fio} разработчик, {LEVELS[el.level]} +

+ + {el.vc_text ? ( +
+ ) : ( +

Описание отсутствует...

+ )} +
+
+ + + +
+
+
+ {el.skillValues.map((e) => ( + + {e.skill.name} + + ))} + +
+
+
+ )) + : candidatesListArr.map((el) => ( +
+
+ +
+
+

+ {el.fio} разработчик, {LEVELS[el.level]} +

+ + {el.vc_text ? ( +
+ ) : ( +

Описание отсутствует...

+ )} +
+
+ + + +
+
+
+ {el.skillValues.map((e) => ( + + {e.skill.name} + + ))} + +
+
+
+ ))}
@@ -59,15 +190,6 @@ const Description = ({ candidatesListArr, onLoadMore }) => {
- {/*
-
- -
- 1 / 15 -
- -
-
*/}
diff --git a/src/components/Description/Description.module.css b/src/components/Description/Description.module.css index ebc9943c..f3f131ad 100644 --- a/src/components/Description/Description.module.css +++ b/src/components/Description/Description.module.css @@ -73,9 +73,9 @@ } } -.description__text { +.description__text > p { font-family: 'GT Eesti Pro Display'; - font-size: 1.7em; + font-size: 1.6em; font-weight: 100; font-style: normal; letter-spacing: normal; @@ -84,6 +84,10 @@ line-height: 28px; } +.description__text > p:first-child { + font-size: 1.8em; +} + .description__textSecondary { font-family: 'GT Eesti Pro Display'; font-size: 1.7em; @@ -148,7 +152,6 @@ } .description__sp { - /* display: block; */ font-family: 'GT Eesti Pro Display'; font-size: 1.7em; font-weight: 400; @@ -225,34 +228,3 @@ text-align: center; margin: 0 10px; } -.arrow__left { - position: relative; - width: 30px; - height: 30px; - border-radius: 20px; - background-color: #f6f6f6; - cursor: pointer; -} - -.arrow__left > img { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.arrow__right { - position: relative; - width: 30px; - height: 30px; - border-radius: 20px; - background-color: #74be4d; - cursor: pointer; -} - -.arrow__right > img { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js new file mode 100644 index 00000000..afd3337f --- /dev/null +++ b/src/components/Form/Form.js @@ -0,0 +1,69 @@ +import React, { useState } from 'react'; +import style from './Form.module.css'; +import { fetchForm } from '../../server/server'; + +const Form = () => { + const [email, setEmail] = useState(''); + const [phone, setPhone] = useState(''); + const [comment, setСomment] = useState(''); + + const handleChange = (e) => { + const name = e.target.name; + const value = e.target.value; + + if (name === 'Email') { + setEmail(value); + } else if (name === 'Phone') { + setPhone(value); + } else if (name === 'Comment') { + setСomment(value); + } else { + return; + } + }; + + const handleSubmit = (e) => { + e.preventDefault(); + + const info = { + email: email, + phone: phone, + comment: comment, + }; + + fetchForm('https://guild.craft-group.xyz/api/profile/add-to-interview', info).then((el) => + el.json().then((e) => console.log('object ', e)) + ); + }; + + return ( +
+
+
+
+ + + + + + + + + +
+
+
+
+ ); +}; + +export default Form; diff --git a/src/components/Form/Form.module.css b/src/components/Form/Form.module.css new file mode 100644 index 00000000..0ae1b2a4 --- /dev/null +++ b/src/components/Form/Form.module.css @@ -0,0 +1,84 @@ +.form { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 180px; +} + +.form > label { + color: #48802d; + font-family: 'GT Eesti Pro Display'; + font-size: 2.4em; + font-weight: 500; + font-style: normal; + letter-spacing: normal; + line-height: 16.81px; + text-align: left; + margin-bottom: 20px; + margin-left: 45px; +} + +.form > input { + max-width: 366px; + height: 75px; + box-shadow: 0 0 59px rgba(44, 44, 44, 0.05); + border-radius: 37px; + border: 1px solid #c4c4c4; + background-color: #ffffff; + margin-bottom: 60px; + color: #a6a6a6; + font-family: 'GT Eesti Pro Display'; + font-size: 2.2em; + font-weight: 300; + font-style: normal; + letter-spacing: normal; + line-height: normal; + text-align: left; + padding-left: 45px; + outline: none; +} + +.form > textarea { + max-width: 366px; + height: 75px; + margin-bottom: 40px; + box-shadow: 0 0 59px rgba(44, 44, 44, 0.05); + border-radius: 37px; + border: 1px solid #c4c4c4; + background-color: #ffffff; + margin-bottom: 60px; + color: #a6a6a6; + font-family: 'GT Eesti Pro Display'; + font-size: 1.2em; + font-weight: 300; + font-style: normal; + letter-spacing: normal; + line-height: normal; + text-align: left; + padding-left: 25px; + padding-top: 25px; + outline: none; +} + +.form__btn { + width: 288px; + height: 75px; + box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21); + border-radius: 38px; + 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% + ); + border: none; + color: #ffffff; + font-family: 'Muller'; + font-size: 2.2em; + letter-spacing: normal; + line-height: 71.88px; + text-align: center; +} diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js index a210ea6a..7a3c3c4c 100644 --- a/src/components/Home/Home.js +++ b/src/components/Home/Home.js @@ -6,7 +6,8 @@ import { fetchProfile, fetchSkills } from '../../server/server'; import front from '../../images/front_end.png'; import back from '../../images/back_end.png'; import design from '../../images/design.png'; -import { profiles, selectProfiles, tags, candidates, selectCandidates, selectTab } from '../../redux/outstaffingSlice'; +// import { profiles, selectProfiles, tags, candidates, selectCandidates, selectTab } from '../../redux/outstaffingSlice'; +import { profiles, selectProfiles, tags, candidates } from '../../redux/outstaffingSlice'; const Home = () => { const [index, setIndex] = useState(2); @@ -14,9 +15,9 @@ const Home = () => { const dispatch = useDispatch(); const profilesArr = useSelector(selectProfiles); - const candidatesArr = useSelector(selectCandidates); + // const candidatesArr = useSelector(selectCandidates); - const selectedTab = useSelector(selectTab); + // const selectedTab = useSelector(selectTab); useEffect(() => { fetchProfile(`https://guild.craft-group.xyz/api/profile?limit=`, index) @@ -61,6 +62,7 @@ const Home = () => { name: profile.fio, skills: profile.skillValues, level: profile.level, + text: profile.vc_text, skillsName, header, img, @@ -77,12 +79,13 @@ const Home = () => { return ( <> - item.skillsName === selectedTab) : candidatesArr } onLoadMore={loadMore} - /> + /> */} + ); }; diff --git a/src/components/Outstaffing/Outstaffing.js b/src/components/Outstaffing/Outstaffing.js index 675838e7..df64608e 100644 --- a/src/components/Outstaffing/Outstaffing.js +++ b/src/components/Outstaffing/Outstaffing.js @@ -52,7 +52,7 @@ const Outstaffing = () => { dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_design')} selected={selected === 'Marketer'} img={design} - header="Маркетинг" + header="Дизайн" />
diff --git a/src/components/Outstaffing/OutstaffingBlock.js b/src/components/Outstaffing/OutstaffingBlock.js index 1a8088b7..13514562 100644 --- a/src/components/Outstaffing/OutstaffingBlock.js +++ b/src/components/Outstaffing/OutstaffingBlock.js @@ -10,9 +10,9 @@ const OutstaffingBlock = ({ dataTags = [], data = {}, selected, img, header }) = const { skillsName } = data; - const handleBlockClick = (item) => { + const handleBlockClick = (item, id) => { if (!itemsArr.find((el) => item === el.value)) { - dispatch(selectedItems([...itemsArr, { value: item, label: item }])); + dispatch(selectedItems([...itemsArr, { id, value: item, label: item }])); } }; @@ -42,7 +42,7 @@ const OutstaffingBlock = ({ dataTags = [], data = {}, selected, img, header }) = {dataTags && (