-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
154 lines (154 loc) · 6.71 KB
/
index.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
<!DOCTYPE html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>婉頤 Jerry - 個人網站</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/custom.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/lightbox.min.js" type="text/javascript"></script>
<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<div class="row">
<div class="sidebar col-md-3">
<div class="all">
<div class="logo"><img src="images/wan-yi-logo.svg" alt=""></div>
<h1>翁婉頤</h1>
<p>Jerry Weng</p>
<div class="contact">
<h3>—— Contact ——</h3><a href="tel:0909967260"><i class="fa fa-phone-square"> </i>0909-967-260</a><a href="mailto:dragonryu09@gmail.com"><i class="fa fa-envelope-square"></i>dragonryu09@gmail.com</a>
</div>
</div>
</div>
<div class="main col-md-9">
<section id="portfolio">
<h2>About Me</h2>
<div class="part_wrapper">
<div class="port">
<div class="photo col-md-4"><img src="images/jerry.png" alt=""></div>
<div class="text col-md-8">
<h3>翁婉頤 (Jerry Weng)</h3>
<p>大家好，我是翁婉頤。今年九月要到臺灣科技大學 資訊管理所就讀碩一。在大學求學期間，被學校工讀處室的職員質疑一句：<em>「你是資管系的不會寫網頁，讀什麼資管系！」</em>給激到，從此跳入網頁前端的坑ＸＤ</p>
<p>
接處網頁大概一年半左右，從學校網站頁面小小修改，到可以替學校寫畢業典禮網站。大三也到企業實習，主要利用HTML,CSS,jQuery,RWD，替公司的案子切版、製作。
也接觸過大型專案，如：玉山國家公園網站、台灣電力公司內部網頁切版等。
</p>
<p>
大四的畢業專題擔任組長，透過前端與後端(php)建構了一套旅遊攻略規劃的平台。接下來將會增進原生JavaScript、ES6及Vue.js等框架的能力。</p>
</div>
</div>
</div>
</section>
<hr>
<section id="skills">
<h2>Skills</h2>
<div class="part_wrapper col-md-12">
<ul class="skill">
<li v-for="s in skills">
<h3>{{s.name}}</h3>
<p>{{s.discription}}<a :href="s.works.whref" target="_blank"> <em>{{s.works.wname}}</em></a></p>
<div class="process_bar">
<div class="bar" :style="{'width':s.processes+'%'}"></div>
</div>
</li>
</ul>
</div>
</section>
<hr>
<section id="experience">
<h2>Experience</h2>
<div class="part_wrapper col-xs-12" id="app2">
<div class="ul_wrapper">
<transition-group class="timeline" tag="ul" name="fade">
<li class="list_wrapper" v-for="(l,id) in lists" :key="id" :style="{'transition-delay':id/2+'s'}">
<div class="dialog">
<h3>{{l.years}}</h3>
<div class="title">{{l.title}}</div>
</div>
<ul class="list_content">
<li v-for="c in l.content">{{c.tags}}</li>
</ul>
</li>
</transition-group>
</div>
</div>
</section>
<hr>
<section id="web">
<h2>My Works</h2><span>點擊圖片到作品網站</span>
<div class="row">
<div class="part_wrapper col-xs-12 col-sm-6 col-md-12" v-for="w in works">
<div class="box_left col-md-6"><a :href="w.href" target="_blank"><img :src="w.img" alt=""></a></div>
<div class="box_info col-md-6">
<div class="info">
<div class="title">{{w.title}}</div>
<div class="tags">
<div class="tag" v-for="t in w.tags"> # {{t}}</div>
</div>
<ul>
<li v-for="d in w.discription">- {{d}}</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<hr>
<section id="eduacation">
<h2>Eduacation</h2>
<div class="part_wrapper col-xs-12">
<div class="edu">
<div class="ncue col-xs-6">
<div class="logo"><img src="images/ncue.png" alt=""></div>
<div class="year">2014.09 - 2018.06</div>
<div class="name">國立彰化師範大學 </div>資訊管理學系
</div>
<div class="ntust col-xs-6">
<div class="logo"><img src="images/ntust.png" alt=""></div>
<div class="year">2018.09 - 2020.06</div>
<div class="name">國立臺灣科技大學 </div>資訊管理學所
</div>
<div class="base_line col-xs-12">
<div class="go"><i class="fa fa-graduation-cap"></i>NOW HERE</div>
</div>
</div>
</div>
</section>
<hr>
<section id="others">
<h2>Others</h2>
<div class="part_wrapper col-xs-12">
<ul class="act col-md-6">
<li>
<div class="year">2018.03 - 2018.04 </div>
<div class="title">參加第16屆ATCC 晉級初賽第一輪</div>
</li>
<li>
<div class="year">2017.09 - 2018.06 </div>
<div class="title">彰師大資管系畢業成果展總召</div>
</li>
</ul>
<ul class="act col-md-6">
<li>
<div class="year">2016.09 - 2017.06 </div>
<div class="title">彰師大資管系系女籃副隊長</div>
</li>
<li>
<div class="year">2015.11</div>
<div class="title">彰師大四系聯合商管歌唱比賽主持人</div>
</li>
</ul>
</div>
</section>
</div>
</div>
<script src="js/all.js" type="text/javascript"></script>
</div>
</body>