Back to Templates
Minimal Gallery
A clean, minimalist gallery template that showcases artwork with simple navigation and spacious layout. Perfect for displaying creative collections professionally.
Nimmal Gallery
Nimmal Gallery is a modern image showcase website template built with Next.js. It provides an elegant interface to display your photography works, supporting category display, album management, and responsive design.
Quick Deploy
You can quickly deploy to Tencent Cloud EdgeOne using the button below:
Live Demo
๐ Online Preview: https://minimal-gallery.edgeone.app/
Website Content Configuration
Homepage Content
- Navigate to
app/config/home.json
- Modify the content according to your needs:
{ "hero": { "title": "Your Title", "subtitle": "Your Subtitle", "description": "Your Description", "cta": { "primary": "Primary Button Text", "secondary": "Secondary Button Text" }, "backgroundImage": "/images/hero-bg.jpg" }, "featuredCollections": [ { "id": "collection-1", "title": "Collection Title", "description": "Collection Description", "image": "/images/collection-1.jpg", "link": "/gallery/category" } ], "services": [ { "id": "service-1", "title": "Service Title", "description": "Service Description", "icon": "icon-name" } ], "testimonials": [ { "id": "testimonial-1", "content": "Testimonial Content", "author": "Author Name", "role": "Author Role" } ] }
Gallery Content
- Navigate to
app/config/gallery.json
- Modify the content according to your needs:
{ "categories": { "nature": { "title": "Nature", "description": "Nature Photography Collection", "albums": [ { "id": "nature-1", "title": "Mountain Majesty", "description": "Capturing the majestic beauty of mountain landscapes", "coverImage": "/images/gallery/nature/your-image.jpg", "photoCount": 4, "createdAt": "2024-03-15", "photos": [ { "id": "photo-1", "url": "/images/gallery/nature/photo1.jpg", "title": "Photo Title", "description": "Photo Description" } ] } ] } } }
Image Resources
Download Default Images
- Visit Unsplash to download your preferred images
- Place the images in the
public/images/gallery
directory following this structure:public/images/gallery/ โโโ nature/ โโโ urban/ โโโ travel/ โโโ architecture/
Project Structure
nimmal-gallery/
โโโ app/ # Next.js application directory
โ โโโ components/ # Reusable components
โ โโโ config/ # Configuration files
โ โโโ gallery/ # Gallery related pages
โ โโโ types/ # TypeScript type definitions
โ โโโ utils/ # Utility functions
โโโ public/ # Static assets
โ โโโ images/ # Image resources
โโโ out/ # Build output directory
Local Development
-
Clone the repository
git clone https://github.com/tomcomtang/nimmal-gallery.git cd nimmal-gallery
-
Install dependencies
npm install
-
Start development server
npm run dev
-
Build the project
npm run build
-
Preview the build
npm run start
Tech Stack
- Next.js 14
- React 18
- TypeScript
- Tailwind CSS
- ESLint
- Prettier
License
MIT License