Hi everyone,
I’m building a portfolio, and I’d love some feedback.
Second draft: FCC-portfolio
Any suggestions or thoughts you’d like to share are greatly appreciated! Either about style, responsiveness, navigation, or anything else you might have in mind 
Thanks in advance!
Howdy Michal,
Just check your work, and I would it’s kind of nice, that green background got me!(but since I like lime, I wish it was lime, but my opinion is not important about design)
The very first issue I could tell you is about the top navigation’s link colours. I think that pink(nice colour) is so light, and has low contrast with white background, so could be a little hard(takes low attention) to read.
I suggest you bring the more darker pink colour for top nav link colours.
About the welcome section, I think it could be part of your design to make it fill one screen height for this section, but I think it’s too much! becasue it has not enough content for this section, and it’s kind of waste of space if you ask me. now for a large screen monitor(let say 32") it’s even much more. you assume it’s a green big section, with some text at center.
I suggest you come with less spacing, just a suggestion.
Same I suggest you make the icons on welcome section a little larger, I think they are a little small. Same about the font size.
One issue I think you better to fix, is about overriding the font-size using absolute unit pixel, for instance you set 40px for h1.
First please don’t, and use em to make a font size section larger or smaller. Now let me tell you why.
User would override and specify default font-size with hers/his browser, for example I set 40px, and you set 20px. 30px is 1em for my browser, and 20px is 1em for your browser.
by default H1 tag has font-size:2.0em ins some section(1.5em). It means browser may double the default font-size to calculate the H1 tag.
So now as I set the default font-size as 40px, I supposed to have 80px for H!, but the page overridden the H1 with 40px. So what happens? becasue you found 40px big enough with your config, you thought it’s the same size with other’s screen, but it’s false. Because that H1 is just like a normal text for me.
This is not about H! tag, this i about setting the font-size using em, not px.
I think the contact section elements are a little small! Since your product section is so sharp and big enough, but contact section is not. my suggestion:
You also used default value instead of placeholder for textarea, please don’t.
After the contact section, there is too much space till the footer, I think it’s too much!
About the layout, it’s broken for mobile. When screen is small, your logo(M at top-right) overlap on navigation link, same the icons in welcome section causes the horizontal scrolling becasue they need more space(this is because you set 70px as grid gap, so that’s so much for mobile I believe, use relative units instead). please check:
Another very small design issue is about the box you used for product section. It seems you applied the background colour(the light gray) for content container, rather than box container. It’s not critical, but better be fixed, check:
Tip: instead of setting background colour for .project-tile, it’s better to set for box parent .section-content class.
I think logo could be better has some space from screen top and left edge. it’s starts from 0,0. Actually I suggest you place the logo with navigation panel if applicable.
Since your top navigation is fixed, I suggest you add one bottom border for navigation. Sam a very smooth shadow. When background colour is the same as top navigation, user could find the top navigation as inline content, rather fixed top content. my suggestion:
I think it’s a good work. Please note my suggestions are not issues, but you may fix the layout issue.
Keep going on great work, happy programming.
Thanks for the valuable feedback, @anon18662199, and I apologize for the belated reply. I started learning a new JS library, and let this project slip away.
I’m back now, and I’m working on each and every comment, so thanks! I’ve already fixed some of them (project height inconsistency, logo overlapping menu), and I added the rest as issues in my (repo)[https://github.com/zurda/one-page-website/issues]
Here’s a live version of the current site, but I’m still working on it: https://zurda.github.io/one-page-website/
Thanks again, and happy coding!
Your tic-tac-toe app should have a reset game button and a choice for who begins first (X or O).
Other than that, areas feel too cluttered on the portfolio page. should breathe more and color scheme could use more contrast.
Great suggestions! I’ll add them to the github issues. Thanks for the help
Hello Michal,
some suggestions:
Awesome, @miku86. You’re right, and I never used the Audit tools - so I’ll definitely take a look.
Thanks for your suggestions! Hopefully, I’ll get these done in the coming week. I appreciate the help! Enjoy your coding!
Edit: added these as issues to the repo so I won’t forget. Thanks!
Hi everyone,
I’ve made some improvements, and really need suggestions on how to reveal the extra text about myself in the top section. Right now, clicking on the button makes the button jump down, in a not so natural movement.
If anyone could suggest other reveal options that look more natural - I would really appreciate it!
I’m still improving a lot of the mobile issues mentioned above, but feel free to suggest improvements or add an issue to the github
Thanks in advance, and happy coding!
