Skip to content
View joechen0730's full-sized avatar

Block or report joechen0730

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Maximum 250 characters. Please don’t include any personal information such as legal names or email addresses. Markdown is supported. This note will only be visible to you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
joechen0730/README.md

陳世勛 (Joe Chen)

  • Birthday: 1993/07/30
  • Education:景文科技大學 / 電子工程系
  • Location: New Taipei City
  • E-mail: [email protected]
  • Mobile: 0937-791-264
  • 線上技術及心得筆記本 : https://medium.com/joelifestory (會漸漸從原本 Evernote 轉移心得及筆記至 Medium)

Skills

前端技能:

現代化前端架構

  • 熟悉 Vue3 並理解 Vue Router/Composition API /lifecycle,並使用 Pinia 統一管理資料狀態
  • 熟悉 React (Hooks / Redux 等狀態管理與數據請求)
  • 熟悉 Nuxt.js 及 Nuxt.js 框架,並理解 App Router / Pages Router/ Middleware、實現 CSR、SSR

介面與佈局

  • 熟悉 HTML5 (熟悉應用 HTML 標籤,針對 SEO 對應的 HTML 語意化標籤)
  • 熟悉 Bootstrap / Element UI/ Ant Design UI框架。
  • 熟悉 CSS3 (熟悉應用Flexbox / Grid、遵循 OOCSS 或 BEM 風格,以利維護及組件化)
  • 熟悉 Sass / SCSS / Tailwind CSS : 將重用性的 CSS 模組化,加速開發並提高維護性
  • 熟悉 響應式網頁(RWD) : 熟悉可不依賴套件並手刻切版;可符合各裝置適用的頁面

程式語言基礎

  • 熟悉 JavaScript / TypeScript (原生 DOM 操作、事件流處理及 ES6+ 語法、遵循 ESLint )
  • 熟悉 jQuery 並整合使用 jQuery 第三方套件
  • 使用 AJAX , Axios(理解並應用非同步Promise/Async/Await) 撈取遠端資料並渲染在網頁上、理解 API 介面規格 (RESTful API)
  • PHP、Python(具備基礎後端邏輯開發與維護經驗)

前端工具 / 網站應用

  • Chart.js / D3.js / C3.js (繪製各式動態圖表並產出報表)
  • Jest (前端測試確保程式碼品質且無誤)
  • Gulp, Webpack (自動化打包或編譯,壓縮程式碼及圖片壓縮並轉換WebP格式、Split Chunks Plugin)
  • Lighthouse 調校 SEO 與效能提升 (實踐網頁負載優化、SEO優化及 CSRF、XSS 安全防護設計、熟悉 JSON-LD)
  • Google Analytics、Google Search Console、GTM(熟悉設置事件分析、漏斗轉換率)

AWS 雲端技能

  • 熟悉 AWS 各項基礎服務,如 AWS IAM、AWS VPC、AWS NATGateway等等。
  • 設計並施作 AWS Web、AP、DB 三層式雲端架構,並設置 LoadBalance 及 AWS Auto Scaling 來達成高可用性(High Availability)。
  • 熟悉並建置 AWS CodePipeline 整合 AWS CodeCommit、AWS CodeBuild、AWS CodeDeploy 來完成 DevOps CI/CD 之需求。
  • 熟悉並建置 Lambda 及串接 AWS APIGateway 來達成 RESTful API 串接,完成微服務。
  • 熟悉使用 AWS SES 功能,地端 Mail Server 搬遷上雲至 AWS SES 並製作硬退信及軟退信功能,優化行銷部門有效客戶名單。
  • 熟悉使用 AWS CloudWatch,根據各項監控需求串接至 Slack 或 AWS SNS 將告警信寄送給主管及維運團隊。
  • 熟悉使用 AWS Config 及 AWS CloudTrail 依需求客製規則,來完成稽核或追蹤資源變更或資安需求等等。
  • 熟悉使用 AWS S3 並開啟快取來放置圖片、文件或靜態網站,設置lifecycle policy 或 S3 Glacier 來管控資料的生命週期或長期存放。
  • 熟悉並串接 AWS Cogito 整合第三方驗證,達到使用者註冊/登入和存取控制。
  • 了解 CloudFormation 並使用 AWS CDK 來實現 IaC 並整合 AWS CodePipeline 管控基礎設施資源。
  • 了解 AWS ECR 並整合 AWS CodePipeline 部署資源至 AWS EC2 或 AWS ECS

工具/伺服器/資料庫

  • Docker (Docker Compose 定義多容器應用)
  • Jenkins (進行自動化部署管理測試與正式環境)
  • Postman、Swagger
  • Git、Commitizen(熟悉並應用 GitFlow、PR流程、理解 merge/ rebase、reflog)
  • Trello、Slack (參與執行 Scrum 敏捷式開發)
  • MySQL(具備基礎後開發與維護經驗)
  • Linux (shell script、crontab、基礎指令操作)
  • Apache(SSL憑證設定及更換、Cache 設定、Gzip、Cookie XSS、CSRF)

專業證照

  • AWS Cloud Practitioner 證照
  • AWS DevOps Engineer Professional 證照
  • Google Certified Professional Cloud Architect 證照

工作經驗

Deloitte 勤業眾信

  • 工作期間 2025/06 - 2026/08
    職位:資訊風險諮詢經理
    • 零信任架構(ZTA)⾵⾵險評估專案險評估專案
      • 獨立作業並執⾏超過五家以上⾦融集團公司的零信任五⼤⽀柱架構訪談、風險訪談。
      • 根據後續訪談結果及客戶實際狀況,並製作改善建議報告、短中長期藍圖報告可作為建議報告提供給客戶使用。
      • 提供各項 POC、導⼊解決⽅案給客戶選擇,並持續提供建議及確認執行內容有符合零信任項次條件,並完成 0 到 1的一條龍服務。
    • 雲端架構健檢專案及資安合規評估
      • 執⾏多家金融公司客戶,法規面如 CIS Benchmark、金融機構委外使用雲端自律規範等,評估客戶雲端場景,產出建議報告。
      • 產出評估報告以及建議報告,並持續協助客戶改善雲端架構資安⾵險疑慮
    • 建置公司內部AI報告平台:
      • 使⽤ Vue 3 開發及建置前端畫⾯並與串接API,且根據使⽤者需求規劃及製作 UI/UX
      • 接後端同仁使⽤AWS Lambda 及 AWS Bedrock 並透過上傳及下載可以建置屬於公司的知識庫
      • 製作聊天室畫面,串接AWS Bedrock 來完成 AI ChatBOT,可提供同仁詢問相關內容。
    • 製作各項⽂件及主管交辦之報告:
      • 根據主管之需求,製作各項簡報並提供給主管提案使⽤,例如製作雲端/混合雲CICD簡報、微服務(Microservices)簡報等等。

CKmates 銓鍇國際

  • 工作期間 2019/07 - 2025/04
    職位:高級工程師
    • 重構核心系統 [帳務平台系統]

      • 前後端分離架構: 使用 Next.js 並搭配Ant Design 來做為前端UI,與後端同仁設計 API 規格並串接 API,串接 AWS Cognito 做第三方身份驗證,並建置 Middleware 檢查身分驗證,並製作Access Token及Refresh Token。
      • AP 雲端架構: 前端使用 Docker 映像,減少構建時間並 AWS ECR 並透過 AWS CodePipeline 部署資源至 AWS ECS, 從 0~1 定義新架構,徹底解決舊有系統效能與維護瓶頸
      • 圖表呈現: 導入 Chart.js 與 D3.js 製作互動式圖表,實作 Excel 報表匯出與 PDF 帳單產生功能,加速財務作業流程
      • 品質保證: 使用Jest 單元測試及整合測試,確保版本更新前是正常運行且符合預期。
      • 訪談各部門的使用者需求並製作 UI/UX ,以確保使用者體驗及功能要求有符合使用者需求。
    • 電子信箱 EDM系統:開發、維護及搬遷上雲

      • 地端 Mail Server 系統上雲: 地端Mail Server 寄送上萬封信需要2~3 個小時,上雲改為 AWS SES 後僅需要 5 ~ 10分鐘即可完成,建立 Hard/Soft Bounce 機制(AWS PHP SDK),優化客戶名單品質。
      • 跨系統功能整合: 開發活動報名系統,整合 EDM 與官網 API,提升行銷活動轉換率
      • 編輯器工具串接AWS S3 : CKEditor 串接AWS S3, MKT 可上傳檔案及圖片至AWS S3,並使用CloudFront 快取。
    • 官方網站前台及後台系統:網站開發與維護

      • 重構底層架構 : 分離商業邏輯與畫面層,並運用 Code Splitting、Memoization 等技術,減少不必要的 re-render,提升效能與可維護性。
      • 優化網頁品質: 導入 Gulp 自動化流程(壓縮、拆分、圖片 WebP 轉換),使用 Lazy Loading 延遲載入圖片、Youtube影片等等, Lighthouse 桌機分數由 34 提升至 72
      • 提升網站效能及資安防護: Apache 設定 Cache 、啟用 Gzip 模組優化載入校能、設置 Cookie XSS、CSR提升資安防護
      • 提升SEO 自然排名: 提升 SEO 自然排名,使用正確的HTML Tag 並設置JSON-LD結構化資料,透過後端每天自動生成 Sitemap 及 Rebot.txt 提昇 SEO 自然排名。
      • Google Analytics : 規劃 Google Analytics 事件追蹤與轉換漏斗分析,支援行銷決策
      • 優化部署流程 : 導入自動化流程,透過整合AWS CodePipeline CI/CD 提升部署效率。
      • 服務狀態監控: 使用 AWS Cloudwatch 監控健康狀態並設置告警,並將告警串接至Slack,確保服務運作正常。
    • 凱擘大寬頻 用戶節目推撥系統:

      • 服務狀態監控: 使用 AWS Cloudwatch 設置多層告警分級,將告警串接至Slack 並透過AWS SNS 發送告警給維運團隊,確保服務運作正常。
      • 使用 AWS CDK 實作 Infrastructure as Code(IaC) 並透過 AWS CodePipeline 管控基礎設施資源
      • 高併發架構(Load Balancer + Auto Scaling + DynamoDB + DAX),確保高併發環境下的系統高可用性。
      • 組態監控及異常排除: 使用 AWS Config 追蹤資源變更,並使用 AWS CloudTrail來追蹤API呼叫狀態及異常派除。
    • 雲端專案

      • 微服務 PoC : 建置 AWS API Gateway 及 Lambda 達到Serverless,協助客戶微服務搬遷上雲
      • AWS CI/CD 搬遷上雲 PoC: 協助客戶導入 AWS CodePipeline CI/CD,並建置 Lab 環境,完成實作 POC 專案

Moveon 慕恩創意行銷網頁設計公司

  • 工作期間 2018/03 - 2019/05
    職位:前端工程師
    • 多種活動網站
      • 優化效能 - 提升網頁載入時間
      • FB追蹤、Google追蹤 - 點擊及轉換
      • 客製化響應式介面
    • 形象網站
      • 優化效能 - 模組共用 / 提昇網頁載入時間 / 提升維護品質
      • 善用 Plugin,達到多種特效
      • 與 Designer 共同討論版型、特效及 UI/UX 效果及流程
    • 維護舊有網站及備份資料

相關證照

  • GCP ProfessionalCloudArchitect

  • AWS Certified DevOps Engineer Professional

  • AWS Certified Cloud Practitioner

作品集

線上書商網站 (booknote)

  • Booknote (RWD)



    ⌞ 使用 Vuex 以及 Nuxt 完成,並用 i18n 支持多語言(中 / 英) 。
    ⌞ 設計 UI/UX 並製作完整的購物網站流程,含前台跟後台以及購物車頁面等等。
    ⌞ 使用 Cookies 來記錄使用者登入狀態及當前搜尋書本關鍵字
    ⌞ 使用 RESTful API 來完成後台的商品及上傳 CRUD 功能
    ⌞ 使用 Google Analytics 來追蹤網站成效,並且設定轉換率確認使用者停留頁面等等事件

匯率兌換網站 (Vue-Eate)

  • 匯率兌換網站 (RWD)



    ⌞ 使用 Vue cli3 ,並用 i18n 支持多語言(中 / 英) 。
    ⌞ 使用 MVVM 資料綁定的方式,可在下方表格輸入貨幣金額並且立馬轉換。
    ⌞ 透過 node.js 線上資料庫每日抓取新 API資料
    ⌞ 動態偵測網址切換後可直接更改語系(Tw or En)
    ⌞ 匯率兌換時,透過參數將值放置網址並且編碼傳送至兌換頁面,重整後解析一樣可得相同數值
    ⌞ 使用 Google Analytics 來追蹤網站成效,並且設定轉換率確認使用者停留頁面等等事件
    ⌞ 使用 vue-router 製作 SPA 網站

高雄旅遊資訊 (Kaohsiung-Travel)

⌞ 使用 Vue 框架完成,再資料獲取完及運算後渲染至頁面。
⌞ 透過 AJAX 技術(Axios) 取得 Json 資料。
⌞ 做出彈跳視窗,將你所點選該地區的資料透過Vue存取資料後並顯示該當地區域的資訊。
⌞ 動態取得點擊資訊,將資料透過 computed 將緩存應用,提升使用者瀏覽體驗。

台灣天氣圖 (Taiwan-weather)

  • Taiwan Weather




    ⌞ 使用 Vue.js 資料驅動畫面並且動態抓取背景圖及資料
    ⌞ D3.js 搭配 topojson.js 繪製台灣地圖
    ⌞ 使用 c3.js 搭配 Axios 動態取得預測天氣,並渲染到頁面上
    ⌞ Support for more than tablet (最低支援到平板以上)

Vuex備忘錄 (Vuex-todolist)

  • Vuex-todolist (RWD)


    可雙擊後修改資料,並且加上時間戳來顯示上次新增時與現在的時間差



    ⌞ 使用 Vue cli3 ,並用 Vuex store 將資料集中管理。
    ⌞ 使用 router 偵測路由狀況及獲取資料。
    ⌞ 透過 localStoge 將資料儲存在本地端網頁中,使下次開網頁時並不會被清空。
    ⌞ 將資料透過 computed 暫存,優化網頁速度及運算時間。
    ⌞ 做出時間差模組,可得知當下發文時間及當前時間相差多少 Ex: fb 時間戳,IG時間戳 等等..。

  • Joe's Shop 電子商務網站(RWD)(多頁式)
     
    ⌞ Bootstrap並修改部分Bootstrap原件建立獨一無二的網站(RWD) 。
    ⌞ 在商品頁中加入燈箱,使購買者放大商品,提高購買者的購買慾望
    ⌞ 加入切換照片的功能,使購買者可選擇不同顏色的服務
    ⌞ 表單設立前端網站的驗證功能,可先偵測表單是否正確。
    ⌞ 加入購物車及登入、註冊之功能。
    ⌞ 主頁、商品頁、結帳頁都擁有RWD,在較小的頁面中,提高UX的體驗性,將按鈕及商品、文字皆放大,創造大眾電子商務無 RWD 之功能
    ⌞ *輪播圖片擷取自蝦皮拍賣,此網站僅供自己練習及投遞履歷使用,無任何商業及營利之行為。

  • 大堡一餐 diner(RWD)
      

    ⌞ Bootstrap 快速搭建響應式網頁 + RWD 。
    ⌞ 加入進場特效使顧客有不同的使用體驗
    ⌞ 使用視差滾動呈現前後漸層效果
    ⌞ 結合 Google Map Api 將資料標記在地圖上。
    ⌞ 透過多方參考,並自行設計UI/UX界面。

  • 健康小檢驗-算算 BMI

        ⌞ 透過 Javascript 實現數學計算、並擁有 Todo-list (新增、完成與刪除事件)
    ⌞ 根據輸入不同的資料,給予不同顏色條的 BMI 作為回復
    ⌞ 使用網頁暫存將資料暫存在網頁中,需要手動刪除才可將資料移除。

  • 驚奇旅遊 (RWD)


    ⌞ 建立三種大眾常用的響應式網頁(手機、平板、桌電) 
    ⌞ 使用多種動畫進場特校
    ⌞ 加入輪播及位置條,在不同的區塊,位置條會顯示所在的區域

  • Jos's形象網站 (建置中尚未完成)

     ⌞ 使用 SCSS 及 Webpack 提高網頁效率及程式碼整潔
    ⌞ 使用 視差滾動來達成用戶良好的 UX體驗
    ⌞ 加入多種炫麗特效及網頁特效,提升網頁質感
      ⌞ 在較小的裝置中,使用左側滑入的導覽列。
    ⌞ (預計)將網頁做成專業的形象網站,讓用戶有良好的操作體驗及感官,加深對於此形象網站的好感

Pinned Loading

  1. joechen0730 joechen0730 Public

    Chen Joe's 線上履歷 & 作品集

    HTML 5 16

  2. booknote booknote Public

    HTML

  3. Taiwan-weather Taiwan-weather Public

    Taiwan weather / c3.js d3.js Vue bootstrap

    HTML 1

  4. Vuex-todolist Vuex-todolist Public

    Vuex-todolist

    HTML

  5. Vue-Eate Vue-Eate Public

    Vue - Exchange rate ( 雙語系匯率轉換網站)

    HTML 2

  6. JoeChen JoeChen Public

    It's Joe's portfolio website