# 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)
