feat: enhance site

Author: Kosthi

.claude/settings.json

@@ -0,0 +1,5 @@
+{
+  "enabledPlugins": {
+    "ui-ux-pro-max@ui-ux-pro-max-skill": true
+  }
+}

.github/workflows/static.yml .github/workflows/deploy.yml.github/workflows/static.yml renamed to .github/workflows/deploy.yml

@@ -1,25 +1,18 @@
-# Simple workflow for deploying static content to GitHub Pages
-name: Deploy static content to Pages
+name: Deploy to GitHub Pages
 
 on:
-  # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
-
-  # Allows you to run this workflow manually from the Actions tab
+    branches: [main]
   workflow_dispatch:
 
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
   contents: read
   pages: write
   id-token: write
 
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
-  group: "pages"
-  cancel-in-progress: false
+  group: pages
+  cancel-in-progress: true
 
 jobs:
   build:
@@ -40,20 +33,17 @@ jobs:
       - name: Build
         run: npm run build
 
-      - name: Setup Pages
-        uses: actions/configure-pages@v5
-
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
           path: dist
 
   deploy:
+    needs: build
+    runs-on: ubuntu-latest
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
     steps:
       - name: Deploy to GitHub Pages
         id: deployment

.gitignore

@@ -4,3 +4,4 @@
 .vscode
 node_modules
 dist
+github-actions-deploy*

index.html

@@ -4,12 +4,61 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>RushDB - 无限进步</title>
+    <meta name="description" content="RushDB 实验室 - 专注于数据库系统研究与开发的技术团队，致力于推动数据库技术的创新与发展。" />
+    <meta name="keywords" content="RushDB, 数据库, Database, 技术实验室, 开源项目, MiniOB" />
+    <meta name="author" content="RushDB Lab" />
+    <link rel="canonical" href="https://rushdb-lab.github.io/" />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://rushdb-lab.github.io/" />
+    <meta property="og:title" content="RushDB - 无限进步" />
+    <meta property="og:description" content="RushDB 实验室 - 专注于数据库系统研究与开发的技术团队，致力于推动数据库技术的创新与发展。" />
+    <meta property="og:image" content="https://rushdb-lab.github.io/RushDB.png" />
+    <meta property="og:locale" content="zh_CN" />
+    <meta property="og:locale:alternate" content="en_US" />
+    <meta property="og:locale:alternate" content="ja_JP" />
+    <meta property="og:site_name" content="RushDB Lab" />
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:url" content="https://rushdb-lab.github.io/" />
+    <meta name="twitter:title" content="RushDB - 无限进步" />
+    <meta name="twitter:description" content="RushDB 实验室 - 专注于数据库系统研究与开发的技术团队，致力于推动数据库技术的创新与发展。" />
+    <meta name="twitter:image" content="https://rushdb-lab.github.io/RushDB.png" />
+
+    <!-- Preconnect for performance -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
     <link rel="icon" type="image/png" href="/RushDB.png" />
     <link rel="shortcut icon" type="image/png" href="/RushDB.png" />
+    <link rel="apple-touch-icon" href="/RushDB.png" />
     <link
       href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
+
+    <!-- Structured Data (JSON-LD) -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "Organization",
+      "name": "RushDB Lab",
+      "alternateName": "RushDB 实验室",
+      "url": "https://rushdb-lab.github.io/",
+      "logo": "https://rushdb-lab.github.io/RushDB.png",
+      "description": "RushDB 实验室 - 专注于数据库系统研究与开发的技术团队，致力于推动数据库技术的创新与发展。",
+      "sameAs": [
+        "https://github.com/RushDB-Lab"
+      ],
+      "contactPoint": {
+        "@type": "ContactPoint",
+        "contactType": "technical support",
+        "availableLanguage": ["Chinese", "English", "Japanese"]
+      }
+    }
+    </script>
   </head>
   <body>
     <div id="app"></div>

public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://rushdb-lab.github.io/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://rushdb-lab.github.io/</loc>
+    <lastmod>2026-02-02</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+</urlset>

src/App.vue

@@ -31,10 +31,13 @@ const languageLabel = computed(() => {
 
 const scrollProgress = ref(0);
 const navbarBg = ref("rgba(5, 7, 18, 0.72)");
+const showBackToTop = ref(false);
+const activeSection = ref("");
 
 let scrollRaf: number | null = null;
 let pointerRaf: number | null = null;
 let sectionObserver: IntersectionObserver | null = null;
+let navHighlightObserver: IntersectionObserver | null = null;
 
 function ensureBusuanziScriptLoaded() {
   const scriptId = "busuanzi-script";
@@ -106,6 +109,7 @@ function switchLanguage(lang: Lang) {
 
 function updateScrollEffects() {
   navbarBg.value = window.scrollY > 100 ? "rgba(5, 7, 18, 0.82)" : "rgba(5, 7, 18, 0.72)";
+  showBackToTop.value = window.scrollY > 300;
 
   const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
   scrollProgress.value = maxScroll > 0 ? window.scrollY / maxScroll : 0;
@@ -195,6 +199,29 @@ function setupMemberCardHoverZIndex() {
   });
 }
 
+function setupNavHighlightObserver() {
+  const sections = ["about", "achievements", "projects", "members", "news", "contact"];
+
+  navHighlightObserver = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          activeSection.value = entry.target.id;
+        }
+      });
+    },
+    {
+      threshold: 0.3,
+      rootMargin: "-80px 0px -50% 0px",
+    }
+  );
+
+  sections.forEach((id) => {
+    const el = document.getElementById(id);
+    if (el) navHighlightObserver?.observe(el);
+  });
+}
+
 onMounted(async () => {
   document.documentElement.classList.add("js");
 
@@ -210,6 +237,7 @@ onMounted(async () => {
 
   setupSectionObserver();
   setupMemberCardHoverZIndex();
+  setupNavHighlightObserver();
   ensureBusuanziScriptLoaded();
 });
 
@@ -228,12 +256,15 @@ onUnmounted(() => {
   document.removeEventListener("click", onDocumentClick);
   sectionObserver?.disconnect();
   sectionObserver = null;
+  navHighlightObserver?.disconnect();
+  navHighlightObserver = null;
 });
 </script>
 
 <template>
-  <div class="scroll-progress" :style="{ transform: `scaleX(${scrollProgress})` }"></div>
-  <nav class="navbar" :class="{ 'menu-open': isMenuOpen }" :style="{ background: navbarBg }">
+  <a href="#main-content" class="skip-link">{{ t('a11y.skipToContent') }}</a>
+  <div class="scroll-progress" :style="{ transform: `scaleX(${scrollProgress})` }" role="progressbar" :aria-valuenow="Math.round(scrollProgress * 100)" aria-valuemin="0" aria-valuemax="100" :aria-label="t('a11y.scrollProgress')"></div>
+  <nav class="navbar" :class="{ 'menu-open': isMenuOpen }" :style="{ background: navbarBg }" role="navigation" :aria-label="t('a11y.mainNavigation')">
     <div class="nav-content">
       <a href="#" class="nav-logo" @click.prevent="scrollToTop">
         <img src="/RushDB.png" alt="RushDB Logo" class="nav-logo-img" />
@@ -245,22 +276,22 @@ onUnmounted(() => {
         </button>
         <ul class="nav-links">
           <li>
-            <a href="#about">{{ t("nav.about") }}</a>
+            <a href="#about" :class="{ active: activeSection === 'about' }">{{ t("nav.about") }}</a>
           </li>
           <li>
-            <a href="#achievements">{{ t("nav.achievements") }}</a>
+            <a href="#achievements" :class="{ active: activeSection === 'achievements' }">{{ t("nav.achievements") }}</a>
           </li>
           <li>
-            <a href="#projects">{{ t("nav.projects") }}</a>
+            <a href="#projects" :class="{ active: activeSection === 'projects' }">{{ t("nav.projects") }}</a>
           </li>
           <li>
-            <a href="#members">{{ t("nav.members") }}</a>
+            <a href="#members" :class="{ active: activeSection === 'members' }">{{ t("nav.members") }}</a>
           </li>
           <li>
-            <a href="#news">{{ t("nav.news") }}</a>
+            <a href="#news" :class="{ active: activeSection === 'news' }">{{ t("nav.news") }}</a>
           </li>
           <li>
-            <a href="#contact">{{ t("nav.contact") }}</a>
+            <a href="#contact" :class="{ active: activeSection === 'contact' }">{{ t("nav.contact") }}</a>
           </li>
         </ul>
 
@@ -288,7 +319,7 @@ onUnmounted(() => {
   <HeroSection />
 
   <div class="container">
-    <main class="main-content">
+    <main id="main-content" class="main-content" role="main">
       <div class="content-inner">
         <AboutSection />
         <AchievementsSection />
@@ -349,4 +380,17 @@ onUnmounted(() => {
       </div>
     </footer>
   </div>
+
+  <!-- Back to Top Button -->
+  <button
+    v-show="showBackToTop"
+    class="back-to-top"
+    type="button"
+    :aria-label="t('a11y.backToTop')"
+    @click="scrollToTop"
+  >
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <polyline points="18 15 12 9 6 15"></polyline>
+    </svg>
+  </button>
 </template>

src/i18n.ts

@@ -151,6 +151,12 @@ const messages = {
       en: "🇬🇧 English",
       ja: "🇯🇵 日本語",
     },
+    a11y: {
+      skipToContent: "跳转到主要内容",
+      scrollProgress: "页面滚动进度",
+      mainNavigation: "主导航",
+      backToTop: "返回顶部",
+    },
   },
   en: {
     nav: {
@@ -300,6 +306,12 @@ const messages = {
       en: "🇬🇧 English",
       ja: "🇯🇵 日本語",
     },
+    a11y: {
+      skipToContent: "Skip to main content",
+      scrollProgress: "Page scroll progress",
+      mainNavigation: "Main navigation",
+      backToTop: "Back to top",
+    },
   },
   ja: {
     nav: {
@@ -449,6 +461,12 @@ const messages = {
       en: "🇬🇧 English",
       ja: "🇯🇵 日本語",
     },
+    a11y: {
+      skipToContent: "メインコンテンツへスキップ",
+      scrollProgress: "ページスクロール進捗",
+      mainNavigation: "メインナビゲーション",
+      backToTop: "トップへ戻る",
+    },
   },
 } as const;
 

src/sections/AboutSection.vue

@@ -1,7 +1,58 @@
 <script setup lang="ts">
+import { onMounted, onUnmounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 
 const { t } = useI18n({ useScope: "global" });
+
+const membersCount = ref(0);
+const awardsCount = ref(0);
+const projectsCount = ref(0);
+const hasAnimated = ref(false);
+
+let observer: IntersectionObserver | null = null;
+
+function animateCounter(target: number, setter: (val: number) => void, duration = 1500) {
+  const startTime = performance.now();
+  const animate = (currentTime: number) => {
+    const elapsed = currentTime - startTime;
+    const progress = Math.min(elapsed / duration, 1);
+    const easeOut = 1 - Math.pow(1 - progress, 3);
+    setter(Math.floor(easeOut * target));
+    if (progress < 1) {
+      requestAnimationFrame(animate);
+    }
+  };
+  requestAnimationFrame(animate);
+}
+
+function startCounterAnimation() {
+  if (hasAnimated.value) return;
+  hasAnimated.value = true;
+  animateCounter(3, (val) => (membersCount.value = val));
+  animateCounter(4, (val) => (awardsCount.value = val));
+  animateCounter(1, (val) => (projectsCount.value = val));
+}
+
+onMounted(() => {
+  observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          startCounterAnimation();
+        }
+      });
+    },
+    { threshold: 0.5 }
+  );
+
+  const statsEl = document.querySelector(".intro-stats");
+  if (statsEl) observer.observe(statsEl);
+});
+
+onUnmounted(() => {
+  observer?.disconnect();
+  observer = null;
+});
 </script>
 
 <template>
@@ -25,19 +76,19 @@ const { t } = useI18n({ useScope: "global" });
       </p>
       <div class="intro-stats">
         <div class="stat-item">
-          <div class="stat-number">3</div>
+          <div class="stat-number">{{ membersCount }}</div>
           <div class="stat-label">
             {{ t("about.stats.members") }}
           </div>
         </div>
         <div class="stat-item">
-          <div class="stat-number">4</div>
+          <div class="stat-number">{{ awardsCount }}</div>
           <div class="stat-label">
             {{ t("about.stats.awards") }}
           </div>
         </div>
         <div class="stat-item">
-          <div class="stat-number">1</div>
+          <div class="stat-number">{{ projectsCount }}</div>
           <div class="stat-label">
             {{ t("about.stats.projects") }}
           </div>