search

ncherneh / homepage

My first personal website. Basically this is just a résumé.
https://ncherneh.github.io/homepage/
MIT License
0 stars 0 forks source link

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

Closed ncherneh closed 11 months ago

ncherneh commented 11 months ago

Level 5

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

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

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

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

* {
  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__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;
}
.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);
}

3. Приєднай стилі додавши наступний рядок всередину секції.

<link rel="stylesheet" href="styles.css" />

Також додай даний мета тег в <head></head> секцію для responsive design.

<meta name="viewport" content="width=device-width, initial-scale=1" />

4. Як закінчиш ― закоміть свої зміни, запуш гілку, створи новий pull request і змердж в develop

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

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

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

Одним зі способів є встановити http-server npm install --global http-server і потім заранити http-server -c-1 в робочій папці.

<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.

<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.

<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>
<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>
<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>
<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 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>

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

Ми дуже любимо Булку, але ми б також хотіли познайомитися з тобою ближче. Тож, будь ласка, створи власне резюме — і отримай додаткові бали 😉

3. Перевір свій HTML та CSS на валідність. Можеш скористатися HTML validator або CSS validator для цього.

4. Відкрий pull request і змердж develop в main гілку.

Будь ласка, не забудьте об’єднати останні зміни в main гілку — ми перевірятимемо лише її.

5. 💥 Boom, done! That’s it! You are awesome!

Надішліть нам посилання на ваш репозиторій GitHub і подивіться нижче, як буде оцінено завдання. Зверніть увагу, що у вас є лише 3 спроби запустити автоматичні тести — тому використовуйте це з розумом 😉

ncherneh commented 11 months ago

Мета

Розробити та допрацювати темплейт резюме, використовуючи навички веб-розробки, управління версіями через Git та роботу з гілками

План виконання

Примітка для мене

ncherneh commented 11 months ago

Практика

Head

Body