1 2<!doctype html> 3<html lang="en" dir="/" class="no-js home-fiddle-html"> 4 <head> 5 <meta charset="utf-8"> 6 7<!-- begin SEO --> 8 9 10 11 12 13<title>Yiteng Xu - Homepage</title> 14 15 16 17 18 19 20 21<meta property="og:locale" content="en"> 22<meta property="og:site_name" content="Yiteng Xu"> 23<meta property="og:title" content="Yiteng Xu"> 24 25 26 <link rel="canonical" href="https://yiteng-xu.github.io/"> 27 <meta property="og:url" content="https://yiteng-xu.github.io/"> 28 29 30 31 <meta property="og:description" content=""> 32 33 34 35 36 37 38 39 40 41<!-- end SEO --> 42 43 44<meta name="HandheldFriendly" content="True"> 45<meta name="MobileOptimized" content="320"> 46<meta name="viewport" content="width=device-width, initial-scale=1.0"> 47
48<script> 49 document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js '; 50</script>
50 51 52<!-- For all browsers --> 53<link rel="stylesheet" href="/assets/css/main.css?v=126190281600"> 54 55<meta http-equiv="cleartype" content="on"> 56<base target="_blank"> 57 58 <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png"> 59<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"> 60<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png"> 61<link rel="manifest" href="/images/site.webmanifest"> 62 63<meta name="msapplication-TileColor" content="#000000"> 64<meta name="msapplication-TileImage" content="/images/mstile-144x144.png?v=M44lzPylqQ"> 65<meta name="msapplication-config" content="/images/browserconfig.xml?v=M44lzPylqQ"> 66<meta name="theme-color" content="#ffffff"> 67<link rel="stylesheet" href="/assets/css/academicons.css"/> 68
69<script type="text/x-mathjax-config"> MathJax.Hub.Config({ TeX: { equationNumbers: { autoNumber: "all" } } }); </script>
vendor: 1 bytes, line 69
69
70<script type="text/x-mathjax-config"> 71 MathJax.Hub.Config({ 72 tex2jax: { 73 inlineMath: [ ['$','$'], ["\\(","\\)"] ], 74 processEscapes: true 75 } 76 }); 77</script>
vendor: 1 bytes, line 77
77
78<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-MML-AM_CHTML' async></script>
78 79 80 81 82 83 84 85 <link rel="alternate" hreflang="en" href="/"> 86 87 88 <link rel="alternate" hreflang="zh-cn" href="/zh-cn/"> 89 90 91 92 <link rel="alternate" hreflang="x-default" href="/"> 93 94 95 96 97<!-- end custom head snippets --> 98 99 </head> 100 101 <body class="home-fiddle"> 102 103 <!--[if lt IE 9]> 104<div class="notice--danger align-center" style="margin: 0;">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</div> 105<![endif]--> 106 <div class="masthead"> 107 <div class="masthead__inner-wrap"> 108 <div class="masthead__menu"> 109 <nav id="site-nav" class="greedy-nav"> 110 <button><div class="navicon"></div></button> 111 <ul class="visible-links"> 112 <li class="masthead__menu-item masthead__menu-item--lg masthead__menu-home-item"><a href="#about-me">Homepage</a></li> 113 114 <li class="masthead__menu-item"><a href="#about-me">About Me</a></li> 115 116 <li class="masthead__menu-item"><a href="#news">News</a></li> 117 118 <li class="masthead__menu-item"><a href="#publications">Publications</a></li> 119 120 <li class="masthead__menu-item"><a href="#patents">Patents</a></li> 121 122 <li class="masthead__menu-item"><a href="#awards">Honors and Awards</a></li> 123 124 <li class="masthead__menu-item"><a href="#educations">Educations</a></li> 125 126 <li class="masthead__menu-item"><a href="/æ¥æ¬æ»ç¥(1).html">æ¥æ¬æ»ç¥</a></li> 127 128 <li class="masthead__menu-item"><a href="/kyushu/">ä¹å·æ»ç¥</a></li> 129 130 <li class="masthead__menu-item"><a href="/yokohama-atami/">å ³ä¸æ ¢æ¸¸æ»ç¥</a></li> 131 132 <li class="masthead__menu-item"><a href="/linuxdo/">LinuxDO</a></li> 133 134 <li class="masthead__menu-item"><a href="/prosple-internships/">å®ä¹ çé</a></li> 135 136 </ul> 137 <ul class="hidden-links hidden"></ul> 138 </nav> 139 </div> 140 </div> 141</div> 142 143 <div id="main" role="main"> 144 145 <div class="sidebar sticky"> 146 147 148<div itemscope itemtype="http://schema.org/Person" class="profile_box"> 149 150 <div class="author__avatar"> 151 <img src="images/xyt.png" class="author__avatar" alt="Yiteng Xu"> 152 </div> 153 154 <div class="author__content"> 155 <h3 class="author__name">Yiteng Xu</h3> 156 157 </div> 158 159 <div class="author__urls-wrapper"> 160 <!-- <button class="btn btn--inverse">More Info & Contact</button> --> 161 <ul class="author__urls social-icons"> 162 163 <li><div style="white-space: normal; margin-bottom: 1em;"></div></li> 164 165 166 <li><i class="fa fa-fw fa-map-marker" aria-hidden="true"></i> Shanghai, China</li> 167 168 169 170 <li><a href="https://kms.shanghaitech.edu.cn/profile?id=1861051443341492225"><i class="fas fa-fw fa-link" aria-hidden="true"></i> Website</a></li> 171 172 173 <li><a href="mailto:[email protected]"><i class="fas fa-fw fa-envelope" aria-hidden="true"></i> Email</a></li> 174 175 176 177 <li><a href="https://www.researchgate.net/profile/Yiteng-Xu"><i class="fab fa-fw fa-researchgate" aria-hidden="true"></i> ResearchGate</a></li> 178 179 180 181 182 183 <li><a href="https://www.linkedin.com/in/yiteng-xu-9433a4371/"><i class="fab fa-fw fa-linkedin" aria-hidden="true"></i> LinkedIn</a></li> 184 185 186 <li><a href="https://dblp.org/pid/172/8097.html"><i class="ai ai-dblp ai-fw" aria-hidden="true"></i> DBLP</a></li> 187 188 189 <li><a href="https://www.catalyzex.com/author/Yiteng%20Xu"><i class="fas fa-fw fa-link" aria-hidden="true"></i> CatalyzeX</a></li> 190 191 192 <li><a href="https://dl.acm.org/profile/99661774807"><i class="ai ai-acm-square ai-fw" aria-hidden="true"></i> ACM DL</a></li> 193 194 195 <li><a href="https://underline.io/speakers/220119-yiteng-xu"><i class="fas fa-fw fa-video" aria-hidden="true"></i> Underline</a></li> 196 197 198 <li><a href="https://rankdblp.com/authors/__name__yiteng_xu.html"><i class="fas fa-fw fa-chart-line" aria-hidden="true"></i> RankDBLP</a></li> 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 <li><a href="https://scholar.google.com/citations?user=29Gs2nQAAAAJ&hl=zh-CN"><i class="fas fa-fw fa-graduation-cap"></i> Google Scholar</a></li> 219 220 221 <li><a href="https://www.semanticscholar.org/author/2294312146"><i class="fas fa-fw fa-book" aria-hidden="true"></i> Semantic Scholar</a></li> 222 223 224 225 <li><a href="https://orcid.org/0009-0005-6136-5016"><i class="ai ai-orcid-square ai-fw"></i> ORCID</a></li> 226 227 228 229 </ul> 230 <div class="author__urls_sm"> 231 232 <a href="https://kms.shanghaitech.edu.cn/profile?id=1861051443341492225"><i class="fas fa-fw fa-link" aria-hidden="true"></i></a> 233 234 235 <a href="mailto:[email protected]"><i class="fas fa-fw fa-envelope" aria-hidden="true"></i></a> 236 237 238 239 <a href="https://www.researchgate.net/profile/Yiteng-Xu"><i class="fab fa-fw fa-researchgate" aria-hidden="true"></i></a> 240 241 242 243 244 245 <a href="https://www.linkedin.com/in/yiteng-xu-9433a4371/"><i class="fab fa-fw fa-linkedin" aria-hidden="true"></i></a> 246 247 248 <a href="https://dblp.org/pid/172/8097.html"><i class="ai ai-dblp ai-fw" aria-hidden="true"></i></a> 249 250 251 <a href="https://www.catalyzex.com/author/Yiteng%20Xu"><i class="fas fa-fw fa-link" aria-hidden="true"></i></a> 252 253 254 <a href="https://dl.acm.org/profile/99661774807"><i class="ai ai-acm-square ai-fw" aria-hidden="true"></i></a> 255 256 257 <a href="https://underline.io/speakers/220119-yiteng-xu"><i class="fas fa-fw fa-video" aria-hidden="true"></i></a> 258 259 260 <a href="https://rankdblp.com/authors/__name__yiteng_xu.html"><i class="fas fa-fw fa-chart-line" aria-hidden="true"></i></a> 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 <a href="https://scholar.google.com/citations?user=29Gs2nQAAAAJ&hl=zh-CN"><i class="fas fa-fw fa-graduation-cap"></i></a> 281 282 283 <a href="https://www.semanticscholar.org/author/2294312146"><i class="fas fa-fw fa-book" aria-hidden="true"></i></a> 284 285 286 287 <a href="https://orcid.org/0009-0005-6136-5016"><i class="ai ai-orcid-square ai-fw"></i></a> 288 289 290 291 </div> 292 </div> 293</div> 294 295 296 </div> 297 298 299 <article class="page" itemscope itemtype="http://schema.org/CreativeWork"> 300 <meta itemprop="headline" content=""> 301 <div class="page__inner-wrap"> 302 <section class="page__content" itemprop="text"> 303 304<p><span class="anchor" id="about-me"></span></p> 305 306<section class="fh-shell fh-shell--wide" aria-label="Portfolio hero"> 307 <div class="fh-dashboard"> 308 <div class="fh-intro"> 309 <p class="fh-kicker">HUMAN-CENTRIC AI PORTFOLIO</p> 310 <h1 class="fh-title">Yiteng Xu</h1> 311 <p class="fh-subtitle">Human-Centric 3D Intelligence</p> 312 <p class="fh-lead">Researching the interface between 3D Computer Vision, Robotics, and Embodied AI. Building interactive systems where humans and intelligent machines learn together.</p> 313 <div class="fh-stats" aria-label="Profile summary"> 314 <div class="fh-stat">
315 <span>Current Role</span> 316 <strong>Ph.D. Student</strong> 317 </div> 318 <div class="fh-stat"> 319 <span>Affiliation</span> 320 <strong>ShanghaiTech</strong> 321 </div> 322 <div class="fh-stat"> 323 <span>Core Theme</span> 324 <strong>3D Human Understanding</strong> 325 </div> 326 </div> 327 <div class="fh-quick-links fh-quick-links--primary"> 328 <a href="mailto:[email protected]">Email</a> 329 <a href="/assets/files/CV_Yiteng_Xu_English.pdf" target="_blank" rel="noopener">English CV</a> 330 <a href="/assets/files/CV_Yiteng_Xu.pdf" target="_blank" rel="noopener">䏿ç®å</a> 331 <a href="https://scholar.google.com/citations?user=29Gs2nQAAAAJ&hl=zh-CN" target="_blank" rel="noopener">Google Scholar</a> 332 </div> 333 <div class="fh-quick-links fh-quick-links--profiles"> 334 <a href="https://www.linkedin.com/in/yiteng-xu-9433a4371/" target="_blank" rel="noopener">LinkedIn</a> 335 <a href="https://www.semanticscholar.org/author/2294312146" target="_blank" rel="noopener">Semantic Scholar</a> 336 <a href="https://www.researchgate.net/profile/Yiteng-Xu" target="_blank" rel="noopener">ResearchGate</a> 337 <a href="https://orcid.org/0009-0005-6136-5016" target="_blank" rel="noopener">ORCID</a> 338 <a href="https://dblp.org/pid/172/8097.html" target="_blank" rel="noopener">DBLP</a> 339 <a href="https://www.catalyzex.com/author/Yiteng%20Xu" target="_blank" rel="noopener">CatalyzeX</a> 340 <a href="https://dl.acm.org/profile/99661774807" target="_blank" rel="noopener">ACM DL</a> 341 <a href="https://underline.io/speakers/220119-yiteng-xu" target="_blank" rel="noopener">Underline</a> 342 <a href="https://rankdblp.com/authors/__name__yiteng_xu.html" target="_blank" rel="noopener">RankDBLP</a> 343 <a href="https://kms.shanghaitech.edu.cn/profile?id=1861051443341492225" target="_blank" rel="noopener">ShanghaiTech Profile</a> 344 </div> 345 </div> 346 347 <div class="fh-map" aria-label="Homepage map"> 348 <div class="fh-panel-head"> 349 <span>Site Map</span> 350 <h2>What is on this page</h2> 351 </div> 352 <div class="fh-map-grid"> 353 <a class="fh-map-tile" href="#about-me" style="--tile-accent:#145d56; --tile-soft:rgba(20,93,86,.13);"> 354 <span>Research Profile</span> 355 <strong>About and Research</strong> 356 <p>3D Computer Vision, Robotics, Embodied AI, LiDAR-Camera Fusion, and human motion understanding.</p> 357 </a> 358 <a class="fh-map-tile" href="#publications" style="--tile-accent:#2f4c7f; --tile-soft:rgba(47,76,127,.13);"> 359 <span>Publications</span> 360 <strong>Selected Papers</strong> 361 <p>CVPR, ICCV, SIGGRAPH Asia, AAAI, IJCAI, and related project pages.</p> 362 </a> 363 <a class="fh-map-tile" href="#news" style="--tile-accent:#b76c35; --tile-soft:rgba(183,108,53,.15);"> 364 <span>News</span> 365 <strong>Public Updates</strong> 366 <p>Media coverage, lab news, conference activity, and public academic records.</p> 367 </a> 368 <a class="fh-map-tile" href="#milestones" style="--tile-accent:#61734d; --tile-soft:rgba(97,115,77,.14);"> 369 <span>Milestones</span> 370 <strong>Awards and Timeline</strong> 371 <p>National Scholarship, Ph.D. journey, accepted papers, and research milestones.</p> 372 </a> 373 <a class="fh-map-tile" href="#skills" style="--tile-accent:#6c4a8f; --tile-soft:rgba(108,74,143,.12);"> 374 <span>Skills</span> 375 <strong>Technical Stack</strong> 376 <p>Perception, multimodal fusion, point cloud video, robot interaction, and research tooling.</p> 377 </a> 378 <a class="fh-map-tile" href="#patents" style="--tile-accent:#8c5a2b; --tile-soft:rgba(140,90,43,.13);"> 379 <span>Profiles</span> 380 <strong>Links and Patents</strong> 381 <p>LinkedIn, Scholar, Semantic Scholar, ResearchGate, ORCID, DBLP, ACM DL, and patents.</p> 382 </a> 383 </div> 384 </div> 385 386 <aside class="fh-side-panel" aria-label="Profile and featured work"> 387 <div class="fh-profile-mini"> 388 <img src="/images/xyt.png" alt="Portrait of Yiteng Xu" /> 389 <div>
390 <span>ShanghaiTech University</span> 391 <strong>Yiteng Xu</strong> 392 <p>SIST Ph.D. Student<br />Shanghai, China</p> 393 </div> 394 </div> 395 <a class="fh-spotlight" href="https://irc-vitahome.github.io/SymBridge/" target="_blank" rel="noopener"> 396 <span>SIGGRAPH Asia 2025</span> 397 <strong>SymBridge: real-to-sim human-robot symbiosis</strong> 398 <p>A cyber-physical interactive system for adaptive human-robot learning.</p> 399 </a> 400 <div class="fh-mirror-card"> 401 <span>China-accessible mirror</span> 402 <strong>Need domestic access?</strong> 403 <p>The PageDrop version keeps the core profile reachable from mainland China.</p> 404 <a href="https://yiteng-xu-cn.pagedrop.io/" target="_blank" rel="noopener">Open PageDrop mirror</a> 405 </div> 406 </aside> 407 </div> 408 409 <div class="fh-marquee" aria-label="Research interests and venues"> 410 <div class="fh-marquee__inner"> 411 <div class="fh-marquee__group"> 412 <span class="fh-marquee__item">3D Computer Vision</span><span class="fh-marquee__sep" aria-hidden="true">â¦</span> 413 <span class="fh-marquee__item">Robotics</span><span class="fh-marquee__sep" aria-hidden="true">â¦</span> 414 <span class="fh-marquee__item">Embodied AI</span><span class="fh-marquee__sep" aria-hidden="true">â¦</span> 415 <span class="fh-marquee__item">LiDAR-Camera Fusion</span><span class="fh-marquee__sep" aria-hidden="true">â¦</span> 416 <span class="fh-marquee__item">Human Pose & Motion</span><span class="fh-marquee__sep" aria-hidden="true">â¦</span> 417 <span class="fh-marquee__item">Human-in-the-Loop</span><span class="fh-marquee__sep" aria-hidden="true">â¦</span> 418 <span class="fh-marquee__item">Point Cloud Video</span><span class="fh-marquee__sep" aria-hidden="true">â¦</span> 419 <span class="fh-marquee__item">CVPR · ICCV · ECCV</span><span class="fh-marquee__sep" aria-hidden="true">â¦</span> 420 <span class="fh-marquee__item">SIGGRAPH Asia</span><span class="fh-marquee__sep" aria-hidden="true">â¦</span> 421 <span class="fh-marquee__item">AAAI · IJCAI</span> 422 </div> 423 <div class="fh-marquee__group" aria-hidden="true"> 424 <span class="fh-marquee__item">3D Computer Vision</span><span class="fh-marquee__sep">â¦</span> 425 <span class="fh-marquee__item">Robotics</span><span class="fh-marquee__sep">â¦</span> 426 <span class="fh-marquee__item">Embodied AI</span><span class="fh-marquee__sep">â¦</span> 427 <span class="fh-marquee__item">LiDAR-Camera Fusion</span><span class="fh-marquee__sep">â¦</span> 428 <span class="fh-marquee__item">Human Pose & Motion</span><span class="fh-marquee__sep">â¦</span> 429 <span class="fh-marquee__item">Human-in-the-Loop</span><span class="fh-marquee__sep">â¦</span> 430 <span class="fh-marquee__item">Point Cloud Video</span><span class="fh-marquee__sep">â¦</span> 431 <span class="fh-marquee__item">CVPR · ICCV · ECCV</span><span class="fh-marquee__sep">â¦</span> 432 <span class="fh-marquee__item">SIGGRAPH Asia</span><span class="fh-marquee__sep">â¦</span> 433 <span class="fh-marquee__item">AAAI · IJCAI</span> 434 </div> 435 </div> 436 </div> 437 438 <div class="fh-filmstrip" aria-label="Selected research visuals"> 439 <figure> 440 <a class="fh-filmstrip__link" href="https://ojs.aaai.org/index.php/AAAI/article/view/25120" target="_blank" rel="noopener"> 441 <img src="/images/fiddle-style/fusionpose-teaser.webp" alt="FusionPose dataset and pose estimation visual" /> 442 </a> 443 </figure> 444 <figure> 445 <a class="fh-filmstrip__link" href="https://ojs.aaai.org/index.php/AAAI/article/view/25120" target="_blank" rel="noopener"> 446 <img src="/images/fiddle-style/fusionpose-suplight.webp" alt="Low-light motion sequence visual" /> 447 </a> 448 </figure> 449 <figure> 450 <a class="fh-filmstrip__link" href="https://openaccess.thecvf.com/content/ICCV2023/html/Xu_Human-centric_Scene_Understanding_for_3D_Large-scale_Scenarios_ICCV_2023_paper.html" target="_blank" rel="noopener"> 451 <img src="/images/fiddle-style/hucenlife-teaser.webp" alt="HuCenLife scene understanding visual" /> 452 </a> 453 </figure> 454 <figure> 455 <a class="fh-filmstrip__link" href="https://irc-vitahome.github.io/SymBridge/" target="_blank" rel="noopener"> 456 <img src="/images/fiddle-style/symbridge-pipeline.webp" alt="SymBridge pipeline visual" /> 457 </a> 458 </figure> 459 <figure> 460 <a class="fh-filmstrip__link" href="https://ojs.aaai.org/index.php/AAAI/article/view/25120" target="_blank" rel="noopener"> 461 <img src="/images/fiddle-style/fusionpose-teaser2.webp" alt="FusionPose sequence visual" /> 462 </a> 463 </figure> 464 </div> 465</section> 466 467<section class="fh-about" aria-label="About me"> 468 <div class="fh-about__copy"> 469 <p>
469I am a third-year Ph.D. student at the School of Information Science and Technology, <a href="https://www.shanghaitech.edu.cn/eng/">ShanghaiTech University</a>, advised by Prof. Yuexin Ma. Previously, I obtained my B.S. degree from ShanghaiTech University in 2023.</p> 470 471 <p>My research lies at the intersection of <strong>3D Computer Vision</strong>, <strong>Robotics</strong>, and <strong>Embodied AI</strong>. My primary goal is to enable intelligent agents (like humanoid robots) to perceive, understand, and interact with the complex, dynamic 3D world in a human-like manner. I am particularly interested in <strong>multi-modal sensor fusion (LiDAR-Camera)</strong>, <strong>3D human pose and motion understanding</strong>, and building <strong>human-in-the-loop systems</strong> for bidirectional learning in human-robot interaction.</p> 472 </div> 473 <figure class="fh-about__photo"> 474 <img src="/images/xyt.png" alt="Portrait of Yiteng Xu" loading="lazy" /> 475 </figure> 476</section> 477 478<!-- I am actively seeking research internship opportunities for the summer of 2025 that will allow me to apply my research to real-world challenges. --> 479<p><a href="/assets/files/CV_Yiteng_Xu.pdf" target="_blank"><strong>æ¥çç®å</strong> (䏿)</a> <a href="/assets/files/CV_Yiteng_Xu_English.pdf" target="_blank"><strong>View My CV</strong> (English)</a></p> 480 481<h1 id="-milestones">ð¥ Milestones</h1> 482<div class="milestones-section" id="milestones">
483 <div class="milestones-controls" role="tablist" aria-label="Milestones view"> 484 <button class="view-toggle active" role="tab" aria-selected="true" data-view="timeline">Timeline</button> 485 <button class="view-toggle" role="tab" aria-selected="false" data-view="list">List</button> 486 </div> 487 488 <div class="milestones-timeline" role="list"> 489 <div class="timeline-line" aria-hidden="true"></div> 490 491 <div class="milestone" role="listitem"> 492 <div class="milestone-dot" aria-hidden="true"></div> 493 <div class="milestone-card" tabindex="0"> 494 <div class="milestone-date">Feb 2026</div> 495 <h3 class="milestone-title">CVPR 2026 · ReMoGen</h3> 496 <p class="milestone-desc">ReMoGen: Real-time Human Interaction-to-Reaction Generation via Modular Learning from Diverse Data, accepted by CVPR 2026.</p> 497 <div class="milestone-tags"> 498 <span class="chip chip-paper">Publication</span> 499 <a class="chip chip-link" href="https://4dvlab.github.io/project_page/remogen/" target="_blank" rel="noopener">Project</a> 500 <a class="chip chip-link" href="https://arxiv.org/abs/2604.01082" target="_blank" rel="noopener">Paper</a> 501 </div> 502 </div> 503 </div> 504 505 <div class="milestone" role="listitem"> 506 <div class="milestone-dot" aria-hidden="true"></div> 507 <div class="milestone-card" tabindex="0"> 508 <div class="milestone-date">Sep 2025</div> 509 <h3 class="milestone-title">Siggraph Asia 2025</h3> 510 <p class="milestone-desc">SymBridge: A Human-in-the-Loop Cyber-Physical Interactive System for Adaptive Human-Robot Symbiosis.</p> 511 <div class="milestone-tags"> 512 <span class="chip chip-paper">Publication</span> 513 <a class="chip chip-link" href="https://irc-vitahome.github.io/SymBridge/" target="_blank" rel="noopener">Paper</a> 514 </div> 515 </div> 516 </div> 517 518 <div class="milestone" role="listitem"> 519 <div class="milestone-dot" aria-hidden="true"></div> 520 <div class="milestone-card" tabindex="0"> 521 <div class="milestone-date">Oct 2024</div> 522 <h3 class="milestone-title">National Scholarship å½å®¶å¥å¦é</h3> 523 <p class="milestone-desc">Honored to receive the National Scholarship (Top 1%).</p> 524 <div class="milestone-tags"> 525 <span class="chip chip-award">Award</span> 526 </div> 527 </div> 528 </div> 529 530 <div class="milestone" role="listitem"> 531 <div class="milestone-dot" aria-hidden="true"></div> 532 <div class="milestone-card" tabindex="0"> 533 <div class="milestone-date">Feb 2024</div> 534 <h3 class="milestone-title">CVPR 2024</h3> 535 <p class="milestone-desc">UniPVU-Human: A unified framework for human-centric point cloud video understanding accepted by CVPR 2024.</p> 536 <div class="milestone-tags"> 537 <span class="chip chip-paper">Publication</span> 538 <a class="chip chip-link" href="https://openaccess.thecvf.com/content/CVPR2024/html/Xu_A_Unified_Framework_for_Human-centric_Point_Cloud_Video_Understanding_CVPR_2024_paper.html" target="_blank" rel="noopener">Paper</a> 539 </div> 540 </div> 541 </div> 542 543 <div class="milestone" role="listitem"> 544 <div class="milestone-dot" aria-hidden="true"></div> 545 <div class="milestone-card" tabindex="0"> 546 <div class="milestone-date">Sep 2023</div> 547 <h3 class="milestone-title">Start Ph.D. Journey</h3> 548 <p class="milestone-desc">Started my Ph.D. at ShanghaiTech University.</p> 549 <div class="milestone-tags"> 550 <span class="chip chip-life">Milestone</span> 551 </div> 552 </div> 553 </div> 554 555 <div class="milestone" role="listitem"> 556 <div class="milestone-dot" aria-hidden="true"></div> 557 <div class="milestone-card" tabindex="0"> 558 <div class="milestone-date">Jul 2023</div> 559 <h3 class="milestone-title">ICCV 2023</h3> 560 <p class="milestone-desc">Human-centric scene understanding and the HuCenLife dataset accepted by ICCV 2023.</p> 561 <div class="milestone-tags"> 562 <span class="chip chip-paper">Publication</span> 563 <a class="chip chip-link" href="https://openaccess.thecvf.com/content/ICCV2023/html/Xu_Human-centric_Scene_Understanding_for_3D_Large-scale_Scenarios_ICCV_2023_paper.html" target="_blank" rel="noopener">Paper</a> 564 </div> 565 </div> 566 </div> 567 568 <div class="milestone" role="listitem"> 569 <div class="milestone-dot" aria-hidden="true"></div> 570 <div class="milestone-card" tabindex="0"> 571 <div class="milestone-date">Dec 2022</div> 572 <h3 class="milestone-title">AAAI 2023 (Oral)</h3> 573 <p class="milestone-desc">Weakly supervised 3D multi-person pose estimation accepted as an Oral at AAAI 2023.</p> 574 <div class="milestone-tags">
575 <span class="chip chip-paper">Publication</span> 576 <span class="chip chip-oral">Oral</span> 577 <a class="chip chip-link" href="https://ojs.aaai.org/index.php/AAAI/article/view/25120" target="_blank" rel="noopener">Paper</a> 578 </div> 579 </div> 580 </div> 581 </div> 582 583 <ul class="milestones-list" hidden=""> 584 <li>Feb 2026 â CVPR 2026: ReMoGen accepted</li> 585 <li>Sep 2025 â Siggraph Asia 2025: SymBridge</li> 586 <li>Oct 2024 â National Scholarship å½å®¶å¥å¦é(Top 1%)</li> 587 <li>Feb 2024 â CVPR 2024: UniPVU-Human accepted</li> 588 <li>Sep 2023 â Started Ph.D. at ShanghaiTech</li> 589 <li>Jul 2023 â ICCV 2023: HuCenLife accepted</li> 590 <li>Dec 2022 â AAAI 2023 Oral: Weakly supervised 3D multi-person pose estimation</li> 591 </ul> 592</div> 593 594<noscript> 595 <style> 596 /* No-JS fallback: show list, hide stairs */ 597 #awards .awards-stairs { display: none !important; } 598 #awards .awards-list[hidden] { display: block !important; } 599 </style> 600</noscript> 601 602<style> 603.milestones-section { 604 /* Default to light theme-friendly values for better contrast */ 605 --ms-bg: var(--global-bg, #f7f7fb); 606 --ms-card: rgba(255, 255, 255, 0.9); 607 --ms-border: rgba(10, 10, 10, 0.08); 608 --ms-text: var(--global-text, #000000); 609 --ms-muted: #000000; 610 --ms-accent: #7c3aed; /* purple */ 611 --ms-accent-2: #06b6d4; /* cyan */ 612 --ms-shadow: 0 10px 30px rgba(0,0,0,0.25); 613 position: relative; 614 margin: 1.2rem 0 2.4rem; 615} 616@media (prefers-color-scheme: dark) { 617 .milestones-section { 618 --ms-bg: #0b0c10; 619 --ms-card: rgba(255, 255, 255, 0.08); 620 --ms-border: rgba(255, 255, 255, 0.18); 621 --ms-text: #e5e7eb; 622 --ms-muted: #a3a3a3; 623 } 624} 625.milestones-controls { 626 display: flex; 627 gap: 0.5rem; 628 margin: 0.5rem 0 1rem; 629} 630.milestones-controls .view-toggle { 631 appearance: none; 632 border: 1px solid var(--ms-border); 633 background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0)); 634 color: var(--ms-text); 635 font: inherit; 636 padding: 0.4rem 0.85rem; 637 border-radius: 999px; 638 cursor: pointer; 639 transition: all .25s ease; 640} 641.milestones-controls .view-toggle:hover { 642 border-color: transparent; 643 box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15); 644 transform: translateY(-1px); 645} 646.milestones-controls .view-toggle.active { 647 background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(6,182,212,.18)); 648 border-color: transparent; 649} 650.milestones-timeline { 651 position: relative; 652 display: grid; 653 grid-template-columns: repeat(2, minmax(0, 1fr)); 654 gap: 2.5rem 2rem; 655 padding: 1rem 0 0 0; 656} 657.milestones-timeline .timeline-line { 658 content: ""; 659 position: absolute; 660 left: 50%; 661 top: 0; 662 bottom: 0; 663 width: 3px; 664 background: linear-gradient(180deg, rgba(124,58,237,.4), rgba(6,182,212,.4)); 665 transform: translateX(-50%); 666 filter: blur(.3px); 667} 668.milestone { 669 position: relative; 670} 671.milestone:nth-child(odd) { 672 grid-column: 1; 673} 674.milestone:nth-child(even) { 675 grid-column: 2; 676} 677.milestone .milestone-card { 678 position: relative; 679 background: var(--ms-card); 680 border: 1px solid var(--ms-border); 681 backdrop-filter: blur(8px); 682 -webkit-backdrop-filter: blur(8px); 683 border-radius: 14px; 684 padding: 1rem 1.1rem 1rem 1.1rem; 685 box-shadow: var(--ms-shadow); 686 transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .6s ease; 687} 688.js-enabled .milestone-card { 689 opacity: 0; 690 transform: translateY(10px); 691} 692.js-enabled .milestone-card.in-view { 693 opacity: 1; 694 transform: translateY(0); 695} 696.milestone .milestone-dot { 697 position: absolute; 698 left: 50%; 699 top: calc(50% - 7px); 700 width: 14px; 701 height: 14px; 702 background: radial-gradient(circle at 35% 35%, #fff 0%, #fff 20%, var(--ms-accent) 60%, var(--ms-accent-2) 100%); 703 border-radius: 50%; 704 box-shadow: 0 0 0 3px rgba(124,58,237,0.25), 0 0 18px rgba(6,182,212,0.5), inset 0 0 6px rgba(255,255,255,0.8); 705 transform: translateX(-50%); 706} 707.milestone .milestone-date { 708 font-size: 0.85rem; 709 color: var(--ms-muted); 710 letter-spacing: .02em; 711 margin-bottom: .25rem; 712} 713.milestone .milestone-title { 714 margin: 0 0 .35rem 0; 715 font-size: 1.1rem; 716 line-height: 1.2; 717 background: linear-gradient(135deg, var(--ms-accent), var(--ms-accent-2)); 718 -webkit-background-clip: text; 719 background-clip: text; 720 color: transparent; 721} 722.milestone .milestone-desc { 723 margin: 0 0 .7rem 0; 724 color: var(--ms-text); 725} 726.milestone .milestone-tags { 727 display: flex; 728 flex-wrap: wrap; 729 gap: .4rem; 730} 731.chip { 732 display: inline-flex; 733 align-items: center; 734 gap: .35rem; 735 font-size: .75rem; 736 padding: .2rem .55rem; 737 border-radius: 999px; 738 border: 1px solid var(--ms-border); 739 background: rgba(255,255,255,.06); 740 color: var(--ms-text); 741 transition: border-color .25s ease, transform .25s ease; 742} 743.milestones-section .chip { color: #000 !important; } 744.chip-award { border-color: rgba(234,179,8,.45) } 745.chip-paper { border-color: rgba(59,130,246,.45) } 746.chip-oral { border-color: rgba(244,63,94,.45) } 747.chip-life { border-color: rgba(34,197,94,.45) } 748.chip-link { 749 text-decoration: none; 750 border-color: rgba(124,58,237,.45); 751} 752.chip-link:hover { transform: translateY(-1px) } 753.milestone:hover .milestone-card { 754 transform: translateY(-2px); 755 border-color: transparent; 756 box-shadow: 0 14px 40px rgba(16, 24, 40, 0.25); 757} 758.milestone:hover .milestone-title { 759 filter: saturate(1.15); 760} 761.milestone:hover .milestone-dot { 762 animation: ms-pulse 1.8s infinite; 763} 764@keyframes ms-pulse { 765 0% { box-shadow: 0 0 0 3px rgba(124,58,237,0.25), 0 0 18px rgba(6,182,212,0.5), inset 0 0 6px rgba(255,255,255,0.8); } 766 70% { box-shadow: 0 0 0 8px rgba(124,58,237,0.12), 0 0 28px rgba(6,182,212,0.7), inset 0 0 6px rgba(255,255,255,0.8); } 767 100% { box-shadow: 0 0 0 3px rgba(124,58,237,0.25), 0 0 18px rgba(6,182,212,0.5), inset 0 0 6px rgba(255,255,255,0.8); } 768} 769@media (max-width: 900px) { 770 .milestones-timeline { 771 grid-template-columns: 1fr; 772 } 773 .milestones-timeline .timeline-line { 774 left: 0.5rem; 775 transform: none; 776 } 777 .milestone { 778 grid-column: 1 !important; 779 } 780 .milestone .milestone-card { 781 padding-left: 2rem; 782 } 783 .milestone .milestone-dot { 784 left: 0.5rem; 785 transform: none; 786 } 787} 788.milestones-list { 789 margin: 0.5rem 0 0 0; 790 padding-left: 1.1rem; 791 color: var(--ms-text); 792} 793.milestones-list li { margin: .35rem 0 } 794</style> 795
796<script> 797(function() { 798 const root = document.getElementById('milestones'); 799 if (!root) return; 800 root.classList.add('js-enabled'); 801 const timeline = root.querySelector('.milestones-timeline'); 802 const list = root.querySelector('.milestones-list'); 803 const buttons = root.querySelectorAll('.view-toggle'); 804 buttons.forEach(btn => { 805 btn.addEventListener('click', () => { 806 buttons.forEach(b => { 807 b.classList.remove('active'); 808 b.setAttribute('aria-selected', 'false'); 809 }); 810 btn.classList.add('active'); 811 btn.setAttribute('aria-selected', 'true'); 812 const view = btn.getAttribute('data-view'); 813 if (view === 'list') { 814 list.hidden = false; 815 timeline.style.display = 'none'; 816 } else { 817 timeline.style.display = 'grid'; 818 list.hidden = true; 819 } 820 }); 821 }); 822 823 // Animate cards on scroll into view 824 if ('IntersectionObserver' in window) { 825 const io = new IntersectionObserver((entries) => { 826 entries.forEach(entry => { 827 if (entry.isIntersecting) { 828 entry.target.classList.add('in-view'); 829 io.unobserve(entry.target); 830 } 831 }); 832 }, { threshold: 0.15 }); 833 root.querySelectorAll('.milestone-card').forEach(el => io.observe(el)); 834 } else { 835 // Fallback: show immediately 836 root.querySelectorAll('.milestone-card').forEach(el => el.classList.add('in-view')); 837 } 838})(); 839</script>
839 840 841<h1 id="ï¸-news">ðï¸ News</h1> 842 843<div id="news" class="news-section"> 844 <p class="news-subtitle">äºèç½ä¸ä¸æç¸å ³çææ°å¨æä¸æ¥é</p> 845 <div class="news-grid"> 846 847 <a class="news-card" href="https://mp.weixin.qq.com/s/7XGxPTjlVqlleos6nfCddQ" target="_blank" rel="noopener"> 848 <div class="news-accent"></div> 849 850 <div class="news-meta"> 851 <span class="news-chip news-source"><i class="fas fa-newspaper"></i> 交åç ç©¶ä¸å¿</span> 852 <span class="news-chip news-date"></span> 853 </div> 854 <h3 class="news-title">è®¡ç®æºå¦é¢äº¤åç ç©¶ä¸å¿å¨æºè½å¶é åå ·èº«æºè½æ¹é¢å徿°è¿å±âââ6ç¯è®ºæè¢«ACM SIGGRAPH Asia 2025ææ¡ä»¶å½ç¨ <i class="fas fa-external-link-alt news-ext"></i></h3> 855 <p class="news-excerpt">2025å¹´8æ10æ¥ï¼ ACM SIGGRAPH Asia 2025å®¡ç¨¿ç»æææï¼ä¸å¿å ±æ4ç¯å¦ç论æå2ç¯åä½è®ºæè·ææ¡ä»¶å½ç¨ï¼å åä½ç°äºå¢é卿ºè½è®¾è®¡ãæ°åå¶é åå ·èº«æºè½é¢åççªåºè¿å±åå½é 妿¯å½±ååã</p> 856 </a> 857 858 <a class="news-card" href="https://mp.weixin.qq.com/s/pcn4n_2stEOQpOFc1Xe4CA" target="_blank" rel="noopener"> 859 <div class="news-accent"></div> 860 861 <div class="news-meta"> 862 <span class="news-chip news-source"><i class="fas fa-newspaper"></i> ä¿¡æ¯å¦é¢</span> 863 <span class="news-chip news-date"></span> 864 </div> 865 <h3 class="news-title">æºè½æç¥ä¸äººæºååæè²é¨éç¹å®éªå®¤å¤ç¯ç§ç ææè¢«ICCV 2023æ¥å <i class="fas fa-external-link-alt news-ext"></i></h3> 866 <p class="news-excerpt">æºè½æç¥ä¸äººæºååæè²é¨éç¹å®éªå®¤ä¾æä¸ç§å¤§ä¿¡æ¯ç§å¦ä¸ææ¯å¦é¢ï¼æ¢ç´¢ä¸ä¸ä»£äººç±»æºè½ä¸æºå¨æºè½çåååå±åç¸äºå¢å¼ºï¼å»ºç«äººç±»æºè½ä¸æºå¨æºè½äº¤äºåä½çæ°åç论åºç¡åå®éªå¹³å°ã</p> 867 </a> 868 869 <a class="news-card" href="https://mp.weixin.qq.com/s?__biz=MzUxMDE4MzAzOA==&mid=2247733792&idx=3&sn=7eca3fd9c77ce28a6c0da3353c018667&chksm=f90bc131ce7c482758df31a14a396bf52002824ed1fa4c85b7695e5faa676d260e3af2b2f0eb&scene=27" target="_blank" rel="noopener"> 870 <div class="news-accent"></div> 871 872 <div class="news-meta"> 873 <span class="news-chip news-source"><i class="fas fa-newspaper"></i> ä¸å½å¾è±¡å¾å½¢å¦å¦ä¼</span> 874 <span class="news-chip news-date"></span> 875 </div> 876 <h3 class="news-title">ä¸å½å¾è±¡å¾å½¢å¦å¦ä¼ä¼åå¤ç¯è®ºæè¢«CVPR 2024å½ç¨ <i class="fas fa-external-link-alt news-ext"></i></h3> 877 <p class="news-excerpt">ä½è ï¼è®¸èºè ¾ï¼ä¸æµ·ç§æå¤§å¦ï¼ï¼å¶æ¯æï¼ä¸æµ·ç§æå¤§å¦ï¼ï¼é©ç¬ï¼ä¸æµ·ç§æå¤§å¦ï¼ï¼ä»»å¥åï¼ä¸æµ·ç§æå¤§å¦ï¼ï¼ç¥æ°é©ï¼é¦æ¸¯ä¸æå¤§å¦ï¼ï¼é©¬ææï¼ä¸æµ·ç§æå¤§å¦ï¼è®ºæç®ä»ï¼ä»¥äººä¸ºä¸å¿çç¹äºè§é¢çè§£ï¼PVUï¼æ¯ä¸ä¸ªæ°å ´çé¢åï¼ä¸æ³¨äºä»äººç±»ç¹äºåºå䏿ååè§£éä¸äººç±»ç¸å ³çç¹å¾ï¼è¿ä¸æ¥æ¨è¿ä¸æ¸¸ä»¥äººç±»ä¸ºä¸å¿çä»»å¡ååºç¨ã以å¾çå·¥ä½é常侧éäºå¤çä¸ä¸ªç¹å®çä»»å¡ï¼ä¾èµäºåºå¤§çæ è®°æ°æ®ï¼æ³åè½åè¾å·®ãèèå°äººå ·æç¹å®çç¹å¾ï¼å æ¬äººä½çç»æè¯ä¹å人ä½è¿å¨çå¨åå¦ï¼æä»¬æåºäºä¸ä¸ªç»ä¸çæ¡æ¶ï¼ä»¥å åå©ç¨å éªç¥è¯ï¼æ¢ç´¢æ°æ®æ¬èº«çåºæç¹å¾ï¼å®ç°å¹¿ä¹ç以人为ä¸å¿çç¹äºè§é¢çè§£ã大éå®éªè¡¨æï¼æä»¬çæ¹æ³å¨åç§ä¸äººç±»ç¸å ³çä»»å¡ä¸åå¾äºæå è¿çæ§è½ï¼å æ¬å¨ä½è¯å«åä¸ç»´å§¿æä¼°è®¡ã</p> 878 </a> 879 880 <a class="news-card" href="https://mp.weixin.qq.com/s/PRl7rCEPc33CaX7bagh95g" target="_blank" rel="noopener"> 881 <div class="news-accent"></div> 882 883 <div class="news-meta"> 884 <span class="news-chip news-source"><i class="fas fa-newspaper"></i> ä¸çæºè½äº§ä¸åè§ä¼</span> 885 <span class="news-chip news-date"></span> 886 </div> 887 <h3 class="news-title">ä¹èèå山大ãéç é¢ï¼äººæºäº¤äºä¸ä»¿çè®ç»ææ°ææç»ä¸å½é é¡¶ä¼/é¡¶å <i class="fas fa-external-link-alt news-ext"></i></h3> 888 <p class="news-excerpt">ä»ç§å¹»çµå½±é温æçå®¶æ¿æºå¨äººï¼å°å®éªå®¤éè½æ¡æã廿çâä¼ä¼´âï¼äººç±»ä¸ç´æ¢¦æ
888³å®ç°çæ£èªç¶ãæç»è¿åç人-æºå ±çã让æºå¨äººå ·å¤èªç¶é«æçæºè½äº¤äºè½åï¼ä»èæ ç¼èå ¥äººç±»çå·¥ä½ä¸çæ´»åºæ¯ï¼ä¹æ¯å®ç°å ·èº«æºè½æ¿æ¯çæ ¸å¿ç®æ ä¹ä¸ãç¶èï¼ç°ææºå¨äººä»¿çå¹³å°ä»åçå¨âé®ç-é¼ æ âææææä½é¶æ®µï¼ç¼ºä¹çå®äººç±»å¨çå®åºæ¯ä¸ä¸èææºå¨äººé¶è·ç¦»ã带åé¦çéç¯äº¤äºã</p> 889 </a> 890 891 <a class="news-card" href="https://mp.weixin.qq.com/s/23SdJofqSOJ0Js6mYyC25w" target="_blank" rel="noopener"> 892 <div class="news-accent"></div> 893 894 <div class="news-meta"> 895 <span class="news-chip news-source"><i class="fas fa-newspaper"></i> ä¿¡æ¯å¦é¢</span> 896 <span class="news-chip news-date"></span> 897 </div> 898 <h3 class="news-title">ç§ç è¿å± | ä¿¡æ¯å¦é¢å¤é¡¹ç§ç ææè¢«AAAI 2023å¹´ä¼å½ç¨ <i class="fas fa-external-link-alt news-ext"></i></h3> 899 <p class="news-excerpt">ä½ä¸ºä¸æµ·ç§æå¤§å¦âæºè½æç¥ä¸äººæºååâæè²é¨éç¹å®éªå®¤çæ ¸å¿ç ç©¶æ¹åä¹ä¸ï¼ä¿¡æ¯å¦é¢è§è§ä¸æ°æ®æºè½ä¸å¿ (VDI Centerï¼é¿æè´åäºæºå¨è§è§ãå¤§æ°æ®ã人工æºè½æ¹åçåæ²¿ååç§ç ç ç©¶ãè¿æï¼ä¸å¿ææå¢éå´ç»äººå·¥æºè½é¢å产åºå¤é¡¹ç§ç ææï¼å¹¶è¢«AAAI å¹´ä¼ï¼AAAI Conference on Artificial Intelligence, AAAI 2023ï¼æ¥æ¶å½ç¨ãAAAI年伿¯ä¸å½è®¡ç®æºå¦ä¼æ¨èçCCF-A类人工æºè½é¢å妿¯ä¼è®®ã</p> 900 </a> 901 902 <a class="news-card" href="https://mp.weixin.qq.com/s/itvLyIkOiZMjY-1A68bgSg" target="_blank" rel="noopener"> 903 <div class="news-accent"></div> 904 905 <div class="news-meta"> 906 <span class="news-chip news-source"><i class="fas fa-newspaper"></i> KLIP-HuMaCoæè²é¨éç¹å®éªå®¤</span> 907 <span class="news-chip news-date"></span> 908 </div> 909 <h3 class="news-title">æºè½æç¥ä¸äººæºååæè²é¨éç¹å®éªå®¤9ç¯è®ºæå¨ICCV 2023å表 <i class="fas fa-external-link-alt news-ext"></i></h3> 910 <p class="news-excerpt">è¿æ¥ï¼ä¸æµ·ç§æå¤§å¦æºè½æç¥ä¸äººæºååæè²é¨éç¹å®éªå®¤å¨å½é é¡¶çº§å¦æ¯ä¼è®®International Conference on Computer Visionï¼ICCVï¼ä¸å表9ç¯è®ºæã</p> 911 </a> 912 913 <a class="news-card" href="https://mp.weixin.qq.com/s/hVnvGFJB_kYyfxMbnxM5bw" target="_blank" rel="noopener"> 914 <div class="news-accent"></div> 915 916 <div class="news-meta"> 917 <span class="news-chip news-source"><i class="fas fa-newspaper"></i> ææ¯è½¬ç§»åå ¬å®¤</span> 918 <span class="news-chip news-date"></span> 919 </div> 920 <h3 class="news-title">ä¸ç§å¤§ç¬¬å å±åæ°åä¸å¤§ä¼ç¬¬ä¸åºç«èµæåä¸¾è¡ <i class="fas fa-external-link-alt news-ext"></i></h3> 921 <p class="news-excerpt">缺é·ä¸ä¸å®æ¯ç¼ºé·ââå ¨æ°è¿ç¤æ å¿ç©å©åç²¾åå»çè¦æ §åãåæ¶¦ãæ²åç ãå´å®¸æï¼ä¸æµ·ç§æå¤§å¦çå½ç§å¦ä¸ææ¯å¦é¢ï¼è®¸èºè ¾ï¼ä¸æµ·ç§æå¤§å¦ä¿¡æ¯ç§å¦ä¸ææ¯å¦é¢</p> 922 </a> 923 924 <a class="news-card" href="https://sist.shanghaitech.edu.cn/2023/1023/c2864a1083960/page.htm" target="_blank" rel="noopener"> 925 <div class="news-accent"></div> 926 927 <div class="news-meta"> 928 <span class="news-chip news-source"><i class="fas fa-newspaper"></i> ä¸ç§å¤§å®ç½</span> 929 <span class="news-chip news-date"></span> 930 </div> 931 <h3 class="news-title">马ææè¯¾é¢ç»ä¸å¹çï¼åä¸ï¼ä¸è®¸èºè ¾ï¼ç ä¸ï¼2023å¹´10æåå ICCV2023ä¼è®®å¹¶åæµ·æ¥å±ç¤º <i class="fas fa-external-link-alt news-ext"></i></h3> 932 <p class="news-excerpt">è¿æ¬¡å°å顾æå»æ³å½å·´é»åå ICCVè®¡ç®æºè§è§é¡¶çº§ä¼è®®çç»åï¼æä¸é©¬ææèå¸ã课é¢ç»å¦å¼è®¸èºè ¾åå¦å¨ä¼åºè¿è¡äºå ³äºä»¥äººä¸ºä¸å¿çåºæ¯çè§£çç 究项ç®çæµ·æ¥å±ç¤ºââHuCenLife课é¢ä»ç»ãæè¦æè°¢æç导å¸åå®éªå®¤ï¼å ä¸ºæ£æ¯ä»ä»¬çæ¯æåé¼å±ï¼æææäºæºä¼åå è¿ä¸ªé¡¶çº§è®¡ç®æºè§è§ä¼è®®ãICCVæ¯è®¡ç®æºè§è§é¢åççä¼ï¼èéäºä¸çåå°æä¼ç§çç ç©¶è åä»ä¸è ãè½å¤å¨è¿ä¸ªèå°ä¸å±ç¤ºèªå·±çç ç©¶ææï¼å¯¹æèè¨æ¯ä¸æ¬¡è«å¤§çè£å¹¸ã</p> 933 </a> 934 935 <a class="news-card" href="http://china3dv.csig.org.cn/2024/ShowPoster.html" target="_blank" rel="noopener"> 936 <div class="news-accent"></div> 937 938 <div class="news-meta">
939 <span class="news-chip news-source"><i class="fas fa-newspaper"></i> ä¸å½ä¸ç»´è§è§å¤§ä¼å®ç½</span> 940 <span class="news-chip news-date"></span> 941 </div> 942 <h3 class="news-title">许èºè ¾åå ä¸å½ä¸ç»´è§è§å¤§ä¼è¿è¡æµ·æ¥å±è§ <i class="fas fa-external-link-alt news-ext"></i></h3> 943 <p class="news-excerpt">Poster ID: 42 许èºè ¾ CVPR 2024 䏿µ·ç§æå¤§å¦</p> 944 </a> 945 946 <a class="news-card" href="https://mp.weixin.qq.com/s/R2RXKI76ggAGzPomssCZTQ" target="_blank" rel="noopener"> 947 <div class="news-accent"></div> 948 949 <div class="news-meta"> 950 <span class="news-chip news-source"><i class="fas fa-newspaper"></i> å¾®ä¿¡å ¬ä¼å·</span> 951 <span class="news-chip news-date"></span> 952 </div> 953 <h3 class="news-title">æºå¨äººç¸å ³å¦æ¯éé <i class="fas fa-external-link-alt news-ext"></i></h3> 954 <p class="news-excerpt">ã11ãSymbioSimï¼äººæºäº¤äºååæç»å¦ä¹ ç人å¨ç¯æ¨¡æå¹³å°é¾æ¥ï¼https://arxiv.org/abs/2502.07358</p> 955 </a> 956 957 </div> 958</div> 959 960<style> 961/* ============== News (scoped) ============== */ 962.news-section { 963 /* Default to light theme-friendly values for better contrast */ 964 --nw-bg: var(--global-bg, #f7f7fb); 965 --nw-card: rgba(255, 255, 255, 0.92); 966 --nw-border: rgba(10, 10, 10, 0.08); 967 --nw-text: var(--global-text, #000000); 968 --nw-muted: #000000; 969 --nw-ac1: #8b5cf6; /* purple */ 970 --nw-ac2: #06b6d4; /* cyan */ 971 --nw-shadow: 0 18px 50px rgba(0,0,0,0.35); 972 position: relative; 973 margin: 1.2rem 0 2.4rem; 974 color: var(--nw-text); 975} 976@media (prefers-color-scheme: dark) { 977 .news-section { 978 --nw-bg: #0b0c10; 979 --nw-card: rgba(255, 255, 255, 0.06); 980 --nw-border: rgba(255, 255, 255, 0.12); 981 --nw-text: #e5e7eb; 982 --nw-muted: #a3a3a3; 983 } 984} 985.news-subtitle { 986 margin: 0.25rem 0 0.8rem; 987 font-size: 0.95rem; 988 color: var(--nw-muted); 989} 990.news-grid { 991 display: grid; 992 grid-template-columns: repeat(3, minmax(0, 1fr)); 993 gap: 1rem; 994} 995@media (max-width: 1100px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } 996@media (max-width: 700px) { .news-grid { grid-template-columns: 1fr; } } 997 998.news-card { 999 position: relative; 1000 display: block; 1001 text-decoration: none; 1002 color: var(--nw-text); 1003 background: var(--nw-card); 1004 border: 1px solid var(--nw-border); 1005 border-radius: 16px; 1006 overflow: hidden; 1007 box-shadow: var(--nw-shadow); 1008 transform-style: preserve-3d; 1009 will-change: transform, box-shadow, opacity; 1010 outline: none; 1011} 1012.news-card, .news-card * { transition: color .25s ease, background .25s ease, border-color .25s ease; } 1013.js-enabled .news-card { 1014 opacity: 0; 1015 transform: translateY(14px) scale(.985); 1016 transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease, opacity .65s ease; 1017 transition-delay: calc(var(--d, 0) * 60ms); 1018} 1019.js-enabled .news-card.in-view { opacity: 1; transform: none; } 1020.news-card:hover, .news-card:focus-visible { 1021 transform: translateY(-3px); 1022 border-color: transparent; 1023 box-shadow: 0 18px 60px rgba(16,24,40,.28); 1024} 1025 1026.news-accent { 1027 position: absolute; inset: -40% -30% -60% -30%; pointer-events: none; z-index: 0; 1028 background:
1029 radial-gradient(600px 220px at var(--mx, 50%) var(--my, 50%), rgba(139,92,246,.28), transparent 60%), 1030 radial-gradient(600px 220px at calc(var(--mx, 50%) + 140px) calc(var(--my, 50%) + 40px), rgba(6,182,212,.24), transparent 65%); 1031 filter: blur(22px) saturate(130%); 1032 opacity: 0; transition: opacity .28s ease; 1033} 1034.news-card:hover .news-accent, .news-card:focus-visible .news-accent { opacity: 1; } 1035 1036.news-thumb { 1037 position: relative; z-index: 1; 1038 aspect-ratio: 16 / 9; 1039 background-size: cover; 1040 background-position: center; 1041 transform: translate3d(calc((var(--px, .5) - .5) * 10px), calc((var(--py, .5) - .5) * 10px), 0) scale(1.06); 1042 transition: transform .25s ease; 1043} 1044.news-meta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .45rem; padding: .65rem .9rem 0; } 1045.news-chip { 1046 display: inline-flex; align-items: center; gap: .35rem; 1047 font-size: .75rem; padding: .2rem .55rem; border-radius: 999px; 1048 border: 1px solid var(--nw-border); background: rgba(255,255,255,.06); color: var(--nw-text); 1049} 1050.news-section .news-chip { color: #000 !important; } 1051.news-source { border-color: rgba(124,58,237,.45); } 1052.news-date { border-color: rgba(59,130,246,.45); } 1053.news-title { 1054 position: relative; z-index: 1; margin: .4rem .9rem; display: flex; align-items: center; gap: .35rem; 1055 font-size: 1.02rem; line-height: 1.25; 1056 background: linear-gradient(135deg, var(--nw-ac1), var(--nw-ac2)); 1057 -webkit-background-clip: text; background-clip: text; color: transparent; 1058} 1059.news-ext { font-size: .85em; opacity: .8; } 1060.news-excerpt { 1061 position: relative; z-index: 1; margin: 0 .9rem .95rem; color: var(--nw-text); 1062 line-height: 1.45; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-4px); 1063 transition: max-height .35s ease, opacity .35s ease, transform .35s ease; 1064} 1065.news-card:hover .news-excerpt, .news-card:focus-within .news-excerpt { max-height: 220px; opacity: 1; transform: translateY(0); } 1066 1067@media (prefers-reduced-motion: reduce) { 1068 .js-enabled .news-card { opacity: 1; transform: none; transition: none; } 1069 .news-card, .news-card * { transition: none !important; } 1070 .news-excerpt { max-height: none; opacity: 1; transform: none; } 1071} 1072</style> 1073
1074<script> 1075(function() { 1076 const root = document.getElementById('news'); 1077 if (!root) return; 1078 root.classList.add('js-enabled'); 1079 const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; 1080 1081 // Stagger and reveal on enter 1082 const cards = Array.from(root.querySelectorAll('.news-card')); 1083 cards.forEach((card, idx) => card.style.setProperty('--d', String(idx))); 1084 if ('IntersectionObserver' in window) { 1085 const io = new IntersectionObserver((entries) => { 1086 entries.forEach(entry => { 1087 if (entry.isIntersecting) { 1088 entry.target.classList.add('in-view'); 1089 io.unobserve(entry.target); 1090 } 1091 }); 1092 }, { threshold: 0.2 }); 1093 cards.forEach(c => io.observe(c)); 1094 } else { 1095 cards.forEach(c => c.classList.add('in-view')); 1096 } 1097 1098 // Cursor-reactive aurora + subtle tilt/parallax 1099 if (!reduced) { 1100 cards.forEach(card => { 1101 card.addEventListener('mousemove', (e) => { 1102 const r = card.getBoundingClientRect(); 1103 const x = e.clientX - r.left; 1104 const y = e.clientY - r.top; 1105 const px = x / r.width; 1106 const py = y / r.height; 1107 card.style.setProperty('--mx', x + 'px'); 1108 card.style.setProperty('--my', y + 'px'); 1109 card.style.setProperty('--px', px.toFixed(4)); 1110 card.style.setProperty('--py', py.toFixed(4)); 1111 const rx = (py - 0.5) * -8; // natural feel: invert X rotation 1112 const ry = (px - 0.5) * 10; 1113 card.style.transform = `perspective(900px) rotateX(${rx.toFixed(2)}deg) rotateY(${ry.toFixed(2)}deg)`; 1114 }); 1115 card.addEventListener('mouseleave', () => { 1116 card.style.transform = ''; 1117 card.style.removeProperty('--mx'); 1118 card.style.removeProperty('--my'); 1119 card.style.removeProperty('--px'); 1120 card.style.removeProperty('--py'); 1121 }); 1122 }); 1123 } 1124})(); 1125</script>
1125 1126 1127<h1 id="publications">ð Publications</h1> 1128<!-- <div class='paper-box'><div class='paper-box-image'><div><div class="badge">AAAI 2025</div><img src='/images/IDKB.png' alt="sym" width="100%"></div></div> 1129<div class='paper-box-text' markdown="1"> 1130 1131[Towards Practical Human Motion Prediction with LiDAR Point Clouds](https://arxiv.org/abs/2409.02914) 1132 1133Yuhang Lu, **Yichen Yao**, Jiadong Tu, Jiangnan Shao, Yuexin Ma, Xinge Zhu 1134</div> 1135</div> 1136 1137<div class='paper-box'><div class='paper-box-image'><div><div class="badge">ACM Multimedia 2024</div><img src='/images/MotionPrediction.jpg' alt="sym" width="100%"></div></div> 1138<div class='paper-box-text' markdown="1"> 1139 1140[Towards Practical Human Motion Prediction with LiDAR Point Clouds](https://dl.acm.org/doi/abs/10.1145/3664647.3680720) 1141 1142Xiao Han, Yiming Ren, **Yichen Yao**, Yujing Sun, Yuexin Ma 1143</div> 1144</div> 1145 1146<div class='paper-box'><div class='paper-box-image'><div><div class="badge">ECCV 2024</div><img src='/images/LiveHPS++.jpg' alt="sym" width="100%"></div></div> 1147<div class='paper-box-text' markdown="1"> 1148 1149[LiveHPS++: Robust and Coherent Motion Capture in Dynamic Free Environment](https://arxiv.org/abs/2407.09833) 1150 1151Yiming Ren, Xiao Han, **Yichen Yao**, Xiaoxiao Long, Yujing Sun, Yuexin Ma 1152</div> 1153</div> 1154 1155<div class='paper-box'><div class='paper-box-image'><div><div class="badge">IJCAI 2024</div><img src='/images/RealDex.jpg' alt="sym" width="100%"></div></div> 1156<div class='paper-box-text' markdown="1"> 1157 1158[RealDex: Towards Human-like Grasping for Robotic Dexterous Hand](https://arxiv.org/abs/2402.13853) 1159 1160Yumeng Liu, Yaxun Yang, Youzhuo Wang, Xiaofei Wu, Jiamin Wang, **Yichen Yao**, Sören Schwertfeger, Sibei Yang, Wenping Wang, Jingyi Yu, Xuming He, Yuexin Ma 1161</div> 1162</div> 1163 1164<div class='paper-box'><div class='paper-box-image'><div><div class="badge">CVPR 2024</div><img src='/images/HUNTER.jpg' alt="sym" width="100%"></div></div> 1165<div class='paper-box-text' markdown="1"> 1166 1167[HUNTER: Unsupervised Human-centric 3D Detection via Transferring Knowledge from Synthetic Instances to Real Scenes](https://arxiv.org/abs/2403.02769) 1168 1169**Yichen Yao**, Zimo Jiang, Yujing Sun, Zhencai Zhu, Xinge Zhu, Runnan Chen, Yuexin Ma 1170</div> 1171</div> --> 1172 1173<div class="paper-box"><div class="paper-box-image"><a class="paper-box-link" href="https://4dvlab.github.io/project_page/remogen/" target="_blank" rel="noopener"><div class="badge">CVPR 2026</div><img src="/images/remogen/teaser-1.png" alt="ReMoGen overview" width="100%" /></a></div> 1174<div class="paper-box-text"> 1175 1176 <p><a href="https://4dvlab.github.io/project_page/remogen/">ReMoGen: Real-time Human Interaction-to-Reaction Generation via Modular Learning from Diverse Data</a></p> 1177 1178 <p>Yaoqin Ye, <strong>Yiteng Xu</strong>, Qin Sun, Xinge Zhu, Yujing Sun, Yuexin Ma</p> 1179 1180 <p>The IEEE / CVF Computer Vision and Pattern Recognition Conference (<strong>CVPR</strong>), 2026</p> 1181 1182 <p>ReMoGen is a modular framework for real-time interaction-to-reaction motion generation, combining a universal motion prior, independently trained Meta-Interaction modules, and frame-wise segment refinement across human-human and human-scene settings.</p> 1183 </div> 1184</div> 1185 1186<div class="paper-box"><div class="paper-box-image"><a class="paper-box-link" href="https://irc-vitahome.github.io/SymBridge/" target="_blank" rel="noopener"><div class="badge">SIGGRAPH Asia 2025</div><img src="/images/SymBridge.png" alt="sym" width="100%" /></a></div> 1187<div class="paper-box-text"> 1188 1189 <p><a href="https://irc-vitahome.github.io/SymBridge/">SymBridge: A Human-in-the-Loop Cyber-Physical Interactive System for Adaptive Human-Robot Symbiosis</a></p> 1190 1191 <p>Haoran Chen*, <strong>Yiteng Xu*</strong>, Yiming Ren, Yaoqin Ye, Xinran Li, Ning Ding, Yuxuan Wu, Yaoze Liu, Peishan Cong, Ziyi Wang, Bushi Liu, Yuhan Chen, Zhiyang Dou, Xiaokun Leng, Manyi Liâ , Yuexin Maâ , Changhe Tu</p> 1192 1193 <p>ACM SIGGRAPH Asia, 2025</p> 1194 </div> 1195</div> 1196 1197<div class="video-wrapper" style="position: relative; width: 100%; max-width: 960px; margin: 0.6rem auto 1.2rem; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 36px rgba(16,24,40,.18); border: 1px solid rgba(10,10,10,0.08); background: rgba(255,255,255,0.85);">
1198 <video class="fh-publication-video" data-fh-autoplay-video="" autoplay="" muted="" loop="" playsinline="" controls="" preload="auto" poster="/images/SymBridge.png" style="display: block; width: 100%; height: auto;" aria-label="SymBridge demo video"> 1199 <source src="/videos/SymBridge.mp4" type="video/mp4" /> 1200 æ¨çæµè§å¨ä¸æ¯æè§é¢æ ç¾ãæ¨å¯ä»¥å¨æ¤å¤ä¸è½½è§é¢ï¼ 1201 <a href="/videos/SymBridge.mp4">SymBridge.mp4</a> 1202 </video> 1203</div> 1204 1205<div class="paper-box"><div class="paper-box-image"><a class="paper-box-link" href="https://openaccess.thecvf.com/content/CVPR2024/html/Xu_A_Unified_Framework_for_Human-centric_Point_Cloud_Video_Understanding_CVPR_2024_paper.html" target="_blank" rel="noopener"><div class="badge">CVPR 2024</div><img src="/images/unified.png" alt="sym" width="100%" /></a></div> 1206<div class="paper-box-text"> 1207 1208 <p><a href="https://openaccess.thecvf.com/content/CVPR2024/html/Xu_A_Unified_Framework_for_Human-centric_Point_Cloud_Video_Understanding_CVPR_2024_paper.html">A Unified Framework for Human-centric Point Cloud Video Understanding</a></p> 1209 1210 <p><strong>Yiteng Xu</strong>, Kecheng Ye, Xiao Han, Yiming Ren, Xinge ZHU, Yuexin Ma</p> 1211 1212 <p>The IEEE / CVF Computer Vision and Pattern Recognition Conference (<strong>CVPR</strong>), 2024</p> 1213 </div> 1214</div> 1215 1216<div class="paper-box"><div class="paper-box-image"><a class="paper-box-link" href="https://openaccess.thecvf.com/content/ICCV2023/html/Xu_Human-centric_Scene_Understanding_for_3D_Large-scale_Scenarios_ICCV_2023_paper.html" target="_blank" rel="noopener"><div class="badge">ICCV 2023</div><img src="/images/HuCenLife.png" alt="sym" width="100%" /></a></div> 1217<div class="paper-box-text"> 1218 1219 <p><a href="https://openaccess.thecvf.com/content/ICCV2023/html/Xu_Human-centric_Scene_Understanding_for_3D_Large-scale_Scenarios_ICCV_2023_paper.html">Human-centric Scene Understanding for 3D Large-scale Scenarios</a></p> 1220 1221 <p><strong>Yiteng Xu*</strong>, Peishan Cong*, Yichen Yao*, Runnan Chen, Yuenan Hou, Xinge Zhu, Xuming He, Jingyi Yu, Yuexin Ma</p> 1222 1223 <p>
1223In IEEE/CVF International Conference on Computer Vision (<strong>ICCV</strong>), 2023</p> 1224 </div> 1225</div> 1226 1227<div class="paper-box"><div class="paper-box-image"><a class="paper-box-link" href="https://ojs.aaai.org/index.php/AAAI/article/view/25120" target="_blank" rel="noopener"><div class="badge">AAAI 2023</div><img src="/images/fusionpose.png" alt="sym" width="100%" /></a></div> 1228<div class="paper-box-text"> 1229 1230 <p><a href="https://ojs.aaai.org/index.php/AAAI/article/view/25120">Weakly Supervised 3D Multi-person Pose Estimation for Large-scale Scenes based on Monocular Camera and Single LiDAR</a></p> 1231 1232 <p>Peishan Cong*, <strong>Yiteng Xu*</strong>, Yiming Ren, Juze Zhang, Lan Xu, Jingya Wang, Jingyi Yu, Yuexin Ma</p> 1233 1234 <p>Thirty-Seventh AAAI Conference on Artificial Intelligence (<strong>AAAI</strong>), Oral, 2023</p> 1235 </div> 1236</div> 1237 1238<h1 id="patents">ð Patents</h1> 1239 1240<div class="paper-box patent-box"> 1241 <div class="paper-box-image"> 1242 <div> 1243 <div class="badge">Patent 2025</div> 1244 <img src="/assets/files/Patents.jpg" alt="Patent front page" width="100%" /> 1245 </div> 1246 </div> 1247 <div class="paper-box-text"> 1248 <h3 style="margin: 0 0 .4rem 0;"><a href="http://epub.cnipa.gov.cn/patent/CN120412083A" target="_blank" rel="noopener">General-purpose Dynamic Point Cloud Understanding Model and Multi-task Collaborative Optimization System</a></h3> 1249 <div class="patent-meta"> 1250 <div class="pm"><strong>Publication No.</strong><span>CN120412083A</span></div> 1251 <!-- <div class="pm"><strong>Application No.</strong><span>2025104473784</span></div> --> 1252 <!-- <div class="pm"><strong>Type</strong><span>Invention patent application</span></div> --> 1253 <!-- <div class="pm"><strong>Assignee</strong><span>ShanghaiTech University</span></div> --> 1254 <!-- <div class="pm"><strong>Inventors</strong><span>Yiteng Xu; Yuexin Ma</span></div> --> 1255 <!-- <div class="pm"><strong>IPC</strong><span>G06V40/20; G06V20/64; G06V20/70; G06V10/26; G06V10/44; G06V10/52; G06V10/54; G06V10/80; G06V10/82; G06N3/0455</span></div> --> 1256 </div> 1257 <p class="patent-abstract"> 1258 This invention discloses a general-purpose dynamic point cloud understanding model with a multi-task collaborative optimization system featuring a human-knowledge branch and a local-detail branch. It advances multi-level feature fusion for 3D human point clouds, optimizes dynamic temporal sequence modeling, and improves cross-task generalization. Applicable to intelligent surveillance, VR/AR, humanârobot interaction, autonomous driving, and sports analytics, providing core algorithms for real-time, precise understanding of human behavior and state. 1259 </p> 1260 1261 </div> 1262</div> 1263 1264<style> 1265/* ============== Patents (scoped) ============== */ 1266.patent-box { 1267 position: relative; 1268 padding: 1rem 1rem; 1269 border: 1px solid rgba(10,10,10,0.08); 1270 border-radius: 14px; 1271 background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.96)); 1272 box-shadow: 0 10px 30px rgba(16,24,40,.10); 1273 overflow: hidden; 1274 /* entrance animation */ 1275 opacity: 0; 1276 transform: translateY(10px); 1277 animation: patent-fade-in .8s cubic-bezier(.2,.6,.2,1) .05s forwards; 1278 transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; 1279} 1280@media (prefers-color-scheme: dark) { 1281 .patent-box { 1282 border-color: rgba(255,255,255,0.18); 1283 background: rgba(255,255,255,0.06); 1284 box-shadow: 0 16px 44px rgba(0,0,0,.45); 1285 } 1286} 1287.patent-box::before { 1288 content: ""; 1289 position: absolute; inset: -40% -20% auto -20%; height: 180px; 1290 background:
1291 radial-gradient(600px 220px at 20% 50%, rgba(124,58,237,.20), transparent 60%), 1292 radial-gradient(600px 220px at 70% 50%, rgba(6,182,212,.18), transparent 65%); 1293 filter: blur(22px) saturate(130%); 1294 pointer-events: none; 1295 animation: aurora-drift 14s ease-in-out infinite alternate; 1296} 1297.patent-box:hover, .patent-box:focus-within { 1298 transform: translateY(-3px); 1299 border-color: transparent; 1300 box-shadow: 0 18px 48px rgba(16,24,40,.18); 1301} 1302.patent-box .paper-box-image img { 1303 border-radius: 12px; 1304 box-shadow: 0 10px 28px rgba(16,24,40,.12); 1305 transition: transform .28s ease, box-shadow .28s ease; 1306} 1307.patent-box .paper-box-text { 1308 padding: .5rem 1rem; 1309} 1310.patent-box .paper-box-image { opacity: 0; transform: translateX(-8px); animation: patent-fade-in .8s ease .12s forwards; } 1311.patent-box .paper-box-text { opacity: 0; transform: translateX(8px); animation: patent-fade-in .8s ease .20s forwards; } 1312.patent-box:hover .paper-box-image img { transform: scale(1.015); box-shadow: 0 14px 36px rgba(16,24,40,.18); } 1313.patent-meta { display: grid; grid-template-columns: 1fr; gap: .35rem; margin: .6rem 0 .2rem; font-size: .95rem; } 1314.patent-meta .pm { display: grid; grid-template-columns: 140px 1fr; gap: .6rem; align-items: start; } 1315.patent-abstract { margin-top: .5rem; line-height: 1.55; } 1316.patent-actions { margin-top: .6rem; } 1317.patent-actions a { display: inline-block; padding: .28rem .65rem; border-radius: 999px; border: 1px solid rgba(124,58,237,.35); text-decoration: none; color: inherit; background: rgba(255,255,255,.06); } 1318.patent-actions a:hover { transform: translateY(-1px); border-color: transparent; box-shadow: 0 8px 26px rgba(124,58,237,.22); } 1319 1320/* keyframes */ 1321@keyframes patent-fade-in { 1322 from { opacity: 0; transform: translateY(10px); } 1323 to { opacity: 1; transform: translateY(0); } 1324} 1325@keyframes aurora-drift { 1326 from { transform: translateY(0); filter: blur(22px) saturate(130%); } 1327 to { transform: translateY(-6px); filter: blur(24px) saturate(140%); } 1328} 1329 1330/* accessibility & reduced motion */ 1331.patent-box:focus-within { outline: 2px solid rgba(124,58,237,.28); outline-offset: 2px; } 1332@media (prefers-reduced-motion: reduce) { 1333 .patent-box, .patent-box .paper-box-image, .patent-box .paper-box-text { animation: none !important; opacity: 1 !important; transform: none !important; } 1334 .patent-box::before { animation: none !important; } 1335 .patent-box *, .patent-box { transition: none !important; } 1336} 1337</style> 1338 1339<h1 id="ï¸-technical-skills--expertise">ð ï¸ Technical Skills & Expertise</h1> 1340 1341<div id="skills" class="skills-section" aria-label="Technical Skills & Expertise"> 1342 <div class="skills-aurora" aria-hidden="true"></div> 1343 1344 <div class="skills-header"> 1345 <div class="skills-title-wrap"> 1346 <span class="skills-kicker">Designed for curiosity</span> 1347 <h3 class="skills-title">Interactive Skills Studio</h3> 1348 </div> 1349 <div class="skills-modes" role="tablist" aria-label="Skills view selector"> 1350 <button class="skills-mode active" role="tab" aria-selected="true" data-mode="gallery">Gallery</button> 1351 <button class="skills-mode" role="tab" aria-selected="false" data-mode="constellation">Constellation</button> 1352 </div> 1353 </div> 1354 1355 <div class="skills-grid" data-view="gallery"> 1356 <section class="skills-rings" aria-label="Core proficiencies" role="list"> 1357 <div class="ring" role="listitem" aria-label="Python â Expert" data-percent="95" style="--p: 0"> 1358 <div class="ring-arc"></div> 1359 <div class="ring-core"> 1360 <span class="ring-label">Python</span> 1361 <span class="ring-note">Expert</span> 1362 </div> 1363 </div> 1364 <div class="ring" role="listitem" aria-label="PyTorch â Expert" data-percent="92" style="--p: 0"> 1365 <div class="ring-arc"></div> 1366 <div class="ring-core"> 1367 <span class="ring-label">PyTorch</span> 1368 <span class="ring-note">Expert</span> 1369 </div> 1370 </div> 1371 <div class="ring" role="listitem" aria-label="3D Computer Vision â Expert" data-percent="93" style="--p: 0"> 1372 <div class="ring-arc"></div> 1373 <div class="ring-core">
1374 <span class="ring-label">3D CV</span> 1375 <span class="ring-note">Expert</span> 1376 </div> 1377 </div> 1378 <div class="ring" role="listitem" aria-label="LiDARâCamera Fusion â Advanced" data-percent="88" style="--p: 0"> 1379 <div class="ring-arc"></div> 1380 <div class="ring-core"> 1381 <span class="ring-label">LiDAR à Cam</span> 1382 <span class="ring-note">Advanced</span> 1383 </div> 1384 </div> 1385 <div class="ring" role="listitem" aria-label="Linux & DevOps â Advanced" data-percent="90" style="--p: 0"> 1386 <div class="ring-arc"></div> 1387 <div class="ring-core"> 1388 <span class="ring-label">Linux · DevOps</span> 1389 <span class="ring-note">Advanced</span> 1390 </div> 1391 </div> 1392 <div class="ring" role="listitem" aria-label="Parametric Human Modeling â Advanced" data-percent="85" style="--p: 0"> 1393 <div class="ring-arc"></div> 1394 <div class="ring-core"> 1395 <span class="ring-label">SMPL/SMPL-X</span> 1396 <span class="ring-note">Advanced</span> 1397 </div> 1398 </div> 1399 </section> 1400 1401 <section class="skills-cards" aria-label="Skill categories"> 1402 <article class="skill-card" tabindex="0"> 1403 <div class="card-accent"></div> 1404 <header class="card-head"> 1405 <svg class="card-icon" width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M3 5h8v6H3zM13 5h8v4h-8zM3 13h8v6H3zM13 11h8v8h-8z" stroke="currentColor" stroke-width="1.5" /></svg> 1406 <h4 class="card-title">Programming & Frameworks</h4> 1407 </header> 1408 <div class="card-body"> 1409 <div class="chip-row"> 1410 <span class="skill-chip chip-hot">Python</span> 1411 <span class="skill-chip chip-hot">PyTorch</span> 1412 <span class="skill-chip">Bash</span> 1413 <span class="skill-chip">NumPy</span> 1414 <span class="skill-chip">Pandas</span> 1415 <span class="skill-chip">SciPy</span> 1416 <span class="skill-chip">Scikit-learn</span> 1417 <span class="skill-chip">Matplotlib</span> 1418 </div> 1419 <div class="card-more" hidden=""> 1420 <ul class="mini-list"> 1421 <li>Algorithm design & model implementation</li> 1422 <li>Large-scale data processing & analysis</li> 1423 <li>Reproducible training pipelines</li> 1424 </ul> 1425 </div> 1426 </div> 1427 <button class="card-toggle" aria-expanded="false" aria-controls="pf-more">More</button> 1428 </article> 1429 1430 <article class="skill-card" tabindex="0"> 1431 <div class="card-accent"></div> 1432 <header class="card-head"> 1433 <svg class="card-icon" width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 3l3 6 6 .9-4.5 4.2 1.2 6.9L12 17l-5.7 4 1.2-6.9L3 9.9 9 9z" stroke="currentColor" stroke-width="1.5" /></svg> 1434 <h4 class="card-title">Domain & Toolchain</h4> 1435 </header> 1436 <div class="card-body"> 1437 <div class="chip-row"> 1438 <span class="skill-chip chip-hot">3D Computer Vision</span> 1439 <span class="skill-chip">SMPL/SMPL-X</span> 1440 <span class="skill-chip">Open3D</span> 1441 <span class="skill-chip">PCL</span> 1442 <span class="skill-chip">MeshLab</span> 1443 <span class="skill-chip">LiDARâCamera Fusion</span> 1444 <span class="skill-chip">Human Motion</span> 1445 </div> 1446 <div class="card-more" hidden=""> 1447 <ul class="mini-list"> 1448 <li>Human-centric scene understanding</li> 1449 <li>Motion capture, mesh recovery & interaction</li> 1450 <li>Multi-humanâMulti-robot interaction modeling</li> 1451 </ul> 1452 </div> 1453 </div> 1454 <button class="card-toggle" aria-expanded="false" aria-controls="dt-more">More</button> 1455 </article> 1456 1457 <article class="skill-card" tabindex="0"> 1458 <div class="card-accent"></div> 1459 <header class="card-head"> 1460 <svg class="card-icon" width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h10" stroke="currentColor" stroke-width="1.5" /></svg> 1461 <h4 class="card-title">Systems & Methods</h4> 1462 </header> 1463 <div class="card-body"> 1464 <div class="chip-row">
1465 <span class="skill-chip">Linux</span> 1466 <span class="skill-chip">Git / GitHub</span> 1467 <span class="skill-chip">Slurm</span> 1468 <span class="skill-chip">Docker</span> 1469 <span class="skill-chip">LaTeX</span> 1470 <span class="skill-chip">Draw.io</span> 1471 <span class="skill-chip">Human-in-the-Loop</span> 1472 <span class="skill-chip">Wizard of Oz</span> 1473 </div> 1474 <div class="card-more" hidden=""> 1475 <ul class="mini-list"> 1476 <li>Cluster scheduling & experiment orchestration</li> 1477 <li>High-quality documentation & diagrams</li> 1478 <li>Rigorous user study design</li> 1479 </ul> 1480 </div> 1481 </div> 1482 <button class="card-toggle" aria-expanded="false" aria-controls="sm-more">More</button> 1483 </article> 1484 </section> 1485 </div> 1486 1487 <div class="skills-constellation" hidden="" aria-live="polite"> 1488 <div class="float-chips"> 1489 <span class="float-chip fc-1">3D Computer Vision</span> 1490 <span class="float-chip fc-2">Robotics</span> 1491 <span class="float-chip fc-3">Embodied AI</span> 1492 <span class="float-chip fc-4">HumanâRobot Interaction</span> 1493 <span class="float-chip fc-5">LiDAR · Camera</span> 1494 <span class="float-chip fc-6">SMPL / SMPL-X</span> 1495 <span class="float-chip fc-7">Open3D</span> 1496 <span class="float-chip fc-8">PCL</span> 1497 <span class="float-chip fc-9">Docker</span> 1498 <span class="float-chip fc-10">Linux</span> 1499 <span class="float-chip fc-11">PyTorch</span> 1500 <span class="float-chip fc-12">Motion Capture</span> 1501 <span class="float-chip fc-13">Generative Models</span> 1502 <span class="float-chip fc-14">Point Clouds</span> 1503 <span class="float-chip fc-15">Pose Estimation</span> 1504 <span class="float-chip fc-16">Human-in-the-Loop</span> 1505 </div> 1506 </div> 1507</div> 1508 1509<style> 1510/* ============== Skills Studio (scoped) ============== */ 1511.skills-section { 1512 /* Default to light theme-friendly values for better contrast */ 1513 --sk-bg: var(--global-bg, #f7f7fb); 1514 --sk-card: rgba(255,255,255,0.9); 1515 --sk-border: rgba(10,10,10,0.08); 1516 --sk-text: var(--global-text, #000000); 1517 --sk-muted: #000000; 1518 --sk-accent-1: #a855f7; /* purple */ 1519 --sk-accent-2: #06b6d4; /* cyan */ 1520 --sk-accent-3: #f472b6; /* pink */ 1521 --sk-accent-4: #f59e0b; /* amber */ 1522 --sk-shadow: 0 18px 50px rgba(0,0,0,0.35); 1523 position: relative; 1524 margin: 1.2rem 0 2.4rem; 1525 padding: 1rem 0 0 0; 1526 color: var(--sk-text); 1527 isolation: isolate; 1528} 1529@media (prefers-color-scheme: dark) { 1530 .skills-section { 1531 --sk-bg: #0b0c10; 1532 --sk-card: rgba(255,255,255,0.06); 1533 --sk-border: rgba(255,255,255,0.12); 1534 --sk-text: #e5e7eb; 1535 --sk-muted: #a3a3a3; 1536 } 1537} 1538.skills-aurora { 1539 position: absolute; inset: -10% -5% -15% -5%; pointer-events: none; z-index: -1; 1540 background: 1541 radial-gradient(1200px 800px at 10% 20%, rgba(168,85,247,.28), transparent 45%), 1542 radial-gradient(1000px 700px at 90% 10%, rgba(6,182,212,.28), transparent 45%), 1543 radial-gradient(900px 700px at 80% 80%, rgba(244,114,182,.25), transparent 50%), 1544 radial-gradient(900px 700px at 20% 85%, rgba(245,158,11,.22), transparent 50%); 1545 filter: blur(40px) saturate(120%); 1546 transform: translateZ(0); 1547 animation: auroraShift 16s ease-in-out infinite alternate; 1548} 1549@keyframes auroraShift { from { transform: scale(1) translateY(0); } to { transform: scale(1.05) translateY(-2%); } } 1550 1551.skills-header { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .5rem; flex-wrap: wrap; } 1552.skills-kicker { font-size: .8rem; color: var(--sk-muted); letter-spacing: .12em; text-transform: uppercase; } 1553.skills-title { margin: .15rem 0 0; font-size: clamp(1.1rem, 1.2rem + .5vw, 1.5rem); background: linear-gradient(135deg, var(--sk-accent-1), var(--sk-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } 1554.skills-modes { display: inline-flex; gap: .4rem; } 1555.skills-mode { appearance: none; border: 1px solid var(--sk-border); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
1555 color: var(--sk-text); font: inherit; padding: .35rem .8rem; border-radius: 999px; cursor: pointer; transition: all .25s ease; } 1556.skills-mode:hover { border-color: transparent; box-shadow: 0 0 0 3px rgba(124,58,237,.18); transform: translateY(-1px); } 1557.skills-mode.active { background: linear-gradient(135deg, rgba(168,85,247,.2), rgba(6,182,212,.2)); border-color: transparent; } 1558 1559.skills-grid { display: grid; gap: 1.2rem; } 1560.skills-rings { display: grid; grid-template-columns: repeat(6, minmax(90px, 1fr)); gap: 1rem; align-items: center; } 1561@media (max-width: 1100px) { .skills-rings { grid-template-columns: repeat(3, minmax(100px, 1fr)); } } 1562@media (max-width: 600px) { .skills-rings { grid-template-columns: repeat(2, minmax(100px, 1fr)); } } 1563 1564.ring { --size: 132px; --thickness: 14px; position: relative; display: grid; place-items: center; aspect-ratio: 1/1; width: 100%; min-width: 110px; filter: drop-shadow(0 10px 22px rgba(16, 24, 40, .35)); } 1565.ring-arc { 1566 width: var(--size); height: var(--size); border-radius: 50%; 1567 background: 1568 conic-gradient(from -90deg, 1569 color-mix(in oklab, var(--sk-accent-1) 70%, var(--sk-accent-3) 30%) calc(var(--p) * 1%), 1570 rgba(255,255,255,0.08) 0); 1571 -webkit-mask: radial-gradient(circle at center, transparent calc(50% - var(--thickness)), #000 calc(50% - var(--thickness) + 1px)); 1572 mask: radial-gradient(circle at center, transparent calc(50% - var(--thickness)), #000 calc(50% - var(--thickness) + 1px)); 1573 transition: background .8s ease; 1574} 1575.ring::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.2), rgba(255,255,255,0)); pointer-events: none; } 1576.ring-core { position: absolute; display: grid; place-items: center; text-align: center; gap: .15rem; } 1577.ring-label { font-weight: 700; letter-spacing: .02em; font-size: .95rem; } 1578.ring-note { font-size: .75rem; color: var(--sk-muted); } 1579 1580.skills-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } 1581@media (max-width: 1100px) { .skills-cards { grid-template-columns: 1fr 1fr; } } 1582@media (max-width: 700px) { .skills-cards { grid-template-columns: 1fr; } } 1583 1584.skill-card { position: relative; background: var(--sk-card); border: 1px solid var(--sk-border); border-radius: 16px; overflow: hidden; box-shadow: var(--sk-shadow); transform-style: preserve-3d; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } 1585.skill-card:hover { transform: translateY(-2px) scale(1.01); border-color: transparent; box-shadow: 0 18px 60px rgba(16,24,40,.28); } 1586.card-accent { position: absolute; inset: -20% -30% auto -30%; height: 120px; background: radial-gradient(700px 200px at 30% 50%, rgba(168,85,247,.35), transparent 60%), radial-gradient(700px 200px at 70% 50%, rgba(6,182,212,.35), transparent 60%); filter: blur(24px) saturate(130%); pointer-events: none; } 1587.card-head { display: flex; align-items: center; gap: .6rem; padding: .9rem .95rem .2rem; } 1588.card-icon { color: color-mix(in oklab, var(--sk-accent-1) 60%, var(--sk-accent-2) 40%); } 1589.card-title { margin: 0; font-size: 1.05rem; background: linear-gradient(135deg, var(--sk-accent-1), var(--sk-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } 1590.card-body { padding: .25rem .95rem .8rem; } 1591.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; } 1592.skill-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; padding: .28rem .6rem; border-radius: 999px; border: 1px solid var(--sk-border); color: var(--sk-text); background: rgba(255,255,255,.06); transition: transform .2s ease, border-color .2s ease, background .2s ease; } 1593.skills-section .skill-chip { color: #000 !important; } 1594.skills-section .float-chip { color: #000 !important; } 1595.skill-chip:hover { transform: translateY(-2px); border-color: transparent; background: linear-gradient(135deg, rgba(168,85,247,.25), rgba(6,182,212,.25)); } 1596.chip-hot { border-color: rgba(124,58,237,.45); } 1597.mini-list { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--sk-text); } 1598.mini-list li { margin: .25rem 0; } 1599.card-toggle { width: max-content; margin: 0 .95rem .9rem; appearance: none; border: 1px solid var(--sk-border); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
1599 color: var(--sk-text); font: inherit; padding: .3rem .7rem; border-radius: 10px; cursor: pointer; transition: all .25s ease; } 1600.card-toggle:hover { border-color: transparent; box-shadow: 0 0 0 3px rgba(124,58,237,.15); transform: translateY(-1px); } 1601 1602.skills-constellation { position: relative; min-height: 280px; display: grid; place-items: center; } 1603.float-chips { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; padding: .6rem; } 1604.float-chip { font-size: .85rem; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--sk-border); background: linear-gradient(135deg, rgba(168,85,247,.22), rgba(6,182,212,.22)); color: var(--sk-text); box-shadow: 0 8px 24px rgba(16,24,40,.18); animation: float 5.5s ease-in-out infinite; } 1605.float-chip:hover { transform: translateY(-3px) scale(1.02); } 1606@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } 1607.fc-1 { animation-duration: 5.2s } .fc-2 { animation-duration: 6.1s } .fc-3 { animation-duration: 5.8s } .fc-4 { animation-duration: 6.4s } 1608.fc-5 { animation-duration: 5.6s } .fc-6 { animation-duration: 6.0s } .fc-7 { animation-duration: 5.4s } .fc-8 { animation-duration: 6.2s } 1609.fc-9 { animation-duration: 5.7s } .fc-10 { animation-duration: 6.3s } .fc-11 { animation-duration: 5.3s } .fc-12 { animation-duration: 6.6s } 1610.fc-13 { animation-duration: 5.5s } .fc-14 { animation-duration: 6.5s } .fc-15 { animation-duration: 5.9s } .fc-16 { animation-duration: 6.7s } 1611</style> 1612
1613<script> 1614(function() { 1615 const root = document.getElementById('skills'); 1616 if (!root) return; 1617 root.classList.add('js-enabled'); 1618 const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; 1619 1620 // View toggle: Gallery <-> Constellation 1621 const modes = root.querySelectorAll('.skills-mode'); 1622 const grid = root.querySelector('.skills-grid'); 1623 const constellation = root.querySelector('.skills-constellation'); 1624 modes.forEach(btn => { 1625 btn.addEventListener('click', () => { 1626 modes.forEach(b => { b.classList.remove('active'); b.setAttribute('aria-selected', 'false'); }); 1627 btn.classList.add('active'); btn.setAttribute('aria-selected', 'true'); 1628 const mode = btn.getAttribute('data-mode'); 1629 if (mode === 'constellation') { 1630 grid.style.display = 'none'; 1631 constellation.hidden = false; 1632 } else { 1633 grid.style.display = 'grid'; 1634 constellation.hidden = true; 1635 } 1636 }); 1637 }); 1638 1639 // Animate rings on enter 1640 const rings = Array.from(root.querySelectorAll('.ring')); 1641 const easeOutCubic = t => 1 - Math.pow(1 - t, 3); 1642 function animateRing(el) { 1643 const target = Number(el.dataset.percent || 0); 1644 if (reduced) { el.style.setProperty('--p', target); return; } 1645 const startVal = Number(getComputedStyle(el).getPropertyValue('--p')) || 0; 1646 const duration = 900 + target * 6; 1647 let startTime = 0; 1648 function step(ts) { 1649 if (!startTime) startTime = ts; 1650 const k = Math.min((ts - startTime) / duration, 1); 1651 const val = startVal + (target - startVal) * easeOutCubic(k); 1652 el.style.setProperty('--p', val.toFixed(1)); 1653 if (k < 1) requestAnimationFrame(step); 1654 } 1655 requestAnimationFrame(step); 1656 } 1657 if ('IntersectionObserver' in window) { 1658 const io = new IntersectionObserver(entries => { 1659 entries.forEach(entry => { 1660 if (entry.isIntersecting) { animateRing(entry.target); io.unobserve(entry.target); } 1661 }); 1662 }, { threshold: 0.35 }); 1663 rings.forEach(r => io.observe(r)); 1664 } else { rings.forEach(r => animateRing(r)); } 1665 1666 // Card: tilt and expand 1667 const cards = Array.from(root.querySelectorAll('.skill-card')); 1668 const maxTiltX = 7, maxTiltY = 10; 1669 cards.forEach(card => { 1670 // expand 1671 const toggle = card.querySelector('.card-toggle'); 1672 const more = card.querySelector('.card-more'); 1673 if (toggle && more) { 1674 toggle.addEventListener('click', () => { 1675 const expanded = toggle.getAttribute('aria-expanded') === 'true'; 1676 toggle.setAttribute('aria-expanded', String(!expanded)); 1677 more.hidden = expanded; 1678 }); 1679 } 1680 if (reduced) return; 1681 // tilt 1682 card.addEventListener('mousemove', (e) => { 1683 const r = card.getBoundingClientRect(); 1684 const px = (e.clientX - r.left) / r.width; // 0..1 1685 const py = (e.clientY - r.top) / r.height; // 0..1 1686 const rx = (py - 0.5) * -2 * maxTiltX; // invert for natural feel 1687 const ry = (px - 0.5) * 2 * maxTiltY; 1688 card.style.transform = `rotateX(${rx.toFixed(2)}deg) rotateY(${ry.toFixed(2)}deg) translateZ(0)`; 1689 }); 1690 card.addEventListener('mouseleave', () => { 1691 card.style.transform = ''; 1692 }); 1693 }); 1694})(); 1695</script>
1695 1696 1697<!-- # ð Honors and Awards --> 1698 1699<div id="awards" class="awards-section" aria-label="Honors and Awards"> 1700 <div class="awards-head"> 1701 <h2 class="awards-title"> 1702 <img src="/images/trophy.svg" alt="trophy" width="32" height="32" class="awards-ico" /> 1703 Honors and Awards 1704 </h2> 1705 <div class="awards-views" role="tablist" aria-label="Awards view selector"> 1706 <button class="awards-toggle active" role="tab" aria-selected="true" data-view="stairs">Stairs</button> 1707 <button class="awards-toggle" role="tab" aria-selected="false" data-view="curve">Curve</button> 1708 <button class="awards-toggle" role="tab" aria-selected="false" data-view="list">List</button> 1709 </div> 1710 </div> 1711 1712 <!-- æ±å½¢å°é¶è§å¾ï¼ææ¾ç 1-5 级å°é¶ï¼ --> 1713 <div class="awards-stairs" role="list" aria-label="Awards as ascending bars"> 1714 <!-- lvl=1 æä½å°é¶ --> 1715 <a class="step" role="listitem" style="--lvl:1" href="https://kms.shanghaitech.edu.cn/itemDetail?id=1964643670370074625" target="_blank" rel="noopener" tabindex="0" aria-label="Third Prize â 2024"> 1716 <div class="step-label"> 1717 <div class="step-title">Third Prize</div> 1718 <div class="step-sub">The 6th ShanghaiTech Innovation & Entrepreneurship · 2024</div> 1719 </div> 1720 </a> 1721 1722 <!-- lvl=2 --> 1723 <a class="step" role="listitem" style="--lvl:2" href="https://kms.shanghaitech.edu.cn/itemDetail?id=1963541292048760833" target="_blank" rel="noopener" tabindex="0" aria-label="Merit Student & Outstanding Student Leader â 2020â2024"> 1724 <div class="step-label"> 1725 <div class="step-title">Merit Student & Outstanding Student Leader</div> 1726 <div class="step-sub">ShanghaiTech University · 2020â2024</div> 1727 </div> 1728 </a> 1729 1730 <!-- lvl=3 --> 1731 <a class="step" role="listitem" style="--lvl:3" href="https://kms.shanghaitech.edu.cn/itemDetail?id=1963545413367676929" target="_blank" rel="noopener" tabindex="0" aria-label="Shanghai Outstanding Graduate â 2023"> 1732 <div class="step-label"> 1733 <div class="step-title">Shanghai Outstanding Graduate</div> 1734 <div class="step-sub">2023</div> 1735 </div> 1736 </a> 1737 1738 <!-- lvl=4 --> 1739 <a class="step" role="listitem" style="--lvl:4" href="https://kms.shanghaitech.edu.cn/itemDetail?id=1964644453601820674" target="_blank" rel="noopener" tabindex="0" aria-label="National Second Prize â 2020"> 1740 <div class="step-label"> 1741 <div class="step-title">National Second Prize</div> 1742 <div class="step-sub">The National Robotics Competition · 2020</div> 1743 </div> 1744 </a> 1745 1746 <!-- lvl=5 æé«å°é¶ --> 1747 <a class="step top" role="listitem" style="--lvl:5" href="https://kms.shanghaitech.edu.cn/itemDetail?id=1965322313916268546" target="_blank" rel="noopener" tabindex="0" aria-label="National Scholarship (Top 1%) â 2024"> 1748 <div class="step-label"> 1749 <div class="step-title">National Scholarship</div> 1750 <div class="step-sub">Top 1% · 2024</div> 1751 </div> 1752 </a> 1753 </div> 1754 1755 <!-- ä¸åæ²çº¿è§å¾ï¼ä»£è¡¨éæ¥æé¿ï¼ --> 1756 <div class="awards-curve" hidden="" aria-label="Awards as a rising curve"> 1757 <svg class="curve-svg" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"> 1758 <defs> 1759 <linearGradient id="awGrad" x1="0%" y1="0%" x2="100%" y2="0%"> 1760 <stop offset="0%" stop-color="#8b5cf6" /> 1761 <stop offset="100%" stop-color="#06b6d4" /> 1762 </linearGradient> 1763 </defs> 1764 <path class="curve-path" d="M8,78 C16,74 20,68 28,62 S40,54 48,48 S60,38 68,30 S80,24 88,18" stroke="url(#awGrad)" stroke-width="2.6" fill="none" /> 1765 <g class="curve-points" fill="#fff" stroke="url(#awGrad)" stroke-width="1.6"> 1766 <circle cx="8" cy="78" r="2.6" /> 1767 <circle cx="28" cy="62" r="2.6" /> 1768 <circle cx="48" cy="48" r="2.6" /> 1769 <circle cx="68" cy="30" r="2.6" /> 1770 <circle cx="88" cy="18" r="3.2" /> 1771 </g> 1772 </svg> 1773 <div class="curve-nodes"> 1774 <a class="node" style="--x:8%; --y:78%" href="https://kms.shanghaitech.edu.cn/itemDetail?id=1964643670370074625" target="_blank" rel="noopener" tabindex="0"> 1775 <div class="node-card"> 1776 <div class="node-title">Third Prize</div> 1777 <div class="node-sub">The 6th ShanghaiTech Innovation & Entrepreneurship · 2024</div> 1778 </div> 1779 </a> 1780 <a class="node" style="--x:28%; --y:62%" href="https://kms.shanghaitech.edu.cn/itemDetail?id=1963541292048760833" target="_blank" rel="noopener" tabindex="0"> 1781 <div class="node-card"> 1782 <div class="node-title">Merit Student & Outstanding Student Leader</div> 1783 <div class="node-sub">
1783ShanghaiTech University · 2020â2024</div> 1784 </div> 1785 </a> 1786 <a class="node" style="--x:48%; --y:48%" href="https://kms.shanghaitech.edu.cn/itemDetail?id=1963545413367676929" target="_blank" rel="noopener" tabindex="0"> 1787 <div class="node-card"> 1788 <div class="node-title">Shanghai Outstanding Graduate</div> 1789 <div class="node-sub">2023</div> 1790 </div> 1791 </a> 1792 <a class="node" style="--x:68%; --y:30%" href="https://kms.shanghaitech.edu.cn/itemDetail?id=1964644453601820674" target="_blank" rel="noopener" tabindex="0"> 1793 <div class="node-card"> 1794 <div class="node-title">National Second Prize</div> 1795 <div class="node-sub">The National Robotics Competition · 2020</div> 1796 </div> 1797 </a> 1798 <a class="node top" style="--x:88%; --y:18%" href="https://kms.shanghaitech.edu.cn/itemDetail?id=1965322313916268546" target="_blank" rel="noopener" tabindex="0"> 1799 <div class="node-card"> 1800 <div class="node-title">National Scholarship</div> 1801 <div class="node-sub">Top 1% · 2024</div> 1802 </div> 1803 </a> 1804 </div> 1805 </div> 1806 1807 <!-- æ éç¢/é级å表è§å¾ï¼é»è®¤éèï¼ --> 1808 <ul class="awards-list" hidden=""> 1809 <li><a href="https://kms.shanghaitech.edu.cn/itemDetail?id=1965322313916268546" target="_blank" rel="noopener"><strong>National Scholarship</strong></a> (Top 1%), 2024</li> 1810 <li><a href="https://kms.shanghaitech.edu.cn/itemDetail?id=1964644453601820674" target="_blank" rel="noopener"><strong>National Second Prize</strong></a>, The National Robotics Competition, 2020</li> 1811 <li><a href="https://kms.shanghaitech.edu.cn/itemDetail?id=1963545413367676929" target="_blank" rel="noopener"><strong>Shanghai Outstanding Graduate</strong></a>, 2023</li> 1812 <li><a href="https://kms.shanghaitech.edu.cn/itemDetail?id=1963541292048760833" target="_blank" rel="noopener"><strong>Merit Student & Outstanding Student Leader</strong></a>, ShanghaiTech University, 2020 & 2021 & 2022 & 2023 & 2024</li> 1813 <li><a href="https://kms.shanghaitech.edu.cn/itemDetail?id=1964643670370074625" target="_blank" rel="noopener"><strong>Third Prize</strong></a>, The 6th ShanghaiTech Innovation and Entrepreneurship Competition, 2024</li> 1814 </ul> 1815</div> 1816 1817<style> 1818/* ============== Awards: Stairs + Curve (scoped) ============== */ 1819.awards-section { 1820 --aw-bg: var(--global-bg, #f7f7fb); 1821 --aw-card: rgba(255,255,255,0.9); 1822 --aw-border: rgba(10,10,10,0.08); 1823 --aw-text: var(--global-text, #000); 1824 --aw-muted: #000000; 1825 --aw-ac1: #8b5cf6; /* purple */ 1826 --aw-ac2: #06b6d4; /* cyan */ 1827 --aw-shadow: 0 18px 50px rgba(0,0,0,0.35); 1828 --unit: clamp(32px, 5.5vw, 56px); /* step height unit */ 1829 position: relative; 1830 margin: 1.2rem 0 2.4rem; 1831 color: var(--aw-text); 1832} 1833@media (prefers-color-scheme: dark) { 1834 .awards-section { 1835 --aw-bg: #0b0c10; 1836 --aw-card: rgba(255,255,255,0.08); 1837 --aw-border: rgba(255,255,255,0.18); 1838 --aw-text: #e5e7eb; 1839 --aw-muted: #a3a3a3; 1840 --aw-shadow: 0 18px 60px rgba(0,0,0,0.45); 1841 } 1842} 1843.awards-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; } 1844.awards-title { display: flex; align-items: center; gap: .6rem; margin: .2rem 0 .6rem; font-size: 1.35rem; background: linear-gradient(135deg, var(--aw-ac1), var(--aw-ac2)); -webkit-background-clip: text; background-clip: text; color: transparent; } 1845.awards-ico { filter: saturate(120%); } 1846.awards-views { display: inline-flex; gap: .4rem; } 1847.awards-toggle { appearance: none; border: 1px solid var(--aw-border); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)); color: var(--aw-text); font: inherit; padding: .35rem .8rem; border-radius: 999px; cursor: pointer; transition: all .25s ease; } 1848.awards-toggle:hover { border-color: transparent; box-shadow: 0 0 0 3px rgba(124,58,237,.18); transform: translateY(-1px); } 1849.awards-toggle.active { background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(6,182,212,.22)); border-color: transparent; } 1850 1851/* Stairs (bars) */ 1852.awards-stairs { 1853 position: relative; 1854 height: clamp(320px, 40vw, 420px); 1855 display: grid; 1856 grid-template-columns: repeat(5, 1fr); 1857 gap: 14px; 1858 align-items: end; 1859 padding: 1rem 1rem 1.2rem; 1860 background: 1861 radial-gradient(900px 380px at 10% 90%, rgba(139,92,246,.08), transparent 60%), 1862 radial-gradient(900px 380px at 80% 20%, rgba(6,182,212,.10), transparent 65%); 1863 border-radius: 16px; 1864 overflow: hidden; 1865 isolation: isolate; 1866} 1867.awards-stairs::after {
1868 content: ""; 1869 position: absolute; left: 0; right: 0; bottom: .9rem; height: 2px; 1870 background: linear-gradient(90deg, rgba(139,92,246,.25), rgba(6,182,212,.25)); 1871} 1872.step { 1873 position: relative; 1874 align-self: end; 1875 height: calc(var(--lvl,1) * var(--unit)); 1876 border: 1px solid var(--aw-border); 1877 border-radius: 10px; 1878 background: linear-gradient(180deg, color-mix(in oklab, var(--aw-card) 90%, transparent), rgba(255,255,255,0.05)); 1879 box-shadow: var(--aw-shadow); 1880 text-decoration: none; color: var(--aw-text); 1881 transform: translateY(10px) scaleY(.98); 1882 transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease, opacity .6s ease; 1883 opacity: 0; 1884} 1885.js-enabled .step.in-view { opacity: 1; transform: translateY(0) scaleY(1); } 1886.step:hover, .step:focus-visible { border-color: transparent; box-shadow: 0 20px 60px rgba(16,24,40,.28); outline: none; } 1887.step:hover { transform: translateY(-2px) scaleY(1.02); } 1888.step::before { 1889 content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 10px; 1890 background: 1891 radial-gradient(500px 180px at 50% 0%, rgba(139,92,246,.22), transparent 60%), 1892 radial-gradient(500px 180px at 60% 10%, rgba(6,182,212,.22), transparent 70%); 1893 filter: blur(18px) saturate(120%); 1894 opacity: 0; transition: opacity .28s ease; 1895} 1896.step:hover::before, .step:focus-visible::before { opacity: 1; } 1897.step-label { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: 95%; text-align: center; } 1898.step-title { font-weight: 700; letter-spacing: .02em; font-size: clamp(.95rem, .9rem + .2vw, 1.05rem); background: linear-gradient(135deg, var(--aw-ac1), var(--aw-ac2)); -webkit-background-clip: text; background-clip: text; color: transparent; } 1899.step-sub { font-size: .82rem; color: var(--aw-muted); } 1900 1901@media (max-width: 720px) { 1902 .awards-stairs { height: clamp(280px, 70vh, 420px); padding: .8rem .7rem 1.2rem; gap: 10px; } 1903 .step-label { width: 120%; } 1904} 1905 1906/* Curve */ 1907.awards-curve { position: relative; height: clamp(320px, 40vw, 420px); border-radius: 16px; overflow: hidden; background: 1908 radial-gradient(900px 380px at 10% 90%, rgba(139,92,246,.08), transparent 60%), 1909 radial-gradient(900px 380px at 80% 20%, rgba(6,182,212,.10), transparent 65%); 1910} 1911.curve-svg { position: absolute; inset: 0; } 1912.curve-path { stroke-linecap: round; stroke-linejoin: round; } 1913.js-enabled .curve-path { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.2s ease .15s; } 1914.js-enabled .curve-path.drawn { stroke-dashoffset: 0; } 1915.curve-nodes { position: absolute; inset: 0; } 1916.node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; outline: none; } 1917.node::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(139,92,246,.5); } 1918.node.top::before { box-shadow: 0 0 0 2px rgba(6,182,212,.6); } 1919.node:hover::before, .node:focus-visible::before { box-shadow: 0 0 0 3px rgba(139,92,246,.6), 0 8px 24px rgba(16,24,40,.3); } 1920.node-card { position: absolute; left: 50%; bottom: 40px; transform: translate(-50%, 6px) scale(.98); background: var(--aw-card); color: var(--aw-text); border: 1px solid var(--aw-border); border-radius: 12px; padding: .5rem .7rem; box-shadow: var(--aw-shadow); width: max-content; max-width: 260px; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; } 1921.node:hover .node-card, .node:focus-visible .node-card { opacity: 1; transform: translate(-50%, 0) scale(1); } 1922.node-title { font-weight: 700; letter-spacing: .02em; font-size: .98rem; background: linear-gradient(135deg, var(--aw-ac1), var(--aw-ac2)); -webkit-background-clip: text; background-clip: text; color: transparent; } 1923.node-sub { font-size: .82rem; color: var(--aw-muted); } 1924 1925/* List */ 1926.awards-list { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--aw-text); } 1927.awards-section .awards-list li { margin: .35rem 0; } 1928</style> 1929
1930<script> 1931(function() { 1932 const root = document.getElementById('awards'); 1933 if (!root) return; 1934 root.classList.add('js-enabled'); 1935 const stairs = root.querySelector('.awards-stairs'); 1936 const curve = root.querySelector('.awards-curve'); 1937 const list = root.querySelector('.awards-list'); 1938 const toggles = root.querySelectorAll('.awards-toggle'); 1939 const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; 1940 1941 // è§å¾åæ¢ï¼Stairs <-> Curve <-> List 1942 function setView(view) { 1943 if (view === 'list') { 1944 list.hidden = false; stairs.style.display = 'none'; if (curve) curve.style.display = 'none'; 1945 } else if (view === 'curve') { 1946 list.hidden = true; stairs.style.display = 'none'; if (curve) { curve.style.display = 'block'; drawCurve(); } 1947 } else { // stairs 1948 list.hidden = true; stairs.style.display = 'grid'; if (curve) curve.style.display = 'none'; 1949 } 1950 } 1951 toggles.forEach(btn => { 1952 btn.addEventListener('click', () => { 1953 toggles.forEach(b => { b.classList.remove('active'); b.setAttribute('aria-selected','false'); }); 1954 btn.classList.add('active'); btn.setAttribute('aria-selected','true'); 1955 setView(btn.getAttribute('data-view')); 1956 }); 1957 }); 1958 1959 // è¿å ¥è§å£å¨ç» 1960 if ('IntersectionObserver' in window) { 1961 const io = new IntersectionObserver((entries) => { 1962 entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('in-view'); io.unobserve(entry.target); } }); 1963 }, { threshold: 0.2 }); 1964 root.querySelectorAll('.step').forEach(el => io.observe(el)); 1965 } else { 1966 root.querySelectorAll('.step').forEach(el => el.classList.add('in-view')); 1967 } 1968 1969 // æ²çº¿ç»å¶å¨ç» 1970 function drawCurve() { 1971 if (!curve) return; 1972 const path = curve.querySelector('.curve-path'); 1973 if (!path) return; 1974 if (path.classList.contains('drawn')) return; // once 1975 if (reduced) { path.classList.add('drawn'); return; } 1976 const len = path.getTotalLength(); 1977 path.style.strokeDasharray = String(len); 1978 path.style.strokeDashoffset = String(len); 1979 requestAnimationFrame(() => { path.classList.add('drawn'); path.style.strokeDashoffset = '0'; }); 1980 } 1981})(); 1982</script>
1982 1983 1984<h1 id="educations">ð Educations</h1> 1985 1986<ul> 1987 <li><strong>Ph.D. in Computer Science and Technology</strong> (2023 - Present) 1988 <ul> 1989 <li><em>ShanghaiTech University, Shanghai, China</em></li> 1990 </ul> 1991 </li> 1992 <li><strong>B.S. in Computer Science and Technology</strong> (2019 - 2023) 1993 <ul> 1994 <li><em>ShanghaiTech University, Shanghai, China</em></li> 1995 </ul> 1996 </li> 1997</ul> 1998 1999<h1 id="-skill-points">ð¯ Skill Points</h1> 2000 2001<div id="skill-points" class="skill-points"> 2002 <div class="sp-chips" role="list" aria-label="Skill Points"> 2003 <span class="sp-chip" role="listitem">3D Computer Vision</span> 2004 <span class="sp-chip" role="listitem">Robotics</span> 2005 <span class="sp-chip" role="listitem">Embodied AI</span> 2006 <span class="sp-chip" role="listitem">Human-Robot Interaction (HRI)</span> 2007 <span class="sp-chip" role="listitem">3D Perception</span> 2008 <span class="sp-chip" role="listitem">Human-centric Scene Understanding</span> 2009 <span class="sp-chip" role="listitem">Parametric Human Modeling (SMPL/SMPL-X)</span> 2010 <span class="sp-chip" role="listitem">3D Motion Generation and Prediction</span> 2011 <span class="sp-chip" role="listitem">Humanoid Robotics</span> 2012 <span class="sp-chip" role="listitem">Multi-Agent Interaction</span> 2013 <span class="sp-chip" role="listitem">Physics-based Simulation and Modeling</span> 2014 <span class="sp-chip" role="listitem">Sensor Fusion (LiDAR & Camera)</span> 2015 <span class="sp-chip" role="listitem">Human-in-the-Loop (HITL) Simulation</span> 2016 <span class="sp-chip" role="listitem">Augmented Reality (AR) in Robotics</span> 2017 <span class="sp-chip" role="listitem">Real-time Motion Capture</span> 2018 <span class="sp-chip" role="listitem">Weakly Supervised Learning</span> 2019 <span class="sp-chip" role="listitem">Self-Supervised Learning for Robotics</span> 2020 <span class="sp-chip" role="listitem">Geometric Deep Learning</span> 2021 <span class="sp-chip" role="listitem">3D Human Pose Estimation</span> 2022 <span class="sp-chip" role="listitem">Point Cloud Video Understanding</span> 2023 <span class="sp-chip" role="listitem">Assistive Robotics</span> 2024 <span class="sp-chip" role="listitem">Python</span> 2025 <span class="sp-chip" role="listitem">PyTorch</span> 2026 <span class="sp-chip" role="listitem">NumPy</span> 2027 <span class="sp-chip" role="listitem">Pandas</span> 2028 <span class="sp-chip" role="listitem">SciPy</span> 2029 <span class="sp-chip" role="listitem">Scikit-learn</span> 2030 <span class="sp-chip" role="listitem">Matplotlib</span> 2031 <span class="sp-chip" role="listitem">Open3D</span> 2032 <span class="sp-chip" role="listitem">PCL</span> 2033 <span class="sp-chip" role="listitem">PyTorch3D</span> 2034 <span class="sp-chip" role="listitem">Trimesh</span> 2035 <span class="sp-chip" role="listitem">MeshLab</span> 2036 <span class="sp-chip" role="listitem">LaTeX</span> 2037 <span class="sp-chip" role="listitem">Bash Scripting</span> 2038 <span class="sp-chip" role="listitem">Algorithms and Data Structures</span> 2039 <span class="sp-chip" role="listitem">Docker</span> 2040 <span class="sp-chip" role="listitem">Slurm</span> 2041 <span class="sp-chip" role="listitem">Git / GitHub</span> 2042 <span class="sp-chip" role="listitem">PyTorch Lightning</span> 2043 <span class="sp-chip" role="listitem">OpenCV</span> 2044 <span class="sp-chip" role="listitem">Jupyter Notebook</span> 2045 <span class="sp-chip" role="listitem">Linux</span> 2046 <span class="sp-chip" role="listitem">Deep Learning</span> 2047 <span class="sp-chip" role="listitem">Generative Models</span> 2048 <span class="sp-chip" role="listitem">Diffusion Models</span> 2049 <span class="sp-chip" role="listitem">Autoregressive Models</span> 2050 <span class="sp-chip" role="listitem">Transformers</span> 2051 <span class="sp-chip" role="listitem">3D Point Cloud Processing</span> 2052 <span class="sp-chip" role="listitem">LiDAR Data Processing</span> 2053 <span class="sp-chip" role="listitem">Point Cloud Segmentation (Semantic/Instance)</span> 2054 <span class="sp-chip" role="listitem">Point Cloud Denoising</span> 2055 <span class="sp-chip" role="listitem">3D Action Recognition</span> 2056 <span class="sp-chip" role="listitem">3D Scene Flow Estimation</span> 2057 <span class="sp-chip" role="listitem">3D Human Mesh Recovery</span> 2058 <span class="sp-chip" role="listitem">3D Data Annotation</span> 2059 <span class="sp-chip" role="listitem">Inverse Kinematics (IK)</span> 2060 <span class="sp-chip" role="listitem">Forward Kinematics</span> 2061 <span class="sp-chip" role="listitem">Geometric Constraints Modeling</span> 2062 <span class="sp-chip" role="listitem">Spatio-temporal Representation Learning</span> 2063 <span class="sp-chip" role="listitem">Chamfer Distance</span> 2064 <span class="sp-chip" role="listitem">Point-based models (PointNet, PointNet++)</span> 2065 <span class="sp-chip" role="listitem">3D Visualization</span> 2066 <span class="sp-chip" role="listitem">Robot Perception Systems</span> 2067 <span class="sp-chip" role="listitem">Robot Learning</span> 2068 <span class="sp-chip" role="listitem">Motion Planning and Control</span> 2069 <span class="sp-chip" role="listitem">Behavior Generation</span> 2070 <span class="sp-chip" role="listitem">Human-Robot Collaboration</span> 2071 <span class="sp-chip" role="listitem">Real-time Interactive Systems</span> 2072 <span class="sp-chip" role="listitem">Robot Simulation Environments</span> 2073 <span class="sp-chip" role="listitem">Sim-to-Real Transfer</span> 2074 <span class="sp-chip" role="listitem">Augmented Reality Interfaces for Robotics</span> 2075 <span class="sp-chip" role="listitem">Multi-robot Systems</span> 2076 <span class="sp-chip" role="listitem">Data Science</span> 2077 <span class="sp-chip" role="listitem">Multimodal Temporal Data Processing</span> 2078 <span class="sp-chip" role="listitem">Data Analysis</span> 2079 <span class="sp-chip" role="listitem">Data Visualization</span> 2080 <span class="sp-chip" role="listitem">Large-scale Dataset Management</span> 2081 <span class="sp-chip" role="listitem">High-Quality Interactive Dataset Collection</span> 2082 <span class="sp-chip" role="listitem">Closed-loop System Integration</span> 2083 <span class="sp-chip" role="listitem">Real-time Data Streaming</span> 2084 <span class="sp-chip" role="listitem">Scientific Writing</span> 2085 <span class="sp-chip" role="listitem">Project Planning and Management</span> 2086 <span class="sp-chip" role="listitem">Problem Definition and Formulation</span> 2087 <span class="sp-chip" role="listitem">User-Centered Experiment Design</span> 2088 <span class="sp-chip" role="listitem">Human-in-the-Loop Studies</span> 2089 <span class="sp-chip" role="listitem">"Wizard of Oz" Prototyping</span> 2090 <span class="sp-chip" role="listitem">Quantitative and Qualitative Research</span> 2091 <span class="sp-chip" role="listitem">Technical Documentation (LaTeX, Draw.io)</span> 2092 </div> 2093</div> 2094 2095<style> 2096/* ============== Skill Points bubbles (scoped) ============== */ 2097.skill-points { 2098 /* Default to light theme-friendly values for better contrast */ 2099 --sp-text: var(--global-text, #000000); 2100 --sp-muted: #000000; 2101 --sp-bg: rgba(255,255,255,0.9); 2102 --sp-border: rgba(10,10,10,0.08); 2103 --sp-ac1: #8b5cf6; /* purple */ 2104 --sp-ac2: #06b6d4; /* cyan */
2105 --sp-hov-text: #000000; /* text color when highlighted */ 2106 --sp-shadow: 0 12px 30px rgba(16,24,40,0.12); 2107 margin: .6rem 0 1.2rem; 2108 color: var(--sp-text); 2109} 2110@media (prefers-color-scheme: dark) { 2111 .skill-points { 2112 --sp-text: #e5e7eb; 2113 --sp-muted: #a3a3a3; 2114 --sp-bg: rgba(255,255,255,0.04); 2115 --sp-border: rgba(255,255,255,0.12); 2116 --sp-hov-text: #ffffff; 2117 --sp-shadow: 0 12px 36px rgba(0,0,0,0.28); 2118 } 2119} 2120.sp-chips { 2121 display: flex; 2122 flex-wrap: wrap; 2123 gap: .5rem .55rem; 2124 align-items: center; 2125} 2126.sp-chip { 2127 position: relative; 2128 display: inline-flex; 2129 align-items: center; 2130 gap: .35rem; 2131 padding: .36rem .72rem; 2132 font-size: .86rem; 2133 line-height: 1; 2134 color: var(--sp-text); 2135 background: linear-gradient(180deg, var(--sp-bg), transparent); 2136 border: 1px solid var(--sp-border); 2137 border-radius: 999px; 2138 box-shadow: var(--sp-shadow); 2139 backdrop-filter: blur(8px) saturate(120%); 2140 -webkit-backdrop-filter: blur(8px) saturate(120%); 2141 transform-style: preserve-3d; 2142 transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease; 2143 cursor: default; 2144 will-change: transform; 2145} 2146.skill-points .sp-chip { color: #000 !important; } 2147.sp-chip::before { 2148 content: ""; 2149 position: absolute; 2150 inset: -60% -40% -60% -40%; 2151 background: 2152 radial-gradient(280px 140px at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--sp-ac1) 55%, var(--sp-ac2) 45%), transparent 62%); 2153 filter: blur(18px) saturate(130%); 2154 opacity: 0; 2155 transition: opacity .28s ease; 2156 pointer-events: none; 2157} 2158.sp-chip:hover, .sp-chip:focus-visible { 2159 transform: translateY(-1px); 2160 border-color: transparent; 2161 background: linear-gradient(135deg, 2162 color-mix(in oklab, var(--sp-ac1) 55%, transparent), 2163 color-mix(in oklab, var(--sp-ac2) 55%, transparent) 2164 ); 2165 color: var(--sp-hov-text); 2166 box-shadow: 0 16px 46px rgba(16,24,40,.22); 2167} 2168.sp-chip:hover::before, .sp-chip:focus-visible::before { opacity: 0; } 2169.sp-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(139,92,246,.18), 0 16px 46px rgba(16,24,40,.25); } 2170 2171@media (prefers-reduced-motion: reduce) { 2172 .sp-chip { transition: none; } 2173 .sp-chip::before { transition: none; } 2174} 2175</style> 2176 2177<h1 id="-japan-travel-guide">ð§ Japan Travel Guide</h1> 2178 2179<div class="travel-guide" id="travel-guide"> 2180 <div class="tg-text"> 2181 <h3>Explore Japan with an Immersive Planner</h3> 2182 <p> 2183 I recently launched an interactive website focused on independent travel in Japan, including city highlights, itinerary planning, transport passes, and local food recommendations. 2184 Visit the page to get curated routes from Tokyo to Okinawa and practical tools for building your own personalized travel plan. 2185 </p> 2186 <a class="tg-button" href="/æ¥æ¬æ»ç¥(1).html" target="_blank" rel="noopener"> 2187 Open the Japan Travel Site 2188 <span class="tg-arrow" aria-hidden="true">â</span> 2189 </a> 2190 </div> 2191 <div class="tg-highlights" aria-hidden="true"> 2192 <ul> 2193 <li>â¶ City routes: Tokyo, Osaka, Hokkaido, and more</li> 2194 <li>â¶ Transit cards and JR PASS purchase guide</li> 2195 <li>â¶ Seasonal festivals and must-try foods</li> 2196 <li>â¶ Clear budget estimates and booking links</li> 2197 </ul> 2198 </div> 2199</div> 2200 2201<style> 2202.travel-guide { 2203 position: relative; 2204 margin: 1.4rem 0 2.2rem; 2205 padding: 1.4rem 1.6rem; 2206 border-radius: 18px; 2207 border: 1px solid rgba(10,10,10,0.08); 2208 background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(6,182,212,0.1)); 2209 box-shadow: 0 18px 42px rgba(16,24,40,0.18); 2210 display: grid; 2211 gap: 1.4rem; 2212 grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); 2213 overflow: hidden; 2214} 2215@media (prefers-color-scheme: dark) { 2216 .travel-guide { 2217 border-color: rgba(255,255,255,0.18); 2218 background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(6,182,212,0.16)); 2219 box-shadow: 0 20px 46px rgba(0,0,0,0.38); 2220 } 2221} 2222.travel-guide::before { 2223 content: ""; 2224 position: absolute; 2225 inset: -30% -40% auto -30%; 2226 height: 200px; 2227 background: 2228 radial-gradient(600px 240px at 20% 60%, rgba(168,85,247,0.32), transparent 65%), 2229 radial-gradient(640px 240px at 70% 30%, rgba(6,182,212,0.28), transparent 65%); 2230 filter: blur(22px) saturate(120%); 2231 pointer-events: none; 2232} 2233.tg-text { 2234 position: relative; 2235 z-index: 1; 2236 display: flex; 2237 flex-direction: column; 2238 gap: 0.9rem; 2239 color: var(--global-text, #111827); 2240} 2241.tg-text h3 { 2242 margin: 0; 2243 font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); 2244 background: linear-gradient(135deg, rgba(124,58,237,1), rgba(6,182,212,1)); 2245 -webkit-background-clip: text; 2246 background-clip: text; 2247 color: transparent; 2248} 2249.tg-text p { 2250 margin: 0; 2251 line-height: 1.6; 2252 font-size: 0.95rem; 2253 color: inherit; 2254} 2255.tg-button { 2256 align-self: flex-start; 2257 display: inline-flex; 2258 align-items: center; 2259 gap: 0.55rem; 2260 padding: 0.48rem 0.9rem; 2261 border-radius: 999px; 2262 border: 1px solid rgba(124,58,237,0.35); 2263 text-decoration: none; 2264 font-weight: 600; 2265 color: inherit; 2266 background: rgba(255,255,255,0.18); 2267 backdrop-filter: blur(6px); 2268 transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease; 2269} 2270.tg-button:hover, .tg-button:focus-visible { 2271 transform: translateY(-1px); 2272 border-color: transparent; 2273 box-shadow: 0 14px 36px rgba(124,58,237,0.28); 2274 outline: none; 2275} 2276.tg-arrow { 2277 font-size: 1.1rem; 2278 transform: translateX(2px); 2279} 2280.tg-highlights { 2281 position: relative; 2282 z-index: 1; 2283 border-left: 1px solid rgba(255,255,255,0.24); 2284 padding-left: 1.2rem; 2285 display: flex; 2286 align-items: center; 2287} 2288.tg-highlights ul { 2289 margin: 0; 2290 padding: 0; 2291 list-style: none; 2292 display: grid; 2293 gap: 0.45rem; 2294 color: rgba(17,24,39,0.9); 2295 font-weight: 600; 2296} 2297.tg-highlights li { 2298 font-size: 0.92rem; 2299 letter-spacing: 0.01em; 2300} 2301@media (prefers-color-scheme: dark) { 2302 .tg-text { color: #f3f4f6; } 2303 .tg-highlights { border-left-color: rgba(255,255,255,0.18); } 2304 .tg-highlights ul { color: rgba(229,231,235,0.92); } 2305 .tg-button { background: rgba(255,255,255,0.14); color: #f9fafb; } 2306} 2307@media (max-width: 880px) { 2308 .travel-guide { 2309 grid-template-columns: 1fr; 2310 } 2311 .tg-highlights { 2312 border-left: none; 2313 border-top: 1px solid rgba(255,255,255,0.24); 2314 padding: 1.1rem 0 0; 2315 } 2316} 2317</style> 2318
2319<h1 id="ï¸-shitai-travel-guide">ðï¸ SHITAI TRAVEL GUIDE</h1> 2320 2321<div class="shitai-guide-entry" id="shitai-travel-guide"> 2322 <div class="stg-copy"> 2323 <span class="stg-kicker">Mobile-first travel app</span> 2324 <h3>A phone-native Shitai travel app, not another static guide page</h3> 2325 <p> 2326 I rebuilt this one specifically for a mobile browser: Qingming holiday, two travelers, no rental car, and a plan that is actually executable. 2327 The page opens as a compact trip app with a departure clock, mode switcher, hour-by-hour plan, transport deck, budget presets, and a persistent packing checklist. 2328 </p> 2329 <div class="stg-tags" aria-hidden="true"> 2330 <span>Train + coach + county bus</span> 2331 <span>Hybrid / public / upgrade modes</span> 2332 <span>Budget engine + saved checklist</span> 2333 </div> 2334 <a class="stg-button" href="/shitai-travel-guide.html" target="_blank" rel="noopener"> 2335 Open the Shitai Travel App 2336 <span aria-hidden="true">â</span> 2337 </a> 2338 </div> 2339 <div class="stg-phone" aria-hidden="true"> 2340 <div class="stg-phone__notch"></div> 2341 <div class="stg-phone__screen"> 2342 <div class="stg-phone__hero"> 2343 <strong>SHITAI</strong> 2344 <span>Qingming / No-Car Mode</span> 2345 </div> 2346 <div class="stg-phone__pillrow"> 2347 <span>Day 1 Penglai Cave</span> 2348 <span>Day 2 Guniujiang</span> 2349 </div> 2350 <div class="stg-phone__module"> 2351 <label>Departure Clock</label> 2352 <strong>2026.04.04</strong> 2353 <p>Countdown, next actions, transport rules, and return logic all in one handheld layout.</p> 2354 </div> 2355 <div class="stg-phone__list"> 2356 <span>06:20 taxi to Hongqiao</span> 2357 <span>09:14 G7492</span> 2358 <span>06:20 Shitai coach back</span> 2359 </div> 2360 </div> 2361 </div> 2362</div> 2363 2364<style> 2365.shitai-guide-entry { 2366 position: relative; 2367 margin: 1.5rem 0 2.4rem; 2368 padding: 1.5rem; 2369 border-radius: 26px; 2370 overflow: hidden; 2371 border: 1px solid rgba(17,24,39,0.08); 2372 background: 2373 radial-gradient(circle at top left, rgba(210,122,51,0.22), transparent 32%), 2374 linear-gradient(135deg, rgba(248,242,231,0.96), rgba(236,242,238,0.96)); 2375 box-shadow: 0 18px 42px rgba(17,24,39,0.14); 2376 display: grid; 2377 grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.9fr); 2378 gap: 1.2rem; 2379} 2380.shitai-guide-entry::after { 2381 content: ""; 2382 position: absolute; 2383 inset: auto -12% -22% auto; 2384 width: 240px; 2385 height: 240px; 2386 border-radius: 999px; 2387 background: radial-gradient(circle, rgba(31,111,120,0.18), transparent 68%); 2388 pointer-events: none; 2389} 2390.stg-copy { 2391 position: relative; 2392 z-index: 1; 2393 display: grid; 2394 gap: 0.95rem; 2395 color: #13253b; 2396} 2397.stg-kicker { 2398 display: inline-flex; 2399 width: fit-content; 2400 padding: 0.42rem 0.72rem; 2401 border-radius: 999px; 2402 background: rgba(19,37,59,0.08); 2403 color: #5d6671; 2404 font-size: 0.76rem; 2405 letter-spacing: 0.12em; 2406 text-transform: uppercase; 2407} 2408.stg-copy h3 { 2409 margin: 0; 2410 font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem); 2411 line-height: 1.2; 2412 color: #17324d; 2413} 2414.stg-copy p { 2415 margin: 0; 2416 font-size: 0.96rem; 2417 line-height: 1.75; 2418} 2419.stg-tags { 2420 display: flex; 2421 flex-wrap: wrap; 2422 gap: 0.5rem; 2423} 2424.stg-tags span { 2425 display: inline-flex; 2426 padding: 0.38rem 0.72rem; 2427 border-radius: 999px; 2428 background: rgba(255,255,255,0.72); 2429 border: 1px solid rgba(19,37,59,0.08); 2430 font-size: 0.82rem; 2431 font-weight: 600; 2432} 2433.stg-button { 2434 display: inline-flex; 2435 align-items: center; 2436 gap: 0.55rem; 2437 width: fit-content; 2438 padding: 0.66rem 1rem; 2439 border-radius: 999px; 2440 text-decoration: none; 2441 background: linear-gradient(135deg, #17324d, #1f6f78); 2442 color: #fff8f0; 2443 font-weight: 700; 2444 box-shadow: 0 14px 34px rgba(23,50,77,0.22); 2445 transition: transform .22s ease, box-shadow .22s ease; 2446} 2447.stg-button:hover, .stg-button:focus-visible { 2448 transform: translateY(-1px); 2449 box-shadow: 0 18px 40px rgba(23,50,77,0.28); 2450 outline: none; 2451} 2452.stg-phone { 2453 position: relative; 2454 z-index: 1; 2455 display: flex; 2456 align-items: center; 2457 justify-content: center; 2458} 2459.stg-phone__screen { 2460 width: min(100%, 248px); 2461 min-height: 430px; 2462 padding: 1rem 0.95rem 1.1rem; 2463 border-radius: 30px; 2464 background: 2465 linear-gradient(180deg, rgba(255,250,243,0.98), rgba(244,238,228,0.98)), 2466 linear-gradient(135deg, rgba(23,50,77,0.1), transparent); 2467 border: 7px solid #13253b; 2468 box-shadow: 0 18px 40px rgba(19,37,59,0.2); 2469 display: grid; 2470 gap: 0.85rem; 2471} 2472.stg-phone__notch { 2473 position: absolute; 2474 top: 14px; 2475 width: 88px; 2476 height: 18px; 2477 border-radius: 999px; 2478 background: #13253b; 2479} 2480.stg-phone__hero { 2481 margin-top: 0.5rem; 2482 padding: 1rem; 2483 border-radius: 22px; 2484 background: 2485 linear-gradient(180deg, rgba(11,31,47,0.16), rgba(11,31,47,0.72)), 2486 url("/images/shitai/guniujiang_banner.jpg") center/cover no-repeat; 2487 color: #fff8f0; 2488 display: grid; 2489 gap: 0.3rem; 2490} 2491.stg-phone__hero strong { 2492 font-size: 1.6rem; 2493 letter-spacing: 0.1em; 2494} 2495.stg-phone__hero span { 2496 font-size: 0.76rem; 2497 opacity: 0.9; 2498} 2499.stg-phone__pillrow { 2500 display: flex; 2501 gap: 0.45rem; 2502 flex-wrap: wrap; 2503} 2504.stg-phone__pillrow span, 2505.stg-phone__list span { 2506 padding: 0.38rem 0.58rem; 2507 border-radius: 999px; 2508 background: rgba(19,37,59,0.08); 2509 font-size: 0.72rem; 2510 font-weight: 700; 2511 color: #17324d; 2512} 2513.stg-phone__module { 2514 padding: 0.9rem; 2515 border-radius: 20px; 2516 background: rgba(255,255,255,0.72); 2517 border: 1px solid rgba(19,37,59,0.08); 2518} 2519.stg-phone__module label { 2520 display: block; 2521 font-size: 0.72rem; 2522 letter-spacing: 0.08em; 2523 text-transform: uppercase; 2524 color: #5d6671; 2525} 2526.stg-phone__module strong { 2527 display: block; 2528 margin-top: 0.25rem; 2529 font-size: 1.35rem; 2530 color: #17324d; 2531} 2532.stg-phone__module p { 2533 margin: 0.4rem 0 0; 2534 font-size: 0.78rem; 2535 line-height: 1.55; 2536 color: #5d6671; 2537} 2538.stg-phone__list { 2539 display: grid; 2540 gap: 0.45rem; 2541} 2542@media (prefers-color-scheme: dark) { 2543 .shitai-guide-entry { 2544 border-color: rgba(255,255,255,0.12); 2545 background: 2546 radial-gradient(circle at top left, rgba(210,122,51,0.18), transparent 32%), 2547 linear-gradient(135deg, rgba(18,28,40,0.98), rgba(20,48,56,0.96)); 2548 box-shadow: 0 22px 46px rgba(0,0,0,0.34); 2549 } 2550 .stg-copy { color: #eef3f7; } 2551 .stg-kicker, 2552 .stg-phone__pillrow span, 2553 .stg-phone__list span { background: rgba(255,255,255,0.1); color: rgba(245,247,250,0.92); } 2554 .stg-copy h3, 2555 .stg-phone__module strong { color: #fff8f0; } 2556 .stg-tags span, 2557 .stg-phone__module { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: #eef3f7; } 2558 .stg-copy p, 2559 .stg-phone__module p, 2560 .stg-phone__module label { color: rgba(226,232,240,0.82); } 2561 .stg-phone__screen { background: linear-gradient(180deg, rgba(24,34,44,0.98), rgba(18,28,40,0.98)); border-color: #0c1723; } 2562} 2563@media (max-width: 900px) { 2564 .shitai-guide-entry { 2565 grid-template-columns: 1fr; 2566 } 2567 .stg-phone { 2568 justify-content: flex-start; 2569 } 2570} 2571</style> 2572 2573<!-- - *2023.09 - present*, Postgraduate, ShanghaiTech University, Shanghai, China. 2574- *2019.09 - 2023.06*, Bachelor, ShanghaiTech University, Shanghai, China. --> 2575 2576 </section> 2577 </div> 2578 </article> 2579 </div> 2580 2581
2581<script src="/assets/js/main.min.js?v=126190281600"></script>
2581 2582
2583<script src="/assets/js/fiddle-home.js?v=126190281600" defer></script>
2583 2584 2585 2586 2587 2588<!-- Global site tag (gtag.js) - Google Analytics -->
2589<script async src="https://www.googletagmanager.com/gtag/js?id="></script>
vendor: 1 bytes, line 2589
2589
2590<script> 2591 window.dataLayer = window.dataLayer || []; 2592 function gtag(){dataLayer.push(arguments);} 2593 gtag('js', new Date()); 2594 2595 gtag('config', ""); 2596</script>
2596 2597 2598
2599<script> 2600 $(document).ready(function () { 2601 2602 var gsDataBaseUrl = 'https://cdn.jsdelivr.net/gh/yiteng-xu/yiteng-xu.github.io@' 2603 2604 $.getJSON(gsDataBaseUrl + "google-scholar-stats/gs_data.json", function (data) { 2605 var totalCitation = data['citedby'] 2606 document.getElementById('total_cit').innerHTML = totalCitation; 2607 var citationEles = document.getElementsByClassName('show_paper_citations') 2608 Array.prototype.forEach.call(citationEles, element => { 2609 var paperId = element.getAttribute('data') 2610 var numCitations = data['publications'][paperId]['num_citations'] 2611 element.innerHTML = '| Citations: ' + numCitations; 2612 }); 2613 }); 2614 }) 2615</script>
2615 2616 2617 2618 </body> 2619</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.