Leveraging Github as Your Technical Portfolio

While it takes time to progress in your expertise with git as your version control tool, Github has some features you can use to start your portfolio on day 1 (or day 1001) of your journey.

Leveraging Github as Your Technical Portfolio
Photo by Roman Synkevych / Unsplash

It doesn't take very long to hear "git" and/or "Github" after taking the dive into the realm of software development. While it takes time to progress in your expertise with git as your version control tool, Github has some features you can use to start your portfolio on day 1 (or day 1001) of your journey.

Level 1: Github Profile README

A screenshot of Jeseekia's completed Github profile including the profile README feature.
This is my completed Github profile including the profile README feature.

The Github profile README is a simple way to highlight yourself outside of showcasing your project repositories. You don't need any experience with git to get started with this.

On Github, Markdown files such as README.md are used to display formatted text in the browser and are used throughout repositories to create webpages. These files are primarily used to describe projects and serve as documentation, but now we can actually create a README for our Github profile itself!

As soon as I saw the option to use this feature I jumped on it immediately because it means that I can have more than just a 140-character bio to tell visitors more about myself and my interests. I can even point people towards my work outside of Github.

In order to create your profile README as I displayed in my screenshot above, you will need to create a repository with the same name as your account. So in my case, I have the username jeseekia, therefore, I created a repository named jeseekia and initialized it with a README file.

Step 1 - Create a new repository 🐣

Select the "New repository" option in your dashboard to create a new repo

Step 2 - Initialize a repository using your username with a README file ✅

Match the repository name to your username exactly and check the "Add a README file" option

Step 3 - Open your README.md to edit using the Github.com UI ✏️

Click the pencil in the top right of the README.md file to open editing mode in the browser

Step 4 - Customize your README.md using Github-flavored Markdown 👩🏽‍💻

Use the contents provided as a starting point to customize with proper Markdown syntax

Markdown is a simple to use syntax for formatting text files. Markdown files end in the .md extension and are used in a variety of applications. You can view all of the Github-flavored Markdown syntax in their docs here or by Googling for "Github-flavored Markdown".

Step 5 - Commit your changes and enjoy your updated profile! ✨

In the spirit of keeping an updated profile I went ahead and updated my newsletter link to this site and verified our Discord server invitation in link is still active.

The great thing is this special repository still works like your others. So you can clone your repo and manage your updates from your computer as well.

Level 2: Pinned Repositories

So once you've created at least 1 repository that you want to highlight on your profile, I recommend you begin using profile pins.

Overtime you accumulate repositories varying in purpose. Some are just to test out a library you discovered. Others may be temporary projects that you worked on in a class or while completing your bootcamp. Sprinkled amongst these are the gems that you really want your profile visitors to focus on.

Once you've done the work of getting someone to come and checkout your code, instead of leaving it up to them to decide which projects they should look into, go ahead and pin the most important repos up top.

Step 1 - Customize your pins

To switch from Popular repositories to Pinned choose "Customize your pins" above the section

Step 2 - Select up to 6 repositories

Select up to 6 repositories to pin and save to see the updates

Step 3 - Drag and drop your pins to reorder them

Click on the bunch of dots in the top right corner of a pin and drag it to reorder it in the group

Level 3: Set your personal Github domain address

This feature has been around for quite a while, but is best to use once you're comfortable with creating webpages and managing the project structure in your repository. That said, if you're looking for a free option to host your portfolio website online, Github pages allows you to host static sites and reserves a custom github.io domain for you as well!

This time you will be creating a repository based on your username as well. In this case <your-username>.github.io matching the domain address that will be assigned to you. For example, my account is jeseekia so my repository is named jeseekia.github.io with the matching domain address being enabled for that repository.

I've demoed this often this past year so mine doesn't contain much as I usually only get the bare minimum html setup to cover the feature.

However, below you can find the post to a live event I planned to walk through the process of setting this up in detail.

Launch Your Personal Github Pages Website (live Sept 6 @ 6p et)
Technical & soft skills to grow as a Software Engineer by Jeseekia Vaughn - Sr. Software Engineer, Developer Educator & Aspiring ML Ph.D.

Following the project setup we will be showing how to use Next.js to deploy a site if you want to see how Github pages supports frameworks for static sites hosted through their service!

Learn to use Next.js with no React Experience (live Sept 21 6p et)
Join me live for a walkthrough of Next.js and intro to React.js fundamentals

I hope these tips helped you and inspired you to develop your Github profile into the centerpiece of your technical portfolio!

I look forward to sharing many other resources just like this. Comment and let me know if you have questions or want to see me cover other topics in future updates!