pages/_pages/projects.md
CheariX 0aa3821300
Feat reworked project layout (closing #2246) (#2357)
The current state of project looks a bit unharmonized.

# Vertical layout before:

<img width="834" alt="Bildschirmfoto 2024-04-20 um 18 09 16"
src="https://github.com/alshedivat/al-folio/assets/1998723/55ba0968-bfd9-443f-b58a-eb6723deccfc">

# Vertical layout after:

<img width="834" alt="Bildschirmfoto 2024-04-20 um 18 10 28"
src="https://github.com/alshedivat/al-folio/assets/1998723/9b06b9b8-9228-4dfd-ab10-ca16ce028b1d">

# Horizontal layout before:

<img width="834" alt="Bildschirmfoto 2024-04-20 um 18 08 54"
src="https://github.com/alshedivat/al-folio/assets/1998723/97aaf5b4-1d3e-4a1c-8175-3a97391739b3">

# Horizontal layout after:

<img width="834" alt="Bildschirmfoto 2024-04-20 um 18 07 46"
src="https://github.com/alshedivat/al-folio/assets/1998723/a357fa62-8551-4e92-91d3-3d5d01dbc605">

***

These improvements are not perfect, but to be honest, I have no deep
experiences with bootstrap. Actually, I just read the
[docs](https://getbootstrap.com/docs/4.4/components/card/) 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
2024-04-22 21:39:22 -03:00

1.7 KiB

layout title permalink description nav nav_order display_categories horizontal
page projects /projects/ A growing collection of your cool projects. true 3
work
fun
false
{% if site.enable_project_categories and page.display_categories %} {% for category in page.display_categories %}

{{ category }}

{% assign categorized_projects = site.projects | where: "category", category %} {% assign sorted_projects = categorized_projects | sort: "importance" %} {% if page.horizontal %}
{% for project in sorted_projects %} {% include projects_horizontal.liquid %} {% endfor %}
{% else %}
{% for project in sorted_projects %} {% include projects.liquid %} {% endfor %}
{% endif %} {% endfor %}

{% else %}

{% assign sorted_projects = site.projects | sort: "importance" %}

{% if page.horizontal %}

{% for project in sorted_projects %} {% include projects_horizontal.liquid %} {% endfor %}
{% else %}
{% for project in sorted_projects %} {% include projects.liquid %} {% endfor %}
{% endif %} {% endif %}