I could use some honest feedback on my portfolio site: https://kedskeds.herokuapp.com
It’s an improvement over the first iteration, which relied heavily on Bootstrap. For this version, I challenged myself to create my own media queries and grid, and to use HTML & CSS preprocessors.
So…do you think it’s too simple? I’ve seen some amazing portfolio sites here, and mine seems to fall a bit flat by comparison. I’m aiming for front-end positions, so it’s important that the site is visually appealing and user-friendly. What kinds of elements are missing?
Thanks in advance for your feedback!
(Source code is here)
Hey, I would make a couple changes.
On your unordered lists (below the main header section), you have a mouse over animation to bring on the drop shadow, but no mouse out animation. The drop shadow just goes POOF.
Maybe reduce the drop shadow a bit. I know Material design calls for it, but the way it is kind of makes the site look a little dated.
Finally, on the header card I like how things are kept simple and to the point, but I think it needs a little more pizazz. If someone is opening up your site and that is the first thing they see, I think it will be a little underwhelming.
I think it’s a great base though and with a few changes would impress people. Good luck!
I think if you update Typography will looks much better also hide project titles and move over image with some nice fadeIn or slideUp when you hover it. Skills lists titles need to be aligned
Hey, this is great!
Like, the coding part is really great, though imho it needs a couple of changes on design part ^^
First, I really love the way you did your skills, the idea with cards is something fresh for me. Though, the choice of colors is bad. This part should be the second most important part on your page, and it’s completely lost. I suggest you make it bigger (I have a full hd resolution, and at first I was like - huh, what it this text), though it looks drastically better on smaller width. Love the responsiveness - it’s an important thing!!
The second, is probably color. Of course its always the question of taste, but you have four main colors - yellow, blue, gren and grey and they kinda don’t match. Perhaps it’ll be better to chose two, like white/green or grey/blue or if you want to dive really deep, go to awwwards.com and check portfolios out there. These are like masterpieces! Also, you might want to implement some ideas you’d see there =)) learning from the best!
And third, the navigation - to be more exact, the meaning of your icons. If ‘home’ and ‘contact’ are perfectly understandable, people might be confused with ‘skills’ and ‘projects’. The best solutuin. I suppose, will be to add an inscription for it during :hover .
Well. I’ve already said that, but I will repeat - really love your portfolio, it looks like something, you’ve put a lot of effort in. Especially, when it comes to responsiveness. And it’s a great pain for even experienced front-enders Good luck!
@MasterBuilder @dariuszsobkowicz @benetta
Thank you all for the comments! This was very helpful for me.
I’ve incorporated many of your suggestions:
- Reduced drop shadow, eliminated mouse over animation
- Simplified header card and added photo for some “pizazz”
- Projects: fade-in description on hover
- Skills: bigger, titles aligned, placement changed
- Color Scheme: mostly grays and blues
- Overall page container: optimized for larger screens by setting a max-width
- Typography: Added a new header font
- Navigation: tooltip appears upon hover
Any additional thoughts?
Looks much better, I suggest fix contrast for Project description and set black background with some opacity and white text.
I must not know anything because I think your design is great!!! Good work! You’re just starting to do this??? I’m a little jealous
This is much better, good choice of colors, and I agree with @dariuszsobkowicz that it’ll be better with dark background for projects. There’s also one thing, it kinda bugs me, cause I’m a perfectionist
Here’s how I see your page:
The problem is, you have a really big and good loking banner, that cinda creates left and right borders for the whole page. And after this div, the other blocks don’t look well-centered. I understand that its kinda like an optical illusion, but I suppose, these blocks need some more clear borders, and they should be aligned with the banner. Here’s a screenshot:
@benetta thank you for pointing that out! Still working on getting everything lined up perfectly, but it should look a bit better now.
@dariuszsobkowicz thanks! The black background on the project description was a great idea.
@jkeown that’s very kind of you to say!
Yess. great on desktop!!
Iphone 5S. problem :
check this page for resolutions : http://www.iphoneresolution.com
@benetta Oh dear! Thank you! I will fix this tonight.