# Front-end、Back-end 作品集 ## 自我介紹 [自我介紹](/6vJ0IjdkS32q1r2v5ATUiA) ## Github [我的Github](https://github.com/PeterCHEN-JIANRONG) ## 我的技能 ### 前端 * 框架:Vue (Vue3、Options & Composition API) * CSS框架:Bootstrap5、Tailwindcss * Vue技能:Vue CLI、Vue Components、Vue Router、Vuex、pinia、Vue SFC * 前端技能:網頁切版、RWD、SCSS、javascript(ES6)、Bootstrap5、格線系統([Grid system](https://bootstrap5.hexschool.com/docs/5.1/layout/grid/))、Webpack、Gulp、PUG、EJS、jquery、axios、RESTful API 串接、SEO、HTML5 標籤語意、SSL、DNS 憑證、cloudflare、GoDaddy * 套件:Swiperjs、AOS、Sweetalert2、validate.js、Validate.js、C3.js、Chartjs、Animate.css、axios * Vue 套件:Vee-validate、mitt、vue-axios、Pinia、ckeditor * Icon:Material Design、Bootstrap Icons、fontawesome * 設計:Figma * 設計搞:Figma、AdobeXD、Ziplin * 其他:Vite、有前後端串接經驗、具UI/UX設計基本知識 ### 後端 * 框架:Express * 技能:node.js、router、controller、mongoDB、關聯式資料表設計、middleware、JWT、RESTful API、heroku、串接第三方API、CSR、Swagger * 套件:mongoose、imgur、bcryptjs、dotenv、JWT、jsonwebtoken、multer * 資料庫:mongoDB、MySQL * Cloud:Heroku ### 共通 * 開發環境:VS code * 版控:Git、Git Flow (有多人協作開發經驗、PR、rebase、fix conflict)、Bitbucket * ESlint:airbnb * 專案管理:Scrum、Jira、clickup ## Vue3 作品 1. やまだ日本料理 - (連結:[前台](https://peterchen-jianrong.github.io/vue_japaneseFood/#/)、[後台(需要登入)](https://peterchen-jianrong.github.io/vue_japaneseFood/#/login)、[Repo](https://github.com/PeterCHEN-JIANRONG/vue_japaneseFood)) >主要技術:Vue3、Bootstrap5、RWD、RESTful API >Vue相關:Vue Component、Vue Router、Vue Cli、SPA、SFC、vue-axios、關注點分離(資料、畫面分開)、ES module、Options API、元件、props、emits、[mitt](https://github.com/developit/mitt)、[Vee-Validate](https://vee-validate.logaretm.com/v4/) >輔助:ESlint(程式碼品質檢視:airbnb) >![](https://i.imgur.com/QLqtSmr.jpg) 2. SNS 動態社群 - (連結:[前台](https://peterchen-jianrong.github.io/vue3-NFT-Social/#/signin)、[Repo](https://github.com/PeterCHEN-JIANRONG/vue3-NFT-Social)、[後端Repo](https://github.com/PeterCHEN-JIANRONG/node-SNS)、[Heroku](https://warm-falls-13177.herokuapp.com/posts)) >主要技術:Vue3 (Composition API)、Bootstrap5、RWD、RESTful API >Vue相關:Vue Component、Vue Router、Vue Cli、SPA、SFC、vue-axios、關注點分離(資料、畫面分開)、ES module、元件、props、emits、[Vee-Validate](https://vee-validate.logaretm.com/v4/) >輔助:ESlint(程式碼品質檢視:airbnb) >![](https://i.imgur.com/ZQFbreM.jpg) 3. CAMPING露營電商 - (連結:[前台](https://vue-camping.peter1024.work/dist/#/)、[後台(需要登入)](https://vue-camping.peter1024.work/dist/#/admin/products)、[Repo](https://github.com/PeterCHEN-JIANRONG/vue-camping)) >主要技術:Vue3、Bootstrap5、RWD、RESTful API >Vue相關:Vue Component、Vue Router、Vue Cli、SPA、SFC、vue-axios、關注點分離(資料、畫面分開)、ES module、Options API、元件、props、emits、[mitt](https://github.com/developit/mitt)、[Vee-Validate](https://vee-validate.logaretm.com/v4/) >輔助:ESlint(程式碼品質檢視:airbnb) >![](https://i.imgur.com/vJRhcVz.jpg) ## 切版作品 1. NFT藝術家交易平台 - (連結:[首頁](https://peterchen-jianrong.github.io/tailwind3-NFT-trade/#/)、[藝術家頁](https://peterchen-jianrong.github.io/tailwind3-NFT-trade/artist.html)、[探索頁](https://peterchen-jianrong.github.io/tailwind3-NFT-trade/explore.html)、[Repo](https://github.com/PeterCHEN-JIANRONG/tailwind3-NFT-trade)) >使用技術:Tailwindcss、Gulp、EJS、SCSS、RWD、[swiperjs](https://swiperjs.com/demos)、[Masonry](https://masonry.desandro.com/) >![](https://i.imgur.com/u0WYGEY.png) 1. Coding Home 程式家教 - (連結:[首頁](https://peterchen-jianrong.github.io/tailwind3-CodingHome/#/)、[所有課程頁](https://peterchen-jianrong.github.io/tailwind3-CodingHome/course.html)、[Repo](https://github.com/PeterCHEN-JIANRONG/tailwind3-CodingHome)) >使用技術:Tailwindcss、Gulp、EJS、SCSS、RWD、[swiperjs](https://swiperjs.com/demos) >![](https://i.imgur.com/hYu486j.png) 1. 藝術展覽購票網站 - (連結:[Page](https://gulp-art-exhibition.peter1024.work/)、[Repo](https://github.com/PeterCHEN-JIANRONG/gulp-art-exhibition)) >使用技術:Gulp、EJS、SCSS、Bootstrap5、RWD、[swiperjs](https://swiperjs.com/demos)、[AOS](https://michalsnik.github.io/aos/) >![](https://i.imgur.com/ZLD2WZw.jpg) 2. 瑜珈品牌網站 - (連結:[Page](https://gulp-doyoga-service.peter1024.work/index.html)、[Repo](https://github.com/PeterCHEN-JIANRONG/gulp-doyoga-service)) >使用技術:Gulp、EJS、SCSS、Bootstrap5、RWD、[swiperjs](https://swiperjs.com/demos) >![](https://i.imgur.com/z2y60ax.jpg) 3. 眼鏡形象網站 - (連結:[Page](https://gulp-glasses-rwd.peter1024.work/)、[Repo](https://github.com/PeterCHEN-JIANRONG/gulp-glasses-rwd-1)) >使用技術:Gulp、EJS、SCSS、RWD、Javascript >![](https://i.imgur.com/vSFNEUt.jpg) ## Node.js(express) 作品 1. SNS 動態社群 - (連結:[前台](https://peterchen-jianrong.github.io/vue3-NFT-Social/#/signin)、[Repo](https://github.com/PeterCHEN-JIANRONG/vue-camping)、[後端Repo](https://github.com/PeterCHEN-JIANRONG/node-SNS)、[Heroku](https://warm-falls-13177.herokuapp.com/posts)) >主要技術:express、router、controller、mongoDB、關聯式資料表、middleware、JWT、Restful API、Heroku、第三方API串接、CSR >套件:mongoose、imgur、bcryptjs、dotenv、jsonwebtoken、multer >資料庫:mongoDB >Cloud:Heroku >![](https://i.imgur.com/ZQFbreM.jpg) ## React 作品 1. Todolist 待辦事項 - (連結:[Page(需註冊)](https://peterchen-jianrong.github.io/react-todolist-api/#/login)、[Repo](https://github.com/PeterCHEN-JIANRONG/react-todolist-api)) >使用技術:react、create-react-app、router、AuthContext ## Javascript 作品 1. WOWO家具電商 - (連結:[前台](https://peterchen-jianrong.github.io/js-woworoom2/)、[後台(免登入)](https://peterchen-jianrong.github.io/js-woworoom2/admin.html)、[Repo](https://github.com/PeterCHEN-JIANRONG/js-woworoom2)) >使用技術:Javascript、axios、RESTful API、DOM、[validate.js(表單驗證)](https://validatejs.org/)、[C3.js(圖表)](https://c3js.org/examples.html) ## 切版 - 小作品 1. 教育網站後台 - (連結:[Page](https://gulp-glasses-backend.peter1024.work/assignment.html)、[Repo](https://github.com/PeterCHEN-JIANRONG/gulp-glasses-backend)) >使用技術:Gulp、EJS、SCSS、Bootstrap5、Javascript 2. 個人履歷 - (連結:[codepen](https://codepen.io/JIAN-RONG/pen/MWmKYpx)) >使用技術:純HTML、SCSS 3. 個人形象網站 - (連結:[codepen](https://codepen.io/JIAN-RONG/pen/YzVGVwW)) >使用技術:純HTML、SCSS ## 相關證書、證照 1. 六角學院 - JS 工程師養成直播班 - 2022秋季班 [完課證書](https://drive.google.com/file/d/1KsjQyjRMaZ84w-FvCtO7LXq8OunhkzAP/view?usp=share_link) 1. 六角學院 - 網頁切版直播班_獎狀 2022夏季班 [完課證書](https://drive.google.com/file/d/1NnZL_XQV7hxyM39ar4BR-ruX2BzfjKTh/view?usp=sharing) 1. 六角學院 - React 新手讀書會(React & API)_獎狀 2022夏季 [完課證書](https://drive.google.com/file/d/1q1PbqXjRlS1LiK8gBdB2QI0v5zoU6htN/view?usp=sharing) 1. 六角學院 - Node.js 直播班 2022春季 [完課證書](https://drive.google.com/file/d/1e8d0N4ELJZIkFauOT6nk5DXB5pujne-O/view?usp=sharing) 1. 六角學院 - Vue 作品實戰班 2022春季班 [完課證書](https://drive.google.com/file/d/11Kc17jH_-GQbEEkrI-TxHx7sHL8uxCjr/view?usp=sharing) 2. 六角學院 - Vue 作品實戰班 2021夏季班 [完課證書](https://drive.google.com/file/d/1ITi-9N0f8O_mvqarUWrTjrqnNpK_3F04/view?usp=sharing) 3. 六角學院 - 切版直播班 2021秋季班 [完課證書](https://drive.google.com/file/d/1RzRz5BmZavMVPxqBjvc9dN_wGc3-dPPF/view?usp=sharing) 4. 六角學院 - js 直播班 2021夏季班 [完課證書](https://drive.google.com/file/d/1LpEM8cRlEN80y7CWifVxcG-dnLtVU1w7/view?usp=sharing)