Design and DevelopFrontend
Frontend development is my favourite. When designing pages and components for users, seeing those beautiful layouts appear on the screen in real time is what excites me the most. With numerous frameworks and libraries available now, along with component-based development, our development efficiency has greatly improved
Frameworks | React, React Native, Next.js, Astro, SwiftUI, Vue3
CSS | Tailwind CSS, Sass, Shadcn UI, Element Plus
Libraries | Redux, Zustand, Pinia, Axios, Lucide Icons
Other | PHP, TypeScript, Lottie Animations, Figma
Next.js Project
BlendBetter is a multi-platform project. On the desktop side, I developed it using Next.js, whose routing system is very convenient, by organizing different pages as folders, I could automatically create the website’s routes. With the help of Tailwind CSS and shadcn/ui, the interface development was highly efficient. The sidebar design makes the site’s features clear at a glance, and Lucide Icons provide a clean visual style that makes buttons easy to recognize while reducing users’ reading effort.
These advantages allowed me to complete the desktop version quickly. I then developed the mobile version using React Native, enabling BlendBetter to better serve both iOS and Android users with greater convenience in the kitchen.
SwiftUIRebuilding BlendBetter
After implementing the core mobile features with React Native, I set higher expectations for the project. This time, I wanted to use an on-device model to directly recognize fruit types. To better achieve this, I rebuilt the entire project using SwiftUI and leveraged Apple’s Vision framework.
As a result, on iOS, users can directly use the camera to scan the fruits they have.
The app is currently in the final stage of development, and it is expected to be launched on the App Store within the next few weeks.
React ProjectSingle Page App
Jokeshare is a typical React SPA project. In this web app, any user can browse and upload jokes, like and comment on them, and sort jokes by number of likes or by most recent. Users can also save jokes using the Collections feature.
In this SPA project, I used Zustand for global state management. Compared to Redux, Zustand is more lightweight, simpler, and more efficient, which allowed me to implement the collections feature very quickly.
For state persistence, I used Zustand’s built-in persist middleware, ensuring that users’ favourited jokes are saved locally and can be loaded again the next time they visit the website.
I also used Lodash’s sorting utilities to implement dynamic joke ordering. When users click the sorting controls, a click event is triggered that applies different sorting strategies: one displays jokes in descending order based on the counts of likes, and the another one shows the newest jokes first based on their creation time.
This approach keeps the sorting logic clean and efficient while providing users with a smooth way to switch between “Most Liked” and “Latest” views.
Owen's Kitchen PHP Project
Today, PHP still plays a very important role in development, especially for full-stack projects and applications that need to be built quickly. I enjoy cooking and sharing food, and Owen’s Kitchen is a project built with PHP and MySQL.
It allows users to browse dishes, add items to a cart, leave notes (such as marking allergies to certain dishes), confirm orders, and view their balance and bills.
Owen's PortfolioAstro Project
Astro is particularly well suited for performance-focused showcase websites.
SEO-Friendly Architecture
Astro provides a Layout system where each page can pass props to dynamically update elements like the title and metadata. Navigation is handled through client-side routing, enabling smooth transitions without full page reloads.
Island Architecture & Prefetching
Astro’s island architecture allows me to limit interactivity to specific React components, keeping the rest of the page lightweight and server-rendered.
Image Optimization
Astro’s built-in Image component significantly improves image performance in this project. For example, one image originally sized at 1.9MB was optimized down to just 119KB after processing.
Selecting the most suitable technologies for different application scenarios
Frameworks | React, React Native, Next.js, Astro, SwiftUI, Vue3
CSS | Tailwind CSS, Sass, Shadcn UI, Element Plus
Libraries | Redux, Zustand, Pinia, Axios, Lucide Icons
Other | PHP, TypeScript, Lottie Animations, Figma