Feedback on my portfolio please :)

Feedback on my portfolio please :)
0.0 0

#1

Here is my Portfolio project; I’d very much appreciate any feedback you kind people have…

In particular, what do you think of my CSS? Is it laid out ok? Is there anything unnecessary in there / anything that could be streamlined. Also, what do you think of the responsive aspects of the design.

With the responsive design, in particular, my ‘portfolio’ section breaks when it reduces to a medium size:

Ideas on fixing this would be appreciated.


#2

The CSS look pretty good. You have two selectors that don’t seem to select any elements: .portfolio-row1 .portfolio-row2 and .portfolio-item

You might want to inspect the design at smaller viewpoints. Some of the elements are overflowing on the x axis.

The Bootstrap documentation may have a fix for your medium viewport problem: https://getbootstrap.com/docs/3.3/css/#grid-example-wrapping

Overall, it’s a pretty nice design. Good work!


#3

There’s great artistry and fun in your design!

UX wise, your current about section reads and is formatted more-so like a header, and the about button only dropping someone down a few pixels when they click it from start is a bit odd. I’d consider creating a second about section below it and just calling the current section a sweet header :slight_smile:

UI wise, when viewing the projects there’s a large gap of space next to each image. Consider floating the image to one side or the other so that the text wraps around it to fill the void there, or maybe center the image inside the container. Might also want to add a way to include your projects title names.

As for your stacking/breaking div gallery issue, my preferred solution is to first set the width of the gallery container, then base the total width of your gallery items to less than 50% of that width (which should factor in the gallery container padding, as well as the gallery item’s padding, margin, and border width), and then set them to display inline-block. If you use a percentage value for the width then the contents of each gallery item can then be set to be centered within the div and will remain centered as the screen width changes. In this instance, I recommend also including a min-width value that is a set value (non-percentage) in order to have them stack up instead of squishing beyond readability on really small screens. If you want them to stay uniform vertically as well, you’ll have to set the gallery item height to set value. As a last note it’s generally best in all of these instances to use margins over padding,.


#4

@raddevon @L0TU5 Thanks for your feedback - very much appreciated. I shall make some changes and respond to this thread again shortly to outline what edits I made.