GithubHelp home page GithubHelp logo

hustle2live / homepage Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 1.13 MB

My first personal website. Basically it is just a résumé.

Home Page: https://hustle2live.github.io/homepage/

License: MIT License

HTML 84.44% CSS 15.56%
binary-studio-academy css github-pages homepage html personal resume website

homepage's Introduction

homepage

My first personal website. Basically it is just a résumé.

homepage's People

Contributors

hustle2live avatar

Watchers

 avatar

homepage's Issues

create index.html template

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Résumé</title>
  </head>
  <body>
    ― Hello World! &#x1F609;
  </body>
</html>

Fill BODY section in index.html

  1. Перейди на develop гілку і виконай pull змін git pull.
  2. Створи нову гілку feature/body (на основі develop), запуш на ремоут
  • Відкрий прев’ю 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. Коміть невеликі зміни, додавай змістовні повідомлення.
  • Шаблон основного вмісту
<main>
  <div class="resume">
    <div class="container">
      <div class="resume__block">
        <h1 class="contact-info__header">John Doe</h1>
        <h3 class="contact-info__sub-header">Full-Stack Developer</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 first Pull Request to Index.html

Перейди за запропонованим посиланням і створіть pull request в main гілку.

Постав title “First release to production”,

визнач метаданні (assignees, labels, milestones, projects).
Потім змердж pull request.

Примітка: гілки не слід видаляти після об’єднання пул-реквесту.

fill additional BODY block

Створи patch/content/secondary гілку (на основі feature/body) гілки.

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

Блок навичок

<div class="container">
  <div class="resume__block">
    <div class="skills">
      <h3 class="skills__header">Skills</h3>
      <p class="skills__text">
        Problem solving, Continuous Learning, Team Collaboration
      </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"
      >2005-Present</span
    >
    <h3 class="experiences__company-header-name">Binary Studio</h3>
  </div>

  <div class="experiences__company-project">
    <span class="experiences__company-project-role"
      >Full-Stack Developer</span
    >
    <h3 class="experiences__company-project-name">Hooman project</h3>
    <ul class="experiences__company-project-responsibilities">
      <li>Backend Architecture</li>
      <li>Frontend Development</li>
      <li>API Integration</li>
      <li>Code Maintenance</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">
        Full-Stack Development
      </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">English</p>
    <p class="additional-info__languages-item">
      Ukrainian
    </p>
  </div>
</div>

Змердж гілку patch/content/secondary в feature/body використовуючи пул-реквест

Повернись до feature/body гілки, завантаж зміни за допомогою git pull.

Add index.html template to resume

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Résumé</title>
  </head>
  <body>
    ― Hello World! &#x1F609;
  </body>
</html>

Скласти блок контактної інформації

Посилання на соцмережі (Facebook чи Instagram, тощо), номер телефону чи адреса електронної скриньки, тощо. Може не всі лінки в світі, а тільки ті, що дійсно доречні.

GH-Pages setting-up

Перейди до Settings репозиторію і налаштуй GitHub Pages (з main гілки), онови опис репозиторію з коректним посиланням. Перейди за посиланням, щоб перевірити, чи все в порядку — ви повинні побачити вміст index.html.

Fill HEAD in index.html

Створи нову гілку feature/head (на основі develop гілки).
Створи styles.css файл в кореневій папці проекту і встав туди стилі:

Скласти таймлайн

Скласти список всіх (важливих) життєвих подій, визначних дат, досягнень, періодів, що дали приємний і неприємний досвід, тощо. В цьому конкретному випадку довгих списків не буває, натомість бувають погано згорнуті, тому пакуємо сюди все підряд, а про “лишні” події можна буде промовчати пізніше. Список повинен бути систематизованим і посортованим в такий спосіб, щоб читач швидко зрозумів “паттерн” і міг легко орієнтуватись в просторі і часі цього резюме.

fill resume with own information

Продовжуй далі та заповни резюме ВЛАСНОЮ інформацією — Сміливо додавай нові блоки, змінюй структуру, стилі. Пасхалки також вітаються 😉

Змердж feature/body в develop використовуючи pull request

Manage a HomePage project

Налаштувати Labels та Milestones
Додати таски
Перевірити публічність проектів

Скласти додаткові інформаційні блоки

Можна зробити резюме менш формальним, додавши додаткові блоки, які містять корисну інформацію, але подають її в “розважальній” формі.

Наприклад, що подобається і не подобається,
сильні і слабкі сторони,
перелік навиків чи хобі,
інфографіка або ж інтерактивні модулі, тощо.

Варто написати контент такого блоку раніше, ніж починати верстку, бо його розміри впливатимуть на розміщення елементів на сторінці.

Скласти інтро

Скласти інтро (вступ), де в 2-4 реченнях описати,

чим ти займаєшся,
що подобається робити,
що хочеться робити краще,
що важливо робити,
чому ти тут.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.