Skip to content

Commit 4eca037

Browse files
SebastienDegodezSebastienDegodez
committed
feat: add ongoing project display with updated styling and sorting logic
1 parent 242a442 commit 4eca037

3 files changed

Lines changed: 71 additions & 80 deletions

File tree

‎_data/brag.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
{
44
"title": "Global Maintainer @ Microcks (CNCF Incubating)",
55
"logo": "https://microcks.io/images/logo/microcks-logo-blue_hu_3d5c4ab173b0c06a.webp",
6-
"sort_key": 99990301,
6+
"sort_key": 20260301,
77
"impact": {
88
"icon": "fa-solid fa-crown",
99
"text": "Impact Principal : Gouvernance globale d'un projet CNCF Incubating",
@@ -77,7 +77,9 @@
7777
{
7878
"title": "GitHub Copilot Scale-out @ AXA France",
7979
"logo": "https://upload.wikimedia.org/wikipedia/commons/9/94/AXA_Logo.svg",
80-
"sort_key": 99991220,
80+
"sort_key": 20241220,
81+
"ongoing": true,
82+
"started": "Décembre 2024",
8183
"impact": {
8284
"icon": "fa-solid fa-robot",
8385
"text": "Impact Staff : Activation DevEx & IA pour 700 développeurs",

‎_includes/brag-project-card.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<div class="project-card{% if include.project.ongoing %} project-card--ongoing{% endif %}" data-impact-type="{{ include.project.impact.type | default: 'other' }}">
2+
<div class="project-card__main">
3+
<div class="project-card__header-flex">
4+
<h3>{{ include.project.title }}{% if include.project.ongoing %} <span class="badge-ongoing"><i class="fa-solid fa-circle-play"></i> En cours</span>{% endif %}</h3>
5+
{% if include.project.logo %}
6+
<img src="{{ include.project.logo }}" alt="{{ include.project.title }} logo" class="project-card__logo" style="height: 32px; width: auto; object-fit: contain; margin-left: 1rem; border-radius: 4px;" />
7+
{% endif %}
8+
</div>
9+
<div class="project-card__impact"><i class="{{ include.project.impact.icon }}" aria-hidden="true"></i> {{ include.project.impact.text }}</div>
10+
{% for paragraph in include.project.paragraphs %}
11+
<p>{{ paragraph }}</p>
12+
{% endfor %}
13+
<div class="project-card__tags">
14+
{% for tag in include.project.tags %}
15+
<span class="{{ tag.class | default: 'tag' }}">{{ tag.label }}</span>
16+
{% endfor %}
17+
</div>
18+
</div>
19+
<div class="project-card__side">
20+
{% if include.project.ongoing and include.project.started %}
21+
<span class="project-card__date">Depuis {{ include.project.started }}</span>
22+
{% elsif include.project.date_lines %}
23+
{% for line in include.project.date_lines %}
24+
<span class="project-card__date">{{ line }}</span>
25+
{% endfor %}
26+
{% elsif include.project.date %}
27+
<span class="project-card__date">{{ include.project.date }}</span>
28+
{% endif %}
29+
{% for link in include.project.links %}
30+
<a class="project-card__link" href="{{ link.url }}" target="_blank" rel="noopener"><i class="{{ link.icon }}" aria-hidden="true"></i> {{ link.label }}</a>
31+
{% endfor %}
32+
</div>
33+
</div>

‎brag.md‎

Lines changed: 34 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,32 @@ title: Brag Document
114114
border-left: 5px solid var(--color-primary);
115115
text-shadow: 0 2px 10px rgba(36, 181, 255, 0.2);
116116
}
117+
/* ── Ongoing / En cours ──────────────────────────── */
118+
.project-card--ongoing {
119+
border: 1px solid rgba(76, 175, 80, 0.4);
120+
box-shadow: 0 0 20px rgba(76, 175, 80, 0.12), inset 0 0 30px rgba(76, 175, 80, 0.04);
121+
}
122+
.badge-ongoing {
123+
display: inline-flex;
124+
align-items: center;
125+
gap: 0.35rem;
126+
font-size: 0.7rem;
127+
font-weight: 700;
128+
text-transform: uppercase;
129+
letter-spacing: 0.6px;
130+
color: #81c784;
131+
background: rgba(76, 175, 80, 0.15);
132+
border: 1px solid rgba(76, 175, 80, 0.35);
133+
border-radius: 20px;
134+
padding: 0.15rem 0.65rem;
135+
vertical-align: middle;
136+
margin-left: 0.5rem;
137+
animation: ongoing-pulse 2.5s ease-in-out infinite;
138+
}
139+
@keyframes ongoing-pulse {
140+
0%, 100% { opacity: 1; }
141+
50% { opacity: 0.6; }
142+
}
117143
</style>
118144
<header class="page-header">
119145
<div class="page-header__bg" role="presentation" aria-hidden="true"></div>
@@ -170,51 +196,14 @@ title: Brag Document
170196
</div>
171197
<div class="project-list">
172198
{% assign projects_sorted = site.data.brag.projects | sort: "sort_key" | reverse %}
173-
{% assign system_current_year = "now" | date: "%Y" | plus: 0 %}
174199
{% assign current_year = '' %}
175200
{% for project in projects_sorted %}
176201
{% assign project_year = project.sort_key | divided_by: 10000 %}
177-
{% if project_year == 9999 %}
178-
{% assign display_year = system_current_year %}
179-
{% else %}
180-
{% assign display_year = project_year %}
181-
{% endif %}
182-
183-
{% if display_year != current_year %}
184-
<h3 class="year-separator">{{ display_year }}</h3>
185-
{% assign current_year = display_year %}
186-
{% endif %}
187-
<div class="project-card" data-impact-type="{{ project.impact.type | default: 'other' }}">
188-
<div class="project-card__main">
189-
<div class="project-card__header-flex">
190-
<h3>{{ project.title }}</h3>
191-
{% if project.logo %}
192-
<img src="{{ project.logo }}" alt="{{ project.title }} logo" class="project-card__logo" style="height: 32px; width: auto; object-fit: contain; margin-left: 1rem; border-radius: 4px;" />
193-
{% endif %}
194-
</div>
195-
<div class="project-card__impact"><i class="{{ project.impact.icon }}" aria-hidden="true"></i> {{ project.impact.text }}</div>
196-
{% for paragraph in project.paragraphs %}
197-
<p>{{ paragraph }}</p>
198-
{% endfor %}
199-
<div class="project-card__tags">
200-
{% for tag in project.tags %}
201-
<span class="{{ tag.class | default: 'tag' }}">{{ tag.label }}</span>
202-
{% endfor %}
203-
</div>
204-
</div>
205-
<div class="project-card__side">
206-
{% if project.date_lines %}
207-
{% for line in project.date_lines %}
208-
<span class="project-card__date">{{ line }}</span>
209-
{% endfor %}
210-
{% elsif project.date %}
211-
<span class="project-card__date">{{ project.date }}</span>
202+
{% if project_year != current_year %}
203+
<h3 class="year-separator">{{ project_year }}</h3>
204+
{% assign current_year = project_year %}
212205
{% endif %}
213-
{% for link in project.links %}
214-
<a class="project-card__link" href="{{ link.url }}" target="_blank" rel="noopener"><i class="{{ link.icon }}" aria-hidden="true"></i> {{ link.label }}</a>
215-
{% endfor %}
216-
</div>
217-
</div>
206+
{% include brag-project-card.html project=project %}
218207
{% endfor %}
219208

220209
</div>
@@ -232,47 +221,14 @@ title: Brag Document
232221
</div>
233222
<div class="project-list">
234223
{% assign opensource_sorted = site.data.brag.opensource | sort: "sort_key" | reverse %}
235-
{% assign system_current_year = "now" | date: "%Y" | plus: 0 %}
236224
{% assign current_year = '' %}
237225
{% for item in opensource_sorted %}
238226
{% assign item_year = item.sort_key | divided_by: 10000 %}
239-
{% if item_year == 9999 %}
240-
{% assign display_year = system_current_year %}
241-
{% else %}
242-
{% assign display_year = item_year %}
243-
{% endif %}
244-
245-
{% if display_year != current_year %}
246-
<h3 class="year-separator">{{ display_year }}</h3>
247-
{% assign current_year = display_year %}
248-
{% endif %}
249-
<div class="project-card" data-impact-type="{{ item.impact.type | default: 'other' }}">
250-
<div class="project-card__main">
251-
<div class="project-card__header-flex">
252-
<h3>{{ item.title }}</h3>
253-
{% if item.logo %}
254-
<img src="{{ item.logo }}" alt="{{ item.title }} logo" class="project-card__logo" style="height: 32px; width: auto; object-fit: contain; margin-left: 1rem; border-radius: 4px;" />
255-
{% endif %}
256-
</div>
257-
<div class="project-card__impact"><i class="{{ item.impact.icon }}" aria-hidden="true"></i> {{ item.impact.text }}</div>
258-
{% for paragraph in item.paragraphs %}
259-
<p>{{ paragraph }}</p>
260-
{% endfor %}
261-
<div class="project-card__tags">
262-
{% for tag in item.tags %}
263-
<span class="{{ tag.class | default: 'tag' }}">{{ tag.label }}</span>
264-
{% endfor %}
265-
</div>
266-
</div>
267-
<div class="project-card__side">
268-
{% if item.date %}
269-
<span class="project-card__date">{{ item.date }}</span>
227+
{% if item_year != current_year %}
228+
<h3 class="year-separator">{{ item_year }}</h3>
229+
{% assign current_year = item_year %}
270230
{% endif %}
271-
{% for link in item.links %}
272-
<a class="project-card__link" href="{{ link.url }}" target="_blank" rel="noopener"><i class="{{ link.icon }}" aria-hidden="true"></i> {{ link.label }}</a>
273-
{% endfor %}
274-
</div>
275-
</div>
231+
{% include brag-project-card.html project=item %}
276232
{% endfor %}
277233

278234
</div>

0 commit comments

Comments
 (0)