-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
220 lines (204 loc) · 9.2 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
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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{ Alicia's Portfolio }</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="fh5co-loader"></div>
<div id="page">
<nav class="fh5co-nav" role="navigation">
<div class="container">
<div class="fh5co-top-logo">
<div style="width: 40%;"><a href="index.html"><img src="images/word.svg" alt=""></a></div>
</div>
<div class="fh5co-top-menu menu-1 text-center">
<ul id="myMenu" class="menu">
<li data-menuanchor="firstPage" class="menu__item">
<a href="#webworks" class="menu__link">{ Web works }</a>
</li>
<li data-menuanchor="secondPage" class="menu__item">
<a href="#uiux" class="menu__link">{ UI / UX }</a>
</li>
<li class="menu__item">
<a href="#aboutme" class="menu__link">{ About Me }</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="webworks">
<div class="container">
<div class="row top-line animate-box">
<div class="col-md-7 text-left intro" style="margin-top: 10%;">
<h2>Web Works</h2>
<p>運用不同的程式，搭配不一樣的樣式，創造出符合需求的網頁。<br>透過不斷學習和實踐，讓我了解網頁程式的撰寫，是一個有趣且具有挑戰性的過程，網頁需具備彈性與創造力、優化與效能、用戶體驗感、溝通與協作，以及持續學習與改進。</p>
</div>
</div>
<div class="row" style="margin-top: -5%;">
<div class="col-md-4 animate-box">
<span class="text-left">Ttravel_露營地訂房網頁</span>
<a class="work" href="https://xjcalicia.github.io/TtravelProject/" target="_blank">
<div class="work-grid" style="background-image:url(images/Ttravel.png);">
<div class="inner">
<div class="desc text-center">
<h3>Ttravel</h3>
<h3>露營地訂房網頁</h3>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 animate-box">
<span class="text-left">GlimmerDessert_微光甜點屋網頁</span>
<a class="work" href="https://xjcalicia.github.io/GlimmerDessert/" target="_blank">
<div class="work-grid" style="background-image:url(images/GlimmerDessert.png);">
<div class="inner">
<div class="desc text-center">
<h3>GlimmerDessert</h3>
<h3>微光甜點屋網頁</h3>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 animate-box">
<span class="text-left">Expo_展覽資訊網頁</span>
<a class="work" href="https://xjcalicia.github.io/ExpoProject/" target="_blank">
<div class="work-grid" style="background-image:url(images/Expo.png);">
<div class="inner">
<div class="desc text-center">
<h3>Expo</h3>
<h3>展覽資訊網頁</h3>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 animate-box">
<span class="text-left">PetWeb_規範頁面</span>
<a class="work" href="https://xjcalicia.github.io/Guideline_test/" target="_blank">
<div class="work-grid" style="background-image:url(images/PetWeb.png);">
<div class="inner">
<div class="desc text-center">
<h3>PetWeb</h3>
<h3>規範頁面</h3>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div id="uiux">
<div class="container">
<div class="row top-line animate-box">
<div class="col-md-7 text-left intro" style="margin-top: 10%;">
<h2>UI / UX</h2>
<p>在使用者介面的設計過程中，深刻的體會以使用者需求為中心，透過簡潔與直觀的設計呈現網頁，將使用者習慣融入產品，再透過測試與優化，提升使用者經驗。</p>
</div>
</div>
<div class="row" style="margin-top: -5%;">
<div class="row top-line" style="padding: 5%;">
<div class="col-md-5 work-grid">
<a class="work" href="https://www.behance.net/gallery/145811655/Ubereats-App-Redesign" target="_blank"><img src="images/ubereats.png" class="img-fluid" style="width: 400px;" alt=""></a>
</div>
<div class="col-md-5 text-left desc col-sm-10">
<h2 style="font-size: 18px; padding: 2% 0;">Ubereats App_Redesign</h2>
<p>以 iOS App 版本規範執行，針對當時版本操作盲點，以及訪談不同年齡層的使用體驗，分析並整理出使用者痛點，再以此出發，透過優化操作流程與更新整體介面，改善使用者體驗，讓 App 在使用上更貼切使用者需求。
</p>
<li>UI redesign、Wireframe 線框稿、Style Guideline 設計規範</li>
<li>使用者體驗訪談 | Persona 人物誌</li>
<li>User Journey Map 使用者旅程圖</li>
<li>Function Map 功能地圖、Flowchart 使用者流程圖</li>
<p style="margin-top: 5%;"><a href="https://www.behance.net/gallery/145811655/Ubereats-App-Redesign" target="_blank" class="btn-sm btn-primary">Visit Website</a></p>
</div>
</div>
<div class="row top-line" style="padding: 5%;">
<div class="col-md-5 work-grid">
<a class="work" href="https://hestia.com.tw/" target="_blank"><img src="images/hestia.png" class="img-fluid" style="width: 400px;" alt=""></a>
</div>
<div class="col-md-5 text-left desc col-sm-10">
<h2 style="font-size: 18px; padding: 2% 0;">Hestia赫思西亞_角色網頁</h2>
<p>網頁需求為介紹角色們，並同時能販售產品，除了希望網頁能活潑豐富，亦希望能吸引使用者，因此以大量角色圖片構成網頁，且方便客戶自行管理與上架網頁內容。
</p>
<div class="role">
<h3 style="font-size: small;">主要工作內容：</h3>
<p>
將客戶需求規劃於網頁，規劃整體網頁架構與執行網頁介面設計，以及與前端工程師溝通，並測試網頁。
</p>
</div>
<p style="margin-top: 5%;"><a href="https://hestia.com.tw/" target="_blank" class="btn-sm btn-primary">Visit Website</a></p>
</div>
</div>
<div class="row top-line" style="padding: 5%;">
<div class="col-md-5 work-grid">
<a class="work" href="https://peaquin.com.tw/series/" target="_blank"><img src="images/peaquin.png" class="img-fluid" style="width: 400px;" alt=""></a>
</div>
<div class="col-md-5 text-left desc col-sm-10">
<h2 style="font-size: 18px; padding: 2% 0;">Peaquin皮寬_圖像IP授權網頁</h2>
<p>網頁為圖像授權，而角色較為活潑，客戶希望畫面可以呈現出豐富度，並讓使用者能快速了解此角色，且因是圖像授權，所以網頁以大量圖片構成，方便客戶能時常替換最新圖檔。
</p>
<div class="role">
<h3 style="font-size: small;">主要工作內容：</h3>
<p>
將客戶需求規劃於網頁，規劃整體網頁架構與執行網頁介面設計，以及與前端工程師溝通，並測試網頁。
</p>
</div>
<p style="margin-top: 5%;"><a href="https://peaquin.com.tw/series/" target="_blank" class="btn-sm btn-primary">Visit Website</a></p>
</div>
</div>
</div>
</div>
</div>
<div id="aboutme" class="fh5co-bg-section">
<div class="container" style="padding: 10% 0;">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="author">
<div class="author-inner animate-box" style="background-image: url(images/aboutMe.jpg); border-radius: 50%; width: 250px; height: 250px; margin: 5%;">
</div>
<div class="desc animate-box" style="padding: 5% 0 0 5%;">
<h3>陳 筱靜</h3>
<span style="color: black;">喜歡運用程式與設計探索各種可能性</span>
<p style="color: black;">
在品牌設計公司工作三年，經手過品牌識別、店面形象、角色插畫、文創設計，以及網頁設計，擁有一定的設計能力，在就業期間繼續學習程式相關課程，並參與過軟體工程師體驗營與全端工程師、UIUX 設計等課程，熟悉 HTML 與 CSS，了解 Bootstrap、JavaScript、JQuery 如何應用於網頁，以及 PHP 與 Mysql 的基礎運用，並擁有 SASS 與 Vue 的經驗。
</p>
<p style="color: black;">目前正在持續學習 React，並加強自己的程式能力。</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section footer fp-auto-height text-center" style="padding-top: 2%;">
<p>Alicia | 2023</p>
</div>
<div class="gototop js-top">
<a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Main -->
<script src="js/main.js"></script>
</body>
</html>