Merge pull request #77 from pphatdev/feat-projects

Feat projects

Author: pphatdev

content/projects/blog-leatsophat-vercel-app/index.mdx

@@ -0,0 +1,84 @@
+---
+title: "blog-leatsophat.vercel.app"
+slug: "blog-leatsophat-vercel-app"
+description: "A personal blogging platform featuring tutorials, articles, and media-rich posts, built as a modern web publishing experience."
+image: "/assets/projects/blog-leatsophat.vercel.app/dark-1.webp"
+tags: ["Blog", "Tutorial", "Portfolio"]
+languages: ["Laravel", "React", "TailwindCSS"]
+source:
+  - 
+    name: "source"
+    type: "source"
+    url: "https://github.com/pphatdev/post"
+  - 
+    name: "demo"
+    type: "demo"
+    url: "https://blog-leatsophat.vercel.app"
+
+authors:
+  - 
+    name: "PPhat Dev"
+    profile: "https://github.com/pphatdev.png"
+    url: "https://github.com/pphatdev"
+
+published: true
+createdAt: "2026-03-16T10:12:15.648Z"
+---
+
+---
+
+<div class="blog-gallery" data-layout="snap" data-captions="true">
+  <img src="/assets/projects/blog-leatsophat.vercel.app/dark-1.webp" alt="Home page dark mode" className=""/>
+  <img src="/assets/projects/blog-leatsophat.vercel.app/light-1.webp" alt="Home page light mode" className=""/>
+  <img src="/assets/projects/blog-leatsophat.vercel.app/dark-2.webp" alt="Tutorial listing dark mode" className=""/>
+  <img src="/assets/projects/blog-leatsophat.vercel.app/light-2.webp" alt="Tutorial listing light mode" className=""/>
+  <img src="/assets/projects/blog-leatsophat.vercel.app/dark-3.webp" alt="Blog listing dark mode" className=""/>
+  <img src="/assets/projects/blog-leatsophat.vercel.app/light-3.webp" alt="Blog listing light mode" className=""/>
+  <img src="/assets/projects/blog-leatsophat.vercel.app/dark-4.webp" alt="Post details dark mode" className=""/>
+  <img src="/assets/projects/blog-leatsophat.vercel.app/light-4.webp" alt="Post details light mode" className=""/>
+  <img src="/assets/projects/blog-leatsophat.vercel.app/dark-5.webp" alt="Tag page dark mode" className=""/>
+  <img src="/assets/projects/blog-leatsophat.vercel.app/light-5.webp" alt="Tag page light mode" className=""/>
+  <img src="/assets/projects/blog-leatsophat.vercel.app/dark-6.webp" alt="Content section dark mode" className=""/>
+  <img src="/assets/projects/blog-leatsophat.vercel.app/light-6.webp" alt="Content section light mode" className=""/>
+</div>
+
+<br/>
+
+# ✨ About Project
+
+blog-leatsophat.vercel.app is a personal blog platform used to publish tutorials, technical notes, and media-rich content.
+The site presents categorized sections such as tutorials, blogs, memories, and entertainment, with a homepage focused on latest updates.
+It is designed for simple reading workflows, fast navigation between tags and posts, and a clean writing-first experience.
+
+# 🛠️ Project Tech Stack
+
+- ⚙️ Core:
+  - Laravel
+  - React
+  - JavaScript
+
+- 🎨 UI and Styling:
+  - TailwindCSS
+  - Responsive layout patterns
+  - Dark and light mode presentation
+
+- 📝 Content and Publishing:
+  - Tag-based organization
+  - Multi-section content feeds
+  - Image-first article support
+
+# 🌈 Project Features
+
+- Homepage with latest tutorials and blogs
+- Multi-section publishing (tutorial, blog, memories, entertainment)
+- Tag-based navigation and filtering
+- Readable post detail pages
+- Responsive design for desktop and mobile
+- Light and dark mode screenshots for core pages
+
+# 💻 Preview
+
+Here is the screenshot preview 📸:
+
+![blog-leatsophat](/assets/projects/blog-leatsophat.vercel.app/dark-full.webp)
+![blog-leatsophat](/assets/projects/blog-leatsophat.vercel.app/light-full.webp)

content/projects/ebook-nintrea-top/index.mdx

@@ -0,0 +1,84 @@
+---
+title: "eLibrary (Nintrea)"
+slug: "ebook-nintrea-top"
+description: "A Khmer-focused digital eLibrary web app for browsing categories, viewing book details, and reading content with a responsive Next.js interface."
+image: "/assets/projects/ebooks.nintrea.top/light-1.webp"
+tags: ["Library", "Education", "Khmer"]
+languages: ["Next.js", "TypeScript", "TailwindCSS", "Supabase"]
+source:
+  - 
+    name: "source"
+    type: "source"
+    url: "https://github.com/nintrealab/elibrary"
+  - 
+    name: "demo"
+    type: "demo"
+    url: "https://ebooks.nintrea.top"
+
+authors:
+  - 
+    name: "PPhat Dev"
+    profile: "https://github.com/pphatdev.png"
+    url: "https://github.com/pphatdev"
+  - 
+    name: "Nintrea Lab"
+    profile: "https://github.com/nintrealab.png"
+    url: "https://github.com/nintrealab"
+
+published: true
+createdAt: "2026-03-16T10:12:15.648Z"
+---
+
+<div class="blog-gallery" data-layout="snap" data-captions="true">
+  <img src="/assets/projects/ebooks.nintrea.top/light-1.webp" alt="eLibrary home page" className=""/>
+  <img src="/assets/projects/ebooks.nintrea.top/light-2.webp" alt="eLibrary content page" className=""/>
+</div>
+
+<br/>
+
+# ✨ **About Project**
+
+eLibrary (Nintrea) is a web-based digital reading platform focused on Khmer educational and literary content.
+It provides structured category browsing, searchable book listings, detailed book pages, and an integrated reader experience in a clean sidebar-driven interface.
+The project is built with Next.js and modern component patterns to support responsive layouts, reusable UI blocks, and progressive expansion toward a full online library system.
+
+# 🛠️ **Project Tech Stack**
+
+- **Core:**
+  - Next.js
+  - React
+  - TypeScript
+
+- **UI & Styling:**
+  - TailwindCSS
+  - Shadcn-style UI components
+  - Lucide icons
+  - Radix primitives
+
+- **Data & Backend Integration:**
+  - Supabase client setup
+  - Database typing for books, authors, genres, members, and loans
+  - Structured content models for category and book metadata
+
+- **Features & Utilities:**
+  - Sidebar navigation with breadcrumbs
+  - Category and book listing pages
+  - Search inputs and filtering controls
+  - PDF reader integration for in-app viewing
+  - Loading and transition enhancements
+
+# 🌈 **Project Features**
+
+- Khmer-focused digital library experience
+- Book category browsing and detail views
+- Breadcrumb-based navigation for deep pages
+- Responsive layout for desktop and mobile
+- Integrated PDF reader for online reading
+- Expandable architecture for library data workflows
+
+# 💻 **Preview**
+
+Here is the screenshot preview:
+
+![elibrary-nintrea](/assets/projects/ebooks.nintrea.top/light-1.webp)
+![elibrary-nintrea](/assets/projects/ebooks.nintrea.top/light-2.webp)

content/projects/ebook-sophat/index.mdx

@@ -3,7 +3,7 @@ title: "eBook of Sophat (Assignment Y1)"
 slug: "ebook-sophat"
 description: "A modern multi-page eLibrary web application with book catalog browsing, author profiles, advanced search, and responsive dark/light themed UI."
 image: "/assets/projects/ebook.sophat.top/light-1.webp"
-tags: ["Library", "Education", "Frontend"]
+tags: ["Library", "Education"]
 languages: ["JavaScript", "Webpack", "TailwindCSS"]
 source:
   - 
@@ -17,7 +17,7 @@ source:
 
 authors:
   - 
-    name: "Sophat Leat"
+    name: "PPhat Dev"
     profile: "https://github.com/pphatdev.png"
     url: "https://github.com/pphatdev"
 

content/projects/elibrary-of-nintrea/index.mdx

@@ -17,9 +17,9 @@ authors:
     profile: "https://github.com/pphatdev.png"
     url: "https://github.com/pphatdev"
   -
-    name: "holbundit"
-    profile: "https://github.com/holbundit.png"
-    url: "https://github.com/holbundit"
+    name: "SVA-bundittt"
+    profile: "https://github.com/SVA-bundittt.png"
+    url: "https://github.com/SVA-bundittt"
 
 published: true
 createdAt: "2026-03-16T10:12:15.648Z"

content/projects/king-mart-shop/index.mdx

@@ -0,0 +1,84 @@
+---
+title: "King Mart Shop"
+slug: "king-mart-shop"
+description: "An online shopping platform for King Mart Cambodia, featuring product discovery, category browsing, promotions, account tools, and mobile app access for everyday retail customers."
+image: "/assets/projects/king-mart.shop/light-1.webp"
+tags: ["E-commerce", "Retail", "Online Shopping"]
+languages: ["Laravel", "JavaScript", "TailwindCSS"]
+source:
+  - 
+    name: "demo"
+    type: "demo"
+    url: "https://king-mart.shop"
+
+authors:
+  - 
+    name: "PPhat Dev"
+    profile: "https://github.com/pphatdev.png"
+    url: "https://github.com/pphatdev"
+  - 
+    name: "Hoeun Pichet"
+    profile: "https://github.com/HoeunPichet.png"
+    url: "https://github.com/HoeunPichet"
+
+published: true
+createdAt: "2026-03-16T10:12:15.648Z"
+---
+
+<div class="blog-gallery" data-layout="snap" data-captions="true">
+  <img src="/assets/projects/king-mart.shop/light-1.webp" alt="Home page hero and product slider" className=""/>
+  <img src="/assets/projects/king-mart.shop/light-2.webp" alt="Featured products section" className=""/>
+  <img src="/assets/projects/king-mart.shop/light-3.webp" alt="Category and product listing section" className=""/>
+  <img src="/assets/projects/king-mart.shop/light-4.webp" alt="Retail product cards and promotions" className=""/>
+  <img src="/assets/projects/king-mart.shop/light-5.webp" alt="Information and policy links section" className=""/>
+  <img src="/assets/projects/king-mart.shop/light-6.webp" alt="Footer and mobile app promotion section" className=""/>
+</div>
+
+<br/>
+
+# ✨ **About Project**
+
+king-mart.shop is an e-commerce website built for King Mart Cambodia to support everyday online shopping and digital retail browsing.
+The platform highlights product promotions, category discovery, product detail access, customer account areas, and support or policy links in a storefront-style interface.
+It is designed to help customers browse items quickly, explore deals, and move from discovery to purchase with a mobile-friendly shopping flow.
+
+# 🛠️ **Project Tech Stack**
+
+- **Core:**
+  - JavaScript
+  - HTML5
+  - CSS3
+
+- **UI & Styling:**
+  - Responsive storefront layout
+  - Product card grid and promotional banners
+  - Branded e-commerce interface components
+
+- **Architecture:**
+  - Multi-page shopping experience
+  - Category-based navigation
+  - Product detail and account page flow
+
+- **Features & Utilities:**
+  - Product discovery and featured listings
+  - Category browsing and promotional sections
+  - Customer account and order-related navigation
+  - Policy, FAQ, and contact information pages
+  - Mobile app installation links
+
+# 🌈 **Project Features**
+
+- E-commerce home page with promotions and featured products
+- Category-driven shopping flow
+- Product detail pages with pricing and purchase actions
+- Information, FAQ, policy, and contact pages
+- Social media and customer support connectivity
+- Mobile-friendly browsing across retail sections
+
+
+# 💻 **Preview**
+
+Here is the screenshot preview:
+
+![king-mart-home](/assets/projects/king-mart.shop/home-full.webp)
+![king-mart-detail](/assets/projects/king-mart.shop/detail-full.webp)

content/projects/maskify/index.mdx

@@ -0,0 +1,94 @@
+---
+title: "Maskify"
+slug: "maskify"
+description: "A browser-based image masking tool for uploading masks and images, previewing results instantly on canvas, and exporting the final composition."
+image: "/assets/projects/maskify.pphat.top/dark-1.webp"
+tags: ["Image Tool", "Photo Editing", "Web App"]
+languages: ["Next.js", "TypeScript", "TailwindCSS", "React"]
+source:
+  - 
+    name: "source"
+    type: "source"
+    url: "https://github.com/pphatlabs/maskify"
+  - 
+    name: "demo"
+    type: "demo"
+    url: "https://maskify.pphat.top"
+
+authors:
+  - 
+    name: "PPhat Dev"
+    profile: "https://github.com/pphatdev.png"
+    url: "https://github.com/pphatdev"
+  - 
+    name: "PPhat Labs"
+    profile: "https://github.com/pphatlabs.png"
+    url: "https://github.com/pphatlabs"
+
+published: true
+createdAt: "2026-03-16T10:12:15.648Z"
+---
+
+<div class="blog-gallery" data-layout="snap" data-captions="true">
+  <img src="/assets/projects/maskify.pphat.top/dark-1.webp" alt="Maskify home screen dark mode" className=""/>
+  <img src="/assets/projects/maskify.pphat.top/light-1.webp" alt="Maskify home screen light mode" className=""/>
+  <img src="/assets/projects/maskify.pphat.top/dark-2.webp" alt="Mask gallery dark mode" className=""/>
+  <img src="/assets/projects/maskify.pphat.top/light-2.webp" alt="Mask gallery light mode" className=""/>
+  <img src="/assets/projects/maskify.pphat.top/dark-3.webp" alt="Image gallery dark mode" className=""/>
+  <img src="/assets/projects/maskify.pphat.top/light-3.webp" alt="Image gallery light mode" className=""/>
+  <img src="/assets/projects/maskify.pphat.top/dark-4.webp" alt="Canvas export workflow dark mode" className=""/>
+</div>
+
+<br/>
+
+# ✨ **About Project**
+
+Maskify is a focused web tool for quick image masking directly in the browser.
+Users can upload a mask, upload an image, preview the composition in real time, and download the final masked output.
+The app is designed for speed and simplicity, with a clean mobile-friendly interface and no account requirement.
+It also keeps uploaded mask and image items in browser session storage so the workflow feels seamless while editing.
+
+# 🛠️ **Project Tech Stack**
+
+- **Core:**
+  - Next.js
+  - React
+  - TypeScript
+
+- **UI & Styling:**
+  - TailwindCSS
+  - Radix UI Icons
+  - next-themes (light/dark mode)
+
+- **Canvas & Processing:**
+  - HTML Canvas 2D API
+  - Composite masking via `destination-in`
+  - Client-side PNG export
+
+- **Architecture:**
+  - App Router structure
+  - API routes for loading example masks/images
+  - Session storage for uploaded assets
+
+# 🌈 **Project Features**
+
+- Upload custom masks and apply them instantly
+- Upload custom images and keep them in the current browser session
+- Preview masked output in real time on a canvas
+- Built-in dark mode and light mode interface
+- Fast, single-page workflow optimized for desktop and mobile
+- One-click export of the final masked image
+
+# 💻 **How It Works**
+
+1. Upload or pick a mask from the mask gallery.
+2. Upload or pick an image from the image gallery.
+3. The app draws the image and applies the mask using canvas compositing.
+4. Download the generated result as an image file.
+
+# 💻 **Preview**
+
+Here is the screenshot preview:
+
+![maskify-dark](/assets/projects/maskify.pphat.top/dark-1.webp)
+![maskify-light](/assets/projects/maskify.pphat.top/light-1.webp)