Building a web based Portfolio by Bjørn Christiansen

Building a web based Portfolio by Bjørn Christiansen

Building a web based Portfolio by Bjørn Christiansen

A good friend of mine, Sondre Nymoen, recommended me to create an online portfolio in addition to the book edition I go around applying for jobs. Good tips, I thought, and put the brain into a extensive thinking process. It has been a while since I have actively worked to develop a website, so it took some time just searching around for information about how different things could be done and for keeping me updated on the code within the HTML, CSS, JavaScript and PHP. Not only were I to develop a framework for how the page should behave in form of functionality, it also had to look good and provide a good user experience to captivate a possible visitor. There are a lot of consideration I have had to deal with me when I designed websites before. For example, I worked on a project called the International Conference of Ethiopian Studies 2007 at NTNU, where one of the demands was that the page should be adapted to Ethiopia standards in form of download speeds. In 2006 – 2007 were Ethiopia, today, a developing country where broadband was not very well developed. The bottom line was that each page in the site had to be no greater than 20KB per page, which meant much text and few images for optimizing speeds. Another demand was the screen resolution for the target group this project applied. The requirements from the client was to keep me in 800×600 pixels, which in reality meant a maximum around 768 pixels in width. The user experience of the side was also important, it had to be recognizable in relation to navigation and update of the webmasters.

Requirements for the site then, as now I had in mind when I set to develop the new portfolios my Sunday and Monday. I aimed to make each page as small in kilobyte size as possible, but taking into consideration that there is a photo portfolio, so I had to ease the some of the requirements in that to see the pictures on the Internet in the respective size and with the respective resolution must reflect the image files will also be quite large in file size. Reason being is that my target group this time aren’t scientists with regard to Ethiopia, which initially has an interest in my portfolio, but feel free to clients and other photographers with much faster internet access than a dial-up modem.

I’ve also realized that the world has gone a step further in terms of screen resolutions. Since I first posted the google analytics to the statistics on this wordpress blog, only 0.18% run a resolution equivalent to 800×600, a resolution that ends up on a 28th place in my stats. In 14th place resolution is 768×1024 with 0.78% and a 10th place is 320×480 with 1.88% who does not even account for more than 3% of all visits to online my page. For those who do not understand any of these numbers as the first number indicates the width of the resolution of the screen visitors. I have the feeling that the tens place is due to multiple use mobile phones when they are surfing. To create something that as many visitors as possible will be able to watch you should stay within these limits so that the visitor don’t need to scroll both horizontally and vertically to see the content. But for me to get with me the last 3% of users, I took some simple design measures that I have seen a number of web-based portfolio do, converting from vertical to horizontal scrolling. Maybe it’s a more comfortable way to see pictures of in relation to that in western countries read from left to right and can take the contents horizontally.
Some technical challenges were there in order for me to convert to this way designing a platform. I had to take into account that people still wanted to use the scroll wheel to navigate along the side and possibly having to move the mouse very far each time you would get to the last picture in the gallery. I found some JavaScript that worked relatively smoothly. Most are based on jQuery, frameworks I’m not very familiar with, but have an understanding that is very prevalent within the web nowadays. I would also add a little security that people realized that it was horizontal content and did some graphic grip and let the horizontal arrows in every direction. These arrows could pushed and the content, in this case the gallery, would jumped in the direction of the arrow shown.

For the visitor would be having to scroll all the way back to start to navigate to the next category, I let the menu be fixed on the screen while scrolled across. This function is started acting very badly when I tested it on my android phone this morning, but on the other hand I can not account for everything. The menu has a value of opacity: 0.8; which means that it has a transparency of 20%. This I have done only as a design grip and separate me from the rest of the portfolio with horizontal scrolling.

In addition to having created categories of images I have photographed, I have also created a separate category with videos and animations I have made.

Basically, I have tried to keep to the requirements and specifications I have always designed websites with, kept things clean, fast and easy with an option for most visitors to see the page as it originally intended to be seen. I have also tried to keep me within the W3 standard for HTML 4.01 Transitional Loose. Since I wanted the menu transparent, I have had sacrifices an error, the one line of code, opacity, CSS-stylesheet. I hope that the design is so intuitive that I do not have to go into detail what I have done. But there are some questions, feedback or the like, do not hesitate to contact me.

If you didn’t find the portfolio, click here: www.bj0rn.net

photo: Bjørn Christiansen, model: Kristine Hove Røsok

photo: Bjørn Christiansen, model: Kristine Hove Røsok

Earlier this year, namely April, I had a photo shoot with Kristine Hove Røsok studying a Master Degree in Civil and Environmental Engineering at NTNU. Kristine has been a lot infront of my camera during fall 2010 and spring 2011, while I was a student at Norsk Fotofagskole. These photos are taken right before I went to Århus, Denmark, to shoot an editorial fashion series that was a task at school. This series I photographed on free basis to have something to do, a half-baked plan, a little makeup and the models own clothes. It turned out nice at the end.

photo: Bjørn Christiansen, Photographing the Sinar - Realfagsbygget, NTNU Gløshaugen

photo: Bjørn Christiansen, Photographing the Sinar - Realfagsbygget, NTNU Gløshaugen

photo: Bjørn Christiansen, Photographing the Sinar - Realfagsbygget, NTNU Gløshaugen

photo: Bjørn Christiansen, Photographing the Sinar - Realfagsbygget, NTNU Gløshaugen

The Sinar F2 on location. This is the last part of my series with the camera, both in studio and location for now. The series was taken during the photo marathon we had at school.

Photographing for Hipster.no

Tonight I am hitting the cinema to watch Tron: Legacy with my friend Sascha Njaa before visiting Kos Bar&Lounge at 00:00 and Vega Club at 01:00. Dress up, put on the happy face and get photographed.

photo: Bjørn Christiansen, Sinar - Large Format Camera

photo: Bjørn Christiansen, Sinar - Large Format Camera

photo: Bjørn Christiansen, Sinar - Large Format Camera

photo: Bjørn Christiansen, Sinar - Large Format Camera

photo: Bjørn Christiansen, Sinar - Large Format Camera

photo: Bjørn Christiansen, Sinar - Large Format Camera

Since last post much has happen on the project, “Give Wall-E Life- to Sinar”,I am working on. I’ve done post production on fourteen photos, both studio / product done Wednesday afternoon and the shots on location I did yesterday. I went for the cool, blue style I almost always use on my photos. They are all in black and white, and high contrast. Here are six images that didn’t make it for the final selection of eight images. Thank you Sascha and Mimoza for helping me picking out the best photos. I trust you guys made the right choices.

The six reasons these pictures weren’t included in the last package.

Image one was looking a bit to similar to the one I chose for the first image in the series. Image two you needed to have the reference to Wall-E to really understand the picture. Three and four was too similar to each other, they were also a bit boring comparing to the eight I have picked for the finals. Number five was too heavy with its whole, massive dark space. I like the rhyme and repetition and the soft lighting, but it didn’t cross the finish line. The Last and sixth picture looks just like a cropped image of the main, opening picture of my series.

Behind the photo

The location shots are taken at Realfagsbygget at NTNU Gløshaugen, the product photos are taken in studio. All with natural lighting and a shutter of at least one second. I believe the ISO to be about 800 on the studio-shots and 200 on location. The aperture varies between f/2, f/16, f/22 and even f/32 on some pictures. Everything is take with a tripod attached to get the really long exposures.

I will try to publish the final series during noon tomorrow if I manage staying awake. In about five hours I will have the final evaluation of this photo marathon, hoping to get some sleep now.

photo: Bjørn Christiansen, Sinar - Large Format Camera

photo: Bjørn Christiansen, Sinar - Large Format Camera

The Sinar large format camera is a swiss made camera that we use at school, mainly for architecture photography during the spring on the second semester. It’s large format and its tilt-shift capabilities makes it the number one choice when it comes to photographing architecture. Since this camera and format is such a large part of the photographic history I wanted to portray it in its right environment, modern architecture, at NTNU Gløshaugen and Realfagsbygget. In one of our first assignments in the architecture course, we photograph this building and many photographers will recognize this as they enter the school. One of the reasons that I didn’t shoot a random fashion portrait of a person is that if my series, or picture, is to be selected, it is going to hang on one of the main walls of the school for quite a time and I am afraid that people will get quite tired of looking at the same face day in and day out.

The next 12 hours

Yesterday I photographed the Sinar in studio, found some interesting angles and details. Today, in company of Sascha Njaa, I went to NTNU Gløshaugen with the Sinar, photographed some architecture photos with the Sinar as my model. I was trying to give the Sinar some kind of sould giving the feeling that the Sinar was exploring Gløshaugen more than photographing it. Now I have a long night in front of me. First off is choosing what pictures I want to have in my series, then post production, and then again selecting further more and at last mounting the whole series on another picture of the wall where they are going to hang.
By the time I’m done with all this, I am going to have my breakfast, head for school and have my evaluation at 9:30 am. Wish me good luck!