Feedback on my portfolio ---

[costa1]

I want your feedback on my portfolio , built by React.js

Aissa Nadjem eddine Portfolio

[tlc35us]

Looks Nice! The text on the contact page is small. Make it at least the same size as the rest of the pages.

[costa1]

Thanks for your Feedback , I’m so glad for that .

[rajat310]

@costa1 ,

Very well done buddy.
hope you will do more great work like this in future

[costa1]

Thanks for your Feedback

[bbsmooth]

Hey, nice job overall. I do have a few suggestions.

• As @tlc35us pointed out, there are issues with the content not being readable. Either the text size is too small, or it does not have enough contrast with the background (such as your Portfolio page) or both (such as your About Me page). My suggestion would be to install an accessibility extension (such as axe or use one that comes with your browser (such as Lighthouse in Chrome) and run them on each page in your portfolio. They will not catch all accessibility issues, but they will catch the low hanging fruit such as color contrast issues.

• I do like that you are using em units for the font size and have not tried to force a font size on the user by redefining it on the html/body element in px (so many sites do this, even our beloved FCC). But I would recommend you not make the font size smaller than 1em for any content unless it is truly “small print” (such as disclaimers and such). Use 1em as your base and then only increase the font size for headings and other content that needs to stand out more.

• I think you need to make the keyboard focus indicator more prominent throughout the page. I can barely see it on the menu items at the top/bottom, but I cannot see it at all on the language select list or any of the blue buttons. If you think that having bigger focus indicators will ruin your page’s aesthetic then you can use the :focus-visible pseudo-class to only show them when someone is using the keyboard to navigate your page.

• Speaking of buttons, all of the <button>s on your page are wrapped in <a>s. This is an accessibility no-no. They are either <button> or <a> but not both. In this case, most of them are <a>s because they take you to a new page. The general rule is: buttons do things, links go places. So get rid of the <button>s inside of the <a>s.

• All of your social media icon links need to have actual text associated with them. The easiest way to do this is to add the text in the <a> and visually hide the text.

• The language select is very cool but I don’t think it gives enough indication of what it is or how it works. When I focus it with my keyboard nothing happens. There is no indication that it is a list I can choose from (and there is no focus indicator on it as well). Mouse users will get a list of options if they click on it but there is nothing that tells them to click on it in the first place, so they have to actively explore the page with their mouse and hover/click on it to find out that it is functional. Personally, I think you should have a visible label for this feature (and technically, you need a <label> on this to be accessible). Perhaps something as simple as “Language”.

• Your portfolio is responsive to changes in view port width but it has issues with both changes in view port height and zoom. For example, on your Skills page, as you make the browser window shorter the footer overlaps with the skills bars. Same issue also occurs if you zoom the page.

• The <title> never changes, it is the same for each page. The <title> should reflect the name of the page you are currently viewing. You could do something like “Name of page | Aissa Nadjem Eddine”, so for the About Me page you could change the <title> to “About Me | Aissa Nadjem Eddine”.

• I think the page semantics could use a little work. Best practices say that your page should always have an <h1> and then any other headings follow in logical order under that without skipping heading levels. On your Skills and Portfolio pages you are skipping the <h3> heading.

• On the Skills page, all of the <img>s have alt text of either “JS” or “img”. This is bad for screen reader users. In my opinion, these images are purely decorative and thus they should not be read to screen reader users at all, so I would make all of the alt text empty for these images (<img ... alt="">). The floating blue icons actually are of no use to screen reader users so I would completely hide the <div> they are wrapped in from screen readers by adding the aria-hidden="true" attribute to that <div>.

• Speaking of those floating blue icons on the Skills page, they don’t do anything when you click on them so I would prevent the mouse pointer from turning into a “pointer” cursor when you hover over them. Furthermore, the blue icons seem to be out of order with the skills listed on the page. Why would the JS icon come before the Bootstrap icon but yet Bootstrap is above JS in the skills bar? And why wouldn’t the Github icon be on the left side since its skill bar is in the left column? This is my personal opinion of course, but these sorts of inconsistencies seem to make the page look less professional.

• Also, I’m not sure I would put percentages for my skills. What are these based on? Did you take some sort of skills assessment test? Or are these just your personal opinions? Nobody is going to be 100% on any of these, so why give a potential employer some number that they can evaluate you against? Let your projects do the talking for you.

OK, I’m going to stop here. I commented a lot more than I thought I would, but I can tell you put a lot of work into this and thus I put a lot of thought into my comments.

[costa1]

Thank you so much for this great feedback , I really appreciate.
Thanks again for your time you’re a good person.