Skip to content

Commit 097a32a

Browse files
alshedivatalshedivat
committed
Upgrade project grid
1 parent 0574852 commit 097a32a

11 files changed

+316
-177
lines changed

‎Gemfile

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,7 @@ group :jekyll_plugins do
88
gem 'jemoji'
99
gem 'unicode_utils'
1010
end
11+
# group :bootstrap do
12+
# gem 'bootstrap'
13+
# gem 'material-sass'
14+
# end

‎_config.yml

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ kramdown:
9797
span:
9898
line_numbers: false
9999
block:
100-
line_numbers: true
100+
line_numbers: false
101101
start_line: 1
102102

103103
# Includes & excludes
@@ -106,10 +106,12 @@ exclude: [vendor]
106106

107107
# Plug-ins
108108
plugins:
109-
- jekyll-email-protect
110-
- jekyll-paginate-v2
111-
- jekyll/scholar
112-
- jemoji
109+
- jekyll-email-protect
110+
- jekyll-paginate-v2
111+
- jekyll/scholar
112+
- jemoji
113+
# - bootstrap
114+
# - material-sass
113115

114116
# -----------------------------------------------------------------------------
115117
# Jekyll Scholar

‎_pages/projects.md

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -6,44 +6,42 @@ description: A growing collection of your cool projects.
66
nav: true
77
---
88

9-
{% for project in site.projects %}
9+
<div class="projects grid">
1010

11-
{% if project.redirect %}
12-
<div class="project">
13-
<div class="thumbnail">
14-
<a href="{{ project.redirect }}" target="_blank">
11+
{% assign sorted_projects = site.projects | sort: "importance" %}
12+
{% for project in sorted_projects %}
13+
<div class="grid-item">
14+
{% if project.redirect %}
15+
<a href="{{ project.redirect }}" target="_blank">
16+
{% else %}
17+
<a href="{{ project.url | relative_url }}">
18+
{% endif %}
19+
<div class="card hoverable">
1520
{% if project.img %}
16-
<img class="thumbnail" src="{{ project.img | relative_url }}"/>
17-
{% else %}
18-
<div class="thumbnail blankbox"></div>
19-
{% endif %}
20-
<span>
21-
<h1>{{ project.title }}</h1>
22-
<br/>
23-
<p>{{ project.description }}</p>
24-
</span>
25-
</a>
26-
</div>
27-
</div>
28-
{% else %}
21+
<img src="{{ project.img | relative_url }}" alt="project thumbnail">
22+
{% endif %}
23+
<div class="card-body">
24+
<h2 class="card-title text-lowercase">{{ project.title }}</h2>
25+
<p class="card-text">{{ project.description }}</p>
26+
<div class="row ml-1 mr-1 p-0">
27+
{% if project.github %}
28+
<div class="github-icon">
29+
<div class="icon" data-toggle="tooltip" title="Code Repository">
30+
<a href="{{ project.github }}" target="_blank"><i class="fab fa-github gh-icon"></i></a>
31+
</div>
32+
{% if project.github_stars %}
33+
<span class="stars" data-toggle="tooltip" title="GitHub Stars">
34+
<i class="fas fa-star"></i>
35+
<span id="{{ project.github_stars }}-stars"></span>
36+
</span>
37+
{% endif %}
38+
</div>
39+
{% endif %}
40+
</div>
41+
</div>
42+
</div>
43+
</a>
44+
</div>
45+
{% endfor %}
2946

30-
<div class="project ">
31-
<div class="thumbnail">
32-
<a href="{{ project.url | relative_url }}">
33-
{% if project.img %}
34-
<img class="thumbnail" src="{{ project.img | relative_url }}"/>
35-
{% else %}
36-
<div class="thumbnail blankbox"></div>
37-
{% endif %}
38-
<span>
39-
<h1>{{ project.title }}</h1>
40-
<br/>
41-
<p>{{ project.description }}</p>
42-
</span>
43-
</a>
44-
</div>
4547
</div>
46-
47-
{% endif %}
48-
49-
{% endfor %}

‎_projects/1_project.markdown

Lines changed: 43 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ img: /assets/img/12.jpg
66
importance: 1
77
---
88

9-
Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.
9+
Every project has a beautiful feature showcase page.
10+
It's easy to include images in a flexible 3-column grid format.
11+
Make your photos 1/3, 2/3, or full width.
1012

1113
To give your project a background in the portfolio page, just add the img tag to the front matter like so:
1214

@@ -17,40 +19,59 @@ To give your project a background in the portfolio page, just add the img tag to
1719
img: /assets/img/12.jpg
1820
---
1921

20-
21-
<div class="img_row">
22-
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
23-
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
24-
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
22+
<div class="row">
23+
<div class="col-sm mt-3 mt-md-0">
24+
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.jpg' | relative_url }}" alt="" title="example image"/>
25+
</div>
26+
<div class="col-sm mt-3 mt-md-0">
27+
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/3.jpg' | relative_url }}" alt="" title="example image"/>
28+
</div>
29+
<div class="col-sm mt-3 mt-md-0">
30+
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
31+
</div>
2532
</div>
26-
<div class="col three caption">
33+
<div class="caption">
2734
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.
2835
</div>
29-
<div class="img_row">
30-
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
36+
<div class="row">
37+
<div class="col-sm mt-3 mt-md-0">
38+
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
39+
</div>
3140
</div>
32-
<div class="col three caption">
41+
<div class="caption">
3342
This image can also have a caption. It's like magic.
3443
</div>
3544

36-
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.
45+
You can also put regular text between your rows of images.
46+
Say you wanted to write a little bit about your project before you posted the rest of the images.
47+
You describe how you toiled, sweated, *bled* for your project, and then... you reveal it's glory in the next row of images.
3748

3849

39-
<div class="img_row">
40-
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
41-
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
50+
<div class="row justify-content-sm-center">
51+
<div class="col-sm-8 mt-3 mt-md-0">
52+
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
53+
</div>
54+
<div class="col-sm-4 mt-3 mt-md-0">
55+
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
56+
</div>
4257
</div>
43-
<div class="col three caption">
58+
<div class="caption">
4459
You can also have artistically styled 2/3 + 1/3 images, like these.
4560
</div>
4661

4762

48-
<br/><br/>
49-
50-
51-
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
63+
The code is simple.
64+
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).
65+
To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
66+
Here's the code for the last row of images above:
5267

53-
<div class="img_row">
54-
<img class="col two left" src="/img/6.jpg"/>
55-
<img class="col one left" src="/img/11.jpg"/>
68+
```html
69+
<div class="row justify-content-sm-center">
70+
<div class="col-sm-8 mt-3 mt-md-0">
71+
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
72+
</div>
73+
<div class="col-sm-4 mt-3 mt-md-0">
74+
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
75+
</div>
5676
</div>
77+
```

‎_projects/2_project.markdown

Lines changed: 44 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@
22
layout: page
33
title: Project 2
44
description: a project with a background image
5-
img: /assets/img/2.jpg
5+
img: /assets/img/3.jpg
66
importance: 2
77
---
88

9-
Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.
9+
Every project has a beautiful feature showcase page.
10+
It's easy to include images in a flexible 3-column grid format.
11+
Make your photos 1/3, 2/3, or full width.
1012

1113
To give your project a background in the portfolio page, just add the img tag to the front matter like so:
1214

@@ -17,40 +19,59 @@ To give your project a background in the portfolio page, just add the img tag to
1719
img: /assets/img/12.jpg
1820
---
1921

20-
21-
<div class="img_row">
22-
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
23-
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
24-
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
22+
<div class="row">
23+
<div class="col-sm mt-3 mt-md-0">
24+
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.jpg' | relative_url }}" alt="" title="example image"/>
25+
</div>
26+
<div class="col-sm mt-3 mt-md-0">
27+
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/3.jpg' | relative_url }}" alt="" title="example image"/>
28+
</div>
29+
<div class="col-sm mt-3 mt-md-0">
30+
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
31+
</div>
2532
</div>
26-
<div class="col three caption">
33+
<div class="caption">
2734
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.
2835
</div>
29-
<div class="img_row">
30-
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
36+
<div class="row">
37+
<div class="col-sm mt-3 mt-md-0">
38+
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
39+
</div>
3140
</div>
32-
<div class="col three caption">
41+
<div class="caption">
3342
This image can also have a caption. It's like magic.
3443
</div>
3544

36-
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.
45+
You can also put regular text between your rows of images.
46+
Say you wanted to write a little bit about your project before you posted the rest of the images.
47+
You describe how you toiled, sweated, *bled* for your project, and then... you reveal it's glory in the next row of images.
3748

3849

39-
<div class="img_row">
40-
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
41-
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
50+
<div class="row justify-content-sm-center">
51+
<div class="col-sm-8 mt-3 mt-md-0">
52+
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
53+
</div>
54+
<div class="col-sm-4 mt-3 mt-md-0">
55+
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
56+
</div>
4257
</div>
43-
<div class="col three caption">
58+
<div class="caption">
4459
You can also have artistically styled 2/3 + 1/3 images, like these.
4560
</div>
4661

4762

48-
<br/><br/>
49-
50-
51-
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
63+
The code is simple.
64+
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).
65+
To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
66+
Here's the code for the last row of images above:
5267

53-
<div class="img_row">
54-
<img class="col two left" src="/img/6.jpg"/>
55-
<img class="col one left" src="/img/11.jpg"/>
68+
```html
69+
<div class="row justify-content-sm-center">
70+
<div class="col-sm-8 mt-3 mt-md-0">
71+
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
72+
</div>
73+
<div class="col-sm-4 mt-3 mt-md-0">
74+
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
75+
</div>
5676
</div>
77+
```

0 commit comments

Comments
 (0)