Take a look at my Personal Portfolio Project please!

Hey everyone, for this project I tried to:

  • use different color names by their default to get them memorized
  • tried to make ample use of flexbox where it made sense, so I could get it’s quirks right
  • atempted to style blocks so I can make some simple drawings (arrows)
  • tried to make ample use of css selectors, to get the hang of them
  • tried some simple animations

now I’m trying to finish my responsive navbar, so it displays the <li> elements when the logo class is pressed.

Here is the link to the project https://codepen.io/dcosta89/pen/RwWRVxQ

Please give it a look, and post any feedback that you might think that will improve this project below, it will be apreciated.

Thanks and stay safe in these hard times everyone!

1 Like
  • The text at the top does not have enough color contrast with the peach background to be accessible. You definitely want to make the gray text completely black and the white header will need to be a much darker color.
  • I would make “GET TO KNOW ME” part of the link. Right now you just have the down arrow and thus there is no text associated with the link.
  • Technically, the white on green at the top is also not color accessible. You can check accessibility at
    https://webaim.org/resources/contrastchecker/
  • For the project links, there is no keyboard focus indicator as I Tab through the projects. Also, the links need to have text associated with them. You can either add text inside the link and visually hide it if you like or you can use the aria-label attribute. I think the former is a better option as you’ll want everyone to know what each link is.
  • I think ‘Get in Touch’ should be an h2 heading. And your current h1 should be an h2 and then add a new h1 at the top that includes your name.
  • As I increase the text size, at some point it causes a horizontal scroll bar even though I have my browser plenty wide. Also, the content at the top breaks out of the peach box. Same for the placeholder text in the project boxes.
1 Like

@drscosta Your project has a solid design and good overall composition.
Here is my opinion on how you can improve your project.

  1. Remove the place holder tiles and add real content.
  2. The words “I” and “Designer” have a hover effect for some reason but “am a” does not. The hover effect needs to be consistent. That text may not even need the hover effect.
  3. In mobile view the menu disappears. Here is how I created a responsive menu. https://codepen.io/brandon_wallace/pen/wYBxeQ
    Look at the code to get an idea of how you can create a responsive menu.
  4. Add smooth scroll to the body.

Thanks for the feedback, I’ve updated my project a bit, taking stuff of both your opinions and my own judgement.

I’ve since added a simple script to the navbar, to make it responsive (JavaScript is harder than it looks, and I’m still fighting with it), and I’ve come across a new problem:

Since I have my navbar set to a fixed position, I’ve changed every section position to relative and top: 8rem to take the navbar width into account.

But this comes with other problems, such has uneven space calculations, and now I have to make my navbar “push” content further down, when the nav-links appear on mobile.

I’m sure there’s a more elegant solution than to position: relative everything, so what would you do?

Also, the javascript code for the other problem would be something along the line of,
(when ‘logo’ is clicked,).toggle('body cotent position translates by Y: navbar-expanded-width"), what would be the correct syntax for this? Not using jquery this time.

Portfolio looks good @drscosta. Not sure if you’re aware of this, 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

Thanks @Roma, didn’t know about that! I’ll update the project with some snippets then.

Can you give me some input into my other questions?

Cheers!