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

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

News Weather App

助理工程師

王俊諺

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: 100px; height: 100px;"><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 style="line-height: 1.5; text-align: justify;">HTML/CSS&nbsp;</li></ul>&mdash;&nbsp;Bootstrap、Tailwind CSS、Chakra UI、RWD、切版等<ul><li style="line-height: 1.5; text-align: justify;">JavaScript &nbsp;</li></ul>&mdash;&nbsp;DOM操作、使用者互動、API串接、物件資料篩選等<ul><li style="line-height: 1.5; text-align: justify;">AJAX&nbsp;</li></ul>&mdash;&nbsp;Fetch API、Async/Await、Axios 實踐API串接、後端數據傳遞<ul><li style="line-height: 1.5; text-align: justify;">WebSocket&nbsp;</li></ul>&mdash; 實踐Client-Server雙端數據傳遞(同時搭配前端JS或後端Node.js)<ul><li style="line-height: 1.5; text-align: justify;">React.js&nbsp;</li></ul><ol style=" color: rgb(41, 41, 41); font-style: normal; font-weight: 400;"><li style="margin-left: 20px;">JSX語法進行聲明式編程建構UI</li><li style="margin-left: 20px;">掌握基礎Life cycle、hooks理論，並自定義或使用hooks(ex: useState、useEffect等)</li><li style="margin-left: 20px;">熟習單向數據流、狀態管理(Context API、Redux Toolkit)，避免props drilling。</li><li style="margin-left: 20px;">生態圈與插件使用方式(ex: React Router、Redux Toolkit等)</li><li style="margin-left: 20px;">開發SPA</li></ol><ul><li style="line-height: 1.5; text-align: justify;">Node.js&nbsp;</li></ul><ol style="margin-left: 20px ;"><li style="line-height: 1.5;">NPM使用</li><li style="line-height: 1.5;">Express, CORS, Bcryptjs, JWT, WebSocket等伺服器架設與通訊技術及HTTP/HTTPS概念，設立端口供前端串接</li><li style="line-height: 1.5;">Webpack(基本配置entry, loaders, plugins, output 配合React使用)</li></ol><ul><li style="line-height: 1.5; text-align: justify;">MongoDB資料庫&nbsp;</li></ul>&mdash;&nbsp; schema建立/定義、資料寫入/提取/更改等<ul><li style="line-height: 1.5; text-align: justify;">D3.js &mdash; 向量地圖繪製</li></ul>

<h2>語言</h2><hr>English &mdash; TOEIC Listening &amp; Reading test: 855

<h3>Fake Store App</h3>模擬功能： 登入/登出、註冊、購物車、結帳(超商店子地圖串接)、商品搜索/篩選使用技術：<ul><li style="text-align: justify; line-height: 1.5; margin-left: 20px;">HTML/CSS, JavaScript: 第三方API串接(商品內容)</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, JavaScript</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請求並串接第三方API(新聞資料、Open 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">