Website for Lukastitch. Hi there! My name is Mimi and I have been a plushie artist since 2018. I have always loved plushies as a kid and now I hope my plushies bring others the same happiness!

7.5 KiB

Raw Permalink Blame History

Contribution Guidelines — lukastitch.corneruniverse.com

Project Overview

Purpose: Portfolio and showcase website for Luka Stitch, a handmade plushie business.

Audience: Potential customers interested in custom plushies, people browsing her work, and commission inquiries.

Primary Goals:

Showcase plushie creations with beautiful imagery
Communicate the handmade, personal nature of the work
Direct commission inquiries to Etsy
Build brand personality and connection

Note: This is NOT an e-commerce site. No direct purchases. Etsy handles transactions.

Design Direction

Aesthetic: Warm, cozy, handcrafted feel. The design should reflect the care and personality that goes into each plushie. Think craft fair booth, not corporate storefront.

Mood: Friendly, approachable, whimsical but not childish.

Color Palette: Soft, warm colors. Pastels or muted tones that complement plushie photography without competing. Define in /src/styles/variables.css.

Typography: Friendly and readable. A slightly playful heading font paired with a clean body font.

Imagery: Photography is central. The design should frame and highlight the plushie images, not distract from them.

Technical Standards

Vue 3 Conventions

Use Composition API with <script setup> syntax
Single File Components (.vue)
Scoped styles by default
TypeScript optional but prop types required

File Structure

src/
├── components/
│   ├── common/          # Reusable components (Button, Card)
│   ├── layout/          # Header, Footer, Navigation
│   └── sections/        # Page sections (HeroSection, GallerySection)
├── content/
│   ├── site-data.js     # General site content
│   └── plushies.js      # Plushie catalog data
├── styles/
│   ├── variables.css    # CSS custom properties
│   └── global.css       # Base styles, resets
├── assets/
│   └── images/
│       └── plushies/    # Plushie photos
├── App.vue
└── main.js

Component Guidelines

Naming:

PascalCase for component files: GallerySection.vue
Components should be self-contained with clear, single responsibilities
Prefix common components: BaseButton.vue, BaseCard.vue

Props:

<script setup>
defineProps({
  title: { type: String, required: true },
  image: { type: String, required: true },
  available: { type: Boolean, default: false }
})
</script>

Content Management

This is critical: The site owner will want to add new plushies regularly. Make this easy.

Plushie Catalog (/src/content/plushies.js):

export const plushies = [
  {
    id: 'cozy-bear',
    name: 'Cozy Bear',
    image: '/images/plushies/cozy-bear.jpg',
    description: 'A huggable friend for cold nights.',
    size: '12 inches',
    available: false,
    etsyLink: null
  },
  {
    id: 'sleepy-fox',
    name: 'Sleepy Fox',
    image: '/images/plushies/sleepy-fox.jpg',
    description: 'Always ready for a nap.',
    size: '10 inches',
    available: true,
    etsyLink: 'https://etsy.com/...'
  }
]

Site Content (/src/content/site-data.js):

export const hero = {
  title: "Luka Stitch",
  tagline: "Handmade plushies with love",
  description: "Each creation is one-of-a-kind, crafted with care."
}

export const about = {
  heading: "About",
  text: "...",
  image: "/images/about-photo.jpg"
}

export const contact = {
  heading: "Get in Touch",
  text: "Interested in a custom plushie? Reach out!",
  etsyLink: "https://etsy.com/shop/...",
  email: "[email protected]" // or null if not wanted
}

Styling

CSS Custom Properties (variables.css):

:root {
  /* Colors */
  --color-primary: #...;
  --color-secondary: #...;
  --color-background: #...;
  --color-text: #...;
  --color-accent: #...;
  
  /* Typography */
  --font-heading: '...', sans-serif;
  --font-body: '...', sans-serif;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  
  /* Gallery */
  --gallery-gap: 1rem;
  --card-radius: 8px;
}

Responsive Design:

Mobile-first approach
Gallery should be responsive: 1 column mobile, 2 tablet, 3-4 desktop
Images should scale beautifully at all sizes

Components to Build

Layout

AppHeader.vue — Logo/name, simple navigation
AppFooter.vue — Social links, copyright

Sections

HeroSection.vue — Brand name, tagline, featured image or plushie
GallerySection.vue — Grid of plushies from catalog
AboutSection.vue — The maker's story, photo
ContactSection.vue — How to reach out, Etsy link

Common

BaseButton.vue — Primary and secondary variants
PlushieCard.vue — Image, name, description, availability badge, Etsy link
SectionWrapper.vue — Consistent section padding and max-width
ImageLightbox.vue — Optional: click to enlarge plushie photos

Gallery & Image Handling

PlushieCard Component:

<template>
  <article class="plushie-card">
    <img :src="plushie.image" :alt="plushie.name" />
    <h3>{{ plushie.name }}</h3>
    <p>{{ plushie.description }}</p>
    <span v-if="plushie.available" class="badge available">Available</span>
    <span v-else class="badge sold">Sold</span>
    <a v-if="plushie.etsyLink" :href="plushie.etsyLink" target="_blank" rel="noopener">
      View on Etsy
    </a>
  </article>
</template>

Gallery Grid:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gallery-gap);
}

Image Guidelines:

Consistent aspect ratio preferred (square or 4:3)
Optimize images before adding (compress, reasonable resolution)
Use descriptive filenames: cozy-bear.jpg not IMG_3847.jpg
Alt text should describe the plushie

Adding New Plushies (Instructions for Site Owner)

Add the photo to /public/images/plushies/
Open /src/content/plushies.js
Add a new entry to the array:

{
  id: 'new-plushie-name',
  name: 'New Plushie Name',
  image: '/images/plushies/new-plushie-name.jpg',
  description: 'A short description.',
  size: '10 inches',
  available: true,
  etsyLink: 'https://etsy.com/listing/...'
}

Commit and push—the site auto-deploys

Accessibility

Semantic HTML: <header>, <main>, <section>, <footer>
Heading hierarchy: One <h1> per page, logical structure
Alt text for ALL plushie images (describe the plushie)
Sufficient color contrast
Links clearly identifiable

Performance

Optimize plushie photos before adding (use tools like Squoosh)
Consider lazy-loading gallery images
Keep the site lightweight—no heavy frameworks needed
Use loading="lazy" on images below the fold

Git Workflow

Branch Naming:

feat/add-gallery-section
fix/mobile-card-layout
content/add-new-plushies

Commit Messages:

feat: add plushie gallery with grid layout
fix: improve image scaling on mobile
content: add sleepy fox plushie

Do's and Don'ts

Do:

Make the plushies the star—design should highlight, not compete
Keep adding new plushies simple and documented
Optimize every image before adding
Test gallery on mobile
Use warm, inviting language

Don't:

Add e-commerce functionality (Etsy handles sales)
Use stock photos—only real plushie photography
Clutter the design—let the work speak
Forget alt text on images
Make the owner dig through code to add content

7.5 KiB Raw Permalink Blame History