Latest Portfolios

ReactReact ReduxRedux Toolkit

Todo app

Enjoy a seamless, user-friendly app with adaptable layouts and interactive elements. Effortlessly manage todos, toggle light/dark modes, and even reorder items with a drag-and-drop feature for enhanced productivity.

View Page

ReactSCSS mixinsMultiple themes

Calculator app

A web app calculator with three switchable color themes, developed using React and SCSS mixins. The default theme adapts to users' browser settings, accommodating both light and dark modes.

View Page

Vanilla JSCSS animations

Launch countdown timer

Experience a fun and immersive 14-day countdown timer with flipping card animations, enhancing the overall user experience.

View Page

Vanilla JSChart.jsData Visualization

Expenses chart component

Utilize Chart.js to craft a customized bar chart component displaying weekly expenses and the monthly percentage increase or decrease. The chart features built-in animations provided by Chart.js.

View Page

Vue.jsCalculator

Tip calculator app

A small, useful app that calculates tips and the total amount per person when hanging out with friends.

View Page

ReactCustomized range input slider

Interactive pricing component

An interactive pricing component complete with custom range input slider and pricing toggle.

View Page

Featured Portfolios

Vue.jsVue-RouterLocal storage

Vue - Business Contact Book

A creation of a user-friendly web app for streamlined network management and contact organization. Featuring a seamless dark mode, it ensures an optimal user experience. Data efficiency is prioritized through Local Storage. Expertly designed with Adobe XD, powered by Vue, SCSS, Bootstrap, and Vite, it offers a responsive, empowering solution.

View Page

ReactAPIsChart.jsData VisualizationLight / Dark Themes

React - Weather in 7 Days

A versatile weather forecast web app, enabling users to plan trips and outfits with a 7-day outlook. The app offers seamless mode switching (light/dark). Integrated Chart.js for intuitive data visualization. Designed UI with Adobe XD and developed using React, SCSS, Bootstrap, and Chart.js. Employed location and weather APIs for data retrieval.

View Page

Vanilla JSNASA APOD APILocal Storage

Redesigned Astronomy Picture of the Day (APOD)

A revamped NASA APOD web app for an enriched user experience. Integrated NASA's APOD API, featuring a specialized dark mode for an immersive astronomy experience. Built with Javascript, SCSS, and Bootstrap for seamless functionality and aesthetics.

View Page

---

© 2024 Ruo-Fang Wang.