Hi everybody, really enjoying learning on Free Code Camp. My personal portfolio project, would love to get any feedback, always appreciated. Thank you in advance.
https://codepen.io/CraigC0des/pen/YZZqba
Lots of good things about it - I like the animations on the navigation buttons, the color scheme is fairly unified, and it’s got everything it needs.
On the downside, though, it’s too busy with that background (and the resolution of the background is too low - pixelation easily visible). You’ll also want to change those fonts, because the script font is too casual and somewhat difficult to read, and Times New Roman is often seen as outdated and boring. Thinking about personal branding, neither font particularly screams “web developer”.
Functionality-wise, your LinkedIn and Twitter links are broken due to how CodePen handles links. Make sure to set the target property to "_blank" - this opens them in a new browser tab (this is typically what you’d want to happen anyway for external links).
Besides what has been added above by lionel-rowe I would say the following :
I like your color choice however we don’t see very much of the background picture.
In my opinion it may be better to either:
Keep the color as is and remove the background image completely since space-wise it does not bring much value (but you may risk falling into “old template” style…
Or bring in a better resolution picture and reduce the margins for each section to let your users see the actual background image.
I would also encourage you to take at the “clip” property, pretty neat to use
Hi Lionel, thank you for your feedback. I understand the comment regarding the links and fonts. I hear what you are saying about the resolution of the background, but I have not learned anything about that subject on Free Code Camp yet, so I do not know what your talking about when you say res is too low, any tips about this would be very helpful.
Again, thank you.
Thank you RougeRedWired, the image looked fine to me, I am new to this, and I am not understanding the resolution element to what you are saying unfortunately. Any help appreciated.
Again, thank you.
Hi,
No problem,
If you look closely at the background picture you will see that the tree contours, as well as the mountains’ are blurry.
The fact that we only see small parts of the picture shows it even more.
Here is a simple example:
Thank you RougeRedWired, appreciate the time you have taken and I see your point clearly. Is there a recommended resolution for images, for such a presentation. I just quickly pulled this one off google images.
To add to what RougeRedWired said, resolution refers to the width and height in pixels. To use an extreme example, if you chose a Super Mario sprite as your background, each pixel would look huge.
The blurred heart in the image in RougeRedWired’s is an approximation of what certain resizing algorithms will do to make up for lower resolution, but the image itself is actually high-resolution and there’s no visible pixelation. A pixelated version would look like this (again, this is an extreme example to illustrate the point):
Hi,
For picture as far as I know for the projects:
For me it has been mostly trial and errors to find the pictures that do not have blurred edges, so I can not help you further than that with accurate method.
Perhaps a designer or someone with more experience on Code Pen could better help.
On the flip side you may want to keep checking the size of the picture and mitigate the weight of the picture with media queries depending on the device.
Pexels and Pixabay both offer free stock photos. Make sure to check licenses, though!
If using Google image search, you can also filter by both resolution and license.
Thank you for your help
Thank you for your help I will check it out 