Having spent some time looking at web portfolios, in particular for those finishing my course this year, I wanted to finally build something from scratch with aesthetics in mind. I took time to select a combination of typefaces which complement one another, and paid a lot more attention than usual to how my elements are spaced. This is not a final portfolio but rather a placeholder to, again, practise my web building skills. However I will be using it to host most of my work throughout the year, making changes to the site later on.

I used the calc() function CSS offers along with vertical height to make the landing screen take up the full height of the window, accounting for the height of the navigation. I also contained the landing screen within a div with padding all the way around to create the white lines around the image. This was done using a re-usable class, ‘content-box’, which simply creates this padding around the elements:

.content-box { padding: 16px; position:relative; }

This class is applied to all elements which contain content, in order to more uniformly space elements. It is also part of an initiative to use more generalised and re-usable classes, rather than creating new classes for each section / element which has been causing a lot of headaches and messiness in my files.

I also built a very simple grid system, using the box-sizing: border-box; attribute and setting three different possible widths:
.whole { width: 100%; }
.half  { width: 50%; }
.third { width: 33%; }

So my content is contained within a div which has one of these three classes attached to it. Then, that div is contained within a .row class which has the purpose of clearing the float if it’s necessary.

This site is fully responsive using media queries with a break point at 800px. Since I read on W3schools that it’s better to develop for mobile-first, the default values of my grid classes are 100%, and they change to their correct values when the window width is over 800px.

Something I’m glad I managed to get working was the responsive navigation bar. I built one on my Provise demo site, but the issue I kept having can be explained by this gif:

As you can see, pressing the menu button caused the navigation to disappear when resized. This is because while my script toggled the visibility of the nav on the button press, it would not affect the visibility on window resize. While I know there are ways to get this to work in JS I opted for the much easier option of forcing the visibility using a media query:
#menu {
display: block !important;
clear:none !important;
float:right !important;
}

So far this is my best site to date, and I am proud to have been able to get the JS to work on my own. I also feel my CSS skills have greatly improved and I am able to solve problems much faster than I used to.

My next step here is to build a specific portfolio page and showcase some of the work I’ve done so far there, and fill in the ‘Lorem ipsum’s with my own content. On this page itself, I want to add a scroll button under the intro paragraph on index.html, and I also want to truncate this paragraph on mobile devices as currently the text overflows beneath it’s container.

Demo site here.

Advertisements