Merge branch 'main' of https://github.com/pphatdev/pphat.netlify.app

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: ["eLibrary", "Website"]
+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

@@ -0,0 +1,104 @@
+---
+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"]
+languages: ["JavaScript", "Webpack", "TailwindCSS"]
+source:
+  - 
+    name: "source"
+    type: "source"
+    url: "https://github.com/pphatdev/elibrary-app"
+  - 
+    name: "demo"
+    type: "demo"
+    url: "https://ebooks.sophat.top"
+
+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/ebook.sophat.top/dark-1.webp" alt="Home page dark mode" className=""/>
+  <img src="/assets/projects/ebook.sophat.top/light-1.webp" alt="Home page light mode" className=""/>
+  <img src="/assets/projects/ebook.sophat.top/dark-2.webp" alt="Collection page dark mode" className=""/>
+  <img src="/assets/projects/ebook.sophat.top/light-2.webp" alt="Collection page light mode" className=""/>
+  <img src="/assets/projects/ebook.sophat.top/dark-3.webp" alt="Author profile page dark mode" className=""/>
+  <img src="/assets/projects/ebook.sophat.top/light-3.webp" alt="Author profile page light mode" className=""/>
+  <img src="/assets/projects/ebook.sophat.top/dark-4.webp" alt="Authors page dark mode" className=""/>
+  <img src="/assets/projects/ebook.sophat.top/light-4.webp" alt="Authors page light mode" className=""/>
+  <img src="/assets/projects/ebook.sophat.top/dark-5.webp" alt="Book details page dark mode" className=""/>
+  <img src="/assets/projects/ebook.sophat.top/light-5.webp" alt="Book details page light mode" className=""/>
+  <img src="/assets/projects/ebook.sophat.top/dark-6.webp" alt="About page dark mode" className=""/>
+  <img src="/assets/projects/ebook.sophat.top/light-6.webp" alt="About page light mode" className=""/>
+</div>
+
+<br/>
+
+# ✨ **About Project**
+
+eLibrary App is a modern, full-featured digital library website built for educational use and real-world frontend practice.
+It implements a multi-page architecture with Home, Collection, Authors, Book Details, About, and custom 404 pages.
+The project combines component-based JavaScript modules, dynamic API-powered content, and optimized media delivery with lazy loading and srcset support.
+With responsive layouts and dark/light theme persistence, it demonstrates production-oriented UI engineering with maintainable structure and performance-minded implementation.
+
+# 🛠️ **Project Tech Stack**
+
+- **Core:**
+  - JavaScript (ES6 Modules)
+  - HTML5
+  - CSS3
+  - Webpack
+
+- **UI & Styling:**
+  - TailwindCSS v4
+  - Custom reusable UI components
+  - Responsive multi-page layouts
+  - Dark/Light mode theme system
+
+- **Architecture:**
+  - Component-based rendering
+  - Multi-entry Webpack build setup
+  - Page-based templates
+  - Modular utility libraries
+
+- **Features & Utilities:**
+  - External API integration (`https://api.sophat.top`)
+  - Global search modal
+  - Category filtering and pagination
+  - Skeleton loading states
+  - Image optimization with `srcset`, lazy loading, and WebP support
+
+- **Development:**
+  - Webpack Dev Server (HMR)
+  - PostCSS
+  - Content hashing and code splitting
+
+# 🌈 **Project Features**
+
+- Multi-page eLibrary experience
+- Book catalog browsing with filtering
+- Author listing and author profile pages
+- Detailed book page with related recommendations
+- Global search modal with real-time interactions
+- Dark mode and light mode support
+- Accessible semantic structure with ARIA support
+- Responsive design across desktop and mobile
+- Optimized images and loading skeletons
+
+
+# 💻 **Preview**
+
+Here is the screenshot preview:
+
+![elibrary-app](/assets/projects/ebook.sophat.top/dark-1.webp)
+![elibrary-app](/assets/projects/ebook.sophat.top/light-1.webp)

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

@@ -0,0 +1,94 @@
+---
+title: "eLibrary of Nintrea"
+slug: "elibrary-of-nintrea"
+description: "A Khmer digital library website that curates educational articles, grammar references, literature, technology lessons, and multimedia content in a responsive Blogger experience."
+image: "/assets/projects/elibrary-of-nintrea.blogspot.com/cover.webp"
+tags: ["Blog", "Library"]
+languages: ["XML", "JavaScript", "CSS"]
+source:
+  -
+    name: "demo"
+    type: "demo"
+    url: "https://elibrary-of-nintrea.blogspot.com"
+
+authors:
+  -
+    name: "pphatdev"
+    profile: "https://github.com/pphatdev.png"
+    url: "https://github.com/pphatdev"
+  -
+    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"
+---
+
+---
+
+<div class="blog-gallery" data-layout="snap" data-captions="true">
+  <img src="/assets/projects/elibrary-of-nintrea.blogspot.com/dark-1.webp" alt="Home page dark mode" className=""/>
+  <img src="/assets/projects/elibrary-of-nintrea.blogspot.com/light-1.webp" alt="Home page light mode" className=""/>
+  <img src="/assets/projects/elibrary-of-nintrea.blogspot.com/dark-2.webp" alt="Article page dark mode" className=""/>
+  <img src="/assets/projects/elibrary-of-nintrea.blogspot.com/light-2.webp" alt="Article page light mode" className=""/>
+</div>
+
+<br/>
+
+# ✨ **About Project**
+
+eLibrary of Nintrea is a Khmer educational website built to collect and publish useful learning materials for students, parents, and teachers.
+The site organizes Khmer grammar, literature, folklore, school resources, technology guides, audio, video, and cultural references into a clean article-driven browsing experience.
+It includes a featured hero section, article cards, category and label navigation, popular content widgets, and both dark and light themes for comfortable reading.
+As a Blogger-based content platform, it focuses on accessible publishing and long-form educational content with a layout that works across desktop and mobile screens.
+
+# 🛠️ **Project Tech Stack**
+
+- **Core:**
+  - Blogger
+  - HTML
+  - XML
+  - CSS
+  - JavaScript
+
+- **UI & Content:**
+  - Custom Blogger Theme
+  - Responsive Multi-column Layout
+  - Featured Post Hero Section
+  - Label and Category Navigation
+  - Sidebar Widgets
+
+- **Content Strategy:**
+  - Khmer Language Articles
+  - Grammar References
+  - Folk Tales and Literature
+  - Educational Resources
+  - Technology Tutorials
+  - Audio and Video Content
+
+- **Features & Utilities:**
+  - Dark and Light Mode
+  - Search and Archive Browsing
+  - GitHub Follow Link
+  - Popular and Recent Post Modules
+  - Mobile-friendly Navigation
+
+# 🌈 **Project Features**
+
+- Featured article hero section
+- Khmer grammar and language resources
+- Literature, folklore, and cultural content
+- Technology and software tutorial posts
+- Sidebar widgets for recent and popular posts
+- Category and label-based browsing
+- Dark mode and light mode support
+- Responsive layout for desktop and mobile
+
+
+# 💻 **Preview**
+
+Here is the screenshot preview:
+
+![elibrary-of-nintrea](/assets/projects/elibrary-of-nintrea.blogspot.com/dark-full.webp)
+![elibrary-of-nintrea](/assets/projects/elibrary-of-nintrea.blogspot.com/light-full.webp)