After much deliberation, considering possibilities from building my entire portfolio platform from scratch to using WordPress, I've finally decided on using Ghost to build my portfolio.
The reasoning is as follows:
I need to get this portfolio up fairly quickly, so I can start documenting the projects lined up this summer.
Ghost is open source, well maintained, and written in Javascript, which I am more familiar with than PHP (WordPress).
The front end creation process seems to be well streamlined and can be learned fairly quickly, which will allow me to create a custom UI to my liking. Currently, there are plans for 2 sections - my projects as well as my travels but I am sure this is bound to expand in the future as my hobbies change. The portfolio has to be able to adapt to this.
I will be working on completing the front end in the coming days.
Update 1:
So I bumped into the first hurdle while building the front end today. There is a design philosophy known as "progressive enhancement", meaning that ideally anyone on any browser should be able to access the "basic content and functionality" of the page.
Apparently, there is about 1% of users who don't have Javascript enabled and as a believer of progressive enhancement, I had to come up with a solution. The UI I designed relies on JQuery to do some initial formatting in order to account for the nav bar at the top. If the user did not have JS enabled, then s/he would have a hard to seeing the blog title, as it would be partially hidden under the nav bar.
To accommodate the 1%, I have decided to remove the static nav bar feature, eliminating the need to javascript intervention. To achieve this, I associated a class of no_js to <html>, and removed it at the beginning with JS. If the no_js has not been removed, that means the user does not have JS enabled. An additional CSS file was created to handle the styling for the 1%.
Update 2:
Much work has been done in the way of finishing the front end. I have pretty much finished the home page and am now wrapping up the "Projects" tab.
The vision I have for this website is that it will be clean and lightweight. The aesthetics will rely heavily on minimalism, but it should be unique and pleasing to the eye. Additionally, it should be reminiscent of a real world portfolio.
A picture is worth a thousand words, so I decided that the projects tab will be styled like a gallery where there will be representative pictures of each project. When the user hovers over the picture, a title will come up or perhaps a short description. The immediate problem with this is that mobile users won't be able to hover over the pictures, so a title will have to be displayed on top of the pictures. The next design choice is how to layout the pictures. Since I don't want to be tied down with uploading pictures of specific orientation or aspect ratio, the best solution is to use a masonry style layout. The downside to this is that it requires Javascript. Going with progressive enhancement, I am going to first lay out containers in a fixed rectangular grid with pre-specified aspect ratio, then fit the pictures to said containers. It isn't as pretty as the masonry layout but should get the job done for non-js users.