GitHub 파일에 멋진 자술을 추가하는 방법

독자 안녕!✌
본고에서 GitHub 프로필에 좋은 README.md 를 추가하는 방법을 배울 것입니다.이것이 바로 그의 모습이다.



사투비크 차헤라
@satvik 코드

제 프로필입니다. 지금 모습!
2020년 7월 10일 오후 15:12
0
0
내가 이 트윗을 보았을 때, 나는 새로운 GitHub 기능을 탐색하고 있었다. GitHub 개인 자료에 자술을 추가할 수 있도록 하는 것이다.
이것이 바로 나README.md의 진정한 영감의 원천이다.



시리스⭐️

디자이너가 아닐 때, 당신은 당신의 프로필을 위해 멋진 것을 써 보려고 시도할 것이다.코드->MP4->GIF
2020년 7월 9일 오전 08:41
270
2109

주요 단계:

Make a repository

Build a Website and Screen Record

Convert the Video into a GIF

Host it and add it to the README.md

참고로 GitHub 저장소에 대한 링크가 있습니다.

사토비크 차헤라 / 개인 정보 자술

GitHub 구성 파일에 자체 설명을 추가하기 위해 만든 웹 사이트입니다.데스크탑 뷰용으로 설계되었습니다.

GitHub 저장소 설정

• Create a repository with your GitHub username

Template: https://github.com/username/username
Example: https://github.com/satvikchachra/satvikchachra

생성 README.md

지금 당신은 이미 설정을 해 놓았으니, 재미있는 부분을 봅시다. 디자인README.md입니다.

웹 사이트와 화면 기록을 세우다

Now let's jump into the Code!
Let's divide the code into 2 main sections.

Particles JS

Typewriter JS

섹션 1: 입자 JS

GitHub Link: https://github.com/VincentGarreau/particles.js/
배경을 관찰할 때, 몇몇 하얀 입자가 수면 위에 떠서 다각형을 형성한다.
우리는 particiles.js를 사용하여 이러한 효과를 생활에 도입할 것이다.

중요 정보:
실시간 서버에서 index.html 파일을 실행하는 것을 기억하십시오. 그렇지 않으면 입자 효과를 관찰할 수 없습니다.

1단계: 입자의 CDN 링크를 포함합니다.js

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

2단계: div와 id 입자 효과를 원하는 위치를 지정합니다.index.html 파일에 있습니다.

<div id="particles-js">

div에 스타일을 적용합니다.

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

3단계: 로드 실행particles.js(여기assets는 patricles.json 파일을 포함하는 디렉토리입니다.)

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

4단계: particles.json 파일을 생성합니다.particles.json 파일의 값을 조정할 수 있습니다.그곳에서 실험을 하니 즐겁게 놀아라!
이것 좀 봐.
이것은 네가 어딘가에 갇히지 않도록 아주 좋은 강좌이다.
2절: 타자기 JS
GitHub Link: https://github.com/tameemsafi/typewriterjs
첫 번째 단계: 타자기의 CDN 링크를 포함한다.js

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

2단계: div 와 id 원하는 타자기 효과를 지정합니다.index.html 파일에 있습니다.

<div id="typewriter"></div>

div에 스타일을 적용합니다.

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

3단계: CDN 링크를 통해 미리 정의된 Typewriter 클래스 객체를 만듭니다.

// 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<br>Your-Goal.')
    .pauseFor(1000)
    .deleteChars(29)
    .typeString('currently learning<br>Your-Skill.')
    .pauseFor(1000)
    .deleteAll()
    .typeString('Check out my work at<br>github.com/your-username')
    .pauseFor(1000)
    .deleteAll()
    .start();

중요 정보:
끼워넣기divs를 기억하세요. 앞에 타자기 효과가 있고 배경에 입자 효과가 있기 때문입니다.

<div id="particles-js">
        <div id="typewriter"></div>
</div>

페이지의 요소에 스타일을 추가하여 필요한 출력을 얻습니다.
이제 모든 응용 프로그램에서 화면을 기록할 수 있습니다.
개인적으로 사용합니다OBS.
OBS 필터링 레코드를 사용하는 리소스가 풍부한 이 자습서를 보십시오.

비디오를 GIF 형식으로 변환

두 가지 이유로 비디오를 GIF로 변환하는 것이 까다로워집니다.

큰 사이즈:
GitHub에서는 큰 파일을 업로드할 수 없습니다.

품질 손실:
비디오가 GIF 형식으로 변환되면 품질이 크게 떨어집니다.

개인적으로 이 프로그램을 사용해서 변환합니다.
https://play.google.com/store/apps/details?id=com.gif.gifmaker

GIF를 주관합니다.

There are many platforms you can host your GIF on.
I personally used GIPHY. It's really simple.
Just sign up and hit upload.

Here's what Upload section looks like:

다음은 업로드된 GIF입니다.

선택한 GIF 링크를 복사합니다.

마지막으로 링크를 사용자 README.md에 추가합니다.

변화를 추진하라!🚀

지금 너는 예쁜 것이 하나 생겼다README.md.축하합니다!🥳🎉
이것은 나의 첫 번째 강좌다.피드백에 감사드립니다.고마워요😊