Frameworkless Portfolio Feedback Request

I would love some critical feedback on my personal portfolio design I built for FCC… I have stayed away from frameworks completely instead relying on native CSS, in particular Flexbox. The only external dependencies are for the Fontawesome Icon and Feather icon libraries as well as two google fonts (just to make things pretty).

Here is the pen:

I don’t know about you or others but as for me it would be nice if your navbar would scroll down with the page, otherwise it’s imo useless :wink:

  1. Also I scaled down my browser to smartphone size and your navbar icons are bumping at each other.
  2. Instead using font-size in ‘px’, use ‘em’.
  3. Padding and margins can be written down with % values rather than with px
  4. If sticking to css responsive, you can use also a media query
  5. If you wanna be hardcore responsive, try to justify your text. As it is on full screen it looks good, but on scaled down it is somewhat messy :wink:
  6. Maybe it’s just me but the colors aren’t toned down. Especially the green one with white text on it.

Thanks for the great suggestions! Deffinitely going to fix those issues, really helpful.

Just a personal opinion, that shade of green against a white background, or a white text against that green background is hard to read. You can make that bkgd color darker?

See this site to check for contrast ratio.

To find other color combinations that work, try this site.

I think you should space the skills further apart (more line height). It looks cramped.

Personally, I don’t like these graphs… but what do I know, maybe HR/recruiters find them useful? I think you should just list your skills. You don’t want to give them an excuse to not call you because they said, "ehhh, his git knowledgel is only around 30%… pass, next. "

The other soft skills you listed looks like “buttons”. But they’re not really clickable.

You need to be linking to your GitHub pages so you can show them your code. I think that’s more important than displaying “graphs”.

Hope this helps.

1 Like

Good work!

As @owel suggested, although I like the bold approach you’ve taken with colour, some of the background could benefit from being a little darker.

However, I also had some trouble with the contrast on my tribute page (still a WIP) and tried putting a dark outline around my text with -webkit-text-stroke: 1px black, which I think helps.

Unfortunately, I don’t think this is a 100% supported method across browsers (maybe a more experienced camper might know of a better way to do this?).

I personally like the progress bars on your skills, thinking about the motivational aspect for yourself - I imagine it must be quite satisfying to see them fill up! By the time you are ready to apply for jobs, I imagine they will all be at 100% and you can replace them with a nice, shiny badge :slight_smile:

Other than what the other guys have suggested, I’d recommend padding the “Web developer and software engineer” more to the left, and the “contact moi” more to the right… they just seem to be “off” in their placement somehow.

@owel thank you so much for the detailed feedback! I think I’m going to remove the graphs, that’s a good suggestion. Those links will be very helpful to me.

All good suggestions!

Awesome work with that tribute page! Thanks for the good suggestions :slight_smile: