Sell Yourself With a Compelling GitHub Portfolio

6 min readJun 7, 2022

A portfolio is a composition of records that showcases your skills and attribute, qualifications and education, training, and experiences. It records all your acquired skills and education over time.

In this article, we’ll be reviewing how you can create a compelling portfolio with Git, GitHub, and GitHub pages.

What is a Portfolio and Why is it necessary?

The general purpose of websites is to either introduce a concept, advertise a brand with all its operations, execute functions like sales, and much more.

In essence, websites are created to serve a purpose to fulfill a function that is intended to be made public. Over time, websites started getting grouped with their intention associated with their names.

For instance, an e-commerce website is a kind of website, in which the intention is — to sell the products of a company or brand. Thus, every form of feature implemented on this site serves to better enable this function. This includes features like recommendations, payment gateways, etc.

Like e-commerce websites, a portfolio is a kind of website, but it intends to sell yourself.

Portfolios provide an essential way of showing your competency as you would describe on your resume, but with more freedom and styling. They also give you a better advantage during an interview. In essence, portfolios are used to show growth over time.

Having described what a portfolio is and why it is necessary, in this article, I would further explain the concepts behind, Git, GitHub, GitHub Pages, and how you could develop your portfolio using GitHub pages.

What is Git

Whenever I think of the term Git, here is what comes to my mind.

Git is a free DevOps (Developer Operations) tool used for source code management. It is a free and open-source tool for version control systems used to handle both small and very large projects.

Git makes the process of managing source codes easy, fast, and efficient. It helps developers track changes in the source code and enables them (developers) to collaborate on development in a non-linear manner.

If you’re interested in knowing more about Git check out the reference session for more articles on the subject.

DevOps is a series of development operations that follows an iterative pattern and is used to help organizations deliver applications and services at a consistent pace.

These operations are in a continuous, consistent process which is the junction where both git and GitHub coincide.

What is GitHub

GitHub is a collaborative hub where developers come together to create and contribute to open-source projects.

GitHub is a hub for both open and closed source codes that enables developers to perform the iterative steps of the DevOps operations while managing and maintaining the integrity of the source codes.

The main objective of GitHub is to assist developers to manage their Git repositories. Which can be related to a storage location for their codes.

Difference & Relationship Between Git and GitHub

Git is a version control system that lets you manage and keep track of your source code history. Its operations are invoked via the git command and there are a series of functions that can be carried out by this command. GitHub however, is a cloud-based hosting service that lets you share, collaborate, and manage Git repositories.

Simple put. GitHub acts as a web service provider for your source codes which are stored in buckets called repositories, while Git commands you use to alter, amend, and integrate changes from your local machine to the repository.

Git and GitHub combine marvelously to assist developers, collaborate, share and manage their source codes while each developer can track changes made to their source code as well as make unanimous changes individually without interrupting the flow of the project.

With that covered, let’s explain the concept behind GitHub Pages and how a portfolio can be built on one.

GitHub Pages

GitHub Pages is a static site hosting service provided by GitHub, that utilizes static web files straight from a repository on GitHub and publishes a website with it. ~ docs.github.com

What this implies is that GitHub Pages is a platform provided by GitHub that helps to host static websites for free in the clouds.

That said, the process of creating your portfolio with GitHub has two (2) requirements:

Having a static web page
Having a repository to hold your static web page on GitHub

The Static Web Page

A static web page is not necessary a web page that holds only HTML, CSS, and JavaScript files, but a web page that doesn’t possess the ability to modify itself. The reverse of this would be a dynamic page.

There are two (2) ways to fulfilling this approach.

Writing out the codes
Downloading a portfolio boilerplate from the net.

The first method allows you to be flexible and creative but is time-consuming. The second method is faster and restricted to the design you find.

I would recommend the first step for those under the web domain and the second for those in any other domain. Both steps however require you to be knowledgeable about the use of HTML, CSS, and maybe a bit of JavaScript.

For this article, we’ll use the second approach which involves getting a portfolio template, adjusting it to suit our profile, and then deploying it.

The demo we’ll create here uses the MoonLight Template from templatemo.com, a template sales platform.

The template consists of the following files:

A CSS folder: contains all the CSS files used to style the template.
A fonts folder: contains all the fonts used in the template’s font design.
An IMG folder: contains all the image files used in the template.
A js folder: contains all the JavaScript files used for creating interactivity in the site.
An index HTML file: The HTML structure file where all our styles and markup are mixed to create what we see in the image above.

Different adjustments can now be made to the codes from the files to fill in your information into the portfolio. This is where knowledge of the markup languages comes to play.