` (read more about the
Bootstrap Grid 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
+
+
+ {% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+
+
+ {% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+
+
+```
+
+{% endraw %}
diff --git a/_projects/8_project.md b/_projects/8_project.md
new file mode 100644
index 0000000..c607901
--- /dev/null
+++ b/_projects/8_project.md
@@ -0,0 +1,81 @@
+---
+layout: page
+title: project 8
+description: an other project with a background image and giscus comments
+img: assets/img/9.jpg
+importance: 2
+category: work
+giscus_comments: 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
+ ---
+
+
+
+ {% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+
+
+ {% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+
+
+ {% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+
+
+
+ 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.
+
+
+
+ {% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+
+
+
+ This image can also have a caption. It's like magic.
+
+
+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 its glory in the next row of images.
+
+
+
+ {% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+
+
+ {% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+
+
+
+ You can also have artistically styled 2/3 + 1/3 images, like these.
+
+
+The code is simple.
+Just wrap your images with `
` and place them inside `
` (read more about the
Bootstrap Grid 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
+
+
+ {% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+
+
+ {% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+
+
+```
+
+{% endraw %}
diff --git a/_projects/9_project.md b/_projects/9_project.md
new file mode 100644
index 0000000..7345bbb
--- /dev/null
+++ b/_projects/9_project.md
@@ -0,0 +1,80 @@
+---
+layout: page
+title: project 9
+description: another project with an image 🎉
+img: assets/img/6.jpg
+importance: 4
+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
+ ---
+
+
+
+ {% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+
+
+ {% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+
+
+ {% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+
+
+
+ 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.
+
+
+
+ {% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+
+
+
+ This image can also have a caption. It's like magic.
+
+
+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 its glory in the next row of images.
+
+
+
+ {% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+
+
+ {% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+
+
+
+ You can also have artistically styled 2/3 + 1/3 images, like these.
+
+
+The code is simple.
+Just wrap your images with `
` and place them inside `
` (read more about the
Bootstrap Grid 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
+
+
+ {% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+
+
+ {% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
+
+
+```
+
+{% endraw %}
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 63d2dc9..f863d53 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -624,6 +624,10 @@ footer.sticky-bottom {
}
}
+ .col {
+ padding-bottom: 1rem;
+ }
+
.grid-sizer,
.grid-item {
width: 250px;