Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 13, 2020 02:21 pm GMT

Making GitHub Overview Page Interesting with new ReadMe Feature

I was creating My GitHub Static Page and when I wrote my username, I got message that imdhruv99 is special type of repository.Its README.md will appear on your public profile!.

New Feature

So, I thought let's check what is this.

So, What is it?

  • It is nothing but your markdownReadMe.mdfile. Github will show this file on Overview page of you github account.

Let's Create our Intro more eye catching with this new feature.

  • First Step will be to create new repository named as your github username. In my case it is imdhruv99.

Creating New Repository Named as our Github Username

  • Initialize this repository withReadMe.mdfile.* In My case, I have already created, so photo shows it already exist.
  • After Creating Repository, it will show up ReadMe on your overview section as you can see in below image.

Preview

  • Now, Lets Make it Interesting with Markdown, HTML and CSS.Lets add Photo in your Readme file usingimgtag of HTML. You can also add gradient.
<img src="https://github.com/imdhruv99/imdhruv99/blob/master/readme/photo.jpg">

This line will add photo which is in my readme folder. After adding photo it will looks as below.

Photo Adding

Now, We will add some introduction about overself and what we love to do in free time.

### Hey, It's Dhruv Prajapati hereI am DevOps Engineer, CloudOps Engineer and Full stack Developer. I love experimenting with new technologies and building small projects.-  Working as a **CloudOps Engineer** in [Crest Data System](https://www.crestdatasys.com/a).-  Learning and Developing Machine Learning based projects in Python.-  Writing tech blog posts over Internet.

It will add information with emojis on your page.

We can add dropdown with tag. Also you can also add dynamic statistic of you github page using below line.

![My github stats](https://github-readme-stats.vercel.app/api?username=imdhruv99&show_icons=true)

I have added above command under the dropdown.

<details>  <summary>Some interesting facts about me!</summary>  <br>  - In mean time, I create visual and artistic images using photoshop, you can check those are on **[My Instagram](https://www.instagram.com/imdhruv_28/)**.  - While Coding, Listening Music and developing useful code.   - Reading Novels, Action and Adventure, Autobiography & Biography, Comics, Detective and Mystery, Fantasy, Historical Fiction, Romance, Sci-Fi, History books.  - Learning Physics and getting knowledge about Space, Cosmos and Astronomy is My Night Job.![My github stats](https://github-readme-stats.vercel.app/api?username=imdhruv99&show_icons=true)</details>

After, This much your overview section will be good enough.

Preview of Written Section

Let's make it more interactive using footer with social media links.
To add this we will use HTML code Again.
In this portion of code we are adding anchor tag with image of social media platform.

<hr><p align="center">  <i>Let's connect and chat! Open to anyone on Earth under the Sun and Moon.</i>  <p align="center">    <a href="https://twitter.com/imdhruv_28" alt="Twitter"><img src="https://github.com/imdhruv99/imdhruv99/blob/master/readme/twitter-fill.svg"></a>    <a href="https://twitter.com/imdhruv_28" alt="Twitter"><i class="fa fa-facebook"></i></a>    <a href="https://www.linkedin.com/in/dhruv-prajapati-151b88176/" alt="Linkedin"><img src="https://github.com/imdhruv99/imdhruv99/blob/master/readme/linkedin-fill.svg"></a>    <a href="mailto:[email protected]" alt="Contact me"><img src="https://github.com/imdhruv99/imdhruv99/blob/master/readme/mail-fill.svg"></a>    <a href="https://imdhruv99.github.io" alt="My site"><img src="https://github.com/imdhruv99/imdhruv99/blob/master/readme/external-link-line.svg"></a>  </p></p><img src="https://github.com/imdhruv99/imdhruv99/blob/master/readme/bottom.svg" alt="bottom">

You can see the footer section in below photo.

Footer

  • After this your eye catching Introduction is ready. It is just simple implementation. You can be more creative with your fabulous creativity.You can see full implementation of code on my GitHub Repository.

Thank You so Much for Reading this post.

  • Dhruv Prajapati

Github
Instagram
Twitter
LinkedIn


Original Link: https://dev.to/imdhruv99/making-github-overview-page-interesting-with-new-readme-feature-3m5c

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To