Summary
🌊 | 🐸 |
---|---|
Year | 2024 |
Status | ✅ Completed |
Tech | |
Typography | Roboto |
Hosting | Cloudflare Pages |
Website Link | IMDb. |
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.