v3.0 - YOLO
This version adds the following improvements:
1. π§ Music Page
The 'Now Playing' feature I integrated with #16 received so much love from you all π₯°. I love indie music, & some people I have shared my music love my song recommendations too.
(don't believe me π? read below message)
Hence, I decided to make a dedicated page to show all of my music with fully dynamic Spotify API integration.
Now you can see everything listed below on Music Page:
Listings
All of this is powered by beautifully crafted hand-written custom hooks! π€―
Also, the listing has the favorite animation I've built to date - I'm obsessed with it.
- Top Tracks (with range customization)
- Favourite Playlist
- Recently Played Tracks
- Recently Saved Tracks
- Top Artists (with range customization)
- Recently Saved Tracks
Song Recommendation
After building above, I was happily satisfied with it. Showed it to a couple of friends and from one response, I got an idea of adding a form where you can suggest songs.
Previously there was only this section.
Now it has turned into this:
(you're free to appreciate my design skills in comments)
2. π YOLO Migration to Gatsby v3
- I don't know why I decided to do this, everything in my life was fine before. Anyways, I still did it & succeded π (after 654312 attempts). yay, YOLO! π»
- Also, migrated from
gastby-image
togatsby-plugin-image
- which is reaaaallllyyy good!
3. π π» YOLO Upgrade to styled-components v5
this had no breaking changes but still gave me YOLO vibes π
4. βΏ Reduced Animations (if preferred)
Added a usePrefersReducedAnimation
hook everywhere to reduce JS animation.
For CSS animation, add a media preference everywhere necessary.
5. π₯ Add Scriptified in Featured Projects
Moved Scriptified from other projects to featured.
6. π± Updated OG Images
I can design stuff 24*7.
7. β¨οΈ New Navigation & Menu Bar
- new nav bar (jo ki phat bhi raha hai shayad π)
- scrollbar styles
8. βΏ Focus Visible Polyfill
After adding a global focus style, I was getting styles when clicking also. :focus-visible
enters the chat! I have added it's polyfill as well because it's not fully supported by all browsers. (managing browser support sucks)
9. π Miscellaneous
- moved landing page queries to section components
- moved components to section
- added beautiful custom hooks
- used JSDoc for first time