Рубрики
Без рубрики

Как добавить потрясающую Readme в ваш профиль GitHub

Привет, читатель! ✌ В этом посте мы узнаем, как добавить потрясающий readme.md в профиль GitHub …. Tagged with JavaScript, Github, Tutorial, WebDev.

Привет, читатель! ✌ В этом посте мы узнаем, как добавить потрясающий Readme.md в профиль GitHub. Вот как это будет выглядеть:

Я изучал новую функцию GitHub, которая позволяет вам добавить ReadMe в ваш профиль GitHub, когда наткнулся на этот твит. Это было истинное вдохновение для моего Readme.md .

Ключевые шаги:

  1. Сделать репозиторий
  2. Создайте веб -сайт и экранную запись
  3. Преобразовать видео в GIF
  4. Установите его и добавьте в readme.md

Вот ссылка на мой репозиторий GitHub для вашей ссылки.

Satvikchachra/Profile-Readme

Веб -сайт создан для добавления профиля ReadMe в GitHub. Построен только для просмотра рабочего стола.

Установите репозиторий GitHub

  • Создайте репозиторий с вашим именем пользователя GitHub

Шаблон: https://github.com/username/username Пример: https://github.com/satvikchachra/satvikchachra

  • Создать Readme.md

Итак, теперь, когда вы настроили его, давайте придем к интересной части: разработка вашего Readme.md Анкет

Создайте веб -сайт и экранную запись

Теперь давайте прыгнем в код! Давайте разделим код на 2 основных раздела.

  • Частицы JS
  • Пишущая машинка JS

Раздел 1: частицы JS

Ссылка GitHub: https://github.com/vincentgarreau/particles.js/

Когда вы смотрите на фон, некоторые белые частицы плавают и образуют многоугольники. Мы будем использовать farsiles.js Чтобы внести этот эффект в жизнь.

  • Важный совет: не забудьте запустить index.html Файл на живом сервере иначе вы не будете наблюдать за эффектом частиц.

Шаг 1: Включите ссылку CDN для частиц.js

Шаг 2: Укажите дивизион И это я D где вы хотите эффект частиц. (в файле index.html ).

Примените стиль к Div.

#particles-js {
    background-color: #a0d0f8;
    height: 860px;
    width: 100%;
}

Шаг 3: Запустить частицы.js в процессе

(Здесь Активы – это каталог, который содержит patricles.json file.)

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
});

Шаг 4: Создайте частицы.json файл. Вы можете настроить значения в частицы.json файл. Экспериментируйте и получайте удовольствие!

Проверьте это: отличное руководство, если вы где -то застряли.

Раздел 2: машинка JS Ссылка GitHub: https://github.com/tamemesfi/typewriterjs

Шаг 1: Включите ссылку CDN для Typewriter.js

Шаг 2: Укажите дивизион И это я D где вы хотите эффект пишущей машинки. (в файле index.html ).

Примените стиль к Div.

#typewriter {
    position: absolute;
    font-size: 60px;
    font-family: 'B612', sans-serif;
    font-weight: 700;
    width: 800px;
    margin: 350px 250px;
}

Шаг 3: Создайте объект класса пишущей машинки, предварительно определенной через ссылку CDN.

// To run this effect in loop set 'loop' to true
const instance = new Typewriter('#typewriter', {
    loop: true
});

Шаг 4: Используйте разные методы для достижения желаемого результата

typestring () : Типы строки. Принимает строку в качестве параметра.

pausefor () : Паузу эффекта. Принимает количество миллисекундов в качестве параметра.

deleteall () : Удаляет всю строку. Принимает скорость в качестве дополнительного параметра.

DeleteChars () : Удаляет символы строки. Принимает количество символов в качестве параметра.

start () : Запускает эффект пишущей машинки.

instance.typeString("Hello World!")
    .pauseFor(1000)
    .deleteAll()
    .typeString('I am Your-Name.')
    .pauseFor(1000)
    .deleteChars(15)
    .typeString('an aspiring
Your-Goal.')
    .pauseFor(1000)
    .deleteChars(29)
    .typeString('currently learning
Your-Skill.')
    .pauseFor(1000)
    .deleteAll()
    .typeString('Check out my work at
github.com/your-username')
    .pauseFor(1000)
    .deleteAll()
    .start();
  • Важный совет: не забудьте гнездиться divs Потому что вы хотите эффект пишущей машинки спереди и эффект частиц на заднем плане.

Добавьте стиль в элементы на странице, чтобы получить желаемый вывод.

Теперь вы можете записать экран, используя любое приложение. Я лично использую Обсел . Проверьте это находное руководство о том, как проверить запись, используя OBS.

Преобразовать видео в GIF

Преобразование видео в GIF становится сложным по двум причинам:

  1. Большой размер: GitHub не позволяет загружать файлы большого размера.
  2. Потеря в качестве: Существует значительная потеря качества, когда видео преобразуется в формат GIF.

Я лично использовал это приложение для преобразования. https://play.google.com/store/apps/details?id=com.gif.gifmaker

Проведите GIF.

Есть много платформ, на которых вы можете разместить свой GIF. Я лично использовал Giphy. Это действительно просто. Просто зарегистрируйтесь и нажмите на загрузку.

Вот как выглядит раздел загрузки:

Вот загруженный GIF:

Скопируйте выбранную ссылку GIF.

Наконец, добавьте ссылку на ваш Readme.md Анкет

Протолкнуть изменения! 🚀

А теперь у тебя есть красивый Readme.md Анкет Поздравляю! 🥳 🎉

Это был мой первый урок. Ваш отзыв был бы очень оценен. Спасибо 😊

Оригинал: “https://dev.to/satvikchachra/how-to-add-an-awesome-readme-to-your-github-profile-361n”

Читайте ещё по теме: