feat: add eLibrary (Nintrea) project details and media assets

Author: pphatdev

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)

public/assets/projects/ebooks.nintrea.top/light-1.webp

@@ -141,7 +141,7 @@ const PostsContent = () => {
                         <div className="flex flex-wrap max-sm:justify-center items-center gap-1.5">
                             <p className="text-xs font-medium">Tag: </p>
                             <Button
-                                className={cn("mt-0 py-1 sm:py-2 px-2.5 !h-fit text-xs leading-4 text-foreground/80 hover:text-primary transition-all", !selectedTag && "ring-1 !px-4 bg-primary/5 text-primary")}
+                                className={cn("mt-0 py-1 sm:py-2 px-2.5 h-fit! text-xs leading-4 text-foreground/80 hover:text-primary transition-all", !selectedTag && "ring-1 px-4! bg-primary/5 text-primary")}
                                 onClick={() => handleTagChange("")}
                                 aria-pressed={!selectedTag}
                             >
@@ -156,7 +156,7 @@ const PostsContent = () => {
                                         type="button"
                                         onClick={() => handleTagChange(isActive ? "" : tag)}
                                         className={cn(
-                                            "mt-0 py-1 sm:py-2 px-2.5 !h-fit text-xs leading-4 text-foreground/80 hover:text-primary transition-all",
+                                            "mt-0 py-1 sm:py-2 px-2.5 h-fit! text-xs leading-4 text-foreground/80 hover:text-primary transition-all",
                                             isActive && "ring-1 bg-primary/5 text-primary"
                                         )}
                                         aria-pressed={isActive}
@@ -176,7 +176,7 @@ const PostsContent = () => {
                         </p>
                     </div>
                 )} */}
-                <article className="grid max-w-5xl mx-auto p-5 grid-cols-1 xs:grid-cols-2 lg:grid-cols-3 gap-4 min-h-[300px] relative">
+                <article className="grid max-w-5xl mx-auto p-5 grid-cols-1 xs:grid-cols-2 lg:grid-cols-3 gap-4 min-h-75 relative">
                     {filteredPosts.map((post) => (<PostCard key={post.id || post.slug} post={post} />))}
                     {filteredPosts.length === 0 && (searchQuery || selectedTag) && (
                         <div className="col-span-full text-center py-12">
@@ -205,13 +205,12 @@ const Posts = () => {
         <Suspense fallback={
             <main className="w-full flex flex-col gap-7 pb-5">
                 <NavigationBar />
-                <div className="flex justify-center items-center min-h-[400px]">
+                <div className="flex justify-center items-center min-h-100">
                     <Spinner variant={'bars'} />
                 </div>
             </main>
         }>
-            <PostsContent />
-            <Footer />
+        <PostsContent />
         </Suspense>
     );
 };

public/assets/projects/ebooks.nintrea.top/light-2.webp

@@ -191,7 +191,6 @@ const ProjectsContent = () => {
                     </InfiniteScroll>
                 </article>
             </BlurFade>
-            <Footer />
         </main>
     );
 };
@@ -207,7 +206,7 @@ const Projects = () => {
                 </div>
             </main>
         }>
-            <ProjectsContent />
+        <ProjectsContent />
         </Suspense>
     );
 };