--- 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://i.imgur.com/NwWK81Y.png) 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://i.imgur.com/9sJgOrv.png) > [通關成功證書](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: `特殊`