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 * 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](#section-1) * [Typewriter JS](#section-2) #### 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 ```html ``` Step 2: Specify the `div` and it's `id` where you want the particle effect. (in the `index.html` file). ```html

``` 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 GitHub Link: https://github.com/tameemsafi/typewriterjs Step 1: Include the CDN Link for typewriter.js ```html ``` Step 2: Specify the `div` and it's `id` where you want the typewriter effect. (in the `index.html` file). ```html

``` 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
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(); ``` * Important tip: Remember to nest the `divs` because you want the typewriter effect in front and particle effect in the background. ```html

``` 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. 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 😊

satvikchachra

How to add an awesome README to your GitHub Profile

Join Our Newsletter. No Spam, Only the good stuff.