How to Create a Polished Data Portfolio in GitHub Pages

Recently, while scrolling through LinkedIn I stumbled upon a comment of a data newcomer who was confused about the concept of a data portfolio. Data portfolios seem to be a must in the industry - especially if you're looking for a job. And they are - your portfolio is like the proof that you can do all those amazing things you claim you can do. The data field is largely a technical field, which is great if you actually have technical skills. The only thing left for you to do is showcase these skills.

This is where the portfolio part kicks in. In its essence a portfolio is simply a collection of all your analytical work. If you're in analytics, this probably means having a medley of your projects in GitHub or Kaggle. Where is this issue though?

This is my own personal profile on GitHub. It doesn't look very presentable, does it? You don't get any notion of who I am, what I do and what I want to show you. Let's move to the repo's page:

The repos page doesn't look any better. You wouldn't know where to look for my best projects, also all the repos I've ever forked are here too. This is not the fundament for a great first impression.

This is where GitHub Pages comes in to the rescue. In the next paragraphs we'll go through a full tutorial about how to turn your collection of GitHub work into an actual user friendly and visually appealing portfolio.

Getting started with GitHub pages

To create a portfolio using GitHub Pages and use an HTML template, follow these steps:

1. Create a GitHub account

If you don't already have one, go to github.com and sign up for a new account.

2. Create a new repository in GitHub

Once you're logged in, click on the "+" sign in the top-right corner of the GitHub homepage and select "New repository." Give your repository a name, like "username.github.io" (replace "username" with your actual GitHub username). Choose whether you want to make the repository public or private (public is recommended for a portfolio). Initialize the repository with a README file by selecting the checkbox.

3. Find an HTML template

Search for HTML templates on websites like HTML5UP (https://html5up.net/) or ThemeForest (https://themeforest.net/). Choose a template that suits your style and requirements. Download and extract the template files to a folder on your computer.

4. Copy template files to the repository

Copy all the template files (HTML, CSS, JavaScript, images, etc.) from the extracted folder to your repository. You can do this by either dragging and dropping the files into the repository (which is tedious) or using Git commands to clone the repository locally and pushing the files from the local machine to the virtual repo. I personally feel adding manually is error prone, so I did it using Git Bash.

A short version of the steps is:

• Clone the remote repo to the local machine

• Add the template files to the local repo

• Push changes to remote repo

Now I've got my Git all set up with corresponding SSH keys and the whole ordeal. So there are a few extra steps before these, but that's different topic.

Here's the result once I've uploaded the template to the repo and loaded the site:

5. Customizing the layout

This step requires some knowledge of HTML and CSS. You're not expected to know all this, so you can ask Chat GPT for help in the editing. Here's what needs to be done:

Edit the index.html file: Open the index.html file in a text editor and customize it according to your needs. Update the content, images, and any other elements you want to include in your portfolio. Follow the instructions provided with the template to make the necessary modifications. You can also edit the html directly in GitHub (not ideal) like I've done below for the sake of showing you:

6. Commit and push your changes

Once you've finished customizing the index.html file, save it, and go back to your GitHub repository. Click on the "Upload files" button and select the modified index.html file from your computer. Add a commit message describing your changes and click on "Commit changes" to push the file to your repository.

7. Set up GitHub Pages

Go to the repository's settings tab and scroll down to the "Pages" section. Under the "Source" heading, select "main" or "master" branch (whichever you used) as the source for GitHub Pages. Click on the "Save" button, and GitHub will build your site.

After a few moments, your portfolio will be accessible at "username.github.io" (replace "username" with your GitHub username). You can share this link with others to showcase your portfolio.

How to update your portfolio: Whenever you want to update your portfolio, make the changes to your code locally, commit the changes, and push them to your GitHub repository. The updates will be reflected on your live portfolio shortly.

By following these steps, you can create a portfolio using GitHub Pages and customize it using an HTML template that you find online. Remember to comply with the licensing terms of the template you choose and give appropriate credit if required.

That's it, folks, I hope this was helpful! Below you can see how the changes I mage in the gif above reflected on the website created by GitHub. I haven't played around to finalize it, but hopefully by now you get the idea!