FCC | Personal Portfolio (really need some feedback)

Hello campers! Finally time has come to submit the final portfolio assignment after a long time, because I was trying some new technologies for myself like SASS and JavaScript.

Please visit the link below and give me your feedback and share with me what you like and what you don’t.
Click me!

I realized that it is very hard to invent a site design right out of my head :smiley:


I like the colors and the layout on desktop. I don’t know about the skill progress bars. Doesn’t work as well on a phone size screen.

1 Like

Wow very nice, you have to fix de part of “a many-sided developer” but it look pretty good, can i steal the banner? :joy:
I really like it

1 Like

I have to say

  • that your HTML and CSS level should be much higher. If you can make a page like that you are at least 95% HTML and 90% CSS.
  • Test your HTML for errors in Codepen.
  • Use a picture of yourself instead of a sillohette.


What? I think the progress bars look fine in mobile view. Can you explain why you think they don’t look good?

Looks good, particularly the banner. There is one problem though as the scrollbar has disappeared. I also feel as though the home button should be on the left as that is the standard.

1 Like

I specially removed the scrollbar, I guess it’s a useless thing in this “design”.
I understood about the home button.
Thank you for feedback!

1 Like

Thank you for feedback! What you mean? Can your attach some screenshots?

@DZamora54 haha, thank you! Yea, you can steal this :slight_smile: But, can you say what is "you have to fix de part ", what you mean? Sorry, sometimes English is so difficult for me :smiley:

1 Like

Sorry. I should have been more clear in my response. I apologize if some of my opinion is overly critical. I really do like your design. I can’t exactly describe what is good about it in technical words but it is just very pleasing to my eye. My portfolio site doesn’t look even half as good as yours.

I would feature the product landing page instead of the coming soon in your project preview.

Maybe I just don’t know how to use my browser, now your portfolio looks really good on my phone. All your projects look good on my phone.

The opinion from the below article from FCC is not a positive one in regards to progress bars for skills on portfolio sites. As @brandon_wallace mentioned your HTML and CSS skills speak for themselves.

Also, most of the time that I’m browsing the forum is when I’m away from a desktop experience. When I commute by public transit I see most other passengers are also viewing something on a mobile device. I feel like too many portfolio sites and projects on FCC aren’t designed or tested for smaller screens. BTW, the title of the first certificate from the FCC curriculum is “Responsive Web Design”.

1 Like

I think it would be really cool if you could transform the banner into a sticky header as you scroll down the page.

1 Like

Oh, thank for your massive feedback! :smiley:
I saw these recommendation but meanwhile I’ve tried some new tricks (like skill bars and ect.) and I suppose it’s not my the first and not the last portfolio
After all, it’s a learning project, not for real tasks
About banner… I have no idea how to make this. I guess this solution will have a lot of JavaScript code

1 Like

Very nice. :slight_smile:
The welcome element with the background looks very good with the typography.
As @DZamora54 said, it would be nice to have the navbar stick to the top of the page for easy access to different sections. I guess this can be done via css ( at least when navbar is on top of the page) but I am sure there is a way to make it work even with your layout.
Keep it up.

1 Like

Looks great, good job.

  1. Make the nav links click area the same size as the <li> is now. Move the padding and width from the <li> to the <a> elements instead and set them to display: block.
#menu-items li {
  text-align: center;
  /* padding: 5px; */
  /* width: 125px; */
  margin: 0 20px 0 20px;
  border-radius: 3px;
  transition: background-color 0.3s ease;

#menu-items a {
  display: block;
  padding: 5px;
  width: 125px;
  1. I would give the .about-details p a bit more line-height.

  2. Add cursor: pointer; to the submit button.

  3. I would prefer a custom scrollbar to no scrollbar at all.

  4. It should be “Here are some of my projects”, not “There” (grammar).

  5. Last, and this is just a UX opinion.

Moving the nav links position from center to left when you trigger the sticky nav does give some interest and it’s not a bad idea. But because it just jumps to the new position it can feel a little jarring, which may confuse the user. If it had some form of transition (like a motion) it would give the user a visual cue as to what is happening. I will say it might take a bit of work to actually implement and it’s not a huge deal.

I should also mention the .sticky-menu-position style is not actually being applied because the selector has lower specificity than the #menu-items. It doesn’t really matter because of the auto margin on the logo, but still.

Again, really nice work.

I can’t understand… in my work navbar stick to the the top when u scroll down, or it’s doesn’t work?

Thank you for feedback! You gave a really good advice. My CSS code need to huge refactoring and refinement.

1 Like

It does work. I just checked again. Maybe there was some issue on my end earlier. In fact it works really well.

I am very impressed, honestly, I had been procrastinating my portfolio page for a few days but after seeing yours, I spent last 10 hours and got it done. :blush: Thank you! However, you are very advanced, I can’t really see myself doing all that wizardry without using a cdn like bootstrap or something.

If I were to add something to it, it would be ease in and ease out in the scrolling when you click the links on navbar. Something like what scrollspy offers.

Keep creating and cheers!

1 Like

Omg, it’s the best feedback! You gave me more motivation to create and programming! I find your works, and I’ve impressed too! I really enjoy that.

1 Like

It looks great! smooth and functional.
For a lot of programmers, design is the hard part. Usually in a work environment, they have a designer so devs don’t have to waste time designing it themselves.
I spent a lot of time researching designs and designing my portfolio, trying to impress recruiters.
Now, as you improve, keep putting up higher level projects and improve your portfolio over time!