Content Management

Adding New Artworks

Open /app/gallery/GalleryGrid.tsx
Add new artwork object to the artworks array with:

id: Unique number (increment from last)
title: Artwork title
category: One of the filter categories
year, size, price, paper, medium: Artwork details
story: Detailed description
image: URL to artwork image
alt: Accessibility description

Save the file to publish changes

Adding Blog Posts

Open /app/blog/[slug]/page.tsx
Add new post object to blogPosts with slug as key
Include title, excerpt, date, category, content array
Add slug to generateStaticParams() function
Content supports: paragraph, image, pullquote types

Editing Homepage Sections

Hero Slider: /components/HeroSlider.tsx
Artist Bio: /components/ArtistBio.tsx
Latest Works: /components/LatestWorks.tsx
Testimonials: /components/TestimonialSlider.tsx

Image Management

Image Upload Locations

Static Images: Place in /public/ folder
Artwork Images: Use external hosting or Stable Diffusion API
Blog Images: Reference in content blocks with proper alt text
Portrait/Bio Images: Update URLs in respective components

Image Optimization Tips

Use WebP format when possible for better compression
Artwork images: 800x1000px recommended for portraits
Hero images: 1200x600px for landscape orientation
Always include descriptive alt text for accessibility

Technical Configuration

Payment Integration (Stripe)

Create /lib/stripe.ts file
Add your Stripe configuration:

export const STRIPE_CONFIG = {
  publishableKey: 'pk_live_your_key_here',
  secretKey: 'sk_live_your_key_here'
};

Never commit secret keys to public repositories
Use test keys during development

SEO and Analytics

Meta Descriptions: Update in each page's metadata export
Google Analytics: Add tracking ID to layout.tsx
Search Console: Update verification code in layout.tsx
Canonical URLs: Already configured for all pages

Publishing Updates

Deployment Process

Test changes locally by running npm run dev
Build production version with npm run build
Fix any errors reported during build
Deploy to your hosting platform (Vercel, Netlify, etc.)
Verify changes are live and working correctly

Pre-Launch Checklist

✓ All images have proper alt text
✓ Contact forms are working
✓ All links are functional
✓ Mobile responsiveness tested
✓ Page load speeds are acceptable
✓ SEO metadata is complete

Ongoing Maintenance

Regular Tasks

Weekly: Add new artworks or blog posts
Monthly: Update testimonials and featured works
Quarterly: Review and update about page timeline
Annually: Update copyright year in footer

Performance Monitoring

Use Google PageSpeed Insights to check performance
Target scores: Performance ≥90, Accessibility ≥95, SEO ≥95
Monitor Core Web Vitals in Search Console
Check for broken links monthly

Need Help?

This website is built with Next.js and follows modern web standards for accessibility and performance. All code is organized in clearly labeled files and includes helpful comments.

For technical support or questions about implementing new features, refer to the Next.js documentation or consult with a web developer familiar with React applications.

Website Owner Manual