Show Your Code: Use Github to Maintain Your Code Portfolio

Designers are used to maintaining some sort of portfolio to showcase the work they’ve done in the past. In fact, classes taken as part of a higher education degree program in this area will even have at least some focus on helping its students build some sort of portfolio. It’s a tool used to prove competency when the designer is ready to find work. It’s just part of being a creative.

Github has been taking progressive steps to making it easier for developers to build and maintain a similar type of portfolio. A code portfolio. Last week, more additions to the Github profile pages were released. It’s now more clear to see a developer’s contributions to different open source projects. This update isn’t necessarily ground breaking, but it does show Github’s continued effort to do more to allow for a developer to track and show off their work.

What is Github?

I think a little clarification is in order here. I’m certain Github is used regularly by some of you, but I’m guessing that a good portion of you aren’t quite sure of the problems Github aims to solve. Here’s a super-brief explanation.

Github is essentially a visual representation of the software version control system called Git. It was developed by the Linux development community, and lead by the creator of Linux, Linus Torvalds. They weren’t happy with the current version control systems available at the time so they built their own.

A version control system allows for developers to work on a code base in a more efficient manner. It allows for safer feature development and makes working with a team on the same project much, much easier. It’s obviously a lot more complicated than that, but that is the general idea of version control and Git.


Github is basically the visual representation of Git. Git itself, while very useful, can be a pretty tricky thing to use on its own. Github’s biggest purpose is really making the Git version control system much, much more accessible.


With Github, developers can push and pull code from a central repository and also gain a visual representation of the work done on said code repository. If a contributor makes a change, it is completely transparent as to who made the change and exactly what that change was in a very clear manner.


Another very cool thing that Github has made easier is contributing to another developer’s open sourced code. Yes, you can work on your own private repositories and work with your own team as well. If you explore Github you’ll see a ton of open source projects. Developers can manage requests by anyone to contribute to that code in a very organized manner. A good example of this is Twitter’s Bootstrap framework. There are a lot of developers that have committed code to this project.

Show Your Code

It hasn’t been necessarily difficult for a developer to show off a functioning project that they worked on, but there as been room for improvement. Including a link to an app on your personal website could be sufficient, but going much deeper to actually show off the code that was used to build an application or site hasn’t always been that easy. And showing off contributions to open source code was even more difficult. Of course, there are ways, but Github has seen an opportunity to provide developers with some serious tools to show off the work that they have done.

Github launched redesigned profile pages for developers in September of last year. The idea was to provide more of a personal feel, which was lacking. The features included larger avatar images, displaying public repositories the user has created and contributed to and a public activity feed all on a user’s profile page. The idea is to provide the developer with a single area to show their development work.

Let’s take a look at the profile of github-profilemain

We can see all of the repositories that Paul has contributed to since he became a member in 2008. The feature that Github launched last week is that of the visual graph displaying open source contributions. It’s a pretty cool way to get a quick visual snapshot of a user’s contributions over an extended period of time. Further down the page you’ll see feed of contribution activity.


Overall, it is a portfolio for Paul Irish. It’s showing a historical representation of his development work. If you’d like to dig deeper and actually look at the code he’s committed, that is all just a click away.

Designers Can Show Their Code Too

I think it’s pretty clear how beneficial this can be to a developer trying to display their work to a potential employer. The employer can see their specific open source contributions as well as an other projects the developer has created. And not only are the projects visible, they’re visible on a very granular level displaying each individual contribution. This is some really great information to show developer competency.

Let’s look at this from a font-end designer and developer perspective as I’m guessing we have more readers falling in that category. Being a web designer these days almost requires you can write some font-end code (HTML/CSS/Javascript) and Github is a very useful tool even with less complex, more standard, website projects.

The font-end development the code that you do write should be analyzed by any prospective employer. A nice looking, functional website is great, but how you got to that point is really important. There are definitely multiple ways to achieve the same goal, and as with other software development, there are better ways and not so good ways of solving the same problem on the font-end side of any project.

As an added bonus to providing a nice view into your code you’ll also be showing that you are capable using a version control system, Git and Github. As simple as Github makes things, I can tell you from personal experience, that even a basic level of comfort with the system is a big badge you can wear as a front-end designer and developer.

Final Thoughts

Github released a fairly basic feature last week to better show a user’s contributions to open sources projects. That particular release made me take a step back and look at what they’ve been done in the recent past to make their services even more useful and beneficial.

Not only has Github made the use of version control more accessible it has been in a continual process to add more useful features to developers of all kinds. The fact that they’ve been putting more thought into their user’s profiles shows that there is a trend toward showing off your code. For software developers it is absolutely a part of your portfolio and Github is making it much easier for you to show off what you can do. And as a front-end designer and developer it’s becoming easier and easier to show your complete work and process in the websites that you build. The end product is certainly important, but how you got there is just as important.

Github is a complicated and incredibly feature rich service and I’ve only scratched the surface here in an effort to specifically explore this notion of showing your code. I’ll go out on a limb (though probably not a very long one) and say that if you aren’t using Github for your projects (personal or public), you absolutely should be. No matter what type of code you’re writing there are immense benefits to you from a wide variety of angles. There is a learning curve, but your workflow will be better and more efficient for it. You’ll be more capable of jumping in and collaborating with a team. And hey, as a bonus you’ll be building your portfolio of code.

Jumpstarting a Design Community

Understand Your Compensation

Designer Monoculture

The State of Design Leadership

The Science of Product Design

Interview with Michael Flarup: Co-Founder and Lead Designer at Robocat

The Importance of Design Conventions