I’ve been eager to experiment with Astro for some time, and this little venture gave me the right alternative. Gamers Membership is a proof of idea born from a collaboration with Alex Tkachev, whose Dribbble shot served as the muse for the design and animations. He not solely gave me permission to make use of it but in addition supplied invaluable suggestions all through the method.
Constructed with Astro 5.2, this was a improbable studying expertise for me, and I hope you discover it helpful, too!
Why Astro?
I wished to provide Astro a attempt due to its rising reputation amongst builders, and the expertise has been improbable. Astro’s hybrid method makes it straightforward to construct quick, static websites whereas incorporating animations and dynamic content material the place wanted. Its content material collections and View Transitions API supply highly effective but easy instruments for structuring and animating content material with out including pointless complexity.
What this experiment consists of
This experiment presents music artists in a grid view. Clicking on an artist takes you to their devoted web page, the place you may discover their style, albums, and particulars. Every album additionally has its personal web page, as a result of I wished so as to add one other stage within the navigation expertise.
Some key options
UI & Interplay Particulars
- Preloading: The homepage pictures are preloaded utilizing imagesLoaded, making certain a clean entry impact as they animate in one after the other.
- World picture fade-in: On non-homepage pages, pictures fade in solely after loading, for higher perceived efficiency and person expertise.
- Type, shuffle, and search options: A easy proof-of-concept permits customers to dynamically reorder, search/filter the artist grid.
File Construction
Right here’s a fast overview of the core construction:
.
├── astro.config.mjs
├── package deal.json
├── public
│ ├── pictures
│ │ ├── albums
│ │ ├── artists
│ └── playersclub-og.jpg
├── src
│ ├── parts
│ │ ├── AlbumCard.astro
│ │ ├── ArtistCard.astro
│ │ ├── Preloader.astro
│ │ ├── SmoothScroll.astro
│ │ └── Tooltip.astro
│ ├── pages
│ │ ├── [artist_id].astro
│ │ ├── [artist_id]/albums/[album_id].astro
│ │ ├── index.astro
│ │ ├── historical past.astro
│ │ ├── releases.astro
│ ├── scripts
│ │ ├── gridActions.js
│ │ ├── preloader.js
│ │ ├── smoothscroll.js
│ └── types
│ └── world.css
└── tsconfig.jsonAnd listed here are the principle pages:
Give it a go!
I actually loved placing this venture collectively, and it’s been a enjoyable option to discover what Astro can do. In case you’re additionally experimenting with Astro or simply curious, be at liberty to test it out, mess around with it, or modify it in your personal initiatives. Understand that that is results of my studying expertise and that many issues could be improved right here. Parts could be laid out method higher right here and I’m certain you could possibly streamline the styling with Tailwind CSS, if that’s your factor. As all the time, I’m pleased to obtain your pull requests!
I’d love to listen to your ideas or see what you do with it! Did you utilize Astro already? Would love to listen to your opinion and what you’ve constructed with it!
