//assets.cake.me/assets/contentarea/contentarea-2d64eca8dae2a1ffb31e0fb1df887bbad072c7c19734d7d30fa14884bbcc299a.css

這是一個 Vue3 電商網站 demo.
有大量的 Figma 設計稿切版。
做出 desktop 跟 mobile 的響應式設計網站(RWD)。
用了可重複運用的元件 components 來顯示不同的商品。
並使用 Vue-Router, Pinia 技術。
demo: https://pf-audiophile.vercel.app/

[updated 0108] 我幫專案加上了一個 Node.js backend 來串接 API, 包括 Register, Login, getCart, wirteCart 等等： https://github.com/sunpochin/audiophile-backend, 所以現在可以在這網站註冊、登入帳號，並且每個帳號分別擁有不同的購物車內容了。他是一個簡單的 Full-stack App. 了。

Vue3 電商網站 demo.

Software developer

Patrick Sun (孫柏青)

跟六角學院的分組同學合作的寵物資訊課程平台，前端使用 vue3, 後端使用 node.js .

我們正在改寫成 Nuxt.js 版本。



demo.

https://petknow.netlify.app/

github:

https://github.com/sunpochin/petKnow-fe

petKnow 寵知

Vuetify Vue3 列出世界上所有國家詳細資料

<html><head></head><body><div class="row general general-profile-4"><div class="col-sm-2"><p class="avatar-wrapper"><img class="avatar fr-rounded" src="https://media.cakeresume.com/image/upload/s--1BAjXJ_M--/c_fill,g_face,h_120,w_120/v1663581922/lmfrr4fb97zulxn7vwq4.jpg" loading="" style="aspect-ratio: 120 / 120;"></p></div><div class="col-sm-10"><h1>Patrick Sun (孫柏青)</h1><p>Email: <a target="_blank" href="mailto:sunpochin@gmail.com" rel="nofollow noopener">sunpochin@gmail.com</a><br>Line ID: sunpochin<br><br>我從小就知道會跟電腦玩一輩子。<br><br>9 歲就用卡帶加播音機玩電腦遊戲，<br>11 歲就在數理實驗班學了 BASIC 語言<br><br>第一份工作是寫 J2ME 手機遊戲，在一家叫做 Skysoft 的創業公司。<br><br>後來我們一起做了台灣最大的數位音樂服務 KKBOX.</p><p><span class="fr-myicon fr-deletable black fr-myicon-img icon" style="background: url(https://spa-assets.cake.me/assets/editor/icons/black/popular/marker.svg);"><span class="fr-icon-space-wrapper">&nbsp;</span></span>&nbsp;Taipei, Taiwan&nbsp;&nbsp;<a target="_blank" href="https://www.linkedin.com/in/sunpochin/" rel="nofollow noopener"><span class="fr-myicon fr-deletable black fr-myicon-img" style="background: url(https://spa-assets.cake.me/assets/editor/icons//black/social_media/linkedin.svg);"><span class="fr-icon-space-wrapper">&nbsp;</span></span></a>&nbsp;&nbsp;<a target="_blank" href="https://github.com/sunpochin" rel="nofollow noopener"><span class="fr-myicon fr-deletable black fr-myicon-img" style="background: url(https://spa-assets.cake.me/assets/editor/icons//black/social_media/github.svg);"><span class="fr-icon-space-wrapper">&nbsp;</span></span></a>&nbsp;&nbsp;<a target="_blank" href="https://stackoverflow.com/users/720276/sunpochin" rel="nofollow noopener"><span class="fr-myicon fr-deletable black fr-myicon-img" style="background: url(https://spa-assets.cake.me/assets/editor/icons//black/social_media/stack_overflow.svg);"><span class="fr-icon-space-wrapper">&nbsp;</span></span></a></p></div></div><div class="row heading heading-work-experience-5"><div class="col-sm-12"><h2>工作經歷</h2></div></div><div class="row repeater repeater-work-experience-5"><div class="col-sm-1"><img class="logo fr-rounded" src="https://media.cakeresume.com/image/upload/s--p14d_fAE--/c_pad,fl_png8,h_200,w_200/r3inknmrjgdkjn6kbsvj.png" loading="lazy" style="aspect-ratio: 200 / 200;"></div><div class="col-sm-11"><h3>軟體工程師<span style="font-size: 18.37px" class="theme-main-color">&nbsp;&nbsp;•&nbsp;&nbsp;傲嬌文創/傲嬌軟體有限公司</span></h3><p><span style="color: #888;">四月 2024 - Present</span></p><p>• 我在傲嬌軟體這家接案公司，擔任網頁前端工程師，負責公司最長期，最重要客戶「品學堂」。使用 Nuxt2 框架開發 RWD 網頁。
<br>
<br>• 目前前端是我一人開發，由另一位資深工程師跟技術長審核程式碼。 這幾輪 Sprints 我總共完成了 9 份規格書的新功能或調整。
<br>
<br>• 對於 Clean Code 有執著，會將超過兩個頁面共用的功能，提取到一個檔案。也會將重複使用的 CSS color code 寫成變數。
<br>
<br>• 我藉著優化 nuxt.config.js 檔案參數，讓 development mode 的第一次網頁讀取時間，從約 12 秒降低為 4 秒，效率提高為 300% .
<br>
<br>• 把編譯時間增快為 200% . 經過實驗找出瓶頸，讓 production build, 時間由 12 分鐘增快為 6 分鐘。</p></div></div><div class="row repeater repeater-work-experience-5"><div class="col-sm-1"><img class="logo fr-rounded" src="https://media.cakeresume.com/image/upload/s--e-qgVwq---/c_pad,fl_png8,h_200,w_200/xnhh9wty9rv4wofl6ovb.png" loading="lazy" style="aspect-ratio: 200 / 200;"></div><div class="col-sm-11"><h3>資深工程師<span style="font-size: 18.37px" class="theme-main-color">&nbsp;&nbsp;•&nbsp;&nbsp;FARobot / 法博智能移動股份有限公司</span></h3><p><span style="color: #888;">四月 2022 - 六月 2022</span></p><p>• 建立並且維護 Bitbucket CI/CD pipeline.
<br>• 維護機器人設定前端 Javascript  網頁。</p></div></div><div class="row repeater repeater-work-experience-5"><div class="col-sm-1"><img class="logo fr-rounded" src="https://media.cakeresume.com/image/upload/s--1PCGtQnH--/c_pad,fl_png8,h_200,w_200/v1645076543/soqrfaru0kcdn7dhsuml.png" loading="lazy" style="aspect-ratio: 200 / 200;"></div><div class="col-sm-11"><h3>Robotics Engineer<span style="font-size: 18.37px" class="theme-main-color">&nbsp;&nbsp;•&nbsp;&nbsp;英屬開曼群島商麥迪創科技股份有限公司台灣分公司</span></h3><p><span style="color: #888;">六月 2018 - 七月 2019</span></p><p>•使用 ROS, gazebo simulator, CARLA simulator 來實做主管讀論文找到的演算法。
<br>•在技術總監指導下共同開發 NOAH, 一個偵測駕駛者倦意的系統，在 CES 得到新創產品獎。</p></div></div><div class="row repeater repeater-work-experience-5"><div class="col-sm-1"><img class="logo fr-rounded" src="https://media.cakeresume.com/image/upload/s--RZez6Nb7--/c_pad,fl_png8,h_200,w_200/v1640373367/oqtx9nayitb4ttt4iihz.png" loading="lazy" style="aspect-ratio: 200 / 200;"></div><div class="col-sm-11"><h3>Senior Software Developer<span style="font-size: 18.37px" class="theme-main-color">&nbsp;&nbsp;•&nbsp;&nbsp;願境網訊股份有限公司_KKBOX</span></h3><p><span style="color: #888;">八月 2007 - 七月 2016</span></p><p>• 開發、維護 KKBOX Windows Client 功能。
<br>• 開發 KKBOX 行動版 Nokia Symbian 手機，Microsoft Windows Mobile.
<br>• 建立了公司第一套 CI/CD pipeline, 使用 Hudson / Jenkins, 來維護 KKBOX Windows Client 的品質。
<br>• 編寫 Unit Tests 自動測試。</p></div></div><div class="row repeater repeater-work-experience-5 repeater-end"><div class="col-sm-1"><img class="logo fr-rounded" src="https://media.cakeresume.com/image/upload/s--RZez6Nb7--/c_pad,fl_png8,h_200,w_200/v1640373367/oqtx9nayitb4ttt4iihz.png" loading="lazy" style="aspect-ratio: 200 / 200;"></div><div class="col-sm-11"><h3>Software Developer<span style="font-size: 18.37px" class="theme-main-color">&nbsp;&nbsp;•&nbsp;&nbsp;願境網訊股份有限公司_KKBOX</span></h3><p><span style="color: #888;">七月 2003 - 一月 2007</span></p><p>• 開發當時公司經營的 J2ME 手機遊戲。
<br>• 跟團隊一起開發了 KKBOX 的第一個前端 APP: KKBOX Windows Client.</p></div></div><div class="row heading heading-education-4"><div class="col-sm-12"><h2>學歷</h2></div></div><div class="row repeater repeater-education-4 repeater-end"><div class="col-sm-1"><img class="logo fr-rounded" src="https://media.cakeresume.com/image/upload/v1645786787/lxmm6t50uvgojoc9thmm.png" loading="lazy" style="aspect-ratio: 150 / 150;"></div><div class="col-sm-5"><p><span style="color: #888;">2001 - 2003</span></p><h3>國立中山大學 National Sun Yat-Sen University</h3><h4>Master of Computer Science</h4></div><div class="col-sm-1"><img class="logo fr-rounded" src="https://media.cakeresume.com/image/upload/v1559929669/eh8xca9dmqd4dowt3qwx.png" loading="lazy" style="aspect-ratio: 150 / 150;"></div><div class="col-sm-5"><p><span style="color: #888;">1994 - 1998</span></p><h3>國立交通大學 National Chiao Tung University</h3><h4>Bachelor of Transportation Management</h4></div></div><div class="row general with-background general-skills-6 with-background-skills-6"><div class="col-sm-6"><h2>技能</h2><hr><ul><li>Nuxt2</li><li>HTML/CSS</li><li>JavaScript</li><li>AJAX / API串接</li><li>RWD</li><li>Figma</li></ul></div><div class="col-sm-6"><h2>語言</h2><hr><ul><li>English — 中階</li><li>Chinese — 母語或雙語</li></ul></div></div></body></html>

Patrick Sun (孫柏青) Email: sunpochin@gmail.com Line ID: sunpochin 我從小就知道會跟電腦玩一輩子。 9 歲就用卡帶加播音機玩電腦遊戲， 11 歲就在數理實驗班學了 BASIC 語言 第一份工作是寫 J2ME 手機遊戲，在一家叫做 Sk...

My Cake Resume

Email: sunpochin@gmail.com
Line ID: sunpochin

我從小就知道會跟電腦玩一輩子。

9 歲就用卡帶加播音機玩電腦遊戲，
11 歲就在數理實驗班學了 BASIC 語言

第一份工作是寫 J2ME 手機遊戲，在一家叫做 Skysoft 的創業公司。

後來我們一起做了台灣最大的數位音樂服務 KKBOX.

國立中山大學 National Sun Yat-Sen University

傲嬌文創/傲嬌軟體有限公司

軟體工程師

我來找工作。也願意跟大家分享我的工作經驗，身為軟體工程師應該要知道基本素養，軟體業的本質，有趣小故事等等。

<h1>Patrick Sun (孫柏青)</h1><p>Email: <a target="_blank" href="mailto:sunpochin@gmail.com">sunpochin@gmail.com</a>
Line ID: sunpochin

我從小就知道會跟電腦玩一輩子。

9 歲就用卡帶加播音機玩電腦遊戲，
11 歲就在數理實驗班學了 BASIC 語言

第一份工作是寫 J2ME 手機遊戲，在一家叫做 Skysoft 的創業公司。

後來我們一起做了台灣最大的數位音樂服務 KKBOX.</p><p><span class="fr-myicon fr-deletable black fr-myicon-img icon" style="background: url(https://spa-assets.cake.me/assets/editor/icons/black/popular/marker.svg);"><span class="fr-icon-space-wrapper">&nbsp;</span></span>&nbsp;Taipei, Taiwan&nbsp;&nbsp;<a target="_blank" href=https://www.linkedin.com/in/sunpochin/><span class="fr-myicon fr-deletable black fr-myicon-img" style="background: url(https://spa-assets.cake.me/assets/editor/icons//black/social_media/linkedin.svg);"><span class="fr-icon-space-wrapper">&nbsp;</span></span></a>&nbsp;&nbsp;<a target="_blank" href=https://github.com/sunpochin><span class="fr-myicon fr-deletable black fr-myicon-img" style="background: url(https://spa-assets.cake.me/assets/editor/icons//black/social_media/github.svg);"><span class="fr-icon-space-wrapper">&nbsp;</span></span></a>&nbsp;&nbsp;<a target="_blank" href=https://stackoverflow.com/users/720276/sunpochin><span class="fr-myicon fr-deletable black fr-myicon-img" style="background: url(https://spa-assets.cake.me/assets/editor/icons//black/social_media/stack_overflow.svg);"><span class="fr-icon-space-wrapper">&nbsp;</span></span></a></p>

<h3>軟體工程師<span style="font-size: 18.37px" class="theme-main-color">&nbsp;&nbsp;&bull;&nbsp;&nbsp;傲嬌文創/傲嬌軟體有限公司</span></h3><p><span style="color: #888;">四月 2024 - Present</span></p><p>• 我在傲嬌軟體這家接案公司，擔任網頁前端工程師，負責公司最長期，最重要客戶「品學堂」。使用 Nuxt2 框架開發 RWD 網頁。

• 目前前端是我一人開發，由另一位資深工程師跟技術長審核程式碼。 這幾輪 Sprints 我總共完成了 9 份規格書的新功能或調整。

• 對於 Clean Code 有執著，會將超過兩個頁面共用的功能，提取到一個檔案。也會將重複使用的 CSS color code 寫成變數。

• 我藉著優化 nuxt.config.js 檔案參數，讓 development mode 的第一次網頁讀取時間，從約 12 秒降低為 4 秒，效率提高為 300% .

• 把編譯時間增快為 200% . 經過實驗找出瓶頸，讓 production build, 時間由 12 分鐘增快為 6 分鐘。</p>

<h3>資深工程師<span style="font-size: 18.37px" class="theme-main-color">&nbsp;&nbsp;&bull;&nbsp;&nbsp;FARobot / 法博智能移動股份有限公司</span></h3><p><span style="color: #888;">四月 2022 - 六月 2022</span></p><p>• 建立並且維護 Bitbucket CI/CD pipeline.
• 維護機器人設定前端 Javascript  網頁。</p>

<h3>Robotics Engineer<span style="font-size: 18.37px" class="theme-main-color">&nbsp;&nbsp;&bull;&nbsp;&nbsp;英屬開曼群島商麥迪創科技股份有限公司台灣分公司</span></h3><p><span style="color: #888;">六月 2018 - 七月 2019</span></p><p>•使用 ROS, gazebo simulator, CARLA simulator 來實做主管讀論文找到的演算法。
•在技術總監指導下共同開發 NOAH, 一個偵測駕駛者倦意的系統，在 CES 得到新創產品獎。</p>

<h3>Senior Software Developer<span style="font-size: 18.37px" class="theme-main-color">&nbsp;&nbsp;&bull;&nbsp;&nbsp;願境網訊股份有限公司_KKBOX</span></h3><p><span style="color: #888;">八月 2007 - 七月 2016</span></p><p>• 開發、維護 KKBOX Windows Client 功能。
• 開發 KKBOX 行動版 Nokia Symbian 手機，Microsoft Windows Mobile.
• 建立了公司第一套 CI/CD pipeline, 使用 Hudson / Jenkins, 來維護 KKBOX Windows Client 的品質。
• 編寫 Unit Tests 自動測試。</p>

<h3>Software Developer<span style="font-size: 18.37px" class="theme-main-color">&nbsp;&nbsp;&bull;&nbsp;&nbsp;願境網訊股份有限公司_KKBOX</span></h3><p><span style="color: #888;">七月 2003 - 一月 2007</span></p><p>• 開發當時公司經營的 J2ME 手機遊戲。
• 跟團隊一起開發了 KKBOX 的第一個前端 APP: KKBOX Windows Client.</p>

<p><span style="color: #888;">2001 - 2003</span></p><h3>國立中山大學 National Sun Yat-Sen University</h3><h4>Master of Computer Science</h4>

<p><span style="color: #888;">1994 - 1998</span></p><h3>國立交通大學 National Chiao Tung University</h3><h4>Bachelor of Transportation Management</h4>

<h2>技能</h2><hr /><ul><li>Nuxt2</li><li>HTML/CSS</li><li>JavaScript</li><li>AJAX / API串接</li><li>RWD</li><li>Figma</li></ul>

<h2>語言</h2><hr /><ul><li>English — 中階</li><li>Chinese — 母語或雙語</li></ul>