Hello, I'm Tsuiwei Yang

Portfolio

作品集

作品集

Portfolio

  • All
  • 功能網站
  • 一頁式網站
  • UI/視覺設計
  • All
  • Functional
    Website
  • One
    Page
  • UI /
    Visual Design

Skills

工作技能

工作技能

Skills

Visual Design視覺設計

視覺設計Visual Design

運用 Figma、Sketch -
  • 設計網頁、App 之版面,製作彩稿 Mockup。
  • 規劃 Design guide 並設置 UI library (字級 / 色盤 / 樣式等)。
  • 建置 Symbols (按鈕、選單等元件)。運用 Auto layout 功能排版。
運用 Adobe illustrator / Photoshop -
  • 設計向量主視覺、一頁式活動網頁畫面。
  • 繪製數位行銷素材,如資訊懶人包圖卡、LINE / Facebook 圖卡、EDM 電子報、Gif 動圖、網頁用 banner 等。
  • 設計印刷輸出製作物,如易拉展、展場海報、三折式 DM 傳單等。
  • 網站用相片修圖 (調色、補背景、去雜物等)
html 5 動畫
Use Figma、Sketch to -
  • Design web pages and APP layouts. Create color mockups for each page.
  • Plan the Design guide and set up the UI library (font level/color palette/style, etc.).
  • Build Symbols (buttons, menus, etc.). Use the Auto layout function for layout.
Use Adobe illustrator / Photoshop to -
  • Design key vision image and other vector images. Design one-page campaign site.
  • Draw digital marketing materials, such as infographics, LINE / Facebook banners, E-newsletters, Gif animations, web banners, etc.
  • Design printed matter, such as roll-up banner for booth, posters, tri-fold DM flyers, etc.
  • Retouch photos for website usage (color adjustment, background filling, clutter removal, etc.)
html 5 animation

Web Frontend Layout網頁切版

網頁切版Web Frontend Layout

RWD 網頁切版
  • 主要以 VSCode 為 Coding 工具。可用 codepen、sandbox 分享小段範例。
  • 產出 RWD 自適應版面 html + css。可運用 pug scss/sass 前置處理器撰寫。
  • css 使用 grid / flex layout。可搭配 bootstrap 框架使用,或從零開始依 7-1 pattern 規劃 css。
  • 可運用 icon font 如 google material icon、font awesome,或用 IcoMoon 自製 icon font。
動態設計、jQuery、Vue 3 語法
Git 版控管理
  • 使用 Github 或 bitbucket 工具,操作 create branch / merge / revert。
  • 多人協作時,版控依據 Git flow 分支策略 作 develop / release / hotfix 分支管理。
RWD web page layout
  • Mainly use VSCode as the coding tool. Can use codepen or sandbox to share short examples.
  • Produce RWD adaptive html + css. Can write html using pug and scss/sass preprocessors.
  • Use grid/flex in css. Create html employing the Bootstrap framework, or write custom css according to 7-1 pattern
  • Apply icon fonts such as google material icon, font awesome, or generate specialized icons with IcoMoon.
html animation design, jQuery, Vue 3 syntax
  • Use jQuery to write front-end UI/UX interactive operations, and apply third-party packages such as swiper.js .
  • Apply SVG animation effects to web pages.
  • Implement visual charts, including amChartsHighChartschart.js
  • Experience in layout html with with Vue 3 / Vuetify syntax in collaborative projects.
Git version control management
  • Use Github or bitbucket tools to operate create branch / merge / revert.
  • In collaborative projects, implement develop / release / hotfix branchs management based on Git flow branch strategy .

Others其他

其他Others

  • 與軟體廠商跨公司協作經驗,配合業主規範產出專案驗收文件。
  • Freego 掃描無障礙網站查測經驗。
  • 2024/9 TOEIC Listening and Reading Test - 965 分 金色證書 (滿分 990)
  • Experience in cross-company collaboration with software vendors. Compile project acceptance documents based on the client's requirements.
  • Freego scanning and problem fixing experience for website accessibility.
  • 2024/9 TOEIC Listening and Reading Test - 965 points gold certificate (full score: 990)

Study notes

範例筆記

一些工作期間個人紀錄整理的小筆記

範例筆記

Study notes

Some personal notes recorded during work

玩轉 pug:打造模組化 HTML網頁的秘密武器

寫大型網站時可用 pug 前置處理器,來管理 html 的模組。

PUG: the secret weapon for modular HTML

Use the Pug preprocessor to manage HTML modules easily.

Pug

Highcharts 套用於 Vue 的範例

做專案時需將 Highcharts 整理成 Vue 3 圖表元件。

Applying Highcharts in Vue Project

Vue 3 examples to import Highcharts for graph chart components .

VueHighcharts

select2 使用範例

下拉選單結合輸入框篩選的套件,在下拉選單內容很多時特別容易找資料。

Select2 usage example

A jquery plugin that combines select box with searching, tagging and more.

jQuery

Date Range Picker 範例

小月曆選擇器的一些設定值

Date Range Picker usage

Some settings tips for a calendar plugin.

jQuery

Sprite 影格動畫

使用css語法,把多個png串成影格動畫

Sprite frame animation

A CSS syntax to tranfer multiple frame pngs into animations.

Css Animation
EN