- Personal Portfolio Project -

Hi,
Here’s my portfolio page
I clearly didn’t intend this to be a real personal portfolio but I like of how it turned out. I always struggle with the design but I think I did a decent job on this one.
I’m looking forward to read what you guys think I can improve.
Thanks!

1 Like

Overall, this is very solid. Responsiveness is quite good with only a few minor issues at very large text sizes. Also, as I’m gradually narrowing my browser there is one point in which the project card layout goes from three columns to two columns and then jumps back to three columns briefly before returning to two (not a huge issue, but if you are a perfectionist you might want to fix it).

I think you should probably wrap all of the main content in a <main>. I also think the yellow “an avid learner” text at the top is hard to see (gets clearer if you remove the italics). For the three links at the bottom you’ll want to get rid of the text in the <span>s. It is duplicate text for the link that isn’t needed. For example, if you listen to these links with a screen reader you’ll hear “facebook Facebook link”.

The only major accessibility concern I have is that I can’t see the keyboard focus indicator for the project cards or the codepen profile link. They are visible for the nav items and the three links at the bottom, though just barely since you are relying on the native browser outline. Personally, I always customize the keyboard focus indicator so it stands out more. But at the least you need to fix it for the cards and profile link.

Welcome to the forums @McFloune. Your page looks good. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • For instance links to fonts go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s). Don’t split selectors.
    • (The one for HTML misses things which is why I recommend W3C)

Thank you for taking the time to help me.

  • I improved the text size at smaller width. Up to what size should I bother to make look good?
  • I fixed the project columns thing.
  • I added the main element.
  • I played a little with the “an avid learner” but I kinda like it that way, more subtle. Although, I enlarged the shadow a little bit to add more contrast.
  • For the span facebook thing, it is an icon. I changed it to an i instead thinking maybe a screen reader won’t pick it that way. It’s my first time using icons so please let me know if I’m not doing it right.
  • I totally overlooked the keyboard focus. That was new to me. I think I did a decent job, let me know what you think.

Thank you for your time!

  • I moved the font links to the head.
  • I corrected my error from the html validator.

I’m not sure to understand what you mean by “Don’t split selectors” ?
If you refer to my .material-icons duplicate in the CSS, it’s the only way I’ve been able to adjust the icons size using rem units like the rest, since it’s defined in an external stylesheet. I’d really like a clue on how to do this differently.

Good job on the first two.

I meant, you have the same selector on lines 4 and 193. Why?

Then, that’s what I tried to explain. Anyway, I removed it since it didn’t seem to work as first intended.