陳俊豪

前端工程師

  Hsinchu, Hsinchu City, Taiwan

個人技術筆記部落格：https://crazycjh.github.io/andy-tech-note/

技術筆記Threads:
https://www.threads.net/@chc_web_dev

網頁前端作品集：
https://www.cakeresume.com/me/jean-hao-chen/portfolios

前端技能：

• Vue3(Vuex, Vue Router)
• Javascript(ES6,AJAX)
• REST API / WebSocket / SharedWorker Web API / Google oAuth
• CSS3 / Tailwind  / primeVue

後端技能：

• Node.js(Express)

使用工具：

• git、github、bitbucket
• Postman、Dbeaver

你好，我是陳俊豪，具備多年的軟體工程經驗，目前於創意數位科技網擔任全端工程師以Vue、Wordpress、MySQL建置各類專案及曾於網路通訊公司研發部擔任軟體工程師，參與網站開發及Wi-Fi路由器的研發。

於創意數位期間除了程式撰寫之外同時也擔任專案窗口與客戶溝通，並以後端工程師身份與APP 工程師溝通協調REST API，亦與 PM 討論功能可行性讓專案得以順利進展。同時也以前端身份建置祈福平台串接後端資料，也因有後端經驗讓專案開發更為順暢。

2023/04 - present 
GCreate創意數位期間(全端)：

1. 以 Vue 開發廟宇祈福平台前端畫面(購物、firebase驗證登入、頁面切版RWD)，建置後端管理平台(訂單、商品)、REST API。
2. 以 Vue 於 Wordpress 建置音訊串流播放器，依照顧客需求切版，製作桌機版以及手機版本播放器(RWD) - 亞洲電台
3. 以Wordpress 建立後端與 APP 及後台以 REST API 串接，其中以 Postman 確認 API 正確性，以及將 Postman 設定檔給予合作工程師同步 API 需求及回傳資料正確性 - 某直銷商。
4. 在Mock API Server 改善開發流程
5. 於Wordpress(PHP) 撰寫 REST API 串接 APP。
6. 作為窗口與客戶溝通並且確認功能，並將相關資訊告知APP工程師及相關人員。
7. 製作演唱會購票平台後台操作Flow chart以及UI Flow，與工程師溝通確認後台操作介面樣式並且修改。

2016 - 2018
於網通廠(明泰科技與盟創科技)期間：

1. 以HTML/Javascript/CSS製作家用路由操作介面。
2. 以底層C語言撰寫資料中心及家用路由器系統，串接硬體功能及上層使用者使用的網頁控制功能。
3. 移植系統至新專案的路由器硬體上，並使其可以啟動並且不斷的修正與硬體的API串接

創業及其他經驗：
我亦有創業經驗，曾經營過一家麵包店，並同時成立了一攝影工作室，提供無人機空拍、靜／動態攝影、剪接、後製等影像服務。兼職攝影期間，我透過Wordpress建置攝影工作室的作品網站，將攝影作品展示在網頁上。另外自學Python並申請清華大學自強工業科學基金會AI資料科學家的課程，進修Python程式設計和初階機器學習。也是在這門課程中，我接觸到了網頁前端，並進行了一些專案，例如以Vue.JS為主的專案，這開啟了我對網頁前端開發的興趣。 

我認為兼職攝影師的經驗對於網頁前端程式設計有許多幫助，前端工程師與攝影的共通處在於對美感與使用者／被攝者的敏感度，這使我與UI/UX設計師有良好的溝通，能更明確的確認設計的畫面是否可以透過CSS/JS/HTML來實現，並能更精確地傳達實現的方法。 

前端專案

1. Markdown 線上編輯器
   Demo ：https://vue-mdeditor.web.app/ (請用電腦登入使用) 

   github：https://github.com/crazycjh/MDEditor-vite-vue3

   • Vue.js / Vue Router/ Vuex
   • Tailwind/ Tailwind element
   • Codemirror/ Marked /Google  Firebase API
   • 功能
     1. 畫面左側輸入Markdown語法，右側顯示HTML頁面
     2. 輸入文章標題關鍵字會跳出提示列表供選擇(ShowHint)
     3. 輸入雙中括號([[ 文章標題 ]])搭配文章標題會建立文章連結，點擊可跳轉到該文章
     4. Goolge Firebase Realtime Database作為後端儲存文章內容以及列表
     5. 點擊上方按鈕可以建立相對應的Markdown語法
     6. Codemirror v5為編輯器介面、Marked為Markdown編譯引擎
     7. Tailwind Element 建立編輯器外觀
     8. Vuex管理登入狀態、文章內容，Vue Route管理路由
            新增功能:藉由修改codemirror裡面的showHint功能，把此功能改成當前流行的 MD軟體(obsidian)裡面的”文章連結”，當在編輯器輸入兩個中括號 “ [[ ]] “，隨後會跳 出一個下拉式選單供選擇，而這個下拉式選單的內容會是文章列表中其他的文章。 在右側HTML code的部分會顯示可點擊的連結，點擊後會直接跳轉至對應的文章。
        
            新增功能:以Google Firebase realtime database為後端資料庫製作聊天室功能。
            1.串接Firebase API呼叫Firebase資料庫，支援帳號登入驗證、資料讀取和寫入。 在資料部分使用Realtime database功能，並且可以依照個別使用者存取資料。
            2.使用Codemirror version5作為編輯器，Markdown編譯引擎選擇”Marked”。在 codemirror編輯器輸入文字同時會把文字透過marked API轉換成對應的HTML code 並顯示在畫面右邊。           
        
        
2. 攝影工作室網站 - Wordpress網站建置：
       https://hao2photo.com/
   
       網站架構：wordpress
       網路主機：sugarHost
       DNS：Google DNS
      套件：Elementor
      以上述架設攝影工作室的作品網站以及部落格，初始版本為部落格模式，而後與夥 伴討論後將首頁改為可以展示相關攝影服務列表相簿，並且在新增接案經歷頁面。
   
   
   
       成果：改版後更容易讓業主看到所需的服務以及相關作品，可以很有效率的溝通。

   

   
   
   
   
3. 技術部落格：
   • https://crazycjh.github.io/andy-tech-note/
   • hexo
   • Markdown
   • github/git

4. 技能：

   • 前端：
     Vue.js、HTML、Javascript、CSS、Tailwind、Tailwind Element 
   • 網路：TCP/IP、802.11、Socket programing
   • 其他語言：C、Python
   • 作業系統：Linux指令
   • 其他：網路爬蟲、Wordpress網站完整建置