The Daily Blog Club

New website!

My new Portfoilo

Introduction
This blog is the written documentation of the project undertaken as a mandatory requirement for the 2nd Semester exam for Multimedia Design and Communication at Zealand Institute of Business and Technology – Nykøbing Falster Campus – class of 2014 (MMD NF2014F).

Inspiration
It all starts with looking for inspiration. One crucial error that I found when I looked for inspiration was, that the front page of alot of the portfolios out there started with the “about me” page. In my opinion a portfolio should start with what you have done not who you are, but I did find a lot of good inspiration for my idea on this links:
http://www.awwwards.com/websites/big-background-images
http://temgallery.com/interior/portfolio-website-design-inspiration-2013.php

My thoughts / My Idea
Even though it has been stated that I have to make this portfolio to show my future companies or a “company” what I can do, I have to admit that this assignment I didn’t just do for their benefit, but for my own as well. I wanted to create something unique and something different from all the other websites that I’ve done. So instead of creating a traditional navigation that you usually see at, the top of the page I decided to do something totally different, by creating the navigation at the bottom of the page, with round silver buttons, and arrows at the site of the page, that you can use for navigation as well and with big background images. As you can see below:































































Design thinking.
Once the basic layout were finished, began the design process for every page. For the front page I wanted to show both sides of my knowledge (design and code.) On the left side a round art-image and on the right side an image of my computer with code on it. That was the first draft of the front page:











For the about me page I wanted to create an image of myself. On the left side a digital drawing and the other side a normal image of myself and then merge them together to create one full image of me.












For the contact page I wanted to add three ways to get in touch with me. One way where you can write questions or just want to say hi. and one where you can ask more professional questions, for example if you want to start your own online business, and a third if you would like to shake hands (that function is only added to show how you could do it if you had an office.) For the background I added a globe to the left side to illustrate that you are on the contact page, and made the contact buttons round to match the design.












On the blog page I wanted to add a headline so that you can see what’s new and under the headline two links: One that would led you to my google doc “blog” where you are able to read new projects, and the second link would led you to to my previous work. I also wanted to add a date so that the user can see when you last updated your blog. On the background I added a bookshelf in the left side just like the rest of the pages in the portfolio.













Let’s get technical
In the description it stated that I had to update my WordPress portfolio but since I’m going for a frontend developer internship/work and I wanted to create a unique and customizable website. I decided to try to make my own WordPress theme without the knowledge of PHP, which turned out to be a huge challenge because you can’t do that without knowing just a little bit of PHP. The way I did it was that I found a theme called HTML 5 blank which is what the name states a blank WordPress theme, where you can put your own code in. So in that way you are able to customize It the way you want, with your own code. But there was a lot of debugging along the way.

The first problem that I ran into was that I’m using a framework called bootstrap which is a responsive 12 column grid system. I have to add that to the theme. I could solve most of the problem with a simple plugin, but I also had to add the path of bootstrap in header of the theme in order to make it work as you can see below:













The next problem I ran into was that I’m coding with a plugin called wow animate which is a bunch of JavaScript code that makes it easier to add animations to your page without having to code all the JavaScript code from scratch. In order to get that working, I had to add the wow animate script not only in the header.php but also in functions.php in order to redirect the path so it was able to find the .js file.













Conclusion
There was a lot of changes along the way but that is something that I’m used to. Since I started working with a modified version of the ‘Agile’ development model, where you work in tight circles and embrace changes that might come along the way. This was NOT the easy way, finding the right wordpress theme instead of building my own would have bought me more time to get the last pieces of the puzzle to fit. But then it wouldn’t have been something that I have build. It was a good learning experience, I got to play around with some php code and got more comfortable with wordpress. Overall I’m happy about the end result.

  • something
  • something
  • something
  • something
  • something