Мини-портфолио: поднимите свой профиль на GitHub на новый уровень

Здравствуйте, друзья-коденевцы 👋,

Недавно друг спросил меня, как я создал свой профиль на GitHub и писал ли я когда-нибудь об этом статью в блоге.
Я не писал, хотя хотел, потому что многие люди уже писали об этом.
Но после этого разговора я взглянул на свой профиль на GitHub. Последний раз я обновлял его больше года назад. Все еще было в порядке. Однако у меня было несколько идей, как его улучшить. И теперь я не только обновил его, но и превратил в свое мини-портфолио. Поэтому я хочу поделиться этим процессом с вами.

adiati98 / adiati98

Привет, я Аю.

Я front-end инженер-программист с большим интересом к созданию проектов, доступных каждому.

Изучение новых вещей наполняет меня волнением, и я всегда стремлюсь поделиться своим обучением с общественностью и передать свои знания через мой блог и Twitter.

Я также очень люблю сотрудничать, вносить вклад в открытые источники и участвовать в жизни сообщества.

Я также работал с

В моем списке обучения

  • Участвовал в рассылке Awesome Developer Diaries — март 2022 г.
  • Окончил программу проектного сотрудничества The Collab Lab — декабрь 2021 года
  • Завершил Hacktoberfest 2021 — октябрь 2021 г.
  • Лучшие истории от Hashnode в еженедельном дайджесте Hashnode #87 — март 2022 г.
  • Получил значки OSS Documentarian & OSS Mentor за Open Source October на Hashnode — ноябрь 2021 г.
  • Популярные статьи на Hashnode -…
Посмотреть на GitHub

💡 Идеи по улучшению

Создайте баннер и нижний колонтитул

У меня не было баннера и нижнего колонтитула. Поэтому я хотел сделать баннер, чтобы кратко рассказать о том, кто я и чем занимаюсь, и колонтитул, чтобы поблагодарить всех, кто посетил мой профиль на GitHub.
Я создал их с помощью Canva.

Баннер

Нижний колонтитул

Придерживаясь своего бренда

Если вы следите за мной некоторое время, то, возможно, заметили логотип, который я прикрепляю к картинке обложки каждого поста блога. Цвета, которые я использую для своего логотипа, — оранжевый, синий и белый.
Поэтому я использую эти цвета в качестве темы для баннера, нижнего колонтитула и цвета фона.
Я хочу быть последовательным и придерживаться своего личного бренда на всех онлайн-платформах.

Замените иконки на значки

Ранее я использовал значки из Devicon для отображения языков и фреймворков в разделе «Навыки». Несмотря на то, что я установил ширину и высоту всех иконок одинаковыми, они все равно имели разные размеры. Регулировка ширины и высоты по отдельности также не помогла.

Поскольку я хочу придерживаться своего бренда и не хочу иметь иконки разных размеров, я решил использовать значки. С бейджами мне не нужно настраивать ширину и высоту, и я могу задать цвет фона в соответствии с фирменными цветами.

Добавьте больше разделов

До обновления профиля на GitHub у меня были только разделы «Обо мне», «Навыки», «Последние записи в блоге» и «Интересные факты обо мне».

Затем я добавил раздел «Достижения», чтобы перечислить все свои достижения в области технологий. Я также добавил раздел «Общественная деятельность», чтобы перечислить все мои действия в сообществах и опыт волонтерства.

Исправьте структуру

Не то чтобы у меня не было структуры в моем предыдущем профиле на GitHub. Но после того, как я внимательно рассмотрел его, я понял, что могу улучшить структуру, чтобы она была более читабельной.
Итак, новая структура будет такой:

  • Баннер
  • Обо мне
  • Навыки
  • Статистика вклада на GitHub
  • Достижения
  • Деятельность сообщества
  • Последние записи в блоге
  • Забавный факт обо мне
  • Любимая цитата и GIF (просто так 😄)
  • Нижний колонтитул

Я также хотел создать горизонтальную линию для разделения каждого раздела, а не использовать стандартную линию HTML. Как и для баннера и нижнего колонтитула, я сделал эту горизонтальную линию с помощью Canva.

Горизонтальная линия

🖋 Настройка профиля GitHub

В этом разделе я расскажу вам о том, как я создал и обновил свой профиль на GitHub.

Возможно, у вас нет профиля GitHub и вы хотите его создать.
Поэтому я начну этот раздел с того, как создать профиль GitHub 😊.

Создание нового профиля GitHub

Во-первых, вы должны создать новый репозиторий с тем же именем, что и ваше имя пользователя GitHub.

  • На панели инструментов GitHub нажмите зеленую кнопку «New» на левой панели.

  • Введите свое имя пользователя GitHub в качестве имени репозитория. Вы также должны сделать репозиторий общедоступным и инициализировать файл README.

  • Нажмите зеленую кнопку «Создать репозиторий» внизу.

Теперь вы можете начать настраивать свой профиль GitHub 😄!

Добавьте баннер, нижний колонтитул и горизонтальную линию

Как я уже говорил, я хотел придерживаться своего бренда. Первое, что пришло мне в голову: хотя я создам эти элементы с помощью Canva, они должны соответствовать правилам доступности.
К сожалению, цветовые комбинации, которые я использую для своего логотипа, недоступны, если я хочу использовать их в качестве фона и мелкого текста.
Поэтому я попытался найти градиентную комбинацию из этих цветов и проверить, соответствуют ли они требованиям WCAG 2.0 по доступности контраста, используя бесплатный инструмент Accessible Web.

Таким образом, они не совсем совпадают с цветами моего бренда, но все же находятся в пределах градиента. И самое главное, они соответствуют требованиям WCAG 2.0.

Раздел «Обо мне

Я сделал этот раздел коротким и простым. Я также включил значки платформ, где люди могут найти меня. Я создал эти значки с помощью shields.io.
Если вы хотите использовать потрясающий GIF с изображением руки Мартина Хайнца, как это делаю я, вы можете взять код ниже.

<img src="https://raw.githubusercontent.com/MartinHeinz/MartinHeinz/master/wave.gif" width="35px">
Войти в полноэкранный режим Выход из полноэкранного режима

Раздел «Навыки

В этом разделе перечислены языки, фреймворки и библиотеки, с которыми я работаю. Я также сделал подразделы, в которых перечислил фреймворки и библиотеки, с которыми я работал и которые хочу изучить в будущем.
Я использую значки, чтобы показать фреймворки и библиотеки.

Создание значков с помощью shields.io

<img src="https://img.shields.io/badge/-NodeJS-F3F7FA?logo=node.js&logoColor=339933&style=for-the-badge&logoWidth=30" alt="NodeJS">
Вход в полноэкранный режим Выйти из полноэкранного режима

Я разложу и проведу вас через вышеприведенный синтаксис, чтобы вы могли создать свой бейдж.

  • Текст

После https://img.shields.io/badge/ добавьте тире, а затем текст того, что вы хотите написать на бейдже.

  • Цвет фона

После текста добавьте тире, а затем Hex-цвет для фона бейджа. Символ # для этого не нужен.

  • Логотип

Теперь вы можете вставить логотип языка, фреймворка, библиотеки, платформы и т.д., добавив ?logo=, за которым следует название логотипа, со всеми буквами в нижнем регистре. Вы можете поискать доступные логотипы на сайте Simple Icons.

Название логотипа чувствительно к регистру. Поэтому вы должны убедиться, что все буквы написаны в нижнем регистре, и использовать формат, указанный на сайте Simple Icons, чтобы ваш логотип появился на бейдже.

  • Цвет логотипа

Вы можете добавить цвет для вашего логотипа, добавив &logoColor=, за которым следует Hex-цвет. Если вы хотите использовать официальный цвет логотипа, вы также можете найти его на сайте Simple Icon.

  • Стиль значка

Мне нужен простой квадратный стиль для моих значков. Поэтому я добавил &style=for-the-badge после цвета логотипа. Вы можете посмотреть, как добавить другие стили для значков на сайте shields.io в разделе «Стили».

  • Задать горизонтальное пространство

Вы можете задать ширину логотипа для создания некоторого горизонтального пространства, добавив &logoWidth=. Настройте ширину в соответствии с вашими потребностями.

Добавить статистику вклада

Я хочу отслеживать свою деятельность на GitHub. Поэтому я добавил статистику GitHub и статистику GitHub streak. Я настроил цвет, используя для этих карточек те же цвета, что и для баннера и нижнего колонтитула.
Раньше у меня была карточка «Лучшие языки», но сейчас я ее убрал, потому что хочу сосредоточиться только на своей деятельности на GitHub.

Вы можете найти инструкции по добавлению этих карточек в файле README репозиториев (нажмите на ссылки выше). Они довольно просты.

Раздел последних записей в блоге

Я регулярно пишу посты в блог. Поэтому я добавил этот раздел, чтобы показать пять последних записей в блоге, используя рабочий процесс GitHub Actions от Гаутама Кришны.

  • В файле README в разделе, где вы хотите разместить этот список, добавьте:

    <!-- BLOG-POST-LIST:START -->
    <!-- BLOG-POST-LIST:END -->
    
  • Создайте папку с именем .github. Затем создайте подпапку под названием workflow.

  • Внутри папки workflow создайте файл с именем blog-post-workflow.yml и скопируйте/вставьте в него этот код:

    name: Latest posts workflow
    on:
     schedule:
       - cron: '0 * * * *' 
     workflow_dispatch: 
    jobs:
     update-readme-with-blog:
       name: Update this repo's README with latest blog posts
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v2
         - uses: gautamkrishnar/blog-post-workflow@master
           with:
             # Replace this URL with your RSS feed URL/s
             feed_list: "https://adiati.com/rss.xml"
             # Optional
             max_post_count: 5
             template: "- `$date` | [$title]($url)  $newline"
             date_format: yyyy-mm-dd
             tag_post_pre_newline: true
    

    Замените URL в feed_list на URL вашей RSS-ленты.
    Если у вас нет собственного домена и вы пишете на Hashnode, это должно быть https://username.hashnode.dev/rss.xml. Или https://dev.to/feed/username, если вы хотите показывать записи вашего блога на DEV. Замените username на ваше имя пользователя.

    Вы также можете настроить, сколько постов вы хотите показывать, формат даты и т.д. Посмотрите на доступные варианты в репозитории Гаутама.

  • Зафиксируйте свои изменения и дождитесь автоматического запуска.

  • Вы можете запустить его вручную, чтобы сразу увидеть результат.

    • В своем репозитории перейдите на вкладку «Действия».
    • На левой панели нажмите «Рабочий процесс «Последние сообщения»».
    • Нажмите на выпадающий список «Запустить рабочий процесс» справа, затем нажмите на зеленую кнопку «Запустить рабочий процесс».
    • Обновите страницу. К этому моменту вы должны увидеть что-то в таблице.
    • Теперь, если вы зайдете в свой профиль GitHub, вы сможете увидеть список записей в блоге. Если нет, попробуйте обновить страницу.

Если вы создаете видеоконтент на YouTube, вы также можете показать его в своем профиле GitHub с помощью этого рабочего процесса. Подробнее об этом можно прочитать в репозитории Гаутама.

Разделы «Достижения», «Общественная деятельность» и «Интересные факты обо мне».

В этих разделах нет ничего особенного. Поскольку я хочу рассматривать свой профиль на GitHub как мини-портфолио и неформальное резюме, я добавил разделы «Достижения» и «Общественная деятельность», чтобы достичь этих целей.

Я добавил раздел «Забавные факты обо мне», а также мои любимые цитаты и GIF, потому что я — личность вне моей профессии. И я хочу добавить этот штрих к своему профилю.

Заключительные слова

Возможно, у вас есть портфолио или вы не хотите настраивать свой профиль на GitHub. Это нормально. Но если у вас нет портфолио или вы хотите показать свои работы и то, кто вы есть, вы можете вывести свой профиль GitHub на новый уровень и показать его всему миру 😃.

Если у вас есть такой профиль, поделитесь своим профилем GitHub здесь в комментариях! 😄


Спасибо, что читаете!
Напоследок, вы можете найти меня в Twitter. Давайте общаться! 😊

Оцените статью
devanswers.ru
Добавить комментарий