Додай темплейт резюме

Head

Створи нову гілку feature/head (на основі develop гілки).

Розділяючи свою роботу на багато гілок, можна швидко і вправно виправляти баги на сервері, мати окремо стабільну версію (release), яка готова до релізу (шляхом злиття в main), а також ще версію, в якій ведеться основна розробка (develop). А в одній єдиній гілці так не вийде. Мерджіть свої гілки pull request-ами, бо так треба. І потім, так можна частково зняти з себе відповідальність, адже той, хто approve-нув поганий код, допустив не меншу помилку, аніж той, хто його написав 😁

Створи styles.css файл в кореневій папці проекту і встав туди наступні стилі:

General styles

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;

    --primary-text-color: #181820;
    --secondary-text-color: #5c5c62;
    --durability-text-color: #6a737d9c;
    --icon-color: #6a737d;
    --border-color: #ff9a0045;
    --text-decoration-color: #ff9a00;
}

.container {
    margin: 0 auto;
    padding: 0 30px;
    max-width: 900px;
}

.fh {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.fv {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.resume {
    margin: 50px auto;
    border: 1px solid #f5f5f5;
    box-shadow: 1px 1px 7px 7px #f5f5f5;
    padding: 30px 0;
    max-width: 900px;
}

.resume__block {
    border-bottom: 3px solid var(--border-color);
    padding-bottom: 30px;
    margin-bottom: 15px;
}

@media screen and (max-width: 576px) {

    .main-info,
    .contact_info_container {
        flex-direction: column;
    }

    .contact_info_container {
        align-items: center;
    }

    .contact-info__block:not(:last-child) {
        margin-bottom: 20px;
    }

    .experiences {
        margin-right: 0;
    }
}

Contact info styles

  .contact-info__header,
  .contact-info__sub-header {
      text-align: center;
  }

  .contact-info__header {
      color: var(--primary-text-color);
      margin-bottom: 15px;
      text-decoration-color: var(--text-decoration-color);
      text-decoration-line: underline;
  }

  .contact-info__sub-header {
      color: var(--secondary-text-color);
      margin-bottom: 30px;
  }

  .contact-info__block {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }

  .contact-info__block--center {
      justify-content: center;
  }

  .contact-info__item {
      color: var(--secondary-text-color);
      text-decoration: none;
      display: flex;
      justify-content: start;
  }

  .contact-info__item:not(:last-child) {
      margin-bottom: 20px;
  }

  .contact-info__item-icon-wrapper {
      margin-right: 10px;
      width: 20px;
      display: flex;
      justify-content: center;
  }

  .contact-info__item-icon path {
      fill: var(--icon-color);
  }

  .contact-info__item-icon {
      height: 1.1428rem;
      vertical-align: text-bottom;
  }

  .contact-info__avatar {
      border-radius: 50%;
      width: 100px;
      height: 100px;
      object-fit: cover;
      border: 3px solid;
      border-color: var(--text-decoration-color);
  }

Intro and skills styles

.intro {
    display: flex;
    justify-content: start;
}

.intro__icon-wrapper {
    margin-right: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
}

.intro__icon {
    height: 1.1428rem;
    vertical-align: text-bottom;
}

.intro__icon path {
    fill: var(--text-decoration-color);
}

.intro_text {
    color: var(--secondary-text-color);
    text-align: justify;
}

.skills__header {
    color: var(--secondary-text-color);
    text-align: center;
    margin-bottom: 15px;
}

.skills__text {
    color: var(--secondary-text-color);
    text-align: justify;
}

Experience and additonal info styles

.experiences {
    flex: 1 1 60%;
    margin-right: 50px;
}

.experiences__header {
    color: var(--secondary-text-color);
    text-align: left;
    margin-bottom: 20px;
}

.experiences__company-header-durability {
    color: var(--durability-text-color);
    text-align: left;
    margin-bottom: 10px;
    font-size: 15px;
}

.experiences__company-header-name {
    color: var(--primary-text-color);
    text-decoration-color: var(--text-decoration-color);
    text-decoration-line: underline;
    text-align: left;
    margin-bottom: 20px;
}

.experiences__company-project {
    margin-left: 15px;
    margin-bottom: 25px;
}

.experiences__company-project-role {
    color: var(--durability-text-color);
    text-align: left;
    margin-bottom: 10px;
    font-size: 15px;
}

.experiences__company-project-name {
    color: var(--primary-text-color);
    text-align: left;
    margin-bottom: 10px;
}

.experiences__company-project-responsibilities {
    color: var(--secondary-text-color);
    padding-left: 20px;
}

.additional-info {
    flex: 1 1 40%;
}

.additional-info__education {
    margin-bottom: 20px;
}

.additional-info__education-header {
    color: var(--secondary-text-color);
    text-align: left;
    margin-bottom: 20px;
}

.additional-info__education-university-durability {
    color: var(--durability-text-color);
    text-align: left;
    margin-bottom: 10px;
    font-size: 15px;
}

.additional-info__education-university-speciality {
    color: var(--primary-text-color);
    text-align: left;
    margin-bottom: 10px;
}

.additional-info__education-university-name {
    color: var(--secondary-text-color);
}

.additional-info__languages {
    margin-bottom: 20px;
}

.additional-info__languages-header {
    color: var(--secondary-text-color);
    text-align: left;
    margin-bottom: 20px;
}

.additional-info__languages-item {
    color: var(--secondary-text-color);
}

Приєднай стилі додавши наступний рядок всередину <head></head> секції.
```
 <link rel="stylesheet" href="styles.css">
```
Також додай даний мета тег в <head></head> секцію для responsive design.
```
<meta name="viewport" content="width=device-width, initial-scale=1" />
```
Як закінчиш ― закоміть свої зміни, запуш гілку, створи новий pull request і змердж в develop

Якщо гілку не пушнути нагору, а змерджити локально через git merge, то віддалений сервер не буде нічого знати про існування гілки, відтак і не покаже її у Insights → Network

Body

Перейди на develop гілку і виконай pull змін git pull.

Створи нову гілку feature/body (на основі develop), запуш на ремоут репозиторій - git push -u origin feature/body, і використовуй її для редагування основного контенту:

Відкрий прев'ю index.html в браузері
Одним зі способів є встановити http-server npm install --global http-server і потім заранити http-server -c-1 в робочій папці.
Створи patch/content/primary гілку (на основі feature/body) гілки.

Додай основний контент (e.g. avatar, name, job, contacts, intro, etc.) here. Коміть невеликі зміни, додавай змістовні повідомлення.

Primary content template

<main>
  <div class="resume">
    <div class="container">
      <div class="resume__block">
        <h1 class="contact-info__header">Bulka</h1>
        <h3 class="contact-info__sub-header">Senior Hooman Manager</h3>

        <div class="contact_info_container fh">
          <div class="contact-info__block"></div>

          <div class="contact-info__block contact-info__block--center">
            <img class="contact-info__avatar" src="assets/avatar.png" alt="Avatar">
          </div>

          <div class="contact-info__block"></div>
        </div>
      </div>
    </div>
  </div>
</main>

Create assets folder and put here any Bulka's image from his Instagram. Use it as a src= for avatar.

Contact info items example (should be place inside the contact-info__block)

<a href="" rel="author" class="contact-info__item">
  <div class="contact-info__item-icon-wrapper">
    <svg class="contact-info__item-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
      <path
        d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z">
      </path>
    </svg>
  </div>
  <span>Lviv, Ukraine</span>
</a>

<a href="https://ua.linkedin.com/company/binary-studio_241166" rel="author" class="contact-info__item">
  <div class="contact-info__item-icon-wrapper">
    <svg class="contact-info__item-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
      <path
        d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z">
      </path>
    </svg>
  </div>
  <span>binary-studio</span>
</a>

You may take SVG icons from fontawesome.

Intro block (should be put below the previous container)

<div class="container">
  <div class="resume__block">
    <div class="intro">
      <div class="intro__icon-wrapper">
        <svg class="intro__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path
            d="M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z">
          </path>
        </svg>
      </div>
      <p class="intro_text">Meow.
        I am a Binary Studio cat. Still got 7 lives. Work in IT, Full Stack Evil, 
        all I do is sleep and try to help out hoomans with their projects whenever 
        they need me.
      </p>
    </div>
  </div>
</div>

Змердж гілку patch/content/primary в feature/body використовуючи пул-реквест
Повернись до feature/body гілки, завантаж зміни за допомогою git pull.
Створи patch/content/secondary гілку (на основі feature/body) гілки.

Додай додатковий контент (e.g. languages, skills, character, etc.). Коміть невеликі зміни, додавай змістовні повідомлення.

Skills block

<div class="container">
  <div class="resume__block">
    <div class="skills">
      <h3 class="skills__header">Skills</h3>
      <p class="skills__text">Sleep, eat, more sleep, meow, mrrr, purr. </p>
    </div>
  </div>
</div>

Experience block template

<div class="container">
  <div class="resume__block">
    <div class="main-info fh">

      <div class="experiences"></div>

      <div class="additional-info fv"></div>
    </div>
  </div>
</div>

Experiences

<div class="experiences">
  <h3 class="experiences__header">Experience</h3>
  <div class="experiences__company">
    <div class="experiences__company-header">
      <span class="experiences__company-header-durability">For whole my life</span>
      <h3 class="experiences__company-header-name">BinaryStudio</h3>
    </div>

    <div class="experiences__company-project">
      <span class="experiences__company-project-role">Binary Studio Cat</span>
      <h3 class="experiences__company-project-name">Hooman project</h3>
      <ul class="experiences__company-project-responsibilities">
        <li>Supported hoomans</li>
        <li>Slept all the time</li>
        <li>Lied on the keyboard</li>
        <li>Watched my hoomans working</li>
      </ul>
    </div>
  </div>
</div>

Additional info

<div class="additional-info fv">
  <div class="additional-info__education">
    <h3 class="additional-info__education-header">Education</h3>
    <div class="additional-info__education-university">
      <span class="additional-info__education-university-durability">2021</span>
      <h3 class="additional-info__education-university-speciality">Cat track</h3>
      <p class="additional-info__education-university-name">Binary Studio Academy</p>
    </div>
  </div>

  <div class="additional-info__languages">
    <h3 class="additional-info__languages-header">Languages</h3>
    <p class="additional-info__languages-item">
      Meow dialect
    </p>
    <p class="additional-info__languages-item">
      Ukrainian (understand)
    </p>
    <p class="additional-info__languages-item">
      English (don't understand)
    </p>
  </div>
</div>

Як попердній перегляд ви має бачити щось схоже на:

Попередній перегляд

Змердж гілку patch/content/secondary в feature/body використовуючи пул-реквест
Повернись до feature/body гілки, завантаж зміни за допомогою git pull.
Продовжуй далі та заповни резюме ВЛАСНОЮ інформацією - Сміливо додавай нові блоки, змінюй структуру, стилі. Пасхалки також вітаються 😉
Ми дуже любимо Булку, але ми б також хотіли познайомитися з тобою ближче. Тож, будь ласка, створи власне резюме – і отримай додаткові бали 😉
Змердж feature/body в develop використовуючи pull request

Перевір свій HTML та CSS на валідність. Можеш скористатися HTML validator або CSS validator для цього.
Відкрий pull request і змредж develop в main гілку.

yansnap / homepage

Додай темплейт резюме #3

Head

Body