0933c8208c
- Created CONTRIBUTING.md to outline contribution process and code of conduct. - Added LICENSE file with MIT License and third-party licenses. - Introduced SECURITY.md detailing vulnerability reporting and security measures. - Established README.md in assets directory for asset management and guidelines. - Implemented index.html as the main entry point for the website. - Configured package.json for project dependencies and scripts. - Developed styles.css for custom styles and responsive design. - Set up vite.config.ts for Vite configuration and build settings.
158 lines
4.7 KiB
Markdown
158 lines
4.7 KiB
Markdown
# Required Assets for Miracles In Motion Website
|
|
|
|
This directory contains all the assets needed for the website to function properly.
|
|
|
|
## Images Directory Structure
|
|
|
|
```
|
|
assets/images/
|
|
├── logo.png # Main organization logo (200x200px recommended)
|
|
├── logo-white.png # White version for dark backgrounds
|
|
├── favicon.ico # Website favicon (32x32px)
|
|
├── hero-bg.jpg # Hero section background image (1920x1080px)
|
|
├── og-image.jpg # Open Graph image for social sharing (1200x630px)
|
|
├── team/ # Team member photos
|
|
│ ├── director-1.jpg
|
|
│ ├── director-2.jpg
|
|
│ └── volunteer-1.jpg
|
|
├── impact/ # Photos showing impact
|
|
│ ├── students-1.jpg
|
|
│ ├── supplies-1.jpg
|
|
│ └── distribution-1.jpg
|
|
└── sponsors/ # Sponsor/partner logos
|
|
├── school-district.png
|
|
├── local-business.png
|
|
└── community-org.png
|
|
```
|
|
|
|
## Documents Directory
|
|
|
|
```
|
|
assets/documents/
|
|
├── 501c3-certificate.pdf # IRS determination letter
|
|
├── financial-report.pdf # Latest annual financial report
|
|
├── form-990.pdf # Latest Form 990
|
|
├── privacy-policy.pdf # Privacy policy document
|
|
├── terms-of-service.pdf # Terms of service
|
|
├── donor-privacy-policy.pdf # Donor privacy policy
|
|
├── volunteer-handbook.pdf # Volunteer handbook
|
|
├── gift-acceptance-policy.pdf # Gift acceptance policy
|
|
├── annual-report-2024.pdf # Latest annual report
|
|
└── impact-report-2024.pdf # Impact measurement report
|
|
```
|
|
|
|
## Image Specifications
|
|
|
|
### Logo Requirements
|
|
- **Format**: PNG with transparency
|
|
- **Size**: 200x200px (minimum), SVG preferred
|
|
- **Variants**: Color, white, and dark versions
|
|
- **Usage**: Navigation, footer, social sharing
|
|
|
|
### Hero Images
|
|
- **Format**: WebP preferred, JPG fallback
|
|
- **Size**: 1920x1080px minimum
|
|
- **Quality**: High quality, compressed for web
|
|
- **Content**: Students, supplies, or community impact
|
|
|
|
### Team Photos
|
|
- **Format**: WebP preferred, JPG fallback
|
|
- **Size**: 400x400px minimum
|
|
- **Style**: Professional, consistent lighting
|
|
- **Requirements**: Signed photo releases on file
|
|
|
|
### Impact Photos
|
|
- **Format**: WebP preferred, JPG fallback
|
|
- **Size**: Various sizes for responsive design
|
|
- **Privacy**: No identifiable students without permission
|
|
- **Alt Text**: Descriptive text for accessibility
|
|
|
|
## Content Guidelines
|
|
|
|
### Photography
|
|
- Focus on positive, uplifting imagery
|
|
- Show diverse representation
|
|
- Maintain dignity and respect for all subjects
|
|
- Obtain proper releases for all identifiable people
|
|
- Follow child protection policies
|
|
|
|
### Document Standards
|
|
- **Format**: PDF preferred for official documents
|
|
- **Accessibility**: Ensure PDFs are accessible
|
|
- **Size**: Optimize for web delivery
|
|
- **Updates**: Keep current versions, archive old ones
|
|
|
|
## File Naming Convention
|
|
|
|
- Use lowercase letters
|
|
- Use hyphens for spaces
|
|
- Include version dates for documents
|
|
- Be descriptive but concise
|
|
|
|
Examples:
|
|
- `annual-report-2024.pdf`
|
|
- `hero-students-supplies.jpg`
|
|
- `team-sarah-director.jpg`
|
|
- `logo-miracles-in-motion.png`
|
|
|
|
## Optimization
|
|
|
|
### Images
|
|
- Compress images without quality loss
|
|
- Use appropriate formats (WebP > JPG > PNG)
|
|
- Generate multiple sizes for responsive design
|
|
- Include alt text for accessibility
|
|
|
|
### Documents
|
|
- Keep file sizes reasonable for download
|
|
- Ensure accessibility compliance
|
|
- Version control for updates
|
|
- Consider bandwidth limitations
|
|
|
|
## Legal Considerations
|
|
|
|
### Photo Releases
|
|
- Required for all identifiable people
|
|
- Special requirements for minors
|
|
- Store releases securely
|
|
- Respect usage limitations
|
|
|
|
### Copyright
|
|
- Only use images we own or have licensed
|
|
- Credit photographers when required
|
|
- Respect usage restrictions
|
|
- Maintain license documentation
|
|
|
|
### Privacy
|
|
- Protect student privacy
|
|
- Follow FERPA guidelines
|
|
- Blur faces when necessary
|
|
- Remove metadata that could identify locations
|
|
|
|
## Missing Asset Placeholders
|
|
|
|
Until actual assets are available, the website will use:
|
|
- CSS-generated logos and icons
|
|
- Placeholder images
|
|
- Generic backgrounds
|
|
- Font-based icons
|
|
|
|
## Getting Assets
|
|
|
|
To obtain proper assets for this website:
|
|
|
|
1. **Logo**: Contact the organization's brand manager
|
|
2. **Photos**: Coordinate with program staff for approved images
|
|
3. **Documents**: Request from legal/administrative team
|
|
4. **Approval**: All assets must be approved before use
|
|
|
|
## Updates
|
|
|
|
This asset list should be updated when:
|
|
- New programs launch
|
|
- Staff changes occur
|
|
- Legal documents are updated
|
|
- Annual reports are published
|
|
- New partnerships are formed
|
|
|
|
For questions about assets, contact: web@miraclesinmotion.org |