Finally Got to Doing my Portfolio

Code Feedback
1

Hello all,

I would appreciate some constructive criticism about my portfolio page. The projects are not added, because I need to find most of them.

The first page is quite bland, so I might animate the icons. I am just unsure of the best way to do without a performance drop.

Also, the logic in the Professional and Retro buttons is such that you could freeze your device, if you hit them many many times without hitting Default.

Otherwise, let me know.

2 Likes
2

Kudos on using a <button> for your hamburger icon, I can actually get to it with the keyboard. I see you even have the aria-expanded attribute on it, but when I expand the menu that attribute stays at ā€œfalseā€. Also, after expanding the menu, the actual menu items are above the button in the tab index so I have to shift-Tab to get to them. I think most people would be expecting to Tab forward into them after expanding the menu.

When you mouseover the social media icons at the bottom they slide to show their name. I think it would be nice if they did this when they got keyboard focus as well. Also, at larger text sizes the icons do not slide over enough to expose the entire name.

Iā€™m not seeing any text associated with the svg icons below your name. If these icons represent important information you want everyone to ā€œseeā€ then Iā€™d add a text alternative.

Iā€™m not seeing an <h1> header on this page, only three <h4>s. Add an h1 and then make sure not to skip levels as you work your way down. Semantically, Iā€™d add a header for each of your links in the menu. You could always visually hide them if you donā€™t want them on the page.

And believe it or not but my color contrast checker is saying that the white text on blue buttons does not have enough contrast to be accessible.

Your page handles text size increases well except that the projects could be better. At 200% increase, when my browser is wide they still look good. But as I narrow, the project divs get real thin, to the point where they can only display one letter per line. Then, when I finally reach your media query break point they switch to a single column and everything looks good again. My suggestion would be to base your break point on ā€˜emā€™ instead of ā€˜pxā€™. Also, the buttons are breaking out of their containers.

Also, when I have my browser window narrow (so that the projects are in one column) and mouseover a project, it expands and the sides are cut off by the browser window and the bottom is under the project beneath it. This doesnā€™t take away from the functionality but I think some people might consider this a mistake.

3

Thank you, for such a detailed comment.

Could you give a suggestion as to what might work better?

  1. I could create a tooltip for heading and description for each icon?
  2. I could re-arrange each icon to be more of a label ā†’ icon format?
  3. I had planned to just use them for animations, and potentially adding more of a paragraph to that page anyway.

Thank you, for your time. Now, I have a 9-point todo list for it.

4

There are a lot of ways to add text alternatives for these svg icons. A good page that describes the options is

But if you are just using them for decorations/animations and will be adding content that lists all of your skills then you probably donā€™t need to worry about this.

1 Like
5

As far as I can see, I have updated my portfolio to include your earlier suggestions/reviews. Would you mind giving it a once-over for something I completely missed?

6

Hi, @Sky020! My feedback is going to focus on UX/accessibility/design. Some of the accessibility items are things I still need to do to my own portfolio/projects. :slight_smile:

  1. The Professional/Retro/Default options are very fun and downright hypnotic. I donā€™t know if I should lean back in my chair or lean forward into my screen! Both? //crash
    I do recommend making that top nav black and the menu option text (About, Projects, Contact) white for accessibility (contrast) and simplicity (the grey/green donā€™t show up anywhere else on the site).
  2. Recommend adding more descriptive text alternatives for all images/SVG graphics, so screen-readers can know whatā€™s going on when they get to those images.
  3. When the user hovers over the project ā€œviewā€ buttons, the text turns a color that does not meet contrast standards for accessibility. I recommend changing this.
  4. I donā€™t think the slide over text explanations of the freeCodeCamp/Linkedin, etc icons are 100% necessary, for two reasons. A) Theyā€™re fairly well-known icons, especially Facebook and Linkedin. B) Itā€™s inconsistent UX-wise, because the row of icons in the beginning have some (comparatively) far more niche/obscure ones in their midst and donā€™t have any text explaining what they are. If you want to keep the slide over text explanations, I recommend adding hover over text to the first row of icons to maintain consistency (in terms of helping users understand what the icons represent).
  5. Recommend changing the LinkedIn icon to a circular one, since the other 3 icons are circles. Again, just a consistency thing.
  6. Recommend using the Courier New font somewhere else besides your name at the top of the page. It would create more visual continuity for the user if, as they scroll down the page, the project titles were also Courier New.
  7. Consider using a specific type scale for font sizes. This is seriously magical (Golden Ratio is a personal favorite). https://type-scale.com/

References Iā€™ve found very useful:

Happy coding!

7

Thank you, for this. I have changed the colours for better contrast. Also added tooltips for the svgs in the beginning.

I wanted to have the LinkedIn icon to be circular, but it looks much worse like that :frowning:. Also, I prefer having the current font the way it is - the name does not fit, if it is the same font.

I like the type scaling, but Golden Ratio is too high, in my opinion. The Augmented Fourth is as high as I will go.

Thanks, again.

1 Like
8

Since you are at a very high level technical level. I will be very hard onto your design choices. Since you seem to need it.

1: When i switch between retro then proffesional the color paterns remain the same
2: people wonā€™t know that there is more down bellow your not guiding the usser at all
3: there are to much icons they look like a collection of bounching fridge magnets or something a child would play with
4: i get a cookie warning if i look at your source. I am from europe and you are suppose to warn me
5: again not very user friendly when i scrolled down i had no idea i could click onto the buttons and can think they where just icons. A site design must help you reach your goal. Your goal is to guide your future employers through the site and read the information about you. So they can contact you but, they cant do that if they have no idea that something is clickable. You might work in IT but most people from HR and recrtuiters donā€™t
6: what is the use of the buttons that are jumping? does it mean you mastered them? if so why canā€™t i read your skill level

Itā€™s a nice site from a techical perspective but, it does seem to lack almost every thing that would make a site work well for itā€™s user design wise. There is no clear concept behind the site. The user is not guided at all. The site color scheme seems for children and is way to busy.

Here are some links that might help you improve your design:
Do use a color wheel it can help: https://color.adobe.com/nl/create

Improve onto usserfriendliness


9

@Sky020 I viewed your website on my cell phone so this will be from a mobile perspective. This is strictly my opinion on what you can do to improve the website.

  1. In mobile view the icons do not line up properly. The react icon is almost touching the git icon.
  2. I think you should remove the spinning icon effect from the two icons since the others do not spin. This is not consistent. How about you have them all fade in slowly? Fading in from opacity 0 to 1 is light on resources.
  3. The project tiles should have images of what they look like not screenshots of the code itself.
  4. I suggest removing the small Freecodecamp test suite window from the projects before taking the screenshots. I would not even show the green hamburger menu collapsed.
  5. I do not think that the three buttons ā€œdefaultā€, ā€œprofessionalā€, or ā€œretroā€ buttons and the background effects are necessary.
  6. Use a real domain name like ā€œShaunHamilton . comā€ if it is available.
10

Thank you, Kora.

  1. I am working on changing the logic, but it is a bug I cannot find.
  2. I think I will add some breadcrumbs to lead visitors through the page.
  3. I think you are right - I will change this. Guess I got carried away.
  4. Thank you, for reminding me. This is the kind of thing I forget. My plan is to remove the need for any external resources.
  5. I have changed the layout for mobile, but getting to a better UX for desktop will take me some time.
  6. Again, got carried away.

Thank you, for the useful links.

11

Thanks, brandon, for your feedback.

  1. I do need to get the margins sorted.
  2. I am still unsure of what to do, in terms of animations. I guess fading would be more natural.
  3. Some of my projects do not have images (they are just scripts), and I did not want to leave them blank. Nothing I can do about this, except replace them with UI-based projects.
  4. I noticed them, but you are expected to leave the test suite on for validation.
  5. I thought the site too plain and boring, without.
  6. I am not in a position to pay for a domain, but I have been thinking about changing my GitHub username (if possible).

Thanks, again :smiley: