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
82 lines
3.2 KiB
Markdown
82 lines
3.2 KiB
Markdown
---
|
|
layout: page
|
|
title: project 1
|
|
description: with background image
|
|
img: assets/img/12.jpg
|
|
importance: 1
|
|
category: work
|
|
related_publications: true
|
|
---
|
|
|
|
Every project has a beautiful feature showcase page.
|
|
It's easy to include images in a flexible 3-column grid format.
|
|
Make your photos 1/3, 2/3, or full width.
|
|
|
|
To give your project a background in the portfolio page, just add the img tag to the front matter like so:
|
|
|
|
---
|
|
layout: page
|
|
title: project
|
|
description: a project with a background image
|
|
img: /assets/img/12.jpg
|
|
---
|
|
|
|
<div class="row">
|
|
<div class="col-sm mt-3 mt-md-0">
|
|
{% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
|
</div>
|
|
<div class="col-sm mt-3 mt-md-0">
|
|
{% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
|
</div>
|
|
<div class="col-sm mt-3 mt-md-0">
|
|
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
|
</div>
|
|
</div>
|
|
<div class="caption">
|
|
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm mt-3 mt-md-0">
|
|
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
|
</div>
|
|
</div>
|
|
<div class="caption">
|
|
This image can also have a caption. It's like magic.
|
|
</div>
|
|
|
|
You can also put regular text between your rows of images, even citations {% cite einstein1950meaning %}.
|
|
Say you wanted to write a bit about your project before you posted the rest of the images.
|
|
You describe how you toiled, sweated, _bled_ for your project, and then... you reveal its glory in the next row of images.
|
|
|
|
<div class="row justify-content-sm-center">
|
|
<div class="col-sm-8 mt-3 mt-md-0">
|
|
{% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
|
</div>
|
|
<div class="col-sm-4 mt-3 mt-md-0">
|
|
{% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
|
</div>
|
|
</div>
|
|
<div class="caption">
|
|
You can also have artistically styled 2/3 + 1/3 images, like these.
|
|
</div>
|
|
|
|
The code is simple.
|
|
Just wrap your images with `<div class="col-sm">` and place them inside `<div class="row">` (read more about the <a href="https://getbootstrap.com/docs/4.4/layout/grid/">Bootstrap Grid</a> system).
|
|
To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
|
|
Here's the code for the last row of images above:
|
|
|
|
{% raw %}
|
|
|
|
```html
|
|
<div class="row justify-content-sm-center">
|
|
<div class="col-sm-8 mt-3 mt-md-0">
|
|
{% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
|
</div>
|
|
<div class="col-sm-4 mt-3 mt-md-0">
|
|
{% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
{% endraw %}
|