generated from Nicholai/astro-template
133 lines
3.9 KiB
Markdown
133 lines
3.9 KiB
Markdown
# 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:
|
|
```bash
|
|
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](https://favicon.io)
|
|
- [RealFaviconGenerator](https://realfavicongenerator.net)
|
|
|
|
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
|