Portfolio Things

Soo as we all know every individual is expected to have made a portfolio to go along with the individual blogs. Basically, I've spent a lot of time making it over the past week when really, I need to be studying for my exams. Why? ? Because my coding is so bad that if I don't it'll end up looking like trash.

My portfolio consists of five pages; the About Me, Projects, Reflection, Portfolio, and Other Work pages. All pages are accessible from the navigation bar which is fixed at the top of every page.

I wanted to base the design of my portfolio around the design of this blog so I have kept the same font, colour scheme and background. If you remember from like my fifth post or something, I mentioned that the font used is Calibri (despite it being so ordinary), the background is 'nice_snow' from subtlepatterns.com, and the colour scheme is green (#A2D4B0) on white.

The pages look like this..

This is the About Me page. 

This is a normal page filled with many writings. 

You can see that on the right of the normal pages, theres a fixed smaller navigation box that leads to different sections of the page. That little box goes to its full colours when its hovered over. 

You can see that I like simplicity. And maybe green? 

In achieving the portfolio to be the way it finally is, I encountered an issue which although may look fine on my laptop and probably other 13 inch laptops, may turn out different on different sized computer screens. The first problem I had was to do with the navigation bar. As some of my pages were long, I decided that having a fixed navigation bar would be more useful, so I applied this to the longer pages such as the PROJECTS and OTHER WORK pages. I had no problem doing this however noticed that were was a gap above the navigation bar, so when you scrolled up, you can see all the content moving thorough the gap. I decided that I wanted to remove this gap or cover it somehow. Unfortunately, my skills did not take me far enough to remove it (without just making the navigation bar higher so it'd cover the space), so I literally placed a white image there. So now, as I test out my portfolio on my laptop, it looks fine, but I am aware that on different sized computer screens, the gap may be more obvious because the image is fixed to a certain size. 

Along with this issue, the only other thing that frustrated me was having a caption with the images while you hovered over the image. In the REFLECTIONS page, I have made each image to have a caption successfully, but I wanted the caption to come when the image was hovered over. I don't know what the problem was but the caption only shows up when the cursor hovers over the caption area. So  unless you happen to be aimlessly hovering your mouse over the image, you won't know that there's a caption over it. I tried a few techniques and although some did work, they were not the way I wanted it to be, as in the fading of the caption was weird and changing that ruined the whole thing. Apart from these, I don't think anything else was too troubling to make in this portfolio.

It was actually kind of fun to make. It took up too much time though, that should have been spent studying for exams.