# Front-end、Back-end 作品集

## 自我介紹
[自我介紹](/6vJ0IjdkS32q1r2v5ATUiA)

## Github
[我的Github](https://github.com/PeterCHEN-JIANRONG)

## 我的技能 Skills
### 前端 Front-end
* Front-end framework：Vue.js、Nuxt.js、React.js、Next.js
* CSS framework：ElementPlus、Vuetify、TailwainCSS、Bootstrap5
* Front-end Skill: Typescript、Javascript、i18n、Form validation、RESTful API、RWD、SEO、SCSS、格線系統([Grid system](https://bootstrap5.hexschool.com/docs/5.1/layout/grid/))、Webpack、Gulp、pug、ejs、jQuery、HTML5
* Vue Skill：VueSFC、components、vue-router、vuex、pinia
* 套件 package：i18n、lodash.js、swiper.js、AOS、Sweetalert2、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設計基本知識

### 後端 Back-end
* Back-end framework：Express.js
* 技能 Skill：node.js、router、controller、關聯式資料表設計、middleware、JWT、RESTful API、第三方API串接、swagger
* 套件 package：mongoose、imgur、bcryptjs、dotenv、JWT、jsonwebtoken、multer
* 資料庫 Database：postgreSQL、mongoDB、MySQL
* Cloud：Heroku、AWS基礎(EC2、S3、autoScaling、Load Balancing)

### Javascript
- CORS 跨域請求
- 非同步、await & async、promise
- 箭頭函式、this 指向
- array method、closure、hoisting
- ES Module、ESM、Commonjs

### 共通 Common
* 開發環境 IDE：VS code
* 版控：Git、Git Flow、Bitbucket
* ESlint：airbnb
* 專案管理：Scrum、Jira、clickup、trello

## 作品集 Portfolio
### 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://peterchen-jianrong.github.io/gulp-art-exhibition/)、[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://peterchen-jianrong.github.io/gulp-doyoga-service/)、[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、

>

### Node(express.js) 作品
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

## 相關證書、證照 Certificate
1. 六角學院(hexschool) - 2024冬 - 後端工程師-資料庫體驗營 [證書](https://drive.google.com/file/d/122EP9t1ZT8JwGwPAoU6SP8gcxBeCI9F-/view?usp=drive_link)
1. 六角學院(hexschool) - 2024春 - Typescript 培訓營 [證書](https://drive.google.com/file/d/1lmBC8unUl7XVhpu3t5rRss-N0DdpaJzv/view?usp=drive_link)
1. 六角學院(hexschool) - 2023秋 - React 入門攻略工作坊 [證書](https://drive.google.com/file/d/1DAyo0Xf7O6yTNNlyV2gflqbt0rxlxXFK/view?usp=drive_link)
1. 六角學院(hexschool) - 2022秋 - JS 工程師養成直播班 [證書](https://drive.google.com/file/d/1KsjQyjRMaZ84w-FvCtO7LXq8OunhkzAP/view?usp=share_link)
1. 六角學院(hexschool) - 2022夏 - 網頁切版直播班 [證書](https://drive.google.com/file/d/1NnZL_XQV7hxyM39ar4BR-ruX2BzfjKTh/view?usp=sharing)
1. 六角學院(hexschool) - 2022夏 - React 新手讀書會 [證書](https://drive.google.com/file/d/1q1PbqXjRlS1LiK8gBdB2QI0v5zoU6htN/view?usp=sharing)
1. 六角學院(hexschool) - 2022春 - Node.js 直播班 [證書](https://drive.google.com/file/d/1e8d0N4ELJZIkFauOT6nk5DXB5pujne-O/view?usp=sharing)
1. 六角學院(hexschool) - 2022春 - Vue 作品實戰班 [證書](https://drive.google.com/file/d/11Kc17jH_-GQbEEkrI-TxHx7sHL8uxCjr/view?usp=sharing)
1. 六角學院(hexschool) - 2021秋 - 網頁切版直播班 [證書](https://drive.google.com/file/d/1RzRz5BmZavMVPxqBjvc9dN_wGc3-dPPF/view?usp=sharing)
1. 六角學院(hexschool) - 2021夏 - Vue 作品實戰班 [證書](https://drive.google.com/file/d/1ITi-9N0f8O_mvqarUWrTjrqnNpK_3F04/view?usp=sharing)
1. 六角學院(hexschool) - 2021夏 - JS 直播班 [證書](https://drive.google.com/file/d/1LpEM8cRlEN80y7CWifVxcG-dnLtVU1w7/view?usp=sharing)