-
Notifications
You must be signed in to change notification settings - Fork 0
/
projects.html
142 lines (134 loc) · 4.94 KB
/
projects.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
---
layout: default
title: Projects
og_desc: My personal software and academic projects.
og_image: s8a-thumbnail.png
---
<h1 class="text-center">{{ page.title }}</h1>
<section id="websites" class="py-3">
<h2>Websites</h2>
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 py-3 mb-3">
{%- assign websites = site.websites | sort: "last-update" | reverse -%}
{%- for website in websites -%}
<div class="col">
<div class="card h-100 shadow-sm">
{%- if website.image -%}
{% assign image_path = website.image | prepend: "/assets/img/" | append: "-hidpi.png" %}
<img
srcset="
{% thumbnail_img image_path 576 %} 576w,
{% thumbnail_img image_path 480 %} 480w,
{% thumbnail_img image_path 340 %} 340w,
{% thumbnail_img image_path 256 %} 256w,
{% thumbnail_img image_path 200 %} 200w
"
sizes="
(max-width: 200px) 200px,
(max-width: 256px) 256px,
(max-width: 340px) 340px,
(max-width: 480px) 480px,
(max-width: 768px) 576px,
(max-width: 1200px) 480px,
480px
"
src="{% thumbnail_img image_path 576 %}"
alt=""
class="card-img-top"
>
{%- endif -%}
<div class="card-body">
<h3 class="card-title fs-5">{{ website.name }}</h3>
<p class="card-subtitle mb-2 text-muted">Last update: {{ website.last-update | date: "%b %Y" }}</p>
<p class="card-text">{{ website.summary }}</p>
<a href="{{ website.website-url }}" class="card-link">{{ website.go-text }}</a>
<a href="{{ website.url }}" class="card-link">Details</a>
</div>
</div>
</div>
{%- endfor -%}
</div>
</section>
<section id="programs" class="py-3">
<h2>Desktop programs</h2>
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 py-3 mb-3">
{%- assign programs = site.programs | sort: "last-update" | reverse -%}
{%- for program in programs -%}
<div class="col">
<div class="card h-100 shadow-sm">
{%- if program.image -%}
{% assign image_path = program.image | prepend: "/assets/img/" %}
<img
srcset="
{% thumbnail_img image_path 576 %} 576w,
{% thumbnail_img image_path 480 %} 480w,
{% thumbnail_img image_path 340 %} 340w,
{% thumbnail_img image_path 256 %} 256w,
{% thumbnail_img image_path 200 %} 200w
"
sizes="
(max-width: 200px) 200px,
(max-width: 256px) 256px,
(max-width: 340px) 340px,
(max-width: 480px) 480px,
(max-width: 768px) 576px,
(max-width: 1200px) 480px,
480px
"
src="{% thumbnail_img image_path 576 %}"
alt=""
class="card-img-top"
>
{%- endif -%}
<div class="card-body">
<h3 class="card-title fs-5">{{ program.name }}</h3>
<p class="card-subtitle mb-2 text-muted">Last update: {{ program.last-update | date: "%b %Y" }}</p>
<p class="card-text">{{ program.summary }}</p>
<a href="{{ program.url }}" class="card-link">Details</a>
</div>
</div>
</div>
{%- endfor -%}
</div>
</section>
<section id="documents" class="py-3">
<h2>Documents</h2>
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 py-3 mb-3">
{%- assign documents = site.documents | sort: "date" | reverse -%}
{%- for document in documents -%}
<div class="col">
<div class="card h-100 shadow-sm">
{%- if document.image -%}
{% assign image_path = document.image | prepend: "/assets/img/" | append: "-hidpi.png" %}
<img
srcset="
{% thumbnail_img image_path 576 %} 576w,
{% thumbnail_img image_path 480 %} 480w,
{% thumbnail_img image_path 340 %} 340w,
{% thumbnail_img image_path 256 %} 256w,
{% thumbnail_img image_path 200 %} 200w
"
sizes="
(max-width: 200px) 200px,
(max-width: 256px) 256px,
(max-width: 340px) 340px,
(max-width: 480px) 480px,
(max-width: 768px) 576px,
(max-width: 1200px) 480px,
480px
"
src="{% thumbnail_img image_path 576 %}"
alt=""
class="card-img-top"
>
{%- endif -%}
<div class="card-body">
<h3 class="card-title fs-5">{{ document.name }}</h3>
<p class="card-subtitle mb-2 text-muted">{{ document.date | date_to_string }}</p>
<p class="card-text">{{ document.summary }}</p>
<a href="{{ document.url }}" class="card-link">{{ document.read-text }}</a>
</div>
</div>
</div>
{%- endfor -%}
</div>
</section>