王正宇

前端網頁設計師

我是王正宇,現居於屏東縣。

原本從事博物館展覽設展規劃人員,在偶然策展經驗,接觸到互動式藝術的經驗,讓我開始對UI/UX及網頁互動的技術產生高度學習意願,我開始於線上去尋找適合的學習資訊、及課程平台資源,如Hahow及六角學院等,展開自我學習前端技能的生涯規劃。

透過自學的方式,學習基本使用JavaScript、HTML、CSS撰寫基本互動式網頁畫面,並搭配Figma與Adoube Ai與Ps,製作Wireframe 、並產出簡易的Prototype ,幫助自己在學習每一個專案流程有一定的認知,搭配git與webpack幫助自己進行網頁實作,有養成良好版本控制的習慣,目前正透過額外時間,去積極學習Vue來製作完整度高的互動式網頁介面。

未來不願設限工作領域,希望多方面學習增加自我的技能,包含tailwind css、typescriptReact 、Nodo.js等。由於自身非本科系出身無法與前輩相提並論,但我會透過自我額外時間,去規劃學習進度,(例如參與六角學院JS和Vue3直播班和Adoube Photoshop & Illustrator daily post 100等),來彌補自己的不足,達到公司要求的進度和目標。

在未來有機會進入公司,我將會善用我所學到的知識技能在工作上盡心盡力,並替公司創造最高效益。

希望貴公司能給我一個面試的機會,更了解我。


       

技能

Tech Stack

   JavaScript     HTML      CSS     SASS      VUE   

Tech Stack

   webpack     github  

Design Tools

   Illustrator      Photoshop      XD      Figma  

專案練習

咖啡店網頁(Vue&HTML&CSS) 

  1. 希望製作近似line官網效果,使用vue特性將資料綁定至HTML的模板,進行跑圖片動畫,及搭配綁定/監聽整個視窗事件,針對Y軸進行監聽,當數值大過於監聽,當Y軸數值大過於0時畫面進行縮放,並運用CSS中 keyframes動畫效果,使中間大圖執行重複縮放動畫效果。
  2. CSS(SASS)建立網頁互動效果
    (1)滑鼠移動指定區域,鼠標變成手指頭,引導使用者 點擊。
  3. flex特性的運用編排,及position定位運用
  4. github連結:https://github.com/lomowang/vue-line-animate-demo-main.git


鋼琴(Vue.JS) 

  1. 運用vue.js特性將資料對應到HTML的模板,再透過AJAX綁定資料,及搭配DOM元素綁定/監聽事件,再使用及將樂譜渲染到網頁上。
  2. CSS(SASS)建立網頁互動效果
    (1)滑鼠移動指定區域,鼠標變成手指頭,引導使用者 點擊。
    (2)滑鼠移動指定區域 ,該區域底色變色 
  3. codepen 連結:https://codepen.io/lockinglomo/pen/wvrNrJm


JavaScript(Ajax串接、innerHTML綁定與addEventList監聽)

  1. 運用基本Ajax串接/綁定資料,使用JavaScript針對網頁上的DOM元素事件 ,進行innerHTML綁定及addEventLisi監聽,建立可篩選及建立清單一頁式網頁。
  2. innerHTML綁定運用:
    JavaScript的forEach運用innerHTML組字串方式,將資料抓取出來。
  3. addEventLisi監聽運用:
    針對網頁上的DOM元素進行監聽(如click),並再運用物件取值方式,重新透過上述innerHTML方式,渲染到畫面上。 
  4. codepen 連結:https://codepen.io/lockinglomo/pen/ZEXePmY


JQuery、CSS(sass)運用

  1. JQuery購物清單 :
    (1)製作使用Json格式,再搭配Ajax綁定資料
    內容。
    (2)運用JQuery選取物件資料,及for迴圈運用清單內資料,並透過渲染方式呈現在畫面上 
  2. CSS(sass)互動式天氣盒子 :
    (1)主要運用CSS(sass) 動畫效果@keyframes搭配transform來操作月亮及雲朵的變化。
    (2)nth-child針對選定物件/順序進行畫面呈現,運用transition進行個別變化。
  3. codepen 連結: 
    (1)購物清單:
          https://codepen.io/lockinglomo/pen/abWZxPr
    (2)互動式天氣盒子:
         https://codepen.io/lockinglomo/pen/wvdQaRZ



CSS(sass)、Boostrap排版

  1. 在CSS(sass) 中操作mixin統一管理畫面色彩、文字、內容樣式 ,減少日後修改重物內容的複雜度。
  2. Boostrap 排版運用RWD效果,操作頁面變化。
  3. codepen 連結:
    (1)CSS(sass)品牌視覺引導 
    https://codepen.io/lockinglomo/pen/poPzygV
    (2)Boostrap排版
    https://codepen.io/lockinglomo/pen/eYRpQzq



FIGMA

Figma製作產品wireframe制定大致上版面樣貌和Icon分布、產出 prototype,測試使用者操作經驗再進行修正,並產出後期 mockup的展示。

FIgma連結:https://www.figma.com/file/2EJF5LuOvgi6VG5E1urQiX/verve-app%E5%B0%88%E6%A1%88?node-id=0%3A1






Poster 365

進行poster365天創作,使用Adoube AI & PS每天創作一幅海報,主題不設限。


連結:https://www.behance.net/gallery/113010473/poster365


工作經歷

文物維護及研究人員  •  原住民族委員會原住民族文化發展中心

一月 2018 - Present

1.傳統文物維護及質量分析研究
2.博物館展場規劃
3.專案研究及撰寫

銷售人員  •  日日良食

六月 2017 - 九月 2017

協助販售水煮餐盒,並適當掌握現場銷售狀況,以及回應客戶需求

客服人員  •  愛禮物創意設計股份有限公司

三月 2015 - 五月 2017

主要負責公司商品訂單成立,
需適時掌握商品內容,提供與滿足客戶需求。

Powered By CakeResume