A bit different designer portfolio website

Hello,

Just thought of sharing my portfolio website here, as it looks a bit different from most of the bootstrap look and feel that I’ve seen here before, with some exceptions.
The page speed insights is poor on performance on mobile, mostly due to the third party contact form and to an above the fold background image which I haven’t managed to figure out how to optimize (preload, etc).

I used to build my portfolio websites using WordPress, but I found them a pain to maintain (updating plugins etc) and I am loving Bootstap Studio because I can leave a website untouched for months (as the maintenance is very low).
I am still learning how to use BSS properly and I’m sure the website could have been better developed…

General comments and sugestions on how to improve are welcome.

portfolio website

Cheers.

1 Like

Nice looking and functioning site. I might suggest adding a partially transparent background to your text in your top main area with the large image, to help combat the contrast of the white over the bright colors. Other than that, Kudos!

1 Like

Thank you @jo-r . I just did that and it looks much better!
(There was already a translucent background, but it was working only on certain resolutions).
Thank you for your feedback!

The only thing I see that doesn’t make sense is you’ve added overflow: hidden; to the body, which disabled vertical scrolling. This makes it impossible to get to certain parts of your page. Was this intentional, or just something you were doing during development?

Also, I noticed you tried to outline the text with the text-stroke property, and wisely chose not to use it. Text-stroke was badly implemented as it only insets the stroke, making it useless for small text. Not sure what they were thinking when they came up with that property. They should have made it so you could choose between inset, center or outset for the outline.

You can try adding the CSS below to your hero class. It will enhance the readability of the text, and you can even remove the translucent background if you desire.

text-shadow: -1px 1px 0 #00000030, 1px 1px 0px #000000, 1px -1px 0 #00000030, -1px -1px 0 #00000030, 0px 0px 8px #00000070;

1 Like

Thank you for your feedback @printninja.

I’m afraid I couldn’t find the overflow: hidden; in the body code nor the parts of my page that you couldn’t get to, but I have written an overflow: visible !important; just in case. I hope that fixes it. If it doesn’t, feel free to let me know.

Amazing that text-shadow. I’ve just applied and it improved even further indeed. Thank you!

That works nice too @nnc good call. :slight_smile:

Actually, after testing it better, I decided to use a mix of both ideas, depending on the screen size, so that it’s fully readable.

Thank you both, again.:slight_smile: