Feedback on Portfolio Exercise

Hi everyone! I just found FCC yesterday & I’m loving it!

My attempt at the personal portfolio page is here: https://codepen.io/loonylou/full/GxdQrv/

I’d appreciate any feedback anybody would like to offer :grinning:

2 Likes

You need a little more white space between the top nav bar and the About Me content. Also, when you click on the various nav links, your header gets partially hidden by the nav bar on wide screen devices and totally hidden on mobile devices.

Although not related to to Portfolio project directly, I have a suggestion for your Tribute page. On wider devices (i.e desktop and laptop) there is a lot of grey space at the bottom and none at the top, I think it would look better if you centered the content (white background container) vertically on the page. Also, so there is a more consistent look for both mobile and desktop, I suggest putting equal padding (probably a percentage) on the div with id=“maincontent”, so that even on a mobile device, all sides have some space.

I 'd add the number tag to insert the phone number is weird (increment / decrement arrows doesn’t make much sense); I will reduce a bit the height of the navbar too, but it’s just a personal opinion.
That said to me seems very professional, don’t know why…maybe the photo, the color choices…buh, gj anyway! :wink:

Thanks so much @RandellDawson I have amended to add more white space as you suggested.

I’ve spent a few hours working on the anchor links & they are all working without cutting out the header in Chrome’s developer view. Are you using some other tool to view the mobile site? If there is another way to check this that would be great, because I thought I had it working :-/

Much better. I notice your mobile nav menu does not seem to show now. The main nav bar still shows when the hamburger menu is clicked.

Thanks @Layer. I found some CSS online to hide that little up/down arrow. I hadn’t even noticed it :smiley: I also reduced the nav heigth - you were right, it does look better!

It would be better if you add some left margin to the contact form inputs, btw, I like the way you styled it, keep going!

wow awesome work! :slight_smile:

i am also doing my own, and i was wondering how do you highlight the nav items depending on the section?
after a google search some days ago, i found something with Javascript but didn’t want to touch that.
I’d appreciate the guidance!

Chrome tools show me it’s fine. Is there another tool I should be using to check? I think it’s lying to me :slight_smile:

Thank you! I will take a look at how I can pad the input but not the placeholder.

Hey @f0rsakenc0der check out Bootstrap’s scrollspy feature. That’s what I used & also what the sample uses.

https://getbootstrap.com/docs/4.0/components/scrollspy/

Cool , i see. I’ll give it a try.
I am building with CSS Flexbox btw, that’s probably why i missed it.
Thanks a lot :+1:

1 Like