jack13only · jack13only · Jul 19, 2021 · Jul 19, 2021 · Jul 19, 2021 · Jul 19, 2021
diff --git 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
diff --git a/assets/img/lang-test.png b/assets/img/lang-test.png
diff --git a/assets/img/nav-back.png b/assets/img/nav-back.png
diff --git a/assets/img/photo.jpg b/assets/img/photo.jpg
diff --git a/assets/img/pr-js-clock.png b/assets/img/pr-js-clock.png
diff --git a/assets/img/pr-museum.png b/assets/img/pr-museum.png
diff --git a/assets/img/pr-vertical-slider.png b/assets/img/pr-vertical-slider.png
diff --git a/assets/img/pr-whack-a-rick.png b/assets/img/pr-whack-a-rick.png
diff --git a/assets/img/rs_school_js.svg b/assets/img/rs_school_js.svg
diff --git a/cv.md 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
diff --git a/index.html b/index.html
@@ -0,0 +1,258 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="./style.css">
+  <title>CV Yauheni Shatau</title>
+  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/styles/default.min.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js"></script>
+  <script>hljs.initHighlightingOnLoad();</script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@100;400;700&display=swap" rel="stylesheet">
+</head>
+<body>
+
+  <div class="wrapper-back">
+    <div class="back-one"></div>
+  </div>
+
+  <div class="wrapper" id="contacts"> 
+    <header>
+      <h1>Yauheni Shatau</h1>
+      <h2>future frontend developer</h2>
+      <nav class="non-burger">
+        <ul class="menu-line">
+          <li class="menu-line-item"><a href="#contacts">Contacts</a></li>
+          <li class="menu-line-item"><a href="#about">About me</a></li>
+          <li class="menu-line-item"><a href="#edu">Education</a></li>
+          <li class="menu-line-item"><a href="#skills">Skills</a></li>
+          <li class="menu-line-item"><a href="#projects">My projects</a></li>
+          <li class="menu-line-item"><a href="#code">Code example</a></li>
+          <li class="menu-line-item"><a href="#languages">Languages</a></li>
+        </ul>  
+      </nav>
+
+      <nav class="burger">
+        <ul class="menu-box">
+          <li class="menu-start-item">
+            <hr class="one-line">
+            <hr class="two-line">
+            <hr class="three-line ">
+            <hr class="four-line">
+          </li>
+          <li class="menu-item hidden"><a href="#contacts">Contacts</a></li>
+          <li class="menu-item hidden"><a href="#about">About me</a></li>
+          <li class="menu-item hidden"><a href="#edu">Education</a></li>
+          <li class="menu-item hidden"><a href="#skills">Skills</a></li>
+          <li class="menu-item hidden"><a href="#projects">My projects</a></li>
+          <li class="menu-item hidden"><a href="#code">Code example</a></li>
+          <li class="menu-item hidden"><a href="#languages">Languages</a></li>
+        </ul>  
+      </nav>
+    </header>
+    <main class="main">
+
+      <img class="main-photo" src="./assets/img/photo.jpg" alt="">
+
+      <div class="main-desc">
+        <ul class="contacts">
+          <li>Phone: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="tel:+375259919565">+375 25 9919565</a></li>
+          <li>Telegram: &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://telegram.me/jack13only" target="_blank">@jack13only</a></li>
+          <li>E-mail: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:jack13only@gmail.com" target="_blank">jack13only@gmail.com</a></li>
+          <li>LinkedIn: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://www.linkedin.com/in/jack13only" target="_blank">Yauheni Shatau</a></li>
+        </ul>
+      </div>
+
+    </main>
+
+    <div class="about-header" id="about">
+      <h3>About me</h3>
+    </div>
+
+    <section class="about-main">
+      <h3 class="hidden">.</h3>
+      <p>Hello!</p>
+      <p>I'm a beginning front-end developer.</p>
+      <p>My goal for the next year is to get a job as a junior developer.</p>
+      <p>I'm open to new ideas, ready for self-study, have a desire to drastically change my life.</p>
+      <p>I have various hobbies such as drone racing, fpv and growing super hot peppers.</p>
+
+      <iframe 
+        src="https://www.youtube.com/embed/Ki2g0PZ_jnc" 
+        title="YouTube video player" 
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+        allowfullscreen>
+      </iframe>
+    </section>
+
+    <div class="edu-header" id="edu">
+      <h3>Education and Work Experience</h3>
+    </div>
+
+    <section class="edu-main">
+      <h3 class="hidden">.</h3>
+      <ul>
+        <li><h4 class="date">2007 - 2012</h4> <p>Belarusian National Technical University, Faculty of Instrumentation, Technical Security</p></li>
+        <li><h4 class="date">2021</h4> <p>RS School JS/FE stage 0</p></li>
+        <li><h4 class="date">2021 - until now</h4> <p>RS School JS/FE stage 1</p></li>
+        <li><h4 class="date">2011 - until now</h4> <p>Work in Belarusian State Medical University, IT engineer</p></li>
+      </ul> 
+    </section>
+
+    <div class="skills-header" id="skills">
+      <h3>Skills in programming</h3>
+    </div>
+
+    <section class="skills-main">
+      <h3 class="hidden">.</h3>
+      <ul>
+        <li>Studied javascript on my own on <a href="https://learn.javascript.ru/" target="_blank">learn.javascript.ru</a></li>
+        <li>
+          <p>Solve tasks on <a href="https://www.codewars.com/users/jack13only" target="_blank">www.codewars.com</a></p> 
+          <p class="skills-tab">
+            <a href="https://www.codewars.com/users/jack13only">
+              <img class="skills-img-cw" src="https://www.codewars.com/users/jack13only/badges/large" alt="codewars baidge">
+            </a>
+          </p>   
+        </li>
+        <li>
+          <p>Graduated from course RS School JS/FE Stage 0</p>
+          <p class="skills-tab">
+            <a href="https://app.rs.school/certificate/p0qcgt9e" target="_blank">
+              <img  class="skills-img-rss" src="./assets/img/cert-rss.png" alt="cert">
+            </a>
+          </p>
+        </li>
+      </ul>
+    </section> 
+
+    <div class="projects-header" id="projects">
+      <h3>My projects</h3>
+    </div>
+
+    <section class="projects-main">
+      <h3 class="hidden">.</h3>
+      <a 
+      href="https://rolling-scopes-school.github.io/jack13only-JSFEPRESCHOOL/whack-a-mole/"
+      target="_blank"
+      >
+        <div class="pr-wrapper">
+         <figure>
+            <img class="pr-1" src="./assets/img/pr-whack-a-rick.png" alt="">
+            <figcaption>whack-a-rick</figcaption>
+          </figure>  
+          <div>
+            <h5>Whack-A-Rick</h5>
+            <h6>Reaction speed game on the theme of Rick and Morty </h6>
+            <p>DOM, LocalStorage, querySelector, setTimeout</p>
+          </div>
+        </div>
+      </a>
+
+      <a 
+      href="https://rolling-scopes-school.github.io/jack13only-JSFEPRESCHOOL/js-clock/"
+      target="_blank"
+      >
+        <div class="pr-wrapper">
+         <figure>
+            <img class="pr-1" src="./assets/img/pr-js-clock.png" alt="">
+            <figcaption>js-clock</figcaption>
+          </figure>  
+          <div>
+            <h5>JS clock</h5>
+            <h6>Clock with dark theme and different time zones</h6>
+            <p>DOM, Date, querySelector, setTimeout</p>
+          </div>
+        </div>
+      </a>
+
+      <a 
+      href="https://rolling-scopes-school.github.io/jack13only-JSFEPRESCHOOL/vertical-slider/"
+      target="_blank"
+      >
+        <div class="pr-wrapper">
+         <figure>
+            <img class="pr-1" src="./assets/img/pr-vertical-slider.png" alt="">
+            <figcaption>vertical-slider</figcaption>
+          </figure>  
+          <div>
+            <h5>Vertical Slider</h5>
+            <h6>Endless slider</h6>
+            <p>DOM, mouseMove, querySelector, append/prepend</p>
+          </div>
+        </div>
+      </a>
+
+      <a 
+      href="https://rolling-scopes-school.github.io/jack13only-JSFEPRESCHOOL/museum/"
+      target="_blank"
+      >
+        <div class="pr-wrapper">
+         <figure>
+            <img class="pr-1" src="./assets/img/pr-museum.png" alt="">
+            <figcaption>museum</figcaption>
+          </figure>  
+          <div>
+            <h5>Museum</h5>
+            <h6>Site of the Louvre</h6>
+            <p>HTML + CSS + JS, Figma</p>
+          </div>
+        </div>
+      </a>
+
+    </section>   
+
+    <div class="code-header" id="code">
+      <h3>Code example</h3>
+    </div>
+
+    <article class="code-main">
+    <h3 class="hidden">.</h3>
+<pre><code class="javascript">function isIsogram(str) {
+  return new Set(str.toLowerCase()).size === str.length ? true : false
+}</code></pre>
+    </article>   
+
+    <div class="languages-header" id="languages">
+      <h3>Languages</h3>
+    </div>
+
+    <section class="languages-main">
+      <h3 class="hidden">.</h3>
+      <ul class="lang-list">
+        <li>Russian</li>
+        <li>Belarusian</li>
+        <li>English (A2) 
+          <a 
+          class="lang-tested" 
+          href="./assets/img/lang-test.png"
+          target="_blank">
+            *tested by epam
+          </a>
+        </li>
+      </ul>
+    </section> 
+
+    <footer>
+      <div class="left-footer">
+        <a href="https://rs.school/js/"> 
+           <img class="rs-school" 
+                src="./assets/img/rs_school_js.svg" 
+                alt="rs_school"></a>
+      </div>
+
+      <div class="right-footer">
+        <p>Creation date <time datetime="2021-09-18">18.09.21</time>
+           <a href="https://github.com/jack13only" target="_blank">GitHub</a> 
+        </p>
+      </div>
+    </footer>
+  </div>
+
+  <script src="./script.js"></script>
+</body>
+</html>
diff --git a/script.js 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')