Hey, @pleeseno, thanks again for “throwing me under the bus.” I really do enjoy checking out code and seeing where (and usually if) it needs improvement.
First thing I might suggest, @poklipart, would be to look at the layout of your projects. You’re using tiles, and that’s great, but you’re making yourself have to micro-manage size and all that. Meh. There’s a great feature in CSS for displaying content in a more intuitive way: display: grid
I took your page and cloned it, then made some changes. THE ONLY BITS I CHANGED are the in project section, and I only changed the CSS. You’ll find the three selectors I changed are prefaced with #projects – I did that to take advantage of CSS specificity, and to make it a little easier to see at a quick glance.
Using the grid, I set up #project as a grid, with two grid areas (rows): header and main. The p tag is assigned to the grid-area: header, and the div I created to contain the projects (.project-tiles-container) is assigned to grid-area: main. Doing this, I don’t have to specify all the details of positioning and alignment, the grid does this for me.
The neat bit happens next: within the .project-tiles-container, I’ve created another grid. This one is a three-columns-by-however-many-rows, with the contents being centered on their grid column. All that replaces the width/margin/padding rules you’d set up.
Haven’t messed with the rest, but I will give a word of advice: start simple. I try to pare my HTML to the barest minimum to display what I want, then start on the CSS. Perhaps start from setting up the three sections to be displayed as full-display panes, then add in the section contents.
I recommend reading this article on css grids, it’s pretty understandable. More and more, HTML can be simplified and CSS can be streamlined with the effective use of grids.