-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathresume.html
More file actions
470 lines (340 loc) · 24.5 KB
/
resume.html
File metadata and controls
470 lines (340 loc) · 24.5 KB
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
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>
Resume
</title>
<meta name="description" content="Thomas Chan / 陈俊豪 - 前端架构负责人 / AI 产品与技术效能负责人 / AI 转型推动者 Phone / 电话: +86 186 1047 2034 Email / 邮箱: chenjunhao5818@gma">
<meta property="og:type" content="website">
<meta property="og:title" content="Resume">
<meta property="og:url" content="http://chenjunhao.cn/resume.html">
<meta property="og:site_name" content="Memories">
<meta property="og:description" content="Thomas Chan / 陈俊豪 - 前端架构负责人 / AI 产品与技术效能负责人 / AI 转型推动者 Phone / 电话: +86 186 1047 2034 Email / 邮箱: chenjunhao5818@gma">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2022-11-26T05:59:02.000Z">
<meta property="article:modified_time" content="2026-03-23T12:23:57.843Z">
<meta property="article:tag" content="ThomasChan Memories JavaScript ReactJs Canvas D3Js">
<meta name="twitter:card" content="summary">
<link rel="icon" href="/assets/favicon.jpeg">
<link rel="stylesheet" href="/perfect-scrollbar/css/perfect-scrollbar.min.css">
<link rel="stylesheet" href="/scripts/prism.css">
<link rel="stylesheet" href="/styles/main.css">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?3c7748f8aa5ad8039215a1783a5c0ae5";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- Cloudflare Web Analytics -->
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "421ef4a6106d44209bde6e1788533962"}'></script>
<!-- End Cloudflare Web Analytics -->
<meta name="generator" content="Hexo 7.3.0"></head>
<body
class="monochrome"
>
<div class="mobile-header">
<button class="sidebar-toggle" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="title" href="/">Memories</a>
</div>
<div class="main-container">
<div class="sidebar-bg">
<div class="sidebar">
<div class="header">
<h1 class="title"><a href="/">Memories</a></h1>
<div class="info">
<div class="content">
</div>
<div class="avatar">
<a href="/resume"><img src="/assets/avator.jpeg"></a>
</div>
</div>
</div>
<div class="body">
<ul class="nav">
<li>
<a href="/" title="Home" external="false">Home</a>
</li>
</ul>
<ul class="nav">
<li>
<a href="/resume" title="About" external="false">About</a>
</li>
<li>
<a href="https://github.com/thomaschan" title="Github" target="_blank" rel="noopener">Github</a>
</li>
<li>
<a href="/something" title="Something" external="false">Something</a>
</li>
</ul>
<ul class="nav">
<li class="tag-list-container">
<a href="javascript:;" target="_self">标签</a>
<ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/AI/" rel="tag">AI</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Agent/" rel="tag">Agent</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Engineering/" rel="tag">Engineering</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Harness-Engineering/" rel="tag">Harness Engineering</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JARVIS/" rel="tag">JARVIS</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Management/" rel="tag">Management</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/OpenClaw/" rel="tag">OpenClaw</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Product-Knowledge/" rel="tag">Product Knowledge</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Software-Development/" rel="tag">Software Development</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/angularjs/" rel="tag">angularjs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/animation/" rel="tag">animation</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/canvas/" rel="tag">canvas</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/d3-js/" rel="tag">d3.js</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/emotions/" rel="tag">emotions</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/graphql/" rel="tag">graphql</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html/" rel="tag">html</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/" rel="tag">javascript</a><span class="tag-list-count">11</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/project-management/" rel="tag">project management</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/reactjs/" rel="tag">reactjs</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/requirejs/" rel="tag">requirejs</a><span class="tag-list-count">1</span></li></ul>
</li>
</ul>
</div>
</div>
</div>
<div class="main-content">
<article id="page-" class="article article-type-page">
<h1 class="article-header">
Resume
</h1>
<div class="article-info">
<span class="article-date">
2022-11-26
</span>
</div>
<div class="article-entry">
<h2 id="Thomas-Chan-陈俊豪-前端架构负责人-AI-产品与技术效能负责人-AI-转型推动者"><a href="#Thomas-Chan-陈俊豪-前端架构负责人-AI-产品与技术效能负责人-AI-转型推动者" class="headerlink" title="Thomas Chan / 陈俊豪 - 前端架构负责人 / AI 产品与技术效能负责人 / AI 转型推动者"></a>Thomas Chan / 陈俊豪 - 前端架构负责人 / AI 产品与技术效能负责人 / AI 转型推动者</h2><ul>
<li><strong>Phone / 电话</strong>: +86 186 1047 2034</li>
<li><strong>Email / 邮箱</strong>: <a href="mailto:chenjunhao5818@gmail.com">chenjunhao5818@gmail.com</a></li>
<li><strong>Location / 所在地</strong>: Beijing, China</li>
<li><strong>Technical Blog / 技术博客</strong>: chenjunhao.cn</li>
<li><strong>GitHub</strong>: github.com/thomaschan</li>
</ul>
<h3 id="Professional-Profile-职业概况"><a href="#Professional-Profile-职业概况" class="headerlink" title="Professional Profile / 职业概况"></a>Professional Profile / 职业概况</h3><ul>
<li><strong>10 年公司核心建设者 / 10-year Core Builder</strong>: 自 2016 年公司成立初期加入，作为首位前端工程师，深度参与并推动公司产品、研发体系与技术能力从 0 到 1、再从 1 到规模化演进；长期承担关键问题攻坚、体系建设与跨部门协同推进，是公司稳定交付与持续进化的重要技术骨干。</li>
<li><strong>前端架构与平台建设 / Frontend Architecture & Platform Building</strong>: 主导企业级 BI 平台前端架构设计与长期演进，覆盖技术选型、工程体系、组件体系、性能优化、核心业务模块重构等关键领域，兼顾可维护性、扩展性与交付效率。</li>
<li><strong>AI 产品落地 / AI Productization</strong>: 主导企业 AI 产品能力建设，推动 ChatBI、Agent 工作流、LLM 集成等方向从概念验证走向实际业务场景落地，形成面向客户与内部使用的真实价值。</li>
<li><strong>技术效能与研发提效 / Engineering Effectiveness</strong>: 持续从工具、流程、规范、自动化和 AI 工作方式五个层面推动研发提效，在发布、测试、文档、协作、问题流转等环节建立更高效、更稳定的工作机制。</li>
<li><strong>AI 转型与组织推动 / AI Transformation & Organizational Enablement</strong>: 不局限于技术实现，主动推动 AI 在公司各部门的使用率与提效，识别关键杠杆点，促进管理优化、团队协作方式升级与人才职业发展。</li>
<li><strong>对外培训与业务化输出 / External Training & Commercial Enablement</strong>: 面向客户提供收费培训与咨询，主题包括 AI 提效、企业 AI 落地、研发团队 AI 进化等，能够将内部实践方法论沉淀为可交付、可复用的商业化服务内容。</li>
</ul>
<h3 id="Professional-Experience-工作经历"><a href="#Professional-Experience-工作经历" class="headerlink" title="Professional Experience / 工作经历"></a>Professional Experience / 工作经历</h3><h4 id="Beijing-Hengshi-Technology-Co-Ltd-北京衡石科技有限公司-Dec-2016-Present-2016-12-至今"><a href="#Beijing-Hengshi-Technology-Co-Ltd-北京衡石科技有限公司-Dec-2016-Present-2016-12-至今" class="headerlink" title="Beijing Hengshi Technology Co., Ltd. / 北京衡石科技有限公司 (Dec 2016 - Present / 2016.12 - 至今)"></a>Beijing Hengshi Technology Co., Ltd. / 北京衡石科技有限公司 (Dec 2016 - Present / 2016.12 - 至今)</h4><h5 id="前端架构负责人-AI-产品与技术效能负责人-AI-转型推动者"><a href="#前端架构负责人-AI-产品与技术效能负责人-AI-转型推动者" class="headerlink" title="前端架构负责人 / AI 产品与技术效能负责人 / AI 转型推动者"></a>前端架构负责人 / AI 产品与技术效能负责人 / AI 转型推动者</h5><h5 id="Frontend-Architect-AI-Product-amp-Engineering-Effectiveness-Lead-AI-Transformation-Driver"><a href="#Frontend-Architect-AI-Product-amp-Engineering-Effectiveness-Lead-AI-Transformation-Driver" class="headerlink" title="Frontend Architect / AI Product & Engineering Effectiveness Lead / AI Transformation Driver"></a>Frontend Architect / AI Product & Engineering Effectiveness Lead / AI Transformation Driver</h5><ul>
<li><p><strong>公司核心建设者 / Core Company Builder</strong></p>
<ul>
<li><p>在公司成立初期加入，作为首位前端工程师，见证并深度参与公司核心产品、研发体系和工程能力的几乎全部关键演进阶段。</p>
</li>
<li><p>长期承担疑难问题攻坚、体系建设、方向推动和跨团队协同工作，是公司研发体系中的关键支撑角色。</p>
</li>
<li><p>具有强烈的主观能动性，持续主动发现问题、提出改进方案并推动落地，不只是完成职责范围内工作，更持续推动公司整体工作方式变得更高效、更系统、更可持续。</p>
</li>
<li><p>Joined shortly after the company was founded as its first frontend engineer, and deeply contributed to nearly every critical stage of product and engineering evolution.</p>
</li>
<li><p>Took long-term responsibility for solving complex problems, building systems, driving initiatives, and supporting cross-team execution as a key technical pillar of the company.</p>
</li>
<li><p>Consistently identified improvement opportunities and pushed them into execution, helping the organization operate in a more efficient, systematic, and sustainable way.</p>
</li>
</ul>
</li>
<li><p><strong>前端架构与核心平台演进 / Frontend Architecture & Platform Evolution</strong></p>
<ul>
<li><p>从 0 到 1 搭建公司前端基础架构，并在近 10 年内持续推动技术栈、工程体系和开发模式演进。</p>
</li>
<li><p>主导 TypeScript 迁移、组件体系建设、工程规范完善、性能优化和核心业务模块重构，支撑 BI 平台复杂业务的长期扩展。</p>
</li>
<li><p>在架构演进中兼顾业务响应速度、系统可维护性和团队协作效率，使前端体系能够服务公司长期产品发展。</p>
</li>
<li><p>Built the company’s frontend foundation from scratch and continuously evolved the stack, engineering system, and development model over nearly 10 years.</p>
</li>
<li><p>Led major initiatives including TypeScript migration, reusable component systems, engineering standardization, performance optimization, and redesign of core business modules.</p>
</li>
<li><p>Balanced delivery speed, maintainability, and collaboration efficiency to support long-term product growth.</p>
</li>
</ul>
</li>
<li><p><strong>AI 产品建设与业务落地 / AI Product Development & Business Adoption</strong></p>
<ul>
<li><p>主导企业级 AI 产品能力建设，推动 ChatBI、Agent 工作流、LLM 集成等方向从探索走向产品化与业务化。</p>
</li>
<li><p>推动 AI 助手系统、AI-native 工作流等能力建设，拓展产品边界，提升用户体验和内部协作效率。</p>
</li>
<li><p>将 AI 能力与实际业务场景结合，推动形成产品差异化价值与商业化落地基础。</p>
</li>
<li><p>Led enterprise AI initiatives including conversational BI, agent workflows, and LLM integration from experimentation into practical product delivery.</p>
</li>
<li><p>Built internal AI assistant systems and AI-native workflows to extend product capability and improve operational efficiency.</p>
</li>
<li><p>Helped turn AI capability into differentiated business value and product competitiveness.</p>
</li>
</ul>
</li>
<li><p><strong>技术效能与研发提效体系 / Engineering Effectiveness & Productivity Systems</strong></p>
<ul>
<li><p>从研发全链路出发，持续推动工具建设、流程优化、规范沉淀和自动化升级，降低重复劳动，提升交付质量与团队吞吐。</p>
</li>
<li><p>建设发布说明生成、部署协同、问题优先级梳理、测试与协作流程优化等实用系统，在多个关键环节形成稳定收益。</p>
</li>
<li><p>将 AI 工作方式引入开发、测试、文档、问题处理和日常协作中，帮助团队形成更高杠杆的工作模式。</p>
</li>
<li><p>Improved engineering effectiveness through tooling, process redesign, automation, and standards across the development lifecycle.</p>
</li>
<li><p>Built systems for release note generation, deployment coordination, prioritization, testing support, and workflow optimization.</p>
</li>
<li><p>Introduced AI-assisted ways of working into development, testing, documentation, issue handling, and collaboration to increase team leverage.</p>
</li>
</ul>
</li>
<li><p><strong>AI 转型推动与组织赋能 / AI Transformation & Organizational Enablement</strong></p>
<ul>
<li><p>不只聚焦产品研发本身，也主动推动 AI 在公司不同岗位和部门中的应用，帮助团队找到可落地、可复制的提效场景。</p>
</li>
<li><p>经常从管理视角、协作视角和人才成长视角提出改进建议，并推动部分机制优化落地。</p>
</li>
<li><p>在组织层面帮助公司适应 AI 时代的新工作方式，促进团队进化与认知升级。</p>
</li>
<li><p>Drove practical AI adoption across teams and functions by identifying repeatable, high-impact use cases.</p>
</li>
<li><p>Regularly proposed improvements from management, collaboration, and talent development perspectives, helping drive organizational optimization.</p>
</li>
<li><p>Supported the company’s adaptation to AI-era ways of working through both systems thinking and practical execution.</p>
</li>
</ul>
</li>
<li><p><strong>对外培训与商业化输出 / External Training & Commercial Output</strong></p>
<ul>
<li><p>面向客户提供收费培训和咨询服务，内容涵盖 AI 提效、企业 AI 落地、研发团队 AI 进化等方向。</p>
</li>
<li><p>能够将内部真实实践抽象为方法论、课程内容和可交付方案，形成对外可销售的能力输出。</p>
</li>
<li><p>Delivered paid training and consulting services for clients on AI productivity, enterprise AI adoption, and AI evolution for engineering teams.</p>
</li>
<li><p>Converted internal hands-on experience into structured methodologies, training content, and commercially deliverable offerings.</p>
</li>
</ul>
</li>
</ul>
<h4 id="Antourong-Beijing-Network-Technology-Co-安投融（北京）网络科技有限公司-Oct-2014-Dec-2016-2014-10-2016-12"><a href="#Antourong-Beijing-Network-Technology-Co-安投融（北京）网络科技有限公司-Oct-2014-Dec-2016-2014-10-2016-12" class="headerlink" title="Antourong (Beijing) Network Technology Co. / 安投融（北京）网络科技有限公司 (Oct 2014 - Dec 2016 / 2014.10 - 2016.12)"></a>Antourong (Beijing) Network Technology Co. / 安投融（北京）网络科技有限公司 (Oct 2014 - Dec 2016 / 2014.10 - 2016.12)</h4><p><strong>Full Stack Developer / 全栈开发工程师</strong></p>
<ul>
<li>负责金融平台核心模块开发，包括交易系统与用户系统。 / Developed core modules for a financial platform, including trading and user systems.</li>
<li>实现接口安全机制，防御暴力破解等风险。 / Implemented API security mechanisms against brute-force attacks.</li>
<li>Tech Stack / 技术栈: PHP (Yii) / MySQL / React / JavaScript</li>
</ul>
<h4 id="Beijing-Wogou-Technology-Co-北京沃购科技有限公司-Mar-2014-Oct-2014-2014-03-2014-10"><a href="#Beijing-Wogou-Technology-Co-北京沃购科技有限公司-Mar-2014-Oct-2014-2014-03-2014-10" class="headerlink" title="Beijing Wogou Technology Co. / 北京沃购科技有限公司 (Mar 2014 - Oct 2014 / 2014.03 - 2014.10)"></a>Beijing Wogou Technology Co. / 北京沃购科技有限公司 (Mar 2014 - Oct 2014 / 2014.03 - 2014.10)</h4><p><strong>Web Developer / Web 开发工程师</strong></p>
<ul>
<li>负责运营商级 WiFi 认证门户系统开发。 / Built carrier-grade WiFi authentication portal systems.</li>
<li>Tech Stack / 技术栈: HTML / CSS / JavaScript</li>
</ul>
<h3 id="Technical-Proficiencies-技术能力"><a href="#Technical-Proficiencies-技术能力" class="headerlink" title="Technical Proficiencies / 技术能力"></a>Technical Proficiencies / 技术能力</h3><p><strong>Architecture & Engineering / 架构与工程</strong></p>
<ul>
<li>Frontend Architecture / 前端架构</li>
<li>React / TypeScript</li>
<li>Component System Design / 组件体系设计</li>
<li>Engineering Standardization / 工程规范建设</li>
<li>Performance Optimization / 性能优化</li>
<li>CI/CD Design / CI/CD 设计</li>
<li>Developer Tooling / 开发者工具链</li>
</ul>
<p><strong>AI & Product / AI 与产品</strong></p>
<ul>
<li>AI Productization / AI 产品化</li>
<li>Prompt Engineering / Prompt 工程</li>
<li>Context Engineering / Context 工程</li>
<li>RAG</li>
<li>Vector Search (PGvector)</li>
<li>Agent Frameworks / Agent 框架</li>
<li>GitHub Copilot</li>
<li>AI Workflow Design / AI 工作流设计</li>
</ul>
<p><strong>Leadership & Transformation / 领导力与转型推动</strong></p>
<ul>
<li>Engineering Effectiveness / 工程效能</li>
<li>Workflow Optimization / 工作流优化</li>
<li>Cross-team Collaboration / 跨团队协同</li>
<li>Organizational Enablement / 组织赋能</li>
<li>Talent Development Support / 人才发展支持</li>
<li>External Training & Consulting / 对外培训与咨询</li>
</ul>
</div>
<footer class="article-footer">
<div class="cc">
<a href="http://creativecommons.org/licenses/by-sa/4.0/deed.z" target="_blank" title="署名-相同方式共享">
<img src="/images/cc/cc.png">
<img src="/images/cc/by.png">
<img src="/images/cc/sa.png">
<span>
本作品采用知识共享 署名-相同方式共享 4.0 国际许可协议进行许可。
</span>
</a>
</div>
</footer>
</article>
<div id="comments"></div>
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css" />
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script>
(function initComments() {
var gitalk = new Gitalk({
clientID: '1e2ae003530b581cd762',
clientSecret: 'c144bbbb8c653b2c69c3082910b79abc86edfa4c',
repo: 'ThomasChan.github.io',
owner: 'thomaschan',
admin: ['thomaschan'],
// facebook-like distraction free mode
distractionFreeMode: false,
id: 'Blog',
title: 'Blog',
});
gitalk.render('comments');
})();
</script>
<div class="main-footer">
© 2026 Memories - Powered by <a href="http://hexo.io" target="_blank">Hexo</a>
</div>
</div>
</div>
<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="/PhotoSwipe/photoswipe.css">
<link rel="stylesheet" href="/PhotoSwipe/default-skin/default-skin.css">
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe.
It's a separate element as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides.
PhotoSwipe keeps only 3 of them in the DOM to save memory.
Don't modify these 3 pswp__item elements, data is added later on. -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
<script src="/PhotoSwipe/photoswipe.js"></script>
<script src="/PhotoSwipe/photoswipe-ui-default.js"></script>
<script src="/perfect-scrollbar/js/min/perfect-scrollbar.min.js"></script>
<script src="/scripts/prism.js"></script>
<script src="/scripts/main.js"></script>
</body>
</html>