喜愛推廣與學習 HTML, CSS, jQuery 與 Vue,興趣是在跨界與自我挑戰中成長,從事過設計、前端、行銷與專案管理等工作;對社群經營與開箱文章撰寫,亦有一定的經驗與水準。
MUKI space* 在 2008 年的愚人節開站,原本的初衷,只是單純記錄自己的生活跟學習筆記。
但,畢竟從小就是做個人網站起家的,所以很喜歡設計自己的 WordPress 網站,因為 WordPress 的文件與資源非常齊全,所以持續不斷的學習與記錄,不知不覺網站就偏向技術部落格的型態。
部落格兜兜轉轉的開了那麼多年,想過不同的經營模式,最後還是決定回歸初衷,做自己喜歡的設計與主題。在這屬於我個人的小小世界裡,我不想在乎現在流行什麼?或是大家在排斥什麼元素?
“我相信對 MUKI space* 而言,
做自己就是最棒的設計。”
職稱:資深前端工程師
工作內容:開發公司形象網站,開發公司專案後台,與後端合作串接 Restful API,協助培訓新人。
使用技術:Vue2, Vue3, React, Nuxt.JS, Vite, Vue-CLI, HTML, SCSS
製作專案:
1. 官網:Vue2 + Nuxt.JS + i18n + Boostrap
2. 管理後台:Vue3 + Vue-CLI + TailwindCSS + ECCharts
3. 系統後台:Vue3 + Vite + TailwincCSS + Element Plus + ECCharts
4. 公司後台:React + Vite + Ant Design
研究過的技術與工具:
1. Fabric.js
2. EC Charts
3. Redmine
4. CI/CD
特別的成就:
1. 發過 PR 給套件作者,修了一個 bug,自己 fork 了一份 for vue3
職稱:前端工程師
工作內容:開發與維護公司後台,主要使用技術為 HTML, CSS, Vue
職稱:前端設計師
工作內容:網站視覺製作與 Layout,同時也在業界開班授課,以及幫企業內訓,擔任學校約聘講師。
職稱:前端工程師
工作內容:網站互動程式開發,前端網站的頁面製作。
職稱:數位創意專員
工作內容:專案製作與管理 (因部門變動,故轉為 PM 協助公司專案開發與規劃)。
職稱:WebMaster / 行銷工程師
工作內容:負責華碩台灣區所有網站,並與 Global / Local Web Master 規劃協調,並協助維護官網,以及各產品線的活動網站。
職稱:創意設計
工作內容:網站視覺製作,與業務 / 工程師共同規劃網站專案,並協助上線維護。
課程安排是 RWD 入門與實戰,讓大家瞭解 RWD 的組成,並透過練習,使用 Bootstrap 製作 RWD 網站。
1. 瞭解流動式排版的組成
2. Bootstrap 介紹與應用
3. CSS media query 應用
4. RWD 網頁排版解析
5. RWD 規劃與經驗分享
6. 開發者工具使用與除錯
HackCourse - 網頁前端
網頁前端設計師的工作可不是設計網站頁面而已,這次的網頁前端課程從必備的 HTML/CSS 語法開始,還將教你 Javascript、jQuery、網頁排版、架構、除錯等等重要技術,不需要任何基礎,讓初學者邁入網站前端的精彩世界!
主題:打造行動裝置網站的經驗談
以實際開發 RWD 網站為例,分享 RWD 的踩雷經驗,以及如何將已上線的網站用「硬幹」的模式做成 RWD。
主題: WordPress 網頁架設
WordPress 入門容易,架站快速,為世界上許多網誌、內容網站、購物車之架站選擇。 本次工作坊對象為具備 html/css 基本觀念的學生,計畫邀請具有豐富前端與 WordPress 開發經驗的 MUKI Wu 吳姿穎,讓參與學員藉實作的方式瞭解 WordPress 的佈景主題架構及語法運用,培養內容網頁架站能力。
受邀擔任中華電信企業講師,課程以 RWD 概念與實作為主。以下為針對中華電信客製化的課程內容:
1. 瞭解流動式排版的組成
2. Bootstrap 介紹與應用
3. CSS media query 應用
4. RWD 網頁排版解析
5. RWD 規劃與經驗分享
6. 開發者工具使用與除錯
應邀參加廣州的前端研討會,分享的主題是 RWD 的經驗分享,以及大型網站(拾木文具)製作經驗。
受邀擔任 1111 人力銀行的企業講師,課程以 RWD 概念與實作為主。開會瞭解學員狀況外,以下為針對 1111 人力銀行客製化的課程內容:
1. RWD 基本認識,通用規範與規劃經驗分享
2. Bootstrap Grid 入門與瞭解
3. RWD 動態元件應用與實作
4. 多種 RWD 版型設計應用
5. transform 動畫原理介紹
6. RWD 總結與注意事項
於世新大學教授學生認識與製作 Wireframe,以便畢業後可以跟企業接軌,認識到科技業工作的流程與分工。
除了授課講解流程外,也讓同學分組做出網站的 wireframe,並在課後簡單的講評。透過這樣的實務練習,可以讓學生更快進入狀況。
在台北科技大學,主要是教授 WordPress CMS 系統,根據學生資歷與門檻,又可分為以下兩大課程:
1. WordPress 基礎建置:認識與操作 WordPress 部落格
2. WordPress woo commerce 購物網站建立與使用
演講主題:WordPress x Design thinking
更多的作品,請移駕至我的 Dribbble
負責章節:翻譯整本書籍
Ch1 什麼是響應式網頁設計?
Ch2 建立基本的 WordPress 佈景主題
Ch3 讓你的主題自適應:基礎篇
Ch4 讓你的主題自適應:核心功能
Ch5 自適應佈景主題設計:部落格功能
Ch6 使用自適應佈景主題架構
Ch7 技術與教學
Appendix 相關資源
負責章節:翻譯整本書籍
Chapter 1-WordPress 簡介
Chapter 2-域名和虛擬主機
Chapter 3-規劃的網站
Chapter 4-安裝 WORDPRESS
Chapter 5-WordPress 預設主題介紹「Twenty Twelve」
Chapter 6-利用網站進行銷售
Chapter 7-找尋佈景主題
Chapter 8-推薦主題
Chapter 9-增加訪客量
Chapter 10-需要知道的技巧
Appendix A-網路資源
Appendix B-詞彙
負責章節:整本書含拍攝
Part1 讓一本好手帳 改變你,創造成功行動!
Part2 學習的超記憶 考試一百分!筆記整理術
Part3 上班族衝衝衝 職人的文具手帳,超活用
Part4 旅行的大充電 帶著手帳文具,自由行
Part5 創意效率高手 文具術達人的進階心法
負責章節:
第六課 - 出眾的板面特效美技
部落格美化時應該有的基本觀念、為什麼選擇兼顧實用與美觀的 jQuery
負責章節:
Chapter 6 - 基本的 WordPress 使用
Chapter 7 - 不可不知的 WordPress 進階功能
Chapter 8 - 改造你的 WordPress 佈景主題
Chapter 9 - 運用 css 讓你的主題排版更流暢
Chapter 10 - 使用外掛擴充 WordPress 功能
Chapter 11 - 絢爛的特效讓 WordPress 與眾不同
Chapter 12 - 瞭解部落格受歡迎的程度
Chapter 13 - 推廣你的部落格
Chapter 14 - SEO 的重要性
Chapter 15 - 當部落格開始賺進第一桶金
Chapter 16 - 和社交網站的整合