Satvik Chachra

Posted on Jul 10, 2020 • Edited on Jul 11, 2020

How to add an awesome README to your GitHub Profile

#javascript #github #tutorial #webdev

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:

Satvik Chachra

@satvik_codes

Here's what my @github profile looks now!
#javascript #github

15:12 PM - 10 Jul 2020

0 0

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.

Cyris ⭐️

@sudo_overflow

When you're not a designer so you try code something cool for your @github profile intro.

Code -> MP4 -> GIF

#Github #JavaScript

08:41 AM - 09 Jul 2020

270 2109

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

satvikchachra / profile-readme

Website made for adding a README to GitHub Profile. Built for Desktop view only.

Set up the GitHub Repository

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

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

Particles JS
Typewriter JS

Section 1: Particles JS

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

<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).

<div id="particles-js">

Apply a style to the div.

#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.)

/* 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.

You can tweak the values in the particles.json file. Experiment and have fun there!

Check this out:
A great tutorial in case you get stuck somewhere.

Section 2: Typewriter JS
GitHub Link: https://github.com/tameemsafi/typewriterjs

Step 1: Include the CDN Link for typewriter.js

<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).

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

Apply a style to the div.

#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.

// 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.

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.

<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.
Check out this resourceful tutorial on how to screen record using OBS.

Convert the Video into a GIF

Converting the video to a GIF gets tricky because of two reasons:

Large Size: GitHub doesn't allow to upload large size files.
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.

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:

Here's the uploaded GIF:

Copy the selected GIF link.

Finally, add the link to your README.md.

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 😊

Top comments (6)

Juan F Gonzalez • Jul 11 '20

Great post!
Very detailed and concise at the same time. I, for one, wouldn't use that cuz I feel several people would be doing the same and don't want to lump myself into the Readme Gif category hahaha 😄

Satvik Chachra • Jul 11 '20

I am glad you liked the tutorial! I am excited and looking forward to a lot of creative Readme(s). I think you might like Dynamic Readme(s). Check them out.
I am sure you would put something amazing on your GitHub profile. All the best 😊