353 lines
8.9 KiB
Markdown
353 lines
8.9 KiB
Markdown
|
# Sky Art Shop - Website Structure & Sitemap
|
||
|
|
|
||
|
|
## 📂 Complete File Structure
|
||
|
|
|
||
|
|
```
|
||
|
|
Sky_Art_Shop/
|
||
|
|
│
|
||
|
|
├── 📄 index.html # Home page (Main landing page)
|
||
|
|
├── 📄 portfolio.html # Portfolio gallery page
|
||
|
|
├── 📄 shop.html # Product shop page
|
||
|
|
├── 📄 about.html # About us page
|
||
|
|
├── 📄 contact.html # Contact page
|
||
|
|
├── 📄 blog.html # Blog page
|
||
|
|
│
|
||
|
|
├── 📄 README.md # Project documentation
|
||
|
|
├── 📄 SETUP-GUIDE.md # Quick start guide
|
||
|
|
├── 📄 IMAGE-GUIDE.md # Image requirements
|
||
|
|
├── 📄 SITEMAP.md # This file
|
||
|
|
│
|
||
|
|
├── 📁 portfolio/ # Portfolio category pages
|
||
|
|
│ ├── 📄 displays.html # Displays category
|
||
|
|
│ ├── 📄 personal-craft-projects.html # Personal crafts category
|
||
|
|
│ ├── 📄 card-making.html # Card making category
|
||
|
|
│ └── 📄 scrapbook-albums.html # Scrapbook albums category
|
||
|
|
│
|
||
|
|
├── 📁 assets/ # All website assets
|
||
|
|
│ ├── 📁 css/
|
||
|
|
│ │ └── 📄 main.css # Main stylesheet (15KB)
|
||
|
|
│ │
|
||
|
|
│ ├── 📁 js/
|
||
|
|
│ │ └── 📄 main.js # Main JavaScript file
|
||
|
|
│ │
|
||
|
|
│ └── 📁 images/ # Image assets folder
|
||
|
|
│ ├── hero-craft.jpg # (Add your images here)
|
||
|
|
│ ├── craft-supplies.jpg
|
||
|
|
│ ├── 📁 products/ # Product images
|
||
|
|
│ ├── 📁 portfolio/ # Portfolio images
|
||
|
|
│ │ ├── 📁 displays/
|
||
|
|
│ │ ├── 📁 personal-crafts/
|
||
|
|
│ │ ├── 📁 card-making/
|
||
|
|
│ │ └── 📁 scrapbook-albums/
|
||
|
|
│ └── 📁 blog/ # Blog post images
|
||
|
|
│
|
||
|
|
└── 📁 includes/ # (Reserved for future partials)
|
||
|
|
```
|
||
|
|
|
||
|
|
## 🗺️ Visual Site Map
|
||
|
|
|
||
|
|
```
|
||
|
|
HOME (index.html)
|
||
|
|
|
|
||
|
|
┌─────────────┬───────────┼───────────┬──────────────┬──────────┐
|
||
|
|
| | | | | |
|
||
|
|
SHOP PORTFOLIO ABOUT CONTACT BLOG (More)
|
||
|
|
(shop.html) (portfolio.html) (about) (contact.html) (blog.html)
|
||
|
|
| |
|
||
|
|
| |
|
||
|
|
| ┌────┴────┬──────────────┬────────────────┐
|
||
|
|
| | | | |
|
||
|
|
| DISPLAYS PERSONAL CARD MAKING SCRAPBOOK
|
||
|
|
| (displays) CRAFTS (card-making) ALBUMS
|
||
|
|
| (personal-) (scrapbook-)
|
||
|
|
|
|
||
|
|
[Products]
|
||
|
|
```
|
||
|
|
|
||
|
|
## 📑 Page Inventory
|
||
|
|
|
||
|
|
### Main Pages (6)
|
||
|
|
|
||
|
|
1. **Home** (`index.html`) - Landing page
|
||
|
|
2. **Portfolio** (`portfolio.html`) - Work showcase
|
||
|
|
3. **Shop** (`shop.html`) - Products catalog
|
||
|
|
4. **About** (`about.html`) - Company info
|
||
|
|
5. **Contact** (`contact.html`) - Contact form
|
||
|
|
6. **Blog** (`blog.html`) - Blog posts
|
||
|
|
|
||
|
|
### Portfolio Category Pages (4)
|
||
|
|
|
||
|
|
7. **Displays** (`portfolio/displays.html`)
|
||
|
|
8. **Personal Craft Projects** (`portfolio/personal-craft-projects.html`)
|
||
|
|
9. **Card Making** (`portfolio/card-making.html`)
|
||
|
|
10. **Scrapbook Albums** (`portfolio/scrapbook-albums.html`)
|
||
|
|
|
||
|
|
**Total Pages: 10**
|
||
|
|
|
||
|
|
## 🧭 Navigation Structure
|
||
|
|
|
||
|
|
### Main Navigation Menu
|
||
|
|
|
||
|
|
```
|
||
|
|
┌────────────────────────────────────────────────────────┐
|
||
|
|
│ Sky Art Shop │
|
||
|
|
│ │
|
||
|
|
│ Home | Shop | Top Sellers | Promotion | Portfolio | │
|
||
|
|
│ Blog | About | Instagram | Contact | My Wishlist │
|
||
|
|
└────────────────────────────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
### Mobile Navigation
|
||
|
|
|
||
|
|
- Hamburger menu (☰)
|
||
|
|
- Slides in from left
|
||
|
|
- Same menu items
|
||
|
|
- Touch-friendly
|
||
|
|
|
||
|
|
## 🔗 Internal Links Map
|
||
|
|
|
||
|
|
### From Home Page
|
||
|
|
|
||
|
|
- → Shop (via buttons and nav)
|
||
|
|
- → Portfolio (via nav)
|
||
|
|
- → About (via nav)
|
||
|
|
- → Contact (via nav)
|
||
|
|
- → Blog (via nav)
|
||
|
|
- → Top Sellers (anchor link)
|
||
|
|
- → Promotion (anchor link)
|
||
|
|
|
||
|
|
### From Portfolio Page
|
||
|
|
|
||
|
|
- → Displays category
|
||
|
|
- → Personal Craft Projects category
|
||
|
|
- → Card Making category
|
||
|
|
- → Scrapbook Albums category
|
||
|
|
|
||
|
|
### From Category Pages
|
||
|
|
|
||
|
|
- ← Back to Portfolio (breadcrumb)
|
||
|
|
- → Individual project pages (future enhancement)
|
||
|
|
|
||
|
|
## 📊 Content Sections by Page
|
||
|
|
|
||
|
|
### Home Page Sections
|
||
|
|
|
||
|
|
1. Navigation Bar
|
||
|
|
2. Hero Section
|
||
|
|
3. Our Inspiration
|
||
|
|
4. Explore Collection
|
||
|
|
5. Promotion
|
||
|
|
6. Top Sellers
|
||
|
|
7. Footer
|
||
|
|
|
||
|
|
### Portfolio Page Sections
|
||
|
|
|
||
|
|
1. Navigation Bar
|
||
|
|
2. Hero Section
|
||
|
|
3. Portfolio Gallery (4 categories)
|
||
|
|
4. Footer
|
||
|
|
|
||
|
|
### Shop Page Sections
|
||
|
|
|
||
|
|
1. Navigation Bar
|
||
|
|
2. Hero Section
|
||
|
|
3. Filter Bar
|
||
|
|
4. Products Grid (12 products)
|
||
|
|
5. Footer
|
||
|
|
|
||
|
|
### About Page Sections
|
||
|
|
|
||
|
|
1. Navigation Bar
|
||
|
|
2. Hero Section
|
||
|
|
3. Our Story
|
||
|
|
4. What We Offer
|
||
|
|
5. Our Values
|
||
|
|
6. Footer
|
||
|
|
|
||
|
|
### Contact Page Sections
|
||
|
|
|
||
|
|
1. Navigation Bar
|
||
|
|
2. Hero Section
|
||
|
|
3. Contact Information
|
||
|
|
4. Contact Form
|
||
|
|
5. Footer
|
||
|
|
|
||
|
|
### Blog Page Sections
|
||
|
|
|
||
|
|
1. Navigation Bar
|
||
|
|
2. Hero Section
|
||
|
|
3. Blog Posts Grid (6 posts)
|
||
|
|
4. Footer
|
||
|
|
|
||
|
|
## 🎯 Call-to-Action (CTA) Buttons
|
||
|
|
|
||
|
|
### Primary CTAs
|
||
|
|
|
||
|
|
- "Shop Now" (Home hero → Shop page)
|
||
|
|
- "Add to Cart" (Shop page)
|
||
|
|
- "Send Message" (Contact form)
|
||
|
|
- "Read More" (Blog posts)
|
||
|
|
|
||
|
|
### Secondary CTAs
|
||
|
|
|
||
|
|
- "Message Us" (Promotion section)
|
||
|
|
- Portfolio category links
|
||
|
|
- Navigation menu items
|
||
|
|
|
||
|
|
## 📱 Responsive Breakpoints
|
||
|
|
|
||
|
|
```
|
||
|
|
Desktop: 1200px+ (Full layout)
|
||
|
|
Tablet: 768px (Adjusted grids)
|
||
|
|
Mobile: 480px (Stacked layout, hamburger menu)
|
||
|
|
```
|
||
|
|
|
||
|
|
## 🔍 SEO-Optimized URLs
|
||
|
|
|
||
|
|
### Recommended URL Structure (when hosted)
|
||
|
|
|
||
|
|
```
|
||
|
|
yourdomain.com/
|
||
|
|
yourdomain.com/shop
|
||
|
|
yourdomain.com/portfolio
|
||
|
|
yourdomain.com/portfolio/displays
|
||
|
|
yourdomain.com/portfolio/personal-craft-projects
|
||
|
|
yourdomain.com/portfolio/card-making
|
||
|
|
yourdomain.com/portfolio/scrapbook-albums
|
||
|
|
yourdomain.com/about
|
||
|
|
yourdomain.com/contact
|
||
|
|
yourdomain.com/blog
|
||
|
|
```
|
||
|
|
|
||
|
|
## 🎨 Page Templates
|
||
|
|
|
||
|
|
### Template A: Content Page
|
||
|
|
|
||
|
|
Used by: About
|
||
|
|
|
||
|
|
- Hero section
|
||
|
|
- Content grid
|
||
|
|
- Images
|
||
|
|
|
||
|
|
### Template B: Gallery Page
|
||
|
|
|
||
|
|
Used by: Portfolio, Portfolio Categories
|
||
|
|
|
||
|
|
- Hero section
|
||
|
|
- Grid layout
|
||
|
|
- Image cards with overlays
|
||
|
|
|
||
|
|
### Template C: E-commerce Page
|
||
|
|
|
||
|
|
Used by: Shop
|
||
|
|
|
||
|
|
- Hero section
|
||
|
|
- Filter bar
|
||
|
|
- Product grid
|
||
|
|
|
||
|
|
### Template D: Form Page
|
||
|
|
|
||
|
|
Used by: Contact
|
||
|
|
|
||
|
|
- Hero section
|
||
|
|
- Two-column layout
|
||
|
|
- Form + information
|
||
|
|
|
||
|
|
## 🔄 User Flows
|
||
|
|
|
||
|
|
### Flow 1: Browse & Shop
|
||
|
|
|
||
|
|
```
|
||
|
|
Home → Shop → [Filter/Sort] → Add to Cart → (Future: Checkout)
|
||
|
|
```
|
||
|
|
|
||
|
|
### Flow 2: Explore Portfolio
|
||
|
|
|
||
|
|
```
|
||
|
|
Home → Portfolio → Category Page → (Future: Project Details)
|
||
|
|
```
|
||
|
|
|
||
|
|
### Flow 3: Contact
|
||
|
|
|
||
|
|
```
|
||
|
|
Any Page → Contact → Fill Form → Submit
|
||
|
|
```
|
||
|
|
|
||
|
|
### Flow 4: Learn More
|
||
|
|
|
||
|
|
```
|
||
|
|
Home → About → (Optional: Blog) → Contact
|
||
|
|
```
|
||
|
|
|
||
|
|
## 📈 Future Expansion Areas
|
||
|
|
|
||
|
|
### Potential New Pages
|
||
|
|
|
||
|
|
1. Product detail pages
|
||
|
|
2. Individual project pages
|
||
|
|
3. Shopping cart page
|
||
|
|
4. Checkout page
|
||
|
|
5. User account pages
|
||
|
|
6. Blog post detail pages
|
||
|
|
7. Privacy policy page
|
||
|
|
8. Terms of service page
|
||
|
|
9. FAQ page
|
||
|
|
10. Testimonials page
|
||
|
|
|
||
|
|
### Potential New Features
|
||
|
|
|
||
|
|
1. Search functionality
|
||
|
|
2. Product reviews
|
||
|
|
3. Wishlist functionality
|
||
|
|
4. Newsletter signup
|
||
|
|
5. Live chat
|
||
|
|
6. Social media feed integration
|
||
|
|
7. Image lightbox/gallery viewer
|
||
|
|
8. Video content
|
||
|
|
9. Customer login area
|
||
|
|
10. Order tracking
|
||
|
|
|
||
|
|
## 🎯 Key Pages by User Intent
|
||
|
|
|
||
|
|
### Discovery
|
||
|
|
|
||
|
|
- Home
|
||
|
|
- Portfolio
|
||
|
|
- Blog
|
||
|
|
|
||
|
|
### Shopping
|
||
|
|
|
||
|
|
- Shop
|
||
|
|
- (Future) Product Details
|
||
|
|
- (Future) Cart
|
||
|
|
|
||
|
|
### Information
|
||
|
|
|
||
|
|
- About
|
||
|
|
- Contact
|
||
|
|
- Blog
|
||
|
|
|
||
|
|
### Action
|
||
|
|
|
||
|
|
- Contact Form
|
||
|
|
- Add to Cart buttons
|
||
|
|
- (Future) Checkout
|
||
|
|
|
||
|
|
## 📝 Notes
|
||
|
|
|
||
|
|
- All pages use consistent header and footer
|
||
|
|
- Navigation is identical across all pages
|
||
|
|
- Responsive design works on all pages
|
||
|
|
- Each page has appropriate meta descriptions (to be added)
|
||
|
|
- All internal links are relative paths
|
||
|
|
- Image paths use consistent structure
|
||
|
|
- CSS and JS files are shared across all pages
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
**Last Updated**: December 1, 2025
|
||
|
|
**Total Pages**: 10 HTML pages
|
||
|
|
**Total Folders**: 8 folders
|
||
|
|
**Total CSS Files**: 1 (main.css)
|
||
|
|
**Total JS Files**: 1 (main.js)
|