joyce.github.io/index.html at main · sharp-007/joyce.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Joyce Pan | Data + AI Portfolio</title>
  <meta name="description" content="Joyce Pan - Data + AI Engineer with expertise in industrial AI, machine learning, deep learning, and LLM applications.">
  <link rel="icon" type="image/svg+xml" href="images/uploads/logos/favicon.svg">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;700;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>

<!-- ===== NAVIGATION ===== -->
<nav class="nav" id="nav">
  <div class="nav-inner">
    <a href="#" class="nav-logo">Joyce Pan</a>
    <ul class="nav-links" id="navLinks">
      <li><a href="#about" data-en="About" data-zh="关于">About</a></li>
      <li><a href="#experience" data-en="Experience" data-zh="经历">Experience</a></li>
      <li><a href="#projects" data-en="Projects" data-zh="项目">Projects</a></li>
      <li><a href="#talks" data-en="Talks" data-zh="公开演讲">Talks</a></li>
      <li><a href="#blog" data-en="Blog" data-zh="博客文章">Blog</a></li>
      <li><a href="#publications" data-en="Publications" data-zh="发表作品">Publications</a></li>
      <li><a href="#creative" data-en="Creative" data-zh="创意作品">Creative</a></li>
      <li><a href="#contact" data-en="Contact" data-zh="联系">Contact</a></li>
      <li><button class="lang-toggle" id="langToggle" onclick="toggleLang()">EN</button></li>
    </ul>
    <button class="mobile-menu-btn" id="mobileMenuBtn" onclick="toggleMenu()">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
    </button>
  </div>
</nav>

<!-- ===== HERO ===== -->
<section class="hero" id="about">
  <div class="hero-inner" id="hero-content">
    <!-- Dynamically rendered from data/profile.json -->
  </div>
</section>

<!-- ===== HIGHLIGHT CAROUSEL ===== -->
<section class="carousel-section">
  <div class="carousel-wrapper" id="carousel">
    <button class="carousel-arrow carousel-prev" id="carouselPrev">‹</button>
    <div class="carousel-viewport">
      <div class="carousel-track" id="carouselTrack">
        <!-- Dynamically rendered from data/carousel.json -->
      </div>
    </div>
    <button class="carousel-arrow carousel-next" id="carouselNext">›</button>
  </div>
</section>

<!-- ===== EXPERIENCE ===== -->
<section class="section" id="experience">
  <div class="section-inner">
    <h2 class="section-title fade-in" data-en="Experience" data-zh="经历">Experience</h2>
    <div class="exp-list" id="experience-list">
      <!-- Dynamically rendered from data/experience.json -->
    </div>
  </div>
</section>

<!-- ===== FEATURED PROJECTS ===== -->
<section class="section" id="projects">
  <div class="section-inner">
    <h2 class="section-title fade-in" data-en="Featured Projects" data-zh="精选项目">Featured Projects</h2>
    <p class="section-subtitle fade-in" data-en="Data & AI solutions for industrial applications | Fun data analysis projects" data-zh="面向工业场景的数据与AI解决方案 | 趣味数据分析项目">面向工业场景的数据与AI解决方案 | 趣味数据分析项目</p>

    <div id="projects-grid">
      <!-- Dynamically rendered from data/projects.json -->
    </div>
  </div>
</section>

<!-- ===== TALKS ===== -->
<section class="section" id="talks">
  <div class="section-inner">
    <h2 class="section-title fade-in" data-en="Talks & Webinars" data-zh="公开演讲">Talks &amp; Webinars</h2>
    <p class="section-subtitle fade-in" data-en="DOE & SQM webinar series for R&D, process and quality engineers" data-zh="面向研发、工艺和质量工程师的数据可视化、实验设计、统计质量管理系列公开课">DOE &amp; SQM webinar series for R&D, process and quality engineers</p>

    <div id="talks-grid">
      <!-- Dynamically rendered from data/talks.json -->
    </div>
  </div>
</section>

<!-- ===== BLOG ===== -->
<section class="section" id="blog">
  <div class="section-inner">
    <h2 class="section-title fade-in" data-en="Blog & Articles" data-zh="博客文章">Blog &amp; Articles</h2>
    <p class="section-subtitle fade-in" data-en="AI product/project practice, personal reflections and industry insights" data-zh="AI产品与项目实践 | 个人思考 | 行业洞察">AI产品与项目实践 | 个人思考 | 行业洞察</p>

    <div id="blogs-grid">
      <!-- Dynamically rendered from data/blogs.json -->
    </div>
  </div>
</section>

<!-- ===== PUBLICATIONS ===== -->
<section class="section" id="publications">
  <div class="section-inner">
    <h2 class="section-title fade-in" data-en="Publications" data-zh="发表作品">Publications</h2>
    <div class="pub-list fade-in">
      <div class="pub-item">
        <span class="pub-type" data-en="White Paper" data-zh="白皮书">White Paper</span>
        <div class="pub-title-row">
          <a href="https://www.jmp.com/zh-hans/resources/white-papers/doe-from-zero-for-engineers" target="_blank" data-en="DOE Zero-to-One Guide for Engineers" data-zh="从0到1掌握DOE：为工程师定制的零基础DOE手册">DOE Zero-to-One Guide for Engineers</a>
          <a href="publications/工程师的DOE零基础指南-实验设计赋能研发创新与工艺优化.pdf" download class="pub-download" title="Download PDF"><svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 16l-6-6h4V4h4v6h4l-6 6zm-6 2h12v2H6v-2z"/></svg></a>
        </div>
        <span class="pub-meta">Joyce Pan &middot; JMP / SAS &middot; 2025</span>
      </div>
      <div class="pub-item">
        <span class="pub-type" data-en="Invention Patent" data-zh="发明专利">Invention Patent</span>
        <div class="pub-title-row">
          <a href="https://patents.google.com/patent/CN110106474B/en" target="_blank" data-en="Conductive Fabric, Preparation Method and Application" data-zh="导电织物、其制备方法及应用">Conductive Fabric, Preparation Method and Application</a>
          <a href="publications/导电织物专利-2019104980463-CN 110106474 B .pdf" download class="pub-download" title="Download PDF"><svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 16l-6-6h4V4h4v6h4l-6 6zm-6 2h12v2H6v-2z"/></svg></a>
        </div>
        <span class="pub-meta">Tao Xu, Yefeng Xu, Jiao Pan &middot; CN110106474B &middot; 2021</span>
      </div>
      <div class="pub-item">
        <span class="pub-type">SCI Paper</span>
        <div class="pub-title-row">
          <a href="https://journals.sagepub.com/doi/10.1177/0731684416684020" target="_blank">Hybrid Effect of Carbon Nanotube Film and Ultrathin Carbon Fiber Prepreg Composites</a>
          <a href="publications/Hybrid effect of carbon nanotube film and ultrathin carbon fiber prepreg composites.pdf" download class="pub-download" title="Download PDF"><svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 16l-6-6h4V4h4v6h4l-6 6zm-6 2h12v2H6v-2z"/></svg></a>
        </div>
        <span class="pub-meta">Jiao Pan, Min Li, Shaokai Wang et al. &middot; Journal of Reinforced Plastics and Composites &middot; 2016</span>
      </div>
    </div>
  </div>
</section>

<!-- ===== CREATIVE ===== -->
<section class="section" id="creative">
  <div class="section-inner">
    <h2 class="section-title fade-in" data-en="Creative Work" data-zh="创意作品">Creative Work</h2>
    <div class="creative-card fade-in">
      <div class="creative-text">
        <h3 data-en="Light Everywhere | AIGC Original Short Film" data-zh="城市角落的光 | AI原创音乐MV | 原创动画短片">Light Everywhere | AIGC Original Short Film</h3>
        <p data-en="Independently completed the entire songwriting and music video production pipeline: lyrics creation, song generation, character design, storyboard, prompt engineering, video generation, compositing, and publishing." data-zh="独立完成词曲和MV创作全流程：创作歌词、生成歌曲、构造角色、设计分镜、编写提示词、生成视频、合成视频、内容发布。">Independently completed the entire songwriting and music video production pipeline: lyrics creation, song generation, character design, storyboard, prompt engineering, video generation, compositing, and publishing.</p>
        <p class="creative-tech" data-en="Tech: MiniMax Music-2.6, Seedance 2.0 Fast, AIGC" data-zh="技术栈：MiniMax Music-2.6、Seedance 2.0 Fast、AIGC">Tech: MiniMax Music-2.6, Seedance 2.0 Fast, AIGC</p>
        <div class="creative-links">
          <a href="https://www.youtube.com/watch?v=OMIchR2C6qs" target="_blank">YouTube</a>
          <a href="https://www.bilibili.com/video/BV1pyofB2Ebe/" target="_blank">Bilibili</a>
          <a href="https://music.163.com/#/song?id=3376108932" target="_blank" data-en="NetEase Music" data-zh="网易云音乐">NetEase Music</a>
        </div>
        <div class="music-player">
          <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" src="https://music.163.com/outchain/player?type=2&id=3376108932&auto=0&height=66"></iframe>
        </div>
      </div>
      <div class="creative-video">
        <div class="video-switch">
          <button class="video-switch-btn active" onclick="switchVideo('bilibili')">Bilibili</button>
          <button class="video-switch-btn" onclick="switchVideo('youtube')">YouTube</button>
        </div>
        <div class="video-container" id="videoContainer">
          <iframe id="videoFrame" src="https://player.bilibili.com/player.html?bvid=BV1pyofB2Ebe&autoplay=0" title="Light Everywhere" referrerpolicy="strict-origin-when-cross-origin" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"></iframe>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ===== CONTACT ===== -->
<section class="contact-section" id="contact">
  <div class="contact-inner fade-in" id="contact-content">
    <!-- Dynamically rendered from data/contact.json -->
  </div>
</section>

<footer class="footer">
  <p>© 2026 Joyce Pan. All Rights Reserved.</p>
</footer>

<!-- Back to Top Button -->
<button class="back-to-top" id="backToTop" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
  <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 15l-6-6-6 6"/></svg>
</button>

<!-- AI Chat Widget -->
<div class="ai-chat-widget" id="aiChatWidget" style="display:none;">
  <button class="ai-chat-toggle" id="aiChatToggle" onclick="toggleAIChat()" title="Ask Joyce's AI Assistant">
    <svg class="ai-icon-open" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.5">
      <path d="M12 2a2 2 0 012 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 017 7v1h1a1 1 0 110 2h-1v1a7 7 0 01-7 7h-1v1a1 1 0 11-2 0v-1h-1a7 7 0 01-7-7v-1H2a1 1 0 110-2h1v-1a7 7 0 017-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 012-2z"/>
      <circle cx="9" cy="13" r="1.5" fill="currentColor"/>
      <circle cx="15" cy="13" r="1.5" fill="currentColor"/>
      <path d="M9 17c.83.67 2 1 3 1s2.17-.33 3-1"/>
    </svg>
    <svg class="ai-icon-close" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M18 6L6 18M6 6l12 12"/>
    </svg>
  </button>
  <div class="ai-chat-window" id="aiChatWindow">
    <div class="ai-chat-header">
      <div class="ai-chat-title">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5">
          <path d="M12 2a2 2 0 012 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 017 7v1h1a1 1 0 110 2h-1v1a7 7 0 01-7 7h-1v1a1 1 0 11-2 0v-1h-1a7 7 0 01-7-7v-1H2a1 1 0 110-2h1v-1a7 7 0 017-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 012-2z"/>
          <circle cx="9" cy="13" r="1.5" fill="currentColor"/>
          <circle cx="15" cy="13" r="1.5" fill="currentColor"/>
          <path d="M9 17c.83.67 2 1 3 1s2.17-.33 3-1"/>
        </svg>
        <span data-en="Joyce's AI Assistant" data-zh="Joyce的AI助手">Joyce的AI助手</span>
      </div>
      <button class="ai-chat-close" onclick="toggleAIChat()">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M18 6L6 18M6 6l12 12"/>
        </svg>
      </button>
    </div>
    <div class="ai-chat-body" id="aiChatBody">
      <!-- 自定义聊天界面 (proxy 模式) -->
      <div class="ai-chat-messages" id="aiChatMessages" style="display:none;">
        <div class="ai-message ai-message-bot">
          <div class="ai-message-avatar">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5">
              <path d="M12 2a2 2 0 012 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 017 7v1h1a1 1 0 110 2h-1v1a7 7 0 01-7 7h-1v1a1 1 0 11-2 0v-1h-1a7 7 0 01-7-7v-1H2a1 1 0 110-2h1v-1a7 7 0 017-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 012-2z"/>
              <circle cx="9" cy="13" r="1.5" fill="currentColor"/>
              <circle cx="15" cy="13" r="1.5" fill="currentColor"/>
              <path d="M9 17c.83.67 2 1 3 1s2.17-.33 3-1"/>
            </svg>
          </div>
          <div class="ai-message-content" data-en="Hi! I'm Joyce's AI Assistant. Ask me about Joyce's background, projects, or creative works!" data-zh="你好！我是 Joyce 的 AI 助手，可以帮你了解 Joyce 的背景、项目或作品！">你好！我是 Joyce 的 AI 助手，可以帮你了解 Joyce 的背景、项目或作品！</div>
        </div>
      </div>
      <!-- iframe 占位符 -->
      <div class="ai-chat-placeholder" id="aiChatPlaceholder">
        <div class="ai-chat-loading">
          <div class="ai-loading-dots">
            <span></span><span></span><span></span>
          </div>
          <p data-en="Loading AI Assistant..." data-zh="正在加载 AI 助手...">正在加载 AI 助手...</p>
        </div>
      </div>
    </div>
    <!-- 自定义输入框 (proxy 模式) -->
    <div class="ai-chat-input-wrapper" id="aiChatInputWrapper" style="display:none;">
      <input type="text" class="ai-chat-input" id="aiChatInput" data-en="Ask about Joyce..." data-zh="询问关于 Joyce 的问题..." placeholder="询问关于 Joyce 的问题..." />
      <button class="ai-chat-send" id="aiChatSend" onclick="sendAIMessage()">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
        </svg>
      </button>
    </div>
    <!-- Disclaimer 说明栏 -->
    <div class="ai-chat-disclaimer">
      <span data-en="⚠️ AI-generated content, use with discretion" data-zh="⚠️ 内容由 AI 生成，请谨慎使用">⚠️ 内容由 AI 生成，请谨慎使用</span>
    </div>
  </div>
</div>

<script src="script.js"></script>
</body>
</html>