---
title: '作品集'
---

<style>
img {
width: 300px;
margin-bottom: 8px;
margin-right: 8px;
border: 1px solid #DEDEDE;
}
</style>

# 口罩地圖 - 前端 & UI 修練精神時光屋 第十關

<img src="https://i.imgur.com/dTy0ahP.png" />

<img src="https://i.imgur.com/0fqJpi8.png" />

Leaflet + OSM + TypeScript + Vue + BootstrapVue

> [github repository](https://github.com/littlehorseboy/maskMap)
> [github pages](https://littlehorseboy.github.io/maskMap/dist/)

# 完賽 第11屆 iT邦幫忙鐵人賽


https://ithelp.ithome.com.tw/users/20105162/ironman/2776

---

# 前端技術心得分享 簡報

https://hackmd.io/aQlGCHTOREynQq9sEul0Yw

https://hackmd.io/@VG05q7U5Rl6Xkj4FeqBHrA/Bk0nK7T34

---

# 完賽 The F2E - 第二屆 前端 & UI 修練精神時光屋

<img src="https://i.imgur.com/tnjiad5.png" />

<img src="https://i.imgur.com/TUjBZ5u.png" />

https://challenge.thef2e.com/user/263

---

# 作品集

---

## 故事書

期望製作出類似 gitbook 的功能
申請帳號並登入後即可管理故事 (管理故事功能尚未完成)

<img src="https://i.imgur.com/OlESL5v.png" />

<img src="https://i.imgur.com/F4jVThH.png" />

React + Material-UI + redux-observable + Quill

> [github repository](https://github.com/littlehorseboy/react-scrivener)
> [github pages](https://littlehorseboy.github.io/react-scrivener/dist/)

---

## 故事書 API

express + heroku + mLab

> [github repository](https://github.com/littlehorseboy/express-practice)

---

## 英文單字收藏冊

將單字及其它描述輸入到網站上，建立出自己的字庫

<img src="https://i.imgur.com/6Z7ZGiL.png" />

<img src="https://i.imgur.com/9G06XZq.png" />

<img src="https://i.imgur.com/8ICLvHq.png" />

<img src="https://i.imgur.com/TQy6Rvi.png" />

Vue-CLI + Vue-Router + Vuex + Bootstrap

> [github repository](https://github.com/littlehorseboy/vue-english-dictionary)
> [github pages](https://littlehorseboy.github.io/vue-english-dictionary/dist/#/englishdictionary/selectEnglish)

---

## 英文單字收藏冊 API

express + GCP + MySQL

> [github repository](https://github.com/littlehorseboy/vue-english-dictionary-API)

---

## 好書客

一個分享讀書心得的平台

<img src="https://i.imgur.com/yQLozfq.png" />

<img src="https://i.imgur.com/IfGC7rO.png" />

<img src="https://i.imgur.com/DQ21r8f.png" />

<img src="https://i.imgur.com/S6dq0DS.png" />

Vue-CLI + Vue-Router + Vuex + material-components-web

> [github repository](https://github.com/littlehorseboy/how-this-book)
> [github pages](https://littlehorseboy.github.io/how-this-book/dist/)

---

## 甜點電商

<img src="https://i.imgur.com/drnaA45.png" />

<img src="https://i.imgur.com/stFxxNp.png" />

<img src="https://i.imgur.com/HFWiyql.png" />

<img src="https://i.imgur.com/CvvVCx3.png" />

material + scss + ES6 + webpack

> [github repository](https://github.com/littlehorseboy/dessert)
> [github pages](https://littlehorseboy.github.io/dessert/dist/)

---

# The F2E - 前端修練精神時光屋 | 六角學院


> [通關成功證書](https://www.thef2e.com/Certificate/-LDy0zB8wMYxQuygX8Ct)

---

## todolist

<img src="https://i.imgur.com/OT3EaaD.png" />

<img src="https://i.imgur.com/hMDSTyI.png" />

Vue (cdn) + Semantic UI + Flatpickr + Babel (cdn)

> [github repository](https://github.com/littlehorseboy/THE-F2E-Week-1)
> [github pages](https://littlehorseboy.github.io/THE-F2E-Week-1/)

---

## 高雄市旅遊景點介紹

<img src="https://i.imgur.com/1l94nyj.png" />

<img src="https://i.imgur.com/QYG6Lau.png" />

Vue (cdn) + Bootstrap

> [github repository](https://github.com/littlehorseboy/THE-F2E-Week-2)
> [github pages](https://littlehorseboy.github.io/THE-F2E-Week-2/)

---

## 簡易後台管理系統

<img src="https://i.imgur.com/RvMYVWe.png" />

<img src="https://i.imgur.com/qYoW6f4.png" />

Vue (cdn) + Vue-Router + Vuex + Chart.js

> [github repository](https://github.com/littlehorseboy/THE-F2E-Week-3)
> [github pages](https://littlehorseboy.github.io/THE-F2E-Week-3/)

---

## 服飾形象網頁

<img src="https://i.imgur.com/g1OjruJ.png" />

<img src="https://i.imgur.com/wnZ0Gk7.png" />

Vue (cdn) + Vue-Router + Vuex + ScrollReveal + CSS Grid

> [github repository](https://github.com/littlehorseboy/THE-F2E-Week-4)
> [github pages](https://littlehorseboy.github.io/THE-F2E-Week-4/)

---

## 漫畫閱讀器

<img src="https://i.imgur.com/1ZLsJmE.png" />

<img src="https://i.imgur.com/Y8hMCuf.png" />

<img src="https://i.imgur.com/5DBHHV5.png" />

<img src="https://i.imgur.com/4nb5rfG.png" />

Vue (cdn) + Vue-Router + Vuex

> [github repository](https://github.com/littlehorseboy/THE-F2E-Week-5)
> [github pages](https://littlehorseboy.github.io/THE-F2E-Week-5/)

---

## 表單 flow

<img src="https://i.imgur.com/CT674Pq.png" />

<img src="https://i.imgur.com/pVIScae.png" />

Vue-CLI + Vue-Router + Vuex + vee-validate

> [github repository](https://github.com/littlehorseboy/THE-F2E-Week-6)
> [github pages](https://littlehorseboy.github.io/THE-F2E-Week-6/dist/)

---

## 射擊遊戲

僅達到射擊出子彈，無實作敵人自動進入擊殺並計分 (半成品)

<img src="https://i.imgur.com/jGajdrQ.png" />

<img src="https://i.imgur.com/vWKxJFx.png" />

Canvas + ES6 Classes

> [github repository](https://github.com/littlehorseboy/THE-F2E-Week-7)
> [github pages](https://littlehorseboy.github.io/THE-F2E-Week-7/)

---

## 形狀心理測驗

<img src="https://i.imgur.com/pCVmO7F.png" />

<img src="https://i.imgur.com/x85Bvwj.png" />

<img src="https://i.imgur.com/5SJnPBX.png" />

<img src="https://i.imgur.com/2UpAZox.png" />

Sass + TweenLite + ScrollMagic

> [github repository](https://github.com/littlehorseboy/THE-F2E-Week-8)
> [github pages](https://littlehorseboy.github.io/THE-F2E-Week-8/)

---

## FRONT-END SKILL TREE

<img src="https://i.imgur.com/oS8TBGt.png" />

Sass

> [github repository](https://github.com/littlehorseboy/THE-F2E-Week-9)
> [github pages](https://littlehorseboy.github.io/THE-F2E-Week-9/)

---

## 聖誕節卡片

因應聖誕節想說做個卡片給朋友發，最後是沒有拿去發 = =

<img src="https://i.imgur.com/ltOTq3H.jpg" />

<img src="https://i.imgur.com/x2e8GhO.jpg" />

animejs + particles.js

> [github repository](https://github.com/littlehorseboy/christmas-card)
> [github pages](https://littlehorseboy.github.io/christmas-card/dist/)

---

## Express RESTful API 初學架構

這是我做過最完整的 RESTful 練習，是參考一位大大的鐵人賽文章來著

進到 repository 看 `README.md` 有更詳細的使用到的技術

RESTful + JWT Bearer Token + GCP

> [github repository](https://github.com/littlehorseboy/node-community)

---

## Vue CLI SPA 初學架構

參考鐵人賽文章學習 Vue-cli 的學習成果

> [github repository](https://github.com/littlehorseboy/vue-cli-practice)

---

###### tags: `特殊`