Portfolio page - feedback wanted

Hey everyone,

I just finished my portfolio page project, and i would love to get some feedback on it.
Any kind of feedback is welcome: looks, functionality, implementation, user-friendlyness, etc…

You can find it here.

Thank you!

-Wesserboy

Good start! I’m testing it on mobile and it seems to be having some issues with being responsive - areas overlapping each other.

Thank you for your response!

I forgot to test it on mobile earlier. I was able to replicate the problem. I have fixed the overlapping issue. I was using bootstraps .col-md-* instead of .col-xs-*.

When testing on mobile i ran into a few other issues:

  • The projects don’t seem to load
  • The navbar doesn’t scroll properly

Since both of these functions are carried out using jQuery, I first thought that jQuery wasn’t working on mobile. However, the .match-height-* tag i made using jQuery is working, which tells me that jQuery is not the problem.
When i simulate the page to be mobile using chrome’s built-in simulator these problems do not occur. This makes it hard to debug, since i can’t read console output on mobile.

Any ideas what could be the cause of these issues or how i can debug them on mobile?

1 Like

Hello,wesserboy!
This is nice! Guess, it still needs improvement.
First, the idea with carousel is nice, but I’m afraid the implementation i kinda wrong. Did you create it on your own or used some plugin?

Also, I think, some uniformity won’t be excessive. I’m speaking about the usage of border-radius feature. Look: your picture ans social links are round, your “about” block is not so round, and your projects blog don’t have border-radius at all.

You should really think about responsiveness, cause it’s a big thing now and it’s for long time with us. When I shrinked my browser to its half, I guess it started to look the way you planned it to be, but that’s not how it’s supposed to work in real life =)))

Thank you for your feedback!

I created the carousel on my own, but since I only have 2 projects to show off, it will always show the same projects. I think this is what you meant with the wrong implementation, or is there something else wrong with it?

As for uniformity this can indeed be improved. I will keep the buttons and the image fully rounded. I think having the text round would look strange, so i will keep that just with rounded edges. I will make the project thumbnails have rounded edges as well, this way there will be two kinds of elements on the page: fully-round and rounded-edges. I think this should make the page look more uniform.

Responsiveness is indeed something i have been struggling with quite a bit. I am currently using bootstrap’s .img-responsive class to make the images responsive, I am using bootstrap’s grid system to position the elements on the page and I am using the ‘vw’ unit in the css of the social buttons to make them rescale as the page does.
I feel like this should make the page respond to resizing quite wel, but the result still looks wonky.
Any tips on things i should do differently or add to fix the responsiveness would be greatly appeciated :slight_smile: .

About carousel - as you may see on my screen, there are two images, not even centered, without description, etc. Check google for examples of carousel, because right now it’s just so-so wrong. Not to mention, that the whole area is one big clickable area that leads to your tribute page. Anyway, there are tons of examples of carousels - choose the one you like, check its code and try to replicate it on your page.

vw and vh units are great, but they can play a bad joke with you. Cause on big screens this buttons are too big, they look more important than your portfolio and about text. It’s not really necessary to make them responsive, I think, cause I’ve never seen huge contact links in footer. People usually just set a value of like, 100px and it’s enough. If you find 100px too big on phones, you can ad a media query.

Responsiveness is mostly about grid / images / and font-size, and decorative elements are made static.
Here’s my advice, maybe it’s common, but it’s like super-useful: if you are on a web-page and you like how it’s done (some elements or even the whole page) - go check the code of it, you’ll learn more than reading anoher tutorial. Also, the best second step will be to replicate the stuff you’ve liked :)))

I have been working on the page some more, and i think i might have solved the issues now.

I couldn’t give up on my own carousel :wink:, so i decided to give it a make-over, and i think it looks a bit more professional now.

I have also abandoned the vw unit. As you suggested, I use a static size now. To fix problems on mobile, I made it so the buttons will line up vertically if the screen isn’t wide enough.

Finally I made everything respond in a bit more of a controlled matter to different screen sizes. I also managed to fix the problem of the navbar not scrolling in firefox.

The only thing I haven’t figured out yet is why jQuery doesn’t run on the standard android browser. When I open the page in chrome on my phone it works fine, but when I open it in the standard browser any elements requiring jQuery stop working.