Please critique my portfolio page

http://www.braincells.com/webdev/

I really learned a lot about CSS from this project. The goal was to use bootstrap but not have it look like “Yet Another Bootstrap Site” I also tried to make it fast loading and usable with Javascript turned off. Do you think it succeeds in those areas? Any critique is welcome.

You seem to have accomplished your goals. :slight_smile:

Could I recommend changing your background image and looking for a color palette that you like? I think the weakest part of your site is the aesthetics.

If you feel like design isn’t your strong suit, you may just want to imitate a site you think reflects how you want to be seen by clients.

Good luck!

1 Like

Two issues:

  1. The PGP code block wrap breaks some of the flow
  2. When scrolling with a mouse and the cursor hits the area over the map, the scroll focus hooks on to the map, and page scrolling breaks.

Screenshot - 04042017 - 15:43:31.png

It is a very nice portfolio site IMO, I like the colours. :slight_smile:

1 Like

Thanks for the feedback.

You are probably right about the aesthetics. Design is not my strong suit at all. The theme is “braincells” hence the background (a CAT scan of neurons) and the attempt at a “medical” feeling palette.

I realized the background is very “busy” so in gimp I tinted it a little darker but I guess you still think it is a little too garish? What would you recommend to replace it?

The palette is from the superhero theme at Bootswatch. It is #000000, #4E5D6C, #EBEBEB, and #DF691A. Any recommendations on changing it? (I.e. lighter, darker etc.)

Finally, let me ask you what you think as a design professional about the gradient at the bottom of the header. From what I’ve been reading about “flat” design that’s a no-no but I kind of like it. But what do I know? :smile:

Thanks for the feedback.

Dammit I tried hard to get the size of the PGP text to adapt based on the viewport size using media queries at the bootstrap break point sizes. It looks like I have to do some more tweaking. May I ask at what resolution you’re browsing?

I don’t know what to do about the map focus issue. Do you have any ideas?

1366x768. Try add the style white-space: pre; to the PGP element, that fixes the wrapping my side.

I battled this issue in the past, without success. I ended up settling for a screen shot of the map, and linked it to the real map.

Edit: There are solutions to your map problem but most feel very hacky (which is why I never bothered to use them), but you are welcome to check these out - http://stackoverflow.com/questions/21992498/disable-mouse-scroll-wheel-zoom-on-embedded-google-maps

Hello,

Hero Patterns has some nice svg backgrounds with adjustable color. You might consider using one that supports your theme, maybe one that has elongated elements, similar to your brain cells image

As for the gradient, I would have to say a hard line would be much better.

Good luck!