About the Project: MindShelf is a modern online bookstore built with vanilla JavaScript using a component-based architecture. Each section is a separate JS module, making the code clean, organized, and easy to maintain — a strong example of structured frontend development.
Key Highlights: Component-based structure, interactive product filters, mobile-responsive layout, smooth scroll animations, and a sticky header — all built without any framework.
- Header — Sticky navigation with mobile menu and search bar.
- Hero Section — Full-width banner with headline and call-to-action button.
- Feature Section — Four cards highlighting store benefits and services.
- Featured Collections — Grid of handpicked books with hover action buttons.
- Special Offer — Promotional section with a countdown timer display.
- Popular Collections — Filterable book list with category toggle buttons.
- Blog Section — Scrollable cards with post images, dates, and summaries.
- Footer — Brand info, navigation links, social icons, and payment methods.
- Back to Top — Fixed button that appears after scrolling down the page.
- Component-Based Architecture — Each section is a separate, reusable JavaScript module.
- Product Filter — Filter books by category using interactive toggle buttons.
- Sticky Header — Header locks to the top with smooth slide-in animation on scroll.
- Mobile Navigation — Slide-in sidebar menu with overlay for smaller screens.
- Hover Interactions — Product cards reveal action buttons with smooth transitions.
- Countdown Timer UI — Static countdown display styled for the special offer section.
- Responsive Design — Fully responsive layout across mobile, tablet, and desktop screens.
- Back to Top Button — Appears on scroll and smoothly returns to the top of the page.
- HTML5 — Semantic structure with section root divs for JS rendering.
- CSS3 — Custom properties, animations, and a mobile-first responsive layout.
- JavaScript (ES6+) — Modular components using ES modules and DOM manipulation.
- Ionicons — Icon library used for UI icons throughout the project.
- Google Fonts — Jost and Work Sans fonts for clean, modern typography.
mind-shelf/
│
├── index.html # Main HTML with section root divs
│
├── assets/
│ ├── css/
│ │ └── style.css # Complete styles, animations, and responsive design
│ │
│ ├── js/
│ │ ├── app.js # Main entry point, imports all components
│ │ ├── header.js # Header component with navigation and mobile menu
│ │ ├── hero.js # Hero banner component
│ │ ├── feature.js # Feature cards component
│ │ ├── featured.js # Featured collection component
│ │ ├── offer.js # Special offer countdown component
│ │ ├── popular.js # Popular collection with filter logic
│ │ ├── blog.js # Blog section component
│ │ ├── footer.js # Footer component
│ │ └── backTop.js # Back to top button component
│ │
│ └── images/ # Hero banners, product images, blog photos, icons, backgrounds
│
└── README.md # Project documentation
-
Clone the repository:
git clone https://github.com/nawazdevx/mind-shelf.git
<li>
<strong>Open the project:</strong>
<ul>
<li>Open <code>index.html</code> directly in your browser</li>
<li>Or run a local server:</li>
</ul>
<pre><code>python -m http.server 3000</code></pre>
Then visit <code>http://localhost:3000</code>
</li>
<li>
<strong>Start Customizing:</strong>
<ul>
<li>Update book titles, prices, and images in <code>featured.js</code> and <code>popular.js</code></li>
<li>Edit blog post content and images in <code>blog.js</code></li>
<li>Change colors and typography using CSS variables in <code>style.css</code></li>
<li>Update navigation links and brand name in <code>header.js</code> and <code>footer.js</code></li>
<li>Replace hero text and banner image in <code>hero.js</code></li>
</ul>
</li>
</ol>
License: This project is licensed under the MIT License.
Contact: Connect with me on LinkedIn or visit my Portfolio.
Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.
