Review my clone site

Code Feedback
1

I started doing some of the projects/assignments from PX1T’s front-end guide. I cloned this psd into a website and I’m looking for feedback.

Here is what I have thus far:

http://nickkinlen.me/resume/index.html

I used progressbar.js for the animations and waypoint.js to trigger the animations on user scroll. I made the site responsive but I still have some stuff to touch up (i.e. displaying on tablets, some css polishing, etc…).

For those with experience in the industry, would you say that this is close to professional quality work? What could improve?

2

Nice work.

Here are my comments/tips/fixes/suggestions/whatever:

You used a fixed height for #description (9em). What happens if the user viewed it on a small display? Your bottom margin now become out of whack.

headertext.png810×172 12.8 KB

A better solution will be to not use a fixed height div. And instead use padding on #description. That means, you can get rid of padding-top:2em on your #description p tag. The result is a well centered text – no matter what the user’s browser width is.

header_fix.png803×187 12.9 KB

You are one skinny dude! The photo is distorted.

photo.png703×225 35.2 KB

There is no such thing as border-radius:100%
So #intro #headshot should be border-radius: 50%

But that still doesn’t fix the problem. Because your image isn’t a square.

You need to crop your image to be a square, then apply border-radius: 50%

headshot_fix.png702×228 40.2 KB

3

Left border stuff overlap each other at small width displays.

Add some more media queries and then stack those Divs on top of one another at narrow display widths.

Just need to change .left and .right to width: 100%;

4

Hahah that’s not a picture of me, stock photo. Thanks for the feedback.

5

Icons are a mess at small display sizes. They’re overlapping with the footer and extending all the way down.

icons.png735×897 57.9 KB

Again, because you used a fixed height value for #info.

Change #info height: auto and you fix this problem.

icons_fix.png738×888 50.9 KB

6

That’s definitely something I need to fix.

When I did the media queries I previewed the site in Firefox Developer Edition’s mobile tool. Everything lined up nicely, but now after you pointed that out I open the site on my Iphone and I’m seeing the same mess you are.

Any idea why when previewing it in dev tools it looks different than viewing it on an actual Iphone?

7

Social icons fall out of alignment at narrow browser width

socialicons.png767×191 9.07 KB

Probably best to just get rid of the text (www.whatever.com/davidbrown). The icons are obvious what they are. Instead, put your a href around the circle icons instead of your text.

8

I just viewed your site on a desktop browser when I found all these problems… I just made the width narrower. If you can make your site look good on any browser width, then usually the iPhone/Android/Kindle/whatever display (at whatever dimension, portrait or landscape mode) will come out okay.