0aa3821300
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
66 lines
1.7 KiB
Markdown
66 lines
1.7 KiB
Markdown
---
|
|
layout: page
|
|
title: projects
|
|
permalink: /projects/
|
|
description: A growing collection of your cool projects.
|
|
nav: true
|
|
nav_order: 3
|
|
display_categories: [work, fun]
|
|
horizontal: false
|
|
---
|
|
|
|
<!-- pages/projects.md -->
|
|
<div class="projects">
|
|
{% if site.enable_project_categories and page.display_categories %}
|
|
<!-- Display categorized projects -->
|
|
{% for category in page.display_categories %}
|
|
<a id="{{ category }}" href=".#{{ category }}">
|
|
<h2 class="category">{{ category }}</h2>
|
|
</a>
|
|
{% assign categorized_projects = site.projects | where: "category", category %}
|
|
{% assign sorted_projects = categorized_projects | sort: "importance" %}
|
|
<!-- Generate cards for each project -->
|
|
{% if page.horizontal %}
|
|
<div class="container">
|
|
<div class="row row-cols-1 row-cols-md-2">
|
|
{% for project in sorted_projects %}
|
|
{% include projects_horizontal.liquid %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="row row-cols-1 row-cols-md-3">
|
|
{% for project in sorted_projects %}
|
|
{% include projects.liquid %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% else %}
|
|
|
|
<!-- Display projects without categories -->
|
|
|
|
{% assign sorted_projects = site.projects | sort: "importance" %}
|
|
|
|
<!-- Generate cards for each project -->
|
|
|
|
{% if page.horizontal %}
|
|
|
|
<div class="container">
|
|
<div class="row row-cols-1 row-cols-md-2">
|
|
{% for project in sorted_projects %}
|
|
{% include projects_horizontal.liquid %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="row row-cols-1 row-cols-md-3">
|
|
{% for project in sorted_projects %}
|
|
{% include projects.liquid %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|