I’ve just finished my personal portfolio project - at https://codepen.io/mcpop999/full/KBwyLq/ - and would really love to have feedback on it. It was a painful job and many times did I regret the decision to go for a “parallax” effect (if that’s what this is). It took a lot of tweaking to get it to work, so I hope it’s OK now!
I am still on my learning curve of all these but would like to chip in my thinking, if you don’t mind.
First of all, I am a big fan of Parallax. It was a huge pain for you but oh God, it is so worth it. You nailed it beautifully. Smooth scroll. I loveeee that. I was building websites with WordPress themes and some of their Parallax gave you a lot of slip and hiccup while scrolling. Thought the themes were from a professional but their Parallax effects are nowhere near this.
You made a very nice choice of font family for opening text. It was an image background yet easy enough to read.
I love the 2nd “screen” with the blue sky. Since the blue sky is so lively, I would prefer a real-life photo of balloons to graphic. The text over the balloons, if you’d like to make them even more readable, could have some border & shading - but I’m not sure that could affect appearance though.
Third “screen”: online courses - perfect to me . And quite a nice contrast yet balance with previous colorful screens.
Fourth screen: portfolio. Looks nice. Especially your project screen shots look nice too. I actually click to see more of your projects. Sir, you know how to make simple idea look neat and nice. I just wish there’s a way to beautifully display Project name and a brief description below each project. I loveee the Stephen Hawking tribute page by the way. Resisting hard to copy your design since my tribute page looks like a boring version of wikipedia.
Fifth screen: About me. The text here are not as easy to read as previous screens, but I can still read it. I just wonder if you would like to showcase some technical skills/facts, or just want to keep it chill (and interesting, to be honest)?
Sixth screen: Nice finish. I think about adding more contact info like phone number and email, but actually those should not be on Internet. But LinkedIn and GitHub profile should be fine.
Thank you for sharing. Now I so want to learn parallax.
One more thing, if you could look into images’ size. It took some time to load on my laptop. Stephen Hawking in Tribute Page and the first image background in Portfolio page, to be specific.
It looks good and works well on Chrome. I think the only thing is that some of your text is hard to read over the images. I’d use CSS to add some scrim behind the words to make them easier to read see Rule 4:
@Tirjasdyn: This is exactly what I need. Bookmark it. Thanks for sharing.
Many thanks for all your detailed feedback, and especially for all the positive remarks! It’s very kind and I really need that encouragement - a lot went wrong on the way, especially with the background images. That’s why the image took a long time to load - because I found i could not use the smaller image I intended or the positioning went wrong.
I will have a go at putting names for the projects - above, below, or over the image. Not sure yet!
@Tirjasdyn - You are absolutely right - the light part of the background image is especially bad with the white text. I suppose it may be easiest just to change the image as this one has such varied degrees of darkness.
The link is very useful and I too have bookmarked it.