https://github.com/webbertakken/thembastribe-nl
The story about Themba, the Rhodesian Ridgeback
https://github.com/webbertakken/thembastribe-nl
blog dogs litter puppies rhodesian ridgeback
Last synced: 12 months ago
JSON representation
The story about Themba, the Rhodesian Ridgeback
- Host: GitHub
- URL: https://github.com/webbertakken/thembastribe-nl
- Owner: webbertakken
- Created: 2025-04-08T12:11:39.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-22T17:15:48.000Z (about 1 year ago)
- Last Synced: 2025-05-30T19:49:56.766Z (about 1 year ago)
- Topics: blog, dogs, litter, puppies, rhodesian, ridgeback
- Language: JavaScript
- Homepage: https://thembastribe.nl
- Size: 76.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Themba's Tribe
Website about Rhodesian Ridgeback Themba and her puppies.
## π Project Description
This website tells the story of Themba, a beautiful Rhodesian Ridgeback, and her upcoming litter of puppies. The site contains information about Themba, her partner Motsi van de PalsenborghΕve, the Rhodesian Ridgeback breed, and updates about the puppies.
## π Technology
- [Astro](https://astro.build/) - Web framework
- [Tailwind CSS](https://tailwindcss.com/) - For styling
- [React](https://reactjs.org/) - For interactive components
- [Framer Motion](https://www.framer.com/motion/) - For animations
## π§ Commands
| Command | Action |
| :----------------------- | :------------------------------------------------- |
| `pnpm install` | Install dependencies |
| `pnpm dev` | Start local dev server at `localhost:4321` |
| `pnpm build` | Build your production site to `./dist/` |
| `pnpm preview` | Preview your build locally, before deploying |
| `pnpm astro ...` | Run CLI commands like `astro add`, `astro check` |
| `pnpm astro -- --help` | Get help using the Astro CLI |
## π Project Structure
```
/
βββ public/
β βββ favicon.svg
βββ src/
β βββ content/
β β βββ photos/
β β βββ *.json
β βββ layouts/
β β βββ Layout.astro
β βββ pages/
β β βββ index.astro
β β βββ verhaal.astro
β β βββ pups.astro
β β βββ fotos.astro
β βββ styles/
β βββ global.css
βββ package.json
```
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
Any static assets, like images, can be placed in the `public/` directory.
## π Want to learn more?
Feel free to check [Astro documentation](https://docs.astro.build) or join their [Discord server](https://astro.build/chat).
## Image Optimization
This project uses several methods to optimize images:
### 1. Astro's Built-in Image Optimization
The website uses Astro's Image component for optimized image delivery:
- Automatic WebP format conversion
- Responsive sizing
- Lazy loading
- Width and height attributes to prevent layout shifts
### 2. Image Processing Scripts
There are two utility scripts for bulk image processing:
#### Optimize Images
Converts all images to optimized WebP format with appropriate compression:
```bash
npm run optimize-images
```
- Resizes very large images (>1920px wide)
- Applies different compression levels based on file size
- Converts all images to WebP format
- Reports size reduction statistics
#### Generate Thumbnails
Creates smaller thumbnail versions for gallery previews:
```bash
npm run generate-thumbnails
```
- Creates 300x200px thumbnails
- Uses WebP format with 70% quality
- Names files with "thumb-" prefix
### Image Asset Organization
Images are stored in three directories:
- `src/assets/images/` - Original imported images
- `src/assets/optimized/` - Optimized WebP versions
- `src/assets/thumbnails/` - Small preview thumbnails
### Best Practices
When adding new images:
1. Place the original images in `src/assets/images/`
2. Run optimization scripts: `npm run optimize-images && npm run generate-thumbnails`
3. Import and use the optimized images in your components
4. Specify width, height, and format in Astro Image components
5. Use the `loading="lazy"` attribute for below-the-fold images