Skip to content

Commit 546acb8

Browse files
ronaldtseronaldtse
committed
feat: comprehensive frontend design improvements
- Show code card on mobile (was hidden) - Fix blog post detail page hero styling - Remove duplicate Blog link from footer - Fix language cards grid: 5 cols only on xl - Consistent supporter logos (white bg, no dark:invert) - Fix CTA section dark mode contrast - Mobile nav drawer opens from left - Update Ronald Tse bio (Annotated EXPRESS, SUMA framework) - Add breadcrumbs to all pages (about, membership, privacy, tos, supporters, leadership, standards, learn, blog, languages)
1 parent 76cb1b8 commit 546acb8

15 files changed

Lines changed: 92 additions & 46 deletions

File tree

‎content/people/ronald-tse.adoc‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@ categories: founders
77

88
== Secretary, EXPRESS Language Foundation
99

10-
Ronald Tse is a founding member and Secretary of the EXPRESS Language Foundation,
11-
managing organizational operations and administrative functions.
10+
Ronald Tse is a founding member and Secretary of the EXPRESS Language Foundation.
11+
He is the Founder and CEO of Ribose.
1212

1313
== Contributions
1414

15-
Tse has been actively involved in open source and open standards communities,
16-
bringing experience in governance, community building, and technical standards
17-
development to the foundation.
15+
* Project Leader for Annotated EXPRESS
16+
* Designer of the SUMA framework (STEP Unified Model Architecture), used to publish the ISO 10303 STEP Resource Library and Application Protocols
17+
* Convener of ISO/TC 154/WG 5, expert in ISO/TC 184/SC 4/WG 13 and multiple other ISO committees
1818

1919
== At ELF
2020

‎src/components/layout/TheFooter.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ import { siteData } from '@/data/site'
5959
<li><RouterLink to="/leadership" class="text-gray-600 dark:text-gray-400 hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Leadership</RouterLink></li>
6060
<li><RouterLink to="/supporters" class="text-gray-600 dark:text-gray-400 hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Supporters</RouterLink></li>
6161
<li><RouterLink to="/membership" class="text-gray-600 dark:text-gray-400 hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Membership</RouterLink></li>
62-
<li><RouterLink to="/blog" class="text-gray-600 dark:text-gray-400 hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Blog</RouterLink></li>
6362
<li><RouterLink to="/privacy" class="text-gray-600 dark:text-gray-400 hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Privacy</RouterLink></li>
6463
<li><RouterLink to="/tos" class="text-gray-600 dark:text-gray-400 hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Terms of Service</RouterLink></li>
6564
</ul>

‎src/components/layout/TheHeader.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -166,13 +166,13 @@ onMounted(() => {
166166
<div class="fixed inset-0 bg-black/20 dark:bg-black/40 backdrop-blur-sm" @click="closeMobile" />
167167
<Transition
168168
enter-active-class="transition duration-300"
169-
enter-from-class="translate-x-full"
169+
enter-from-class="-translate-x-full"
170170
enter-to-class="translate-x-0"
171171
leave-active-class="transition duration-200"
172172
leave-from-class="translate-x-0"
173-
leave-to-class="translate-x-full"
173+
leave-to-class="-translate-x-full"
174174
>
175-
<div id="mobile-nav" class="fixed top-0 right-0 bottom-0 w-80 max-w-[85vw] bg-white dark:bg-navy shadow-2xl">
175+
<div id="mobile-nav" class="fixed top-0 left-0 bottom-0 w-80 max-w-[85vw] bg-white dark:bg-navy shadow-2xl">
176176
<div class="flex items-center justify-between p-6 border-b border-gray-100 dark:border-gray-800">
177177
<span class="font-serif font-bold text-gray-900 dark:text-white">Navigation</span>
178178
<button @click="closeMobile" class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 rounded-md min-h-[44px] min-w-[44px] flex items-center justify-center" aria-label="Close menu">

‎src/pages/about.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ const content: ContentData | null = await useContent('pages', 'about')
99
<div>
1010
<div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-8">
1111
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
12+
<nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
13+
<RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
14+
<span>/</span>
15+
<span class="text-gray-700 dark:text-gray-300">{{ content?.title || 'About' }}</span>
16+
</nav>
1217
<p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">About</p>
1318
<h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white">{{ content?.title || 'About' }}</h1>
1419
</div>

‎src/pages/blog/[slug].vue‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,32 +13,35 @@ function formatDate(date: string) {
1313
</script>
1414

1515
<template>
16-
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
16+
<div>
1717
<template v-if="content">
18-
<!-- Breadcrumb -->
19-
<nav class="text-sm text-gray-400 dark:text-gray-500 mb-8">
20-
<RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
21-
<span class="mx-2 text-gray-300 dark:text-gray-600">/</span>
22-
<RouterLink to="/blog" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Blog</RouterLink>
23-
<span class="mx-2 text-gray-300 dark:text-gray-600">/</span>
24-
<span class="text-gray-600 dark:text-gray-300">{{ content.title }}</span>
25-
</nav>
18+
<!-- Hero -->
19+
<div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-8">
20+
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
21+
<nav class="text-sm text-gray-400 dark:text-gray-500 mb-8">
22+
<RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
23+
<span class="mx-2 text-gray-300 dark:text-gray-600">/</span>
24+
<RouterLink to="/blog" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Blog</RouterLink>
25+
<span class="mx-2 text-gray-300 dark:text-gray-600">/</span>
26+
<span class="text-gray-600 dark:text-gray-300">{{ content.title }}</span>
27+
</nav>
2628

27-
<!-- Meta -->
28-
<div class="mb-8">
29-
<div class="flex flex-wrap items-center gap-2 mb-4">
30-
<span v-if="content.date" class="font-mono text-xs text-gray-400 dark:text-gray-500">{{ formatDate(content.date) }}</span>
31-
<span v-for="cat in content.categories" :key="cat" class="text-[0.65rem] px-2 py-0.5 rounded-full bg-elf-blue/8 dark:bg-elf-blue/8 text-elf-blue dark:text-elf-blue font-medium tracking-wide">
32-
{{ cat }}
33-
</span>
34-
</div>
35-
<h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white leading-tight">{{ content.title }}</h1>
36-
<div v-if="content.authors?.length" class="mt-4 flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
37-
By {{ content.authors.map((a) => a.name).join(', ') }}
29+
<div class="flex flex-wrap items-center gap-2 mb-4">
30+
<span v-if="content.date" class="font-mono text-xs text-gray-400 dark:text-gray-500">{{ formatDate(content.date) }}</span>
31+
<span v-for="cat in content.categories" :key="cat" class="text-[0.65rem] px-2 py-0.5 rounded-full bg-elf-blue/8 dark:bg-elf-blue/8 text-elf-blue dark:text-elf-blue font-medium tracking-wide">
32+
{{ cat }}
33+
</span>
34+
</div>
35+
<h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white leading-tight">{{ content.title }}</h1>
36+
<div v-if="content.authors?.length" class="mt-4 flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
37+
By {{ content.authors.map((a) => a.name).join(', ') }}
38+
</div>
3839
</div>
3940
</div>
4041

41-
<AsciiDocContent :html="content.body" />
42+
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
43+
<AsciiDocContent :html="content.body" />
44+
</div>
4245
</template>
4346
<div v-else class="text-center py-20">
4447
<p class="text-2xl font-serif font-bold text-gray-900 dark:text-white">Post not found</p>

‎src/pages/blog/index.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ function formatDate(date: string) {
1515
<!-- Hero -->
1616
<div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-12">
1717
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
18+
<nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
19+
<RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
20+
<span>/</span>
21+
<span class="text-gray-700 dark:text-gray-300">Blog</span>
22+
</nav>
1823
<p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">News</p>
1924
<h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white">Blog</h1>
2025
<p class="mt-3 text-gray-500 dark:text-gray-400">News and updates from the EXPRESS Language Foundation</p>

‎src/pages/index.vue‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ const milestones = [
197197
</div>
198198

199199
<!-- EXPRESS code card with typewriter -->
200-
<div class="hidden lg:flex items-start justify-center w-[420px] shrink-0 mt-10">
200+
<div class="flex items-start justify-center w-full lg:w-[420px] shrink-0 mt-8 lg:mt-10">
201201
<div class="w-full rounded-2xl border border-gray-200/60 dark:border-gray-700/40 bg-white dark:bg-navy-light shadow-2xl shadow-elf-blue/5 dark:shadow-black/20 overflow-hidden">
202202
<div class="flex items-center gap-2 px-4 py-2.5 border-b border-gray-100 dark:border-gray-700/40 bg-gray-50/80 dark:bg-navy">
203203
<span class="w-2.5 h-2.5 rounded-full bg-red-400/70" />
@@ -229,7 +229,7 @@ const milestones = [
229229
</div>
230230
</AnimatedSection>
231231

232-
<div class="grid sm:grid-cols-2 lg:grid-cols-5 gap-5">
232+
<div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-5">
233233
<AnimatedSection v-for="(lang, i) in languages" :key="lang.name" :style="{ transitionDelay: `${i * 60}ms` }">
234234
<RouterLink :to="`/languages/${lang.slug}`" class="block rounded-xl border bg-white dark:bg-navy-light p-6 transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5" :style="{ borderColor: `${lang.color}33` }">
235235
<img :src="lang.icon" :alt="lang.name" class="h-8 w-auto mb-3" />
@@ -291,16 +291,10 @@ const milestones = [
291291
</div>
292292
</AnimatedSection>
293293
<AnimatedSection>
294-
<div class="flex flex-wrap gap-8 items-center justify-center">
295-
<img src="/images/supporters/supporter-boeing.svg" alt="Boeing" class="h-12 w-auto opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300 dark:invert dark:opacity-50 dark:hover:opacity-90" />
296-
<img src="/images/supporters/supporter-md.svg" alt="McDonnell Douglas" class="h-12 w-auto opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300 dark:invert dark:opacity-50 dark:hover:opacity-90" />
297-
<img src="/images/supporters/supporter-ge.svg" alt="General Electric" class="h-12 w-auto opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300 dark:invert dark:opacity-50 dark:hover:opacity-90" />
298-
<img src="/images/supporters/supporter-nist.svg" alt="NIST" class="h-12 w-auto opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300 dark:invert dark:opacity-50 dark:hover:opacity-90" />
299-
<img src="/images/supporters/supporter-pdes.png" alt="PDES Inc." class="h-12 w-auto opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300 dark:invert dark:opacity-50 dark:hover:opacity-90" />
300-
<img src="/images/supporters/supporter-steptools.svg" alt="STEP Tools" class="h-12 w-auto opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300 dark:invert dark:opacity-50 dark:hover:opacity-90" />
301-
<img src="/images/supporters/supporter-jotneconnect.svg" alt="Jotne EPM Technology" class="h-12 w-auto opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300 dark:invert dark:opacity-50 dark:hover:opacity-90" />
302-
<img src="/images/supporters/supporter-afnet.svg" alt="AFNeT Services" class="h-12 w-auto opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300 dark:invert dark:opacity-50 dark:hover:opacity-90" />
303-
<img src="/images/supporters/supporter-ribose.svg" alt="Ribose" class="h-12 w-auto opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300 dark:invert dark:opacity-50 dark:hover:opacity-90" />
294+
<div class="flex flex-wrap gap-6 items-center justify-center">
295+
<div v-for="logo in ['supporter-boeing.svg','supporter-md.svg','supporter-ge.svg','supporter-nist.svg','supporter-pdes.png','supporter-steptools.svg','supporter-jotneconnect.svg','supporter-afnet.svg','supporter-ribose.svg']" :key="logo" class="h-14 flex items-center rounded-lg bg-white p-2">
296+
<img :src="`/images/supporters/${logo}`" :alt="logo.replace('supporter-','').replace(/\.\w+$/,'')" class="max-h-10 w-auto mx-auto object-contain" />
297+
</div>
304298
</div>
305299
<p class="text-center mt-8">
306300
<RouterLink to="/supporters" class="text-sm font-medium text-elf-blue dark:text-elf-blue hover:underline">
@@ -399,9 +393,9 @@ const milestones = [
399393
</section>
400394

401395
<!-- About / CTA -->
402-
<section class="relative overflow-hidden py-24 bg-elf-blue dark:bg-navy-light">
396+
<section class="relative overflow-hidden py-24 bg-elf-blue dark:bg-elf-blue-dark">
403397
<div class="absolute inset-0 pointer-events-none opacity-10">
404-
<svg viewBox="0 0 200 200" fill="none" class="absolute -right-20 top-0 w-96 h-96 text-white dark:text-elf-blue">
398+
<svg viewBox="0 0 200 200" fill="none" class="absolute -right-20 top-0 w-96 h-96 text-white dark:text-white">
405399
<path d="M40 40L100 100L40 160" stroke="currentColor" stroke-width="8" fill="none" stroke-linecap="round"/>
406400
<path d="M160 40L100 100L160 160" stroke="currentColor" stroke-width="8" fill="none" stroke-linecap="round"/>
407401
</svg>

‎src/pages/languages/index.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,11 @@ const languages = [
6565
<!-- Hero section -->
6666
<div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-16">
6767
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
68+
<nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
69+
<RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
70+
<span>/</span>
71+
<span class="text-gray-700 dark:text-gray-300">Languages</span>
72+
</nav>
6873
<p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">Language Family</p>
6974
<h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white leading-tight">The EXPRESS Language Family</h1>
7075
<p class="mt-4 text-lg text-gray-500 dark:text-gray-400 max-w-2xl">

‎src/pages/leadership/index.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const officers: Person[] = [
2929
name: 'Ronald Tse',
3030
slug: 'ronald-tse',
3131
role: 'Secretary',
32-
desc: 'Manages organizational operations and administrative functions of the foundation.',
32+
desc: 'Project Leader for Annotated EXPRESS and designer of the SUMA framework (STEP Unified Model Architecture) used to publish the ISO 10303 STEP Resource Library and Application Protocols. Founder and CEO of Ribose.',
3333
photo: '/images/people/ronald-tse.jpg',
3434
},
3535
]
@@ -114,7 +114,7 @@ const founders: Person[] = [
114114
name: 'Ronald Tse',
115115
slug: 'ronald-tse',
116116
role: 'Secretary',
117-
desc: 'Manages organizational operations and administrative functions of the foundation.',
117+
desc: 'Project Leader for Annotated EXPRESS and designer of the SUMA framework (STEP Unified Model Architecture) used to publish the ISO 10303 STEP Resource Library and Application Protocols. Founder and CEO of Ribose.',
118118
photo: '/images/people/ronald-tse.jpg',
119119
},
120120
]
@@ -125,6 +125,11 @@ const founders: Person[] = [
125125
<!-- Hero -->
126126
<div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-16">
127127
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
128+
<nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
129+
<RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
130+
<span>/</span>
131+
<span class="text-gray-700 dark:text-gray-300">Leadership</span>
132+
</nav>
128133
<p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">Organization</p>
129134
<h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white">Leadership &amp; Founders</h1>
130135
<p class="mt-4 text-gray-500 dark:text-gray-400 max-w-2xl leading-relaxed">

‎src/pages/learn/index.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ import BaseCard from '@/components/ui/BaseCard.vue'
99
<!-- Hero -->
1010
<div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-16">
1111
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
12+
<nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
13+
<RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
14+
<span>/</span>
15+
<span class="text-gray-700 dark:text-gray-300">Learn</span>
16+
</nav>
1217
<p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">Learning</p>
1318
<h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white">Learn EXPRESS</h1>
1419
<p class="mt-4 text-gray-500 dark:text-gray-400 max-w-xl leading-relaxed">

0 commit comments

Comments
 (0)