feat: add eBook of Sophat project details and associated assets

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)