diff --git a/README.md b/README.md index 8b13789..fae012e 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ - +https://jack13only.github.io/rsschool-cv/cv diff --git a/assets/img/cert-rss.png b/assets/img/cert-rss.png new file mode 100644 index 0000000..984de31 Binary files /dev/null and b/assets/img/cert-rss.png differ diff --git a/assets/img/lang-test.png b/assets/img/lang-test.png new file mode 100644 index 0000000..c6db848 Binary files /dev/null and b/assets/img/lang-test.png differ diff --git a/assets/img/nav-back.png b/assets/img/nav-back.png new file mode 100644 index 0000000..d9a80b9 Binary files /dev/null and b/assets/img/nav-back.png differ diff --git a/assets/img/photo.jpg b/assets/img/photo.jpg new file mode 100644 index 0000000..be0f4fa Binary files /dev/null and b/assets/img/photo.jpg differ diff --git a/assets/img/pr-js-clock.png b/assets/img/pr-js-clock.png new file mode 100644 index 0000000..982b955 Binary files /dev/null and b/assets/img/pr-js-clock.png differ diff --git a/assets/img/pr-museum.png b/assets/img/pr-museum.png new file mode 100644 index 0000000..19effd8 Binary files /dev/null and b/assets/img/pr-museum.png differ diff --git a/assets/img/pr-vertical-slider.png b/assets/img/pr-vertical-slider.png new file mode 100644 index 0000000..b550564 Binary files /dev/null and b/assets/img/pr-vertical-slider.png differ diff --git a/assets/img/pr-whack-a-rick.png b/assets/img/pr-whack-a-rick.png new file mode 100644 index 0000000..1cfad1c Binary files /dev/null and b/assets/img/pr-whack-a-rick.png differ diff --git a/assets/img/rs_school_js.svg b/assets/img/rs_school_js.svg new file mode 100644 index 0000000..3b80540 --- /dev/null +++ b/assets/img/rs_school_js.svg @@ -0,0 +1 @@ +rs_school_js \ No newline at end of file diff --git a/cv.md b/cv.md new file mode 100644 index 0000000..08ca1a6 --- /dev/null +++ b/cv.md @@ -0,0 +1,49 @@ +# Yauheni Shatau + +## Contacts + +* Phone: +375 25 9919565 +* Telegram: @jack13only +* E-mail: jack13only@gmail.com + +## About me + +My goal for the next year is to become a front-end developer. + +Open to new ideas, ready for self-study, have a desire to drastically change my life. Have various hobbies such as drone racing and growing super hot peppers. + +## Skills + +Studied javascript on my own at https://learn.javascript.ru/ + +## Code example +```javascript +let isSquare = function(n){ + if (n < 0) return false; + + let result = Math.sqrt(n) + + if (result == Math.trunc(result)) { + return true; + } + return false; +} +``` +## Education and Work Experience + +* **2007-2012** Belarusian National Technical University, Faculty of Instrumentation, Technical Security + +* **2012-2021** Belarusian State Medical University, it engineer + +## Languages + +* Russian +* Belorussian +* English (~A2) + + + + + + + diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..9789aef Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..0e2cc4f --- /dev/null +++ b/index.html @@ -0,0 +1,258 @@ + + + + + + + + CV Yauheni Shatau + + + + + + + + + + +
+
+
+ +
+
+

Yauheni Shatau

+

future frontend developer

+ + + +
+
+ + + +
+ +
+ +
+ +
+

About me

+
+ +
+ +

Hello!

+

I'm a beginning front-end developer.

+

My goal for the next year is to get a job as a junior developer.

+

I'm open to new ideas, ready for self-study, have a desire to drastically change my life.

+

I have various hobbies such as drone racing, fpv and growing super hot peppers.

+ + +
+ +
+

Education and Work Experience

+
+ +
+ + +
+ +
+

Skills in programming

+
+ +
+ + +
+ +
+

My projects

+
+ +
+ + +
+
+ +
whack-a-rick
+
+
+
Whack-A-Rick
+
Reaction speed game on the theme of Rick and Morty
+

DOM, LocalStorage, querySelector, setTimeout

+
+
+ + + +
+
+ +
js-clock
+
+
+
JS clock
+
Clock with dark theme and different time zones
+

DOM, Date, querySelector, setTimeout

+
+
+ + + +
+
+ +
vertical-slider
+
+
+
Vertical Slider
+
Endless slider
+

DOM, mouseMove, querySelector, append/prepend

+
+
+ + + +
+
+ +
museum
+
+
+
Museum
+
Site of the Louvre
+

HTML + CSS + JS, Figma

+
+
+ + +
+ +
+

Code example

+
+ +
+ +
function isIsogram(str) {
+  return new Set(str.toLowerCase()).size === str.length ? true : false
+}
+
+ +
+

Languages

+
+ +
+ + +
+ + +
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..e4f91d5 --- /dev/null +++ b/script.js @@ -0,0 +1,51 @@ +const menu = document.querySelector('.menu-start-item') +const oneLine = document.querySelector('.one-line') +const twoLine = document.querySelector('.two-line') +const threeLine = document.querySelector('.three-line') +const fourLine = document.querySelector('.four-line') +const menuList = document.querySelectorAll('.menu-item') + +let interval = 50 + +function makeCancel() { + oneLine.classList.toggle('right-hidden') + fourLine.classList.toggle('right-hidden') + twoLine.classList.toggle('left-plus') + threeLine.classList.toggle('right-plus') +} + +function getMenuList() { + menu.classList.toggle('open') + makeCancel() + menuList.forEach((item, index) => { + setTimeout(() => { + item.classList.toggle('hidden') + }, index * interval) + }) +} + +menu.addEventListener('click', getMenuList) + +menuList.forEach(item => { + item.addEventListener('click', getMenuList) +}) + + +console.log('> Score 160 / 160') +console.log('> ---------------------------') +console.log('> Вёрстка валидная +10') +console.log('> Вёрстка семантическая +20') +console.log(' -использованы теги: H1, H2, H3, H4, H5, H6, article, figure, figcaption, footer, header, main, nav, section') +console.log('> Для оформления СV используются css-стили +10') +console.log('> Контент горизонтально центрируется на странице. Фоновый цвет во всю ширину страницы +10') +console.log('> Вёрстка адаптивная до 320px +10') +console.log('> Есть адаптивное бургер-меню +10') +console.log('> Присутствуют изображения, пропрции не искажены, есть атрибут alt +10') +console.log('> Контакты для связи и перечень навыков оформлены в виде списка ul > li +10') +console.log('> CV содержит контакты для связи, краткую информацию о себе, перечень навыков, информацию об образовании и уровне английского +10') +console.log('> CV содержит пример кода с подсветкой +10') +console.log('> CV содержит изображения-ссылки на выполненные проекты с описанием +10.') +console.log('> CV выполнено на английском языке +10') +console.log('> Выполнены требования к Pull Request +10') +console.log('> Есть видеорезюме автора CV на английском языке +10') +console.log('> Дизайн, оформление, качество выполнения CV на хорошем уровне +10') diff --git a/style.css b/style.css new file mode 100644 index 0000000..c9d9ea1 --- /dev/null +++ b/style.css @@ -0,0 +1,663 @@ +html, body { + height: 100%; + width: 100%; + overflow-x: hidden; + scroll-behavior: smooth; + position: relative; + background-color: rgb(238, 238, 238); +} + +html { + font-size: 1px; +} + +body { + font-size: 16rem; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'Urbanist', sans-serif; +} + +.wrapper-back { + width: 100%; + height: 100%; + position: absolute; + z-index: 0; +} + +.back-one { + height: 405px; + background-color: rgb(63, 217, 255); +} + +.wrapper { + margin: 0 auto; + width: 900px; + position: relative; + z-index: 1; + display: grid; + padding-bottom: 30px; +} + +.main { + background-color: rgb(255, 255, 255); +} + +.main { + display: flex; + box-shadow: 0 0 5px rgba(0,0,0,0.5); +} + +.about-main, .edu-main, .skills-main, .projects-main, .code-main, .languages-main { + font-size: 21rem; + padding: 50px; + background-color: white; + box-shadow: 0 0 5px rgba(0,0,0,0.5); +} + +.main-desc { + display: inline-block; + padding: 20px; + flex-grow: 1; +} + +.main-photo { + width: 362px; + height: 343px; + flex-grow: 0; +} + +header { + font-size: 32rem; + padding: 50px 0 30px 0; + text-transform: uppercase; + color: white; + position: relative; +} + +h2 { + font-size: 1.5rem; +} + +.main-p { + padding-bottom: 20px; + border-bottom: 5px rgb(63, 217, 255) solid; +} + +.contacts { + padding: 20px; + margin-top: 40px; + list-style-type: none; + font-size: 21rem; +} + +.contacts > li { + font-weight: 600; + padding: 10px; +} + +.contacts > li > a { + font-weight: 400; + text-decoration: none; + color: black; + transition: 0.2s linear; +} + +.contacts > li > a:hover { + color: rgb(63, 217, 255) +} + +.about-header, .edu-header, .skills-header, .projects-header, .code-header, .languages-header { + font-size: 32rem; + padding: 50px 0; + text-transform: uppercase; + color: rgb(63, 217, 255); + text-align: center; +} + +iframe { + display: block; + margin: 0 auto; + margin-top: 30px; + align-items: center; + width: 800px; + height: 450px; + border: 0; +} + +.about-main > p, .edu-main > ul > li { + padding-top: 10px; + list-style-type: none; +} + +.skills-main > ul > li { + list-style-type: square; + padding-top: 15px; +} + +.edu-main > ul > li:last-child { + padding-top: 35px; +} + +.skills-main > ul > li > a, .skills-main > ul > li > p > a { + text-decoration: none; + color: black; +} + +.skills-main > ul { + margin-left: 20px; +} + +.about-main > p:first-child { + padding-top: 0; +} + +.date { + font-size: 22.5rem; +} + +.skills-tab { + padding-top: 10px; +} + +.skills-main > ul > li > p > a > img:hover { + box-shadow: 0 0 10px rgb(63, 217, 255); +} + +.skills-main > ul > li > a:hover, .skills-main > ul > li > p > a:hover { + text-shadow: 0 0 3px rgb(63, 217, 255); +} + +.skills-main > ul > li > p > a > img, .skills-main > ul > li > a, .skills-main > ul > li > p > a { + transition: 0.3s linear; +} + +.pr-wrapper { + display: flex; + padding: 10px 0; + color: black; + transition: 0.3s linear; +} + +.projects-main > a { + text-decoration: none; +} + +.pr-wrapper > div { + padding-left: 20px; +} + +figure { + display: flex; + flex-flow: column; +} + +.pr-1 { + width: 200px; + height: 113px; +} + +figcaption { + background-color: #222; + color: #fff; + font: italic smaller sans-serif; + padding: 3px; + text-align: center; +} + +.pr-wrapper:hover { + transform: scale(110%); + box-shadow: 0 0 10px rgb(63, 217, 255); + padding: 10px; + cursor: pointer; +} + +h5 { + padding-bottom: 15px; + font-size: 27rem; + color: rgb(63, 217, 255); + text-shadow: 0 0 2px black; +} + +h6 { + padding-bottom: 10px; + font-size: 21rem; + font-weight: 400; +} + +h3, h1 { + text-shadow: 0 0 2px black; +} + +h2 { + font-size: 30rem; +} + +.lang-list { + font-size: 24rem; + padding-left: 30px; +} + +.lang-list > li { + padding-top: 10px; + font-weight: 400; +} + +.lang-tested { + font-size: 13rem; + color: black; +} + +.lang-tested:hover { + cursor: pointer; +} + +footer { + padding: 50px 50px 10px 50px; + display: flex; + justify-content: space-between; +} + +.rs-school { + width: 100px; +} + +.right-footer { + line-height: 37px; +} + +.right-footer > p > a { + color: black; +} + +.burger { + transition: 0.3s ease-in-out; + position: absolute; + right: 30px; + top: 64px; + width: 100px; + height: 30px; + text-align: left; + z-index: 5; + font-size: 18rem; +} + +.menu-line { + display: flex; + justify-content: space-between; + padding-top: 20px; +} + +.menu-line-item { + font-size: 20rem; + text-align: center; +} + +.menu-line-item > a { + color: white; + text-align: center; + text-decoration: none; +} + +.menu-line-item:hover { + transition: 0.2s linear; + position: relative; + transform: scale(120%); + /* border: 1px solid black; */ +} + +.menu-item { + font-size: 15rem; + border-bottom: 3px white solid +} + +.menu-item:last-child { + border-bottom:none; +} + +.menu-box, .menu-line { + list-style: none; + cursor: pointer; +} + +.menu-box > li { + background: rgba(63, 217, 255, 1); + /* border: black 1px solid; */ + width: 130px; + height: 30px; + line-height: 30px; + z-index: 5; + padding-left: 10px; + /* margin-top: 3px; */ +} + +.menu-box > li > a { + text-decoration: none; + color: black; +} + +.hidden { + display: none; +} + +.menu-start-item { + text-align: center; + /* border: 1px white solid; */ + color: white; + font-weight: 700; +} + +.open { + color: white; +} + +.menu-start-item { + position: relative; + overflow:hidden +} + +.one-line, .two-line, .three-line, .four-line, .five-line { + width: 35px; + height: 4px; + position: absolute; + right: 0; + background-color: white; + border: 0; + transition: 0.3s ease-in-out; +} + +.one-line { + top: 0; +} + +.two-line, .three-line { + top: 44%; +} + +.four-line { + bottom: 0; +} + +.left-plus { + transform: rotate(765deg); +} + +.right-plus { + transform: rotate(-765deg); +} + +.right-hidden { + transform: translateX(-150px); +} + +.burger { + display: none; +} + +@media screen and (max-width: 1024px) { + + .non-burger { + display: none; + } + + .burger { + display: block; + } + + .wrapper { + width: 700px; + } + + iframe { + width: 600px; + height: 338px + } + + .contacts, .about-main, .edu-main, .skills-main, .projects-main, .code-main, .lang-list { + font-size: 18rem; + } + + .javascript { + font-size: 16rem; + } + + body { + font-size: 14rem; + } + + .contacts { + padding: 25px 0; + } + + .contacts > li { + padding: 10px 1px 10px 1px; + } + + .back-one { + height: 365px; + } + +} + +@media screen and (max-width: 768px) { + .main-photo { + width: 200px; + height: 190px; + } + + .contacts > li { + padding: 5px; + } + + .skills-img-cw { + width: 300px; + height: 30px; + } + + .wrapper { + width: 400px; + } + + iframe { + width: 380px; + height: 214px; + margin-top: 20px; + } + + .contacts { + margin-top: 10px; + } + + .main-desc { + padding: 10px; + } + + .languages-main, .about-main, .edu-main, .skills-main, .projects-main, .code-main { + font-size: 14rem; + padding: 10px; + } + + .lang-list { + font-size: 14rem; + padding: 5px 5px 5px 30px; + } + + .contacts { + font-size: 10rem; + padding: 10px; + } + + .about-header, .edu-header, .skills-header, .projects-header, .code-header, .languages-header { + font-size: 22rem; + padding: 10px 0; + } + + .javascript { + font-size: 12rem; + } + + body { + font-size: 12rem; + } + + .contacts { + padding: 15px 0; + } + + .date { + font-size: 16rem; + } + + .pr-1 { + height: 68px; + width: 120px; + } + + h6 { + font-size: 14rem; + padding-bottom: 5px + } + + h5 { + font-size: 18rem; + padding-bottom: 5px + } + + h2 { + font-size: 16rem; + } + + header { + font-size: 16rem; + padding: 10px 0; + } + + .pr-wrapper:hover { + transform: scale(101%); + box-shadow: 0 0 3px rgb(63, 217, 255); + } + + .back-one { + height: 160px; + } + + .lang-tested { + font-size: 10rem + } + + .burger { + right: 30px; + top: 17px; + } + +} + +@media screen and (max-width: 420px) { + .back-one { + height: 105px; + } + + body { + font-size: 10rem; + } + + .main-photo { + width: 120px; + height: 114px; + } + + .contacts { + font-size: 10rem; + padding: 1px; + } + + .languages-main, .about-main, .edu-main, .skills-main, .projects-main, .code-main { + font-size: 10rem; + padding: 1px; + } + + .wrapper { + width: 300px; + } + + iframe { + padding-bottom:2px; + margin-top: 10px; + width: 296px; + height: 167px + } + + .javascript { + font-size: 9rem; + } + + h6 { + font-size: 10rem; + padding-bottom: 1px + } + + h5 { + font-size: 14rem; + padding-bottom: 1px + } + + h2 { + font-size: 12rem; + } + + header { + font-size: 12rem; + padding: 2px 0; + } + + h3 { + font-size: 20rem; + } + + .skills-img-cw { + width: 200px; + height: 20px; + } + + .pr-wrapper > div{ + padding-left: 5px; + } + + .burger { + right: 1px; + top: 7px; + width: 90px; + } + + .burger, .menu-item { + font-size: 11rem; + } + + .menu-box > li, .menu-box { + width: 90px; + padding-left: 1px; + } + + .menu-item { + padding-left: 1px; + } + + .main-desc { + padding: 1px; + } + + .lang-list { + font-size: 9rem; + padding: 3px 1px 5px 20px; + } + + footer { + padding: 20px 20px 5px 20px; + } +} + +