Personal Portfolio ready for critques

1 Like

Hi Autumn, I think your portfolio is very well done! The debug link you gave is broken, so [codepen link]/hatbearingoctopus/full/gqVdqN/ is the link that worked for me. In the “About Me” section, it looks like there is an image that doesn’t load for me. If it helps, I put all of the images I want to use Cloudinary. Below the About me section, there is a plane of green space that is empty for about a full scroll. That could be due to the picture being pretty large and I just cant see it, but otherwise, I would minimize that section. All in all, it looks very well done!

1 Like

Thank you! The plane of green I imagine is because of the picture. Not sure why it isn’t working but I’ll go see if I can switch it to Cloudinary and see if that helps. It’s odd my image is working on my computer but not my phone. Thanks for your input!

good work, I think you should change the height of the about me section though. there is an awful lot of empty space to scroll through. 100vh seems about right to me. Of course that is purely subjective.

1 Like
  1. I would move the nav to the top. Seeing as you have top; 0 on the nav that seems to suggest you also want this. For it to work you need to remove the default margin on the ul, just set it to 0.

  2. I would lower the hight on the about-me section you have it set to height: 200vh; I can see it might be because of the overflow on small screens but we can come up with a solution for that, I just need to look at it a bit more.

  3. I would distribute the space between the boxes in the grid evenly (same top and side spacing). The easiest way is using grid but you can do it with flexbox as well. If you need help with this just ask.

  4. The margin-left: 50%; on the social icons looks a bit strange to me, the contact section also has a bit too much unused space. I would add a contact form, even if it is nonfunctional and maybe lower the hight here as well.

1 Like

Thank you, I appreciate the detailed critiques! I will do most if not all of these tomorrow to make this look a bit better. You’re right in thinking I wanted the nav at the top but couldn’t figure out how to get it any higher. I’ll fix the default margin in my ul. The 200vh on my about-me section is indeed because of the overflow. I’ve messed around with it some and can’t quite figure out how to remedy this without increasing the vh.

For the overflow, I think I would just do this. The section really does not need to be much taller then it’s content.

#about-me {
  /* height: 200vh; */
  padding: 5vw 0 10vw 0; /* edit */
}

h1 {
  text-align: center;
  /* padding: 1em; */
  font-size: 4em;
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

.pic-and-text {
  background-color: white;
  padding: 2em;
  margin-left: 4em;
  margin-right: 4em;
  margin-top: -5em; /* Keeping this how gives a cool overlapping effect, but if you don't want it just remove this */
}

Edit: Well looking at it again maybe just a bit more bottom padding on #about-me, like padding: 5vw 0 10vw 0; maybe.

1 Like