Feat reworked project layout (closing #2246)

[CheariX]

The current state of project looks a bit unharmonized.

Vertical layout before:

Vertical layout after:

Horizontal layout before:

Horizontal layout after:

---

These improvements are not perfect, but to be honest, I have no deep experiences with bootstrap. Actually, I just read the docs and tried my best.
But I think it looks way better than before.

I'm pretty happy with the vertical layout, but the horizontal could be improved.
I tried various things to get a better alignment of the image, without any success.
In theroy, there is e.g. card-img-top, but I could not make it work.

I changed the project descriptions to make some of these edge-cases visible.

Feedback and improvements (especially code) are more than welcome

Closes #2246

[CheariX]

I think I found the solution: it was some non-standard .card-item class which kind of destroyed the layout.
I removed it and remplaced it with a bootstrap standard class.

Result

[eolesinski]

Just thinking out loud here - but it might be interesting to add an optional field to include a date + link to code/github (perhaps with an icon) on each of the project cards. This would probably be a different PR though - wondering what others think

[CheariX]

Just thinking out loud here - but it might be interesting to add an optional field to include a date + link to code/github (perhaps with an icon) on each of the project cards. This would probably be a different PR though - wondering what others think

Isn't this what we have already?

al-folio/_includes/projects.liquid

Lines 23 to 28 in c4c0665

	{% if project.github_stars %}
	<span class="stars" data-toggle="tooltip" title="GitHub Stars">
	<i class="fa-solid fa-star"></i>
	<span id="{{ project.github_stars }}-stars"></span>
	</span>
	{% endif %}

It seems to support project.github_stars and project.github. Someone could extend it for other variables, but I think that would be another feature (another PR).

To be honest, I don't use this github icon feature. My goal with this PR was to improve the styling of the current featureset.

[george-gca]

These improvements are not perfect, but to be honest, I have no deep experiences with bootstrap. Actually, I just read the docs and tried my best.

I can't speak for everybody, but that was exactly my case. I started implementing a few minor tweaks I'd like to see on the template without knowing how to code in jekyll, ruby, and not that familiar with web dev. Long story short, I am writing plugins for it. This is exactly how contributing to open source works, sometimes it just needs someone with a little more time, patience, practice, or even the will to try and understand it until it works. Thanks for your contribution.