Notes

I found an easy and fast way to update my readings page whitouth make a new collection and write the mdx files. Basically, Astro consumes a JSON file and loop through items separated by year.

[{
    "title": "Guerra do Velho",
    "author": "John Scalzi",
    "coverUrl": "/uploads/images/books/guerra-do-velho.webp",
    "status": "reading",
    "year": 2024
}]

The effect and animation on the cover are done with just CSS. It’s a gradient over the image. I created this effect in Figma and Welinton implemented it with these nice animations.