Portfolio page project - feedback

Dear All, I am just seeking feedback on my portfolio page project:

https://eaczechova.github.io/Personal-Portfolio-Webpage/

thank you in advance for your comments :slight_smile:

2 Likes

I think it looks great, loved the java games.

The only thing I disagree with is the percentages on the about me section. For example bootstrap: 40% is this to mean you are 40% knowledgeable of bootstrap? I think that downplays your skills, rather just list the technologies you use, don’t give percentages.

the view my projects button does not seem to do anything?

1 Like

Hello,
This is a very great fantastic and super looking site… Great work bro

1 Like

Pretty nice page.

  1. Is the View my projects button supposed to link to somewhere?

  2. I would add some margin and maybe a box-shadow to the .project-tile class to give the images some space and contrast to the background.

margin: 20px;
border-radius: 4px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, .3);
  1. I would move the #about-details breakpoint to around 800px, or maybe sooner.

I also agree that the skill-bar might not be such a great idea. They also tend to make things look very stock like something you would see on a Wordpress demo site.

1 Like

@lasjorg and @ChrisCline1138 thank you for your comments :slight_smile:
I have added anchor to the button, so now its scrolls down to projects section. Also, I have implemented style to .project-tile class it looks soooooo much better :slight_smile:

I have also added burger bar on small screen.
Regarding skill-bar section, I have not thought about it in this way, rather technologies I am familiar with and where I am at the moment, but actually you might be right and it may not help if I decided to look for a job :slight_smile:

If you have any further comment (or know how anchor at projects scrolls down to the mid section instead of id h3) I would be more than happy to read them.

PS. @lasjorg could you please tell me what do you mean by saying

Thank youuuuu :slight_smile:

@eaczechova

I moved the padding-top from the division and applied it to the header and that seems to do the trick

I will delete this pen once you have had the chance to review.
https://codepen.io/chriscline1138/full/GzgoeN

Thank you for the review. I have amended my code as you have suggested, however it’s still the same, isn’t it weird?

it is, this is what I get when I click on the link, did you clear your browser cache? It stores css files and sometimes new changes wont show up until that is cleared

1 Like

Checked again; it worked fine on Safari where function to smooth to the view is not working, once I have commented it out it also works for Chrome :slight_smile:

Hello :smiley:

Overall I think it’s good, in my opinion it needs some tweaks to be great:

Navigation

  • Navigation scrolling does not work well. About link is the only one working properly. Home can’t reach the top. Portfolio cuts haft of the text with the navigation. Contact title is completely covered by the navigation.

Landing

  • I’d center the hello part on the screen
  • I’d change the “I am a Front-End Web Developer.” to what you do. Example: “I build custom websites to online stores from wireframes to final product”

About

  • I’d increase the line length in the description and separate the text into 3 paragraphs.
  • This is my personal opinion and in the past I’ve done the same but those bars are what? your confidence in your skills? You should add either an explanation or considered if you need a percentage graph there in the first place.

Projects

  • “Here you can find some of my projects:” seems redudant here
  • Last square is empty when idle. You should show text there instead of a reveal, since it looks like an empty item there by mistake
  • Pro tip: When taking Screenshots of the projects, don’t show the tabs on your browser :wink:

Get in touch

  • " Get in touch:" should be a h3 title like the other titles. Also you should remove the “:”
  • Form text is too dim, I can barely read it. You should change to something like the landing section, white.

Footer

  • Same readability issues as the previous section
  • Text should be vertically align
2 Likes

Not sure how common it is anymore, but at one point pretty much every WordPress Theme geared to developers had those animated skill bars. And not just WordPress Themes, but also free HTML/CSS templates. That is what I mean by it giving it a “stock” look. You know just like you can tell when something is a stock photo. I think they have gone out of style and you might not see them as much any longer.

If you want something like that I would suggest incorporating the different technologies you have used in your projects to the project grid items as extra information. Like a row of icons below the project image, or add more info to the on hover overlay.

I may have a solution to your scroll problem. I have only tested it in Chrome and Firefox.

  1. Set the scroll-behavior in the CSS.
body {
  scroll-behavior: smooth;
}
  1. Use this code instead. The condition is needed for the scroll to home section, without using scrollIntoView(false) it will under-shoot the scroll.
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        this.getAttribute('href') === '#home' ?
         document.querySelector(this.getAttribute('href')).scrollIntoView(false) :
         document.querySelector(this.getAttribute('href')).scrollIntoView();
    });
});
1 Like

Thank you for all your feedback, I am truly amazed how helpful you are!
I read all of your comments and implemented most of them.

Navigation seems to be fixed now and scrolls to where it should. I will need to rethink skill-bar section, but as it was done just for project purposes, seeing long way ahead before applying anywhere, I will keep it for now.

@alexiorodrigues I have implemented most of your suggestions, and feel really ashamed by the project this one special project print screen :blush:

1 Like