-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
325 lines (281 loc) · 14.9 KB
/
about.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
<html lang="zh-Hant">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-159581635-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-159581635-1');
</script>
<meta charset="utf-8">
<title>About WAN JIN LUO</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1.0 user-scalable=no">
<link rel="shortcut icon" href="img/favicon.ico">
<meta name="og:image" content="http://wanjinluo.com/img/ogimg.png">
<link rel="stylesheet" href="font/bootstrap-icons.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Isotope-Filter -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<!-- Swiper -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Img LazyLoad -->
<script src="js/lazysizes.min.js" async=""></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<script src="js/header.js"></script>
<!-- Customized -->
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js"></script>
</head>
<body>
<header class=""></header>
<div id="about-page">
<section id="about-intro" class="deco-flow-wrap flow-mid-light">
<img data-src="img/index/bg-deco-1.png" alt="" class="lazyload bg-deco-1 wow animate__animated animate__fadeInLeft" data-wow-duration="1s" data-wow-delay="1s">
<img data-src="img/index/bg-deco-2.png" alt="" class="lazyload bg-deco-2 wow animate__animated animate__fadeInRight" data-wow-duration="1s" data-wow-delay="2s">
<div class="title-box">
<h4>About</h4>
<h2>關於我 - WAN JIN LUO</h2>
</div>
<div class="content-width">
<div class="about-box">
<div class="pic">
<img src="img/about/me.jpeg" alt="">
</div>
<div class="text">
<h3>
你好，我是婉今<br>
很高興在這裡與你見面！
</h3>
<h5>
我有 3 年以上的網頁設計相關工作經驗<br>
以網站企劃、設計、插畫能力為基礎，運用自學程式能力，為每一名客戶提供兼具設計美感、功能流程，符合預算與時程的設計解決方案。
</h5>
<p>
目前已製作約 20 個中小型客製化網站，包含企業形象、商品展示、一頁式網站、個人作品等等。<br>
<br>
曾在 2019 年上半年同時負責約 6 個網站專案，需頻繁與客戶、主管、後端工程師的溝通，並掌握製作進度，儘管是一段充滿壓力的時光，卻訓練了我專案排程的能力。<br>
<br>
現在的我持續學習 UI/UX、前端程式等多面向的能力<br>
希望能運用跨領域的經驗，成為團隊的助力！<br>
<br>
</p>
</div>
</div>
</div>
</section>
<section id="about-experience" class="deco-flow-wrap flow-light">
<div class="content-width">
<div class="title-box">
<h2>學經歷</h2>
</div>
<ul class="col-2">
<li>
<h3>就學經歷 <span>Education</span></h3>
<ul class="time-line dash">
<li>
<div class="content">
<h5>國立雲林科技大學 Yuntech</h5>
<p>
<ul class="dot-list dash">
<li>創意生活設計系，2017年畢業。</li>
<li>主修品牌整合設計，包含視覺設計、產品設計、場域設計。</li>
<li>多元領域學習，如：陶藝、金工、玻璃、停格動畫。</li>
<li>擔任汪汪社社長，進行動物保護宣導活動。</li>
</ul>
</p>
</div>
</li>
<li>
<div class="content">
<h5>國立台中女子高級中學 TCGS</h5>
<p>
<ul class="dot-list dash">
<li>普通科，2013年畢業。</li>
<li>擔任漫畫研究社社長，舉辦多場跨校社團交流活動。</li>
</ul>
</p>
</div>
</li>
</ul>
</li>
<li>
<h3>工作經歷 <span>Work Experience</span></h3>
<ul class="time-line">
<li>
<div class="content">
<h5><a href="" target="_blank">瑪雅網路科技有限公司</a>・網頁設計師</h5>
<p>
<ul class="dot-list dash">
<li>2018.07 ~ 2021.03，台中。</li>
<li>客製化網頁設計、網站切版。</li>
<li>客戶溝通、後端工程師協作。</li>
<li>平面與廣告設計、網站上線、SEO 優化。</li>
</ul>
</p>
</div>
</li>
<li>
<div class="content">
<h5><a href="" target="_blank"></a>弄弄設計有限公司</a>・網頁視覺設計</h5>
<p>
<ul class="dot-list dash">
<li>2017.10 ~ 2018.05，台北。</li>
<li>客製化網頁視覺設計，日式細膩風格。</li>
<li>平面設計排版、插畫繪製。</li>
</ul>
</p>
</div>
</li>
</ul>
<!-- <ul class="toggle-list toggle-wrap">
<li class="active">
<div class="toggle-title">
<h4>瑪雅網路科技有限公司・網頁設計師</h4>
</div>
<div class="toggle-content">
<p>
<ul class="dot-list">
<li>2018.07 ~ 2021.03，台中。</li>
<li>客製化網頁設計、網站切版。</li>
<li>客戶溝通、後端工程師協作。</li>
<li>平面與廣告設計、網站上線、SEO 優化。</li>
</ul>
</p>
</div>
</li>
<li class="active">
<div class="toggle-title">
<h4>弄弄設計有限公司・網頁視覺設計</h4>
</div>
<div class="toggle-content">
<p>
<ul class="dot-list">
<li>2017.10 ~ 2018.05，台北。</li>
<li>客製化網頁視覺設計，日式細膩風格。</li>
<li>平面設計排版、插畫繪製。</li>
</ul>
</p>
</div>
</li>
</ul> -->
</li>
</ul>
</div>
</section>
<section id="about-work" class="deco-flow-wrap flow-light">
<div class="content-width">
<div class="title-box">
<h2>專案執行經驗</h2>
<p>在接案公司的三年經驗中，我執行了以下多樣化的工作內容</p>
</div>
<br>
<ul class="toggle-list toggle-wrap col-2">
<li class="active">
<div class="toggle-title">
<h4>客戶溝通與架構規劃</h4>
</div>
<div class="toggle-content">
<p>
<ul class="dot-list">
<li>與客戶洽談，規劃網站架構與功能</li>
<li>為客戶提供符合需求與預算的解決方案</li>
<li>設計符合使用者經驗的操作流程</li>
<li>繪製 Wireframe 與團隊及客戶溝通</li>
<li>專案時程管理</li>
</ul>
</p>
</div>
</li>
<li class="active">
<div class="toggle-title">
<h4>網站前台設計製作</h4>
</div>
<div class="toggle-content">
<ul class="dot-list">
<li>依專案性質與需求，設計合適的網頁版面</li>
<li>使用 HTML、CSS 依照版面設計，製作客製化響應式網站</li>
<li>運用 jQuery 語法、javaScript 套件，打造網站互動效果</li>
<li>簡易後台串接，程式資料庫修改</li>
</ul>
</div>
</li>
<li class="active">
<div class="toggle-title">
<h4>網站上架與相關服務</h4>
</div>
<div class="toggle-content">
<ul class="dot-list">
<li>網域、資料庫、伺服器設定作業</li>
<li>SEO 優化，網頁標籤結構、關鍵字設定</li>
<li>網站後台操作教學、協助客戶上架資料</li>
</ul>
</div>
</li>
<li class="active">
<div class="toggle-title">
<h4>更多設計服務</h4>
</div>
<div class="toggle-content">
<ul class="dot-list">
<li>品牌與平面設計，Logo、名片、型錄、封面、海報、展板設計</li>
<li>網頁廣告Banner設計與Resize（案例：麗嬰房、<a href="project-design/wacol/">華歌爾</a>）</li>
<li>產品相片修圖（例： <a href="project-web/johnwell/">強暉企業</a>、<a href="project-web/med/">Med Skin Care</a>）</li>
</ul>
</div>
</li>
</ul>
</div>
</section>
<!-- 聯繫 -->
<section id="index-contact">
<span id="contact"></span>
<img data-src="img/index/bg-deco-1.png" alt="" class="lazyload bg-deco-1 wow animate__animated animate__fadeInLeft" data-wow-duration="1s" data-wow-delay="1s">
<img data-src="img/index/bg-deco-2.png" alt="" class="lazyload bg-deco-2 wow animate__animated animate__fadeInRight" data-wow-duration="1s" data-wow-delay="2s">
<div class="content-width contact-box">
<div class="title-box">
<h4>Contact</h4>
<h2>與我聯繫</h2>
</div>
<div class="main"></div>
<div class="link">
<p>FOLLOW ME</p>
</div>
</div>
</section>
</div>
<footer></footer>
<script>
// Contact
$.getJSON( "data/profile.json", function( data ) {
var myName = data[0].name;
var myEmail = data[0].email;
var myLinks = data[0].link;
$('#index-contact').each(function (){
$(".main").append(`
<h3>${myName}</h3>
<a href="mailto:${myEmail}" target="_blank" class="btn-dark"><i class="bi bi-envelope"></i> ${myEmail}</a></p>
`)
for ( var i = 0 ; i < myLinks.length ; i++ ){
$(".link").append(`
<a href="${myLinks[i].url}" target="_blank" class="btn-light">${myLinks[i].title}</a>
`);
};
});
});
</script>
<script>
var topNavPage = 'about';
</script>
<script src="js/topnav.js"></script>
</body>
</html>