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

此部分包含我近期使用javascript、HTML/CSS、及React.js等試作的幾項前端作品。

試作品

助理工程師

王俊諺

demo與原始代碼請至以下網址閱覽:
https://github.com/MeteoroidAlbert/chat_app.git

使用工具:
React.js、Node.js、Websocket、MongoDB、Firebase、TailwindCSS

Chat App

React.js、Node.js、Chakra-UI、Bootstrap5、RWD、MongoDB試作，詳細內容請至github閱覽:
https://github.com/MeteoroidAlbert/fakeStore.git

fake store app

王俊諺 助理工程師 龍潭區, 桃園市, 台灣 skystar142009@gmail.com、畢業於國立台灣大學園藝暨景觀學系加工利用學群，主修食品科學與工程、微生物、生物/食品化學、植物生理學等相關領域。 具有製藥公司藥物製程約1.7年經驗，包括化工設備操作、性能驗證、無菌製程及風險評估等方...

My Cake Resume

您好，我是王俊諺!
正在自學與尋找前端技術相關工作。
若對個人資訊有興趣，不妨看一下履歷: https://www.cake.me/skystar142009

國立台灣大學園藝暨景觀學系

祥翊製藥股份有限公司

前端工程師 Front-End Developer

<img class="avatar fr-rounded fr-fic fr-dii" src="https://media.cakeresume.com/image/upload/s--9WvZAOzG--/c_fill,g_face,h_120,w_120/v1724993636/eth8jxqedynwmcdi1tft.jpg" style="width: 130px;"><h1>王俊諺</h1><h4>助理工程師</h4>&nbsp;&nbsp;龍潭區, 桃園市, 台灣&nbsp;&nbsp; <a href="mailto:skystar142009@gmail.com" rel="noopener noreferrer" target="_blank">skystar142009@gmail.com</a>&nbsp; (+886) 917452875、(+886) 975918270

畢業於國立台灣大學園藝暨景觀學系加工利用學群，主修食品科學與工程、微生物、生物/食品化學、植物生理學等相關領域。　　具有製藥公司藥物製程約1.7年經驗，包括化工設備操作、性能驗證、無菌製程及風險評估等方面。　　目前正在自學前端技術(HTML/CSS、JavaScript、React.js、Node.js、各類CSS框架等)，預期逐步邁向後端，企盼達成全端技術掌握，邁入資訊產業，面對、克服全新挑戰。

<blockquote>記住，來時的路，不論辛苦、艱難與否，只有走下去才機會抵達終點。</blockquote>

2018-2022

<h3>國立台灣大學園藝暨景觀學系</h3><h4 style="text-align: justify;">修習領域橫跨: <span style='color: rgb(85, 85, 85); font-style: normal; font-weight: 400; font-family: "Libre Baskerville", "Noto Serif TC", "Noto Serif SC", "Noto Serif KR", "Noto Serif JP", "Noto Serif", "Songti TC", serif; font-size: 16.7px;'>園產品採後生理/處理、植物生理、微生物學、微積分、統計學、生物/食品/有機/分析化學、食品科技、食品工程、食品微生物等&nbsp;</h4>園產品可簡單認知為諸如各種花卉、蔬果等，這些作物採後仍屬「活著」狀態，而這門學科則著眼於如何延長或維持其採後壽命及品質，因此又涉及包括植物生理、微生物、化學領域的研究，向食品科技領域則又賦予這些作物附加價值。

<ul><li>藥物製程管控，從化工廠般的原料藥Active pharmaceutical ingredients(API) 流程到無菌藥品產出</li><li>設備故障簡易排除，如: 高溫高壓滅菌釜、真空機、模溫機</li><li>無菌操作行為，包含無塵室、Isolator隔離器操作</li><li>風險評估與硬體設備驗證報告、SOP文件撰寫</li><li>團隊管理，包括台籍/外籍技術員分工協作、外語溝通、工作進度管控</li></ul>

<h3>助理工程師</h3><h4>祥翊製藥股份有限公司</h4>十月 2022 - 六月 2024Taipei, Taiwan

<h2>技能</h2><hr><ul><li>HTML/CSS(Bootstrap、Tailwind CSS、Chakra UI)</li><li>JavaScript&nbsp;</li><li>AJAX(Fetch API、Axios)&nbsp;</li><li>React.js(Life cycle, Hooks, 生態圈，如: React Router, Redux toolkit, Context API, etc.)</li><li>Node.js(Express, CORS, Bcryptjs, JWT, etc)</li><li>MongoDB資料庫(schema建立/定義、資料寫入/提取/更改等)</li><li>D3.js (向量地圖繪製)</li></ul>

<h2>語言</h2><hr><ul><li style="text-align: justify;">English &mdash; TOEIC Listening &amp; Reading test: 855</li></ul>

<h3>Fake Store App</h3>模擬功能： 登入/登出、註冊、購物車、結帳(超商店子地圖串接)、商品搜索/篩選使用技術：<ul><li style="text-align: justify; line-height: 1.5; margin-left: 20px;">HTML/CSS, JavaScript</li><li style="text-align: justify; line-height: 1.5; margin-left: 20px;">Chakra UI: React UI庫與自定義CSS樣式</li><li style="text-align: justify; line-height: 1.5; margin-left: 20px;">React.js: 包含Create-react-app，透過React-Router實現SPA，使用Context API管理共用狀態)</li><li style="text-align: justify; line-height: 1.5; margin-left: 20px;">Node.js: 使用Express、CORS、Bcryptjs、JWT模組，以RESTfull API概念實現登入、註冊，以及超商店子地圖串接</li><li style="text-align: justify; line-height: 1.5; margin-left: 20px;">MongoDB資料庫: 管理使用者帳戶、密碼</li></ul>Demo:&nbsp;<a href="https://github.com/MeteoroidAlbert/fakeStore/tree/master" rel="noopener noreferrer" target="_blank"></a><a href="https://github.com/MeteoroidAlbert/fakeStore" rel="noopener noreferrer" target="_blank">https://github.com/MeteoroidAlbert/fakeStore</a><img src="https://images.cakeresume.com/9PQYom/skystar142009/aa762f08-a0fe-451c-b273-884695fac2cf.png" style="color: rgb(85, 85, 85); font-style: normal; font-weight: 400; width: 83px; height: 83px;" class="fr-fic fr-dii fr-fir" data-src="https://images.cakeresume.com/9PQYom/skystar142009/aa762f08-a0fe-451c-b273-884695fac2cf.png" data-fr-old-height="419">&nbsp;

<h3>Chat App</h3>模擬功能：登入/登出、註冊、用戶在線/離線狀態、訊息發送、已讀/未讀功能、好友搜索、上傳附件使用技術：<ul><li style="text-align: justify; line-height: 1.5; margin-left: 20px;">HTML/CSS, JavaScript</li><li style="text-align: justify; line-height: 1.5; margin-left: 20px;">Tailwind CSS: CSS框架，用於快速定義CSS樣式</li><li style="text-align: justify; line-height: 1.5; margin-left: 20px;">React.js:包含vite，透過Redux toolkit管理應用狀態，如選取用戶、訊息發送等</li><li style="text-align: justify; line-height: 1.5; margin-left: 20px;">Node.js: 使用Express、CORS、Bcryptjs、JWT、CookieParser模組實現用戶登入/登出、註冊，以及索取歷史聊天訊息、聯絡人列等</li><li style="text-align: justify; line-height: 1.5; margin-left: 20px;">MongoDB資料庫: 管理使用者帳戶、密碼、歷史聊天訊息</li><li style="text-align: justify; line-height: 1.5; margin-left: 20px;">WebSocket: 用於建立持續、雙向(client-server)的連接、數據傳遞</li></ul>Demo:&nbsp;<a href="https://github.com/MeteoroidAlbert/myproject/tree/master" rel="noopener noreferrer" target="_blank"></a><a href="https://github.com/MeteoroidAlbert/chat_app" rel="noopener noreferrer" target="_blank">https://github.com/MeteoroidAlbert/chat_app</a><img src="https://images.cakeresume.com/9PQYom/skystar142009/17ebc759-a93c-4237-820d-19b9c58f8a64.png" style="color: rgb(85, 85, 85); font-style: normal; font-weight: 400; width: 83px; height: 83px;" class="fr-fic fr-dii fr-fir" data-fr-old-src="https://images.cakeresume.com/9PQYom/skystar142009/78d48cde-4205-46e7-98e9-d68c7c85dcfe.png" data-src="https://images.cakeresume.com/9PQYom/skystar142009/17ebc759-a93c-4237-820d-19b9c58f8a64.png">&nbsp;

<h3 style="text-align: justify;">News Weather App</h3>功能: 全球新聞搜尋、台灣全台縣市與鄉鎮天氣預報、互動式地圖使用技術:<ul><li style="line-height: 1.5; margin-left: 20px;">HTML/CSS, JavsScript</li><li style="line-height: 1.5; margin-left: 20px;">Tailwind CSS: CSS框架，用於快速定義樣式</li><li style="line-height: 1.5; margin-left: 20px;">React.js: 包含Webpack，使用React Router實踐SPA(新聞頁面、氣象頁面、首頁切換)；使用Redux toolkit管理狀態(包含搜尋、縣市/鄉鎮資訊)</li><li style="line-height: 1.5; margin-left: 20px;">D3.js: 用於繪製SVG台灣地圖，以及實現互動式地圖</li><li style="line-height: 1.5; margin-left: 20px;">Node.js: 以Express建立簡易伺服器處理前端頁面API請求(新聞資料、天氣資訊)</li></ul>Demo:&nbsp;<a href="https://github.com/MeteoroidAlbert/NewsWeatherApp_new" rel="noopener noreferrer" target="_blank">https://github.com/MeteoroidAlbert/NewsWeatherApp_new</a><img src="https://images.cakeresume.com/9PQYom/skystar142009/7412833e-ee7e-407a-bc93-a827489d9371.png" style="width: 83px; height: 83px;" class="fr-fic fr-dib fr-fir" data-src="https://images.cakeresume.com/9PQYom/skystar142009/7412833e-ee7e-407a-bc93-a827489d9371.png">