feat: comprehensive frontend design improvements

content/people/ronald-tse.adoc

@@ -7,14 +7,14 @@ categories: founders
 
 == Secretary, EXPRESS Language Foundation
 
-Ronald Tse is a founding member and Secretary of the EXPRESS Language Foundation,
-managing organizational operations and administrative functions.
+Ronald Tse is a founding member and Secretary of the EXPRESS Language Foundation.
+He is the Founder and CEO of Ribose.
 
 == Contributions
 
-Tse has been actively involved in open source and open standards communities,
-bringing experience in governance, community building, and technical standards
-development to the foundation.
+* Project Leader for Annotated EXPRESS
+* Designer of the SUMA framework (STEP Unified Model Architecture), used to publish the ISO 10303 STEP Resource Library and Application Protocols
+* Convener of ISO/TC 154/WG 5, expert in ISO/TC 184/SC 4/WG 13 and multiple other ISO committees
 
 == At ELF
 

src/components/layout/TheFooter.vue

@@ -59,7 +59,6 @@ import { siteData } from '@/data/site'
             <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>
             <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>
             <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>
-            <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>
             <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>
             <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>
           </ul>

src/components/layout/TheHeader.vue

@@ -166,13 +166,13 @@ onMounted(() => {
           <div class="fixed inset-0 bg-black/20 dark:bg-black/40 backdrop-blur-sm" @click="closeMobile" />
           <Transition
             enter-active-class="transition duration-300"
-            enter-from-class="translate-x-full"
+            enter-from-class="-translate-x-full"
             enter-to-class="translate-x-0"
             leave-active-class="transition duration-200"
             leave-from-class="translate-x-0"
-            leave-to-class="translate-x-full"
+            leave-to-class="-translate-x-full"
           >
-            <div id="mobile-nav" class="fixed top-0 right-0 bottom-0 w-80 max-w-[85vw] bg-white dark:bg-navy shadow-2xl">
+            <div id="mobile-nav" class="fixed top-0 left-0 bottom-0 w-80 max-w-[85vw] bg-white dark:bg-navy shadow-2xl">
               <div class="flex items-center justify-between p-6 border-b border-gray-100 dark:border-gray-800">
                 <span class="font-serif font-bold text-gray-900 dark:text-white">Navigation</span>
                 <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

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

src/pages/blog/[slug].vue

@@ -13,32 +13,35 @@ function formatDate(date: string) {
 </script>
 
 <template>
-  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+  <div>
     <template v-if="content">
-      <!-- Breadcrumb -->
-      <nav class="text-sm text-gray-400 dark:text-gray-500 mb-8">
-        <RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
-        <span class="mx-2 text-gray-300 dark:text-gray-600">/</span>
-        <RouterLink to="/blog" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Blog</RouterLink>
-        <span class="mx-2 text-gray-300 dark:text-gray-600">/</span>
-        <span class="text-gray-600 dark:text-gray-300">{{ content.title }}</span>
-      </nav>
+      <!-- Hero -->
+      <div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-8">
+        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+          <nav class="text-sm text-gray-400 dark:text-gray-500 mb-8">
+            <RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
+            <span class="mx-2 text-gray-300 dark:text-gray-600">/</span>
+            <RouterLink to="/blog" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Blog</RouterLink>
+            <span class="mx-2 text-gray-300 dark:text-gray-600">/</span>
+            <span class="text-gray-600 dark:text-gray-300">{{ content.title }}</span>
+          </nav>
 
-      <!-- Meta -->
-      <div class="mb-8">
-        <div class="flex flex-wrap items-center gap-2 mb-4">
-          <span v-if="content.date" class="font-mono text-xs text-gray-400 dark:text-gray-500">{{ formatDate(content.date) }}</span>
-          <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">
-            {{ cat }}
-          </span>
-        </div>
-        <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white leading-tight">{{ content.title }}</h1>
-        <div v-if="content.authors?.length" class="mt-4 flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-          By {{ content.authors.map((a) => a.name).join(', ') }}
+          <div class="flex flex-wrap items-center gap-2 mb-4">
+            <span v-if="content.date" class="font-mono text-xs text-gray-400 dark:text-gray-500">{{ formatDate(content.date) }}</span>
+            <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">
+              {{ cat }}
+            </span>
+          </div>
+          <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white leading-tight">{{ content.title }}</h1>
+          <div v-if="content.authors?.length" class="mt-4 flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+            By {{ content.authors.map((a) => a.name).join(', ') }}
+          </div>
         </div>
       </div>
 
-      <AsciiDocContent :html="content.body" />
+      <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
+        <AsciiDocContent :html="content.body" />
+      </div>
     </template>
     <div v-else class="text-center py-20">
       <p class="text-2xl font-serif font-bold text-gray-900 dark:text-white">Post not found</p>

src/pages/blog/index.vue

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

src/pages/index.vue

@@ -197,7 +197,7 @@ const milestones = [
           </div>
 
           <!-- EXPRESS code card with typewriter -->
-          <div class="hidden lg:flex items-start justify-center w-[420px] shrink-0 mt-10">
+          <div class="flex items-start justify-center w-full lg:w-[420px] shrink-0 mt-8 lg:mt-10">
             <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">
               <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">
                 <span class="w-2.5 h-2.5 rounded-full bg-red-400/70" />
@@ -229,7 +229,7 @@ const milestones = [
           </div>
         </AnimatedSection>
 
-        <div class="grid sm:grid-cols-2 lg:grid-cols-5 gap-5">
+        <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-5">
           <AnimatedSection v-for="(lang, i) in languages" :key="lang.name" :style="{ transitionDelay: `${i * 60}ms` }">
             <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` }">
               <img :src="lang.icon" :alt="lang.name" class="h-8 w-auto mb-3" />
@@ -291,16 +291,10 @@ const milestones = [
           </div>
         </AnimatedSection>
         <AnimatedSection>
-          <div class="flex flex-wrap gap-8 items-center justify-center">
-            <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" />
-            <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" />
-            <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" />
-            <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" />
-            <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" />
-            <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" />
-            <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" />
-            <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" />
-            <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" />
+          <div class="flex flex-wrap gap-6 items-center justify-center">
+            <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">
+              <img :src="`/images/supporters/${logo}`" :alt="logo.replace('supporter-','').replace(/\.\w+$/,'')" class="max-h-10 w-auto mx-auto object-contain" />
+            </div>
           </div>
           <p class="text-center mt-8">
             <RouterLink to="/supporters" class="text-sm font-medium text-elf-blue dark:text-elf-blue hover:underline">
@@ -399,9 +393,9 @@ const milestones = [
     </section>
 
     <!-- About / CTA -->
-    <section class="relative overflow-hidden py-24 bg-elf-blue dark:bg-navy-light">
+    <section class="relative overflow-hidden py-24 bg-elf-blue dark:bg-elf-blue-dark">
       <div class="absolute inset-0 pointer-events-none opacity-10">
-        <svg viewBox="0 0 200 200" fill="none" class="absolute -right-20 top-0 w-96 h-96 text-white dark:text-elf-blue">
+        <svg viewBox="0 0 200 200" fill="none" class="absolute -right-20 top-0 w-96 h-96 text-white dark:text-white">
           <path d="M40 40L100 100L40 160" stroke="currentColor" stroke-width="8" fill="none" stroke-linecap="round"/>
           <path d="M160 40L100 100L160 160" stroke="currentColor" stroke-width="8" fill="none" stroke-linecap="round"/>
         </svg>

src/pages/languages/index.vue

@@ -65,6 +65,11 @@ const languages = [
     <!-- Hero section -->
     <div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-16">
       <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
+          <RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
+          <span>/</span>
+          <span class="text-gray-700 dark:text-gray-300">Languages</span>
+        </nav>
         <p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">Language Family</p>
         <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white leading-tight">The EXPRESS Language Family</h1>
         <p class="mt-4 text-lg text-gray-500 dark:text-gray-400 max-w-2xl">

src/pages/leadership/index.vue

@@ -29,7 +29,7 @@ const officers: Person[] = [
     name: 'Ronald Tse',
     slug: 'ronald-tse',
     role: 'Secretary',
-    desc: 'Manages organizational operations and administrative functions of the foundation.',
+    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.',
     photo: '/images/people/ronald-tse.jpg',
   },
 ]
@@ -114,7 +114,7 @@ const founders: Person[] = [
     name: 'Ronald Tse',
     slug: 'ronald-tse',
     role: 'Secretary',
-    desc: 'Manages organizational operations and administrative functions of the foundation.',
+    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.',
     photo: '/images/people/ronald-tse.jpg',
   },
 ]
@@ -125,6 +125,11 @@ const founders: Person[] = [
     <!-- Hero -->
     <div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-16">
       <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
+          <RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
+          <span>/</span>
+          <span class="text-gray-700 dark:text-gray-300">Leadership</span>
+        </nav>
         <p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">Organization</p>
         <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white">Leadership &amp; Founders</h1>
         <p class="mt-4 text-gray-500 dark:text-gray-400 max-w-2xl leading-relaxed">

src/pages/learn/index.vue

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

src/pages/membership.vue

@@ -9,6 +9,11 @@ const content: ContentData | null = await useContent('pages', 'membership')
   <div>
     <div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-8">
       <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+        <nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
+          <RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
+          <span>/</span>
+          <span class="text-gray-700 dark:text-gray-300">{{ content?.title || 'Membership' }}</span>
+        </nav>
         <p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">Join Us</p>
         <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white">{{ content?.title || 'Membership' }}</h1>
       </div>

src/pages/privacy.vue

@@ -9,6 +9,11 @@ const content: ContentData | null = await useContent('pages', 'privacy')
   <div>
     <div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-8">
       <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+        <nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
+          <RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
+          <span>/</span>
+          <span class="text-gray-700 dark:text-gray-300">{{ content?.title || 'Privacy Policy' }}</span>
+        </nav>
         <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white">{{ content?.title || 'Privacy Policy' }}</h1>
       </div>
     </div>

src/pages/standards/index.vue

@@ -33,6 +33,11 @@ const references = [
     <!-- Hero -->
     <div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-12">
       <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
+          <RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
+          <span>/</span>
+          <span class="text-gray-700 dark:text-gray-300">Standards &amp; References</span>
+        </nav>
         <p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">Specifications</p>
         <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white">Standards &amp; References</h1>
         <p class="mt-3 text-gray-500 dark:text-gray-400 max-w-xl">