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.
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
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 🐣
Step 2 - Initialize a repository using your username with a README file ✅
Step 3 - Open your README.md to edit using the Github.com UI ✏️
Step 4 - Customize your README.md using Github-flavored Markdown 👩🏽💻
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
Step 2 - Select up to 6 repositories
Step 3 - Drag and drop your pins to reorder them
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.
Jeseekia Vaughn
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!
Jeseekia Vaughn
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!
Comments ()