Merge pull request #76 from pphatdev/feat-projects

Feat projects

Author: pphatdev

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", "Frontend"]
+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: "Sophat Leat"
+    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: "holbundit"
+    profile: "https://github.com/holbundit.png"
+    url: "https://github.com/holbundit"
+
+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)