Karen網頁作品集

充滿熱情的前端網頁開發者,致力於打造功能豐富且使用者友善的網頁應用程式。

關於我 作品集

最新作品

Todo app
ReactReact ReduxRedux Toolkit

待辦事項應用程式

體驗一款無縫、友善使用者的應用程式,具有響應佈局和互動元素。輕鬆管理待辦事項,切換淺色/深色模式,甚至使用拖放功能重新排序項目,提升工作效率。

更多介紹
Calculator app
ReactSCSS mixins多種主題色切換

計算機應用程式

使用 React 和 SCSS mixins 開發,可切換3種主題色的計算機網頁應用程式。預設主題會根據使用者瀏覽器的設定(淺色或深色)呈現初始主題色。

更多介紹
Launch countdown timer
Vanilla JSCSS animations

啟動倒數計時器

體驗一款有趣且身臨其境的14天倒數計時器,搭配翻轉卡片動畫,提升整體使用者體驗。

更多介紹
Expenses chart component
Vanilla JSChart.js資料視覺化

開支圖表元件

使用 Chart.js 製作一個定制的長條圖元件,顯示每週的開支和每月百分比增減。該圖表使用 Chart.js 提供的內建動畫效果。

更多介紹
Tip calculator app
Vue.js計算機

小費計算器應用程式

一個小而實用的應用程式,當和朋友一起出去時,可以計算小費和每人的總金額。

更多介紹
Interactive pricing component
React客製範圍輸入框樣式

互動價格元件(Component)

一個具有客製樣式的互動範圍輸入功能的價格元件。

更多介紹

精選作品 - 網頁應用程式開發

Homepage of Vue - Business Contact Book
Vue.jsVue-RouterLocal storage

Vue - 職員聯絡簿

打造一個員工資料友善管理的網頁應用程式。透過Local Storage存取資料,完成資料的留存、搜尋、更改、刪除的功能。使用 Adobe XD 精心設計,以Vue、SCSS、Bootstrap 和 Vite開發完成。

更多介紹
Homepage of React - Weather in 7 Days
ReactAPIsChart.js資料視覺化明暗主題切換

React - 7天天氣預報

一個多功能的天氣預報網頁應用程式,讓使用者能夠預先安排未來7天的生活計畫和搭配服裝。應用程式提供明亮和暗色的主題切換,提供使用者在不同光線的情況下有更舒適的體驗。整合了 Chart.js 以實現直觀的資料視覺化。採用位置和天氣 API 進行資料擷取,使用 Adobe XD 設計 UI,和使用 React、SCSS、Bootstrap 和 Chart.js 開發完成。

更多介紹
Homepage of Redesigned Astronomy Picture of the Day
Vanilla JSNASA APOD APILocal Storage

重新設計的每日天文圖片(APOD)

對 NASA APOD 網頁應用程式進行設計改版和開發,提供豐富的使用者體驗。整合 NASA 的 APOD API 和所有網頁資訊與功能,以暗色主題進行設計,提供身歷其境的天文體驗。使用 HTML、SCSS、Javascript 和 Bootstrap 構建,完成無JavaScript框架的網頁應用程式開發。

更多介紹

© 2024 王若芳 Karen Wang