陳杰生 Jason Chen

# Front-end Engineer

# Life-time Learner

# Craft Beer Lover

# Coffee Holic

  Taipei        


簡歷

我是陳杰生,於 2021 年開始於 Udemy 專注學習前端開發相關知識,於六個月內完成所有訓練課程及專案成果,除了熟稔 JavaScript ( ES6 標準 )、HTML、CSS 等前端相關技術 外,訓練過程也包含 SCSS / Tailwind 編譯、Axios / JSON 串接、Git 版本控制、React 框 架、使用 VS Code 開發 ... 等技術知識。因性格特質擅長梳理脈絡、熱衷學習,隨著新知識點與技術的成長,持續優化過去製作的專案成果。 

因先前工作性質包含接觸大量客人,藉此長期汲取跨工協調及觀察的經驗,在前端的工作領域中能更快地掌握相關需求。於時效性高的專案中也能妥善分配資源,達到最高的效益。 

冀望能以這些經驗協助貴公司發揮出更大的效益,做出更多貢獻,並與公司共同成長,謝謝!

專業技能

Layout


  • 熟悉 HTML5 / CSS3 網站設計
  • 手刻 RWD 響應式網站
  • 使用 SCSS / Tailwind CSS 提升提升開發效率
  • 使用設計相關工具,如 Figma

JavaScript


  • 熟悉 JavaScript 基本語法 
  • 了解 ES6 語言特性 ( let , const , arrow function , template literals ) 
  • 熟悉 AJAX / JSON 串接第三方 API ( TMDB / Weather API ) 
  • 具介接 RESTful API 的經驗 
  • 具 SPA 單頁式應用網站經驗

React


  • 使用 React Cli 建立專案
  • 使用 React Router 路由配置
  • 使用 React Hook 開發
  • 使用 React JSX 提升元件開發效率

Git / GitHub


  • 熟悉 Git 指令
  • 了解 Git Flow 工作流程
  • 使用 GitHub Pages 部署靜態網頁

Deploy


  • 使用 Netlify 部署 
  • React 專案
    使用 Heroku 部署後端 API
  • 使用 Vercel 部署 Next 專案

Tool


  • npm / Yarn 套件管理
  • Node.js / NVM 版本管理
    Postman 協助資料串接
  • Chrome Dev Tool 網頁開發者工具
  • Alacritty / Tmux 終端機工具

Portfolio Site 

2022/5~2022/5

作為個人網站,提供一個快速展示作品與簡介的管道。 

  • Next.js - 藉由框架提升維護的便利性並強化 SEO 搜尋引擎優化 
  • Tailwind - 配合 component 提升樣式編寫效率 
  • Swiper - 提供個人化功能且順暢的輪播圖 
  • Vercel - 發佈網站與運行管理

https://meatba11-portfolio.vercel.app/

apartment Baofu

2022/1~2022/4

作為租屋管理網站,提供 : 

1.各房型形象、內部實景 

2.房客生活資訊彙整 

3.三種使用者身份區別隱私訊息與管理功能 

*訪客-可以瀏覽布告欄、能源費以外的頁面 

*房客-可以瀏覽布告欄、能源費但無法管理內容 

*管理員-可以管理布告欄、能源費內容,且可以新增房客帳號

  • React - 藉由框架提升程式的複用性以及維護的便利性
  • Axios - 串接後端 API 
  • Tailwind - 快速編寫出想要的樣式
  • MongoDB - 管理使用者資料及布告欄等內容
  • Express - 配合 DB 建立 RESTful 風格的 API 
  • Passport - 搭配 JWT 管理使用者認證的功能 
  • Joi - 驗證資料格式符合需求,並返還使用者錯誤提示

https://apartmentbaofu.netlify.app/

Sheng's Film Site 

2021/5~2021/6

作為個人網站呈現客戶的影像編導、剪輯作品,並輔以文字摘要說明,希望以簡練的風格傳達專業與穩定感。 

  • HTML - 基礎的網頁架構 
  • SCSS - 負責處理畫面視覺設定 
  • JS - 主要負責頁面跳轉的過渡效果與手機版的選單開合控制 
  • 在不使用套件的前提下實現頁面跳轉的過渡動畫 : 用 click 監聽器設定動畫效果並在結束時執行跳轉

https://shengsfilm-old.netlify.app/

Sheng's Film Site - React 

2021/10~2021/11

以 React 框架重新製作個人網站,以提升網站維護、管理的便利性 

  • SCSS - 嘗試用組件化的概念管理 css 檔案 
  • React - 藉由框架提升程式的複用性以及維護的便利性 
  • React-transition-group - 可以配合元件的切換執行過渡效果 
  • 想要簡單的判斷瀏覽器視窗大小來決定元件渲染與否 : 使用自製 Hook 搭配window.innerWidth 並使用 useEffect 監聽 resize 事件

https://shengsfilm.netlify.app/

To do List Site 

2021/7~2021/8

這個網站提供使用者記錄代辦事項的功能,並且可依日期由近到遠排序 

  • HTML - 基礎的網頁架構 
  • SCSS - 處理視覺呈現 
  • JS - 使用 localStorage 將內容儲存在瀏覽器中,並對資料進行排序 
  • 為提昇操作的互動性,使用 Figma 繪製 SVG 配合 css animation 製作動態 icon

https://freshmeatba11-todolist.netlify.app/

工作經歷

營運專員  •  絲碧淨科技股份有限公司

Jun 2020 - Oct 2020

公司擴展規模期間負責協助優化客服與物流管理SOP


門市組長  •  啤啤精釀啤酒屋

Apr 2018 - Feb 2020

負責店務營運,提供客人專業啤酒知識

音響門市銷售人員  •  Little Sound小音響

Jul 2017 - Apr 2018

於門市裡提供專業商品介紹及個人化之需求整合

Welcome ambassador 迎賓大使  •  W Taipei

Jul 2015 - Dec 2015

於第一線提供顧客美好的服務體驗

學歷

Sep 2013 - Jan 2027

景文科技大學

旅館管理系 學士

Powered By CakeResume