summaryrefslogtreecommitdiff
path: root/_projects/4_project.markdown
diff options
context:
space:
mode:
authorKarl Hallsby <karl@hallsby.com>2021-10-03 00:35:46 -0500
committerKarl Hallsby <karl@hallsby.com>2021-10-03 02:16:55 -0500
commite2c06d2681e18946ab6c3e3e6075aed92a4d13be (patch)
treeb30dce94387f4717394277932f691519e0281c44 /_projects/4_project.markdown
parenta10ad0a99ba6e44a35253c3bcaff80c90e99348e (diff)
Change to al-folio theme
Theme at: https://github.com/alshedivat/al-folio
Diffstat (limited to '_projects/4_project.markdown')
-rw-r--r--_projects/4_project.markdown78
1 files changed, 78 insertions, 0 deletions
diff --git a/_projects/4_project.markdown b/_projects/4_project.markdown
new file mode 100644
index 0000000..f2cefee
--- /dev/null
+++ b/_projects/4_project.markdown
@@ -0,0 +1,78 @@
+---
+layout: page
+title: project 4
+description: another without an image
+img:
+importance: 3
+category: fun
+---
+
+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">
+ <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.jpg' | relative_url }}" alt="" title="example image"/>
+ </div>
+ <div class="col-sm mt-3 mt-md-0">
+ <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/3.jpg' | relative_url }}" alt="" title="example image"/>
+ </div>
+ <div class="col-sm mt-3 mt-md-0">
+ <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
+ </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">
+ <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
+ </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.
+Say you wanted to write a little 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 it's glory in the next row of images.
+
+
+<div class="row justify-content-sm-center">
+ <div class="col-sm-8 mt-3 mt-md-0">
+ <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
+ </div>
+ <div class="col-sm-4 mt-3 mt-md-0">
+ <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
+ </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/" target="_blank">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:
+
+```html
+<div class="row justify-content-sm-center">
+ <div class="col-sm-8 mt-3 mt-md-0">
+ <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
+ </div>
+ <div class="col-sm-4 mt-3 mt-md-0">
+ <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
+ </div>
+</div>
+```