feat: square avatars, cartoon hover, hamburger nav, team sorting

- Avatar shape changed to square with rounded corners
- Cartoon image hover effect for all 11 faculty members
- Mobile hamburger menu for navigation
- Team members sorted by last name (Botan Shi pinned first)
- Added new members: all photos and cartoon avatars

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: jokester-zzz

README.md

@@ -12,10 +12,10 @@ Official homepage for **KnowledgeX Lab**, built with Jekyll and hosted on GitHub
 
 ```bash
 # Install dependencies (first time only)
-PATH="/home/yangxuemeng/anaconda3/bin:$PATH" bundle install
+bundle install
 
 # Start local server
-PATH="/home/yangxuemeng/anaconda3/bin:$PATH" bundle exec jekyll serve
+bundle exec jekyll serve
 ```
 
 Open http://localhost:4000

_data/people.yml

@@ -1,28 +1,55 @@
-- name: "Licheng Wen"
+- name: "Botan Shi"
   role: "Faculty"
-  photo: "/assets/images/people/wenlicheng.jpg"
+  photo: "/assets/images/people/shibotan.jpg"
+  cartoon: "/assets/images/cartoon/shibotian.jpeg"
   bio: ""
   research: ""
   links:
-    homepage: "https://wenlc.cn/"
-    scholar: "https://scholar.google.com/citations?user=RNnjXTkAAAAJ"
+    homepage: ""
+    scholar: "https://scholar.google.com/citations?user=K0PpvLkAAAAJ&hl=en"
     github: ""
-    email: "wenlicheng@pjlab.org.cn"
+    email: "friskit.china@gmail.com"
 
-- name: "Qinyuan Qin"
+- name: "Xinyu Cai"
   role: "Faculty"
-  photo: "/assets/images/people/qinyuanqin.jpg"
+  photo: "/assets/images/people/caixinyu.jpg"
+  cartoon: "/assets/images/cartoon/caixinyu.jpeg"
   bio: ""
   research: ""
   links:
     homepage: ""
     scholar: ""
-    github: "https://github.com/tulongshaonian771"
-    email: "974930108@qq.com"
+    github: ""
+    email: "caixinyu@pjlab.org.cn"
+
+- name: "Yang Chen"
+  role: "Faculty"
+  photo: "/assets/images/people/chenyang.jpg"
+  cartoon: "/assets/images/cartoon/chenyang.jpeg"
+  bio: ""
+  research: ""
+  links:
+    homepage: ""
+    scholar: ""
+    github: ""
+    email: "chenyang3@pjlab.org.cn"
+
+- name: "Nianchen Deng"
+  role: "Faculty"
+  photo: "/assets/images/people/dengnianchen.jpg"
+  cartoon: "/assets/images/cartoon/dengnianchen.jpeg"
+  bio: ""
+  research: ""
+  links:
+    homepage: ""
+    scholar: ""
+    github: ""
+    email: "dengnianchen@pjlab.org.cn"
 
 - name: "Song Mao"
   role: "Faculty"
   photo: "/assets/images/people/maosong.jpg"
+  cartoon: "/assets/images/cartoon/maosong.jpeg"
   bio: ""
   research: ""
   links:
@@ -31,13 +58,74 @@
     github: "https://github.com/MaoSong2022"
     email: "maosong@pjlab.org.cn"
 
+- name: "Qinyuan Qin"
+  role: "Faculty"
+  photo: "/assets/images/people/qinqinyuan.jpg"
+  cartoon: "/assets/images/cartoon/qinqinyuan.jpeg"
+  bio: ""
+  research: ""
+  links:
+    homepage: ""
+    scholar: ""
+    github: "https://github.com/tulongshaonian771"
+    email: "974930108@qq.com"
+
 - name: "Yufan Shen"
   role: "Faculty"
   photo: "/assets/images/people/shenyufan.jpg"
+  cartoon: "/assets/images/cartoon/shenyufan.jpeg"
   bio: ""
   research: ""
   links:
     homepage: ""
     scholar: "https://scholar.google.com/citations?user=BnGLjlgAAAAJ&hl=zh-CN"
     github: ""
     email: "shenyfzju@gmail.com"
+
+- name: "Licheng Wen"
+  role: "Faculty"
+  photo: "/assets/images/people/wenlicheng.jpg"
+  cartoon: "/assets/images/cartoon/wenlicheng.jpeg"
+  bio: ""
+  research: ""
+  links:
+    homepage: "https://wenlc.cn/"
+    scholar: "https://scholar.google.com/citations?user=RNnjXTkAAAAJ"
+    github: ""
+    email: "wenlicheng@pjlab.org.cn"
+
+- name: "Guohang Yan"
+  role: "Faculty"
+  photo: "/assets/images/people/yanguohang.jpg"
+  cartoon: "/assets/images/cartoon/yanguohang.jpeg"
+  bio: ""
+  research: ""
+  links:
+    homepage: ""
+    scholar: "https://scholar.google.com/citations?user=xB3V4xIAAAAJ&hl=zh-CN"
+    github: ""
+    email: "yanguohang@pjlab.org.cn"
+
+- name: "Xuemeng Yang"
+  role: "Faculty"
+  photo: "/assets/images/people/yangxuemeng.jpg"
+  cartoon: "/assets/images/cartoon/yangxuemeng.jpeg"
+  bio: ""
+  research: ""
+  links:
+    homepage: "https://jokester-zzz.github.io/"
+    scholar: "https://scholar.google.com/citations?user=xGuZsikAAAAJ&hl=en"
+    github: "https://github.com/jokester-zzz"
+    email: "yangxuemeng@pjlab.org.cn"
+
+- name: "Hongbin Zhou"
+  role: "Faculty"
+  photo: "/assets/images/people/zhouhongbin.jpg"
+  cartoon: "/assets/images/cartoon/zhouhongbin.jpeg"
+  bio: ""
+  research: ""
+  links:
+    homepage: ""
+    scholar: "https://scholar.google.com/citations?user=fb_WgAEAAAAJ&hl=en"
+    github: "https://github.com/PrinceVictor"
+    email: "zhouhongbin@pjlab.org.cn"

_includes/header.html

@@ -1,18 +1,23 @@
 <nav class="site-nav">
   <div class="container">
     <a href="{{ '/' | relative_url }}" class="logo"><span style="color: var(--accent)">KnowledgeX</span>Lab</span></a>
-    <ul class="nav-links">
-      {% for link in site.nav_links %}
-      <li>
-        <a href="{{ link.url | relative_url }}"
-           {% if page.url == link.url %}class="active"{% endif %}>
-          {{ link.title }}
-        </a>
-      </li>
-      {% endfor %}
-      <li>
-        <button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode"></button>
-      </li>
-    </ul>
+    <div class="nav-right">
+      <ul class="nav-links" id="nav-links">
+        {% for link in site.nav_links %}
+        <li>
+          <a href="{{ link.url | relative_url }}"
+             {% if page.url == link.url %}class="active"{% endif %}>
+            {{ link.title }}
+          </a>
+        </li>
+        {% endfor %}
+        <li>
+          <button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode"></button>
+        </li>
+      </ul>
+      <button class="nav-hamburger" id="nav-hamburger" aria-label="Menu">
+        <span></span><span></span><span></span>
+      </button>
+    </div>
   </div>
 </nav>

_layouts/default.html

@@ -23,5 +23,6 @@
   </main>
   {% include footer.html %}
   <script src="{{ '/assets/js/hero.js' | relative_url }}"></script>
+  <script src="{{ '/assets/js/nav.js' | relative_url }}"></script>
 </body>
 </html>

assets/css/main.css

@@ -121,6 +121,24 @@ img { max-width: 100%; height: auto; display: block; }
 }
 .nav-links a:hover, .nav-links a.active { color: var(--text-primary); }
 
+.nav-right { display: flex; align-items: center; }
+
+.nav-hamburger {
+  display: none;
+  flex-direction: column; justify-content: center; gap: 5px;
+  background: none; border: none; cursor: pointer;
+  padding: 4px; margin-left: 12px;
+}
+.nav-hamburger span {
+  display: block; width: 22px; height: 2px;
+  background: var(--text-primary);
+  border-radius: 2px;
+  transition: transform 0.2s, opacity 0.2s;
+}
+.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+.nav-hamburger.open span:nth-child(2) { opacity: 0; }
+.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+
 .theme-toggle {
   background: var(--border);
   border: none; border-radius: var(--radius-full);
@@ -459,29 +477,35 @@ img { max-width: 100%; height: auto; display: block; }
 }
 
 .people-grid {
-  display: grid; grid-template-columns: repeat(3, 1fr);
-  gap: 16px; margin-bottom: 48px;
+  display: grid; grid-template-columns: repeat(4, 1fr);
+  gap: 24px; margin-bottom: 48px;
 }
 .person-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  padding: 24px 20px;
+  background: transparent;
+  border: none;
+  padding: 0;
   text-align: center;
-  transition: box-shadow 0.2s, transform 0.2s;
 }
-.person-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
+.person-card:hover .avatar { transform: translateY(-3px); }
 .person-card .avatar {
-  width: 200px; height: 200px; border-radius: 50%;
-  margin: 0 auto 16px;
+  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-lg);
+  margin: 0 auto 14px;
   background: var(--accent-light);
-  border: 1px solid var(--accent-border);
   display: flex; align-items: center; justify-content: center;
   font-size: 1.5rem; overflow: hidden;
+  transition: transform 0.2s;
 }
 .person-card .avatar img {
   width: 100%; height: 100%; object-fit: cover; object-position: center top;
 }
+.person-card .avatar.has-cartoon { position: relative; }
+.person-card .avatar.has-cartoon img {
+  position: absolute; inset: 0;
+  transition: opacity 0.35s ease;
+}
+.person-card .avatar.has-cartoon .photo-cartoon { opacity: 0; }
+.person-card:hover .avatar.has-cartoon .photo-real { opacity: 0; }
+.person-card:hover .avatar.has-cartoon .photo-cartoon { opacity: 1; }
 .person-card h3 {
   font-family: var(--font-display);
   font-size: 1.0625rem; font-weight: 600;
@@ -692,9 +716,21 @@ img { max-width: 100%; height: auto; display: block; }
   .hero-img-wrap { display: none; }
   .hero-inner { padding: 108px 20px 48px; }
   .research-grid { grid-template-columns: 1fr; gap: 1px; }
-  .people-grid { grid-template-columns: repeat(2, 1fr); }
+  .people-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
   .projects-grid { grid-template-columns: 1fr; }
-  .nav-links { display: none; }
+  .nav-links {
+    display: none;
+    position: absolute; top: 60px; left: 0; right: 0;
+    flex-direction: column; align-items: stretch; gap: 0;
+    background: var(--bg);
+    border-bottom: 1px solid var(--border-light);
+    padding: 8px 0;
+    z-index: 99;
+  }
+  .nav-links.open { display: flex; }
+  .nav-links li { width: 100%; }
+  .nav-links a, .nav-links li:last-child { padding: 12px 24px; display: block; font-size: 0.9375rem; }
+  .nav-hamburger { display: flex; }
   .pi-card { flex-direction: column; }
   .stats-bar { flex-wrap: wrap; gap: 24px; }
   .stat-item { border-right: none; padding: 0; min-width: 120px; }