Skip to content

Commit 065521a

Browse files
sheilaschoeppsheilaschoepp
committed
created services page
1 parent 98cdfba commit 065521a

File tree

7 files changed

+338
-0
lines changed

7 files changed

+338
-0
lines changed

‎_config.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,8 @@ collections: # a method to group different types of content
166166
output: true
167167
projects:
168168
output: true
169+
services:
170+
output: true
169171
teachings:
170172
output: true
171173
travels:
@@ -416,6 +418,7 @@ enable_tooltips: false # enables automatic tooltip links generated for each sect
416418
enable_darkmode: true # enables switching between light/dark modes
417419
enable_navbar_social: true # enables displaying social links in the navbar on the about page
418420
enable_project_categories: true # enables categorization of projects into multiple categories
421+
enable_service_categories: true # enables categorization of services into multiple categories
419422
enable_travel_categories: true # enables categorization of services into multiple categories
420423
enable_medium_zoom: true # enables image zoom feature (as on medium.com)
421424
enable_progressbar: true # enables a horizontal progress bar linked to the vertical scroll position

‎_includes/services.liquid‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<div class="col">
2+
<a href="{% if service.redirect %}{{ service.redirect }}{% else %}{{ service.url | relative_url }}{% endif %}">
3+
<div class="card h-100 hoverable">
4+
{% if service.img %}
5+
{%
6+
include figure.liquid
7+
loading="eager"
8+
path=service.img
9+
sizes = "250px"
10+
alt="service thumbnail"
11+
class="card-img-top"
12+
%}
13+
{% endif %}
14+
<div class="card-body">
15+
<h2 class="card-title">{{ service.title }}</h2>
16+
<p class="card-text">{{ service.description }}</p>
17+
<div class="row ml-1 mr-1 p-0">
18+
{% if service.github %}
19+
<div class="github-icon">
20+
<div class="icon" data-toggle="tooltip" title="Code Repository">
21+
<a href="{{ service.github }}"><i class="fa-brands fa-github gh-icon"></i></a>
22+
</div>
23+
{% if service.github_stars %}
24+
<span class="stars" data-toggle="tooltip" title="GitHub Stars">
25+
<i class="fa-solid fa-star"></i>
26+
<span id="{{ service.github_stars }}-stars"></span>
27+
</span>
28+
{% endif %}
29+
</div>
30+
{% endif %}
31+
</div>
32+
</div>
33+
</div>
34+
</a>
35+
</div>

‎_includes/services_horizontal.liquid‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<div class="col mb-4">
2+
<a href="{% if service.redirect %}{{ service.redirect }}{% else %}{{ service.url | relative_url }}{% endif %}">
3+
<div class="card h-100 hoverable">
4+
<div class="row no-gutters">
5+
{% if service.img %}
6+
<div class="col-md-6">
7+
{% include figure.liquid loading="eager" path=service.img sizes="(min-width: 768px) 156px, 50vw" alt="service thumbnail" class="card-img" %}
8+
</div>
9+
{% endif %}
10+
<div class="{% if service.img %}col-md-6{% else %}col-md-12{% endif %}">
11+
<div class="card-body">
12+
<h3 class="card-title">{{ service.title }}</h3>
13+
<p class="card-text">{{ service.description }}</p>
14+
<div class="row ml-1 mr-1 p-0">
15+
{% if service.github %}
16+
<div class="github-icon">
17+
<div class="icon" data-toggle="tooltip" title="Code Repository">
18+
<a href="{{ service.github }}"><i class="fa-brands fa-github gh-icon"></i></a>
19+
</div>
20+
{% if service.github_stars %}
21+
<span class="stars" data-toggle="tooltip" title="GitHub Stars">
22+
<i class="fa-solid fa-star"></i>
23+
<span id="{{ service.github_stars }}-stars"></span>
24+
</span>
25+
{% endif %}
26+
</div>
27+
{% endif %}
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
</a>
34+
</div>

‎_pages/services.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
layout: page
3+
title: service
4+
permalink: /services/
5+
description:
6+
nav: false
7+
nav_order: 3
8+
display_categories: [professional, teaching, community]
9+
horizontal: false
10+
---
11+
12+
<!-- pages/services.md -->
13+
<div class="services">
14+
{% if site.enable_service_categories and page.display_categories %}
15+
<!-- Display categorized services -->
16+
{% for category in page.display_categories %}
17+
<a id="{{ category }}" href=".#{{ category }}">
18+
<h2 class="category">{{ category }}</h2>
19+
</a>
20+
{% assign categorized_services = site.services | where: "category", category %}
21+
{% assign sorted_services = categorized_services | sort: "importance" %}
22+
<!-- Generate cards for each service -->
23+
{% if page.horizontal %}
24+
<div class="container">
25+
<div class="row row-cols-1 row-cols-md-2">
26+
{% for service in sorted_services %}
27+
{% include services_horizontal.liquid %}
28+
{% endfor %}
29+
</div>
30+
</div>
31+
{% else %}
32+
<div class="row row-cols-1 row-cols-md-3">
33+
{% for service in sorted_services %}
34+
{% include services.liquid %}
35+
{% endfor %}
36+
</div>
37+
{% endif %}
38+
{% endfor %}
39+
40+
{% else %}
41+
42+
<!-- Display services without categories -->
43+
44+
{% assign sorted_services = site.services | sort: "importance" %}
45+
46+
<!-- Generate cards for each service -->
47+
48+
{% if page.horizontal %}
49+
50+
<div class="container">
51+
<div class="row row-cols-1 row-cols-md-2">
52+
{% for service in sorted_services %}
53+
{% include services_horizontal.liquid %}
54+
{% endfor %}
55+
</div>
56+
</div>
57+
{% else %}
58+
<div class="row row-cols-1 row-cols-md-3">
59+
{% for service in sorted_services %}
60+
{% include services.liquid %}
61+
{% endfor %}
62+
</div>
63+
{% endif %}
64+
{% endif %}
65+
</div>

‎_sass/_components.scss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,45 @@ ul.task-list input[type="checkbox"] {
161161
}
162162
}
163163

164+
// Services
165+
166+
.services {
167+
a {
168+
text-decoration: none;
169+
170+
&:hover {
171+
.card-title {
172+
color: var(--global-theme-color);
173+
}
174+
}
175+
}
176+
177+
.card {
178+
img {
179+
width: 100%;
180+
}
181+
}
182+
183+
.col {
184+
padding-bottom: 1rem;
185+
}
186+
187+
.grid-sizer,
188+
.grid-item {
189+
width: 250px;
190+
margin-bottom: 10px;
191+
}
192+
193+
h2.category {
194+
color: var(--global-divider-color);
195+
border-bottom: 1px solid var(--global-divider-color);
196+
padding-top: 0.5rem;
197+
margin-top: 2rem;
198+
margin-bottom: 1rem;
199+
text-align: right;
200+
}
201+
}
202+
164203
// Travels
165204

166205
.travels {

‎_services/service_1.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
---
2+
layout: page
3+
title: service 1
4+
description: with background image
5+
img: assets/img/12.jpg
6+
importance: 1
7+
category: teaching
8+
related_publications: true
9+
---
10+
11+
Every project has a beautiful feature showcase page.
12+
It's easy to include images in a flexible 3-column grid format.
13+
Make your photos 1/3, 2/3, or full width.
14+
15+
To give your project a background in the portfolio page, just add the img tag to the front matter like so:
16+
17+
---
18+
layout: page
19+
title: project
20+
description: a project with a background image
21+
img: /assets/img/12.jpg
22+
---
23+
24+
<div class="row">
25+
<div class="col-sm mt-3 mt-md-0">
26+
{% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
27+
</div>
28+
<div class="col-sm mt-3 mt-md-0">
29+
{% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
30+
</div>
31+
<div class="col-sm mt-3 mt-md-0">
32+
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
33+
</div>
34+
</div>
35+
<div class="caption">
36+
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.
37+
</div>
38+
<div class="row">
39+
<div class="col-sm mt-3 mt-md-0">
40+
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
41+
</div>
42+
</div>
43+
<div class="caption">
44+
This image can also have a caption. It's like magic.
45+
</div>
46+
47+
You can also put regular text between your rows of images, even citations {% cite einstein1950meaning %}.
48+
Say you wanted to write a bit about your project before you posted the rest of the images.
49+
You describe how you toiled, sweated, _bled_ for your project, and then... you reveal its glory in the next row of images.
50+
51+
<div class="row justify-content-sm-center">
52+
<div class="col-sm-8 mt-3 mt-md-0">
53+
{% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
54+
</div>
55+
<div class="col-sm-4 mt-3 mt-md-0">
56+
{% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
57+
</div>
58+
</div>
59+
<div class="caption">
60+
You can also have artistically styled 2/3 + 1/3 images, like these.
61+
</div>
62+
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/">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:
67+
68+
{% raw %}
69+
70+
```html
71+
<div class="row justify-content-sm-center">
72+
<div class="col-sm-8 mt-3 mt-md-0">
73+
{% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
74+
</div>
75+
<div class="col-sm-4 mt-3 mt-md-0">
76+
{% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
77+
</div>
78+
</div>
79+
```
80+
81+
{% endraw %}

‎_services/service_2.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
---
2+
layout: page
3+
title: service 2
4+
description: a project with a background image and giscus comments
5+
img: assets/img/3.jpg
6+
importance: 2
7+
category: professional
8+
giscus_comments: true
9+
---
10+
11+
Every project has a beautiful feature showcase page.
12+
It's easy to include images in a flexible 3-column grid format.
13+
Make your photos 1/3, 2/3, or full width.
14+
15+
To give your project a background in the portfolio page, just add the img tag to the front matter like so:
16+
17+
---
18+
layout: page
19+
title: project
20+
description: a project with a background image
21+
img: /assets/img/12.jpg
22+
---
23+
24+
<div class="row">
25+
<div class="col-sm mt-3 mt-md-0">
26+
{% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
27+
</div>
28+
<div class="col-sm mt-3 mt-md-0">
29+
{% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
30+
</div>
31+
<div class="col-sm mt-3 mt-md-0">
32+
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
33+
</div>
34+
</div>
35+
<div class="caption">
36+
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.
37+
</div>
38+
<div class="row">
39+
<div class="col-sm mt-3 mt-md-0">
40+
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
41+
</div>
42+
</div>
43+
<div class="caption">
44+
This image can also have a caption. It's like magic.
45+
</div>
46+
47+
You can also put regular text between your rows of images.
48+
Say you wanted to write a little bit about your project before you posted the rest of the images.
49+
You describe how you toiled, sweated, _bled_ for your project, and then... you reveal its glory in the next row of images.
50+
51+
<div class="row justify-content-sm-center">
52+
<div class="col-sm-8 mt-3 mt-md-0">
53+
{% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
54+
</div>
55+
<div class="col-sm-4 mt-3 mt-md-0">
56+
{% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
57+
</div>
58+
</div>
59+
<div class="caption">
60+
You can also have artistically styled 2/3 + 1/3 images, like these.
61+
</div>
62+
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/">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:
67+
68+
{% raw %}
69+
70+
```html
71+
<div class="row justify-content-sm-center">
72+
<div class="col-sm-8 mt-3 mt-md-0">
73+
{% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
74+
</div>
75+
<div class="col-sm-4 mt-3 mt-md-0">
76+
{% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
77+
</div>
78+
</div>
79+
```
80+
81+
{% endraw %}

0 commit comments

Comments
 (0)