My Responsive-ish Personal Portfolio Project

Hi everyone, Here is the link for my Personal Portfolio Project. Made with :heart:.
Any feedback will be much appreciated.

1 Like

Hey @skyeparagon!

Welcome to the forum!

If this is the final project for the Responsive design certificate then you are currently failing 5 of the tests.

Just a few things.

  1. I think the nav link called project should be called projects since you are showing more than one project

  2. I really like the design, colors, custom scroll bar, and js animations.

  3. I think the alignment of the text in the project boxes could be even.

  4. The done button for the form should be changed to submit IMO

Great job!

Keep up the good work!

Happy coding!

1 Like

Welcome to the forums @skyeparagon. Your page looks good. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 7/12 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • You have a duplicate id in your code. Remember, an id must be unique within the document.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • The link to “project” takes the user to a div that is between the “welcome” and “about” sections, not to the “project(s)” as expected.
  • In the contact section you should check that a valid username and email has been entered. Throw an error if not.
    • you learned to do this when you did the survey form
  • Make your page responsive. Remember, the R in RWD stands for Responsive.
    • On smaller screens content is cut off. overflow-x: hidden will completely hide anything that extends outside its container element horizontally. It’s recommended to not do this, and refactor your CSS to be more responsive - otherwise it is possible for your site to appear to be missing content (which yours does).

Thanks Guys, I really appreciate the feed back, Am gonna make changes ASAP.

1 Like

I see that you like to do a lot of glowing effects. It’s great but a bit too much if you know what I mean.
Here are some stuff that you could improve in your portfolio:

• When someone opens up a site, it really isn’t good to alert them immediately on document load. It’s in a way, an “informal” greeting to a user. When I open up a tab and look at a site, I expect a nice welcome with a nice design.

• I honestly think that you should remove the hover listener for your logo. I don’t really know how to explain it, but it seems a bit too flashy when I accidentally hover over it. For a cleaner design, leave the logo there and don’t attach the listener.

• Add some padding along the sides of paragraphs.
It looks like all of the paragraphs are splayed out a bit too much. Just style the paragraphs something like this:

p{
padding-left:10%;
padding-right:10%;
text-align:justify;
}

…and see if it looks cleaner. It compacts them a bit better.

• Adjust the Nav Bar’s transparency. I’s suggest you make it a solid color. It gives an uncomfortable feeling when it blurs the rest of the portfolio.

• I really like how everything fades in on user scroll. The contact form’s elements are rounded a bit too much. A good 2-4px will do nicely. Also, once again, don’t alert the user when the button is clicked. Append an element or switch to a new scene that says “Message Sent” or something like that.

Overall, you did great. Sorry if I was a bit harsh.
I hope to see some more of your awesome projects!

Happy coding!

1 Like

Thanks for the review, Am fairly new to coding hence my skills But feedbacks like this helps me get better and i want to be better, Thanks again for the tough luv.

1 Like

Screenshot 2020-11-13 150842
The feedback I got on my earlier post helped me a bunch, I did some thinking and editing and now I think my Portfolio Project is responsive, But I still need your feedback to make sure I slayed all the dragons(bugs/mistakes).

@skyeparagon

  • Once again, keep the test script. (Don’t make us have to uncomment it)
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 7/12 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
      • These are the dragons you want to slay.
  • As mentioned previously, do not use <br> to force line breaks or spacing. That’s what CSS is for.
  • This is still occurring.
    • The link to “project” takes the user to a div that is between the “welcome” and “about” sections, not to the “project(s)” as expected.