All the incipient thoughts about design and portfolio can be read in the design page. It’s a part of  exercise from lecture #4, #7 and #8.

Here I want to explain the process from ideas to the WordPress template. The research work after having a idea about the design was about to find a responsive design with the right color and which is based on Twitter Bootstrap. I’ve never tried it before, so it’s a great opportunity to try out the Bootstrap. I found the Brushed template and began to adjust it to my need. It’s not a WordPress template. Just a plain HTML template, I can modify to fulfill my need.

The cosmetic changes

At the header of the template, it have a image slider with some pictures. I changed it to a full screen video block using the new HTML5 <video> tag. The code using to the video block is written in the HTML & CSS project page. Later on, I added the arrow-down icon to show visitors, that they can scroll down to see the rest of portfolio.

I removed the “Meet the team” section, and replaced it with “About me” section with a background image by me and a small overview of my writings (Blog-posts). The background image is inset using a CSS property altogether with the id “work” which is attached to the section.

In “contact me” I replaced the contact-form with the social links, making the section a bit shorter. I don’t need a lot ways to contact. Just the mail – or the visitors could take a peek into my social profiles.

All the changes in CSS I added myself to Twitter Bootstrap and Brushed template is stored in a independent file called style.css, and it overrides all the other css styles.

The surgery:

At least, I must convert the static HTML one-page template to the dynamic WordPress template with support for multiply pages. The changes is numerous:

• I must add the classes “external” to the navigation links which not links to the same page.
• I must add some php loops to fetch one page at each time and show it in the page.
• I must make a list of links to javascript and css files in function.php.
• I must make a new size image thumbnails to the portfolio section.
• I must make a dynamic nav list with all the tags I am using to categories the portfolio types.
• I must make a generalized page.php to the design page
• I must make a specific page-14.php to the changelog page.
• I must create a single.php file to show my portfolios.
• I must create a loop in single.php and sort out the custom fields, to show some additional information for each projects.
• I must create some CSS classes to make my videos in the portfolio behave responsive.

Most of the changes is explained further in the changelog page.