Portfolio page done

My portfolio page challenge took a bit longer than expected. I tried to do something different and add some colors.,probably should have researched a color pallet but I thought it came together. I used flexbox to arrange things. I still have to learn to use the css grid.
https://codepen.io/drjeffa/full/oNgKxOg

You’ve definitely got some color accessibility issues here. Use the following to test your color schemes to make sure they are accessible:

https://webaim.org/resources/contrastchecker/

Thank you. I didn’t consider that. I’ll make some adjustments.

Hey, nice job! If you don’t mind, here’s, some feedback: In the first place, I’d use a custom font face, it adds a better look overall. Then I’d make the navbar full width and change the font color so it has a better contrast. The “About me” action is kinda odd IMO, I wouldn’t have guessed it’d take me outside your page, maybe taking it out from the navbar and placing it in the contact section would be better.

In the contact section I’d center the 3 inputs (textarea is currently misaligned). and place the submit button below.

I recommend you to look on some other portfolios for inspiration, it helped me a lot when I did this project. Keep it up!

1 Like

Thank you. Great suggestions!

Hi @drjeffa, your portfolio looks okay but there are some things you should go back and revisit to make it better.

  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
    • I don’t see where you’ve linked or imported your fonts. You may have them loaded on your machine but I don’t so I’m seeing defaults. And not your default. The font name is sans-serif. For other fonts be careful of spelling. It would be "Courier Prime" (the quotes are needed here).
  • Normally I say to use codepens validator but it’s not the best and you have some things in our code that you should revisit so run your code through this validator. Just cut your HTML
    and paste it into the ‘Validate by Direct Input’ tab.
  • Style your view and submit buttons and change the cursor to a pointer when hovering over them.
  • In the contact me section, make it so the user gets feedback if the fields are empty. You learned how to do this when making the survey form.
  • The links to your projects should open in full view in codepen. Don’t have the link to the pen.
  • For a better UX, Codepen creates large and small screen shots of your pens that can be used in your portfolio.
    Access them from;
    https://codepen.io/userName/pen/penName/image/large.png (for the large screenshot)
    and
    https://codepen.io/userName/pen/penName/image/small.png (for the small screenshot)
    • where you replace userName with your codepen userId and penName with the id of one of your codepen pens
  • Make your portfolio responsive. It falls apart on smaller screens.

Just an observation, if you had posted your projects as you did them you may have avoided some of these issues. For instance, in your tech doc page if you surround your <code> </code> tags with <pre> </pre> tags to preserve whitespace and line breaks they would be easier to read.

Thank you. Great feedback. I actually didn’t discover the forum until recently :grimacing: :see_no_evil:

1 Like

Hi! The entire text of the page is in English, and the “send” button is in Russian)) At least it’s displayed for me as Отправить

That’s interesting. I don’t know how that happened. Is Russian your language? Would your browser settings do that? I don’t know enough to say.

Yes, I’m in Russia. Browser - google chrome.

Interesting. My text says, “submit “ . Somehow it got translated but the rest of my text did not.