
## Project Introduction:

[Vuong Khang Home](https://vuongkhanghome.com/) is a website dedicated to showcasing **home design and construction services**, including building, interior renovation, and providing comprehensive solutions for modern living spaces.

This project was developed to help potential customers easily access information about construction services, explore completed projects, and connect with professional consultants.

**Main objectives of the project:**

- Create a professional and visually appealing interface that reflects the high-quality services offered by Vương Khang Home.
- Improve website SEO and performance using **NuxtJS** for better search engine visibility and faster loading speeds.
- Enhance user experience with an intuitive and well-structured layout, making navigation seamless and efficient.

![Project 1 Interface](/projects/project1/vuongkhanghome.webp)

## Key Features:

- Fully responsive design that adapts to all screen sizes, from desktops to mobile devices.
- A well-structured service catalog covering: **design, construction, and interior renovation**.
- A portfolio showcasing completed projects, giving potential clients a clear view of previous work.
- An interactive contact form that allows users to request consultations effortlessly.
- Optimized images and caching techniques for a faster browsing experience.

## Technologies Used:

- **NuxtJS**: Enables server-side rendering for better SEO and performance, ensuring a smooth and dynamic user experience.
- **SCSS**: Provides a structured and scalable approach to styling, making it easier to maintain and expand the design.
- **Lazy Loading & Caching**: Improves site performance by loading images and resources only when needed.

## Achievements:

- Successfully delivered a stable and high-performance website with fast loading times.
- Improved SEO rankings, increasing online visibility and attracting more potential clients.
- A modern and professional website design that enhances brand credibility and user engagement.
- Enhanced mobile compatibility, ensuring an excellent experience across all devices.


A landing page showcasing the products and services of Vuong Khang Home, built with NuxtJS and SCSS to ensure high performance and a seamless user experience.

Một trang landing giới thiệu các sản phẩm và dịch vụ của Vương Khang Home, được xây dựng với NuxtJS và SCSS để đảm bảo hiệu suất cao và trải nghiệm người dùng mượt mà.

Vuong Khang Home


## About the Project:

[The Five](https://thefive.com.vn/) is the official website of a **leading architectural firm in Vietnam**, specializing in modern, luxurious, and sustainable building solutions. The site is designed to serve as a **digital portfolio**, highlighting The Five's expertise in designing and constructing high-end residential and commercial projects.  

With a focus on **aesthetics, functionality, and performance**, this project was developed to provide potential clients with a **seamless browsing experience** while exploring architectural concepts and completed projects.  

### Why This Project Was Built:

- **Brand Representation**: Establish a **strong online presence** that reflects the company's vision and architectural expertise.  
- **Engagement & Lead Generation**: Provide an intuitive way for visitors to explore projects and get in touch for consultations.  
- **Content Scalability**: Utilize **Strapi CMS** to enable easy updates without developer intervention.  
- **Performance & SEO Optimization**: Ensure high-speed loading, smooth navigation, and top-notch **search engine rankings**.  

![The Five Interface](/projects/project2/thefive.webp)

## Core Features:

- **Elegant, Minimalist UI** – A visually striking yet functional design that enhances user engagement.  
- **Comprehensive Project Portfolio** – Showcases high-resolution images, architectural insights, and project details.  
- **Interactive Project Filtering** – Users can filter and explore designs based on categories like residential, commercial, and sustainable projects.  
- **Seamless Mobile Experience** – Optimized for all devices to ensure an uninterrupted browsing experience.  
- **SEO & Performance Enhancements** – Implemented SSR (Server-Side Rendering) for faster page load speeds and better search rankings.  
- **Dynamic Content Management** – Powered by **Strapi**, allowing The Five’s team to update content effortlessly.  

## Tech Stack:

- **Next.js** – For server-side rendering and optimized performance.  
- **TypeScript** – Ensures type safety and better maintainability.  
- **SCSS** – Enables modular and reusable styles for a polished UI.  
- **Strapi** – A headless CMS for flexible and scalable content management.  

## Outcomes & Impact:

- **Increased Client Engagement** – The new website has improved visitor interaction, leading to **higher consultation requests**.  
- **Better SEO Rankings** – Optimized architecture and fast-loading pages have boosted organic reach.  
- **Enhanced Brand Identity** – The Five now has a **modern, professional, and credible online presence**.  
- **Scalable & Future-Proof** – The website is designed to support future expansions and content growth.  


A premium website for The Five, an architectural firm in Vietnam, showcasing innovative designs and high-end construction services. Built with Next.js, TypeScript, and Strapi for seamless performance and easy content management.

Một website cao cấp cho The Five, công ty kiến trúc tại Việt Nam, giới thiệu các thiết kế sáng tạo và dịch vụ xây dựng cao cấp. Được xây dựng với Next.js, TypeScript và Strapi để đảm bảo hiệu suất mượt mà và quản lý nội dung dễ dàng.

The Five


## About the Project

**VNB Node** is a landing page designed to **showcase and provide insights into various blockchain networks**. The goal of this project is to create an intuitive and visually appealing platform where users can explore different blockchain technologies, their use cases, and their impact on the decentralized ecosystem.  

This project was developed as an **informational hub** for blockchain enthusiasts, developers, and investors looking to learn about emerging networks such as:  
- **XAI** – AI-driven blockchain technology.  
- **Grass** – A decentralized data-sharing network.  
- **Q Blockchain** – A smart contract platform with advanced governance.  
- **Commune AI** – A decentralized AI computing platform.  
- **Kuzco** – A blockchain focused on scalability and efficiency.  
- **IO.NET** – High-performance decentralized cloud computing.  
- **EigenLayer** – A restaking protocol for Ethereum.  
- **Subspace** – A decentralized storage and consensus layer.  

![VNB Node Interface](/projects/project3/vnbnode.webp)

## Key Features

- **Dynamic Blockchain Listings** – Highlights various networks with descriptions and key data points.  
- **Live Updates & Integrations** – Potential for API connections to fetch real-time blockchain statistics.  
- **Clean & Modern UI** – Built with Next.js and SCSS for a smooth, responsive user experience.  
- **SEO-Optimized Content** – Designed to attract search traffic and provide valuable insights to users.  
- **Expandable & Modular Design** – Allows easy addition of new blockchain projects in the future.  

## Technologies Used

- **Next.js** – Provides fast performance and SEO benefits with SSR.  
- **TypeScript** – Ensures type safety and better maintainability.  
- **SCSS** – Enables clean and structured styling for a modern design.  

## Future Enhancements

- **Interactive Charts & Visualizations** – Display blockchain statistics with engaging data visualizations.  
- **Educational Content** – Articles and explanations about each network’s unique features.  
- **Community & Social Integration** – Links to official documentation, communities, and Twitter feeds of featured projects.  

## Project Impact

- Offers a **single platform** to explore multiple blockchain ecosystems.  
- Helps users stay updated with **new and emerging blockchain projects**.  
- Lays the foundation for potential integrations with **real-time data sources**.  


A landing page built to showcase various blockchain projects, providing insights into emerging networks like XAI, Grass, Q Blockchain, Commune AI, Kuzco, IO.NET, EigenLayer, and Subspace.

Một trang landing được xây dựng để giới thiệu các dự án blockchain, cung cấp cái nhìn sâu sắc về các mạng mới nổi như XAI, Grass, Q Blockchain, Commune AI, Kuzco, IO.NET, EigenLayer và Subspace.

VNB Node


## About the Project

[Arobid.com](https://arobid.com/) is a **B2B & B2C e-commerce platform** designed to facilitate transactions between businesses and consumers through an **efficient procurement and bidding system**.  

The platform supports **multi-language functionality**, allowing businesses to operate across different markets, making it easier for international buyers and suppliers to connect.  

### Key Objectives

- **Seamless B2B & B2C Experience** – Support both bulk procurement for businesses and direct sales for consumers.  
- **Multilingual Support** – Provide **language localization** to improve user experience for international markets.  
- **Advanced Bidding & RFQ System** – Empower businesses to **request and compare supplier quotations** easily.  
- **Scalable & High-Performance** – Built with **Next.js, TypeScript, and Tailwind CSS** for speed, responsiveness, and reliability.  

![Arobid.com Interface](/projects/project4/arobid.webp)

## Core Features

- **B2B Marketplace** – Connect businesses with verified suppliers for bulk purchases and long-term contracts.  
- **B2C Shopping** – Provide a smooth retail experience for consumers, similar to traditional e-commerce.  
- **Multilingual Support** – **Enable users to switch languages** for a localized experience.  
- **RFQ (Request for Quotation) System** – Buyers can request quotes and compare supplier offers.  
- **Bidding System** – Suppliers can **compete** for business deals, ensuring competitive pricing.  
- **Dynamic Pricing & Bulk Discounts** – Businesses can negotiate **custom pricing** based on volume.  
- **Supplier & Customer Dashboards** – Manage orders, track bids, and handle transactions in one place.  
- **Mobile-Responsive Design** – Ensures a seamless experience across **desktop and mobile**.  

## Tech Stack

- **Next.js** – Delivers **fast performance & SEO benefits** with SSR.  
- **TypeScript** – Enhances maintainability and type safety.  
- **Tailwind CSS** – Provides a clean, modern, and responsive UI.  
- **i18n (Internationalization)** – Allows seamless **language switching and localization**.  

## Future Enhancements

- **AI-Driven Product Recommendations** – Personalize the shopping experience based on user behavior.  
- **Logistics & Payment Integrations** – Connect with **shipping providers and payment gateways** for seamless order fulfillment.  
- **Supplier Verification & Ratings** – Build trust with **verified supplier profiles and customer feedback**.  

## Business Impact

- **Expanded Market Reach** – Supports **global trade with multilingual capabilities**.  
- **Increased Efficiency** – **Automates procurement** and improves the **negotiation process** for businesses.  
- **Cost Savings & Competitive Pricing** – The **bidding system ensures** buyers get the best deal possible.  



Arobid.com is a multilingual B2B & B2C e-commerce platform designed to connect businesses and consumers with an efficient procurement and bidding system.

Arobid.com là nền tảng thương mại điện tử đa ngôn ngữ B2B và B2C, được thiết kế để kết nối doanh nghiệp và người tiêu dùng với hệ thống đấu thầu và mua sắm hiệu quả.

Arobid.com


## About the Project

**Arobid Donation** is a dedicated platform within the **Arobid ecosystem**, designed to facilitate **charitable contributions** from businesses and organizations.  

The platform allows **admins** to create **fundraising campaigns** for various social causes, such as:  
- **Supporting underprivileged children**  
- **Helping flood and disaster victims**  
- **Providing aid to remote communities**  

Businesses can participate by donating **money, goods, or resources** and track their contributions throughout the donation process.  

In addition to structured campaigns, **companies can also independently donate items or funds**, ensuring flexibility in their charitable efforts.  

## Key Features

- **Campaign-Based Donations** – Businesses can contribute to **official campaigns** created by the platform (e.g., disaster relief, education support).  
- **Direct Contributions** – Companies can donate independently, offering **money, goods, clothes, or essential supplies**.  
- **Transparent Tracking** – Donors can monitor **the status and impact of their contributions**.  
- **User Dashboard** – Each company has a personalized dashboard to view **past and ongoing donations**.  
- **Responsive and User-Friendly** – Built with **Next.js & TailwindCSS** for an optimized experience across devices.  

![Arobid Donation Interface](/projects/project5/donation.webp)

## Tech Stack

- **Next.js** – Ensures a smooth, fast, and scalable web experience.  
- **TypeScript** – Enhances maintainability and type safety.  
- **TailwindCSS** – Provides a clean and consistent UI.  
- **Real-Time Tracking** – Displays the progress of each donation.  

## Impact & Benefits

- **Encourages Corporate Social Responsibility (CSR)** by simplifying charitable contributions.  
- **Provides transparency** for donors to track their impact.  
- **Strengthens brand reputation** by showcasing corporate contributions to social causes.  
- **Offers flexibility** by allowing both campaign-based and independent donations.  


Arobid Donation is a charitable platform under the Arobid ecosystem, allowing businesses to contribute to social causes and track their donations transparently.

Arobid Donation là nền tảng từ thiện thuộc hệ sinh thái Arobid, cho phép các doanh nghiệp đóng góp vào các hoạt động xã hội và theo dõi các khoản đóng góp của mình một cách minh bạch.

Arobid Donation


## About the Project

**Appman Client** is a **laboratory management system** designed for **medical labs** to efficiently manage users, assign roles, track tasks, and oversee medical equipment usage. The platform provides a structured workflow where **admins can manage lab members**, assign tasks, and allocate devices to ensure smooth lab operations.  

The system also allows **members to check out medical equipment**, update task progress, and return devices once tasks are resolved, ensuring **optimized resource utilization** in the lab.  

### Key Objectives

- **User Role Management** – Admins can add, edit, and remove users while assigning roles (**Admin, Normal User**).  
- **Task Management** – Create, assign, and track lab tasks for efficient workflow.  
- **Medical Equipment Tracking** – Monitor which devices are in use and which are available.  
- **Task-Driven Equipment Usage** – Members can hold devices and return them once tasks are completed.  

![Appman Client Interface](/projects/project6/appman.webp)

## Core Features

- **User Management** – Add, remove, and modify users with role-based access.  
- **Role-Based Access Control (RBAC)** – Separate permissions for **admins and normal users**.  
- **Task Assignment & Tracking** – Assign tasks to members and monitor progress.  
- **Equipment Checkout System** – Members can **hold devices**, complete tasks, and return them.  
- **Real-Time Task Status Updates** – Track task progress in a centralized dashboard.  
- **Device Availability System** – Ensure medical equipment is optimally used within the lab.  
- **Mobile-Responsive UI** – Seamlessly manage tasks and devices from any device.  

## Tech Stack

- **Next.js** – Ensures fast rendering and optimized performance.  
- **Tailwind CSS** – Provides a modern, clean, and responsive UI.  
- **State Management** – Efficiently manages user roles, tasks, and device availability.  

## Future Enhancements

- **Automated Notifications** – Alert users when tasks are assigned or when devices need to be returned.  
- **Equipment Maintenance Tracking** – Add **logs for device usage and maintenance schedules**.  
- **Advanced Reporting** – Generate **lab performance analytics** based on task completion rates.  
- **Integration with External Medical Systems** – Connect with hospital and lab management software.  

## Business Impact

- **Optimized Resource Allocation** – Ensures devices are used efficiently without conflicts.  
- **Improved Task Workflow** – Enhances lab productivity through structured task management.  
- **Enhanced Role-Based Security** – Prevents unauthorized access and maintains lab discipline.  



A laboratory management system for user role assignment, task tracking, and medical equipment handling.

Hệ thống quản lý phòng thí nghiệm cho việc phân công vai trò người dùng, theo dõi công việc và quản lý thiết bị y tế.

Appman Client


## About the Project

**Exam Mixer** is a **custom-built exam shuffling application** designed for my wife, who is a teacher. Many online tools for mixing exam questions require **paid subscriptions**, so I decided to build a **free, easy-to-use** solution tailored to her needs.  

The app allows teachers to **upload a DOCX file** containing multiple-choice questions (MCQs) with answers labeled **A, B, C, D**, where the correct answer is marked in **bold**. The system then **automatically shuffles the questions and answers**, generates multiple test versions, and provides **a ZIP file containing all shuffled exam versions** along with an **Excel answer key**.

### Key Features

- **DOCX File Import** – Upload exam questions in a structured format.  
- **Smart Answer Detection** – Detect correct answers based on **bold formatting**.  
- **Custom Exam Variants** – Specify the number of test versions needed.  
- **Unique Test Codes** – Assign custom IDs to each shuffled version.  
- **Preview Functionality** – Review each generated version before downloading.  
- **Automated ZIP Export** – Download all shuffled exams in **DOCX format** along with a **separate answer key (Excel file)**.  

![Exam Mixer Interface](/projects/project7/exammixer.webp)

## How It Works

- **Upload the original DOCX file** containing the exam questions.  
- **Specify the number of test versions** to generate.  
- **Assign unique test codes** (e.g., A1, A2, A3...).  
- **Review the shuffled exams** before downloading.  
- **Download the ZIP file**, which includes:  
   - Multiple DOCX files (**shuffled exam versions**).  
   - An **Excel answer key** corresponding to each test version.  

## Tech Stack

- **Next.js** – Provides a fast and seamless user experience.  
- **Mantine UI** – Ensures a modern, intuitive interface.  
- **Docx Parsing & Processing** – Extracts and shuffles questions while preserving formatting.  
- **Excel Export** – Generates a structured answer key for all test versions.  

## Business Impact

- **Saves Time for Teachers** – Automates exam shuffling in seconds.  
- **Cost-Effective Solution** – Eliminates the need for paid third-party tools.  
- **Ensures Fair Testing** – Reduces cheating by generating multiple randomized versions.  
- **User-Friendly Interface** – Designed with simplicity in mind for non-technical users.  



An automated exam shuffling tool designed for teachers to generate randomized test versions effortlessly.

Một công cụ trộn đề thi tự động dành cho giáo viên, giúp tạo các phiên bản đề thi ngẫu nhiên một cách dễ dàng.

Exam Mixer


## About the Project

**Gogotech CMS** is a **transportation management system** designed to streamline fleet operations, **track vehicles in real-time**, and optimize driver assignments. The platform provides a **centralized dashboard** where administrators can manage vehicles, monitor their locations using **Google Maps**, and oversee delivery routes efficiently.

The system integrates **real-time GPS tracking**, where each driver uses a **mobile application** that continuously updates their location via **WebSocket communication**, allowing the CMS to track vehicle movement, estimated arrival times, and delivery progress.

### Key Objectives

- **Efficient Fleet Management** – Add, remove, and update vehicle details effortlessly.
- **Real-Time Vehicle Tracking** – Utilize **Google Maps API** for live monitoring.
- **Driver Management** – Assign tasks dynamically and monitor driver performance.
- **Optimized Route Planning** – Improve delivery efficiency and reduce fuel costs.

![Gogotech CMS Interface](/projects/project8/gogotech.webp)

## Core Features

- **Vehicle Management Dashboard** – Add, update, and manage all registered vehicles.  
- **Google Maps Integration** – Track vehicle movement in real time.  
- **Live Location via WebSocket** – Receive continuous GPS updates from driver mobile apps.  
- **Driver & Fleet Assignment** – Allocate vehicles to drivers based on availability.  
- **Route & Schedule Optimization** – Improve **delivery times and logistics efficiency**.  
- **Real-Time Alerts & Notifications** – Get instant updates on route changes or delays.  
- **Role-Based Access Control** – Restrict features based on user roles (admin, dispatcher, driver).

## Tech Stack

- **NuxtJS** – Provides SSR capabilities for better performance and SEO.
- **SCSS** – Ensures a flexible, maintainable, and responsive UI.
- **Ant Design** – Delivers a polished and user-friendly admin panel.
- **Google Maps API** – Enables live vehicle tracking.
- **WebSocket** – Supports real-time communication for **instant location updates**.

## Future Enhancements

- **AI-Powered Route Optimization** – Suggests the fastest routes based on traffic conditions.
- **Driver Behavior Analysis** – Monitors speed, stops, and driving patterns to improve efficiency.
- **Mobile App Enhancements** – Implement **offline mode** for tracking in areas with poor connectivity.
- **Automated Reporting** – Generate insights on fleet performance and operational costs.

## Business Impact

- **Improved Delivery Efficiency** – Reduces delays and optimizes logistics.
- **Cost Savings** – Enhances fuel efficiency through better route planning.
- **Enhanced Fleet Visibility** – Provides complete transparency on vehicle and driver activity.


A transportation management CMS for vehicle tracking, fleet distribution, and real-time driver monitoring using Google Maps.

Hệ thống quản lý vận tải (CMS) cho việc theo dõi phương tiện, phân phối đội xe và giám sát tài xế theo thời gian thực sử dụng Google Maps.

Gogotech CMS


## About the Project

**My Wedding** is a personal project I built to celebrate one of the most important milestones in my life – my wedding.  
Instead of relying on traditional invitations, I created a **custom wedding website** to share important details, manage RSVPs, and create a digital space for memories.  

This project not only simplified event coordination but also added a **unique and personal touch** to the wedding experience.  

## Key Features

### 🎉 **Event Information & Schedule**
- Displays the **wedding date, venue, and time** in a beautifully designed layout.  
- Includes a **countdown timer** to build excitement for the big day.  

### 💌 **RSVP System**
- Guests can **confirm attendance online**, reducing the hassle of tracking invitations manually.  
- Option to include **meal preferences** or special requests.  

### 📸 **Photo & Memory Gallery**
- A dedicated space to **share pre-wedding photos, engagement pictures, and event highlights**.  
- Guests can upload their own photos after the wedding to contribute to a collective album.  

### 📍 **Google Maps Integration**
- Provides guests with a **precise location** of the wedding venue.  
- Offers driving directions and nearby accommodation suggestions.  

### 🎶 **Personalized Wedding Playlist**
- A feature allowing guests to suggest **songs for the reception playlist**.  
- Ensures a fun and inclusive atmosphere during the celebration.  

## Technologies Used

- **Next.js** – Fast, optimized, and perfect for building dynamic content.  
- **SCSS** – Styled the website with a sleek and elegant design.  
- **Vercel/Render Deployment** – Ensured smooth and reliable hosting.  

## Why I Built This

Planning a wedding involves **a lot of logistics**, and I wanted to make it easier for both my partner and our guests.  
This website served as a **central hub** for all wedding-related information, making the experience seamless and enjoyable.  

It was also a fun way to apply my frontend development skills to something **personal and meaningful**.  



A personalized wedding website built with Next.js to share event details, RSVP management, and memorable moments.

Một trang web đám cưới cá nhân được xây dựng với Next.js để chia sẻ thông tin sự kiện, quản lý RSVP và những khoảnh khắc đáng nhớ.

Projects