703ab57984
- Added /admin redirect to login page in nginx config - Fixed backend server.js route ordering for proper admin handling - Updated authentication middleware and routes - Added user management routes - Configured PostgreSQL integration - Updated environment configuration
8.9 KiB
8.9 KiB
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)
- Home (
index.html) - Landing page - Portfolio (
portfolio.html) - Work showcase - Shop (
shop.html) - Products catalog - About (
about.html) - Company info - Contact (
contact.html) - Contact form - Blog (
blog.html) - Blog posts
Portfolio Category Pages (4)
- Displays (
portfolio/displays.html) - Personal Craft Projects (
portfolio/personal-craft-projects.html) - Card Making (
portfolio/card-making.html) - 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
- Navigation Bar
- Hero Section
- Our Inspiration
- Explore Collection
- Promotion
- Top Sellers
- Footer
Portfolio Page Sections
- Navigation Bar
- Hero Section
- Portfolio Gallery (4 categories)
- Footer
Shop Page Sections
- Navigation Bar
- Hero Section
- Filter Bar
- Products Grid (12 products)
- Footer
About Page Sections
- Navigation Bar
- Hero Section
- Our Story
- What We Offer
- Our Values
- Footer
Contact Page Sections
- Navigation Bar
- Hero Section
- Contact Information
- Contact Form
- Footer
Blog Page Sections
- Navigation Bar
- Hero Section
- Blog Posts Grid (6 posts)
- 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
- Product detail pages
- Individual project pages
- Shopping cart page
- Checkout page
- User account pages
- Blog post detail pages
- Privacy policy page
- Terms of service page
- FAQ page
- Testimonials page
Potential New Features
- Search functionality
- Product reviews
- Wishlist functionality
- Newsletter signup
- Live chat
- Social media feed integration
- Image lightbox/gallery viewer
- Video content
- Customer login area
- 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)