Profile 00 00@2x

江鈺棋 Kang 


您好,我是江鈺棋,曾任職媒體單位編輯。我喜歡從鑽研陌生事物中獲得樂趣,受益於哲學系的訓練,也使我關注事物的原理與架構。我具備和跨領域客戶溝通的經驗,善於掌握工作流程。在每一個職場階段,我都追求盡善盡美,帶給公司更多貢獻並共同成長。

在職期間因興趣開始學習前端技術,投入前端工程師轉職之路,自行摸索網頁學習約 1 年時間。一路上學習到很多,希望未來能成為一名稱職的前端工程師。我已經努力一段時間,並且累積實作了 20 個以上大大小小的專案(請看下方作品集);我把學習的知識點,整理成 56 篇技術筆記(請看我的技術部落格)。  

Taipei,TW
[email protected]

技能


HTML / CSS 

  • HTML
  • CSS
  • SCSS / SASS
  • Bootstrap


JavaScript

  • JavaScript
  • jQuery
  • Ajax
  • Vue.js
  • 串接第三方 API


Tools

  • Git / Github
  • Webpack
  • Hexo

工作經歷

定贏傳媒, Jan 2017 ~ Jan 2019 

媒體事業部編輯

  • 負責跨部門的內容生產需求,包括:企業代編刊物、文宣、手冊、臉書社群經營 
  • 執行科技部生醫產業創新執行中心專案的全年度的內容編採,獨立完成整個專案,包括:企劃、採訪、撰寫、聯繫協調 
  • 以跨領域的觀點,運用淺顯易懂的說明方式,使讀者能快速閱讀並理解生技新知 
  • 協助新進人員之教育訓練

愛吃客整合行銷, Jan 2016 ~ Dec 2016

特助

  • 文稿翻譯潤飾
  • 提案書撰寫

國外出差經驗 

  • 中國上海出差 2 個月
  • 在中國出差期間,利用週末體驗中國,前往上海週邊旅行
  • 能夠與中國夥伴溝通,合作達成目標     

學習成果

  • 實作了20 個以上大大小小的專案(請看下方作品集)
  •  我把學習的知識點,整理成 56 篇技術筆記。
  •  其中 40 篇跟 Javascript 有關。 
  • 專案的實作細節記錄在 Github 
  • 使用 Hexo 配合 Github Pages 架設個人 Blog。

Ajax / API 串接作品


Profile 03 00@2x

新北市 Youbike 查詢 - JS

新北市 Youbike 站點查詢。

  • 利用 fetch 介接第三方資訊 - 新北市政府開放資料平台
  • 串接 Google Map,顯示站點地理位置
  • 下拉式選單過濾獨立地區資料
  • 分頁功能,限制每一頁呈現資料量

Github| Demo

Profile 03 00@2x

空氣指標儀表板 - JS

環保署空氣指標開放資料。

  • 利用 fetch 介接第三方資訊 - 環境資源資料開放平臺
  • 使用 add()  在 Set 物件加入指定元素
  • 以 filter() 方法 過濾陣列,獲得選擇地區的資料
  • 以 sort () 產生排序資料
  • 以 find () 方法取得滿足條件的元素,獲得單一鄉鎮的詳細資料
  • 載入中畫面


JavaScript / jQuery 小作品


Profile 03 00@2x

五子棋 - JS

實現五子棋人機對戰。

  • Canvas 繪製版面與棋子
  • 可交互落子在棋格
  • 可判斷勝負

Profile 03 00@2x

瀑布流相簿 - JS

實現 Pinterest 瀑布流版面。

  • 瀑布流的圖片定位 
  • 瀑布流的圖片排序 
  • 瀑布流的圖片加載功能

Profile 03 00@2x

牌卡配對遊戲 - JS

選取偶數相同的圖片配對。

  • 以 Math.random() 及 sort() 方法,隨機排列圖片順序
  • 運用陣列及 concat () 方法,製作成對卡片
  • 限制每一輪遊戲只能翻 2 張
  • 設定卡片配對條件
  • 將成功配對的牌組從畫面隱藏
  • 移除點選狀態,重新開始遊戲
Github| Demo | 筆記


Profile 03 00@2x

Pomodoro - JS

番茄鐘。

  • 一個番茄鐘包含工作 25 分鐘、休息 5 分鐘
  • 可開始、暫停、重置時鐘
  • 可切換隱藏按鈕隱藏按鈕
  • 將該時段任務與完成時間長度顯示在下方列表
Github| Demo | 筆記
Profile 03 00@2x

骰子遊戲 - JS

骰子遊戲,達到累積分數後顯示勝者。

  • 擲出 1 ,則立刻切換倒下一個玩家,且此輪不累計分數
  • 連續擲出 2 個 6 ,則該輪玩家目前累積總分歸零
  • 可選擇將該輪所得分數到累加到總分裡 
  • 需可判斷哪一個玩家達到勝利標準 
  • 可由玩家輸入自定義的獲勝標準
Github| Demo | 筆記

Profile 03 00@2x

Slider - jQuery

jQuery 實作圖片 slider。

  • 點擊可切換圖片
  • 圖片切換時可自動變形
  • 圖片切換時可自動縮放
  • 設定圖片切換與縮放時間
Github| Demo | 筆記


Profile 03 00@2x

Todo List - Vue.js

使用 Vue.js 建立待辦事項清單功能。

  • 可動態切換 ClassName 與 style 
  • 運用指令與修飾符
  • 表單資料綁定
  • 待辦事項的動態新增、刪除、修改
  • 製作頁籤切換功能 
Github| Demo | 筆記

Profile 03 00@2x

麥好冰 - Vue.js 

線上課程作業  

  • 完成最基本電商前後台主要功能。
  • 自行設計內容與畫面等,完成獨一無二的作品。
Github | Demo


Profile 03 00@2x

倒數算數遊戲 - JS

線上課程提供的挑戰
  • 以  setInterval() 製作倒數效果
  • 以 Math.ceil() 及 Math.floor() 取得數字
  • 取得隨機生成的運算符號
  • 需判斷答案是否正確後累計分數
  • 開始及結束遊戲的換頁效果
Github | Demo


純手刻切版 


Paragraph image 05 00@2x
Paragraph image 05 01@2x

實作功能

  • Flexbox 盒模型 
  • 手刻靜態網頁 
  • 運用 keyframes 製造公轉、陰影、跑馬燈效果 
  • 立體交疊效果 
  • RWD,隨畫面寬度顯示不同樣貌。 
  • 串接 Google Maps API 顯示位置。 
  • Parallax 視差捲動效果
  • iframe 顯示影片
Demo 1 | Demo 2 | Demo 3 | Demo 4
Paragraph image 05 00@2x
Paragraph image 05 01@2x

 

Bootstrap 切版


Profile 03 00@2x

實作功能

  • Grid 排版
  • 元件運用
  • Slider 圖片滑動效果
  • iframe 顯示影片
  • Dropdown 選單
  • 文字滑動動畫效果 
Demo 

學歷

國立政治大學, 碩士, 哲學系, 2009 ~ 2014

Company@2x

國立政治大學, 學士, 哲學系, 2005 ~ 2009


Company@2x
Powered by CakeResumePowered by CakeResume
Powered by CakeResumePowered by CakeResume