How to add an awesome README to your GitHub Profile
Tags: javascript, github, tutorial, webdev
Published: 2020-07-10 18:54:43

Hi Reader! ✌
In this post, we are going to learn how to add an awesome `README.md` to a GitHub Profile. This is how it will look like:

{% twitter 1281607352555200512 %}

I was exploring the new GitHub feature that lets you add a README to your GitHub Profile when I came across this tweet.
This was the true inspiration behind my `README.md`.
{% twitter 1281146411736694784 %}

## Key Steps:
1. [Make a repository](#step-1)
2. [Build a Website and Screen Record](#step-2)
3. [Convert the Video into a GIF](#step-3)
4. [Host it and add it to the `README.md`](#step-4)

Here's a link to my GitHub repository for your reference.

{% github satvikchachra/profile-readme no-readme %}


### Set up the GitHub Repository<a name="step-1"></a>

* Create a repository with your GitHub username

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

* Create a `README.md`

So now that you have set it up, let's come to the interesting part: Designing your `README.md`.

### Build a Website and Screen Record<a name="step-2"></a>

Now let's jump into the Code!
Let's divide the code into 2 main sections.
* [Particles JS](#section-1)
* [Typewriter JS](#section-2)


#### Section 1: Particles JS<a name="section-1"></a>
GitHub Link: https://github.com/VincentGarreau/particles.js/

When you look at the background there are some white particles floating and forming polygons. 
We will use `particiles.js` to bring that effect into life.

* Important tip:
Remember to run the `index.html` file on a Live Server otherwise, you won't observe the particle effect.

Step 1: Include the CDN Link for particles.js

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

Step 2: Specify the `div` and it's `id` where you want the particle effect. (in the `index.html` file).

```html
<div id="particles-js">
```

Apply a style to the div.
```css
#particles-js {
    background-color: #a0d0f8;
    height: 860px;
    width: 100%;
}
```

Step 3: To run the `particles.js` on load

(Here `assets` is a directory that contains `patricles.json` file.)

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

Step 4: Create a `particles.json` file.
{% codepen https://codepen.io/satvikchachra/pen/ZEQRBxd default-tab=js %}
You can tweak the values in the `particles.json` file. Experiment and have fun there!

Check this out: {% youtube qK3cgD09Qf0 %}
A great tutorial in case you get stuck somewhere.

Section 2: Typewriter JS<a name="section-2"></a>
GitHub Link: https://github.com/tameemsafi/typewriterjs

Step 1: Include the CDN Link for typewriter.js

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

Step 2: Specify the `div` and it's `id` where you want the typewriter effect. (in the `index.html` file).
```html
<div id="typewriter"></div>
```

Apply a style to the div.
```css
#typewriter {
    position: absolute;
    font-size: 60px;
    font-family: 'B612', sans-serif;
    font-weight: 700;
    width: 800px;
    margin: 350px 250px;
}
```

Step 3: Create an object of Typewriter class pre-defined through the CDN link.

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

Step 4: Use different methods to achieve the desired result

`typeString()`: Types a string. Takes a string as a parameter.

`pauseFor()`: Pauses the effect. Takes the number of milliseconds as a parameter.

`deleteAll()`: Deletes the entire string. Takes speed as an optional parameter.

`deleteChars()`: Deletes characters of a string. Takes the number of characters as a parameter.

`start()`: Starts the typewriter effect.

```js
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();
```

* Important tip:
Remember to nest the `divs` because you want the typewriter effect in front and particle effect in the background.

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

Add styling to elements on the page to get the desired output.

Now you can record the screen using any application.
I personally use [OBS](https://obsproject.com/).
Check out this resourceful tutorial on how to screen record using OBS.
{% youtube QKmrDUJFRkM %}

### Convert the Video into a GIF

Converting the video to a GIF gets tricky because of two reasons:
1. Large Size: 
GitHub doesn't allow to upload large size files.
2. Loss in quality: 
There's a significant loss in quality when the video is converted to GIF format.

I personally used this application for conversion.
https://play.google.com/store/apps/details?id=com.gif.gifmaker

### Host the GIF.<a name="#step-4"></a>
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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fr7jwyeo3oe15f7gx6fn.png)

Here's the uploaded GIF:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/of34es53m3wuibmll7aa.png)

Copy the selected GIF link.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s2rupvvztvhsy3bywxu5.png)

Finally, add the link to your `README.md`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3psxs4bt980yw2m5aquu.png)

### Push the changes! 🚀

And now you have a beautiful `README.md`. Congratulations! 🥳🎉

This was my first tutorial. Your feedback would be much appreciated. Thank you 😊