Ok from here you have 2 options. You can use the terminal (command line if on PC ) to push files to this space or download the Github application for your system.

I used the method which made the most sense to my workflow, which in this case was the terminal.
An obvious point to note is that your website should be all in 1 folder, just in case you have missed that very basic web design step.

Ok in the terminal change to your project directory/folder by passing this simple command:

    cd /insert/your/project/directory/portfolio

A nice trick, to save your fingers typing out every path is just to type cd in the terminal, find the folder and then drag it into the terminal window. Boom you have the path.

Now hit enter. You are now inside your website folder.
Ok we need to initialise Git pass the following command by typing and hitting enter... From now on assume if I say pass a command that you hit enter... cool? ..Great.

    git init

We now need to setup a remote origin. This basically tells Github where the files that will be in your repository came from.

     git remote add origin https://github.com/yourUserName/YourRepositoryName.git

Awesome you are doing really well, next we need to make a branch to store our files withing the repo. To do that you pass the simple command:

    git checkout -b -gh-pages

This makes a new branch with the parameter -b with the name gh-pages. This is really important. In Github there are 2 types of pages: User and Project. You can only make 1 user page BUT your can make as many project pages as you need. If you do not call the branch for your site gh-pages it will not work.

If you need to check the status of your repo, like did I delete or upload files you can by passing:

    git status

Run this command followed by:

    git add .

Remember the . this adds all the files in the directory. Only two more commands and you will have a fully functional website!!

Next up we need to tell Github why these files were uploaded. So we might give it the tag original or version 1 or something meaningful to you.

When you have thought of something pass this command:

git commit -m "orignal commit"

As you can see, I'm just giving mine the tag original commit.
Finally we need to "push" the files to Github with one single final command:

git push origin gh-pages

You will probably see lots of file paths whoose up the terminal window. Don't fret that means that it is working. You will be able to see how fast the transfer is in the final lines of the terminal.

Upon completion you must wait 10mins before your site is live. You can check that the files entered your repository correctly by navigating to your github page and clicking on your repo.

        github.com/yourUsername/yourRepositoryName

    Mac Only 10.8+ => hit F3 and move cursor to far right click "+" button

What are the differences? Basically a responsive site works off a single css file that scales content based on the screen size. An adaptive site on the other hand keeps several css sheets for different resolutions. Each sheet is utilised when its respective viewport is selected.

I decided to go with the responsive method as I have created other websites with this method in mind. That is not to say that an adaptive system would not have done as good a job. It is just a matter of taste. Click here to see some responsive frameworks I recommend.

To speed things up I used a responsive framework named "Element". It is just a grid css file. With the basic grid defined I could start customising and creating my design.

After coding out my design I had a few little tweaks that needed to be made. To show off my programming I employed a two stage design structure. The first of which is now completed. On one side of the page is a code editor viewer, where my code is displayed and on the other is a description of what the code does. Stage 2 will include a code highlighter that on mouseover or touch will change a graphic which illustrates what the code does.

I thought this was a very important addition that is not utilised on code portfolio sites like Github to-date. For the programmer, seeing clever well written code is enough but to business people who may not know what this jibber jabber does, a graphic is much more appealing.

To get the code editor working I used a javascript plugin called "prism.js". This is a syntax highligher. I later added a custom script to add the line numbers.

To accept touch events instead of mouse events I included the moderniser.js plugin in my code.

However possibly the most amazing use of javascript I came across was handlebars.js
This I used to make http calls to the behance API.
How is that useful?
Well as I mentioned in my first post a lot of my digital content is scattered across different services. Now on design principle it does not make sense downloading all this content and re-uploading it to a new host with my new site. It has a home. Why not utilise it?

Behance offer a very good api, where once you have signed up for a developer account and snatched your api key you can dibble dabble in some very cool projects.

If you have never tinkered with api's before, at first glance you may be put off, but believe me they are really awesome once you get the hang of it. CodeAcademy is a elearning site that I constantly sing praise for. The tutorials are well written, the interface is fresh and it is interactive. As a code learning experience it is a must and whatmore they have plenty of very nice API tutorials to get you going.

Yes was the answer, however :

Oops.. not many places.
Then I got an idea. Why not host the site as a Github repository?
The only downfall is that Github pages do not accept dynamic pages... hmm only half the battle.

Knowing that I had a fully functioning host though spurred me on to the design phase. Perhaps I might realise just how much could be achieved with a static site.

I began the process with my little brown sketch book (where most of my creative ideas are journaled). Before building the first phase I mocked-up the site using photoshop. I have put a sample of my WIPS from this stage on (behance) [behance.net/jheff/wip].