TOP

Hi!There.

ZHANG-WEN

FRONT-END WEB DEVELOPER

–   My Portfolio   –

About

您好,我是王政文,具三年視覺設計工作經驗,在工作期間接觸到網頁設計相關技術, 發現自己對於,網頁設計有濃厚的興趣,於是參加半年的專業訓練, 進一步學習前端網頁開發技術。

工作中,我主要負責前端介面的開發與維護,使用 Vue 3 搭配 HTML、CSS 與 Bootstrap 製作響應式網頁,並以 JavaScript 實作各種互動功能。與後端工程師密切協作, 透過 AJAX 技術串接 API,動態取得並呈現資料,確保系統功能與使用者介面能順利整合與運作。

我習慣使用 Figma 檢視與比對 UI 設計稿,並注重畫面細節與使用者體驗。 由於具備視覺設計背景,也曾參與 UI 元件的設計與優化,協助提升產品整體的視覺一致性與美感。

未來將持續精進前端相關技能,並結合自身視覺設計專業,在工作上注重 UI 美感及 UX 品質, 開發更好用的產品與服務,為公司及團隊帶來更多價值,成為一位獨當一面的前端工程師。

前端開發

Front-end development

  • HTML
  • CSS
  • Scss / Sass
  • Bootstrap
  • JavaScript
  • jQuery
  • Vue.js
  • Vuetify
  • file_type_quasar
    Quasar

後端技術

Backend technology

  • MongoDB
  • Git 版本控管

視覺設計

Visual design

  • file_type_photoshop
    Photoshop
  • Illustrator
  • CorelDRAW
  • Figma
  • UI
    UI / UX

Portfolio

自身有在飼養海水魚,發現台灣論壇有以下問題:

1. 論壇介面陽春,UI 過於老舊
2. 沒有結合魚種圖鑑,要再去其他網頁尋找資料
3. 觀賞魚就是來觀賞的,照片太少缺少誘因

此網站希望可以解決以上問題,將使用者在飼養海水魚會遇到的問題在此平台中都可解決。

前台功能:

1. 會員註冊/登入
2. 加入、修改最愛文章
3. 查看會員資料及修改
4. 傳送聯絡訊息 5. 頁面瀏覽
前台使用技術:

1. 使用 Quasar 框架開發
2. RWD 響應式網頁設計
3. 以Pinia存取使用者資訊、API回傳資料
4. Vue Router 頁面切換
5. SCSS 預處理器
6. axios 套件處理 AJAX

後台功能:

1. 新增、修改及管理文章、魚種等...
2. 查看會員資料
3. 查看聯絡訊息
3. 查看管理員資料及修改

前後端整合:

1. 使用 Node.js + Express 框架
2. RESTful API 進行請求
3. CORS 處理跨域請求
4. Passport 處理身份驗證
5. bcrypt 處理密碼加鹽
6. MongoDB + Mongoose 套件,建立 Schema
7. Multer 套件處理上傳文件
8. Cloudinary 進行媒體管理
...

地方創生

這是一個以地圖為核心的網頁應用,旨在協助使用者查詢與了解各地的地方創生資訊。使用者可以透過互動式地圖,直覺地探索特定地區的創生計畫、活動或特色場域。

...

中央大學場地租借系統

提供使用者線上預約場地的系統,主要用於管理學校使用空間(如會議室、展演空間等)的租借流程。介面簡潔,操作直覺,適合一般使用者與管理員雙方使用

...

LINE Bot 查詢資料

Ocean 是一款海水魚玩家的 LINE Bot。 使用 Node.js 製作查詢開放資料的 LINE 機器人。

...

Zombie 殭屍遊戲

使用 html5 和 jQuery 製作的遊戲。由右至左的怪物入侵領地,點擊即可消滅怪物。將最高分玩家存入本地儲存庫。

...

Matching 配對翻牌

jQuery 以及 CSS 3D 製作海水魚類的翻牌遊戲, 使用者需翻開相同的卡牌,當配對成功顯示魚種介紹,以寓教於樂的方式讓使用者愛上海水魚。

...

Clock 時鐘

JavaScript DOM 的操作和計時器,使用 setInterval() 函數更新頁面時間,利用時間做判斷更換面朝方向及窗外明暗。並且加入現在年月日期以利使用。

ZHANG-WEN

©Copyright All Rights Reserved