About Me Works
Hello!
我是曾惠貞

從一開始畢業就投入了樂高教育的區塊，在教學的過程中接觸到些許的模組化程式，發現在自己對於程式相當的有興趣，喜歡程式帶給我的成就感，進而想要深入瞭解程式的運作。

在搜尋資料的過程中接觸到『前端網頁設計』，發現可以結合自己的科系『設計』，除了畫面上的美觀外，還可以優化整體的使用者流程，努力在網上自學課程，及參加職訓局的課程，嘗試著呈現出不一樣的專案內容，並且遇到不會的問題也會上網求知，培養自己解決問題的能力，希望未來能協助公司創造出有功能外還兼具美感的網頁。

生日：1994/01/17
電話：0975-262526
E-mail：ws240024@gmail.com
學歷
2013-2016
國立雲林科技大學創意生活設計系
2011-2013
台中市立豐原高級中等學校
2009-2011
台中市立豐原國民中學
得獎經歷
2016 11月點我
Reddot-Brand Indentity-Winner
2016 11月點我
台北設計獎-廠商贊助獎
2016 5月
全國技專校院學生專題製作競賽-第二名
工作經歷
2016 7月 - 2022 5月 (5年9個月)
喬智創意機器人公司 管理職及樂高老師
主要為教導幼稚園小班至國小三年級樂高教育課程，讓他們藉由樂高學到機械原理以及培養程式的邏輯能力，也會協助設計課程並籌備活動及比賽，也負責招生相關事務。
2015 2月 - 2016 6月 (1年6個月)
喬智創意機器人公司 行政及儲備老師
除了培訓成為樂高老師之外，教室相關的活動海報視覺設計，以及兼任櫃台行政老師工作，負責掌握學生到般狀況，並連結老師與家長間的橋梁以及相關的文書處理。
前端程式訓練
2023 7月 - 2023 11月 (496小時)
Blender3D與Web3D暨JS特效互動前端工程師培訓
參加產業尖兵計畫，在有限的時間發揮最大的學習，程式方面，從html、css開始從根學起，利用原生切出響應式版面，之後延伸到後面使用框架Vue、Bootstrap更有效的撰寫程式，再加入一些套件parallax、aos讓網站更多元。建模方面，除了建造一般物件外，還學習材質應用，進而賦予靈魂，產生角色動畫連結畫面，最後還有應用到Three.js讓網頁與建模結合製作專案，以實務的方式，與業界接軌。
技能
網頁
基礎
Html、CSS、JavaScript、JSON、Github、RWD
框架
Vue、Bootstrap
套件
Three.js、GSAP、AOS.js、Sweetalart2
設計
平面
Illustrator、Photoshop、Figma、Canva
模型
3D Blender
影片剪輯
剪映
文書
基礎
Microsoft Word、Microsoft Powerpoint、Microsoft Excel
協作
Miro、Teams、Notion
作品
前端網頁
723教室旅程
主要使用程式：Ｈtml、CSS、Javascript、Three.js、AOS.js、Sweetalart2.js
設計方向是建立一個引人入勝、引發高參與度的互動式網頁體驗。兩個關鍵元素為「滑鼠追蹤」和「滾動式互動」。滑鼠追蹤的設計旨在縮短網頁與使用者之間的距離，通過滑鼠移動即時反饋，增添互動性和趣味。同時，滾動式互動強調網頁的連貫性，通過垂直滾動，每個部分根據使用者的滾動動作而調整呈現速度，使使用者感覺自己參與到一個連貫的故事中，而不僅僅是簡單地瀏覽頁面。
Website Code
Microsoft官網仿切
主要使用程式：Ｈtml、CSS、SCSS、Javascript、Swiper.js
仿做Microsoft整個官網，因為是個龐大的網站，所以使用SCSS來條列建置網站結構。在不同的可視寬度下，會有不同的版面配置，甚至手機版時會出現漢堡選單連結checkbox來操作，也觀察到官網有無障礙的使用模式，所以也有額外設置tabindex來模擬，整個建構下，讓我學習到了很多。
Website Code
太陽系
主要使用程式：Ｈtml、CSS、Javascript、Three.js
第一次將模型導入網頁中，整體的概念與3D建模的差不多，但因為加入了程式撰寫的部分，當一個環節出錯之後，就運作不了，所以在查詢資料上相當的重要。運用Three.js導入模型外，還貼上材質讓星球有樣式，並加上OrbitControls讓滑鼠可以自由轉動視角，label標籤也顯示了各星球的名稱。
Website Code
動態更新天氣小卡
主要使用程式：Ｈtml、CSS、Javascript、Bootstrap、Vue
以往在製作天氣小卡時，內容的值都只能自己填寫進去，並無法真的跟著天氣有真正的調整，中央氣象局有提供36小時天氣的JSON陣列，利用Javascript的fetch功能來提取內容，並搭配Vue的方式，讓值可以動態的更動內容，並搭配bootstrap的tab功能來切換區域頁面。
Website Code
色弱遊戲
主要使用程式：Ｈtml、CSS、Javascript
前幾年很夯的色弱遊戲，試著用網站的方式復刻出來，裡面最困難的部分應該算是如何自動生成隨意顏色的方塊，並亂數的分配解答的位置，再運用判別式的方式，讓他能夠在分數增加的過程中也增加遊戲的難度，最後為了怕題目太難，還有增設提示搖動解答的方塊，最終利用判別來給予相對應的結果。
Website Code
BMI計算機
主要使用程式：Ｈtml、CSS、Javascript
BMI為衡量一個人是否為適當的體型的數值，所以讓我聯想到在醫院填寫病歷的過程，所以版面設計是像個文件般的方式呈現，利用偽元素做出夾子的效果，而功能的部分是運用到Javascript去抓取使用者輸入的值，當確認後，就計算後，並顯現出結果，再用if else的方式來判別是什麼級距並給予相對應的建議。
Website Code
Pixar 動畫海報
主要使用程式：Ｈtml、CSS
挑了幾部喜歡的Pixar動畫來做響應式網站的練習，用原生css的方式讓版面調整，考量到不同使用者在不同裝置上的畫面，並加上hover後會縮放的效果，讓整體版面更加有趣。
Website Code
我們這一家
主要使用程式：Ｈtml、CSS、Javascript
使用CSS切版，利用屬性background-attachment:fixed的方式製造出視差滾動的效果，並且在上方壓上遮罩讓字浮出，再利用a標籤錨點屬性，讓他可以快速地回到頂部。
Website Code
Loading
主要使用程式：Ｈtml、CSS、SCSS
Loading等待的時間總是漫長，所以聯想到製作一個圓滾滾的角色來跳動，他的眼睛是利用偽元素:after來製作，一格格的方塊，經由角色碰觸後再成長，就像是在充電的過程，當滑鼠滑入後，就提升速度般，快速地跳動充電，而背景的部分是有個多個圓形區塊組成，搭配動畫讓他可以悠遊跳動。
Website Code
Summer
主要使用程式：Ｈtml、CSS、Bootstrap
練習應用Bootstrap套件，使用到裡面的Nav、區塊排版、輪播照片、卡片，跟RWD定義在各個大小時，區塊的排版樣式。
Website Code
其他前端作品 Github
image
Model Sketchfab
中興大學校園
復古跳跳燈
警車
奇諾比奧角色
我的房間
等角透視房間
Design
聯絡資訊
電話:0975-262526
E-mail:ws240024@gmail.com