# 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)
>

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)
>

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)
>

## 切版作品

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/)
>

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)
>

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/)
>

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)
>

3. 眼鏡形象網站 - (連結：[Page](https://gulp-glasses-rwd.peter1024.work/)、[Repo](https://github.com/PeterCHEN-JIANRONG/gulp-glasses-rwd-1))
>使用技術：Gulp、EJS、SCSS、RWD、Javascript
>

## 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
>

## 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)