https://github.com/adithya17-star/modern-techstore
Modern, responsive e-commerce website for tech products with glassmorphism design
https://github.com/adithya17-star/modern-techstore
ecommerce frontend github-pages glassmorphism html-css-javascript javascript modern-ui portfolio-project responsive-design shopping-cart tech-store web-development
Last synced: about 1 year ago
JSON representation
Modern, responsive e-commerce website for tech products with glassmorphism design
- Host: GitHub
- URL: https://github.com/adithya17-star/modern-techstore
- Owner: Adithya17-star
- License: mit
- Created: 2025-06-28T06:30:39.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-28T07:19:23.000Z (about 1 year ago)
- Last Synced: 2025-06-28T07:32:42.404Z (about 1 year ago)
- Topics: ecommerce, frontend, github-pages, glassmorphism, html-css-javascript, javascript, modern-ui, portfolio-project, responsive-design, shopping-cart, tech-store, web-development
- Language: HTML
- Homepage: https://adithya17-star.github.io/modern-techstore/
- Size: 27.3 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Modern TechStore
A fully responsive, modern e-commerce website built with HTML, CSS, and vanilla JavaScript. Features a clean design with glassmorphism effects, smooth animations, and complete shopping cart functionality.
## 🚀 Live Demo
[View Live Website](https://Adithya17-star.github.io/modern-techstore)
## ✨ Features
- **Responsive Design** - Works seamlessly on desktop, tablet, and mobile devices
- **Modern UI/UX** - Glassmorphism effects, gradient backgrounds, and smooth animations
- **Shopping Cart** - Full cart functionality with add/remove items and quantity controls
- **Product Catalog** - Dynamic product grid with detailed information
- **Interactive Elements** - Hover effects, loading animations, and smooth scrolling
- **Performance Optimized** - Fast loading with minimal dependencies
## 🛠 Technologies Used
- **HTML5** - Semantic markup and structure
- **CSS3** - Modern styling with Grid, Flexbox, and animations
- **JavaScript (ES6+)** - Dynamic functionality and cart management
- **Font Awesome** - Icons for enhanced UI
## 📱 Responsive Breakpoints
- Desktop: 1200px and above
- Tablet: 768px - 1199px
- Mobile: Below 768px
## 🎨 Color Scheme
- Primary Gradient: `#667eea` to `#764ba2`
- Accent Gradient: `#ff6b6b` to `#ee5a24`
- Background: `#667eea` to `#764ba2`
- Text: `#333333`
## 📦 Installation & Setup
1. Clone the repository:
```bash
git clone https://github.com/Adithya17-star/modern-techstore.git
```
2. Navigate to the project directory:
```bash
cd modern-techstore
```
3. Open `index.html` in your browser or use a live server
## 🌐 GitHub Pages Deployment
1. Go to your repository settings
2. Scroll down to "Pages" section
3. Select "Deploy from a branch"
4. Choose "main" branch and "/ (root)" folder
5. Your site will be available at `https://Adithya17-star.github.io/modern-techstore`
## 🛍 Product Management
To add or modify products, edit the `products` array in the JavaScript section:
```javascript
const products = [
{
id: 1,
name: "Product Name",
price: 99.99,
description: "Product description",
icon: "🛍️"
}
// Add more products...
];
```
## 🎯 Browser Support
- Chrome 70+
- Firefox 65+
- Safari 12+
- Edge 79+
## 📝 License
This project is open source and available under the [MIT License](LICENSE).
## 🤝 Contributing
1. Fork the project
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 📧 Contact
Adithya Kakarla - adithyakakarla123@gmail.com
Project Link: [https://github.com/Adithya17-star/modern-techstore](https://github.com/Adithya17-star/modern-techstore)
## 🙏 Acknowledgments
- Font Awesome for icons
- Inspiration from modern e-commerce platforms
- CSS gradients and glassmorphism design trends