Skip to content

Commit e27fe2a

Browse files
AbstractGeekalshedivat
AbstractGeek
and
alshedivat
authored
Categories for projects and an optional horizontal project card style (alshedivat#224)
* Add webpage to academic pages list * adding panelbear analytics * added categories for projects and horizontal mode display for projects * rewrote the code to ensure it works properly with current project definitions * Style adjustments Co-authored-by: Maruan Al-Shedivat <alshedivat.maruan@gmail.com>
1 parent 0e4df83 commit e27fe2a

12 files changed

+178
-53
lines changed

‎README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ $ bundle exec jekyll build
148148
which will (re-)generate the static webpage in the `_site/` folder.
149149
Then simply copy the contents of the `_site/` foder to your hosting server.
150150

151-
**Note:** Make sure to correctly set the `url` and `baseurl` fields in `_config.yml` before building the webpage. If you are deploying your webpage to `your-domain.com/your-project/`, you must set `url: your-domain.com` and `baseurl: /your-project/`. If you are deploing directly to `your-domain.com`, leave `baseurl` blank.
151+
**Note:** Make sure to correctly set the `url` and `baseurl` fields in `_config.yml` before building the webpage. If you are deploying your webpage to `your-domain.com/your-project/`, you must set `url: your-domain.com` and `baseurl: /your-project/`. If you are deploing directly to `your-domain.com`, leave `baseurl` blank.
152152

153153
</details>
154154

@@ -244,7 +244,7 @@ scholar:
244244
last_name: Einstein
245245
first_name: [Albert, A.]
246246
```
247-
If the entry matches the last name and one form of the first names, it will be underlined.
247+
If the entry matches the last name and one form of the first names, it will be underlined.
248248
Keep meta-information about your co-authors in `_data/coauthors.yml` and Jekyll will insert links to their webpages automatically.
249249
The coauthor data format in `_data/coauthors.yml` is as follows,
250250
```
@@ -260,14 +260,14 @@ The coauthor data format in `_data/coauthors.yml` is as follows,
260260
- firstname: ["Nathan", "N."]
261261
url: https://en.wikipedia.org/wiki/Nathan_Rosen
262262
263-
"Bach":
263+
"Bach":
264264
- firstname: ["Johann Sebastian", "J. S."]
265265
url: https://en.wikipedia.org/wiki/Johann_Sebastian_Bach
266266
267267
- firstname: ["Carl Philipp Emanuel", "C. P. E."]
268268
url: https://en.wikipedia.org/wiki/Carl_Philipp_Emanuel_Bach
269269
```
270-
If the entry matches one of the combinations of the last names and the first names, it will be highlighted and linked to the url provided.
270+
If the entry matches one of the combinations of the last names and the first names, it will be highlighted and linked to the url provided.
271271

272272
</details>
273273

‎_config.yml

+11-7
Original file line numberDiff line numberDiff line change
@@ -166,13 +166,17 @@ scholar:
166166
# Optional Features
167167
# -----------------------------------------------------------------------------
168168

169-
enable_google_analytics: false
170-
enable_panelbear_analytics: false
171-
enable_mansory: true
172-
enable_math: true
173-
enable_tooltips: false
174-
enable_darkmode: true
175-
enable_navbar_social: false
169+
enable_google_analytics: false # enables google analytics
170+
enable_panelbear_analytics: false # enables panelbear analytics
171+
enable_mansory: true # enables automatic project cards arangement
172+
enable_math: true # enables math typesetting (uses MathJax)
173+
enable_tooltips: false # enables automatic tooltip links generated
174+
# for each section titles on pages and posts
175+
enable_darkmode: true # enables switching between light/dark modes
176+
enable_navbar_social: false # enables displaying social links in the
177+
# navbar on the about page
178+
enable_project_categories: true # enables categorization of projects into
179+
# multiple categories
176180

177181
# -----------------------------------------------------------------------------
178182
# Library versions

‎_includes/projects.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<div class="grid-item">
2+
{% if project.redirect %}
3+
<a href="{{ project.redirect }}" target="_blank">
4+
{% else %}
5+
<a href="{{ project.url | relative_url }}">
6+
{% endif %}
7+
<div class="card hoverable">
8+
{% if project.img %}
9+
<img src="{{ project.img | relative_url }}" alt="project thumbnail">
10+
{% endif %}
11+
<div class="card-body">
12+
<h2 class="card-title text-lowercase">{{ project.title }}</h2>
13+
<p class="card-text">{{ project.description }}</p>
14+
<div class="row ml-1 mr-1 p-0">
15+
{% if project.github %}
16+
<div class="github-icon">
17+
<div class="icon" data-toggle="tooltip" title="Code Repository">
18+
<a href="{{ project.github }}" target="_blank"><i class="fab fa-github gh-icon"></i></a>
19+
</div>
20+
{% if project.github_stars %}
21+
<span class="stars" data-toggle="tooltip" title="GitHub Stars">
22+
<i class="fas fa-star"></i>
23+
<span id="{{ project.github_stars }}-stars"></span>
24+
</span>
25+
{% endif %}
26+
</div>
27+
{% endif %}
28+
</div>
29+
</div>
30+
</div>
31+
</a>
32+
</div>

‎_includes/projects_horizontal.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<div class="card-item col">
2+
{% if project.redirect %}
3+
<a href="{{ project.redirect }}" target="_blank">
4+
{% else %}
5+
<a href="{{ project.url | relative_url }}">
6+
{% endif %}
7+
<div class="card hoverable">
8+
<div class="row g-0">
9+
{% if project.img %}
10+
<div class="card-img col-md-6">
11+
<img src="{{ project.img | relative_url }}" alt="project thumbnail">
12+
</div>
13+
<div class="col-md-6">
14+
{% else %}
15+
<div class="col-md-12">
16+
{% endif %}
17+
<div class="card-body">
18+
<h3 class="card-title text-lowercase">{{ project.title }}</h3>
19+
<p class="card-text">{{ project.description }}</p>
20+
<div class="row ml-1 mr-1 p-0">
21+
{% if project.github %}
22+
<div class="github-icon">
23+
<div class="icon" data-toggle="tooltip" title="Code Repository">
24+
<a href="{{ project.github }}" target="_blank"><i class="fab fa-github gh-icon"></i></a>
25+
</div>
26+
{% if project.github_stars %}
27+
<span class="stars" data-toggle="tooltip" title="GitHub Stars">
28+
<i class="fas fa-star"></i>
29+
<span id="{{ project.github_stars }}-stars"></span>
30+
</span>
31+
{% endif %}
32+
</div>
33+
{% endif %}
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
</a>
40+
</div>

‎_pages/projects.md

+45-35
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,54 @@ title: projects
44
permalink: /projects/
55
description: A growing collection of your cool projects.
66
nav: true
7+
display_categories: [work, fun]
8+
horizontal: false
79
---
8-
9-
<div class="projects grid">
10-
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">
20-
{% if project.img %}
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 %}
10+
<div class="projects">
11+
{% if site.enable_project_categories and page.display_categories %}
12+
<!-- Display categorized projects -->
13+
{% for category in page.display_categories %}
14+
<h2 class="category">{{category}}</h2>
15+
{% assign categorized_projects = site.projects | where: "category", category %}
16+
{% assign sorted_projects = categorized_projects | sort: "importance" %}
17+
<!-- Generate cards for each project -->
18+
{% if page.horizontal %}
19+
<div class="container">
20+
<div class="row row-cols-2">
21+
{% for project in sorted_projects %}
22+
{% include projects_horizontal.html %}
23+
{% endfor %}
4024
</div>
4125
</div>
26+
{% else %}
27+
<div class="grid">
28+
{% for project in sorted_projects %}
29+
{% include projects.html %}
30+
{% endfor %}
31+
</div>
32+
{% endif %}
33+
{% endfor %}
34+
35+
{% else %}
36+
<!-- Display projects without categories -->
37+
{% assign sorted_projects = site.projects | sort: "importance" %}
38+
<!-- Generate cards for each project -->
39+
{% if page.horizontal %}
40+
<div class="container">
41+
<div class="row row-cols-2">
42+
{% for project in sorted_projects %}
43+
{% include projects_hrz.html %}
44+
{% endfor %}
45+
</div>
46+
</div>
47+
{% else %}
48+
<div class="grid">
49+
{% for project in sorted_projects %}
50+
{% include projects.html %}
51+
{% endfor %}
4252
</div>
43-
</a>
44-
</div>
45-
{% endfor %}
53+
{% endif %}
54+
55+
{% endif %}
4656

4757
</div>

‎_projects/1_project.markdown

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ title: project 1
44
description: a project with a background image
55
img: /assets/img/12.jpg
66
importance: 1
7+
category: work
78
---
89

910
Every project has a beautiful feature showcase page.

‎_projects/2_project.markdown

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ title: project 2
44
description: a project with a background image
55
img: /assets/img/3.jpg
66
importance: 2
7+
category: work
78
---
89

910
Every project has a beautiful feature showcase page.

‎_projects/3_project.markdown

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ description: a project that redirects to another website
55
img: /assets/img/7.jpg
66
redirect: https://unsplash.com
77
importance: 3
8+
category: work
89
---
910

1011
Every project has a beautiful feature showcase page.

‎_projects/4_project.markdown

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ title: project 4
44
description: another without an image
55
img:
66
importance: 3
7+
category: fun
78
---
89

910
Every project has a beautiful feature showcase page.

‎_projects/5_project.markdown

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ title: project 5
44
description: a project with a background image
55
img: /assets/img/1.jpg
66
importance: 3
7+
category: fun
78
---
89

910
Every project has a beautiful feature showcase page.

‎_projects/6_project.markdown

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ title: project 6
44
description: a project with no image
55
img:
66
importance: 4
7+
category: fun
78
---
89

910
Every project has a beautiful feature showcase page.

‎_sass/_base.scss

+40-7
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,7 @@ footer.sticky-bottom {
272272
}
273273
}
274274
&.active .page-link {
275+
color: $white-color;
275276
background-color: var(--global-theme-color);
276277
&:hover {
277278
background-color: var(--global-theme-color);
@@ -294,25 +295,57 @@ footer.sticky-bottom {
294295
// Projects
295296

296297
.projects {
298+
.card-item {
299+
width: auto;
300+
margin-bottom: 10px;
301+
302+
a {
303+
text-decoration: none;
304+
}
305+
306+
.row {
307+
display: flex;
308+
align-items: center;
309+
}
310+
311+
.card {
312+
img {
313+
width: 100%;
314+
}
315+
}
316+
}
317+
297318
.grid-item {
298319
width: 250px;
299320
margin-bottom: 10px;
321+
300322
a {
301323
color: black;
302324
text-decoration: none;
325+
303326
&:hover {
304327
color: var(--global-theme-color);
305328
}
306329
}
307-
}
308-
.card {
309-
img {
310-
width: 100%;
311-
}
312-
.card-title {
313-
color: $black-color;
330+
331+
.card {
332+
img {
333+
width: 100%;
334+
}
335+
.card-title {
336+
color: $black-color;
337+
}
314338
}
315339
}
340+
341+
h2.category {
342+
color: $grey-color-light;
343+
border-bottom: 1px solid $grey-color-light;
344+
padding-top: 0.5rem;
345+
margin-top: 2rem;
346+
margin-bottom: 1rem;
347+
text-align: right;
348+
}
316349
}
317350

318351

0 commit comments

Comments
 (0)