Feat reworked project layout (closing #2246) #2357
Conversation
|
I think I found the solution: it was some non-standard Result |
|
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 It seems to support 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. |
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. |
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://rs.http3.lol/index.php?q=aHR0cHM6Ly9naXRodWIuY29tL2Fsc2hlZGl2YXQvYWwtZm9saW8vcHVsbC88YSBocmVmPQ"https://github.com/alshedivat/al-folio/assets/1998723/55ba0968-bfd9-443f-b58a-eb6723deccfc">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://rs.http3.lol/index.php?q=aHR0cHM6Ly9naXRodWIuY29tL2Fsc2hlZGl2YXQvYWwtZm9saW8vcHVsbC88YSBocmVmPQ"https://github.com/alshedivat/al-folio/assets/1998723/9b06b9b8-9228-4dfd-ab10-ca16ce028b1d">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://rs.http3.lol/index.php?q=aHR0cHM6Ly9naXRodWIuY29tL2Fsc2hlZGl2YXQvYWwtZm9saW8vcHVsbC88YSBocmVmPQ"https://github.com/alshedivat/al-folio/assets/1998723/97aaf5b4-1d3e-4a1c-8175-3a97391739b3">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://rs.http3.lol/index.php?q=aHR0cHM6Ly9naXRodWIuY29tL2Fsc2hlZGl2YXQvYWwtZm9saW8vcHVsbC88YSBocmVmPQ"https://github.com/alshedivat/al-folio/assets/1998723/a357fa62-8551-4e92-91d3-3d5d01dbc605">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 alshedivat#2246
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