Proud of the new design of my personal website, aka my "digital living room". Built with #nextjs #tailwindcss and deployed with #vercel.
I especially like the overview of my read books. I get the data directly from the #literalclub API. The thickness of the books is based on the correct page number.

@iamrobin

โ€ชWould love to see the animations on mobile. Maybe an animation on focus (double tap to open the link?), short delay before the link opens or โ€ฌsomething with IntersectionObserver?

@mariohamann It's definitely a pity that the animations are disabled on mobile for now. But I didn't want to slow down the usability just so you can see the animation. I like the idea with the IntersectionOberserver though ๐Ÿ™Œ
@iamrobin What about having a "long press" interaction for touch devices? During press the animation runs, a loading bar loads up and at the end the link is opened? See attached sketch.
@iamrobin That's really great! And, of course, the music page is awesome as well. ๐Ÿ˜Š

Today I have finished the music subpage. Among other things, my public Spotify playlists are linked. They also got new covers โ€“ which I am especially proud of!

https://www.iamrob.in/media/music

#tailwindcss #nextjs

iamrobin

Added my top albums to the music page and tried to add some eye candy again on hover. Can you somehow relate to my top albums? ๐Ÿ˜ Based on my @lastfm data, tracked since 2014.

https://iamrob.in/media/music

#buildinpublic #tailwindcss #nextjs

iamrobin

before I go blind when I tinker with my site at night - I quickly added a dark mode ๐ŸŒ™ Thanks to tailwind and the next-themes module no big problem.

#buildinpublic

@iamrobin That looks very nice, well done! ๐Ÿ‘
@domhabersack thanks Dom ๐Ÿ˜Š
@iamrobin Howโ€™d you add those scribbles and lines? I came across something like that a while ago but canโ€™t remember what it was called.
@domhabersack I use a wonderful library for this:
https://roughnotation.com/
RoughNotation

A small JavaScript library to create and animate hand-drawn annotations on a web page

@iamrobin Oh yes that is the one I meant, thanks for refreshing my memory! I definitely have a good project I could use that in now.
@iamrobin Clean site! Really love the book API tie in and displays. Definitely some inspo there. Were the 3D books all accomplished in Tailwind?
@McKinney Thanks! Most of the 3D animation is accomplished in Tailwind. Only for the transform logic I've used vanilla css โ€“ because it would have become too confusing in Tailwind.
@iamrobin I LOVE it.
@marcel Thank you Marcel! Means a lot to me โ€“ especially because you and your work inspire me for years.