How To Create a Compelling Github Portfolio

Getting to talk with various developers and tech leaders is one of the perks of being in IT headhunting. I have become close friends with many of them over the years, and as such, pick their brains on many areas of programming. In one of my many recent opportunities, I got the chance to discuss the need for a programmer's online portfolio and simple ways to create one that'll work for anyone.

 

As the niche is becoming increasingly popular and demand for tech talent keeps growing, both fresh-out-of-college graduates and budding programmers are looking to scale up their careers. It's a competitive world out there, so it's important to not pick up new programming languages, but also learn ways to be competitive in a fast becoming-crowded niche. That said, one of the easy ways of building your online portfolio is by adopting GitHub pages.

 

Apart from being technically free and having a platform to showcase your work to potential employers, you also have the opportunity to share your code making it possible for those better than you to contribute to your work. If you’d like to know more, here’s how to create a compelling GitHub portfolio.

You need a programmer’s portfolio.

Unless you are very new to the world of coding or programming, if you write code, intend to solve problems, or perhaps make money from programming, trust me you need a portfolio. It allows others to see what you've achieved with the skills you've acquired over time. Does it sound like something a resume can do? Nope, don't even go there. 

 

The programming niche is so competitive that you need what will set you apart from the next person. Yes, a resume can get you an audience with an interviewer, but that's usually how far it'll carry you, especially you've been in the coding/programming world for a while.

 

Recruiters in tech businesses are looking for the best, even at fresh-out-of-college or newbie level. What's more, because programming is a hard skill-applying area, hiring managers prefer those that have verifiable and convincing experience in applying the programming language they have learned. Let's face it, showing is better than telling and that's what a programmer's portfolio does.

 

Why GitHub?

Programmers that understand the importance of having a portfolio are all over the world, looking for the best option to create the website that will effectively showcase them. Trust me, if you are new or perhaps do not have that aesthetic eye to create your eye-catchy and impressive website from scratch, it can be a bit challenging. A relatively simple option of creating your portfolio might not be a bad idea. This is where GitHub comes in. 

 

GitHub is a hosting service that accommodates remote Git repositories. It takes CSS, JavaScript, HTML files right from a GitHub repo. Beyond just showcasing your work for recruiters to evaluate your competence for a job position, GitHub allows you to host your repositories, manage them, contribute to a community of open source code, and also share your written codes with others. This way, you can get free, useful contributions for your project that can lead to quick improvements you may ordinarily require significant time to crack by yourself. 

 

An environment like GitHub has helped many programmers break the impostor syndrome as there’s no point hiding what you’ve learned and built because you are afraid of not being good enough. What’s more, many recruitment managers have confessed to being more impressed and convinced by a candidate’s work maintained on a public community/forum like GitHub.

 

Another cool thing about GitHub is that you can host your portfolio for free, in addition to having access to a large and equally free audience. Now that you get why you need a portfolio and how GitHub is a great option, let's get you up to speed on how to create your unique portfolio even if your knowledge of programming languages like HTML and CSS is a bit rusty.

 

Step 1: Install Git.

Depending on the type of your operating system (Windows, Mac, Linux), GitHub requires the use of Git. So the first thing to get started is downloading Git and getting used to it. You might want to know that Git is strictly a command-line tool by default. However, depending on your preference, you might be interested in adopting an Integrated Development Environment (IDE) for the management of your Git repositories and easy coding.

 

Step 2: Prepare the projects or works you want in your portfolio.

 

• Course works, assignments, and mini personal projects.

This one is particularly for you if you are a newbie and perhaps fresh out of college. It's time all those programming assignments, from written binary search algorithms to the basic version of the poker game you designed will come in handy.

 

If you happen to have participated in a programming competition or some sort of app challenge back in college, as a team or solo, your portfolio is a good place to share how the competition went. If it was a team effort, it's a good way of showing your ability to work in a team. Altogether, if the competition was a success and a big deal, yeah, you don't want to leave it out of your portfolio. After all, academics show off, conferences and academic competitions they attended for the advancement of some scientific idea.

 

On the other hand, if you are a self-thought programmer, perhaps with a couple of mini-projects you are not too proud of, now is the time to put them together. Yes, some of these projects might not be of the best quality, but it proves you have been busy, and know your way around the basics of source control. Another thing that'll be useful in using Git. 

 

• Real personal work, and freelancing works.

If you have been coding for a while, you may have projects you executed solo for a client, a joint work, or something personal as a drive for applying your skills. The truth is, If you are truly passionate about programming, personal projects are a must even if you don’t have an 8-5 job or never did any freelance gig for a client. A programmer that is devoid of personal projects to show maybe unconsciously telling recruiters they are not that passionate about solving problems or programming altogether.

 

• Blogs or Vlogs.

Many people, including tech and non-tech folks, are blogging as a hobby and a money-making venture. If you have created one, whether to blog about the trend in the tech world or something not related to IT, it can be a good way of showing your hobbies and proactive nature.

 

• Don’t have any projects? Start experimenting

If you are totally new, perhaps crossing from a different industry like bioscience or even finance, and hence, have no college coursework or project to show, it's okay. Many developers are not college graduate these days. However, you might need to get hungry so that your portfolio doesn't look scanty. 

 

You don't have to be in hurry to create the next multi-million dollar app, so start with small projects, so you don't at least, remain at "Hello World." I recommend choosing a project that is relevant to the field you wish to settle in. Yeah, starters often take some time before settling down, so I understand if you feel like dabbling into everything for now. Whatever you do, you'll do well to jump at projects that add value or solve problems.

Step 3: Create Your Portfolio.

 

• Choose your portfolio template.

This step may not apply to those who know their way around developing a website. Simply get your hands cooking with some CSS and HTML and proceed to the Github section in the following steps.

 

Choosing a portfolio template is an easier way to create your programmer's portfolio if you are not a web development guru and also want to avoid the risk of doing something boring. Therefore, selecting a portfolio boilerplate with an HTML template is your first stop. Google can be of help here if you don't know where to get one. Simply search for "free HTM boilerplate templates" or "HTML free portfolio templates."

 

If I'm permitted to recommend a template, HTML5up is a fantastic option. You are probably going to need images, so it's good to let you know that the HTML5up template doesn't come with images. Nevertheless, that's not a problem as you can access anything you need from another website. For example, Unsplash is a source of many high-quality, free and usable images.

 

• Set up an IDE or code editor.

As mentioned earlier, Git is a command-line tool by default, so a code editor will come in handy once you have chosen and downloaded your desired template. Visual studio code or VS code comes highly recommended here as a free code editor, optimized for writing codes, creating and debugging both web and cloud apps. Basically, it makes it easy for programmers to write codes. Another option is PyCharm or Atom. The IDE/code editor will help you create your needed CSS and HTML files.  

• Modify the template code

While you are not creating a whole website from scratch here, this step requires a little bit of HTML. Once you are done with steps one and two, all the modifications you want to do can be found in  index.html. Open a folder in the IDE you chose and extract all the files. 

 

From your IDE, you can now go to the index.html module. You want to right-click anywhere and select open in the browser. This way, you can see the code you are modifying any the resultant changes in the browser page. Examples of modification you can do to customize the template include:

 

Headers/titles, Tabs, links, images, etc. 

For headers or the website title, locate the header (code) that contains the website title. You should expect HTML code that looks like this: 

 

<h1>This is<br />

Massively</h1>

 

For example, to modify this website title, every text in between h1 can be replaced. I would change to read  <h1>My Portfolio</h1>. Note that this is just an example, so you can always personalize however way you want the website heading.

 

For further modification, you should have some sort of paragraph after the header. This one can be modified to read a subheading about your portfolio.

 

The template paragraph will likely look like this <p>A responsive template.</p>. Though the text between the <p> may be different. You can change the text to whatever you want like the below:

 

<p>A tour of my freelancing journey and experience.</p>

 

You can get creative by creating sections for your major/paid projects, freelance work, personal projects, group work. You also want the view of your portfolio to know about you as a person. So a statement about your goals, awards, hobbies would not be a bad idea. What's more, a section to show proof of your works like 

 

• Push your code to GitHub.

Now that you have something significant in your portfolio, it's time to push your code. If you have not created an account, do so and login. On the right top corner, click the Add (+) icon and select "new repository" in the drop-down. In the box with the tagged repository name, enter the name you wish to label your new repository. At this point, what you've learned from knowing how to use GIT and input command will come in handy to push your code. After pushing your code, you can refresh your repository.

 

• Go live on GitHub pages.

Again on the far right corner of your repository, click on the settings. Under the GitHub pages, you’ll notice a link that reads your site is ready to be published. Clicking on the link will host your website live on GitHub.

 

The next steps are totally up to you.

You are free to do anything on your portfolio. From adding new projects and accomplishments to jumping on new research or idea, the stage is yours. What's more, you can decide to modify the CSS and HTML files to introduce more personal preferences.

---

 

I hope you found this article useful. Here at Cloud Employee, we assist both developers looking for work and companies looking to hire dedicated offshore developers across many technologies. Talk to us, learn more about how Cloud Employee works, or see our Developer Pricing Guide.