Critique: A very simple portfolio site. White space friendly. How can it be better?

Question

I would like to start off with: 'I am not a designer'. I am a programmer. I was hoping some of you design guru's could comment on the design I have made for my portfolio site.

I tried to make the design responsive and seem to like the result, yet there is always room for improvement. The site follows a google white space style, and is meant to be look cleanly.

Some things to ignore for the time being:

• I am yet to fix the fact that blog content centers in mobile view.
• I am yet to fix the width of the facebook comment box overflowing in mobile view.

One more thing I am wondering about is whether or not the font choice is readable? I have a feeling something else could improve the user experience.

Here are some pictures:

Answer 1

A few random thoughts and impressions:

• There’s plenty of whitespace between the larger elements on the site as a whole (i.e., between the menu and the main container, between the header and the rest, etc.)—on a large screen, perhaps even a bit too much, at least in the middle. The menu is quite close to the left edge of the screen and the main content to the right edge, and there’s a big gap between the two. In other words, there’s lots of whitespace, but it’s all in the middle of the window, with only a little on the sides. This is particularly noticeable on the blog page:

• There’s not enough whitespace between the individual text elements in the main content area. This is especially noticeable in the blog, where the different blog entries are difficult to tell apart and look very crammed in. There seems to be about 10px between the end of the first entry and the header of the second.

• The length of each line of text is much too long on a wide screen. An optimal line length is generally somewhere between 50 and 75 characters per line; on my (15” MacBook Pro Retina) screen with a resolution of 1920×1200 and the browser window filling up the entire width of the screen, the first line in the first blog post has 129 characters—about twice as much as it ought to have.

• Your typography seems a bit random. The site header and content headers use Raleway; your menu uses the default sans-serif font for the OS (and will thus be different depending on what you’re viewing the site on—not, I would say, an advantage for a menu); and your copy uses Verdana. Both Verdana and the default sans-serif are, by design, fairly ‘anonymous’ and stay in the background, design-wise, but they are still different, and using both does not work well here.
  I would suggest stepping down to using just two fonts. Raleway is all right, but (personal opinion here) works best when paired with a serif font; something, perhaps, like Linden Hill, or you could even go discreet and simply use Georgia, which is ubiquitous enough that it is almost generic and steps into the typographic background.

Here is a very quick-and-dirty modified version (made just by altering the CSS in the browser’s inspector, so not too reliable) with a bit more space to the left of the menu and less on the right, as well as some more harmonious line lengths, leading, and spacing between text elements (headers/paragraphs). Also with a slightly different shade of grey, just because. I hope you agree that this is more pleasant to read than the original, at least on a wide screen.

On a markup level:

• Don’t use empty paragraphs to add spacing between elements—that’s what margins are for!

• I’m not sure what’s going on with the gradient in the <pre> tags on the main blog page (not on the individual entries), but get rid of it if you can—it looks horrible.

• Use proper <a> tags for links, rather than JavaScript unless there’s a good reason for the JavaScript. And always make sure the user is made aware they’re clicking on something that will move them to a different page, in this case an individual blog entry. As it is now, there’s nothing to indicate this, and it’s not clear that what’s on the main blog page are just snippets, either.