IMDb

An implementation of Juxtopposed's IMDb redesign.

IMDb

Summary

🌊🐸
Year2024
Status✅ Completed
Tech
TypographyRoboto
HostingCloudflare Pages
Website LinkIMDb.

This is an implementation of the IMDb redesign by Juxtopposed. Here is the video if you'd like a detailed breakdown of the idea.

This is part of my Juxtopposed's redesign implementations. If you're interested, here is the previous one for Steam

In the spirit of correcting and improving myself [in future work], I made it responsive this time around. I improvised everything, but I'm content with how it turned out.

Tech Stack

The tech stack is the same as before, SvelteKit, and shadcn-svelte
However, for the first time, I decided to switch up the typography from Inter (the most elegant typeface) to Roboto in order to stay true to the original design specifications.

Details

Pages

This design was not overly bloated. It can be summed up into 4 pages and 5 modals/drawers, plus a few components.

Carousels

David Jerleke's Embla Carousel deserves all the time in the sun it can get, for this is truly a magnificent carousel library. That said, the fade-plugin is yet to arrive, and to that, I made hacks of my own to achieve fades in-between images. Luckily, Svelte has built-in transitions & animations, and this was easy to achieve.

An example can be found when opening the See all photos gallery on this page: https://imdb.shyakadavis.me/title#photos

Images

Another unbelievably cool library that I just got around to trying out is Matt Kane's framework-agnostic image component, - unpic-img
Can't believe it took me this long to see the beauty of the library. Here is a list of features it offers you out of the box.

This is different from @sveltejs/enhanced-img, in that Unpic has no build step, and it can dynamically optimize images from CDNs and CMSs, whereas @sveltejs/enhanced-img works only for local assets.

I mixed the two for this project - @sveltejs/enhanced-img for local images and Unpic for remote image URLs - and the experience was pleasant.

Lessons/Affirmations

  • Denis Villeneuve & Christopher Nolan are the greatest film directors of all time

Next Steps

The Wikipedia redesign is expected, but I wish to take a break from UI-only projects, and also work on integrated stuff as well. I'd only work on the Wikipedia redesign if I were to bring a backend-of-sorts to it. Coincidentally, after Jacob Bowdoin's Svelte Summit talk, I was really inspired to bring back an old personal project to life. Not sure, though. I'll look into the practicality/feasibility of the project before breaking ground.

P.S.

Long live the fighters.