Hey guys, please review my portfolio page!

https://harshjohn.github.io/

1 Like

Overall this is nice but I will recommend a few things:

  • Use an accessibility checker (or two) to fix any major accessibility issues. These checkers won’t catch everything but they will catch most of the big obvious issues.
    axe DevTools - Web Accessibility Testing
    WAVE
    – Lighthouse (built into Chrome)
  • Try navigating your page with just the keyboard using the Tab key. Can you tell where the keyboard focus is at all times? You can make the focus indicator better by customizing the CSS outline property on the :focus pseudo-class.
  • One of your skills is “Make your website responsive” but yet I am getting a horizontal scroll bar on this page at certain widths. You will definitely want to fix this :slight_smile:
1 Like

Hey Harsh,
It looks clean. I am actually working on my portfolio site, and I dont have back end experience yet. So, a contact form is out of the question for now, but I like how you handled yours.

A few things. Your projects are linked to the code pen editor view. If you are set on code pen, then it would be better to link them to the full page view. Personally, I think it would be hosting all of your projects on netlify instead of just your portfolio. Also, some if your projects are mobile friendly and some of them are not. You may already know this and be working on it, but just thought I would let you know.

in your survey form in the h1 tag there is a huge distance between sans- serif right under your body tag in CSS … make sure that there are all conected …

Thankyou for the suggestions. I’ll keep them in mind and try to implement them.
Wrt to the navigation bar, I tried to build a horizontal bar which pops out when clicked on hamburger menu.
Rest all, this is my first try, I’ll keep improving.
Notes taken. Thank you so much :smile:

Sure brother. Notes taken. :v:t2::v:t2:

I’ll check it out brother. Thank you :innocent:

You still have the <welcome-section> element. I’d fix that.

Again, that is not what the requirement is asking for, it is just asking for an id with welcome-section as the value on the element.

You also have a <project> element, again not a valid element.

The page looks good, it’s not a bad design.

  1. Move the media query for the nav to before the link text starts to wrap, or disable text wrapping on them.

  2. Move the mobile nav list closer to the button and make it bigger.

  3. The box-shadow on the text container elements on the section with the image background looks a little odd. Maybe try giving the containers a faint color with a lot of transparency and add a gap to the grid to separate them. Making them more of a card design.

  4. I’m not super crazy about the center-aligned paragraphs in the about me section. I’d try making them two longer running paragraphs instead and keep them left-aligned.

  5. For the project’s grid, I would increase the size of the elements and start out with a 2 (or 3) column layout.

  6. I like the contact/footer area, but the vertical spacing between the elements feels a little random. I would visually group the first three elements, the next two elements, and then the footer. Here is a super quick example, it is by no means perfect, nor does it have to look exactly like this. It’s just an example of what I mean.


Great job, keep it up.

1 Like