summit-painting-handyman/public/media/PLACEHOLDER_ASSETS.md

Placeholder Media Assets

This template references several media files that need to be replaced with your own content.

Required Assets to Replace

Images (src/assets/)

The following images in src/assets/ are currently placeholders and should be replaced with your own:

1. nicholai-closeup-portrait.avif

   • Purpose: Used in various components
   • Recommended dimensions: 800x800px minimum
   • Format: AVIF (use pnpm convert:avif:all to convert)

2. nicholai-medium-portrait.avif

   • Purpose: Default OG (Open Graph) image for social media shares
   • Referenced in: src/components/BaseHead.astro:6
   • Recommended dimensions: 1200x630px (Open Graph standard)
   • Format: AVIF

3. g-star-image.avif

   • Purpose: Project/case study imagery
   • Referenced in: Blog post hero images
   • Recommended dimensions: 1920x1080px or larger
   • Format: AVIF

4. claude-nuke.avif

   • Purpose: Blog post hero image
   • Recommended dimensions: 1920x1080px or larger
   • Format: AVIF

5. foxrenderfarm-arch-linux.avif

   • Purpose: Blog post hero image
   • Recommended dimensions: 1920x1080px or larger
   • Format: AVIF

6. PENCIL_1.3.1_wipe.avif

   • Purpose: Blog post hero image
   • Recommended dimensions: 1920x1080px or larger
   • Format: AVIF

Videos (public/media/)

The following video files need to be replaced:

1. placeholder-video.mp4

   • Purpose: Featured project video, blog post demonstrations
   • Referenced in: src/content/sections/featured-project.mdx:18
   • Recommended: MP4 format, H.264 codec
   • Max file size: Keep under 50MB for good performance
   • Dimensions: 1920x1080px or 3840x2160px (4K)

2. GSTR_01_260_breakdown.mp4 (Remove/Replace)

   • Purpose: Project breakdown video
   • Should be replaced with your own project video

3. GSTR_03_070_v10_breakdown_v01.mp4 (Remove/Replace)

   • Purpose: Project breakdown video
   • Should be replaced with your own project video

Favicons (public/)

These should be customized with your own branding:

1. favicon.ico
2. favicon-32.png
3. favicon-192.png
4. apple-touch-icon.png
5. favicon.svg
6. favicon.JPG (appears to be personal, should be replaced)

Profile Images (public/media/)

1. nicholai-wild-portrait.JPEG
   • Replace with your own portrait
   • Recommended dimensions: 1200x1200px or larger

How to Add Your Own Assets

For Images

1. Place your images in the appropriate directory:

   • Processed images: src/assets/ (these get optimized by Astro)
   • Static images: public/media/ (served as-is)

2. Convert to AVIF for best performance:

   pnpm convert:avif:all
   

3. Update references:

   • Blog post frontmatter (heroImage field)
   • Section MDX files in src/content/sections/
   • Default OG image in src/components/BaseHead.astro

For Videos

1. Optimize your video:

   • Use H.264 codec for MP4
   • Keep file size reasonable (< 50MB if possible)
   • Consider providing multiple resolutions

2. Place in public/media/

3. Update references:

   • src/content/sections/featured-project.mdx (videoUrl field)
   • Blog posts where videos are embedded

For Favicons

1. Generate favicons from your logo/brand mark using a tool like:

   • favicon.io
   • RealFaviconGenerator

2. Replace files in public/

Quick Replace Checklist

• Default OG image (src/assets/nicholai-medium-portrait.avif)
• All blog post hero images
• Featured project video (/media/placeholder-video.mp4)
• Favicon set (ico, png, svg)
• Remove or replace personal videos (GSTR files)
• Profile/portrait images

Notes

• AVIF format is recommended for images as it provides excellent compression
• The template includes a conversion utility: pnpm convert:avif:all
• Always optimize images before uploading (compress, resize)
• Consider using a CDN for large media files in production