more

Signed-off-by: bitliu <[email protected]>

Author: Xunzhuo

website/src/pages/publications.js

@@ -21,11 +21,11 @@ const papers = [
     type: 'paper',
     title: 'Semantic Inference Routing Protocol (SIRP)',
     authors: 'Huamin Chen, Luay Jalil',
-    venue: 'IETF Draft',
+    venue: 'IETF',
     year: '2025',
     abstract: 'A protocol specification for semantic inference routing that enables intelligent request routing based on semantic understanding and inference requirements.',
     links: [
-      { type: 'paper', url: 'https://datatracker.ietf.org/doc/html/draft-chen-nmrg-semantic-inference-routing', label: '📄 IETF Draft' },
+      { type: 'paper', url: 'https://datatracker.ietf.org/doc/html/draft-chen-nmrg-semantic-inference-routing', label: '📄 Paper' },
     ],
     featured: true,
   },
@@ -131,14 +131,23 @@ function PublicationCard({ item }) {
 export default function Publications() {
   const [activeFilter, setActiveFilter] = useState('all')
 
-  const allItems = [...papers, ...talks].sort((a, b) => {
+  const sortedPapers = papers.sort((a, b) => {
     // Sort by featured first, then by year (descending), then by id
     if (a.featured && !b.featured) return -1
     if (!a.featured && b.featured) return 1
     if (a.year !== b.year) return parseInt(b.year) - parseInt(a.year)
     return a.id - b.id
   })
 
+  const sortedTalks = talks.sort((a, b) => {
+    // Sort by featured first, then by year (descending), then by id
+    if (a.featured && !b.featured) return -1
+    if (!a.featured && b.featured) return 1
+    if (a.year !== b.year) return parseInt(b.year) - parseInt(a.year)
+    return a.id - b.id
+  })
+
+  const allItems = [...sortedPapers, ...sortedTalks]
   const filteredItems = activeFilter === 'all'
     ? allItems
     : allItems.filter(item => item.type === activeFilter)
@@ -197,11 +206,35 @@ export default function Publications() {
         </div>
 
         <main>
-          <div className={styles.publicationsList}>
-            {filteredItems.map(item => (
-              <PublicationCard key={item.id} item={item} />
-            ))}
-          </div>
+          {activeFilter === 'all' ? (
+            <div className={styles.twoRowLayout}>
+              {/* Papers Row */}
+              <section className={styles.sectionRow}>
+                <h2 className={styles.sectionTitle}>📄 Papers</h2>
+                <div className={styles.publicationsRow}>
+                  {sortedPapers.map(item => (
+                    <PublicationCard key={item.id} item={item} />
+                  ))}
+                </div>
+              </section>
+
+              {/* Talks Row */}
+              <section className={styles.sectionRow}>
+                <h2 className={styles.sectionTitle}>🎤 Talks</h2>
+                <div className={styles.publicationsRow}>
+                  {sortedTalks.map(item => (
+                    <PublicationCard key={item.id} item={item} />
+                  ))}
+                </div>
+              </section>
+            </div>
+          ) : (
+            <div className={styles.publicationsList}>
+              {filteredItems.map(item => (
+                <PublicationCard key={item.id} item={item} />
+              ))}
+            </div>
+          )}
 
           {filteredItems.length === 0 && (
             <div className={styles.emptyState}>

website/src/pages/publications.module.css

@@ -88,6 +88,35 @@
   box-shadow: 0 4px 12px rgba(9, 105, 218, 0.3);
 }
 
+/* Two-row layout for "All" view */
+.twoRowLayout {
+  margin-bottom: 4rem;
+}
+
+.sectionRow {
+  margin-bottom: 4rem;
+}
+
+.sectionTitle {
+  font-size: 2.5rem;
+  font-weight: 800;
+  margin-bottom: 2rem;
+  text-align: center;
+  background: linear-gradient(45deg, #0969da, #8250df, #58a6ff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-shadow: 0 0 20px rgba(9, 105, 218, 0.2);
+}
+
+.publicationsRow {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+/* Single column layout for filtered views */
 .publicationsList {
   display: flex;
   flex-direction: column;
@@ -308,6 +337,13 @@
 }
 
 /* Responsive Design */
+@media (max-width: 1024px) {
+  .publicationsRow {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+}
+
 @media (max-width: 768px) {
   .container {
     padding: 1rem;
@@ -330,6 +366,15 @@
     gap: 2rem;
   }
 
+  .publicationsRow {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+
+  .sectionTitle {
+    font-size: 2rem;
+  }
+
   .publicationCard {
     padding: 2rem;
   }