Portfolio page update

Code Feedback
1

Thanks to some feedback from friends, my Portfolio got a re-vamp.

http://s.codepen.io/JohnnyBizzel/debug/xVWWmN

Thanks for feedback from…
@TimHandy, @ajitsy, @WalidAshri, @ankur1163, @borisyordanov, @vinaypuppal & @cedaus.

Feedback is important so I really appreciate it! :heart_decoration:

The main thing I fixed was the mobile view. I didn’t realise I needed to add this meta tag to my codepen:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

I also added a lot of changes depending on the view screen size.

NB. I have still plans to change all the images to the same dimensions but I thought you would like to see the progress.

Note. Th

2

Hi,

I like the style, the font really rams home what industry your in and theres no doubt where I should be reading.

For the sake of feedback - I would maybe add some smooth scroll (I have a snippet if you want it, then just add .scroll class to link, easy) just because I find jumping around the page a bit jarring on any site. I thing it would also be a bit easier to read if the main content section was a bit narrower. Either that or css columns to break the long lines up a bit.

havn’t looked at your code, but everything seems to do what it’s supposed to do so we’ll asume its bob on :slight_smile:

One small bug though, the developer part of the titles overflows its container when the word wraps on smaller screens and the same issue in the footer.

I think you’re only up the M62 from me.

Cheers

Mark

1 Like
3

Yes I would be interested in the scroll snippet. By main content section, do you mean “about” or “projects”?

I will take a close look at the title header. It looks fine on a browser :confused:

Thanks for the feedback.

PS. I was at Uni of Manchester so have lots of experience of the M62!

4

Yeh sorry wasn’t clear was I. Yes I meant the text sections. Quite long lines aren’t they on a wide screens. You can use the css in that guide linked above to make the paragraph respond by columnising itself for wider screens if you wanted to.

For the header/footer overflow when you get down to 324px, it overflows. That means on anything like an iphone5 (320px) they will see the bug. Have you set the header and footer to fixed heights?

[details=Scroll]

forgot to mention this was jQuery

$(".scroll").click(function(event) {
    event.preventDefault();
    $('html,body').animate({
        scrollTop: $(this.hash).offset().top
    }, 1000, 'easeOutCubic');
});

and the links go:

<a href="#portfolio" class="scroll">Portfolio</a>[/details]

I think we must be the only NW uker’s on here from what I can tell.

1 Like