關於 Johnny

簡介

嗨～歡迎您，我是Johnny，這是我的個人介紹兼紀錄學習點滴的筆記書，內容主要為個人作品展示與學習心得文章。

俗話說取之於人，需懂得報恩，從最初開始學習程式設計以來，一直都是靠著網路上的無私分享內容自學，也希望自己能把自己的所學所好分享出去給所有需要的人。

目前在 LINE Taiwan 擔任軟體工程師，主要負責前端開發，偶爾會不小心越線碰到些後端，過去特別愛 Vuejs，但小朋友才做選擇，現在我 Vuejs, Reactjs 都愛！平日興趣是窩在家做些酷酷的小專案，透過實作學習讓我獲得很多成就感 =V=，夢想是希望有一天能進步到 Vuejs 作者尤大大 1/10 強。

Be Good, be strong, be yourself, never give up.

歡迎光臨～

Main Work Project

另有 25 個以上 SPA 轉蛋動畫活動網頁在此省略

LINE 發票管家 - Line Invoice

• Link
• secret...
• onlined at: 2022-10
• still maintaining

MBM Preregist Website

• Link
• Nuxtjs, SSR
• created at: 2021-05

FairyTail Website(Offline)

• Link
• Nuxtjs, SSR
• created at: 2020-10

Toplink Website

• Link
• Vue-Cli
• created at: 2018-12

Private Project

詳細專案圖文介紹請前往這邊瀏覽

Maju GPT UI

• Link
• Nextjs, Typescript, OpenAI api
• created at: 2024-01

Vue3 Matter Mario Bro

• Link
• Source Code
• Vue3.x, Matterjs
• created at: 2022-01

React Eat Snake Game - 復古小遊戲 貪吃蛇

• Link
• Reactjs, Typescript, Canvas
• created at: 2023-09
• For safety reason, only registered user can create online note

MajuChatGame - Real-Time 2D ChatGame

• Link
• Reactjs, Typescript, Socket.io
• created at: 2023-05
• For safety reason, only registered user can create online note

React WebRTC Realtime Chatroom

• Link
• React18, Typescript, Socket.io, Peer.js
• created at: 2022-06

MajuMD - Real-Time Markdown Editor

• Link
• Reactjs, Typescript, Prisma, Koa.js, Socket.io
• created at: 2023-04
• For safety reason, only registered user can create online note

MajuPen - Plus

• Vue Link
• React Link
• Nextjs, Typescript, TailwindCSS, Script Custom Module
• created at: 2022-10

MajuPen

• Link
• Reactjs, StyledComponent, @reduxjs/toolkit
• created at: 2021-8

Single Page Chatroom

• Link
• Nodejs, ExpressJs, Socket.io, Bootstrap4
• created at: 2019-01
• Public account:
  • account: public
  • password: 0000
  • fastcode: 0000

Open Source

jspdf-html2canvas

• Link
• jspdf, html2canvas
• created at: 2019-11

maju-gpt-ui

• Link
• free ChatGPT UI
• created at: 2019-11

script-custom-module

• Link
• esmodule for using React, Vue, Typescript compiled in browser
• created at: 2023-04-01

vuepress-plugin-react

• Link
• A Vuepress Plugin for rendering React component in Vuepress markdown on top of Vite Bundler, typed with JsDoc.
• created at: 2023-11-08

mockserver-browser-admin

• Link
• A SPA UI tool for controlling mockserver expectations with React, TS, TailwindCSS, CodeMirror
• created at: 2023-09-23

maju-ui

• Link
• responsive UI class
• created at: 2022-06

remockjs

• Link
• ajax mock, mock data generator
• created at: 2021-03

TailwindCSS EDM Generator

• Link
• Gulp, Pug, SCSS, TailwindCSS, Juice
• created at: 2023-01

maju-decorators

• Link
• js decorators utils
• created at: 2022-05-11

node-ftp-cli

• Link
• nodejs, ftp
• created at: 2021-10

Side Project

Web Scan Translator

• Link
• Tesseract.js, web stream, React.js
• created at: 2023-10

Browser Image Compressor

• Link
• heic2any, browser-image-compression, jszip, FileSaver, Vue.js
• created at: 2023-02

React Matter Clock

• Link
• React18, Typescript, Matter-js
• created at: 2022-07

React Sudoku Game

• Link
• React18, Typescript
• created at: 2022-07

React Web3 Storage

• Link
• Source Code
• React18, Javascript, Web3 Storage Client API
• created at: 2022-06

Fabric Image Composer

• Link
• Source Code
• Vue3.x, Javascript, Fabric.js
• created at: 2022-04

Vue3 Pokemon Game

• Link
• Source Code
• Vue3.x, Javascript, Tiled Map Editor
• created at: 2022-03

Vue3 Angry Bird

• Link
• Source Code
• Vue3.x, Matterjs
• created at: 2021-11

Vue3 Game - 2048

• Link
• Source Code
• Vue3.x, scss
• created at: 2021-09

Bounce Ball

• Link
• Source Code
• Vue3.x, P5js, Canvas
• created at: 2021-03

Shooting Virus

• Link
• Source Code
• Vue3.x, P5js, Canvas
• created at: 2021-03

Painting Board

• Link
• Source Code
• Vue3.x, Canvas
• created at: 2020-10

Crush Puzzle

• Link
• Source Code
• Vue2.x
• created at: 2020-08

Slide Puzzle

• Link
• Source Code
• Vue2.x
• created at: 2020-08

Taiwan Stock Tool

• Link
• Vue2.x, Nodejs, ExpressJs, Bootstrap4
• created at: 2019-01

Taiwan Rate 匯率

• Link
• Vue2.x, Nodejs, ExpressJs, Bootstrap4
• created at: 2019-01

QRCode Reader

• Link
• Vue2.x, Instascan
• created at: 2018-12

TRUTH