Skip to content

Commit 06cfb1e

Browse files
aaronparkeraaronparker
committed
Add award & publication timeline UI
Convert awards data to structured start/end fields and replace the simple lists with timeline markup and styling. _data/awards.yml: replace the single `years` string with `start` and `end` fields per award. community_review.md: switch from inline Markdown lists to timeline HTML that renders awards with logo, category and start–end dates (single-year rendered as a single value) and groups publications by year using Liquid's group_by_exp. assets/css/main.css: add Tailwind utility-based component styles for award and publication timelines, including light/dark variants and timeline markers. These changes provide a structured date model and improved visual presentation for awards and publications.
1 parent 5af7464 commit 06cfb1e

3 files changed

Lines changed: 179 additions & 10 deletions

File tree

‎_data/awards.yml‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,44 @@
11
# Community awards and recognitions
2-
# Fields: name, category (optional), url (optional), logo, years
2+
# Fields: name, category (optional), url (optional), logo, start, end
33

44
- name: Microsoft Most Valuable Professional
55
category: Windows & Devices
66
url: https://mvp.microsoft.com/en-US/mvp/profile/1f9e30d8-1051-47f1-a03d-1f0371cda373
77
logo: /media/about/MicrosoftMVP.png
8-
years: "2025+"
8+
start: 2025
9+
end: "Present"
910

1011
- name: Citrix Technology Professional
1112
url: https://www.citrix.com/community/ctp/awardees.html
1213
logo: /media/about/ctp.png
13-
years: "2012-2021"
14+
start: 2012
15+
end: 2021
1416

1517
- name: Microsoft Most Valuable Professional
1618
category: "Windows & Devices (previously App-V)"
1719
url: https://mvp.microsoft.com/en-us/mvp/Aaron%20%20Parker-4030523
1820
logo: /media/about/MicrosoftMVP.png
19-
years: "2011-2018"
21+
start: 2011
22+
end: 2018
2023

2124
- name: VMware EUC Champion
2225
logo: /media/about/VMwareEUCChampion.png
23-
years: "2016"
26+
start: 2016
27+
end: 2016
2428

2529
- name: VMware vExpert
2630
url: http://blogs.vmware.com/vmtn/2016/02/vexpert-2016-award-announcement.html
2731
logo: /media/about/VMwarevExpert.jpg
28-
years: "2016"
32+
start: 2016
33+
end: 2016
2934

3035
- name: AppSense Community Advisor
3136
url: http://blog.appsense.com/2012/11/appsense-community-advisor-program/
3237
logo: /media/about/AppSenseCommunityAdvisor.png
33-
years: "2012-2016"
38+
start: 2012
39+
end: 2016
3440

3541
- name: Microsoft Community Contributor
3642
logo: /media/about/MicrosoftCommunityContributor.png
37-
years: "2011"
43+
start: 2011
44+
end: 2011

‎assets/css/main.css‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -979,6 +979,94 @@ html.accessible { --color-accent: #fde047; --color-accent-dark: #fde047; --col
979979
}
980980
}
981981

982+
/* =============================================================================
983+
About page — award timeline
984+
============================================================================= */
985+
986+
@layer components {
987+
988+
.award-timeline {
989+
@apply my-4 pl-6 space-y-3;
990+
border-left: 2px solid var(--color-accent);
991+
}
992+
993+
.award-entry {
994+
@apply relative;
995+
}
996+
997+
.award-entry::before {
998+
content: '';
999+
@apply absolute -left-[calc(1.5rem+5px)] top-1.5
1000+
w-2.5 h-2.5 rounded-full ring-2 ring-slate-900;
1001+
background-color: var(--color-accent);
1002+
}
1003+
1004+
.award-entry__header {
1005+
@apply flex items-start justify-between gap-4;
1006+
}
1007+
1008+
.award-entry__info {
1009+
@apply flex items-center gap-3;
1010+
}
1011+
1012+
.award-entry__logo {
1013+
@apply h-8 w-auto flex-shrink-0 object-contain my-0;
1014+
}
1015+
1016+
.award-entry__name {
1017+
@apply font-semibold text-slate-50 text-sm m-0;
1018+
}
1019+
1020+
.award-entry__category {
1021+
@apply text-sm text-slate-400 mt-0.5 m-0;
1022+
}
1023+
1024+
.award-entry__dates {
1025+
@apply text-xs font-semibold uppercase tracking-wider text-slate-500
1026+
whitespace-nowrap flex-shrink-0 mt-1;
1027+
}
1028+
}
1029+
1030+
@layer components {
1031+
1032+
.publication-timeline {
1033+
@apply my-6 pl-6 space-y-8;
1034+
border-left: 2px solid var(--color-accent);
1035+
}
1036+
1037+
.publication-year-group {
1038+
@apply relative;
1039+
}
1040+
1041+
.publication-year-group::before {
1042+
content: '';
1043+
@apply absolute -left-[calc(1.5rem+5px)] top-1.5
1044+
w-2.5 h-2.5 rounded-full ring-2 ring-slate-900;
1045+
background-color: var(--color-accent);
1046+
}
1047+
1048+
.publication-year-group__year {
1049+
@apply block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-3;
1050+
}
1051+
1052+
.publication-year-group__items {
1053+
@apply space-y-3;
1054+
}
1055+
1056+
.publication-entry__header {
1057+
@apply flex items-start justify-between gap-4 mb-0.5;
1058+
}
1059+
1060+
.publication-entry__title {
1061+
@apply font-semibold text-slate-50 text-sm m-0;
1062+
}
1063+
1064+
.publication-entry__date {
1065+
@apply text-xs font-semibold uppercase tracking-wider text-slate-500
1066+
whitespace-nowrap flex-shrink-0 mt-1;
1067+
}
1068+
}
1069+
9821070
/* =============================================================================
9831071
Keyframe animations
9841072
============================================================================= */
@@ -1697,6 +1785,50 @@ html:not(.dark) .author-bio__social a[data-social="github"]:hover { color: #2429
16971785
@apply text-gray-400;
16981786
}
16991787

1788+
/* --- Award timeline --- */
1789+
html:not(.dark) .award-timeline {
1790+
border-left-color: var(--color-accent-dark);
1791+
}
1792+
1793+
html:not(.dark) .award-entry::before {
1794+
@apply ring-white;
1795+
background-color: var(--color-accent-dark);
1796+
}
1797+
1798+
html:not(.dark) .award-entry__name {
1799+
@apply text-gray-900;
1800+
}
1801+
1802+
html:not(.dark) .award-entry__category {
1803+
@apply text-gray-500;
1804+
}
1805+
1806+
html:not(.dark) .award-entry__dates {
1807+
@apply text-gray-400;
1808+
}
1809+
1810+
/* --- Publication timeline --- */
1811+
html:not(.dark) .publication-timeline {
1812+
border-left-color: var(--color-accent-dark);
1813+
}
1814+
1815+
html:not(.dark) .publication-year-group::before {
1816+
@apply ring-white;
1817+
background-color: var(--color-accent-dark);
1818+
}
1819+
1820+
html:not(.dark) .publication-year-group__year {
1821+
@apply text-gray-400;
1822+
}
1823+
1824+
html:not(.dark) .publication-entry__title {
1825+
@apply text-gray-900;
1826+
}
1827+
1828+
html:not(.dark) .publication-entry__date {
1829+
@apply text-gray-400;
1830+
}
1831+
17001832
/* --- Search modal --- */
17011833
html:not(.dark) .search-modal {
17021834
@apply bg-white border-gray-200;

‎community_review.md‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,22 @@ Selected details of community related content. I have presented at events includ
1010

1111
I am very fortunate to have been awarded the following community recognitions:
1212

13-
{% for award in site.data.awards %}* <img src="{{ award.logo | prepend: site.baseurl }}" alt="{{ award.name }}" style="height:1.25rem;display:inline;vertical-align:middle;margin-right:0.4rem;"> {% if award.url %}[{{ award.name }}]({{ award.url }}){% else %}{{ award.name }}{% endif %}{% if award.category %} — {{ award.category }}{% endif %} ({{ award.years }})
13+
<div class="award-timeline">
14+
{% for award in site.data.awards %}
15+
<div class="award-entry">
16+
<div class="award-entry__header">
17+
<div class="award-entry__info">
18+
<img src="{{ award.logo | prepend: site.baseurl }}" alt="{{ award.name }}" class="award-entry__logo">
19+
<div>
20+
<p class="award-entry__name">{% if award.url %}<a href="{{ award.url }}">{{ award.name }}</a>{% else %}{{ award.name }}{% endif %}</p>
21+
{% if award.category %}<p class="award-entry__category">{{ award.category }}</p>{% endif %}
22+
</div>
23+
</div>
24+
<span class="award-entry__dates">{% if award.end == award.start %}{{ award.start }}{% else %}{{ award.start }}–{{ award.end }}{% endif %}</span>
25+
</div>
26+
</div>
1427
{% endfor %}
28+
</div>
1529

1630
## Speaking & Presentations
1731

@@ -43,5 +57,21 @@ Below is a selection of speaking engagements and presentations, with recordings
4357

4458
Below is a list of publications that I've written, co-authored or contributed to:
4559

46-
{% for pub in site.data.publications %}* {{ pub.date }}: {% if pub.url %}[{{ pub.title }}]({{ pub.url }}){% else %}{{ pub.title }}{% endif %}
60+
<div class="publication-timeline">
61+
{% assign grouped = site.data.publications | group_by_exp: "pub", "pub.date | split: ' ' | last" %}
62+
{% for group in grouped %}
63+
<div class="publication-year-group">
64+
<span class="publication-year-group__year">{{ group.name }}</span>
65+
<div class="publication-year-group__items">
66+
{% for pub in group.items %}
67+
<div class="publication-entry">
68+
<div class="publication-entry__header">
69+
<p class="publication-entry__title">{% if pub.url %}<a href="{{ pub.url }}">{{ pub.title }}</a>{% else %}{{ pub.title }}{% endif %}</p>
70+
<span class="publication-entry__date">{{ pub.date }}</span>
71+
</div>
72+
</div>
73+
{% endfor %}
74+
</div>
75+
</div>
4776
{% endfor %}
77+
</div>

0 commit comments

Comments
 (0)