Lesson 4: Additional Profile README Features

Overview

This page will help you know what to include on your github profile readme. All these are ideas. Use this code as needed in your profile. On the left is what the section will look like. On the right is the code used to make the section on the right. Copy the code and put it into your profile, editing it as needed to fit you.

Definition of Github README

Generally, A GitHub README is a document that typically accompanies a GitHub repository, providing essential information about the repository and its contents. It’s named “README” because it’s often the first thing a visitor should read to understand what the project is about. The importance of a GitHub README cannot be overstated, as it serves several critical functions, but we will only talk about 3 in this lesson.

Key Features and Importance of a GitHub README:

Project Introduction: It introduces the project to users, developers, or potential contributors. This is where you provide an overview of what the project does and its purpose.
Documentation: The README often contains documentation on how to install, configure, and use the project. This can include code examples, configuration settings, and command-line instructions.
Technical Details: It may provide technical details such as the technology stack, dependencies, and system requirements.

Definition of Github Profile README

In the context of creating a GitHub profile, a GitHub README serves as a personalized introduction and overview of a user’s GitHub presence. Unlike a repository-specific README that focuses on a particular project, a GitHub profile README provides a broader view of the user, their interests, skills, and contributions.

Key Features and Importance of a Github Profile README:

Personal Introduction: A brief section about who you are, what you do, and your interests. This can include your professional role, educational background, or areas of expertise.
Skills and Technologies: Highlight the programming languages, tools, and technologies you are proficient in. This can be done through text, badges, or icons.
Projects and Work: Showcase your significant or favorite projects. You can include links to repositories, descriptions of what each project entails, and any notable achievements.
GitHub Statistics: Some users include dynamic GitHub stats like their number of contributions, most used languages, or streaks. This can be done using GitHub widgets and badges.

Learning Objectives

Students will be able to create a GitHUb Profile README customized to their unique sensibilities and needs.

Basic Markdown For Github Profile README

Baisc Text Formatting(Bold, Italics and Lists) in Markdown

Headers

Headers are created using the # symbol. The number of # symbols before the text determines the level of the header. For example: # Header 1 for the largest header size. and ## Header 2 for the second-largest, and so on.

  # Header 1
  ## Header 2

Bold Text

To make text bold, wrap it in two asterisks ** or two underscores __. For example: bold text or bold text.

  **bold text**
  __bold text__

Italic Text

To italicize text, wrap it in one asterisk * or one underscore _. For example: italic text or italic text.

*italic text*
_italic text_

Bold and Italic

Combine both formats for bold and italic text. For example: bold and italic or bold and italic.

  **_bold and italic_**
  __*bold and italic*__

Bulleted Lists

Use asterisks *, plus +, or minus - for bulleted lists. For example:

  * Item 1
  * Item 2

Numbered Lists

Simply number with a period at the end of the number for each line for a numbered list (1. 2.). For example:

  1. First item
  2. Second item

Adding images and links in Markdown

Links

To create a hyperlink, enclose the link text in square brackets [], followed by the URL in parentheses (). For example: Google

  [Google](https://www.google.com)

Images

Similar to links, but with an exclamation mark ! in front. Include the alt text in square brackets and the image URL in parentheses. Image URL usually referes to the image directory on your local machine. It is always safe to move the images you wish to use in a particular project to a folder in which the project is. For example:

  ![Alt text](image-url.jpg)

4. Tools And Links

There are a list of tools and links which we will make use of in this Lesson to enhance our Github Profile Readme. They are as follows;

Devicons: DevIcons Github Repository This link can be used to integrate logos(images) of any programming language you are conversant with to you Github profile. You shall learn how to do this in the Adding logos in Enhancing Your Github Profile section below.
Shields.io: shields.io This link is used to include social media badges on your profile. This is to provide a gateway for possible recruiters to connect with you on any platform you provide.
Gifs: GIF Link Thus link can be used to include Gifs on your profile README. You may be wondering what gifs have to do with profile images, but when you look at how appealing most gifs are, you tend to see how much aesthetic it provides to your profile. You will learn how to go about this in the next section.
Github’s built in text Editor: Github comes with a built in code editor, and this is basically what we will be using to edit our github profile readme file. You can click on the “Pen” icon on the top right conrner of your profile to edit your profile using Github built in text editor.

5. Enhancing Your Github Profile README

To create an impactful GitHub profile README, focus on an engaging presentation of your skills and projects. Begin with a brief introduction, including your name, role, and a touch of personalization to make it relatable.

Next, showcase your work by organizing sections with project thumbnails, titles, descriptions, and links to your repositories or deployed applications. Consider incorporating GitHub Readme Stats or widgets to display your GitHub activity, lending credibility to your contributions. List your skills and technologies to give viewers insight into your expertise. Highlight significant achievements and contributions, and provide contact information for networking and collaboration opportunities.

Keep your README updated as you embark on new projects or attain milestones, and encourage engagement from visitors by including a call to action.

Name Section:

This will go best at the top of your profile readme. Paste this code at the top.

Markdown

John Doe

# John Doe

Description Section:

Writing a description section is very important. Here is where you can make yourself stand out from others to employers. Below are ideas of what to include. Feel free to include anything that conveys that you are a capable employee in your field.

Provide a brief introduction about yourself, your current academic pursuits, and your career goals. Mention your passion for technology and the specific field you’re interested in (data science, computer science, web development).

Description:

🔭 I’m currently working on [Current Project/Job].
🌱 I’m currently learning [What you are learning].
👯 I’m looking to collaborate on [Open Source Projects or any interesting projects].
🤔 I’m looking for help with [Any specific help you need].
💬 Ask me about [Anything you’re open to discussions about].
📫 How to reach me: [Your Email or other contact information].
⚡ Fun fact: [Something interesting about yourself].

## Description: 

- 🔭 I’m currently working on [Current Project/Job].
- 🌱 I’m currently learning [What you are learning].
- 👯 I’m looking to collaborate on [Open Source Projects or any interesting projects].
- 🤔 I’m looking for help with [Any specific help you need].
- 💬 Ask me about [Anything you're open to discussions about].
- 📫 How to reach me: [Your Email or other contact information].
- ⚡ Fun fact: [Something interesting about yourself].

Hard Skills Section

This section is where you can show what you are comfortable using. As a beginner, this section can be empty. For more experienced students, it’s a good idea to include the technology you are familiar with. Areas to include are:

programming languages: (python, JavaScript, C++…)
hosting services: (Heroku, GitHub Pages, AWS…)
frameworks/libraries: (pandas, tensorflow, ggplot2, ReactJS…)
databases: (MSSQL, Postgres…)

or anything else that would help what technology you are comfotable using like Git/GitHub, Quarto which we will be learning later in this course.

The example below is table showing technology a Data Science student might be familiar with.

Favorite Technology

	Python	R
Reading	Pandas	Readr
Wrangling	Pandas	Tidyr & Dplyr
Visualization	Matplotlib	ggplot2
Model	Scitkit-Learn	TidyModels

## Favorite Technology

|               | Python        | R             |
| ---           | :---:         | :---:         |
| Reading       | Pandas        | Readr         |
| Wrangling     | Pandas        | Tidyr & Dplyr |
| Visualization | Matplotlib    | ggplot2       |
| Model         | Scitkit-Learn | TidyModels    |

6. Adding Logos (Software, Lanugages, Companies…)

Now, we will add images representing the technologies and skills you are familiar with. You can always finds free logos for many programming languages and tools in DevIcons Github Repository.

Go to the icons folder and search and open the Pandas folder. In the folder, you’ll find images in SVG(Scaleable Vector Graphics) format. Click on any image and copy the URL shown in the browser’s address bar

We will make use of this URL in the <img /> tag and specify the height and width attribute accordingly. Similarly, you can search for other skills and include them in a seprate <img /> tags.

Include the code below to your Github README.md. You can Add/Remove any skills of your choice. Ensure any skill you choose to show on your repo, they should be ones you are conversant with.

<div>
    <img src="https://github.com/devicons/devicon/blob/master/icons/java/java-original-wordmark.svg" title="Java" alt="Java" width="40" height="40"/>&nbsp;
    <img src="https://github.com/devicons/devicon/blob/master/icons/react/react-original-wordmark.svg" title="React" alt="React" width="40" height="40"/>&nbsp;
    <img src="https://github.com/devicons/devicon/blob/master/icons/spring/spring-original-wordmark.svg" title="Spring" alt="Spring" width="40" height="40"/>&nbsp;
    <img src="https://github.com/devicons/devicon/blob/master/icons/materialui/materialui-original.svg" title="Material UI" alt="Material UI" width="40" height="40"/>&nbsp;
    <img src="https://github.com/devicons/devicon/blob/master/icons/flutter/flutter-original.svg" title="Flutter" alt="Flutter" width="40" height="40"/>&nbsp;
    <img src="https://github.com/devicons/devicon/blob/master/icons/redux/redux-original.svg" title="Redux" alt="Redux " width="40" height="40"/>&nbsp;
    <img src="https://github.com/devicons/devicon/blob/master/icons/css3/css3-plain-wordmark.svg"  title="CSS3" alt="CSS" width="40" height="40"/>&nbsp;
    <img src="https://github.com/devicons/devicon/blob/master/icons/html5/html5-original.svg" title="HTML5" alt="HTML" width="40" height="40"/>&nbsp;
    <img src="https://github.com/devicons/devicon/blob/master/icons/javascript/javascript-original.svg" title="JavaScript" alt="JavaScript" width="40" height="40"/>&nbsp;
    <img src="https://github.com/devicons/devicon/blob/master/icons/firebase/firebase-plain-wordmark.svg" title="Firebase" alt="Firebase" width="40" height="40"/>&nbsp;
    <img src="https://github.com/devicons/devicon/blob/master/icons/gatsby/gatsby-original.svg" title="Gatsby"  alt="Gatsby" width="40" height="40"/>&nbsp;
    <img src="https://github.com/devicons/devicon/blob/master/icons/mysql/mysql-original-wordmark.svg" title="MySQL"  alt="MySQL" width="40" height="40"/>&nbsp;
    <img src="https://github.com/devicons/devicon/blob/master/icons/nodejs/nodejs-original-wordmark.svg" title="NodeJS" alt="NodeJS" width="40" height="40"/>&nbsp;
    <img src="https://github.com/devicons/devicon/blob/master/icons/amazonwebservices/amazonwebservices-plain-wordmark.svg" title="AWS" alt="AWS" width="40" height="40"/>&nbsp;
    <img src="https://github.com/devicons/devicon/blob/master/icons/git/git-original-wordmark.svg" title="Git" **alt="Git" width="40" height="40"/>
</div>

7. Adding Social Links to Your Github Profile README

[![](https://img.shields.io/badge/LinkedIn-blue?style=for-the-badge&logo=linkedin&logoColor=white)](<your-linkedin-profile-url>)

[![](https://img.shields.io/badge/Twitter-blue?style=for-the-badge&logo=twitter&logoColor=white)](<your-twitter-profile-URL>)

8. Adding GIFS to Your Github Profile README

On this section, we will be adding social network badges to your github profile readme. On clicking this badges, it redirects users or visitors to their respective social networking sites. Badges of various social networks like Instagram, Facebook, Twitter, Medium (blog site), etc. But for this section, we shall only focus on two: LinkedIn and Twitter.

To get the respective badges for each social networks, we’ll use shields.io which provides various endpoints letting users create and customize social media badges. We’ll use the URL and pass additional parameters to this URL to get the respective social media badges.

The Gif used in this section can be found here. I found this GIF on Giphy, which is full of free GIFs to use.

Go to the GIF Link and click on the Share button and then Copy GIF Link. We’ll add this copied link to an HTML img tag to display it in the Markdown file. We’re using the img tag as it’ll help us specify the width of the image.

In the Github file editor, replace the README.md file content with the following code:

The first parameter we will pass is Label(This represents the social network site name that will appear on the badge) and Color (which represents the color of the social network badge respectively). Label-Color

In the case of our example being LinkedIn and Twitter, their color will be blue.

When the parameters listed above (Label and color) are combined with https://img.shields.io/badge/, the following URLs are created. For LinkedIn, https://img.shields.io/badge/LinkedIn-blue. For Twitter, https://img.shields.io/badge/Twitter-blue.

Markdown

![](https://media.giphy.com/media/hpXdHPfFI5wTABdDx9/giphy.gif)

9. Adding Github Profile Summary Stats Widgets

Option 1

Markdown

[![](https://github-readme-stats.vercel.app/api?username=<insert-github-username>)](https://github.com/anuraghazra/github-readme-stats)

Option 2

Markdown

![](https://streak-stats.demolab.com/?user=<insert_github_username>&theme=dark)

Option 3

Markdown

![](https://github-readme-stats.vercel.app/api/top-langs/?username=<insert_github_username>&theme=dark&layout=compact)

10. Hands-On Practice Activity

Update Your GitHub Profile README

Using the tools and examples provided, update your GitHub profile README.
Include at least one widget, a skills section, and a personal introduction.

Share for Feedback

Post your updated README in your team channel to receive feedback from peers.

You should now have your own github profile and should be equipped to help others make one as well. In the next lesson you will learn Github website creation.

Notes

Remember to keep your github profile readme up to date. Treat this page like a resume and portal to your portfolio for employers to find. This is a tool for finding work. Think to yourself, “If I were an employer, what would I need in an employee?”. Whatever the answer to that is, convey it in your README.