-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhome_chn.html
964 lines (779 loc) · 35.5 KB
/
home_chn.html
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
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
<!DOCTYPE html>
<html lang="zh-Hans"> <!--Chinese (Simplified Mandarin Language -->
<head>
<!-- All Meta Tags -->
<!--Web Compatibility -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Traditional Web SEO -->
<title>德光 | 网站应用程序工程 | 工程师</title>
<meta name="description" content="德光个人网页, 简介介绍自己, 他的技能, 知识与经验. 你可以找出他在这时刻做什么">
<meta name="author" content="Teck">
<!-- Social Media SEO -->
<meta property="og:title" content="德光 | 网站应用程序工程 | 工程师">
<meta property="og:description" content="德光个人网页, 简介介绍自己, 他的技能, 知识与经验. 你可以找出他在这时刻做什么">
<meta property="og:type" content="website">
<meta property="og:image" content='/images/social/tk.jpg'>
<!-- End of all Meta Tags -->
<!-- Other Links to Style Guides -->
<!-- Google Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- FontAwesome Icons -->
<link rel="stylesheet" href="css/icons/font-awesome-4.7.0/css/font-awesome.min.css">
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional Bootstrap Theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- marcandrews Off canvas nav for Bootstrap CSS from Github hosted by Phil Hughes -->
<link href="css/bootstrap_offcanvas.css" rel="stylesheet">
<!-- Animate CSS from Github -->
<link rel="stylesheet" href="css/animate.min.css">
<!-- Header Animation CSS from Github hosted by WickyNilliams-->
<link href="css/headroom.css" rel="stylesheet">
<!-- Custom CSS by Teck -->
<link href="css/custom.css" rel="stylesheet">
<!-- Custom Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,800,900,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- End of Links to Other Style Guides -->
<!-- Logo/Icon on Browser Tab from Favicon Generator -->
<link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" href="images/icons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="images/icons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="images/icons/manifest.json">
<link rel="mask-icon" href="images/icons/safari-pinned-tab.svg" color="#254471">
<meta name="theme-color" content="#ffffff">
<!-- End of Logo/Icon on Browser Tab from Favicon Generator -->
</head>
<body class="body-offcanvas">
<header class="clearfix">
<!-- Static Fixed Navbar Section -->
<nav id="navbar" class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" style="float:left;">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img class="img-responsive" src="images/logos/profile_logo.svg" alt="personal_profile_logo">
</a>
</div> <!-- /navbar-header -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-offcanvas navbar-offcanvas-touch" id="js-bootstrap-offcanvas">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about-wrapper">关于自己</a></li>
<li><a href="#experience-sec">经验</a></li>
<li><a href="#portfolio-sec">工作组合</a></li>
<li><a href="#future-sec">未来</a></li>
<li><a href="#contact-sec">联系</a></li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /container -->
</nav> <!-- /navbar -->
</header> <!-- /.clearfix -->
<!-- End Static Fixed Navbar Section ->
<!-- Carousel Image Section -->
<div id="carousel-img" class="sec2-carousel-container">
<!-- Carousel Image Section -->
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> <!-- /.carousel-indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- First slide -->
<div class="active item">
<img class="img-responsive" src="images/backgrounds/melbourne_city_view.jpg" data-color="lightblue" alt="melbourne_city_view image">
<div class="carousel-caption">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 slide1-text" data-animation="animated fadeInUp">
<h1 class="slide1-h">
我是德光
</h1>
<p class="slide1-p">
#居留在墨尔本, 澳大利亚
</p>
</div>
</div> <!-- /.carousel-caption -->
</div> <!-- /.item -->
<!-- Second slide -->
<div class="item">
<img class="img-responsive" src="images/backgrounds/ocean_road_view.jpg" data-color="lightyellow" alt="great_ocean_road_view image">
<div class="carousel-caption">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 slide2-text" data-animation="animated fadeInUp">
<h1 class="slide2-h">
在RMIT大学毕业, 成为一位太空飞航工程师
</h1>
<p class="slide2-p">
#在世界上最宜居的城市享受着工作和生活的体验
</p>
</div>
</div> <!-- /.carousel-caption -->
</div><!-- /.item -->
<!-- Third slide -->
<div class="item">
<img class="img-responsive" src="images/backgrounds/victoria_vineyard_view.jpg" data-color="lightgreen" alt="yarra_view_vineyard_view image">
<div class="carousel-caption">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 slide3-text" data-animation="animated fadeInUp">
<h1 class="slide3-h">
我很想在信息技术这一行探索我的潜力
</h1>
<p class="slide3-p">
#就在Coderfactory开始学习以及挑战的旅程
</p>
</div>
</div> <!-- /.carousel-caption -->
</div><!-- /.item -->
</div> <!-- /.carousel-inner -->
</div> <!-- /#carousel-example-generic -->
</div> <!-- /#carousel-img -->
<!-- End of Carousel Image Section -->
<!-- About Myself Section -->
<div id="about-wrapper">
<div class="container-fluid col-xs-12 col-sm-12 col-md-12 col-lg-12 about-myself">
<h1 class="about-me-h1">关于自己</h1>
<div class="col-xs-10 col-xs-offset-1 col-sm-4 col-sm-offset-4 col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4">
<li role="separator" class="divider about-divider"></li>
</div>
<div class="animation-about-element slide-left col-xs-12 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<p class="about-me-p1">
我描述自己为 "将军". 总是会要让我自己下手把所有事情做好和把所有问题解决好.
我不怕任何新的挑战去做些新的产品因为我相信用工努力与耐心可以突破一切的阻碍. 天空不再是极限.
</p>
<p class="about-me-p2">
我最终的目标是要创造和建立一些对社会有道德责任的手提应用程序. 我也希望这些产品能够为不同的公业带
来跟大的技术和操作上的进步.
</p>
<p class="about-me-p3">
除了工作和学习意外, 我也喜欢认识一些不同的专业人士, 参与团体运动, 听音乐, 旅行和做一些志愿服务.
</p>
</div>
</div> <!-- /.about-myself -->
</div> <!-- /#about-wrapper -->
<!-- End of About Myself Section -->
<!-- Start of Parallax Js Container -->
<!-- Wrapper Container above BG Image Container -->
<div class="experience-wrapper">
<div class="container-fluid col-xs-12 col-sm-12 col-md-12 col-lg-12">
</div>
</div>
<!-- End of Wrapper Container above BG Image Container -->
<!-- BG Image Container Using Parallax Js-->
<div id="experience-sec0" class="parallax-window" data-parallax="scroll" data-image-src="images/backgrounds/workplace.jpg">
<!-- Read More Button Container -->
<div class="container col-xs-12 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4 find-out-more">
<a class="btn find-more-btn" href="#experience-sec" role="button"><span>继续阅读 </span></a>
</div>
<!-- End of Read More Button Container -->
</div>
<!-- End of BG Image Container Using Parallax Js-->
<!-- Wrapper Container after BG Image Container -->
<div id="experience-sec" class="window-experience-wrapper">
<!-- Experience Section -->
<div class="container-fluid col-xs-12 col-sm-12 col-md-12 col-lg-12 experience">
<h1 class="experience-h1">经验</h1>
<div class="col-xs-10 col-xs-offset-1 col-sm-4 col-sm-offset-4 col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4">
<li role="separator" class="divider experience-divider"></li>
</div>
<div class="animation-experience-element slide-up col-xs-12 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<p class="sub-exp experience-p1">
我是一个有经验的专业人士. 我在大学获得太空飞航工程以及航空管理的一等荣誉毕业学位.
我的经历跨越过不同的领域: 行政和技术数据流程, 飞机维修控制和运行调度, 工程设计和技术协助,
二维和三维起草绘图生产.
</p>
<p class="sub-exp experience-p2">
多年来的工作与学习经验, 我有机会在航空修理和航空设计工业服务,
在General Aviation Maintenance Pty. Ltd. 和 Five Rings Aerospace Ltd. 着出不少的贡献.
</p>
<p class="sub-exp experience-p3">
我很有信心以我多年来积累的实践技能, 知识和经验可以帮助我达到我要成为一个全堆的网站应用程序工程师.
</p>
</div>
</div> <!-- /.experience -->
</div> <!-- /#experience-sec -->
<!-- End of Wrapper Container after BG Image Container -->
<!-- End of of Parallax Js Container -->
<!-- Blank Div to seperate Sections Before & After -->
<div class="container-fluid addition"></div>
<!-- /.addition -->
<!-- Portfolio Section -->
<div id="portfolio-sec" class="container-fluid portfolio">
<div class="animation-portfolio-element portfolio-slide-left portfolio-inner-div">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 portfolio-bg-content">
<h1 class="portfolio-bg-content-heading">工作组合</h1>
<!-- Toggle Button Section -->
<div class="portfolio-btn-div" data-toggle="buttons">
<label class="btn folio-toggler active portfolio-btn1" data-image-id="#folio1">
<input type="radio" name="options" id="option1"> 1
</label>
<li role="separator" class="divider portfolio-btn-divider"></li>
<label class="btn folio-toggler portfolio-btn2" data-image-id="#folio2">
<input type="radio" name="options" id="option2"> 2
</label>
<li role="separator" class="divider portfolio-btn-divider"></li>
<label class="btn folio-toggler portfolio-btn3" data-image-id="#folio3">
<input type="radio" name="options" id="option3"> 3
</label>
</div> <!-- /.portfolio-btn-div -->
<!-- End of Toggle Button Section -->
<!-- First Portfolio -->
<div id="folio1" class="folio-toggle">
<h3 class="portfolio-bg-content-heading3">飞机维修控制 & 操作时间调度</h3>
<p class="portfolio-bg-content-elaboration">技能 / 知识需求: 航空条例 & 高级Excel数学和功能基础</p>
<div class="animation-element bounce-up">
<div> <!-- remove the default class="subject" so that image will appear straightaway onload -->
<img class="center-block img-responsive" src="images/pictures/portfolio_1.jpg" alt="portfolio_1 illustration">
</div>
</div>
</div> <!-- /.folio-toggle -->
<!-- Second Portfolio -->
<div id="folio2" class="folio-toggle" style="display:none;">
<h3 class="portfolio-bg-content-heading3">工程设计与技术协助</h3>
<p class="portfolio-bg-content-elaboration">技能 / 知识需求: 电流 & 飞机建筑结构分析</p>
<div class="animation-element bounce-up1">
<div class="subject1">
<img class="center-block img-responsive" src="images/pictures/portfolio_2.jpg" alt="portfolio_2 illustration">
</div>
</div>
</div> <!-- /.folio-toggle -->
<!-- Third Portfolio -->
<div id="folio3" class="folio-toggle" style="display:none;">
<h3 class="portfolio-bg-content-heading3">二维和三维绘图生产</h3>
<p class="portfolio-bg-content-elaboration">技能 / 知识需求: Autocad & Catia & Solidwords</p>
<div class="animation-element bounce-up2">
<div class="subject2">
<img class="center-block img-responsive" src="images/pictures/portfolio_3.jpg" alt="portfolio_3 illustration">
</div>
</div>
</div> <!-- /.folio-toggle -->
</div> <!-- /portfolio-bg-content -->
</div> <!-- /.portfolio-inner-div -->
</div> <!-- /#portfolio-sec -->
<!-- End of Portfolio Section -->
<!-- Future Skills Section -->
<div id="future-sec" class="container-fluid future-container">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1 future-inner-container">
<div class="container-fluid future-content-0">
<h1 class="future-h1">未来就是现在!</h1>
</div>
<div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3">
<li role="separator" class="divider future-divider"></li>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 future-content-1">
<p class="future-p1">您已阅读并看到我过去的经验和工作项目组合.</p>
<p class="future-p2">其实, 这只是我某一些的细节.</p>
<p class="future-p3">在这个旅程的尽头, 我将会配备着更多的超级电脑技术.</p>
<p class="future-p4">这些技术将会被用来实现我的最终目标.</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 future-content-2">
<div id="jssor_1" class="jssor-div">
<!-- Loading Screen -->
<div class="loading-div" data-u="loading">
<div class="filter-div"></div>
<div class="loading-logo-div"></div>
</div>
<!-- End of Loading Screen -->
<!-- Logo/Icons Container -->
<div class="logo-slide-div" data-u="slides">
<div>
<img data-u="image" src="images/logos/code.png" alt="skill_logo_1"/>
</div>
<div>
<img data-u="image" src="images/logos/code_1.png" alt="skill_logo_2"/>
</div>
<div>
<img data-u="image" src="images/logos/code_2.png" alt="skill_logo_3"/>
</div>
<div>
<img data-u="image" src="images/logos/code_3.png" alt="skill_logo_4"/>
</div>
<div>
<img data-u="image" src="images/logos/code_4.png" alt="skill_logo_5"/>
</div>
<div>
<img data-u="image" src="images/logos/code_5.png" alt="skill_logo_6"/>
</div>
<div>
<img data-u="image" src="images/logos/code_6.png" alt="skill_logo_7"/>
</div>
<div>
<img data-u="image" src="images/logos/code_7.png" alt="skill_logo_8"/>
</div>
<div>
<img data-u="image" src="images/logos/code_8.png" alt="skill_logo_9"/>
</div>
<div>
<img data-u="image" src="images/logos/code_9.png" alt="skill_logo_10"/>
</div>
<div>
<img data-u="image" src="images/logos/code_10.png" alt="skill_logo_11"/>
</div>
<div>
<img data-u="image" src="images/logos/code_11.png" alt="skill_logo_12"/>
</div>
<div>
<img data-u="image" src="images/logos/code_12.png" alt="skill_logo_13"/>
</div>
<div>
<img data-u="image" src="images/logos/code_13.png" alt="skill_logo_14"/>
</div>
<div>
<img data-u="image" src="images/logos/code_14.png" alt="skill_logo_15"/>
</div>
</div> <!-- /.logo-slide-div -->
</div> <!-- /.jssor-div -->
</div> <!-- /.future-content-2 -->
</div> <!-- /.future-inner-container -->
</div> <!-- /#portfolio-sec -->
<!-- End of Future Skills Section -->
<!-- Future Skills Section -->
<div id="future-project-sec" class="container-fluid future-project-container">
<h1 class="future-project-h1">未来工程项目</h1>
<div class="col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-4 col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4">
<li role="separator" class="divider future-project-divider"></li>
</div>
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1 future-project-inner-container">
<!-- First Project -->
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 animation-project-element multi-step-left future-project-1">
<div class="gallery">
<img class="center-block img-circle img-responsive" src="images/pictures/project_1.jpg" alt="project_1 illustration">
<h1 class="project1">项目 一</h1>
<p class="project1-details">网络和手提平台连接广告公司和私人驾驶者达到营销活动目标.</p>
</div>
</div>
<!-- Second Project -->
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 animation-project-element multi-step-right future-project-2">
<div class="gallery">
<img class="center-block img-circle img-responsive" src="images/pictures/project_2.jpg" alt="project_2 illustration">
<h1 class="project2">项目 二</h1>
<p class="project2-details">手提平台协助球员连接其他球员去进行不同的团体运动.</p>
</div>
</div>
<!-- Third Project -->
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 animation-project-element multi-step-left future-project-3">
<div class="gallery">
<img class="center-block img-circle img-responsive" src="images/pictures/project_3.jpg" alt="project_3 illustration">
<h1 class="project3">项目 三</h1>
<p class="project3-details">VR 和手提技术让消费者在家里二十四/七进入虚拟环境购物活动.</p>
</div>
</div>
</div> <!-- /.future-project-inner-container -->
</div> <!-- /#future-project-sec -->
<!-- End of Future Projects Section -->
<!-- Contact Section -->
<div id="contact-sec" class="container-fluid contact-container">
<h1 class="contact-heading">联系</h1>
<div class="col-xs-10 col-xs-offset-1 col-sm-4 col-sm-offset-4 col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4">
<li role="separator" class="divider contact-divider"></li>
</div>
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
<p class="contact-p">如果您有什么疑问, 问题或者是有什么笑话想与我分享,
不妨给我一个留言. 我会尽快回复.
</p>
</div>
<!-- Using formspree IO -->
<div class="container-fluid">
<form action="https://formspree.io/teckyap@hotmail.com.au" method="POST">
<input class="input-name" type="email" name="_replyto" placeholder="您的电子邮件地址">
<textarea class="message-input" rows="5" placeholder="您的信息"></textarea>
<button class="submit-message" type="submit"><span>发送 </span></button>
</form>
</div>
<!-- End of Using formspree IO -->
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
<p class="contact-social">你也可以跟随我的社交媒体.</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<a class="socialicon1-link" aria-hidden="true" href="https://github.com/teck7"><i class="fa fa-github socialicon1"></i></a>
<a class="socialicon2-link" aria-hidden="true" href="https://twitter.com/Teckoder"><i class="fa fa-twitter socialicon2"></i></a>
<a class="socialicon3-link" aria-hidden="true" href="https://www.linkedin.com/in/teck-yap-1a8a39a1"><i class="fa fa-linkedin socialicon3"></i></a>
</div>
</div> <!-- /#contact-sec -->
<!-- End of Contact Section -->
<!--Section Footer-->
<footer class="footer">
<div class="container-fluid sec-footer-div">
<ul class="list-inline text-center">
<li class="footer-li">
<a href="#about-wrapper">关于自己</a>
</li>
<li class="footer-li">
<a href="#experience-sec0">经验</a>
</li>
<li class="footer-li">
<a href="#portfolio-sec">工作组合</a>
</li>
<li class="footer-li">
<a href="#future-sec">未来</a>
</li>
<li>
<a id="top" href="#">
<i class="fa fa-1x fa-arrow-up top-btn"></i>
</a>
</li>
</ul> <!-- /.list-inline -->
</div> <!-- /.sec-footer-div -->
</footer> <!-- /.footer -->
<!-- End of Footer Section -->
<!-- Section of Scroll to Top Visible/Invisible Button -->
<div class="scroll-top-wrapper">
<span class="scroll-top-inner">
<i class="fa fa-1x fa-arrow-circle-up"></i>
</span>
</div>
<!--End of Scroll to Top Visible/Invisible Button-->
<!-- Bootstrap core JavaScript ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JavaScript files should be linked at the bottom of the page -->
<script src="js/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- End of Bootstrap core JavaScript ================================================== -->
<!-- Off canvas nav for Bootstrap minified JavaScript -->
<script src="js/bootstrap_offcanvas.min.js"></script>
<!-- Jquery Mobile Touch-gesture JavaScript -->
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
<!-- For Hiding and Showing Navbar onScroll -->
<script type="text/javascript" src="js/headroom.js"></script>
<script type="text/javascript">
jQuery( document ).ready(function(){
var header = document.querySelector("#navbar");
var headroom = new Headroom(header, {
offset : 500, //Offset Y before navbar is hidden
tolerance: {
down : 10, //Set the time required for navbar to disappear when scroll down
up : 20 //Set the time required for navbar to appear again when scroll up
},
classes: {
initial: "animated",
pinned: "flipInX", //Can change the way navbar show, linked to headroom.css
unpinned: "flipOutX" //Can change the way navbar hide, linked to headroom.css
}
});
headroom.init();
});
</script>
<!-- End For Hiding and Showing Navbar onScroll -->
<!-- For Parallax -->
<script type="text/javascript" src="js/parallax.min.js" charset="utf-8"></script>
<script>
$('.parallax-window').parallax();
</script>
<!-- End of For Parallax -->
<!-- For Carousel Image ONLY animation -->
<script type="text/javascript">
//The page element that will be animated on page load.
var yourElement = ".sec2-carousel-container";
//The effect that will be applied to your page element. See https://daneden.github.io/animate.css/ for full list.
var yourEffect = "zoomIn";
var effectClass = "animated " + yourEffect;
$(document).ready(function() {
$(yourElement).show().addClass(effectClass).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
});
</script>
<!-- End For Carousel Image ONLY animation -->
<!-- For Parallax Effect over Carousel -->
<script type="text/javascript">
var ypos,image;
function parallax () {
ypos = window.pageYOffset;
image = document.getElementById('carousel-img')
image.style.top = ypos * .4 + 'px';
}
window.addEventListener('scroll', parallax);
window.addEventListener("mousewheel", parallax);
</script>
<!-- End For Parallax Effect over Carousel -->
<!-- For About Myself Contents -->
<script type="text/javascript">
var $animation_elements_about = $('.animation-about-element');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements_about, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-about-view');
} else {
$element.removeClass('in-about-view');
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
</script>
<!-- End of For About Myself Contents -->
<!-- For Experience Contents -->
<script type="text/javascript">
var $animation_elements_experience = $('.animation-experience-element');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements_experience, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-experience-view');
} else {
$element.removeClass('in-experience-view');
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
</script>
<!-- End of For Experience Contents -->
<!-- For Portfolio Contents -->
<script type="text/javascript">
var $animation_elements_portfolio = $('.animation-portfolio-element');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements_portfolio, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-portfolio-view');
} else {
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
</script>
<!-- For Skills Logo/Icon Slider -->
<!-- #region Jssor Slider Begin -->
<!-- Generator: Jssor Slider Maker -->
<!-- Source: http://www.jssor.com -->
<script src="js/jssor.slider-22.2.16.mini.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function ($) {
var jssor_1_options = {
$AutoPlay: true,
$Idle: 0,
$AutoPlaySteps: 4,
$SlideDuration: 2500,
$SlideEasing: $Jease$.$Linear,
$PauseOnHover: 4,
$SlideWidth: 140,
$Cols: 7
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*responsive code begin*/
/*remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 809);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
/*responsive code end*/
});
</script>
<!-- End of Skills Logo Slider -->
</body>
<!-- End of HTML Body Content -->
<!-- Additional Scripts for Webpage Features / Effects -->
<script>
<!-- Carousel Section -->
//For Carousel Swipe Touch Function (Refering to Jquery Mobile Touch-gesture JavaScript)
$(document).ready(function() {
//Enable swiping...
$(".carousel-inner").swipe( {
//Generic swipe handler for all directions
swipeLeft:function(event, direction, distance, duration, fingerCount) {
$(this).parent().carousel('next');
},
swipeRight: function() {
$(this).parent().carousel('prev');
},
//Default is 75px, set to 0 for demo so any distance triggers swipe
threshold:0
});
});
//Fade Carousel Caption when Schroll down
$(window).scroll(function(){
$(".carousel-caption").css("opacity", 1 - $(window).scrollTop() / 800);
});
//For Page Content to animate the captions in the first slide, the script has to fire as soon as the page finishes loading in the browser
(function( $ ) {
//Function to animate slider captions
function doAnimations( elems ) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-example-generic'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel (feature of the Bootstrap Carousel designed to stop it from cycling)
$myCarousel.carousel('pause');
//Control this by setting the “interval” option to make sure the carousel doesn’t cycle to the next slide until all animations on the active slide have run their course
// $myCarousel.carousel({
// interval: 4000
// });
//Other slides to be animated on carousel slide event i.e. fire on the slide.bs.carousel, according to the Bootstrap Carousel documentation
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
})(jQuery);
//For Responsive Carousel Images when screen resizes
var $item = $('.carousel .item');
var $wHeight = $(window).height();
$item.height($wHeight);
$item.addClass('full-screen');
$('.carousel img').each(function() {
var $src = $(this).attr('src');
var $color = $(this).attr('data-color');
$(this).parent().css({
'background-image' : 'url(' + $src + ')',
'background-color' : $color
});
$(this).remove();
});
$(window).on('resize', function (){
$wHeight = $(window).height();
$item.height($wHeight);
});
<!-- End Carousel Section -->
<!-- Portfolio Section -->
// Allow Image to be changed when button is clicked on.
$('.folio-toggler').click(function(){
$('.animation-element').removeClass('in-view');
var self = this;
var folio = $(self).attr('data-image-id');
$('.folio-toggle').hide();
$(folio).show();
$(folio + ' .animation-element').addClass('in-view');
});
<!-- End of Portfolio Section -->
<!-- Future Project Section -->
var $animation_elements = $('.animation-project-element');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-project-view');
} else {
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
<!-- End of Future Project Section -->
<!-- Section of Scroll to Top Visible/Invisible Button -->
//To show and hide the button we use the jQuery ‘scroll’ event to detect if the user is scrolling.
//Check the top of the window and detect the offset to the top of the page, if it’s greater then 100 pixels show the button by adding the ‘show’ class to the ‘scroll-top-wrapper’ element.
//That 100 pixel offset is arbitrary and can be changed to suit your site.
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 200) {
$('.scroll-top-wrapper').addClass('show');
} else {
$('.scroll-top-wrapper').removeClass('show');
}
});
});
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 200) {
$('.scroll-top-wrapper').addClass('show');
} else {
$('.scroll-top-wrapper').removeClass('show');
}
});
$('.scroll-top-wrapper').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}
<!-- End of Section of Scroll to Top Visible/Invisible Button -->
<!-- Script for Individual Section Scroll -->
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
<!-- End of Script for Individual Section Scroll -->
<!-- Script for Scroll to Top from footer Section -->
$(function(){
$('#top').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}
<!-- End of Script for Scroll to Top from footer Section -->
</script>
<!-- End of Additional Scripts for Webpage Features / Effects -->
</html>